diff --git a/_config.yml b/_config.yml
index ae9d133a1..a91e510e8 100644
--- a/_config.yml
+++ b/_config.yml
@@ -1,7 +1,7 @@
 source: pages
 destination: tmp
 
-version: 1.0.0-alpha.5
+version: 1.0.0-alpha.6
 title: Tabler
 description: Premium and Open Source dashboard template with responsive and high quality UI.
 github_url: https://github.com/tabler/tabler
diff --git a/demo/400.html b/demo/400.html
index 19e45d08f..b9efea568 100644
--- a/demo/400.html
+++ b/demo/400.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -60,7 +60,12 @@
           </p>
           <div class="empty-action">
             <a href="./." class="btn btn-primary">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z"/>
+                <line x1="5" y1="12" x2="19" y2="12" />
+                <line x1="5" y1="12" x2="11" y2="18" />
+                <line x1="5" y1="12" x2="11" y2="6" />
+              </svg>
               Take me home
             </a>
           </div>
@@ -70,71 +75,8 @@
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.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-revenue-bg'), {
-      		chart: {
-      			type: "area",
-      			fontFamily: 'inherit',
-      			height: 40.0,
-      			sparkline: {
-      				enabled: true
-      			},
-      			animations: {
-      				enabled: false
-      			},
-      		},
-      		dataLabels: {
-      			enabled: false,
-      		},
-      		fill: {
-      			opacity: .16,
-      			type: 'solid'
-      		},
-      		stroke: {
-      			width: 2,
-      			lineCap: "round",
-      			curve: "smooth",
-      		},
-      		series: [{
-      			name: "Profits",
-      			data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67]
-      		}],
-      		grid: {
-      			strokeDashArray: 4,
-      		},
-      		xaxis: {
-      			labels: {
-      				padding: 0
-      			},
-      			tooltip: {
-      				enabled: false
-      			},
-      			axisBorder: {
-      				show: false,
-      			},
-      			type: 'datetime',
-      		},
-      		yaxis: {
-      			labels: {
-      				padding: 4
-      			},
-      		},
-      		labels: [
-      			'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19'
-      		],
-      		colors: ["#206bc4"],
-      		legend: {
-      			show: false,
-      		},
-      	})).render();
-      });
-      // @formatter:on
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/401.html b/demo/401.html
index 35267c3c4..65872e02d 100644
--- a/demo/401.html
+++ b/demo/401.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -60,7 +60,12 @@
           </p>
           <div class="empty-action">
             <a href="./." class="btn btn-primary">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z"/>
+                <line x1="5" y1="12" x2="19" y2="12" />
+                <line x1="5" y1="12" x2="11" y2="18" />
+                <line x1="5" y1="12" x2="11" y2="6" />
+              </svg>
               Take me home
             </a>
           </div>
diff --git a/demo/403.html b/demo/403.html
index c8aaaaaa5..c8c4db4c3 100644
--- a/demo/403.html
+++ b/demo/403.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -60,7 +60,12 @@
           </p>
           <div class="empty-action">
             <a href="./." class="btn btn-primary">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z"/>
+                <line x1="5" y1="12" x2="19" y2="12" />
+                <line x1="5" y1="12" x2="11" y2="18" />
+                <line x1="5" y1="12" x2="11" y2="6" />
+              </svg>
               Take me home
             </a>
           </div>
diff --git a/demo/404.html b/demo/404.html
index 4b3286a22..89b5a09b1 100644
--- a/demo/404.html
+++ b/demo/404.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -60,7 +60,12 @@
           </p>
           <div class="empty-action">
             <a href="./." class="btn btn-primary">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z"/>
+                <line x1="5" y1="12" x2="19" y2="12" />
+                <line x1="5" y1="12" x2="11" y2="18" />
+                <line x1="5" y1="12" x2="11" y2="6" />
+              </svg>
               Take me home
             </a>
           </div>
diff --git a/demo/500.html b/demo/500.html
index ba21d27c5..86de849e1 100644
--- a/demo/500.html
+++ b/demo/500.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -60,7 +60,12 @@
           </p>
           <div class="empty-action">
             <a href="./." class="btn btn-primary">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z"/>
+                <line x1="5" y1="12" x2="19" y2="12" />
+                <line x1="5" y1="12" x2="11" y2="18" />
+                <line x1="5" y1="12" x2="11" y2="6" />
+              </svg>
               Take me home
             </a>
           </div>
diff --git a/demo/503.html b/demo/503.html
index a4eebc8d0..db7dee191 100644
--- a/demo/503.html
+++ b/demo/503.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -60,7 +60,12 @@
           </p>
           <div class="empty-action">
             <a href="./." class="btn btn-primary">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z"/>
+                <line x1="5" y1="12" x2="19" y2="12" />
+                <line x1="5" y1="12" x2="11" y2="18" />
+                <line x1="5" y1="12" x2="11" y2="6" />
+              </svg>
               Take me home
             </a>
           </div>
diff --git a/demo/all.html b/demo/all.html
index 1819649df..f979e51f5 100644
--- a/demo/all.html
+++ b/demo/all.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -542,8 +607,8 @@
                 <div class="card-body">
                   <ul>
                     <li>
-                      <a href="/search-results.html">
-                        search-results.html
+                      <a href="/layout-condensed-dark.html">
+                        layout-condensed-dark.html
                       </a>
                     </li>
                     <li>
@@ -576,6 +641,51 @@
                         tmp-dark.html
                       </a>
                     </li>
+                    <li>
+                      <a href="/layout-vertical.html">
+                        layout-vertical.html
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-vertical-right.html">
+                        layout-vertical-right.html
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-navbar-dark.html">
+                        layout-navbar-dark.html
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-horizontal.html">
+                        layout-horizontal.html
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-fluid.html">
+                        layout-fluid.html
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-fluid-vertical.html">
+                        layout-fluid-vertical.html
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-dark.html">
+                        layout-dark.html
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-condensed.html">
+                        layout-condensed.html
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-combo.html">
+                        layout-combo.html
+                      </a>
+                    </li>
                     <li>
                       <a href="/terms-of-service.html">
                         terms-of-service.html
@@ -591,9 +701,22 @@
                         sitemap.xml
                       </a>
                     </li>
+                    <li>
+                      <a href="/search-results.html">
+                        search-results.html
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/navigation.html">
+                        navigation.html
+                      </a>
+                    </li>
                     <li>
                       <a href="/blank.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                         Blank page
                       </a>
                     </li>
@@ -604,7 +727,10 @@
                     </li>
                     <li>
                       <a href="/buttons.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                         Buttons
                       </a>
                     </li>
@@ -620,13 +746,19 @@
                     </li>
                     <li>
                       <a href="/carousel.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                         Carousel
                       </a>
                     </li>
                     <li>
                       <a href="/changelog.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                         Changelog
                       </a>
                     </li>
@@ -637,13 +769,19 @@
                     </li>
                     <li>
                       <a href="/crypto-currencies.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                         Crypto currencies
                       </a>
                     </li>
                     <li>
                       <a href="/docs.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                         Documentation
                       </a>
                     </li>
@@ -659,13 +797,19 @@
                     </li>
                     <li>
                       <a href="/empty.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                         Empty page
                       </a>
                     </li>
                     <li>
                       <a href="/flags.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                         Flags
                       </a>
                     </li>
@@ -681,13 +825,19 @@
                     </li>
                     <li>
                       <a href="/gallery.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                         Gallery
                       </a>
                     </li>
                     <li>
                       <a href="/charts-heatmap.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                         Heatmap Charts
                       </a>
                     </li>
@@ -718,7 +868,10 @@
                     </li>
                     <li>
                       <a href="/maintenance.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                         Maintenance mode
                       </a>
                     </li>
@@ -744,37 +897,55 @@
                     </li>
                     <li>
                       <a href="/400.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                         Page 400
                       </a>
                     </li>
                     <li>
                       <a href="/401.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                         Page 401
                       </a>
                     </li>
                     <li>
                       <a href="/403.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                         Page 403
                       </a>
                     </li>
                     <li>
                       <a href="/404.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                         Page 404
                       </a>
                     </li>
                     <li>
                       <a href="/500.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                         Page 500
                       </a>
                     </li>
                     <li>
                       <a href="/503.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                         Page 503
                       </a>
                     </li>
@@ -785,7 +956,10 @@
                     </li>
                     <li>
                       <a href="/pricing.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                         Pricing cards
                       </a>
                     </li>
@@ -801,7 +975,10 @@
                     </li>
                     <li>
                       <a href="/ribbons.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                         Ribbons
                       </a>
                     </li>
@@ -822,7 +999,10 @@
                     </li>
                     <li>
                       <a href="/social.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                         Social elements
                       </a>
                     </li>
@@ -838,19 +1018,28 @@
                     </li>
                     <li>
                       <a href="/tabs.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                         Tabs
                       </a>
                     </li>
                     <li>
                       <a href="/typography.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                         Typography
                       </a>
                     </li>
                     <li>
                       <a href="/users.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                        <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"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                         Users list
                       </a>
                     </li>
@@ -885,185 +1074,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/blank.html b/demo/blank.html
index 99d24dea9..a333d7353 100644
--- a/demo/blank.html
+++ b/demo/blank.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container d-flex flex-column justify-content-center">
+        <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" class="h-8 mb-4" alt="">
@@ -531,7 +596,11 @@
             </p>
             <div class="empty-action">
               <a href="./." class="btn btn-primary">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                  <path stroke="none" d="M0 0h24v24H0z"/>
+                  <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>
@@ -557,185 +626,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/blog.html b/demo/blog.html
index c6e5cedbe..938ef32d5 100644
--- a/demo/blog.html
+++ b/demo/blog.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -172,14 +244,31 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </li>
+              <li class="nav-item active 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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -548,7 +613,10 @@
                     </div>
                     <div class="ml-auto">
                       <a href="#" class="icon d-none d-md-inline-block ml-3 text-red">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                        </svg>
                       </a>
                     </div>
                   </div>
@@ -571,7 +639,10 @@
                     </div>
                     <div class="ml-auto">
                       <a href="#" class="icon d-none d-md-inline-block ml-3 text-red">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                        </svg>
                       </a>
                     </div>
                   </div>
@@ -594,7 +665,10 @@
                     </div>
                     <div class="ml-auto">
                       <a href="#" class="icon d-none d-md-inline-block ml-3 text-red">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                        </svg>
                       </a>
                     </div>
                   </div>
@@ -614,7 +688,10 @@
                     </div>
                     <div class="ml-auto">
                       <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                        </svg>
                       </a>
                     </div>
                   </div>
@@ -634,7 +711,10 @@
                     </div>
                     <div class="ml-auto">
                       <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                        </svg>
                       </a>
                     </div>
                   </div>
@@ -654,7 +734,10 @@
                     </div>
                     <div class="ml-auto">
                       <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                        </svg>
                       </a>
                     </div>
                   </div>
@@ -681,7 +764,10 @@
                         </div>
                         <div class="ml-auto">
                           <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z"/>
+                              <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                            </svg>
                           </a>
                         </div>
                       </div>
@@ -710,7 +796,10 @@
                         </div>
                         <div class="ml-auto">
                           <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z"/>
+                              <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                            </svg>
                           </a>
                         </div>
                       </div>
@@ -739,7 +828,10 @@
                         </div>
                         <div class="ml-auto">
                           <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z"/>
+                              <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                            </svg>
                           </a>
                         </div>
                       </div>
@@ -768,7 +860,10 @@
                         </div>
                         <div class="ml-auto">
                           <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z"/>
+                              <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                            </svg>
                           </a>
                         </div>
                       </div>
@@ -799,185 +894,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/buttons.html b/demo/buttons.html
index c7b0bbecf..c54165299 100644
--- a/demo/buttons.html
+++ b/demo/buttons.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -1389,185 +1454,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/calendar.html b/demo/calendar.html
index 4519f255e..21266658f 100644
--- a/demo/calendar.html
+++ b/demo/calendar.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -533,7 +598,11 @@
               <div class="col-auto ml-auto d-print-none">
                 <div class="d-flex">
                   <a href="#" class="btn btn-primary">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path stroke="none" d="M0 0h24v24H0z"/>
+                      <line x1="12" y1="5" x2="12" y2="19" />
+                      <line x1="5" y1="12" x2="19" y2="12" />
+                    </svg>
                     Add event
                   </a>
                 </div>
@@ -572,7 +641,11 @@
           <div class="modal-header">
             <h5 class="modal-title">New report</h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z"/>
+                <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">
@@ -585,11 +658,11 @@
               <div class="col-lg-6">
                 <label class="form-selectgroup-item">
                   <input type="radio" name="report-type" value="1" class="form-selectgroup-input" checked>
-                  <div class="form-selectgroup-box d-flex align-items-center p-3">
+                  <div class="form-selectgroup-label d-flex align-items-center p-3">
                     <div class="mr-3">
                       <span class="form-selectgroup-check"></span>
                     </div>
-                    <div class="form-selectgroup-box-content">
+                    <div class="form-selectgroup-label-content">
                       <div class="form-selectgroup-title strong mb-1">Simple</div>
                       <div class="text-muted">Provide only basic data needed for the report</div>
                     </div>
@@ -599,11 +672,11 @@
               <div class="col-lg-6">
                 <label class="form-selectgroup-item">
                   <input type="radio" name="report-type" value="1" class="form-selectgroup-input">
-                  <div class="form-selectgroup-box d-flex align-items-center p-3">
+                  <div class="form-selectgroup-label d-flex align-items-center p-3">
                     <div class="mr-3">
                       <span class="form-selectgroup-check"></span>
                     </div>
-                    <div class="form-selectgroup-box-content">
+                    <div class="form-selectgroup-label-content">
                       <div class="form-selectgroup-title strong mb-1">Advanced</div>
                       <div class="text-muted">Insert charts and additional advanced analyses to be inserted in the report</div>
                     </div>
@@ -616,11 +689,9 @@
                 <div class="mb-3">
                   <label class="form-label">Report url</label>
                   <div class="input-group input-group-flat">
-                    <div class="input-group-prepend">
-                      <span class="input-group-text">
-                        https://tabler.io/reports/
-                      </span>
-                    </div>
+                    <span class="input-group-text">
+                      https://tabler.io/reports/
+                    </span>
                     <input type="text" class="form-control pl-0"  value="report-01">
                   </div>
                 </div>
@@ -664,74 +735,17 @@
               Cancel
             </a>
             <a href="#" class="btn btn-primary ml-auto" data-dismiss="modal">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z"/>
+                <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>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
@@ -817,119 +831,6 @@
          })).render();
       });
     </script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/cards.html b/demo/cards.html
index 3098a385d..ba0446222 100644
--- a/demo/cards.html
+++ b/demo/cards.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -607,7 +672,10 @@
                     </li>
                     <li class="nav-item">
                       <a class="nav-link" href="#">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                        <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"/>
+                          <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                        </svg>
                         Link
                       </a>
                     </li>
@@ -618,7 +686,11 @@
                     </li>
                     <li class="nav-item ml-auto">
                       <a class="nav-link" href="#">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <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.37.996.608 2.296.07 2.572-1.065z" />
+                          <circle cx="12" cy="12" r="3" />
+                        </svg>
                       </a>
                     </li>
                   </ul>
@@ -638,7 +710,10 @@
                     </li>
                     <li class="nav-item">
                       <a class="nav-link" href="#">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                        <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"/>
+                          <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                        </svg>
                         Link
                       </a>
                     </li>
@@ -649,7 +724,11 @@
                     </li>
                     <li class="nav-item ml-auto">
                       <a class="nav-link" href="#">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <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.37.996.608 2.296.07 2.572-1.065z" />
+                          <circle cx="12" cy="12" r="3" />
+                        </svg>
                       </a>
                     </li>
                   </ul>
@@ -682,7 +761,11 @@
                   </p>
                   <div class="empty-action">
                     <a href="./." class="btn btn-primary">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <circle cx="10" cy="10" r="7" />
+                        <line x1="21" y1="21" x2="15" y2="15" />
+                      </svg>
                       Search again
                     </a>
                   </div>
@@ -788,7 +871,7 @@
             <div class="col-md-6 col-xl-8">
               <div class="card">
                 <div class="row row-0">
-                  <div class="col-md-3">
+                  <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">
@@ -802,7 +885,7 @@
               </div>
               <div class="card">
                 <div class="row row-0">
-                  <div class="col-md-3 order-md-last">
+                  <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">
@@ -1025,186 +1108,12 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.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() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       (function () {
       	/**
diff --git a/demo/carousel.html b/demo/carousel.html
index 0a6321717..189b95fda 100644
--- a/demo/carousel.html
+++ b/demo/carousel.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -714,185 +779,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/changelog.html b/demo/changelog.html
index f288b7940..2f7d523fd 100644
--- a/demo/changelog.html
+++ b/demo/changelog.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -533,15 +598,6 @@
           </div>
           <div class="card card-lg">
             <div class="card-body markdown">
-              <div class="mb-4">
-                <div class="mb-2">
-                  <span class="badge bg-blue-lt">1.0.0</span> —
-                  <span class="text-muted">March 28, 2020</span>
-                </div>
-                <div>
-                  <p>Coming soon</p>
-                </div>
-              </div>
             </div>
           </div>
         </div>
@@ -565,185 +621,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/charts-heatmap.html b/demo/charts-heatmap.html
index 35fbfaf98..109cf2b1c 100644
--- a/demo/charts-heatmap.html
+++ b/demo/charts-heatmap.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -785,185 +850,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/charts.html b/demo/charts.html
index 3099fcd38..5d14c8d9a 100644
--- a/demo/charts.html
+++ b/demo/charts.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       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
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -715,67 +780,6 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
@@ -2278,119 +2282,6 @@
       });
       // @formatter:on
     </script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/components.html b/demo/components.html
index a9a603588..ee8323695 100644
--- a/demo/components.html
+++ b/demo/components.html
@@ -2,11 +2,11 @@
 <html lang="en-US">
   <meta charset="utf-8">
   <title>Redirecting…</title>
-  <link rel="canonical" href="./components/card-buttons.html">
-  <meta http-equiv="refresh" content="0; url=./components/card-buttons.html">
+  <link rel="canonical" href="..">
+  <meta http-equiv="refresh" content="0; url=..">
   <meta name="robots" content="noindex">
-  <noscript><a href="./components/card-buttons.html">Click here if you are not redirected.</a></noscript>
+  <noscript><a href="..">Click here if you are not redirected.</a></noscript>
   <script>
-    location="./components/card-buttons.html";
+    location="..";
   </script>
 </html>
\ No newline at end of file
diff --git a/demo/components/card-buttons.html b/demo/components/card-buttons.html
deleted file mode 100644
index d24beb261..000000000
--- a/demo/components/card-buttons.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/demo/components/card-comments.html b/demo/components/card-comments.html
deleted file mode 100644
index 328b5a8d0..000000000
--- a/demo/components/card-comments.html
+++ /dev/null
@@ -1,94 +0,0 @@
-<div class="card">
-  <div class="card-header">
-    <div class="card-title">Comments</div>
-  </div>
-  <div class="card-body">
-    <div class="d-flex mb-5">
-      <div class="mr-4">
-        <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)">
-          <span class="badge bg-green"></span></span>
-      </div>
-      <div class="flex-fill">
-        <div class="d-flex mt-n1">
-          <h5 class="m-0">
-            Paweł Kuna
-          </h5>
-          <div class="ml-auto small text-muted">1 week ago</div>
-        </div>
-        <p class="mb-2">
-          This is PERFECT
-        </p>
-        <div class="small">
-          <span class="text-success mr-1">+47</span>
-          <a href="#" data-toggle="tooltip" data-placement="top" title="Vote Up"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="18 15 12 9 6 15"></polyline></svg>
-          </a>
-          <a href="#" class="mr-1" data-toggle="tooltip" data-placement="top" title="Vote Down">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="6 9 12 15 18 9"></polyline></svg>
-          </a>
-          <span class="mr-1">·</span>
-          <a href="#" class="mr-1 text-muted">Reply</a>
-          <span class="mr-1">·</span>
-          <a href="#" class="text-muted">Edit</a>
-        </div>
-      </div>
-    </div>
-    <div class="d-flex mb-5">
-      <div class="mr-4">
-        <span class="avatar">
-          <span class="badge bg-green"></span>JL</span>
-      </div>
-      <div class="flex-fill">
-        <div class="d-flex mt-n1">
-          <h5 class="m-0">
-            Jeffie Lewzey
-          </h5>
-          <div class="ml-auto small text-muted">1 week and 4 days ago</div>
-        </div>
-        <p class="mb-2">
-          She is so damn beautiful OMG i love her!!! does somebody knows what kind of music is this? sorry xD
-        </p>
-        <div class="small">
-          <span class="text-success mr-1">+45</span>
-          <a href="#" data-toggle="tooltip" data-placement="top" title="Vote Up"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="18 15 12 9 6 15"></polyline></svg>
-          </a>
-          <a href="#" class="mr-1" data-toggle="tooltip" data-placement="top" title="Vote Down">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="6 9 12 15 18 9"></polyline></svg>
-          </a>
-          <span class="mr-1">·</span>
-          <a href="#" class="mr-1 text-muted">Reply</a>
-          <span class="mr-1">·</span>
-          <a href="#" class="text-muted">Edit</a>
-        </div>
-      </div>
-    </div>
-    <div class="d-flex">
-      <div class="mr-4">
-        <span class="avatar" style="background-image: url(../static/avatars/002m.jpg)">
-          <span class="badge bg-green"></span></span>
-      </div>
-      <div class="flex-fill">
-        <div class="d-flex mt-n1">
-          <h5 class="m-0">
-            Mallory Hulme
-          </h5>
-          <div class="ml-auto small text-muted">2 days ago</div>
-        </div>
-        <p class="mb-2">
-          Did anyone go camping in Oshkosh Wisconsin last month?
-        </p>
-        <div class="small">
-          <span class="text-success mr-1">+32</span>
-          <a href="#" data-toggle="tooltip" data-placement="top" title="Vote Up"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="18 15 12 9 6 15"></polyline></svg>
-          </a>
-          <a href="#" class="mr-1" data-toggle="tooltip" data-placement="top" title="Vote Down">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="6 9 12 15 18 9"></polyline></svg>
-          </a>
-          <span class="mr-1">·</span>
-          <a href="#" class="mr-1 text-muted">Reply</a>
-          <span class="mr-1">·</span>
-          <a href="#" class="text-muted">Edit</a>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/demo/components/card-ribbon.html b/demo/components/card-ribbon.html
deleted file mode 100644
index 6a23afc12..000000000
--- a/demo/components/card-ribbon.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="card">
-  <div class="card-body">
-    <h3 class="card-title">Card with ribbon</h3>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur consequuntur culpa cum dolorum eveniet.</p>
-  </div>
-  <div class="ribbon ribbon-bookmark bg-orange"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
-  </div>
-</div>
\ No newline at end of file
diff --git a/demo/components/card-tabs-bottom.html b/demo/components/card-tabs-bottom.html
deleted file mode 100644
index 2e628ac43..000000000
--- a/demo/components/card-tabs-bottom.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!-- 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>
\ No newline at end of file
diff --git a/demo/components/card-with-image.html b/demo/components/card-with-image.html
deleted file mode 100644
index 9a3e4141d..000000000
--- a/demo/components/card-with-image.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<div class="card">
-  <div class="row row-0">
-    <div class="col-md-3">
-      <img src="../static/photos/2854fd67ddbd6217.jpg" class="w-100 h-100 object-cover" alt="Card side image">
-    </div>
-    <div class="col">
-      <div class="card-body">
-        <h3 class="card-title">Card with side image</h3>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-          neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-      </div>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/demo/components/empty.html b/demo/components/empty.html
deleted file mode 100644
index 8b0c1c1b1..000000000
--- a/demo/components/empty.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<div class="empty">
-  <div class="empty-icon">
-    <img src="../static/illustrations/undraw_quitting_time_dm8t.svg" class="h-8 mb-4" alt="">
-  </div>
-  <p class="empty-title h3">No results found</p>
-  <p class="empty-subtitle text-muted">
-    Try adjusting your search or filter to find what you're looking for.
-  </p>
-  <div class="empty-action">
-    <a href="../." class="btn btn-primary">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-      Search again
-    </a>
-  </div>
-</div>
\ No newline at end of file
diff --git a/demo/components/input-colors.html b/demo/components/input-colors.html
deleted file mode 100644
index 17f89c18c..000000000
--- a/demo/components/input-colors.html
+++ /dev/null
@@ -1,71 +0,0 @@
-<div class="mb-3">
-  <label class="form-label">Color Input</label>
-  <div class="row row-sm">
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color" type="radio" value="dark" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-dark"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput form-colorinput-light">
-        <input name="color" type="radio" value="white" class="form-colorinput-input"  checked/>
-        <span class="form-colorinput-color bg-white"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color" type="radio" value="blue" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-blue"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color" type="radio" value="azure" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-azure"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color" type="radio" value="indigo" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-indigo"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color" type="radio" value="purple" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-purple"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color" type="radio" value="pink" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-pink"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color" type="radio" value="red" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-red"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color" type="radio" value="orange" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-orange"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color" type="radio" value="yellow" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-yellow"></span>
-      </label>
-    </div>
-    <div class="col-auto">
-      <label class="form-colorinput">
-        <input name="color" type="radio" value="lime" class="form-colorinput-input" />
-        <span class="form-colorinput-color bg-lime"></span>
-      </label>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/demo/components/input-image.html b/demo/components/input-image.html
deleted file mode 100644
index ae9509de5..000000000
--- a/demo/components/input-image.html
+++ /dev/null
@@ -1,77 +0,0 @@
-<div class="mb-3">
-  <label class="form-label">Image Check</label>
-  <div class="row row-sm">
-    <div class="col-6 col-sm-4">
-      <label class="form-imagecheck mb-2">
-        <input name="form-imagecheck" type="checkbox" value="1" class="form-imagecheck-input" />
-        <span class="form-imagecheck-figure">
-          <img src="../static/photos/1b73704b282a8ec6.jpg" alt="Breakfast served with tea, bread and eggs" class="form-imagecheck-image">
-        </span>
-      </label>
-    </div>
-    <div class="col-6 col-sm-4">
-      <label class="form-imagecheck mb-2">
-        <input name="form-imagecheck" type="checkbox" value="2" class="form-imagecheck-input"  checked/>
-        <span class="form-imagecheck-figure">
-          <img src="../static/photos/3d2998219313cd37.jpg" alt="Book, fairy lights" class="form-imagecheck-image">
-        </span>
-      </label>
-    </div>
-    <div class="col-6 col-sm-4">
-      <label class="form-imagecheck mb-2">
-        <input name="form-imagecheck" type="checkbox" value="3" class="form-imagecheck-input" />
-        <span class="form-imagecheck-figure">
-          <img src="../static/photos/6ab3200b14549f8a.jpg" alt="Healthy Dinner" class="form-imagecheck-image">
-        </span>
-      </label>
-    </div>
-    <div class="col-6 col-sm-4">
-      <label class="form-imagecheck mb-2">
-        <input name="form-imagecheck" type="checkbox" value="4" class="form-imagecheck-input"  checked/>
-        <span class="form-imagecheck-figure">
-          <img src="../static/photos/6d35d9a2bd6c63c2.jpg" alt="Aperol Spritz is a cocktail consisting of prosecco, aperitif and soda water" class="form-imagecheck-image">
-        </span>
-      </label>
-    </div>
-    <div class="col-6 col-sm-4">
-      <label class="form-imagecheck mb-2">
-        <input name="form-imagecheck" type="checkbox" value="5" class="form-imagecheck-input" />
-        <span class="form-imagecheck-figure">
-          <img src="../static/photos/8a26974ee6444acd.jpg" alt="Beautiful blonde woman on a wooden pier by the lake" class="form-imagecheck-image">
-        </span>
-      </label>
-    </div>
-    <div class="col-6 col-sm-4">
-      <label class="form-imagecheck mb-2">
-        <input name="form-imagecheck" type="checkbox" value="6" class="form-imagecheck-input" />
-        <span class="form-imagecheck-figure">
-          <img src="../static/photos/8c13ad59f739558c.jpg" alt="Still life of mandarin oranges with leaves" class="form-imagecheck-image">
-        </span>
-      </label>
-    </div>
-    <div class="col-6 col-sm-4">
-      <label class="form-imagecheck mb-2">
-        <input name="form-imagecheck" type="checkbox" value="7" class="form-imagecheck-input"  checked/>
-        <span class="form-imagecheck-figure">
-          <img src="../static/photos/8fdeb4785d2b82ef.jpg" alt="Blonde woman having a healthy snack at the wooden pier" class="form-imagecheck-image">
-        </span>
-      </label>
-    </div>
-    <div class="col-6 col-sm-4">
-      <label class="form-imagecheck mb-2">
-        <input name="form-imagecheck" type="checkbox" value="8" class="form-imagecheck-input" />
-        <span class="form-imagecheck-figure">
-          <img src="../static/photos/9f36332564ca271d.jpg" alt="Woman working on a laptop while enjoying a breakfast coffee and chocolate in bed" class="form-imagecheck-image">
-        </span>
-      </label>
-    </div>
-    <div class="col-6 col-sm-4">
-      <label class="form-imagecheck mb-2">
-        <input name="form-imagecheck" type="checkbox" value="9" class="form-imagecheck-input" />
-        <span class="form-imagecheck-figure">
-          <img src="../static/photos/35b88fc04a518c1b.jpg" alt="Overhead view of macarons on a marble slab" class="form-imagecheck-image">
-        </span>
-      </label>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/demo/components/progress.html b/demo/components/progress.html
deleted file mode 100644
index 47d506d54..000000000
--- a/demo/components/progress.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<div>
-  <div class="d-flex mb-1 align-items-center lh-1">
-    <div class="text-h5 font-weight-bolder m-0">Label</div>
-    <span class="ml-auto text-h6 strong">45%</span>
-  </div>
-  <div class="progress progress-sm">
-    <div class="progress-bar bg-blue" style="width: 45%" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
-      <span class="sr-only">45% Complete</span>
-    </div>
-  </div>
-</div>
-<div>
-  <div class="d-flex mb-1 align-items-center lh-1">
-    <div class="text-h5 font-weight-bolder m-0">Label</div>
-    <span class="ml-auto text-h6 strong">32%</span>
-  </div>
-  <div class="progress progress-sm">
-    <div class="progress-bar bg-red" style="width: 32%" role="progressbar" aria-valuenow="32" aria-valuemin="0" aria-valuemax="100">
-      <span class="sr-only">32% Complete</span>
-    </div>
-  </div>
-</div>
-<div>
-  <div class="d-flex mb-1 align-items-center lh-1">
-    <div class="text-h5 font-weight-bolder m-0">Label</div>
-    <span class="ml-auto text-h6 strong">90%</span>
-  </div>
-  <div class="progress progress-sm">
-    <div class="progress-bar bg-yellow" style="width: 90%" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
-      <span class="sr-only">90% Complete</span>
-    </div>
-  </div>
-</div>
-<div>
-  <div class="d-flex mb-1 align-items-center lh-1">
-    <div class="text-h5 font-weight-bolder m-0">Label</div>
-    <span class="ml-auto text-h6 strong">51%</span>
-  </div>
-  <div class="progress progress-sm">
-    <div class="progress-bar bg-green" style="width: 51%" role="progressbar" aria-valuenow="51" aria-valuemin="0" aria-valuemax="100">
-      <span class="sr-only">51% Complete</span>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/demo/components/simple-avatar.html b/demo/components/simple-avatar.html
deleted file mode 100644
index 05f755715..000000000
--- a/demo/components/simple-avatar.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<span class="avatar" style="background-image: url(../static/avatars/000m.jpg)">
-  <span class="badge bg-green"></span></span>
\ No newline at end of file
diff --git a/demo/components/simple-card.html b/demo/components/simple-card.html
deleted file mode 100644
index 75c020366..000000000
--- a/demo/components/simple-card.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<div class="card">
-  <div class="card-body">
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
-      neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
-  </div>
-</div>
\ No newline at end of file
diff --git a/demo/components/widget-revenue.html b/demo/components/widget-revenue.html
deleted file mode 100644
index ac99a4bfe..000000000
--- a/demo/components/widget-revenue.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<div class="card">
-  <div class="card-body">
-    <div class="d-flex align-items-center">
-      <div class="subheader">Revenue</div>
-      <div class="ml-auto lh-1">
-        <div class="dropdown">
-          <a class="dropdown-toggle text-muted" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Last 7 days
-          </a>
-          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
-            <a class="dropdown-item active" href="#">Last 7 days</a>
-            <a class="dropdown-item" href="#">Last 30 days</a>
-            <a class="dropdown-item" href="#">Last 3 months</a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="d-flex align-items-baseline">
-      <div class="h1 mb-0 mr-2">$4,300</div>
-      <div class="mr-auto">
-        <span class="text-green d-inline-flex align-items-center lh-1">
-          8% <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon ml-1"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
-        </span>
-      </div>
-    </div>
-  </div>
-  <div id="chart-revenue-bg"  class="chart-sm" ></div>
-</div>
\ No newline at end of file
diff --git a/demo/components/widget-sales.html b/demo/components/widget-sales.html
deleted file mode 100644
index 2539d0800..000000000
--- a/demo/components/widget-sales.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<div class="card">
-  <div class="card-body">
-    <div class="d-flex align-items-center">
-      <div class="subheader">Sales</div>
-      <div class="ml-auto lh-1">
-        <div class="dropdown">
-          <a class="dropdown-toggle text-muted" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Last 7 days
-          </a>
-          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
-            <a class="dropdown-item active" href="#">Last 7 days</a>
-            <a class="dropdown-item" href="#">Last 30 days</a>
-            <a class="dropdown-item" href="#">Last 3 months</a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="h1 mb-3">75%</div>
-    <div class="d-flex mb-2">
-      <div>Conversion rate</div>
-      <div class="ml-auto">
-        <span class="text-green d-inline-flex align-items-center lh-1">
-          7% <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon ml-1"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
-        </span>
-      </div>
-    </div>
-    <div class="progress progress-sm">
-      <div class="progress-bar bg-blue" style="width: 75%" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
-        <span class="sr-only">75% Complete</span>
-      </div>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/demo/crypto-currencies.html b/demo/crypto-currencies.html
index c7c9fe7ad..7ed5ff4c9 100644
--- a/demo/crypto-currencies.html
+++ b/demo/crypto-currencies.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -1768,185 +1833,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/dist/css/demo.css b/demo/dist/css/demo.css
index 42be5c721..17246c858 100644
--- a/demo/dist/css/demo.css
+++ b/demo/dist/css/demo.css
@@ -1,5 +1,5 @@
 /*!
- * Tabler (v1.0.0-alpha.4)
+ * Tabler (v1.0.0-alpha.5)
  * Copyright 2018-2020 The Tabler Authors
  * Copyright 2018-2020 codecalm
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
@@ -12,7 +12,7 @@ pre.highlight,
   max-height: 30rem;
   margin: 1.5rem 0;
   overflow: auto;
-  font-size: 0.6875rem;
+  font-size: 0.625rem;
   background: #354052;
   border-radius: 3px;
   color: #ffffff; }
@@ -55,7 +55,7 @@ pre.highlight,
 .example {
   padding: 2rem;
   margin: 2rem 0;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 3px 3px 0 0;
   position: relative;
   min-height: 12rem;
@@ -69,7 +69,7 @@ pre.highlight,
     flex: 0 auto; }
 
 .example-content {
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   flex: 1;
   max-width: 100%; }
 
@@ -108,12 +108,12 @@ pre.highlight,
 
 @media not print {
   .theme-dark .example-code {
-    border: 1px solid rgba(134, 140, 151, 0.24);
+    border: 1px solid rgba(110, 117, 130, 0.2);
     border-top: none; } }
 
 @media not print and (prefers-color-scheme: dark) {
   .theme-dark-auto .example-code {
-    border: 1px solid rgba(134, 140, 151, 0.24);
+    border: 1px solid rgba(110, 117, 130, 0.2);
     border-top: none; } }
 
 .card-sponsor {
@@ -132,7 +132,7 @@ body.no-transitions * {
   padding-left: 1rem; }
 
 .toc-entry a {
-  color: #868c97; }
+  color: #6e7582; }
 
 .dropdown-menu-demo {
   display: inline-block;
diff --git a/demo/dist/css/demo.css.map b/demo/dist/css/demo.css.map
index 8de83d3ca..3234bdd79 100644
Binary files a/demo/dist/css/demo.css.map and b/demo/dist/css/demo.css.map differ
diff --git a/demo/dist/css/demo.min.css b/demo/dist/css/demo.min.css
index 8cbe4c14d..40dd007da 100644
--- a/demo/dist/css/demo.min.css
+++ b/demo/dist/css/demo.min.css
@@ -1,7 +1,7 @@
 /*!
- * Tabler (v1.0.0-alpha.4)
+ * Tabler (v1.0.0-alpha.5)
  * Copyright 2018-2020 The Tabler Authors
  * Copyright 2018-2020 codecalm
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */.highlight pre,pre.highlight{max-height:30rem;margin:1.5rem 0;overflow:auto;font-size:.6875rem;background:#354052;border-radius:3px;color:#fff}.highlight pre::-webkit-scrollbar,pre.highlight::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.highlight pre::-webkit-scrollbar-thumb,pre.highlight::-webkit-scrollbar-thumb{border-radius:5px;background:0 0}.highlight pre::-webkit-scrollbar-corner,pre.highlight::-webkit-scrollbar-corner{background:0 0}.highlight pre:hover::-webkit-scrollbar-thumb,pre.highlight:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#5d6675}.highlight .c,.highlight .c1{color:#a0aec0}.highlight .na,.highlight .nl,.highlight .nx,.language-css .highlight .na,.language-scss .highlight .na{color:#ffe484}.highlight .dl,.highlight .mh,.highlight .s,.highlight .s1,.highlight .s2{color:#b5f4a5}.highlight .language-js .nb,.highlight .mi,.highlight .nc,.highlight .nd,.highlight .nt{color:#93ddfd}.highlight .language-html .nt,.highlight .nb{color:#ff8383}.highlight .k,.highlight .kd,.highlight .n,.highlight .nv{color:#d9a9ff}.example{padding:2rem;margin:2rem 0;border:1px solid rgba(134,140,151,.24);border-radius:3px 3px 0 0;position:relative;min-height:12rem;display:flex;align-items:center;overflow-x:auto}.example-centered{justify-content:center}.example-centered .example-content{flex:0 auto}.example-content{font-size:.9375rem;flex:1;max-width:100%}.example-bg{background:#f5f7fb}.example-code{margin:2rem 0;border-top:none}.example-code pre{margin:0;border-radius:0 0 3px 3px}.example+.example-code{margin-top:-2rem}.example-column{margin:0 auto}.example-column>.card:last-of-type{margin-bottom:0}.example-column-1{max-width:20rem}.example-column-2{max-width:40rem}.example-modal-backdrop{background:#354052;opacity:.24;position:absolute;width:100%;left:0;top:0;height:100%;border-radius:2px 2px 0 0}@media not print{.theme-dark .example-code{border:1px solid rgba(134,140,151,.24);border-top:none}}@media not print and (prefers-color-scheme:dark){.theme-dark-auto .example-code{border:1px solid rgba(134,140,151,.24);border-top:none}}.card-sponsor{background:#dbe7f6 no-repeat center/100% 100%;border-color:#548ed2;min-height:316px}body.no-transitions *{transition:none!important}.toc-entry:before{content:'- '}.toc-entry ul{list-style:none;padding-left:1rem}.toc-entry a{color:#868c97}.dropdown-menu-demo{display:inline-block;width:100%;position:relative;top:0;margin-bottom:1rem}
+ */.highlight pre,pre.highlight{max-height:30rem;margin:1.5rem 0;overflow:auto;font-size:.625rem;background:#354052;border-radius:3px;color:#fff}.highlight pre::-webkit-scrollbar,pre.highlight::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.highlight pre::-webkit-scrollbar-thumb,pre.highlight::-webkit-scrollbar-thumb{border-radius:5px;background:0 0}.highlight pre::-webkit-scrollbar-corner,pre.highlight::-webkit-scrollbar-corner{background:0 0}.highlight pre:hover::-webkit-scrollbar-thumb,pre.highlight:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#5d6675}.highlight .c,.highlight .c1{color:#a0aec0}.highlight .na,.highlight .nl,.highlight .nx,.language-css .highlight .na,.language-scss .highlight .na{color:#ffe484}.highlight .dl,.highlight .mh,.highlight .s,.highlight .s1,.highlight .s2{color:#b5f4a5}.highlight .language-js .nb,.highlight .mi,.highlight .nc,.highlight .nd,.highlight .nt{color:#93ddfd}.highlight .language-html .nt,.highlight .nb{color:#ff8383}.highlight .k,.highlight .kd,.highlight .n,.highlight .nv{color:#d9a9ff}.example{padding:2rem;margin:2rem 0;border:1px solid rgba(110,117,130,.2);border-radius:3px 3px 0 0;position:relative;min-height:12rem;display:flex;align-items:center;overflow-x:auto}.example-centered{justify-content:center}.example-centered .example-content{flex:0 auto}.example-content{font-size:.875rem;flex:1;max-width:100%}.example-bg{background:#f5f7fb}.example-code{margin:2rem 0;border-top:none}.example-code pre{margin:0;border-radius:0 0 3px 3px}.example+.example-code{margin-top:-2rem}.example-column{margin:0 auto}.example-column>.card:last-of-type{margin-bottom:0}.example-column-1{max-width:20rem}.example-column-2{max-width:40rem}.example-modal-backdrop{background:#354052;opacity:.24;position:absolute;width:100%;left:0;top:0;height:100%;border-radius:2px 2px 0 0}@media not print{.theme-dark .example-code{border:1px solid rgba(110,117,130,.2);border-top:none}}@media not print and (prefers-color-scheme:dark){.theme-dark-auto .example-code{border:1px solid rgba(110,117,130,.2);border-top:none}}.card-sponsor{background:#dbe7f6 no-repeat center/100% 100%;border-color:#548ed2;min-height:316px}body.no-transitions *{transition:none!important}.toc-entry:before{content:'- '}.toc-entry ul{list-style:none;padding-left:1rem}.toc-entry a{color:#6e7582}.dropdown-menu-demo{display:inline-block;width:100%;position:relative;top:0;margin-bottom:1rem}
 /*# sourceMappingURL=demo.min.css.map */
\ No newline at end of file
diff --git a/demo/dist/css/demo.min.css.map b/demo/dist/css/demo.min.css.map
index 27909b166..c80cd71fa 100644
Binary files a/demo/dist/css/demo.min.css.map and b/demo/dist/css/demo.min.css.map differ
diff --git a/demo/dist/css/tabler-buttons.css b/demo/dist/css/tabler-buttons.css
index 7946ad2b2..7dbcceb1f 100644
--- a/demo/dist/css/tabler-buttons.css
+++ b/demo/dist/css/tabler-buttons.css
@@ -1,5 +1,5 @@
 /*!
- * Tabler (v1.0.0-alpha.4)
+ * Tabler (v1.0.0-alpha.5)
  * Copyright 2018-2020 The Tabler Authors
  * Copyright 2018-2020 codecalm
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
@@ -34,28 +34,28 @@ Dark mode
     border-color: transparent; }
 
 .btn-ghost-secondary {
-  color: #868c97;
+  color: #6e7582;
   background-color: transparent;
   border-color: transparent; }
   .btn-ghost-secondary:hover {
     color: #fff;
-    background-color: #868c97;
-    border-color: #868c97; }
+    background-color: #6e7582;
+    border-color: #6e7582; }
   .btn-ghost-secondary:focus, .btn-ghost-secondary.focus {
     color: #fff;
-    background-color: #868c97;
-    border-color: #868c97;
-    box-shadow: 0 0 0 0.2rem rgba(134, 140, 151, 0.5); }
+    background-color: #6e7582;
+    border-color: #6e7582;
+    box-shadow: 0 0 0 0.2rem rgba(110, 117, 130, 0.5); }
   .btn-ghost-secondary:active, .btn-ghost-secondary.active,
   .show > .btn-ghost-secondary.dropdown-toggle {
     color: #ffffff;
-    background-color: #868c97;
-    border-color: #868c97; }
+    background-color: #6e7582;
+    border-color: #6e7582; }
     .btn-ghost-secondary:active:focus, .btn-ghost-secondary.active:focus,
     .show > .btn-ghost-secondary.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(134, 140, 151, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(110, 117, 130, 0.5); }
   .btn-ghost-secondary:disabled, .btn-ghost-secondary.disabled {
-    color: #868c97;
+    color: #6e7582;
     background-color: transparent;
     border-color: transparent; }
 
@@ -74,7 +74,7 @@ Dark mode
     box-shadow: 0 0 0 0.2rem rgba(94, 186, 0, 0.5); }
   .btn-ghost-success:active, .btn-ghost-success.active,
   .show > .btn-ghost-success.dropdown-toggle {
-    color: #354052;
+    color: #ffffff;
     background-color: #5eba00;
     border-color: #5eba00; }
     .btn-ghost-success:active:focus, .btn-ghost-success.active:focus,
@@ -100,7 +100,7 @@ Dark mode
     box-shadow: 0 0 0 0.2rem rgba(69, 170, 242, 0.5); }
   .btn-ghost-info:active, .btn-ghost-info.active,
   .show > .btn-ghost-info.dropdown-toggle {
-    color: #354052;
+    color: #ffffff;
     background-color: #45aaf2;
     border-color: #45aaf2; }
     .btn-ghost-info:active:focus, .btn-ghost-info.active:focus,
@@ -126,7 +126,7 @@ Dark mode
     box-shadow: 0 0 0 0.2rem rgba(250, 176, 5, 0.5); }
   .btn-ghost-warning:active, .btn-ghost-warning.active,
   .show > .btn-ghost-warning.dropdown-toggle {
-    color: #354052;
+    color: #ffffff;
     background-color: #fab005;
     border-color: #fab005; }
     .btn-ghost-warning:active:focus, .btn-ghost-warning.active:focus,
@@ -138,28 +138,28 @@ Dark mode
     border-color: transparent; }
 
 .btn-ghost-danger {
-  color: #fa4654;
+  color: #cd201f;
   background-color: transparent;
   border-color: transparent; }
   .btn-ghost-danger:hover {
     color: #fff;
-    background-color: #fa4654;
-    border-color: #fa4654; }
+    background-color: #cd201f;
+    border-color: #cd201f; }
   .btn-ghost-danger:focus, .btn-ghost-danger.focus {
     color: #fff;
-    background-color: #fa4654;
-    border-color: #fa4654;
-    box-shadow: 0 0 0 0.2rem rgba(250, 70, 84, 0.5); }
+    background-color: #cd201f;
+    border-color: #cd201f;
+    box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.5); }
   .btn-ghost-danger:active, .btn-ghost-danger.active,
   .show > .btn-ghost-danger.dropdown-toggle {
     color: #ffffff;
-    background-color: #fa4654;
-    border-color: #fa4654; }
+    background-color: #cd201f;
+    border-color: #cd201f; }
     .btn-ghost-danger:active:focus, .btn-ghost-danger.active:focus,
     .show > .btn-ghost-danger.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(250, 70, 84, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.5); }
   .btn-ghost-danger:disabled, .btn-ghost-danger.disabled {
-    color: #fa4654;
+    color: #cd201f;
     background-color: transparent;
     border-color: transparent; }
 
@@ -261,7 +261,7 @@ Dark mode
     background-color: transparent; }
 
 .btn-twitter {
-  color: #354052;
+  color: #ffffff;
   background-color: #1da1f2;
   border-color: #1da1f2; }
   .btn-twitter:hover {
@@ -272,7 +272,7 @@ Dark mode
     color: #ffffff;
     background-color: #0d8ddc;
     border-color: #0c85d0;
-    box-shadow: 0 0 0 0.2rem rgba(33, 146, 218, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(63, 175, 244, 0.5); }
   .btn-twitter:active, .btn-twitter.active,
   .show > .btn-twitter.dropdown-toggle {
     color: #ffffff;
@@ -280,9 +280,9 @@ Dark mode
     border-color: #0b7ec4; }
     .btn-twitter:active:focus, .btn-twitter.active:focus,
     .show > .btn-twitter.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(33, 146, 218, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(63, 175, 244, 0.5); }
   .btn-twitter:disabled, .btn-twitter.disabled {
-    color: #354052;
+    color: #ffffff;
     background-color: #1da1f2;
     border-color: #1da1f2; }
 
@@ -296,7 +296,7 @@ Dark mode
   .btn-outline-twitter:focus, .btn-outline-twitter.focus {
     box-shadow: 0 0 0 0.2rem rgba(29, 161, 242, 0.5); }
   .btn-outline-twitter:active, .btn-outline-twitter.active, .btn-outline-twitter.dropdown-toggle.show {
-    color: #354052;
+    color: #ffffff;
     background-color: #1da1f2;
     border-color: #1da1f2; }
     .btn-outline-twitter:active:focus, .btn-outline-twitter.active:focus, .btn-outline-twitter.dropdown-toggle.show:focus {
@@ -396,7 +396,7 @@ Dark mode
     background-color: transparent; }
 
 .btn-vimeo {
-  color: #354052;
+  color: #ffffff;
   background-color: #1ab7ea;
   border-color: #1ab7ea; }
   .btn-vimeo:hover {
@@ -407,7 +407,7 @@ Dark mode
     color: #ffffff;
     background-color: #139ecb;
     border-color: #1295bf;
-    box-shadow: 0 0 0 0.2rem rgba(30, 165, 211, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(60, 194, 237, 0.5); }
   .btn-vimeo:active, .btn-vimeo.active,
   .show > .btn-vimeo.dropdown-toggle {
     color: #ffffff;
@@ -415,9 +415,9 @@ Dark mode
     border-color: #108cb4; }
     .btn-vimeo:active:focus, .btn-vimeo.active:focus,
     .show > .btn-vimeo.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(30, 165, 211, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(60, 194, 237, 0.5); }
   .btn-vimeo:disabled, .btn-vimeo.disabled {
-    color: #354052;
+    color: #ffffff;
     background-color: #1ab7ea;
     border-color: #1ab7ea; }
 
@@ -431,7 +431,7 @@ Dark mode
   .btn-outline-vimeo:focus, .btn-outline-vimeo.focus {
     box-shadow: 0 0 0 0.2rem rgba(26, 183, 234, 0.5); }
   .btn-outline-vimeo:active, .btn-outline-vimeo.active, .btn-outline-vimeo.dropdown-toggle.show {
-    color: #354052;
+    color: #ffffff;
     background-color: #1ab7ea;
     border-color: #1ab7ea; }
     .btn-outline-vimeo:active:focus, .btn-outline-vimeo.active:focus, .btn-outline-vimeo.dropdown-toggle.show:focus {
@@ -666,18 +666,18 @@ Dark mode
     background-color: transparent; }
 
 .btn-rss {
-  color: #354052;
+  color: #ffffff;
   background-color: #ffa500;
   border-color: #ffa500; }
   .btn-rss:hover {
-    color: #354052;
+    color: #ffffff;
     background-color: #d98c00;
     border-color: #cc8400; }
   .btn-rss:focus, .btn-rss.focus {
-    color: #354052;
+    color: #ffffff;
     background-color: #d98c00;
     border-color: #cc8400;
-    box-shadow: 0 0 0 0.2rem rgba(225, 150, 12, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(255, 179, 38, 0.5); }
   .btn-rss:active, .btn-rss.active,
   .show > .btn-rss.dropdown-toggle {
     color: #ffffff;
@@ -685,9 +685,9 @@ Dark mode
     border-color: #bf7c00; }
     .btn-rss:active:focus, .btn-rss.active:focus,
     .show > .btn-rss.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(225, 150, 12, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(255, 179, 38, 0.5); }
   .btn-rss:disabled, .btn-rss.disabled {
-    color: #354052;
+    color: #ffffff;
     background-color: #ffa500;
     border-color: #ffa500; }
 
@@ -701,7 +701,7 @@ Dark mode
   .btn-outline-rss:focus, .btn-outline-rss.focus {
     box-shadow: 0 0 0 0.2rem rgba(255, 165, 0, 0.5); }
   .btn-outline-rss:active, .btn-outline-rss.active, .btn-outline-rss.dropdown-toggle.show {
-    color: #354052;
+    color: #ffffff;
     background-color: #ffa500;
     border-color: #ffa500; }
     .btn-outline-rss:active:focus, .btn-outline-rss.active:focus, .btn-outline-rss.dropdown-toggle.show:focus {
@@ -891,7 +891,7 @@ Dark mode
     background-color: transparent; }
 
 .btn-azure {
-  color: #354052;
+  color: #ffffff;
   background-color: #45aaf2;
   border-color: #45aaf2; }
   .btn-azure:hover {
@@ -902,7 +902,7 @@ Dark mode
     color: #ffffff;
     background-color: #219af0;
     border-color: #1594ef;
-    box-shadow: 0 0 0 0.2rem rgba(67, 154, 218, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(97, 183, 244, 0.5); }
   .btn-azure:active, .btn-azure.active,
   .show > .btn-azure.dropdown-toggle {
     color: #ffffff;
@@ -910,9 +910,9 @@ Dark mode
     border-color: #108ee7; }
     .btn-azure:active:focus, .btn-azure.active:focus,
     .show > .btn-azure.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(67, 154, 218, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(97, 183, 244, 0.5); }
   .btn-azure:disabled, .btn-azure.disabled {
-    color: #354052;
+    color: #ffffff;
     background-color: #45aaf2;
     border-color: #45aaf2; }
 
@@ -926,7 +926,7 @@ Dark mode
   .btn-outline-azure:focus, .btn-outline-azure.focus {
     box-shadow: 0 0 0 0.2rem rgba(69, 170, 242, 0.5); }
   .btn-outline-azure:active, .btn-outline-azure.active, .btn-outline-azure.dropdown-toggle.show {
-    color: #354052;
+    color: #ffffff;
     background-color: #45aaf2;
     border-color: #45aaf2; }
     .btn-outline-azure:active:focus, .btn-outline-azure.active:focus, .btn-outline-azure.dropdown-toggle.show:focus {
@@ -1026,7 +1026,7 @@ Dark mode
     background-color: transparent; }
 
 .btn-pink {
-  color: #354052;
+  color: #ffffff;
   background-color: #f66d9b;
   border-color: #f66d9b; }
   .btn-pink:hover {
@@ -1037,7 +1037,7 @@ Dark mode
     color: #ffffff;
     background-color: #f44982;
     border-color: #f33d7a;
-    box-shadow: 0 0 0 0.2rem rgba(217, 102, 144, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(247, 131, 170, 0.5); }
   .btn-pink:active, .btn-pink.active,
   .show > .btn-pink.dropdown-toggle {
     color: #ffffff;
@@ -1045,9 +1045,9 @@ Dark mode
     border-color: #f23172; }
     .btn-pink:active:focus, .btn-pink.active:focus,
     .show > .btn-pink.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(217, 102, 144, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(247, 131, 170, 0.5); }
   .btn-pink:disabled, .btn-pink.disabled {
-    color: #354052;
+    color: #ffffff;
     background-color: #f66d9b;
     border-color: #f66d9b; }
 
@@ -1061,7 +1061,7 @@ Dark mode
   .btn-outline-pink:focus, .btn-outline-pink.focus {
     box-shadow: 0 0 0 0.2rem rgba(246, 109, 155, 0.5); }
   .btn-outline-pink:active, .btn-outline-pink.active, .btn-outline-pink.dropdown-toggle.show {
-    color: #354052;
+    color: #ffffff;
     background-color: #f66d9b;
     border-color: #f66d9b; }
     .btn-outline-pink:active:focus, .btn-outline-pink.active:focus, .btn-outline-pink.dropdown-toggle.show:focus {
@@ -1072,72 +1072,72 @@ Dark mode
 
 .btn-red {
   color: #ffffff;
-  background-color: #fa4654;
-  border-color: #fa4654; }
+  background-color: #cd201f;
+  border-color: #cd201f; }
   .btn-red:hover {
     color: #ffffff;
-    background-color: #f92132;
-    border-color: #f91426; }
+    background-color: #ac1b1a;
+    border-color: #a11918; }
   .btn-red:focus, .btn-red.focus {
     color: #ffffff;
-    background-color: #f92132;
-    border-color: #f91426;
-    box-shadow: 0 0 0 0.2rem rgba(251, 98, 110, 0.5); }
+    background-color: #ac1b1a;
+    border-color: #a11918;
+    box-shadow: 0 0 0 0.2rem rgba(213, 65, 65, 0.5); }
   .btn-red:active, .btn-red.active,
   .show > .btn-red.dropdown-toggle {
     color: #ffffff;
-    background-color: #f91426;
-    border-color: #f8081b; }
+    background-color: #a11918;
+    border-color: #961717; }
     .btn-red:active:focus, .btn-red.active:focus,
     .show > .btn-red.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(251, 98, 110, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(213, 65, 65, 0.5); }
   .btn-red:disabled, .btn-red.disabled {
     color: #ffffff;
-    background-color: #fa4654;
-    border-color: #fa4654; }
+    background-color: #cd201f;
+    border-color: #cd201f; }
 
 .btn-outline-red {
-  color: #fa4654;
-  border-color: #fa4654; }
+  color: #cd201f;
+  border-color: #cd201f; }
   .btn-outline-red:hover {
-    color: #fa4654;
-    background-color: #fa4654;
-    border-color: #fa4654; }
+    color: #cd201f;
+    background-color: #cd201f;
+    border-color: #cd201f; }
   .btn-outline-red:focus, .btn-outline-red.focus {
-    box-shadow: 0 0 0 0.2rem rgba(250, 70, 84, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.5); }
   .btn-outline-red:active, .btn-outline-red.active, .btn-outline-red.dropdown-toggle.show {
     color: #ffffff;
-    background-color: #fa4654;
-    border-color: #fa4654; }
+    background-color: #cd201f;
+    border-color: #cd201f; }
     .btn-outline-red:active:focus, .btn-outline-red.active:focus, .btn-outline-red.dropdown-toggle.show:focus {
-      box-shadow: 0 0 0 0.2rem rgba(250, 70, 84, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.5); }
   .btn-outline-red:disabled, .btn-outline-red.disabled {
-    color: #fa4654;
+    color: #cd201f;
     background-color: transparent; }
 
 .btn-orange {
-  color: #354052;
+  color: #ffffff;
   background-color: #ff922b;
   border-color: #ff922b; }
   .btn-orange:hover {
-    color: #354052;
+    color: #ffffff;
     background-color: #ff7e05;
     border-color: #f77800; }
   .btn-orange:focus, .btn-orange.focus {
-    color: #354052;
+    color: #ffffff;
     background-color: #ff7e05;
     border-color: #f77800;
-    box-shadow: 0 0 0 0.2rem rgba(225, 134, 49, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(255, 162, 75, 0.5); }
   .btn-orange:active, .btn-orange.active,
   .show > .btn-orange.dropdown-toggle {
-    color: #354052;
+    color: #ffffff;
     background-color: #f77800;
     border-color: #ea7200; }
     .btn-orange:active:focus, .btn-orange.active:focus,
     .show > .btn-orange.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(225, 134, 49, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(255, 162, 75, 0.5); }
   .btn-orange:disabled, .btn-orange.disabled {
-    color: #354052;
+    color: #ffffff;
     background-color: #ff922b;
     border-color: #ff922b; }
 
@@ -1151,7 +1151,7 @@ Dark mode
   .btn-outline-orange:focus, .btn-outline-orange.focus {
     box-shadow: 0 0 0 0.2rem rgba(255, 146, 43, 0.5); }
   .btn-outline-orange:active, .btn-outline-orange.active, .btn-outline-orange.dropdown-toggle.show {
-    color: #354052;
+    color: #ffffff;
     background-color: #ff922b;
     border-color: #ff922b; }
     .btn-outline-orange:active:focus, .btn-outline-orange.active:focus, .btn-outline-orange.dropdown-toggle.show:focus {
@@ -1161,28 +1161,28 @@ Dark mode
     background-color: transparent; }
 
 .btn-yellow {
-  color: #354052;
+  color: #ffffff;
   background-color: #fab005;
   border-color: #fab005; }
   .btn-yellow:hover {
-    color: #354052;
+    color: #ffffff;
     background-color: #d59604;
     border-color: #c88d04; }
   .btn-yellow:focus, .btn-yellow.focus {
-    color: #354052;
+    color: #ffffff;
     background-color: #d59604;
     border-color: #c88d04;
-    box-shadow: 0 0 0 0.2rem rgba(220, 159, 17, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(251, 188, 43, 0.5); }
   .btn-yellow:active, .btn-yellow.active,
   .show > .btn-yellow.dropdown-toggle {
-    color: #354052;
+    color: #ffffff;
     background-color: #c88d04;
     border-color: #bc8404; }
     .btn-yellow:active:focus, .btn-yellow.active:focus,
     .show > .btn-yellow.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(220, 159, 17, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(251, 188, 43, 0.5); }
   .btn-yellow:disabled, .btn-yellow.disabled {
-    color: #354052;
+    color: #ffffff;
     background-color: #fab005;
     border-color: #fab005; }
 
@@ -1196,7 +1196,7 @@ Dark mode
   .btn-outline-yellow:focus, .btn-outline-yellow.focus {
     box-shadow: 0 0 0 0.2rem rgba(250, 176, 5, 0.5); }
   .btn-outline-yellow:active, .btn-outline-yellow.active, .btn-outline-yellow.dropdown-toggle.show {
-    color: #354052;
+    color: #ffffff;
     background-color: #fab005;
     border-color: #fab005; }
     .btn-outline-yellow:active:focus, .btn-outline-yellow.active:focus, .btn-outline-yellow.dropdown-toggle.show:focus {
@@ -1206,28 +1206,28 @@ Dark mode
     background-color: transparent; }
 
 .btn-lime {
-  color: #354052;
+  color: #ffffff;
   background-color: #94d82d;
   border-color: #94d82d; }
   .btn-lime:hover {
-    color: #354052;
+    color: #ffffff;
     background-color: #7fbc23;
     border-color: #78b121; }
   .btn-lime:focus, .btn-lime.focus {
-    color: #354052;
+    color: #ffffff;
     background-color: #7fbc23;
     border-color: #78b121;
-    box-shadow: 0 0 0 0.2rem rgba(134, 193, 51, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(164, 222, 77, 0.5); }
   .btn-lime:active, .btn-lime.active,
   .show > .btn-lime.dropdown-toggle {
-    color: #354052;
+    color: #ffffff;
     background-color: #78b121;
     border-color: #70a61f; }
     .btn-lime:active:focus, .btn-lime.active:focus,
     .show > .btn-lime.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(134, 193, 51, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(164, 222, 77, 0.5); }
   .btn-lime:disabled, .btn-lime.disabled {
-    color: #354052;
+    color: #ffffff;
     background-color: #94d82d;
     border-color: #94d82d; }
 
@@ -1241,7 +1241,7 @@ Dark mode
   .btn-outline-lime:focus, .btn-outline-lime.focus {
     box-shadow: 0 0 0 0.2rem rgba(148, 216, 45, 0.5); }
   .btn-outline-lime:active, .btn-outline-lime.active, .btn-outline-lime.dropdown-toggle.show {
-    color: #354052;
+    color: #ffffff;
     background-color: #94d82d;
     border-color: #94d82d; }
     .btn-outline-lime:active:focus, .btn-outline-lime.active:focus, .btn-outline-lime.dropdown-toggle.show:focus {
@@ -1251,7 +1251,7 @@ Dark mode
     background-color: transparent; }
 
 .btn-green {
-  color: #354052;
+  color: #ffffff;
   background-color: #5eba00;
   border-color: #5eba00; }
   .btn-green:hover {
@@ -1262,7 +1262,7 @@ Dark mode
     color: #ffffff;
     background-color: #4b9400;
     border-color: #448700;
-    box-shadow: 0 0 0 0.2rem rgba(88, 168, 12, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(118, 196, 38, 0.5); }
   .btn-green:active, .btn-green.active,
   .show > .btn-green.dropdown-toggle {
     color: #ffffff;
@@ -1270,9 +1270,9 @@ Dark mode
     border-color: #3e7a00; }
     .btn-green:active:focus, .btn-green.active:focus,
     .show > .btn-green.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(88, 168, 12, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(118, 196, 38, 0.5); }
   .btn-green:disabled, .btn-green.disabled {
-    color: #354052;
+    color: #ffffff;
     background-color: #5eba00;
     border-color: #5eba00; }
 
@@ -1286,7 +1286,7 @@ Dark mode
   .btn-outline-green:focus, .btn-outline-green.focus {
     box-shadow: 0 0 0 0.2rem rgba(94, 186, 0, 0.5); }
   .btn-outline-green:active, .btn-outline-green.active, .btn-outline-green.dropdown-toggle.show {
-    color: #354052;
+    color: #ffffff;
     background-color: #5eba00;
     border-color: #5eba00; }
     .btn-outline-green:active:focus, .btn-outline-green.active:focus, .btn-outline-green.dropdown-toggle.show:focus {
@@ -1296,18 +1296,18 @@ Dark mode
     background-color: transparent; }
 
 .btn-teal {
-  color: #354052;
+  color: #ffffff;
   background-color: #2bcbba;
   border-color: #2bcbba; }
   .btn-teal:hover {
-    color: #354052;
+    color: #ffffff;
     background-color: #24ab9d;
     border-color: #22a193; }
   .btn-teal:focus, .btn-teal.focus {
-    color: #354052;
+    color: #ffffff;
     background-color: #24ab9d;
     border-color: #22a193;
-    box-shadow: 0 0 0 0.2rem rgba(45, 182, 170, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(75, 211, 196, 0.5); }
   .btn-teal:active, .btn-teal.active,
   .show > .btn-teal.dropdown-toggle {
     color: #ffffff;
@@ -1315,9 +1315,9 @@ Dark mode
     border-color: #20968a; }
     .btn-teal:active:focus, .btn-teal.active:focus,
     .show > .btn-teal.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(45, 182, 170, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(75, 211, 196, 0.5); }
   .btn-teal:disabled, .btn-teal.disabled {
-    color: #354052;
+    color: #ffffff;
     background-color: #2bcbba;
     border-color: #2bcbba; }
 
@@ -1331,7 +1331,7 @@ Dark mode
   .btn-outline-teal:focus, .btn-outline-teal.focus {
     box-shadow: 0 0 0 0.2rem rgba(43, 203, 186, 0.5); }
   .btn-outline-teal:active, .btn-outline-teal.active, .btn-outline-teal.dropdown-toggle.show {
-    color: #354052;
+    color: #ffffff;
     background-color: #2bcbba;
     border-color: #2bcbba; }
     .btn-outline-teal:active:focus, .btn-outline-teal.active:focus, .btn-outline-teal.dropdown-toggle.show:focus {
@@ -1431,18 +1431,18 @@ Dark mode
     background-color: transparent; }
 
 .btn-gray {
-  color: #354052;
+  color: #ffffff;
   background-color: #a8aeb7;
   border-color: #a8aeb7; }
   .btn-gray:hover {
-    color: #354052;
+    color: #ffffff;
     background-color: #939ba6;
     border-color: #8c94a0; }
   .btn-gray:focus, .btn-gray.focus {
-    color: #354052;
+    color: #ffffff;
     background-color: #939ba6;
     border-color: #8c94a0;
-    box-shadow: 0 0 0 0.2rem rgba(151, 158, 168, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(181, 186, 194, 0.5); }
   .btn-gray:active, .btn-gray.active,
   .show > .btn-gray.dropdown-toggle {
     color: #ffffff;
@@ -1450,9 +1450,9 @@ Dark mode
     border-color: #858e9a; }
     .btn-gray:active:focus, .btn-gray.active:focus,
     .show > .btn-gray.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(151, 158, 168, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(181, 186, 194, 0.5); }
   .btn-gray:disabled, .btn-gray.disabled {
-    color: #354052;
+    color: #ffffff;
     background-color: #a8aeb7;
     border-color: #a8aeb7; }
 
@@ -1466,7 +1466,7 @@ Dark mode
   .btn-outline-gray:focus, .btn-outline-gray.focus {
     box-shadow: 0 0 0 0.2rem rgba(168, 174, 183, 0.5); }
   .btn-outline-gray:active, .btn-outline-gray.active, .btn-outline-gray.dropdown-toggle.show {
-    color: #354052;
+    color: #ffffff;
     background-color: #a8aeb7;
     border-color: #a8aeb7; }
     .btn-outline-gray:active:focus, .btn-outline-gray.active:focus, .btn-outline-gray.dropdown-toggle.show:focus {
diff --git a/demo/dist/css/tabler-buttons.css.map b/demo/dist/css/tabler-buttons.css.map
index 227c9a0b1..ad37010e6 100644
Binary files a/demo/dist/css/tabler-buttons.css.map and b/demo/dist/css/tabler-buttons.css.map differ
diff --git a/demo/dist/css/tabler-buttons.min.css b/demo/dist/css/tabler-buttons.min.css
index 141fdef47..de3e17c63 100644
--- a/demo/dist/css/tabler-buttons.min.css
+++ b/demo/dist/css/tabler-buttons.min.css
@@ -1,7 +1,7 @@
 /*!
- * Tabler (v1.0.0-alpha.4)
+ * Tabler (v1.0.0-alpha.5)
  * Copyright 2018-2020 The Tabler Authors
  * Copyright 2018-2020 codecalm
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */.btn-ghost-primary{color:#206bc4;background-color:transparent;border-color:transparent}.btn-ghost-primary:hover{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-ghost-primary.focus,.btn-ghost-primary:focus{color:#fff;background-color:#206bc4;border-color:#206bc4;box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-ghost-primary.active,.btn-ghost-primary:active,.show>.btn-ghost-primary.dropdown-toggle{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-ghost-primary.active:focus,.btn-ghost-primary:active:focus,.show>.btn-ghost-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-ghost-primary.disabled,.btn-ghost-primary:disabled{color:#206bc4;background-color:transparent;border-color:transparent}.btn-ghost-secondary{color:#868c97;background-color:transparent;border-color:transparent}.btn-ghost-secondary:hover{color:#fff;background-color:#868c97;border-color:#868c97}.btn-ghost-secondary.focus,.btn-ghost-secondary:focus{color:#fff;background-color:#868c97;border-color:#868c97;box-shadow:0 0 0 .2rem rgba(134,140,151,.5)}.btn-ghost-secondary.active,.btn-ghost-secondary:active,.show>.btn-ghost-secondary.dropdown-toggle{color:#fff;background-color:#868c97;border-color:#868c97}.btn-ghost-secondary.active:focus,.btn-ghost-secondary:active:focus,.show>.btn-ghost-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(134,140,151,.5)}.btn-ghost-secondary.disabled,.btn-ghost-secondary:disabled{color:#868c97;background-color:transparent;border-color:transparent}.btn-ghost-success{color:#5eba00;background-color:transparent;border-color:transparent}.btn-ghost-success:hover{color:#fff;background-color:#5eba00;border-color:#5eba00}.btn-ghost-success.focus,.btn-ghost-success:focus{color:#fff;background-color:#5eba00;border-color:#5eba00;box-shadow:0 0 0 .2rem rgba(94,186,0,.5)}.btn-ghost-success.active,.btn-ghost-success:active,.show>.btn-ghost-success.dropdown-toggle{color:#354052;background-color:#5eba00;border-color:#5eba00}.btn-ghost-success.active:focus,.btn-ghost-success:active:focus,.show>.btn-ghost-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(94,186,0,.5)}.btn-ghost-success.disabled,.btn-ghost-success:disabled{color:#5eba00;background-color:transparent;border-color:transparent}.btn-ghost-info{color:#45aaf2;background-color:transparent;border-color:transparent}.btn-ghost-info:hover{color:#fff;background-color:#45aaf2;border-color:#45aaf2}.btn-ghost-info.focus,.btn-ghost-info:focus{color:#fff;background-color:#45aaf2;border-color:#45aaf2;box-shadow:0 0 0 .2rem rgba(69,170,242,.5)}.btn-ghost-info.active,.btn-ghost-info:active,.show>.btn-ghost-info.dropdown-toggle{color:#354052;background-color:#45aaf2;border-color:#45aaf2}.btn-ghost-info.active:focus,.btn-ghost-info:active:focus,.show>.btn-ghost-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(69,170,242,.5)}.btn-ghost-info.disabled,.btn-ghost-info:disabled{color:#45aaf2;background-color:transparent;border-color:transparent}.btn-ghost-warning{color:#fab005;background-color:transparent;border-color:transparent}.btn-ghost-warning:hover{color:#fff;background-color:#fab005;border-color:#fab005}.btn-ghost-warning.focus,.btn-ghost-warning:focus{color:#fff;background-color:#fab005;border-color:#fab005;box-shadow:0 0 0 .2rem rgba(250,176,5,.5)}.btn-ghost-warning.active,.btn-ghost-warning:active,.show>.btn-ghost-warning.dropdown-toggle{color:#354052;background-color:#fab005;border-color:#fab005}.btn-ghost-warning.active:focus,.btn-ghost-warning:active:focus,.show>.btn-ghost-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(250,176,5,.5)}.btn-ghost-warning.disabled,.btn-ghost-warning:disabled{color:#fab005;background-color:transparent;border-color:transparent}.btn-ghost-danger{color:#fa4654;background-color:transparent;border-color:transparent}.btn-ghost-danger:hover{color:#fff;background-color:#fa4654;border-color:#fa4654}.btn-ghost-danger.focus,.btn-ghost-danger:focus{color:#fff;background-color:#fa4654;border-color:#fa4654;box-shadow:0 0 0 .2rem rgba(250,70,84,.5)}.btn-ghost-danger.active,.btn-ghost-danger:active,.show>.btn-ghost-danger.dropdown-toggle{color:#fff;background-color:#fa4654;border-color:#fa4654}.btn-ghost-danger.active:focus,.btn-ghost-danger:active:focus,.show>.btn-ghost-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(250,70,84,.5)}.btn-ghost-danger.disabled,.btn-ghost-danger:disabled{color:#fa4654;background-color:transparent;border-color:transparent}.btn-ghost-light{color:#f5f7fb;background-color:transparent;border-color:transparent}.btn-ghost-light:hover{color:#fff;background-color:#f5f7fb;border-color:#f5f7fb}.btn-ghost-light.focus,.btn-ghost-light:focus{color:#fff;background-color:#f5f7fb;border-color:#f5f7fb;box-shadow:0 0 0 .2rem rgba(245,247,251,.5)}.btn-ghost-light.active,.btn-ghost-light:active,.show>.btn-ghost-light.dropdown-toggle{color:#354052;background-color:#f5f7fb;border-color:#f5f7fb}.btn-ghost-light.active:focus,.btn-ghost-light:active:focus,.show>.btn-ghost-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(245,247,251,.5)}.btn-ghost-light.disabled,.btn-ghost-light:disabled{color:#f5f7fb;background-color:transparent;border-color:transparent}.btn-ghost-dark{color:#354052;background-color:transparent;border-color:transparent}.btn-ghost-dark:hover{color:#fff;background-color:#354052;border-color:#354052}.btn-ghost-dark.focus,.btn-ghost-dark:focus{color:#fff;background-color:#354052;border-color:#354052;box-shadow:0 0 0 .2rem rgba(53,64,82,.5)}.btn-ghost-dark.active,.btn-ghost-dark:active,.show>.btn-ghost-dark.dropdown-toggle{color:#fff;background-color:#354052;border-color:#354052}.btn-ghost-dark.active:focus,.btn-ghost-dark:active:focus,.show>.btn-ghost-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(53,64,82,.5)}.btn-ghost-dark.disabled,.btn-ghost-dark:disabled{color:#354052;background-color:transparent;border-color:transparent}.btn-facebook{color:#fff;background-color:#3b5998;border-color:#3b5998}.btn-facebook:hover{color:#fff;background-color:#30497c;border-color:#2d4373}.btn-facebook.focus,.btn-facebook:focus{color:#fff;background-color:#30497c;border-color:#2d4373;box-shadow:0 0 0 .2rem rgba(88,114,167,.5)}.btn-facebook.active,.btn-facebook:active,.show>.btn-facebook.dropdown-toggle{color:#fff;background-color:#2d4373;border-color:#293e6a}.btn-facebook.active:focus,.btn-facebook:active:focus,.show>.btn-facebook.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(88,114,167,.5)}.btn-facebook.disabled,.btn-facebook:disabled{color:#fff;background-color:#3b5998;border-color:#3b5998}.btn-outline-facebook{color:#3b5998;border-color:#3b5998}.btn-outline-facebook:hover{color:#3b5998;background-color:#3b5998;border-color:#3b5998}.btn-outline-facebook.focus,.btn-outline-facebook:focus{box-shadow:0 0 0 .2rem rgba(59,89,152,.5)}.btn-outline-facebook.active,.btn-outline-facebook.dropdown-toggle.show,.btn-outline-facebook:active{color:#fff;background-color:#3b5998;border-color:#3b5998}.btn-outline-facebook.active:focus,.btn-outline-facebook.dropdown-toggle.show:focus,.btn-outline-facebook:active:focus{box-shadow:0 0 0 .2rem rgba(59,89,152,.5)}.btn-outline-facebook.disabled,.btn-outline-facebook:disabled{color:#3b5998;background-color:transparent}.btn-twitter{color:#354052;background-color:#1da1f2;border-color:#1da1f2}.btn-twitter:hover{color:#fff;background-color:#0d8ddc;border-color:#0c85d0}.btn-twitter.focus,.btn-twitter:focus{color:#fff;background-color:#0d8ddc;border-color:#0c85d0;box-shadow:0 0 0 .2rem rgba(33,146,218,.5)}.btn-twitter.active,.btn-twitter:active,.show>.btn-twitter.dropdown-toggle{color:#fff;background-color:#0c85d0;border-color:#0b7ec4}.btn-twitter.active:focus,.btn-twitter:active:focus,.show>.btn-twitter.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(33,146,218,.5)}.btn-twitter.disabled,.btn-twitter:disabled{color:#354052;background-color:#1da1f2;border-color:#1da1f2}.btn-outline-twitter{color:#1da1f2;border-color:#1da1f2}.btn-outline-twitter:hover{color:#1da1f2;background-color:#1da1f2;border-color:#1da1f2}.btn-outline-twitter.focus,.btn-outline-twitter:focus{box-shadow:0 0 0 .2rem rgba(29,161,242,.5)}.btn-outline-twitter.active,.btn-outline-twitter.dropdown-toggle.show,.btn-outline-twitter:active{color:#354052;background-color:#1da1f2;border-color:#1da1f2}.btn-outline-twitter.active:focus,.btn-outline-twitter.dropdown-toggle.show:focus,.btn-outline-twitter:active:focus{box-shadow:0 0 0 .2rem rgba(29,161,242,.5)}.btn-outline-twitter.disabled,.btn-outline-twitter:disabled{color:#1da1f2;background-color:transparent}.btn-google{color:#fff;background-color:#dc4e41;border-color:#dc4e41}.btn-google:hover{color:#fff;background-color:#d03526;border-color:#c63224}.btn-google.focus,.btn-google:focus{color:#fff;background-color:#d03526;border-color:#c63224;box-shadow:0 0 0 .2rem rgba(225,105,94,.5)}.btn-google.active,.btn-google:active,.show>.btn-google.dropdown-toggle{color:#fff;background-color:#c63224;border-color:#bb2f22}.btn-google.active:focus,.btn-google:active:focus,.show>.btn-google.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(225,105,94,.5)}.btn-google.disabled,.btn-google:disabled{color:#fff;background-color:#dc4e41;border-color:#dc4e41}.btn-outline-google{color:#dc4e41;border-color:#dc4e41}.btn-outline-google:hover{color:#dc4e41;background-color:#dc4e41;border-color:#dc4e41}.btn-outline-google.focus,.btn-outline-google:focus{box-shadow:0 0 0 .2rem rgba(220,78,65,.5)}.btn-outline-google.active,.btn-outline-google.dropdown-toggle.show,.btn-outline-google:active{color:#fff;background-color:#dc4e41;border-color:#dc4e41}.btn-outline-google.active:focus,.btn-outline-google.dropdown-toggle.show:focus,.btn-outline-google:active:focus{box-shadow:0 0 0 .2rem rgba(220,78,65,.5)}.btn-outline-google.disabled,.btn-outline-google:disabled{color:#dc4e41;background-color:transparent}.btn-youtube{color:#fff;background-color:red;border-color:red}.btn-youtube:hover{color:#fff;background-color:#d90000;border-color:#c00}.btn-youtube.focus,.btn-youtube:focus{color:#fff;background-color:#d90000;border-color:#c00;box-shadow:0 0 0 .2rem rgba(255,38,38,.5)}.btn-youtube.active,.btn-youtube:active,.show>.btn-youtube.dropdown-toggle{color:#fff;background-color:#c00;border-color:#bf0000}.btn-youtube.active:focus,.btn-youtube:active:focus,.show>.btn-youtube.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(255,38,38,.5)}.btn-youtube.disabled,.btn-youtube:disabled{color:#fff;background-color:red;border-color:red}.btn-outline-youtube{color:red;border-color:red}.btn-outline-youtube:hover{color:red;background-color:red;border-color:red}.btn-outline-youtube.focus,.btn-outline-youtube:focus{box-shadow:0 0 0 .2rem rgba(255,0,0,.5)}.btn-outline-youtube.active,.btn-outline-youtube.dropdown-toggle.show,.btn-outline-youtube:active{color:#fff;background-color:red;border-color:red}.btn-outline-youtube.active:focus,.btn-outline-youtube.dropdown-toggle.show:focus,.btn-outline-youtube:active:focus{box-shadow:0 0 0 .2rem rgba(255,0,0,.5)}.btn-outline-youtube.disabled,.btn-outline-youtube:disabled{color:red;background-color:transparent}.btn-vimeo{color:#354052;background-color:#1ab7ea;border-color:#1ab7ea}.btn-vimeo:hover{color:#fff;background-color:#139ecb;border-color:#1295bf}.btn-vimeo.focus,.btn-vimeo:focus{color:#fff;background-color:#139ecb;border-color:#1295bf;box-shadow:0 0 0 .2rem rgba(30,165,211,.5)}.btn-vimeo.active,.btn-vimeo:active,.show>.btn-vimeo.dropdown-toggle{color:#fff;background-color:#1295bf;border-color:#108cb4}.btn-vimeo.active:focus,.btn-vimeo:active:focus,.show>.btn-vimeo.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(30,165,211,.5)}.btn-vimeo.disabled,.btn-vimeo:disabled{color:#354052;background-color:#1ab7ea;border-color:#1ab7ea}.btn-outline-vimeo{color:#1ab7ea;border-color:#1ab7ea}.btn-outline-vimeo:hover{color:#1ab7ea;background-color:#1ab7ea;border-color:#1ab7ea}.btn-outline-vimeo.focus,.btn-outline-vimeo:focus{box-shadow:0 0 0 .2rem rgba(26,183,234,.5)}.btn-outline-vimeo.active,.btn-outline-vimeo.dropdown-toggle.show,.btn-outline-vimeo:active{color:#354052;background-color:#1ab7ea;border-color:#1ab7ea}.btn-outline-vimeo.active:focus,.btn-outline-vimeo.dropdown-toggle.show:focus,.btn-outline-vimeo:active:focus{box-shadow:0 0 0 .2rem rgba(26,183,234,.5)}.btn-outline-vimeo.disabled,.btn-outline-vimeo:disabled{color:#1ab7ea;background-color:transparent}.btn-dribbble{color:#fff;background-color:#ea4c89;border-color:#ea4c89}.btn-dribbble:hover{color:#fff;background-color:#e62a72;border-color:#e51e6b}.btn-dribbble.focus,.btn-dribbble:focus{color:#fff;background-color:#e62a72;border-color:#e51e6b;box-shadow:0 0 0 .2rem rgba(237,103,155,.5)}.btn-dribbble.active,.btn-dribbble:active,.show>.btn-dribbble.dropdown-toggle{color:#fff;background-color:#e51e6b;border-color:#dc1a65}.btn-dribbble.active:focus,.btn-dribbble:active:focus,.show>.btn-dribbble.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(237,103,155,.5)}.btn-dribbble.disabled,.btn-dribbble:disabled{color:#fff;background-color:#ea4c89;border-color:#ea4c89}.btn-outline-dribbble{color:#ea4c89;border-color:#ea4c89}.btn-outline-dribbble:hover{color:#ea4c89;background-color:#ea4c89;border-color:#ea4c89}.btn-outline-dribbble.focus,.btn-outline-dribbble:focus{box-shadow:0 0 0 .2rem rgba(234,76,137,.5)}.btn-outline-dribbble.active,.btn-outline-dribbble.dropdown-toggle.show,.btn-outline-dribbble:active{color:#fff;background-color:#ea4c89;border-color:#ea4c89}.btn-outline-dribbble.active:focus,.btn-outline-dribbble.dropdown-toggle.show:focus,.btn-outline-dribbble:active:focus{box-shadow:0 0 0 .2rem rgba(234,76,137,.5)}.btn-outline-dribbble.disabled,.btn-outline-dribbble:disabled{color:#ea4c89;background-color:transparent}.btn-github{color:#fff;background-color:#181717;border-color:#181717}.btn-github:hover{color:#fff;background-color:#040404;border-color:#000}.btn-github.focus,.btn-github:focus{color:#fff;background-color:#040404;border-color:#000;box-shadow:0 0 0 .2rem rgba(59,58,58,.5)}.btn-github.active,.btn-github:active,.show>.btn-github.dropdown-toggle{color:#fff;background-color:#000;border-color:#000}.btn-github.active:focus,.btn-github:active:focus,.show>.btn-github.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(59,58,58,.5)}.btn-github.disabled,.btn-github:disabled{color:#fff;background-color:#181717;border-color:#181717}.btn-outline-github{color:#181717;border-color:#181717}.btn-outline-github:hover{color:#181717;background-color:#181717;border-color:#181717}.btn-outline-github.focus,.btn-outline-github:focus{box-shadow:0 0 0 .2rem rgba(24,23,23,.5)}.btn-outline-github.active,.btn-outline-github.dropdown-toggle.show,.btn-outline-github:active{color:#fff;background-color:#181717;border-color:#181717}.btn-outline-github.active:focus,.btn-outline-github.dropdown-toggle.show:focus,.btn-outline-github:active:focus{box-shadow:0 0 0 .2rem rgba(24,23,23,.5)}.btn-outline-github.disabled,.btn-outline-github:disabled{color:#181717;background-color:transparent}.btn-instagram{color:#fff;background-color:#e4405f;border-color:#e4405f}.btn-instagram:hover{color:#fff;background-color:#de1f44;border-color:#d31e40}.btn-instagram.focus,.btn-instagram:focus{color:#fff;background-color:#de1f44;border-color:#d31e40;box-shadow:0 0 0 .2rem rgba(232,93,119,.5)}.btn-instagram.active,.btn-instagram:active,.show>.btn-instagram.dropdown-toggle{color:#fff;background-color:#d31e40;border-color:#c81c3d}.btn-instagram.active:focus,.btn-instagram:active:focus,.show>.btn-instagram.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(232,93,119,.5)}.btn-instagram.disabled,.btn-instagram:disabled{color:#fff;background-color:#e4405f;border-color:#e4405f}.btn-outline-instagram{color:#e4405f;border-color:#e4405f}.btn-outline-instagram:hover{color:#e4405f;background-color:#e4405f;border-color:#e4405f}.btn-outline-instagram.focus,.btn-outline-instagram:focus{box-shadow:0 0 0 .2rem rgba(228,64,95,.5)}.btn-outline-instagram.active,.btn-outline-instagram.dropdown-toggle.show,.btn-outline-instagram:active{color:#fff;background-color:#e4405f;border-color:#e4405f}.btn-outline-instagram.active:focus,.btn-outline-instagram.dropdown-toggle.show:focus,.btn-outline-instagram:active:focus{box-shadow:0 0 0 .2rem rgba(228,64,95,.5)}.btn-outline-instagram.disabled,.btn-outline-instagram:disabled{color:#e4405f;background-color:transparent}.btn-pinterest{color:#fff;background-color:#bd081c;border-color:#bd081c}.btn-pinterest:hover{color:#fff;background-color:#980617;border-color:#8c0615}.btn-pinterest.focus,.btn-pinterest:focus{color:#fff;background-color:#980617;border-color:#8c0615;box-shadow:0 0 0 .2rem rgba(199,45,62,.5)}.btn-pinterest.active,.btn-pinterest:active,.show>.btn-pinterest.dropdown-toggle{color:#fff;background-color:#8c0615;border-color:#800513}.btn-pinterest.active:focus,.btn-pinterest:active:focus,.show>.btn-pinterest.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(199,45,62,.5)}.btn-pinterest.disabled,.btn-pinterest:disabled{color:#fff;background-color:#bd081c;border-color:#bd081c}.btn-outline-pinterest{color:#bd081c;border-color:#bd081c}.btn-outline-pinterest:hover{color:#bd081c;background-color:#bd081c;border-color:#bd081c}.btn-outline-pinterest.focus,.btn-outline-pinterest:focus{box-shadow:0 0 0 .2rem rgba(189,8,28,.5)}.btn-outline-pinterest.active,.btn-outline-pinterest.dropdown-toggle.show,.btn-outline-pinterest:active{color:#fff;background-color:#bd081c;border-color:#bd081c}.btn-outline-pinterest.active:focus,.btn-outline-pinterest.dropdown-toggle.show:focus,.btn-outline-pinterest:active:focus{box-shadow:0 0 0 .2rem rgba(189,8,28,.5)}.btn-outline-pinterest.disabled,.btn-outline-pinterest:disabled{color:#bd081c;background-color:transparent}.btn-vk{color:#fff;background-color:#6383a8;border-color:#6383a8}.btn-vk:hover{color:#fff;background-color:#527093;border-color:#4d6a8b}.btn-vk.focus,.btn-vk:focus{color:#fff;background-color:#527093;border-color:#4d6a8b;box-shadow:0 0 0 .2rem rgba(122,150,181,.5)}.btn-vk.active,.btn-vk:active,.show>.btn-vk.dropdown-toggle{color:#fff;background-color:#4d6a8b;border-color:#496482}.btn-vk.active:focus,.btn-vk:active:focus,.show>.btn-vk.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(122,150,181,.5)}.btn-vk.disabled,.btn-vk:disabled{color:#fff;background-color:#6383a8;border-color:#6383a8}.btn-outline-vk{color:#6383a8;border-color:#6383a8}.btn-outline-vk:hover{color:#6383a8;background-color:#6383a8;border-color:#6383a8}.btn-outline-vk.focus,.btn-outline-vk:focus{box-shadow:0 0 0 .2rem rgba(99,131,168,.5)}.btn-outline-vk.active,.btn-outline-vk.dropdown-toggle.show,.btn-outline-vk:active{color:#fff;background-color:#6383a8;border-color:#6383a8}.btn-outline-vk.active:focus,.btn-outline-vk.dropdown-toggle.show:focus,.btn-outline-vk:active:focus{box-shadow:0 0 0 .2rem rgba(99,131,168,.5)}.btn-outline-vk.disabled,.btn-outline-vk:disabled{color:#6383a8;background-color:transparent}.btn-rss{color:#354052;background-color:orange;border-color:orange}.btn-rss:hover{color:#354052;background-color:#d98c00;border-color:#cc8400}.btn-rss.focus,.btn-rss:focus{color:#354052;background-color:#d98c00;border-color:#cc8400;box-shadow:0 0 0 .2rem rgba(225,150,12,.5)}.btn-rss.active,.btn-rss:active,.show>.btn-rss.dropdown-toggle{color:#fff;background-color:#cc8400;border-color:#bf7c00}.btn-rss.active:focus,.btn-rss:active:focus,.show>.btn-rss.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(225,150,12,.5)}.btn-rss.disabled,.btn-rss:disabled{color:#354052;background-color:orange;border-color:orange}.btn-outline-rss{color:orange;border-color:orange}.btn-outline-rss:hover{color:orange;background-color:orange;border-color:orange}.btn-outline-rss.focus,.btn-outline-rss:focus{box-shadow:0 0 0 .2rem rgba(255,165,0,.5)}.btn-outline-rss.active,.btn-outline-rss.dropdown-toggle.show,.btn-outline-rss:active{color:#354052;background-color:orange;border-color:orange}.btn-outline-rss.active:focus,.btn-outline-rss.dropdown-toggle.show:focus,.btn-outline-rss:active:focus{box-shadow:0 0 0 .2rem rgba(255,165,0,.5)}.btn-outline-rss.disabled,.btn-outline-rss:disabled{color:orange;background-color:transparent}.btn-flickr{color:#fff;background-color:#0063dc;border-color:#0063dc}.btn-flickr:hover{color:#fff;background-color:#0052b6;border-color:#004ca9}.btn-flickr.focus,.btn-flickr:focus{color:#fff;background-color:#0052b6;border-color:#004ca9;box-shadow:0 0 0 .2rem rgba(38,122,225,.5)}.btn-flickr.active,.btn-flickr:active,.show>.btn-flickr.dropdown-toggle{color:#fff;background-color:#004ca9;border-color:#00469c}.btn-flickr.active:focus,.btn-flickr:active:focus,.show>.btn-flickr.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(38,122,225,.5)}.btn-flickr.disabled,.btn-flickr:disabled{color:#fff;background-color:#0063dc;border-color:#0063dc}.btn-outline-flickr{color:#0063dc;border-color:#0063dc}.btn-outline-flickr:hover{color:#0063dc;background-color:#0063dc;border-color:#0063dc}.btn-outline-flickr.focus,.btn-outline-flickr:focus{box-shadow:0 0 0 .2rem rgba(0,99,220,.5)}.btn-outline-flickr.active,.btn-outline-flickr.dropdown-toggle.show,.btn-outline-flickr:active{color:#fff;background-color:#0063dc;border-color:#0063dc}.btn-outline-flickr.active:focus,.btn-outline-flickr.dropdown-toggle.show:focus,.btn-outline-flickr:active:focus{box-shadow:0 0 0 .2rem rgba(0,99,220,.5)}.btn-outline-flickr.disabled,.btn-outline-flickr:disabled{color:#0063dc;background-color:transparent}.btn-bitbucket{color:#fff;background-color:#0052cc;border-color:#0052cc}.btn-bitbucket:hover{color:#fff;background-color:#0043a6;border-color:#003e99}.btn-bitbucket.focus,.btn-bitbucket:focus{color:#fff;background-color:#0043a6;border-color:#003e99;box-shadow:0 0 0 .2rem rgba(38,108,212,.5)}.btn-bitbucket.active,.btn-bitbucket:active,.show>.btn-bitbucket.dropdown-toggle{color:#fff;background-color:#003e99;border-color:#00388c}.btn-bitbucket.active:focus,.btn-bitbucket:active:focus,.show>.btn-bitbucket.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(38,108,212,.5)}.btn-bitbucket.disabled,.btn-bitbucket:disabled{color:#fff;background-color:#0052cc;border-color:#0052cc}.btn-outline-bitbucket{color:#0052cc;border-color:#0052cc}.btn-outline-bitbucket:hover{color:#0052cc;background-color:#0052cc;border-color:#0052cc}.btn-outline-bitbucket.focus,.btn-outline-bitbucket:focus{box-shadow:0 0 0 .2rem rgba(0,82,204,.5)}.btn-outline-bitbucket.active,.btn-outline-bitbucket.dropdown-toggle.show,.btn-outline-bitbucket:active{color:#fff;background-color:#0052cc;border-color:#0052cc}.btn-outline-bitbucket.active:focus,.btn-outline-bitbucket.dropdown-toggle.show:focus,.btn-outline-bitbucket:active:focus{box-shadow:0 0 0 .2rem rgba(0,82,204,.5)}.btn-outline-bitbucket.disabled,.btn-outline-bitbucket:disabled{color:#0052cc;background-color:transparent}.btn-tabler{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-tabler:hover{color:#fff;background-color:#1b59a3;border-color:#195398}.btn-tabler.focus,.btn-tabler:focus{color:#fff;background-color:#1b59a3;border-color:#195398;box-shadow:0 0 0 .2rem rgba(65,129,205,.5)}.btn-tabler.active,.btn-tabler:active,.show>.btn-tabler.dropdown-toggle{color:#fff;background-color:#195398;border-color:#174d8d}.btn-tabler.active:focus,.btn-tabler:active:focus,.show>.btn-tabler.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(65,129,205,.5)}.btn-tabler.disabled,.btn-tabler:disabled{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-outline-tabler{color:#206bc4;border-color:#206bc4}.btn-outline-tabler:hover{color:#206bc4;background-color:#206bc4;border-color:#206bc4}.btn-outline-tabler.focus,.btn-outline-tabler:focus{box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-outline-tabler.active,.btn-outline-tabler.dropdown-toggle.show,.btn-outline-tabler:active{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-outline-tabler.active:focus,.btn-outline-tabler.dropdown-toggle.show:focus,.btn-outline-tabler:active:focus{box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-outline-tabler.disabled,.btn-outline-tabler:disabled{color:#206bc4;background-color:transparent}.btn-blue{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-blue:hover{color:#fff;background-color:#1b59a3;border-color:#195398}.btn-blue.focus,.btn-blue:focus{color:#fff;background-color:#1b59a3;border-color:#195398;box-shadow:0 0 0 .2rem rgba(65,129,205,.5)}.btn-blue.active,.btn-blue:active,.show>.btn-blue.dropdown-toggle{color:#fff;background-color:#195398;border-color:#174d8d}.btn-blue.active:focus,.btn-blue:active:focus,.show>.btn-blue.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(65,129,205,.5)}.btn-blue.disabled,.btn-blue:disabled{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-outline-blue{color:#206bc4;border-color:#206bc4}.btn-outline-blue:hover{color:#206bc4;background-color:#206bc4;border-color:#206bc4}.btn-outline-blue.focus,.btn-outline-blue:focus{box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-outline-blue.active,.btn-outline-blue.dropdown-toggle.show,.btn-outline-blue:active{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-outline-blue.active:focus,.btn-outline-blue.dropdown-toggle.show:focus,.btn-outline-blue:active:focus{box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-outline-blue.disabled,.btn-outline-blue:disabled{color:#206bc4;background-color:transparent}.btn-azure{color:#354052;background-color:#45aaf2;border-color:#45aaf2}.btn-azure:hover{color:#fff;background-color:#219af0;border-color:#1594ef}.btn-azure.focus,.btn-azure:focus{color:#fff;background-color:#219af0;border-color:#1594ef;box-shadow:0 0 0 .2rem rgba(67,154,218,.5)}.btn-azure.active,.btn-azure:active,.show>.btn-azure.dropdown-toggle{color:#fff;background-color:#1594ef;border-color:#108ee7}.btn-azure.active:focus,.btn-azure:active:focus,.show>.btn-azure.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(67,154,218,.5)}.btn-azure.disabled,.btn-azure:disabled{color:#354052;background-color:#45aaf2;border-color:#45aaf2}.btn-outline-azure{color:#45aaf2;border-color:#45aaf2}.btn-outline-azure:hover{color:#45aaf2;background-color:#45aaf2;border-color:#45aaf2}.btn-outline-azure.focus,.btn-outline-azure:focus{box-shadow:0 0 0 .2rem rgba(69,170,242,.5)}.btn-outline-azure.active,.btn-outline-azure.dropdown-toggle.show,.btn-outline-azure:active{color:#354052;background-color:#45aaf2;border-color:#45aaf2}.btn-outline-azure.active:focus,.btn-outline-azure.dropdown-toggle.show:focus,.btn-outline-azure:active:focus{box-shadow:0 0 0 .2rem rgba(69,170,242,.5)}.btn-outline-azure.disabled,.btn-outline-azure:disabled{color:#45aaf2;background-color:transparent}.btn-indigo{color:#fff;background-color:#6574cd;border-color:#6574cd}.btn-indigo:hover{color:#fff;background-color:#485ac4;border-color:#3f51c1}.btn-indigo.focus,.btn-indigo:focus{color:#fff;background-color:#485ac4;border-color:#3f51c1;box-shadow:0 0 0 .2rem rgba(124,137,213,.5)}.btn-indigo.active,.btn-indigo:active,.show>.btn-indigo.dropdown-toggle{color:#fff;background-color:#3f51c1;border-color:#3b4db7}.btn-indigo.active:focus,.btn-indigo:active:focus,.show>.btn-indigo.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(124,137,213,.5)}.btn-indigo.disabled,.btn-indigo:disabled{color:#fff;background-color:#6574cd;border-color:#6574cd}.btn-outline-indigo{color:#6574cd;border-color:#6574cd}.btn-outline-indigo:hover{color:#6574cd;background-color:#6574cd;border-color:#6574cd}.btn-outline-indigo.focus,.btn-outline-indigo:focus{box-shadow:0 0 0 .2rem rgba(101,116,205,.5)}.btn-outline-indigo.active,.btn-outline-indigo.dropdown-toggle.show,.btn-outline-indigo:active{color:#fff;background-color:#6574cd;border-color:#6574cd}.btn-outline-indigo.active:focus,.btn-outline-indigo.dropdown-toggle.show:focus,.btn-outline-indigo:active:focus{box-shadow:0 0 0 .2rem rgba(101,116,205,.5)}.btn-outline-indigo.disabled,.btn-outline-indigo:disabled{color:#6574cd;background-color:transparent}.btn-purple{color:#fff;background-color:#a55eea;border-color:#a55eea}.btn-purple:hover{color:#fff;background-color:#923ce6;border-color:#8c31e4}.btn-purple.focus,.btn-purple:focus{color:#fff;background-color:#923ce6;border-color:#8c31e4;box-shadow:0 0 0 .2rem rgba(179,118,237,.5)}.btn-purple.active,.btn-purple:active,.show>.btn-purple.dropdown-toggle{color:#fff;background-color:#8c31e4;border-color:#8526e3}.btn-purple.active:focus,.btn-purple:active:focus,.show>.btn-purple.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(179,118,237,.5)}.btn-purple.disabled,.btn-purple:disabled{color:#fff;background-color:#a55eea;border-color:#a55eea}.btn-outline-purple{color:#a55eea;border-color:#a55eea}.btn-outline-purple:hover{color:#a55eea;background-color:#a55eea;border-color:#a55eea}.btn-outline-purple.focus,.btn-outline-purple:focus{box-shadow:0 0 0 .2rem rgba(165,94,234,.5)}.btn-outline-purple.active,.btn-outline-purple.dropdown-toggle.show,.btn-outline-purple:active{color:#fff;background-color:#a55eea;border-color:#a55eea}.btn-outline-purple.active:focus,.btn-outline-purple.dropdown-toggle.show:focus,.btn-outline-purple:active:focus{box-shadow:0 0 0 .2rem rgba(165,94,234,.5)}.btn-outline-purple.disabled,.btn-outline-purple:disabled{color:#a55eea;background-color:transparent}.btn-pink{color:#354052;background-color:#f66d9b;border-color:#f66d9b}.btn-pink:hover{color:#fff;background-color:#f44982;border-color:#f33d7a}.btn-pink.focus,.btn-pink:focus{color:#fff;background-color:#f44982;border-color:#f33d7a;box-shadow:0 0 0 .2rem rgba(217,102,144,.5)}.btn-pink.active,.btn-pink:active,.show>.btn-pink.dropdown-toggle{color:#fff;background-color:#f33d7a;border-color:#f23172}.btn-pink.active:focus,.btn-pink:active:focus,.show>.btn-pink.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(217,102,144,.5)}.btn-pink.disabled,.btn-pink:disabled{color:#354052;background-color:#f66d9b;border-color:#f66d9b}.btn-outline-pink{color:#f66d9b;border-color:#f66d9b}.btn-outline-pink:hover{color:#f66d9b;background-color:#f66d9b;border-color:#f66d9b}.btn-outline-pink.focus,.btn-outline-pink:focus{box-shadow:0 0 0 .2rem rgba(246,109,155,.5)}.btn-outline-pink.active,.btn-outline-pink.dropdown-toggle.show,.btn-outline-pink:active{color:#354052;background-color:#f66d9b;border-color:#f66d9b}.btn-outline-pink.active:focus,.btn-outline-pink.dropdown-toggle.show:focus,.btn-outline-pink:active:focus{box-shadow:0 0 0 .2rem rgba(246,109,155,.5)}.btn-outline-pink.disabled,.btn-outline-pink:disabled{color:#f66d9b;background-color:transparent}.btn-red{color:#fff;background-color:#fa4654;border-color:#fa4654}.btn-red:hover{color:#fff;background-color:#f92132;border-color:#f91426}.btn-red.focus,.btn-red:focus{color:#fff;background-color:#f92132;border-color:#f91426;box-shadow:0 0 0 .2rem rgba(251,98,110,.5)}.btn-red.active,.btn-red:active,.show>.btn-red.dropdown-toggle{color:#fff;background-color:#f91426;border-color:#f8081b}.btn-red.active:focus,.btn-red:active:focus,.show>.btn-red.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(251,98,110,.5)}.btn-red.disabled,.btn-red:disabled{color:#fff;background-color:#fa4654;border-color:#fa4654}.btn-outline-red{color:#fa4654;border-color:#fa4654}.btn-outline-red:hover{color:#fa4654;background-color:#fa4654;border-color:#fa4654}.btn-outline-red.focus,.btn-outline-red:focus{box-shadow:0 0 0 .2rem rgba(250,70,84,.5)}.btn-outline-red.active,.btn-outline-red.dropdown-toggle.show,.btn-outline-red:active{color:#fff;background-color:#fa4654;border-color:#fa4654}.btn-outline-red.active:focus,.btn-outline-red.dropdown-toggle.show:focus,.btn-outline-red:active:focus{box-shadow:0 0 0 .2rem rgba(250,70,84,.5)}.btn-outline-red.disabled,.btn-outline-red:disabled{color:#fa4654;background-color:transparent}.btn-orange{color:#354052;background-color:#ff922b;border-color:#ff922b}.btn-orange:hover{color:#354052;background-color:#ff7e05;border-color:#f77800}.btn-orange.focus,.btn-orange:focus{color:#354052;background-color:#ff7e05;border-color:#f77800;box-shadow:0 0 0 .2rem rgba(225,134,49,.5)}.btn-orange.active,.btn-orange:active,.show>.btn-orange.dropdown-toggle{color:#354052;background-color:#f77800;border-color:#ea7200}.btn-orange.active:focus,.btn-orange:active:focus,.show>.btn-orange.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(225,134,49,.5)}.btn-orange.disabled,.btn-orange:disabled{color:#354052;background-color:#ff922b;border-color:#ff922b}.btn-outline-orange{color:#ff922b;border-color:#ff922b}.btn-outline-orange:hover{color:#ff922b;background-color:#ff922b;border-color:#ff922b}.btn-outline-orange.focus,.btn-outline-orange:focus{box-shadow:0 0 0 .2rem rgba(255,146,43,.5)}.btn-outline-orange.active,.btn-outline-orange.dropdown-toggle.show,.btn-outline-orange:active{color:#354052;background-color:#ff922b;border-color:#ff922b}.btn-outline-orange.active:focus,.btn-outline-orange.dropdown-toggle.show:focus,.btn-outline-orange:active:focus{box-shadow:0 0 0 .2rem rgba(255,146,43,.5)}.btn-outline-orange.disabled,.btn-outline-orange:disabled{color:#ff922b;background-color:transparent}.btn-yellow{color:#354052;background-color:#fab005;border-color:#fab005}.btn-yellow:hover{color:#354052;background-color:#d59604;border-color:#c88d04}.btn-yellow.focus,.btn-yellow:focus{color:#354052;background-color:#d59604;border-color:#c88d04;box-shadow:0 0 0 .2rem rgba(220,159,17,.5)}.btn-yellow.active,.btn-yellow:active,.show>.btn-yellow.dropdown-toggle{color:#354052;background-color:#c88d04;border-color:#bc8404}.btn-yellow.active:focus,.btn-yellow:active:focus,.show>.btn-yellow.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(220,159,17,.5)}.btn-yellow.disabled,.btn-yellow:disabled{color:#354052;background-color:#fab005;border-color:#fab005}.btn-outline-yellow{color:#fab005;border-color:#fab005}.btn-outline-yellow:hover{color:#fab005;background-color:#fab005;border-color:#fab005}.btn-outline-yellow.focus,.btn-outline-yellow:focus{box-shadow:0 0 0 .2rem rgba(250,176,5,.5)}.btn-outline-yellow.active,.btn-outline-yellow.dropdown-toggle.show,.btn-outline-yellow:active{color:#354052;background-color:#fab005;border-color:#fab005}.btn-outline-yellow.active:focus,.btn-outline-yellow.dropdown-toggle.show:focus,.btn-outline-yellow:active:focus{box-shadow:0 0 0 .2rem rgba(250,176,5,.5)}.btn-outline-yellow.disabled,.btn-outline-yellow:disabled{color:#fab005;background-color:transparent}.btn-lime{color:#354052;background-color:#94d82d;border-color:#94d82d}.btn-lime:hover{color:#354052;background-color:#7fbc23;border-color:#78b121}.btn-lime.focus,.btn-lime:focus{color:#354052;background-color:#7fbc23;border-color:#78b121;box-shadow:0 0 0 .2rem rgba(134,193,51,.5)}.btn-lime.active,.btn-lime:active,.show>.btn-lime.dropdown-toggle{color:#354052;background-color:#78b121;border-color:#70a61f}.btn-lime.active:focus,.btn-lime:active:focus,.show>.btn-lime.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(134,193,51,.5)}.btn-lime.disabled,.btn-lime:disabled{color:#354052;background-color:#94d82d;border-color:#94d82d}.btn-outline-lime{color:#94d82d;border-color:#94d82d}.btn-outline-lime:hover{color:#94d82d;background-color:#94d82d;border-color:#94d82d}.btn-outline-lime.focus,.btn-outline-lime:focus{box-shadow:0 0 0 .2rem rgba(148,216,45,.5)}.btn-outline-lime.active,.btn-outline-lime.dropdown-toggle.show,.btn-outline-lime:active{color:#354052;background-color:#94d82d;border-color:#94d82d}.btn-outline-lime.active:focus,.btn-outline-lime.dropdown-toggle.show:focus,.btn-outline-lime:active:focus{box-shadow:0 0 0 .2rem rgba(148,216,45,.5)}.btn-outline-lime.disabled,.btn-outline-lime:disabled{color:#94d82d;background-color:transparent}.btn-green{color:#354052;background-color:#5eba00;border-color:#5eba00}.btn-green:hover{color:#fff;background-color:#4b9400;border-color:#448700}.btn-green.focus,.btn-green:focus{color:#fff;background-color:#4b9400;border-color:#448700;box-shadow:0 0 0 .2rem rgba(88,168,12,.5)}.btn-green.active,.btn-green:active,.show>.btn-green.dropdown-toggle{color:#fff;background-color:#448700;border-color:#3e7a00}.btn-green.active:focus,.btn-green:active:focus,.show>.btn-green.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(88,168,12,.5)}.btn-green.disabled,.btn-green:disabled{color:#354052;background-color:#5eba00;border-color:#5eba00}.btn-outline-green{color:#5eba00;border-color:#5eba00}.btn-outline-green:hover{color:#5eba00;background-color:#5eba00;border-color:#5eba00}.btn-outline-green.focus,.btn-outline-green:focus{box-shadow:0 0 0 .2rem rgba(94,186,0,.5)}.btn-outline-green.active,.btn-outline-green.dropdown-toggle.show,.btn-outline-green:active{color:#354052;background-color:#5eba00;border-color:#5eba00}.btn-outline-green.active:focus,.btn-outline-green.dropdown-toggle.show:focus,.btn-outline-green:active:focus{box-shadow:0 0 0 .2rem rgba(94,186,0,.5)}.btn-outline-green.disabled,.btn-outline-green:disabled{color:#5eba00;background-color:transparent}.btn-teal{color:#354052;background-color:#2bcbba;border-color:#2bcbba}.btn-teal:hover{color:#354052;background-color:#24ab9d;border-color:#22a193}.btn-teal.focus,.btn-teal:focus{color:#354052;background-color:#24ab9d;border-color:#22a193;box-shadow:0 0 0 .2rem rgba(45,182,170,.5)}.btn-teal.active,.btn-teal:active,.show>.btn-teal.dropdown-toggle{color:#fff;background-color:#22a193;border-color:#20968a}.btn-teal.active:focus,.btn-teal:active:focus,.show>.btn-teal.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(45,182,170,.5)}.btn-teal.disabled,.btn-teal:disabled{color:#354052;background-color:#2bcbba;border-color:#2bcbba}.btn-outline-teal{color:#2bcbba;border-color:#2bcbba}.btn-outline-teal:hover{color:#2bcbba;background-color:#2bcbba;border-color:#2bcbba}.btn-outline-teal.focus,.btn-outline-teal:focus{box-shadow:0 0 0 .2rem rgba(43,203,186,.5)}.btn-outline-teal.active,.btn-outline-teal.dropdown-toggle.show,.btn-outline-teal:active{color:#354052;background-color:#2bcbba;border-color:#2bcbba}.btn-outline-teal.active:focus,.btn-outline-teal.dropdown-toggle.show:focus,.btn-outline-teal:active:focus{box-shadow:0 0 0 .2rem rgba(43,203,186,.5)}.btn-outline-teal.disabled,.btn-outline-teal:disabled{color:#2bcbba;background-color:transparent}.btn-cyan{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-cyan:hover{color:#fff;background-color:#138496;border-color:#117a8b}.btn-cyan.focus,.btn-cyan:focus{color:#fff;background-color:#138496;border-color:#117a8b;box-shadow:0 0 0 .2rem rgba(58,176,195,.5)}.btn-cyan.active,.btn-cyan:active,.show>.btn-cyan.dropdown-toggle{color:#fff;background-color:#117a8b;border-color:#10707f}.btn-cyan.active:focus,.btn-cyan:active:focus,.show>.btn-cyan.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(58,176,195,.5)}.btn-cyan.disabled,.btn-cyan:disabled{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-cyan{color:#17a2b8;border-color:#17a2b8}.btn-outline-cyan:hover{color:#17a2b8;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-cyan.focus,.btn-outline-cyan:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-outline-cyan.active,.btn-outline-cyan.dropdown-toggle.show,.btn-outline-cyan:active{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-cyan.active:focus,.btn-outline-cyan.dropdown-toggle.show:focus,.btn-outline-cyan:active:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-outline-cyan.disabled,.btn-outline-cyan:disabled{color:#17a2b8;background-color:transparent}.btn-white{color:#354052;background-color:#fff;border-color:#fff}.btn-white:hover{color:#354052;background-color:#ececec;border-color:#e6e6e6}.btn-white.focus,.btn-white:focus{color:#354052;background-color:#ececec;border-color:#e6e6e6;box-shadow:0 0 0 .2rem rgba(225,226,229,.5)}.btn-white.active,.btn-white:active,.show>.btn-white.dropdown-toggle{color:#354052;background-color:#e6e6e6;border-color:#dfdfdf}.btn-white.active:focus,.btn-white:active:focus,.show>.btn-white.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(225,226,229,.5)}.btn-white.disabled,.btn-white:disabled{color:#354052;background-color:#fff;border-color:#fff}.btn-outline-white{color:#fff;border-color:#fff}.btn-outline-white:hover{color:#fff;background-color:#fff;border-color:#fff}.btn-outline-white.focus,.btn-outline-white:focus{box-shadow:0 0 0 .2rem rgba(255,255,255,.5)}.btn-outline-white.active,.btn-outline-white.dropdown-toggle.show,.btn-outline-white:active{color:#354052;background-color:#fff;border-color:#fff}.btn-outline-white.active:focus,.btn-outline-white.dropdown-toggle.show:focus,.btn-outline-white:active:focus{box-shadow:0 0 0 .2rem rgba(255,255,255,.5)}.btn-outline-white.disabled,.btn-outline-white:disabled{color:#fff;background-color:transparent}.btn-gray{color:#354052;background-color:#a8aeb7;border-color:#a8aeb7}.btn-gray:hover{color:#354052;background-color:#939ba6;border-color:#8c94a0}.btn-gray.focus,.btn-gray:focus{color:#354052;background-color:#939ba6;border-color:#8c94a0;box-shadow:0 0 0 .2rem rgba(151,158,168,.5)}.btn-gray.active,.btn-gray:active,.show>.btn-gray.dropdown-toggle{color:#fff;background-color:#8c94a0;border-color:#858e9a}.btn-gray.active:focus,.btn-gray:active:focus,.show>.btn-gray.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(151,158,168,.5)}.btn-gray.disabled,.btn-gray:disabled{color:#354052;background-color:#a8aeb7;border-color:#a8aeb7}.btn-outline-gray{color:#a8aeb7;border-color:#a8aeb7}.btn-outline-gray:hover{color:#a8aeb7;background-color:#a8aeb7;border-color:#a8aeb7}.btn-outline-gray.focus,.btn-outline-gray:focus{box-shadow:0 0 0 .2rem rgba(168,174,183,.5)}.btn-outline-gray.active,.btn-outline-gray.dropdown-toggle.show,.btn-outline-gray:active{color:#354052;background-color:#a8aeb7;border-color:#a8aeb7}.btn-outline-gray.active:focus,.btn-outline-gray.dropdown-toggle.show:focus,.btn-outline-gray:active:focus{box-shadow:0 0 0 .2rem rgba(168,174,183,.5)}.btn-outline-gray.disabled,.btn-outline-gray:disabled{color:#a8aeb7;background-color:transparent}.btn-gray-dark{color:#fff;background-color:#545d6d;border-color:#545d6d}.btn-gray-dark:hover{color:#fff;background-color:#434b57;border-color:#3e4450}.btn-gray-dark.focus,.btn-gray-dark:focus{color:#fff;background-color:#434b57;border-color:#3e4450;box-shadow:0 0 0 .2rem rgba(110,117,131,.5)}.btn-gray-dark.active,.btn-gray-dark:active,.show>.btn-gray-dark.dropdown-toggle{color:#fff;background-color:#3e4450;border-color:#383e49}.btn-gray-dark.active:focus,.btn-gray-dark:active:focus,.show>.btn-gray-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(110,117,131,.5)}.btn-gray-dark.disabled,.btn-gray-dark:disabled{color:#fff;background-color:#545d6d;border-color:#545d6d}.btn-outline-gray-dark{color:#545d6d;border-color:#545d6d}.btn-outline-gray-dark:hover{color:#545d6d;background-color:#545d6d;border-color:#545d6d}.btn-outline-gray-dark.focus,.btn-outline-gray-dark:focus{box-shadow:0 0 0 .2rem rgba(84,93,109,.5)}.btn-outline-gray-dark.active,.btn-outline-gray-dark.dropdown-toggle.show,.btn-outline-gray-dark:active{color:#fff;background-color:#545d6d;border-color:#545d6d}.btn-outline-gray-dark.active:focus,.btn-outline-gray-dark.dropdown-toggle.show:focus,.btn-outline-gray-dark:active:focus{box-shadow:0 0 0 .2rem rgba(84,93,109,.5)}.btn-outline-gray-dark.disabled,.btn-outline-gray-dark:disabled{color:#545d6d;background-color:transparent}.btn-dark{color:#fff;background-color:#354052;border-color:#354052}.btn-dark:hover{color:#fff;background-color:#262e3b;border-color:#212833}.btn-dark.focus,.btn-dark:focus{color:#fff;background-color:#262e3b;border-color:#212833;box-shadow:0 0 0 .2rem rgba(83,93,108,.5)}.btn-dark.active,.btn-dark:active,.show>.btn-dark.dropdown-toggle{color:#fff;background-color:#212833;border-color:#1c222b}.btn-dark.active:focus,.btn-dark:active:focus,.show>.btn-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(83,93,108,.5)}.btn-dark.disabled,.btn-dark:disabled{color:#fff;background-color:#354052;border-color:#354052}.btn-outline-dark{color:#354052;border-color:#354052}.btn-outline-dark:hover{color:#354052;background-color:#354052;border-color:#354052}.btn-outline-dark.focus,.btn-outline-dark:focus{box-shadow:0 0 0 .2rem rgba(53,64,82,.5)}.btn-outline-dark.active,.btn-outline-dark.dropdown-toggle.show,.btn-outline-dark:active{color:#fff;background-color:#354052;border-color:#354052}.btn-outline-dark.active:focus,.btn-outline-dark.dropdown-toggle.show:focus,.btn-outline-dark:active:focus{box-shadow:0 0 0 .2rem rgba(53,64,82,.5)}.btn-outline-dark.disabled,.btn-outline-dark:disabled{color:#354052;background-color:transparent}
+ */.btn-ghost-primary{color:#206bc4;background-color:transparent;border-color:transparent}.btn-ghost-primary:hover{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-ghost-primary.focus,.btn-ghost-primary:focus{color:#fff;background-color:#206bc4;border-color:#206bc4;box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-ghost-primary.active,.btn-ghost-primary:active,.show>.btn-ghost-primary.dropdown-toggle{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-ghost-primary.active:focus,.btn-ghost-primary:active:focus,.show>.btn-ghost-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-ghost-primary.disabled,.btn-ghost-primary:disabled{color:#206bc4;background-color:transparent;border-color:transparent}.btn-ghost-secondary{color:#6e7582;background-color:transparent;border-color:transparent}.btn-ghost-secondary:hover{color:#fff;background-color:#6e7582;border-color:#6e7582}.btn-ghost-secondary.focus,.btn-ghost-secondary:focus{color:#fff;background-color:#6e7582;border-color:#6e7582;box-shadow:0 0 0 .2rem rgba(110,117,130,.5)}.btn-ghost-secondary.active,.btn-ghost-secondary:active,.show>.btn-ghost-secondary.dropdown-toggle{color:#fff;background-color:#6e7582;border-color:#6e7582}.btn-ghost-secondary.active:focus,.btn-ghost-secondary:active:focus,.show>.btn-ghost-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(110,117,130,.5)}.btn-ghost-secondary.disabled,.btn-ghost-secondary:disabled{color:#6e7582;background-color:transparent;border-color:transparent}.btn-ghost-success{color:#5eba00;background-color:transparent;border-color:transparent}.btn-ghost-success:hover{color:#fff;background-color:#5eba00;border-color:#5eba00}.btn-ghost-success.focus,.btn-ghost-success:focus{color:#fff;background-color:#5eba00;border-color:#5eba00;box-shadow:0 0 0 .2rem rgba(94,186,0,.5)}.btn-ghost-success.active,.btn-ghost-success:active,.show>.btn-ghost-success.dropdown-toggle{color:#fff;background-color:#5eba00;border-color:#5eba00}.btn-ghost-success.active:focus,.btn-ghost-success:active:focus,.show>.btn-ghost-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(94,186,0,.5)}.btn-ghost-success.disabled,.btn-ghost-success:disabled{color:#5eba00;background-color:transparent;border-color:transparent}.btn-ghost-info{color:#45aaf2;background-color:transparent;border-color:transparent}.btn-ghost-info:hover{color:#fff;background-color:#45aaf2;border-color:#45aaf2}.btn-ghost-info.focus,.btn-ghost-info:focus{color:#fff;background-color:#45aaf2;border-color:#45aaf2;box-shadow:0 0 0 .2rem rgba(69,170,242,.5)}.btn-ghost-info.active,.btn-ghost-info:active,.show>.btn-ghost-info.dropdown-toggle{color:#fff;background-color:#45aaf2;border-color:#45aaf2}.btn-ghost-info.active:focus,.btn-ghost-info:active:focus,.show>.btn-ghost-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(69,170,242,.5)}.btn-ghost-info.disabled,.btn-ghost-info:disabled{color:#45aaf2;background-color:transparent;border-color:transparent}.btn-ghost-warning{color:#fab005;background-color:transparent;border-color:transparent}.btn-ghost-warning:hover{color:#fff;background-color:#fab005;border-color:#fab005}.btn-ghost-warning.focus,.btn-ghost-warning:focus{color:#fff;background-color:#fab005;border-color:#fab005;box-shadow:0 0 0 .2rem rgba(250,176,5,.5)}.btn-ghost-warning.active,.btn-ghost-warning:active,.show>.btn-ghost-warning.dropdown-toggle{color:#fff;background-color:#fab005;border-color:#fab005}.btn-ghost-warning.active:focus,.btn-ghost-warning:active:focus,.show>.btn-ghost-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(250,176,5,.5)}.btn-ghost-warning.disabled,.btn-ghost-warning:disabled{color:#fab005;background-color:transparent;border-color:transparent}.btn-ghost-danger{color:#cd201f;background-color:transparent;border-color:transparent}.btn-ghost-danger:hover{color:#fff;background-color:#cd201f;border-color:#cd201f}.btn-ghost-danger.focus,.btn-ghost-danger:focus{color:#fff;background-color:#cd201f;border-color:#cd201f;box-shadow:0 0 0 .2rem rgba(205,32,31,.5)}.btn-ghost-danger.active,.btn-ghost-danger:active,.show>.btn-ghost-danger.dropdown-toggle{color:#fff;background-color:#cd201f;border-color:#cd201f}.btn-ghost-danger.active:focus,.btn-ghost-danger:active:focus,.show>.btn-ghost-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(205,32,31,.5)}.btn-ghost-danger.disabled,.btn-ghost-danger:disabled{color:#cd201f;background-color:transparent;border-color:transparent}.btn-ghost-light{color:#f5f7fb;background-color:transparent;border-color:transparent}.btn-ghost-light:hover{color:#fff;background-color:#f5f7fb;border-color:#f5f7fb}.btn-ghost-light.focus,.btn-ghost-light:focus{color:#fff;background-color:#f5f7fb;border-color:#f5f7fb;box-shadow:0 0 0 .2rem rgba(245,247,251,.5)}.btn-ghost-light.active,.btn-ghost-light:active,.show>.btn-ghost-light.dropdown-toggle{color:#354052;background-color:#f5f7fb;border-color:#f5f7fb}.btn-ghost-light.active:focus,.btn-ghost-light:active:focus,.show>.btn-ghost-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(245,247,251,.5)}.btn-ghost-light.disabled,.btn-ghost-light:disabled{color:#f5f7fb;background-color:transparent;border-color:transparent}.btn-ghost-dark{color:#354052;background-color:transparent;border-color:transparent}.btn-ghost-dark:hover{color:#fff;background-color:#354052;border-color:#354052}.btn-ghost-dark.focus,.btn-ghost-dark:focus{color:#fff;background-color:#354052;border-color:#354052;box-shadow:0 0 0 .2rem rgba(53,64,82,.5)}.btn-ghost-dark.active,.btn-ghost-dark:active,.show>.btn-ghost-dark.dropdown-toggle{color:#fff;background-color:#354052;border-color:#354052}.btn-ghost-dark.active:focus,.btn-ghost-dark:active:focus,.show>.btn-ghost-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(53,64,82,.5)}.btn-ghost-dark.disabled,.btn-ghost-dark:disabled{color:#354052;background-color:transparent;border-color:transparent}.btn-facebook{color:#fff;background-color:#3b5998;border-color:#3b5998}.btn-facebook:hover{color:#fff;background-color:#30497c;border-color:#2d4373}.btn-facebook.focus,.btn-facebook:focus{color:#fff;background-color:#30497c;border-color:#2d4373;box-shadow:0 0 0 .2rem rgba(88,114,167,.5)}.btn-facebook.active,.btn-facebook:active,.show>.btn-facebook.dropdown-toggle{color:#fff;background-color:#2d4373;border-color:#293e6a}.btn-facebook.active:focus,.btn-facebook:active:focus,.show>.btn-facebook.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(88,114,167,.5)}.btn-facebook.disabled,.btn-facebook:disabled{color:#fff;background-color:#3b5998;border-color:#3b5998}.btn-outline-facebook{color:#3b5998;border-color:#3b5998}.btn-outline-facebook:hover{color:#3b5998;background-color:#3b5998;border-color:#3b5998}.btn-outline-facebook.focus,.btn-outline-facebook:focus{box-shadow:0 0 0 .2rem rgba(59,89,152,.5)}.btn-outline-facebook.active,.btn-outline-facebook.dropdown-toggle.show,.btn-outline-facebook:active{color:#fff;background-color:#3b5998;border-color:#3b5998}.btn-outline-facebook.active:focus,.btn-outline-facebook.dropdown-toggle.show:focus,.btn-outline-facebook:active:focus{box-shadow:0 0 0 .2rem rgba(59,89,152,.5)}.btn-outline-facebook.disabled,.btn-outline-facebook:disabled{color:#3b5998;background-color:transparent}.btn-twitter{color:#fff;background-color:#1da1f2;border-color:#1da1f2}.btn-twitter:hover{color:#fff;background-color:#0d8ddc;border-color:#0c85d0}.btn-twitter.focus,.btn-twitter:focus{color:#fff;background-color:#0d8ddc;border-color:#0c85d0;box-shadow:0 0 0 .2rem rgba(63,175,244,.5)}.btn-twitter.active,.btn-twitter:active,.show>.btn-twitter.dropdown-toggle{color:#fff;background-color:#0c85d0;border-color:#0b7ec4}.btn-twitter.active:focus,.btn-twitter:active:focus,.show>.btn-twitter.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(63,175,244,.5)}.btn-twitter.disabled,.btn-twitter:disabled{color:#fff;background-color:#1da1f2;border-color:#1da1f2}.btn-outline-twitter{color:#1da1f2;border-color:#1da1f2}.btn-outline-twitter:hover{color:#1da1f2;background-color:#1da1f2;border-color:#1da1f2}.btn-outline-twitter.focus,.btn-outline-twitter:focus{box-shadow:0 0 0 .2rem rgba(29,161,242,.5)}.btn-outline-twitter.active,.btn-outline-twitter.dropdown-toggle.show,.btn-outline-twitter:active{color:#fff;background-color:#1da1f2;border-color:#1da1f2}.btn-outline-twitter.active:focus,.btn-outline-twitter.dropdown-toggle.show:focus,.btn-outline-twitter:active:focus{box-shadow:0 0 0 .2rem rgba(29,161,242,.5)}.btn-outline-twitter.disabled,.btn-outline-twitter:disabled{color:#1da1f2;background-color:transparent}.btn-google{color:#fff;background-color:#dc4e41;border-color:#dc4e41}.btn-google:hover{color:#fff;background-color:#d03526;border-color:#c63224}.btn-google.focus,.btn-google:focus{color:#fff;background-color:#d03526;border-color:#c63224;box-shadow:0 0 0 .2rem rgba(225,105,94,.5)}.btn-google.active,.btn-google:active,.show>.btn-google.dropdown-toggle{color:#fff;background-color:#c63224;border-color:#bb2f22}.btn-google.active:focus,.btn-google:active:focus,.show>.btn-google.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(225,105,94,.5)}.btn-google.disabled,.btn-google:disabled{color:#fff;background-color:#dc4e41;border-color:#dc4e41}.btn-outline-google{color:#dc4e41;border-color:#dc4e41}.btn-outline-google:hover{color:#dc4e41;background-color:#dc4e41;border-color:#dc4e41}.btn-outline-google.focus,.btn-outline-google:focus{box-shadow:0 0 0 .2rem rgba(220,78,65,.5)}.btn-outline-google.active,.btn-outline-google.dropdown-toggle.show,.btn-outline-google:active{color:#fff;background-color:#dc4e41;border-color:#dc4e41}.btn-outline-google.active:focus,.btn-outline-google.dropdown-toggle.show:focus,.btn-outline-google:active:focus{box-shadow:0 0 0 .2rem rgba(220,78,65,.5)}.btn-outline-google.disabled,.btn-outline-google:disabled{color:#dc4e41;background-color:transparent}.btn-youtube{color:#fff;background-color:red;border-color:red}.btn-youtube:hover{color:#fff;background-color:#d90000;border-color:#c00}.btn-youtube.focus,.btn-youtube:focus{color:#fff;background-color:#d90000;border-color:#c00;box-shadow:0 0 0 .2rem rgba(255,38,38,.5)}.btn-youtube.active,.btn-youtube:active,.show>.btn-youtube.dropdown-toggle{color:#fff;background-color:#c00;border-color:#bf0000}.btn-youtube.active:focus,.btn-youtube:active:focus,.show>.btn-youtube.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(255,38,38,.5)}.btn-youtube.disabled,.btn-youtube:disabled{color:#fff;background-color:red;border-color:red}.btn-outline-youtube{color:red;border-color:red}.btn-outline-youtube:hover{color:red;background-color:red;border-color:red}.btn-outline-youtube.focus,.btn-outline-youtube:focus{box-shadow:0 0 0 .2rem rgba(255,0,0,.5)}.btn-outline-youtube.active,.btn-outline-youtube.dropdown-toggle.show,.btn-outline-youtube:active{color:#fff;background-color:red;border-color:red}.btn-outline-youtube.active:focus,.btn-outline-youtube.dropdown-toggle.show:focus,.btn-outline-youtube:active:focus{box-shadow:0 0 0 .2rem rgba(255,0,0,.5)}.btn-outline-youtube.disabled,.btn-outline-youtube:disabled{color:red;background-color:transparent}.btn-vimeo{color:#fff;background-color:#1ab7ea;border-color:#1ab7ea}.btn-vimeo:hover{color:#fff;background-color:#139ecb;border-color:#1295bf}.btn-vimeo.focus,.btn-vimeo:focus{color:#fff;background-color:#139ecb;border-color:#1295bf;box-shadow:0 0 0 .2rem rgba(60,194,237,.5)}.btn-vimeo.active,.btn-vimeo:active,.show>.btn-vimeo.dropdown-toggle{color:#fff;background-color:#1295bf;border-color:#108cb4}.btn-vimeo.active:focus,.btn-vimeo:active:focus,.show>.btn-vimeo.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(60,194,237,.5)}.btn-vimeo.disabled,.btn-vimeo:disabled{color:#fff;background-color:#1ab7ea;border-color:#1ab7ea}.btn-outline-vimeo{color:#1ab7ea;border-color:#1ab7ea}.btn-outline-vimeo:hover{color:#1ab7ea;background-color:#1ab7ea;border-color:#1ab7ea}.btn-outline-vimeo.focus,.btn-outline-vimeo:focus{box-shadow:0 0 0 .2rem rgba(26,183,234,.5)}.btn-outline-vimeo.active,.btn-outline-vimeo.dropdown-toggle.show,.btn-outline-vimeo:active{color:#fff;background-color:#1ab7ea;border-color:#1ab7ea}.btn-outline-vimeo.active:focus,.btn-outline-vimeo.dropdown-toggle.show:focus,.btn-outline-vimeo:active:focus{box-shadow:0 0 0 .2rem rgba(26,183,234,.5)}.btn-outline-vimeo.disabled,.btn-outline-vimeo:disabled{color:#1ab7ea;background-color:transparent}.btn-dribbble{color:#fff;background-color:#ea4c89;border-color:#ea4c89}.btn-dribbble:hover{color:#fff;background-color:#e62a72;border-color:#e51e6b}.btn-dribbble.focus,.btn-dribbble:focus{color:#fff;background-color:#e62a72;border-color:#e51e6b;box-shadow:0 0 0 .2rem rgba(237,103,155,.5)}.btn-dribbble.active,.btn-dribbble:active,.show>.btn-dribbble.dropdown-toggle{color:#fff;background-color:#e51e6b;border-color:#dc1a65}.btn-dribbble.active:focus,.btn-dribbble:active:focus,.show>.btn-dribbble.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(237,103,155,.5)}.btn-dribbble.disabled,.btn-dribbble:disabled{color:#fff;background-color:#ea4c89;border-color:#ea4c89}.btn-outline-dribbble{color:#ea4c89;border-color:#ea4c89}.btn-outline-dribbble:hover{color:#ea4c89;background-color:#ea4c89;border-color:#ea4c89}.btn-outline-dribbble.focus,.btn-outline-dribbble:focus{box-shadow:0 0 0 .2rem rgba(234,76,137,.5)}.btn-outline-dribbble.active,.btn-outline-dribbble.dropdown-toggle.show,.btn-outline-dribbble:active{color:#fff;background-color:#ea4c89;border-color:#ea4c89}.btn-outline-dribbble.active:focus,.btn-outline-dribbble.dropdown-toggle.show:focus,.btn-outline-dribbble:active:focus{box-shadow:0 0 0 .2rem rgba(234,76,137,.5)}.btn-outline-dribbble.disabled,.btn-outline-dribbble:disabled{color:#ea4c89;background-color:transparent}.btn-github{color:#fff;background-color:#181717;border-color:#181717}.btn-github:hover{color:#fff;background-color:#040404;border-color:#000}.btn-github.focus,.btn-github:focus{color:#fff;background-color:#040404;border-color:#000;box-shadow:0 0 0 .2rem rgba(59,58,58,.5)}.btn-github.active,.btn-github:active,.show>.btn-github.dropdown-toggle{color:#fff;background-color:#000;border-color:#000}.btn-github.active:focus,.btn-github:active:focus,.show>.btn-github.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(59,58,58,.5)}.btn-github.disabled,.btn-github:disabled{color:#fff;background-color:#181717;border-color:#181717}.btn-outline-github{color:#181717;border-color:#181717}.btn-outline-github:hover{color:#181717;background-color:#181717;border-color:#181717}.btn-outline-github.focus,.btn-outline-github:focus{box-shadow:0 0 0 .2rem rgba(24,23,23,.5)}.btn-outline-github.active,.btn-outline-github.dropdown-toggle.show,.btn-outline-github:active{color:#fff;background-color:#181717;border-color:#181717}.btn-outline-github.active:focus,.btn-outline-github.dropdown-toggle.show:focus,.btn-outline-github:active:focus{box-shadow:0 0 0 .2rem rgba(24,23,23,.5)}.btn-outline-github.disabled,.btn-outline-github:disabled{color:#181717;background-color:transparent}.btn-instagram{color:#fff;background-color:#e4405f;border-color:#e4405f}.btn-instagram:hover{color:#fff;background-color:#de1f44;border-color:#d31e40}.btn-instagram.focus,.btn-instagram:focus{color:#fff;background-color:#de1f44;border-color:#d31e40;box-shadow:0 0 0 .2rem rgba(232,93,119,.5)}.btn-instagram.active,.btn-instagram:active,.show>.btn-instagram.dropdown-toggle{color:#fff;background-color:#d31e40;border-color:#c81c3d}.btn-instagram.active:focus,.btn-instagram:active:focus,.show>.btn-instagram.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(232,93,119,.5)}.btn-instagram.disabled,.btn-instagram:disabled{color:#fff;background-color:#e4405f;border-color:#e4405f}.btn-outline-instagram{color:#e4405f;border-color:#e4405f}.btn-outline-instagram:hover{color:#e4405f;background-color:#e4405f;border-color:#e4405f}.btn-outline-instagram.focus,.btn-outline-instagram:focus{box-shadow:0 0 0 .2rem rgba(228,64,95,.5)}.btn-outline-instagram.active,.btn-outline-instagram.dropdown-toggle.show,.btn-outline-instagram:active{color:#fff;background-color:#e4405f;border-color:#e4405f}.btn-outline-instagram.active:focus,.btn-outline-instagram.dropdown-toggle.show:focus,.btn-outline-instagram:active:focus{box-shadow:0 0 0 .2rem rgba(228,64,95,.5)}.btn-outline-instagram.disabled,.btn-outline-instagram:disabled{color:#e4405f;background-color:transparent}.btn-pinterest{color:#fff;background-color:#bd081c;border-color:#bd081c}.btn-pinterest:hover{color:#fff;background-color:#980617;border-color:#8c0615}.btn-pinterest.focus,.btn-pinterest:focus{color:#fff;background-color:#980617;border-color:#8c0615;box-shadow:0 0 0 .2rem rgba(199,45,62,.5)}.btn-pinterest.active,.btn-pinterest:active,.show>.btn-pinterest.dropdown-toggle{color:#fff;background-color:#8c0615;border-color:#800513}.btn-pinterest.active:focus,.btn-pinterest:active:focus,.show>.btn-pinterest.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(199,45,62,.5)}.btn-pinterest.disabled,.btn-pinterest:disabled{color:#fff;background-color:#bd081c;border-color:#bd081c}.btn-outline-pinterest{color:#bd081c;border-color:#bd081c}.btn-outline-pinterest:hover{color:#bd081c;background-color:#bd081c;border-color:#bd081c}.btn-outline-pinterest.focus,.btn-outline-pinterest:focus{box-shadow:0 0 0 .2rem rgba(189,8,28,.5)}.btn-outline-pinterest.active,.btn-outline-pinterest.dropdown-toggle.show,.btn-outline-pinterest:active{color:#fff;background-color:#bd081c;border-color:#bd081c}.btn-outline-pinterest.active:focus,.btn-outline-pinterest.dropdown-toggle.show:focus,.btn-outline-pinterest:active:focus{box-shadow:0 0 0 .2rem rgba(189,8,28,.5)}.btn-outline-pinterest.disabled,.btn-outline-pinterest:disabled{color:#bd081c;background-color:transparent}.btn-vk{color:#fff;background-color:#6383a8;border-color:#6383a8}.btn-vk:hover{color:#fff;background-color:#527093;border-color:#4d6a8b}.btn-vk.focus,.btn-vk:focus{color:#fff;background-color:#527093;border-color:#4d6a8b;box-shadow:0 0 0 .2rem rgba(122,150,181,.5)}.btn-vk.active,.btn-vk:active,.show>.btn-vk.dropdown-toggle{color:#fff;background-color:#4d6a8b;border-color:#496482}.btn-vk.active:focus,.btn-vk:active:focus,.show>.btn-vk.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(122,150,181,.5)}.btn-vk.disabled,.btn-vk:disabled{color:#fff;background-color:#6383a8;border-color:#6383a8}.btn-outline-vk{color:#6383a8;border-color:#6383a8}.btn-outline-vk:hover{color:#6383a8;background-color:#6383a8;border-color:#6383a8}.btn-outline-vk.focus,.btn-outline-vk:focus{box-shadow:0 0 0 .2rem rgba(99,131,168,.5)}.btn-outline-vk.active,.btn-outline-vk.dropdown-toggle.show,.btn-outline-vk:active{color:#fff;background-color:#6383a8;border-color:#6383a8}.btn-outline-vk.active:focus,.btn-outline-vk.dropdown-toggle.show:focus,.btn-outline-vk:active:focus{box-shadow:0 0 0 .2rem rgba(99,131,168,.5)}.btn-outline-vk.disabled,.btn-outline-vk:disabled{color:#6383a8;background-color:transparent}.btn-rss{color:#fff;background-color:orange;border-color:orange}.btn-rss:hover{color:#fff;background-color:#d98c00;border-color:#cc8400}.btn-rss.focus,.btn-rss:focus{color:#fff;background-color:#d98c00;border-color:#cc8400;box-shadow:0 0 0 .2rem rgba(255,179,38,.5)}.btn-rss.active,.btn-rss:active,.show>.btn-rss.dropdown-toggle{color:#fff;background-color:#cc8400;border-color:#bf7c00}.btn-rss.active:focus,.btn-rss:active:focus,.show>.btn-rss.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(255,179,38,.5)}.btn-rss.disabled,.btn-rss:disabled{color:#fff;background-color:orange;border-color:orange}.btn-outline-rss{color:orange;border-color:orange}.btn-outline-rss:hover{color:orange;background-color:orange;border-color:orange}.btn-outline-rss.focus,.btn-outline-rss:focus{box-shadow:0 0 0 .2rem rgba(255,165,0,.5)}.btn-outline-rss.active,.btn-outline-rss.dropdown-toggle.show,.btn-outline-rss:active{color:#fff;background-color:orange;border-color:orange}.btn-outline-rss.active:focus,.btn-outline-rss.dropdown-toggle.show:focus,.btn-outline-rss:active:focus{box-shadow:0 0 0 .2rem rgba(255,165,0,.5)}.btn-outline-rss.disabled,.btn-outline-rss:disabled{color:orange;background-color:transparent}.btn-flickr{color:#fff;background-color:#0063dc;border-color:#0063dc}.btn-flickr:hover{color:#fff;background-color:#0052b6;border-color:#004ca9}.btn-flickr.focus,.btn-flickr:focus{color:#fff;background-color:#0052b6;border-color:#004ca9;box-shadow:0 0 0 .2rem rgba(38,122,225,.5)}.btn-flickr.active,.btn-flickr:active,.show>.btn-flickr.dropdown-toggle{color:#fff;background-color:#004ca9;border-color:#00469c}.btn-flickr.active:focus,.btn-flickr:active:focus,.show>.btn-flickr.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(38,122,225,.5)}.btn-flickr.disabled,.btn-flickr:disabled{color:#fff;background-color:#0063dc;border-color:#0063dc}.btn-outline-flickr{color:#0063dc;border-color:#0063dc}.btn-outline-flickr:hover{color:#0063dc;background-color:#0063dc;border-color:#0063dc}.btn-outline-flickr.focus,.btn-outline-flickr:focus{box-shadow:0 0 0 .2rem rgba(0,99,220,.5)}.btn-outline-flickr.active,.btn-outline-flickr.dropdown-toggle.show,.btn-outline-flickr:active{color:#fff;background-color:#0063dc;border-color:#0063dc}.btn-outline-flickr.active:focus,.btn-outline-flickr.dropdown-toggle.show:focus,.btn-outline-flickr:active:focus{box-shadow:0 0 0 .2rem rgba(0,99,220,.5)}.btn-outline-flickr.disabled,.btn-outline-flickr:disabled{color:#0063dc;background-color:transparent}.btn-bitbucket{color:#fff;background-color:#0052cc;border-color:#0052cc}.btn-bitbucket:hover{color:#fff;background-color:#0043a6;border-color:#003e99}.btn-bitbucket.focus,.btn-bitbucket:focus{color:#fff;background-color:#0043a6;border-color:#003e99;box-shadow:0 0 0 .2rem rgba(38,108,212,.5)}.btn-bitbucket.active,.btn-bitbucket:active,.show>.btn-bitbucket.dropdown-toggle{color:#fff;background-color:#003e99;border-color:#00388c}.btn-bitbucket.active:focus,.btn-bitbucket:active:focus,.show>.btn-bitbucket.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(38,108,212,.5)}.btn-bitbucket.disabled,.btn-bitbucket:disabled{color:#fff;background-color:#0052cc;border-color:#0052cc}.btn-outline-bitbucket{color:#0052cc;border-color:#0052cc}.btn-outline-bitbucket:hover{color:#0052cc;background-color:#0052cc;border-color:#0052cc}.btn-outline-bitbucket.focus,.btn-outline-bitbucket:focus{box-shadow:0 0 0 .2rem rgba(0,82,204,.5)}.btn-outline-bitbucket.active,.btn-outline-bitbucket.dropdown-toggle.show,.btn-outline-bitbucket:active{color:#fff;background-color:#0052cc;border-color:#0052cc}.btn-outline-bitbucket.active:focus,.btn-outline-bitbucket.dropdown-toggle.show:focus,.btn-outline-bitbucket:active:focus{box-shadow:0 0 0 .2rem rgba(0,82,204,.5)}.btn-outline-bitbucket.disabled,.btn-outline-bitbucket:disabled{color:#0052cc;background-color:transparent}.btn-tabler{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-tabler:hover{color:#fff;background-color:#1b59a3;border-color:#195398}.btn-tabler.focus,.btn-tabler:focus{color:#fff;background-color:#1b59a3;border-color:#195398;box-shadow:0 0 0 .2rem rgba(65,129,205,.5)}.btn-tabler.active,.btn-tabler:active,.show>.btn-tabler.dropdown-toggle{color:#fff;background-color:#195398;border-color:#174d8d}.btn-tabler.active:focus,.btn-tabler:active:focus,.show>.btn-tabler.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(65,129,205,.5)}.btn-tabler.disabled,.btn-tabler:disabled{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-outline-tabler{color:#206bc4;border-color:#206bc4}.btn-outline-tabler:hover{color:#206bc4;background-color:#206bc4;border-color:#206bc4}.btn-outline-tabler.focus,.btn-outline-tabler:focus{box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-outline-tabler.active,.btn-outline-tabler.dropdown-toggle.show,.btn-outline-tabler:active{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-outline-tabler.active:focus,.btn-outline-tabler.dropdown-toggle.show:focus,.btn-outline-tabler:active:focus{box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-outline-tabler.disabled,.btn-outline-tabler:disabled{color:#206bc4;background-color:transparent}.btn-blue{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-blue:hover{color:#fff;background-color:#1b59a3;border-color:#195398}.btn-blue.focus,.btn-blue:focus{color:#fff;background-color:#1b59a3;border-color:#195398;box-shadow:0 0 0 .2rem rgba(65,129,205,.5)}.btn-blue.active,.btn-blue:active,.show>.btn-blue.dropdown-toggle{color:#fff;background-color:#195398;border-color:#174d8d}.btn-blue.active:focus,.btn-blue:active:focus,.show>.btn-blue.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(65,129,205,.5)}.btn-blue.disabled,.btn-blue:disabled{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-outline-blue{color:#206bc4;border-color:#206bc4}.btn-outline-blue:hover{color:#206bc4;background-color:#206bc4;border-color:#206bc4}.btn-outline-blue.focus,.btn-outline-blue:focus{box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-outline-blue.active,.btn-outline-blue.dropdown-toggle.show,.btn-outline-blue:active{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-outline-blue.active:focus,.btn-outline-blue.dropdown-toggle.show:focus,.btn-outline-blue:active:focus{box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-outline-blue.disabled,.btn-outline-blue:disabled{color:#206bc4;background-color:transparent}.btn-azure{color:#fff;background-color:#45aaf2;border-color:#45aaf2}.btn-azure:hover{color:#fff;background-color:#219af0;border-color:#1594ef}.btn-azure.focus,.btn-azure:focus{color:#fff;background-color:#219af0;border-color:#1594ef;box-shadow:0 0 0 .2rem rgba(97,183,244,.5)}.btn-azure.active,.btn-azure:active,.show>.btn-azure.dropdown-toggle{color:#fff;background-color:#1594ef;border-color:#108ee7}.btn-azure.active:focus,.btn-azure:active:focus,.show>.btn-azure.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(97,183,244,.5)}.btn-azure.disabled,.btn-azure:disabled{color:#fff;background-color:#45aaf2;border-color:#45aaf2}.btn-outline-azure{color:#45aaf2;border-color:#45aaf2}.btn-outline-azure:hover{color:#45aaf2;background-color:#45aaf2;border-color:#45aaf2}.btn-outline-azure.focus,.btn-outline-azure:focus{box-shadow:0 0 0 .2rem rgba(69,170,242,.5)}.btn-outline-azure.active,.btn-outline-azure.dropdown-toggle.show,.btn-outline-azure:active{color:#fff;background-color:#45aaf2;border-color:#45aaf2}.btn-outline-azure.active:focus,.btn-outline-azure.dropdown-toggle.show:focus,.btn-outline-azure:active:focus{box-shadow:0 0 0 .2rem rgba(69,170,242,.5)}.btn-outline-azure.disabled,.btn-outline-azure:disabled{color:#45aaf2;background-color:transparent}.btn-indigo{color:#fff;background-color:#6574cd;border-color:#6574cd}.btn-indigo:hover{color:#fff;background-color:#485ac4;border-color:#3f51c1}.btn-indigo.focus,.btn-indigo:focus{color:#fff;background-color:#485ac4;border-color:#3f51c1;box-shadow:0 0 0 .2rem rgba(124,137,213,.5)}.btn-indigo.active,.btn-indigo:active,.show>.btn-indigo.dropdown-toggle{color:#fff;background-color:#3f51c1;border-color:#3b4db7}.btn-indigo.active:focus,.btn-indigo:active:focus,.show>.btn-indigo.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(124,137,213,.5)}.btn-indigo.disabled,.btn-indigo:disabled{color:#fff;background-color:#6574cd;border-color:#6574cd}.btn-outline-indigo{color:#6574cd;border-color:#6574cd}.btn-outline-indigo:hover{color:#6574cd;background-color:#6574cd;border-color:#6574cd}.btn-outline-indigo.focus,.btn-outline-indigo:focus{box-shadow:0 0 0 .2rem rgba(101,116,205,.5)}.btn-outline-indigo.active,.btn-outline-indigo.dropdown-toggle.show,.btn-outline-indigo:active{color:#fff;background-color:#6574cd;border-color:#6574cd}.btn-outline-indigo.active:focus,.btn-outline-indigo.dropdown-toggle.show:focus,.btn-outline-indigo:active:focus{box-shadow:0 0 0 .2rem rgba(101,116,205,.5)}.btn-outline-indigo.disabled,.btn-outline-indigo:disabled{color:#6574cd;background-color:transparent}.btn-purple{color:#fff;background-color:#a55eea;border-color:#a55eea}.btn-purple:hover{color:#fff;background-color:#923ce6;border-color:#8c31e4}.btn-purple.focus,.btn-purple:focus{color:#fff;background-color:#923ce6;border-color:#8c31e4;box-shadow:0 0 0 .2rem rgba(179,118,237,.5)}.btn-purple.active,.btn-purple:active,.show>.btn-purple.dropdown-toggle{color:#fff;background-color:#8c31e4;border-color:#8526e3}.btn-purple.active:focus,.btn-purple:active:focus,.show>.btn-purple.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(179,118,237,.5)}.btn-purple.disabled,.btn-purple:disabled{color:#fff;background-color:#a55eea;border-color:#a55eea}.btn-outline-purple{color:#a55eea;border-color:#a55eea}.btn-outline-purple:hover{color:#a55eea;background-color:#a55eea;border-color:#a55eea}.btn-outline-purple.focus,.btn-outline-purple:focus{box-shadow:0 0 0 .2rem rgba(165,94,234,.5)}.btn-outline-purple.active,.btn-outline-purple.dropdown-toggle.show,.btn-outline-purple:active{color:#fff;background-color:#a55eea;border-color:#a55eea}.btn-outline-purple.active:focus,.btn-outline-purple.dropdown-toggle.show:focus,.btn-outline-purple:active:focus{box-shadow:0 0 0 .2rem rgba(165,94,234,.5)}.btn-outline-purple.disabled,.btn-outline-purple:disabled{color:#a55eea;background-color:transparent}.btn-pink{color:#fff;background-color:#f66d9b;border-color:#f66d9b}.btn-pink:hover{color:#fff;background-color:#f44982;border-color:#f33d7a}.btn-pink.focus,.btn-pink:focus{color:#fff;background-color:#f44982;border-color:#f33d7a;box-shadow:0 0 0 .2rem rgba(247,131,170,.5)}.btn-pink.active,.btn-pink:active,.show>.btn-pink.dropdown-toggle{color:#fff;background-color:#f33d7a;border-color:#f23172}.btn-pink.active:focus,.btn-pink:active:focus,.show>.btn-pink.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(247,131,170,.5)}.btn-pink.disabled,.btn-pink:disabled{color:#fff;background-color:#f66d9b;border-color:#f66d9b}.btn-outline-pink{color:#f66d9b;border-color:#f66d9b}.btn-outline-pink:hover{color:#f66d9b;background-color:#f66d9b;border-color:#f66d9b}.btn-outline-pink.focus,.btn-outline-pink:focus{box-shadow:0 0 0 .2rem rgba(246,109,155,.5)}.btn-outline-pink.active,.btn-outline-pink.dropdown-toggle.show,.btn-outline-pink:active{color:#fff;background-color:#f66d9b;border-color:#f66d9b}.btn-outline-pink.active:focus,.btn-outline-pink.dropdown-toggle.show:focus,.btn-outline-pink:active:focus{box-shadow:0 0 0 .2rem rgba(246,109,155,.5)}.btn-outline-pink.disabled,.btn-outline-pink:disabled{color:#f66d9b;background-color:transparent}.btn-red{color:#fff;background-color:#cd201f;border-color:#cd201f}.btn-red:hover{color:#fff;background-color:#ac1b1a;border-color:#a11918}.btn-red.focus,.btn-red:focus{color:#fff;background-color:#ac1b1a;border-color:#a11918;box-shadow:0 0 0 .2rem rgba(213,65,65,.5)}.btn-red.active,.btn-red:active,.show>.btn-red.dropdown-toggle{color:#fff;background-color:#a11918;border-color:#961717}.btn-red.active:focus,.btn-red:active:focus,.show>.btn-red.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(213,65,65,.5)}.btn-red.disabled,.btn-red:disabled{color:#fff;background-color:#cd201f;border-color:#cd201f}.btn-outline-red{color:#cd201f;border-color:#cd201f}.btn-outline-red:hover{color:#cd201f;background-color:#cd201f;border-color:#cd201f}.btn-outline-red.focus,.btn-outline-red:focus{box-shadow:0 0 0 .2rem rgba(205,32,31,.5)}.btn-outline-red.active,.btn-outline-red.dropdown-toggle.show,.btn-outline-red:active{color:#fff;background-color:#cd201f;border-color:#cd201f}.btn-outline-red.active:focus,.btn-outline-red.dropdown-toggle.show:focus,.btn-outline-red:active:focus{box-shadow:0 0 0 .2rem rgba(205,32,31,.5)}.btn-outline-red.disabled,.btn-outline-red:disabled{color:#cd201f;background-color:transparent}.btn-orange{color:#fff;background-color:#ff922b;border-color:#ff922b}.btn-orange:hover{color:#fff;background-color:#ff7e05;border-color:#f77800}.btn-orange.focus,.btn-orange:focus{color:#fff;background-color:#ff7e05;border-color:#f77800;box-shadow:0 0 0 .2rem rgba(255,162,75,.5)}.btn-orange.active,.btn-orange:active,.show>.btn-orange.dropdown-toggle{color:#fff;background-color:#f77800;border-color:#ea7200}.btn-orange.active:focus,.btn-orange:active:focus,.show>.btn-orange.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(255,162,75,.5)}.btn-orange.disabled,.btn-orange:disabled{color:#fff;background-color:#ff922b;border-color:#ff922b}.btn-outline-orange{color:#ff922b;border-color:#ff922b}.btn-outline-orange:hover{color:#ff922b;background-color:#ff922b;border-color:#ff922b}.btn-outline-orange.focus,.btn-outline-orange:focus{box-shadow:0 0 0 .2rem rgba(255,146,43,.5)}.btn-outline-orange.active,.btn-outline-orange.dropdown-toggle.show,.btn-outline-orange:active{color:#fff;background-color:#ff922b;border-color:#ff922b}.btn-outline-orange.active:focus,.btn-outline-orange.dropdown-toggle.show:focus,.btn-outline-orange:active:focus{box-shadow:0 0 0 .2rem rgba(255,146,43,.5)}.btn-outline-orange.disabled,.btn-outline-orange:disabled{color:#ff922b;background-color:transparent}.btn-yellow{color:#fff;background-color:#fab005;border-color:#fab005}.btn-yellow:hover{color:#fff;background-color:#d59604;border-color:#c88d04}.btn-yellow.focus,.btn-yellow:focus{color:#fff;background-color:#d59604;border-color:#c88d04;box-shadow:0 0 0 .2rem rgba(251,188,43,.5)}.btn-yellow.active,.btn-yellow:active,.show>.btn-yellow.dropdown-toggle{color:#fff;background-color:#c88d04;border-color:#bc8404}.btn-yellow.active:focus,.btn-yellow:active:focus,.show>.btn-yellow.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(251,188,43,.5)}.btn-yellow.disabled,.btn-yellow:disabled{color:#fff;background-color:#fab005;border-color:#fab005}.btn-outline-yellow{color:#fab005;border-color:#fab005}.btn-outline-yellow:hover{color:#fab005;background-color:#fab005;border-color:#fab005}.btn-outline-yellow.focus,.btn-outline-yellow:focus{box-shadow:0 0 0 .2rem rgba(250,176,5,.5)}.btn-outline-yellow.active,.btn-outline-yellow.dropdown-toggle.show,.btn-outline-yellow:active{color:#fff;background-color:#fab005;border-color:#fab005}.btn-outline-yellow.active:focus,.btn-outline-yellow.dropdown-toggle.show:focus,.btn-outline-yellow:active:focus{box-shadow:0 0 0 .2rem rgba(250,176,5,.5)}.btn-outline-yellow.disabled,.btn-outline-yellow:disabled{color:#fab005;background-color:transparent}.btn-lime{color:#fff;background-color:#94d82d;border-color:#94d82d}.btn-lime:hover{color:#fff;background-color:#7fbc23;border-color:#78b121}.btn-lime.focus,.btn-lime:focus{color:#fff;background-color:#7fbc23;border-color:#78b121;box-shadow:0 0 0 .2rem rgba(164,222,77,.5)}.btn-lime.active,.btn-lime:active,.show>.btn-lime.dropdown-toggle{color:#fff;background-color:#78b121;border-color:#70a61f}.btn-lime.active:focus,.btn-lime:active:focus,.show>.btn-lime.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(164,222,77,.5)}.btn-lime.disabled,.btn-lime:disabled{color:#fff;background-color:#94d82d;border-color:#94d82d}.btn-outline-lime{color:#94d82d;border-color:#94d82d}.btn-outline-lime:hover{color:#94d82d;background-color:#94d82d;border-color:#94d82d}.btn-outline-lime.focus,.btn-outline-lime:focus{box-shadow:0 0 0 .2rem rgba(148,216,45,.5)}.btn-outline-lime.active,.btn-outline-lime.dropdown-toggle.show,.btn-outline-lime:active{color:#fff;background-color:#94d82d;border-color:#94d82d}.btn-outline-lime.active:focus,.btn-outline-lime.dropdown-toggle.show:focus,.btn-outline-lime:active:focus{box-shadow:0 0 0 .2rem rgba(148,216,45,.5)}.btn-outline-lime.disabled,.btn-outline-lime:disabled{color:#94d82d;background-color:transparent}.btn-green{color:#fff;background-color:#5eba00;border-color:#5eba00}.btn-green:hover{color:#fff;background-color:#4b9400;border-color:#448700}.btn-green.focus,.btn-green:focus{color:#fff;background-color:#4b9400;border-color:#448700;box-shadow:0 0 0 .2rem rgba(118,196,38,.5)}.btn-green.active,.btn-green:active,.show>.btn-green.dropdown-toggle{color:#fff;background-color:#448700;border-color:#3e7a00}.btn-green.active:focus,.btn-green:active:focus,.show>.btn-green.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(118,196,38,.5)}.btn-green.disabled,.btn-green:disabled{color:#fff;background-color:#5eba00;border-color:#5eba00}.btn-outline-green{color:#5eba00;border-color:#5eba00}.btn-outline-green:hover{color:#5eba00;background-color:#5eba00;border-color:#5eba00}.btn-outline-green.focus,.btn-outline-green:focus{box-shadow:0 0 0 .2rem rgba(94,186,0,.5)}.btn-outline-green.active,.btn-outline-green.dropdown-toggle.show,.btn-outline-green:active{color:#fff;background-color:#5eba00;border-color:#5eba00}.btn-outline-green.active:focus,.btn-outline-green.dropdown-toggle.show:focus,.btn-outline-green:active:focus{box-shadow:0 0 0 .2rem rgba(94,186,0,.5)}.btn-outline-green.disabled,.btn-outline-green:disabled{color:#5eba00;background-color:transparent}.btn-teal{color:#fff;background-color:#2bcbba;border-color:#2bcbba}.btn-teal:hover{color:#fff;background-color:#24ab9d;border-color:#22a193}.btn-teal.focus,.btn-teal:focus{color:#fff;background-color:#24ab9d;border-color:#22a193;box-shadow:0 0 0 .2rem rgba(75,211,196,.5)}.btn-teal.active,.btn-teal:active,.show>.btn-teal.dropdown-toggle{color:#fff;background-color:#22a193;border-color:#20968a}.btn-teal.active:focus,.btn-teal:active:focus,.show>.btn-teal.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(75,211,196,.5)}.btn-teal.disabled,.btn-teal:disabled{color:#fff;background-color:#2bcbba;border-color:#2bcbba}.btn-outline-teal{color:#2bcbba;border-color:#2bcbba}.btn-outline-teal:hover{color:#2bcbba;background-color:#2bcbba;border-color:#2bcbba}.btn-outline-teal.focus,.btn-outline-teal:focus{box-shadow:0 0 0 .2rem rgba(43,203,186,.5)}.btn-outline-teal.active,.btn-outline-teal.dropdown-toggle.show,.btn-outline-teal:active{color:#fff;background-color:#2bcbba;border-color:#2bcbba}.btn-outline-teal.active:focus,.btn-outline-teal.dropdown-toggle.show:focus,.btn-outline-teal:active:focus{box-shadow:0 0 0 .2rem rgba(43,203,186,.5)}.btn-outline-teal.disabled,.btn-outline-teal:disabled{color:#2bcbba;background-color:transparent}.btn-cyan{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-cyan:hover{color:#fff;background-color:#138496;border-color:#117a8b}.btn-cyan.focus,.btn-cyan:focus{color:#fff;background-color:#138496;border-color:#117a8b;box-shadow:0 0 0 .2rem rgba(58,176,195,.5)}.btn-cyan.active,.btn-cyan:active,.show>.btn-cyan.dropdown-toggle{color:#fff;background-color:#117a8b;border-color:#10707f}.btn-cyan.active:focus,.btn-cyan:active:focus,.show>.btn-cyan.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(58,176,195,.5)}.btn-cyan.disabled,.btn-cyan:disabled{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-cyan{color:#17a2b8;border-color:#17a2b8}.btn-outline-cyan:hover{color:#17a2b8;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-cyan.focus,.btn-outline-cyan:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-outline-cyan.active,.btn-outline-cyan.dropdown-toggle.show,.btn-outline-cyan:active{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-cyan.active:focus,.btn-outline-cyan.dropdown-toggle.show:focus,.btn-outline-cyan:active:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-outline-cyan.disabled,.btn-outline-cyan:disabled{color:#17a2b8;background-color:transparent}.btn-white{color:#354052;background-color:#fff;border-color:#fff}.btn-white:hover{color:#354052;background-color:#ececec;border-color:#e6e6e6}.btn-white.focus,.btn-white:focus{color:#354052;background-color:#ececec;border-color:#e6e6e6;box-shadow:0 0 0 .2rem rgba(225,226,229,.5)}.btn-white.active,.btn-white:active,.show>.btn-white.dropdown-toggle{color:#354052;background-color:#e6e6e6;border-color:#dfdfdf}.btn-white.active:focus,.btn-white:active:focus,.show>.btn-white.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(225,226,229,.5)}.btn-white.disabled,.btn-white:disabled{color:#354052;background-color:#fff;border-color:#fff}.btn-outline-white{color:#fff;border-color:#fff}.btn-outline-white:hover{color:#fff;background-color:#fff;border-color:#fff}.btn-outline-white.focus,.btn-outline-white:focus{box-shadow:0 0 0 .2rem rgba(255,255,255,.5)}.btn-outline-white.active,.btn-outline-white.dropdown-toggle.show,.btn-outline-white:active{color:#354052;background-color:#fff;border-color:#fff}.btn-outline-white.active:focus,.btn-outline-white.dropdown-toggle.show:focus,.btn-outline-white:active:focus{box-shadow:0 0 0 .2rem rgba(255,255,255,.5)}.btn-outline-white.disabled,.btn-outline-white:disabled{color:#fff;background-color:transparent}.btn-gray{color:#fff;background-color:#a8aeb7;border-color:#a8aeb7}.btn-gray:hover{color:#fff;background-color:#939ba6;border-color:#8c94a0}.btn-gray.focus,.btn-gray:focus{color:#fff;background-color:#939ba6;border-color:#8c94a0;box-shadow:0 0 0 .2rem rgba(181,186,194,.5)}.btn-gray.active,.btn-gray:active,.show>.btn-gray.dropdown-toggle{color:#fff;background-color:#8c94a0;border-color:#858e9a}.btn-gray.active:focus,.btn-gray:active:focus,.show>.btn-gray.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(181,186,194,.5)}.btn-gray.disabled,.btn-gray:disabled{color:#fff;background-color:#a8aeb7;border-color:#a8aeb7}.btn-outline-gray{color:#a8aeb7;border-color:#a8aeb7}.btn-outline-gray:hover{color:#a8aeb7;background-color:#a8aeb7;border-color:#a8aeb7}.btn-outline-gray.focus,.btn-outline-gray:focus{box-shadow:0 0 0 .2rem rgba(168,174,183,.5)}.btn-outline-gray.active,.btn-outline-gray.dropdown-toggle.show,.btn-outline-gray:active{color:#fff;background-color:#a8aeb7;border-color:#a8aeb7}.btn-outline-gray.active:focus,.btn-outline-gray.dropdown-toggle.show:focus,.btn-outline-gray:active:focus{box-shadow:0 0 0 .2rem rgba(168,174,183,.5)}.btn-outline-gray.disabled,.btn-outline-gray:disabled{color:#a8aeb7;background-color:transparent}.btn-gray-dark{color:#fff;background-color:#545d6d;border-color:#545d6d}.btn-gray-dark:hover{color:#fff;background-color:#434b57;border-color:#3e4450}.btn-gray-dark.focus,.btn-gray-dark:focus{color:#fff;background-color:#434b57;border-color:#3e4450;box-shadow:0 0 0 .2rem rgba(110,117,131,.5)}.btn-gray-dark.active,.btn-gray-dark:active,.show>.btn-gray-dark.dropdown-toggle{color:#fff;background-color:#3e4450;border-color:#383e49}.btn-gray-dark.active:focus,.btn-gray-dark:active:focus,.show>.btn-gray-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(110,117,131,.5)}.btn-gray-dark.disabled,.btn-gray-dark:disabled{color:#fff;background-color:#545d6d;border-color:#545d6d}.btn-outline-gray-dark{color:#545d6d;border-color:#545d6d}.btn-outline-gray-dark:hover{color:#545d6d;background-color:#545d6d;border-color:#545d6d}.btn-outline-gray-dark.focus,.btn-outline-gray-dark:focus{box-shadow:0 0 0 .2rem rgba(84,93,109,.5)}.btn-outline-gray-dark.active,.btn-outline-gray-dark.dropdown-toggle.show,.btn-outline-gray-dark:active{color:#fff;background-color:#545d6d;border-color:#545d6d}.btn-outline-gray-dark.active:focus,.btn-outline-gray-dark.dropdown-toggle.show:focus,.btn-outline-gray-dark:active:focus{box-shadow:0 0 0 .2rem rgba(84,93,109,.5)}.btn-outline-gray-dark.disabled,.btn-outline-gray-dark:disabled{color:#545d6d;background-color:transparent}.btn-dark{color:#fff;background-color:#354052;border-color:#354052}.btn-dark:hover{color:#fff;background-color:#262e3b;border-color:#212833}.btn-dark.focus,.btn-dark:focus{color:#fff;background-color:#262e3b;border-color:#212833;box-shadow:0 0 0 .2rem rgba(83,93,108,.5)}.btn-dark.active,.btn-dark:active,.show>.btn-dark.dropdown-toggle{color:#fff;background-color:#212833;border-color:#1c222b}.btn-dark.active:focus,.btn-dark:active:focus,.show>.btn-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(83,93,108,.5)}.btn-dark.disabled,.btn-dark:disabled{color:#fff;background-color:#354052;border-color:#354052}.btn-outline-dark{color:#354052;border-color:#354052}.btn-outline-dark:hover{color:#354052;background-color:#354052;border-color:#354052}.btn-outline-dark.focus,.btn-outline-dark:focus{box-shadow:0 0 0 .2rem rgba(53,64,82,.5)}.btn-outline-dark.active,.btn-outline-dark.dropdown-toggle.show,.btn-outline-dark:active{color:#fff;background-color:#354052;border-color:#354052}.btn-outline-dark.active:focus,.btn-outline-dark.dropdown-toggle.show:focus,.btn-outline-dark:active:focus{box-shadow:0 0 0 .2rem rgba(53,64,82,.5)}.btn-outline-dark.disabled,.btn-outline-dark:disabled{color:#354052;background-color:transparent}
 /*# sourceMappingURL=tabler-buttons.min.css.map */
\ No newline at end of file
diff --git a/demo/dist/css/tabler-buttons.min.css.map b/demo/dist/css/tabler-buttons.min.css.map
index d3e9217cf..7bda26f4a 100644
Binary files a/demo/dist/css/tabler-buttons.min.css.map and b/demo/dist/css/tabler-buttons.min.css.map differ
diff --git a/demo/dist/css/tabler-flags.css b/demo/dist/css/tabler-flags.css
index 33653aec6..ceebd352d 100644
--- a/demo/dist/css/tabler-flags.css
+++ b/demo/dist/css/tabler-flags.css
@@ -1,5 +1,5 @@
 /*!
- * Tabler (v1.0.0-alpha.4)
+ * Tabler (v1.0.0-alpha.5)
  * Copyright 2018-2020 The Tabler Authors
  * Copyright 2018-2020 codecalm
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
@@ -16,7 +16,7 @@ Dark mode
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 3px; }
 
 .flag-country-ad {
diff --git a/demo/dist/css/tabler-flags.css.map b/demo/dist/css/tabler-flags.css.map
index 2f9c4f242..de438f2aa 100644
Binary files a/demo/dist/css/tabler-flags.css.map and b/demo/dist/css/tabler-flags.css.map differ
diff --git a/demo/dist/css/tabler-flags.min.css b/demo/dist/css/tabler-flags.min.css
index 78dc6141a..309f9f1cf 100644
--- a/demo/dist/css/tabler-flags.min.css
+++ b/demo/dist/css/tabler-flags.min.css
@@ -1,7 +1,7 @@
 /*!
- * Tabler (v1.0.0-alpha.4)
+ * Tabler (v1.0.0-alpha.5)
  * Copyright 2018-2020 The Tabler Authors
  * Copyright 2018-2020 codecalm
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */.flag{position:relative;display:inline-block;width:1.33333em;height:1em;vertical-align:-3px;background-repeat:no-repeat;background-position:center;background-size:cover;border:1px solid rgba(134,140,151,.24);border-radius:3px}.flag-country-ad{background-image:url(../img/flags/ad.svg)}.flag-country-ae{background-image:url(../img/flags/ae.svg)}.flag-country-af{background-image:url(../img/flags/af.svg)}.flag-country-ag{background-image:url(../img/flags/ag.svg)}.flag-country-ai{background-image:url(../img/flags/ai.svg)}.flag-country-al{background-image:url(../img/flags/al.svg)}.flag-country-am{background-image:url(../img/flags/am.svg)}.flag-country-ao{background-image:url(../img/flags/ao.svg)}.flag-country-aq{background-image:url(../img/flags/aq.svg)}.flag-country-ar{background-image:url(../img/flags/ar.svg)}.flag-country-as{background-image:url(../img/flags/as.svg)}.flag-country-at{background-image:url(../img/flags/at.svg)}.flag-country-au{background-image:url(../img/flags/au.svg)}.flag-country-aw{background-image:url(../img/flags/aw.svg)}.flag-country-ax{background-image:url(../img/flags/ax.svg)}.flag-country-az{background-image:url(../img/flags/az.svg)}.flag-country-ba{background-image:url(../img/flags/ba.svg)}.flag-country-bb{background-image:url(../img/flags/bb.svg)}.flag-country-bd{background-image:url(../img/flags/bd.svg)}.flag-country-be{background-image:url(../img/flags/be.svg)}.flag-country-bf{background-image:url(../img/flags/bf.svg)}.flag-country-bg{background-image:url(../img/flags/bg.svg)}.flag-country-bh{background-image:url(../img/flags/bh.svg)}.flag-country-bi{background-image:url(../img/flags/bi.svg)}.flag-country-bj{background-image:url(../img/flags/bj.svg)}.flag-country-bl{background-image:url(../img/flags/bl.svg)}.flag-country-bm{background-image:url(../img/flags/bm.svg)}.flag-country-bn{background-image:url(../img/flags/bn.svg)}.flag-country-bo{background-image:url(../img/flags/bo.svg)}.flag-country-bq{background-image:url(../img/flags/bq.svg)}.flag-country-br{background-image:url(../img/flags/br.svg)}.flag-country-bs{background-image:url(../img/flags/bs.svg)}.flag-country-bt{background-image:url(../img/flags/bt.svg)}.flag-country-bv{background-image:url(../img/flags/bv.svg)}.flag-country-bw{background-image:url(../img/flags/bw.svg)}.flag-country-by{background-image:url(../img/flags/by.svg)}.flag-country-bz{background-image:url(../img/flags/bz.svg)}.flag-country-ca{background-image:url(../img/flags/ca.svg)}.flag-country-cc{background-image:url(../img/flags/cc.svg)}.flag-country-cd{background-image:url(../img/flags/cd.svg)}.flag-country-cf{background-image:url(../img/flags/cf.svg)}.flag-country-cg{background-image:url(../img/flags/cg.svg)}.flag-country-ch{background-image:url(../img/flags/ch.svg)}.flag-country-ci{background-image:url(../img/flags/ci.svg)}.flag-country-ck{background-image:url(../img/flags/ck.svg)}.flag-country-cl{background-image:url(../img/flags/cl.svg)}.flag-country-cm{background-image:url(../img/flags/cm.svg)}.flag-country-cn{background-image:url(../img/flags/cn.svg)}.flag-country-co{background-image:url(../img/flags/co.svg)}.flag-country-cr{background-image:url(../img/flags/cr.svg)}.flag-country-cu{background-image:url(../img/flags/cu.svg)}.flag-country-cv{background-image:url(../img/flags/cv.svg)}.flag-country-cw{background-image:url(../img/flags/cw.svg)}.flag-country-cx{background-image:url(../img/flags/cx.svg)}.flag-country-cy{background-image:url(../img/flags/cy.svg)}.flag-country-cz{background-image:url(../img/flags/cz.svg)}.flag-country-de{background-image:url(../img/flags/de.svg)}.flag-country-dj{background-image:url(../img/flags/dj.svg)}.flag-country-dk{background-image:url(../img/flags/dk.svg)}.flag-country-dm{background-image:url(../img/flags/dm.svg)}.flag-country-do{background-image:url(../img/flags/do.svg)}.flag-country-dz{background-image:url(../img/flags/dz.svg)}.flag-country-ec{background-image:url(../img/flags/ec.svg)}.flag-country-ee{background-image:url(../img/flags/ee.svg)}.flag-country-eg{background-image:url(../img/flags/eg.svg)}.flag-country-eh{background-image:url(../img/flags/eh.svg)}.flag-country-er{background-image:url(../img/flags/er.svg)}.flag-country-es{background-image:url(../img/flags/es.svg)}.flag-country-et{background-image:url(../img/flags/et.svg)}.flag-country-fi{background-image:url(../img/flags/fi.svg)}.flag-country-fj{background-image:url(../img/flags/fj.svg)}.flag-country-fk{background-image:url(../img/flags/fk.svg)}.flag-country-fm{background-image:url(../img/flags/fm.svg)}.flag-country-fo{background-image:url(../img/flags/fo.svg)}.flag-country-fr{background-image:url(../img/flags/fr.svg)}.flag-country-ga{background-image:url(../img/flags/ga.svg)}.flag-country-gb{background-image:url(../img/flags/gb.svg)}.flag-country-gd{background-image:url(../img/flags/gd.svg)}.flag-country-ge{background-image:url(../img/flags/ge.svg)}.flag-country-gf{background-image:url(../img/flags/gf.svg)}.flag-country-gg{background-image:url(../img/flags/gg.svg)}.flag-country-gh{background-image:url(../img/flags/gh.svg)}.flag-country-gi{background-image:url(../img/flags/gi.svg)}.flag-country-gl{background-image:url(../img/flags/gl.svg)}.flag-country-gm{background-image:url(../img/flags/gm.svg)}.flag-country-gn{background-image:url(../img/flags/gn.svg)}.flag-country-gp{background-image:url(../img/flags/gp.svg)}.flag-country-gq{background-image:url(../img/flags/gq.svg)}.flag-country-gr{background-image:url(../img/flags/gr.svg)}.flag-country-gs{background-image:url(../img/flags/gs.svg)}.flag-country-gt{background-image:url(../img/flags/gt.svg)}.flag-country-gu{background-image:url(../img/flags/gu.svg)}.flag-country-gw{background-image:url(../img/flags/gw.svg)}.flag-country-gy{background-image:url(../img/flags/gy.svg)}.flag-country-hk{background-image:url(../img/flags/hk.svg)}.flag-country-hm{background-image:url(../img/flags/hm.svg)}.flag-country-hn{background-image:url(../img/flags/hn.svg)}.flag-country-hr{background-image:url(../img/flags/hr.svg)}.flag-country-ht{background-image:url(../img/flags/ht.svg)}.flag-country-hu{background-image:url(../img/flags/hu.svg)}.flag-country-id{background-image:url(../img/flags/id.svg)}.flag-country-ie{background-image:url(../img/flags/ie.svg)}.flag-country-il{background-image:url(../img/flags/il.svg)}.flag-country-im{background-image:url(../img/flags/im.svg)}.flag-country-in{background-image:url(../img/flags/in.svg)}.flag-country-io{background-image:url(../img/flags/io.svg)}.flag-country-iq{background-image:url(../img/flags/iq.svg)}.flag-country-ir{background-image:url(../img/flags/ir.svg)}.flag-country-is{background-image:url(../img/flags/is.svg)}.flag-country-it{background-image:url(../img/flags/it.svg)}.flag-country-je{background-image:url(../img/flags/je.svg)}.flag-country-jm{background-image:url(../img/flags/jm.svg)}.flag-country-jo{background-image:url(../img/flags/jo.svg)}.flag-country-jp{background-image:url(../img/flags/jp.svg)}.flag-country-ke{background-image:url(../img/flags/ke.svg)}.flag-country-kg{background-image:url(../img/flags/kg.svg)}.flag-country-kh{background-image:url(../img/flags/kh.svg)}.flag-country-ki{background-image:url(../img/flags/ki.svg)}.flag-country-km{background-image:url(../img/flags/km.svg)}.flag-country-kn{background-image:url(../img/flags/kn.svg)}.flag-country-kp{background-image:url(../img/flags/kp.svg)}.flag-country-kr{background-image:url(../img/flags/kr.svg)}.flag-country-kw{background-image:url(../img/flags/kw.svg)}.flag-country-ky{background-image:url(../img/flags/ky.svg)}.flag-country-kz{background-image:url(../img/flags/kz.svg)}.flag-country-la{background-image:url(../img/flags/la.svg)}.flag-country-lb{background-image:url(../img/flags/lb.svg)}.flag-country-lc{background-image:url(../img/flags/lc.svg)}.flag-country-li{background-image:url(../img/flags/li.svg)}.flag-country-lk{background-image:url(../img/flags/lk.svg)}.flag-country-lr{background-image:url(../img/flags/lr.svg)}.flag-country-ls{background-image:url(../img/flags/ls.svg)}.flag-country-lt{background-image:url(../img/flags/lt.svg)}.flag-country-lu{background-image:url(../img/flags/lu.svg)}.flag-country-lv{background-image:url(../img/flags/lv.svg)}.flag-country-ly{background-image:url(../img/flags/ly.svg)}.flag-country-ma{background-image:url(../img/flags/ma.svg)}.flag-country-mc{background-image:url(../img/flags/mc.svg)}.flag-country-md{background-image:url(../img/flags/md.svg)}.flag-country-me{background-image:url(../img/flags/me.svg)}.flag-country-mf{background-image:url(../img/flags/mf.svg)}.flag-country-mg{background-image:url(../img/flags/mg.svg)}.flag-country-mh{background-image:url(../img/flags/mh.svg)}.flag-country-mk{background-image:url(../img/flags/mk.svg)}.flag-country-ml{background-image:url(../img/flags/ml.svg)}.flag-country-mm{background-image:url(../img/flags/mm.svg)}.flag-country-mn{background-image:url(../img/flags/mn.svg)}.flag-country-mo{background-image:url(../img/flags/mo.svg)}.flag-country-mp{background-image:url(../img/flags/mp.svg)}.flag-country-mq{background-image:url(../img/flags/mq.svg)}.flag-country-mr{background-image:url(../img/flags/mr.svg)}.flag-country-ms{background-image:url(../img/flags/ms.svg)}.flag-country-mt{background-image:url(../img/flags/mt.svg)}.flag-country-mu{background-image:url(../img/flags/mu.svg)}.flag-country-mv{background-image:url(../img/flags/mv.svg)}.flag-country-mw{background-image:url(../img/flags/mw.svg)}.flag-country-mx{background-image:url(../img/flags/mx.svg)}.flag-country-my{background-image:url(../img/flags/my.svg)}.flag-country-mz{background-image:url(../img/flags/mz.svg)}.flag-country-na{background-image:url(../img/flags/na.svg)}.flag-country-nc{background-image:url(../img/flags/nc.svg)}.flag-country-ne{background-image:url(../img/flags/ne.svg)}.flag-country-nf{background-image:url(../img/flags/nf.svg)}.flag-country-ng{background-image:url(../img/flags/ng.svg)}.flag-country-ni{background-image:url(../img/flags/ni.svg)}.flag-country-nl{background-image:url(../img/flags/nl.svg)}.flag-country-no{background-image:url(../img/flags/no.svg)}.flag-country-np{background-image:url(../img/flags/np.svg)}.flag-country-nr{background-image:url(../img/flags/nr.svg)}.flag-country-nu{background-image:url(../img/flags/nu.svg)}.flag-country-nz{background-image:url(../img/flags/nz.svg)}.flag-country-om{background-image:url(../img/flags/om.svg)}.flag-country-pa{background-image:url(../img/flags/pa.svg)}.flag-country-pe{background-image:url(../img/flags/pe.svg)}.flag-country-pf{background-image:url(../img/flags/pf.svg)}.flag-country-pg{background-image:url(../img/flags/pg.svg)}.flag-country-ph{background-image:url(../img/flags/ph.svg)}.flag-country-pk{background-image:url(../img/flags/pk.svg)}.flag-country-pl{background-image:url(../img/flags/pl.svg)}.flag-country-pm{background-image:url(../img/flags/pm.svg)}.flag-country-pn{background-image:url(../img/flags/pn.svg)}.flag-country-pr{background-image:url(../img/flags/pr.svg)}.flag-country-ps{background-image:url(../img/flags/ps.svg)}.flag-country-pt{background-image:url(../img/flags/pt.svg)}.flag-country-pw{background-image:url(../img/flags/pw.svg)}.flag-country-py{background-image:url(../img/flags/py.svg)}.flag-country-qa{background-image:url(../img/flags/qa.svg)}.flag-country-re{background-image:url(../img/flags/re.svg)}.flag-country-ro{background-image:url(../img/flags/ro.svg)}.flag-country-rs{background-image:url(../img/flags/rs.svg)}.flag-country-ru{background-image:url(../img/flags/ru.svg)}.flag-country-rw{background-image:url(../img/flags/rw.svg)}.flag-country-sa{background-image:url(../img/flags/sa.svg)}.flag-country-sb{background-image:url(../img/flags/sb.svg)}.flag-country-sc{background-image:url(../img/flags/sc.svg)}.flag-country-sd{background-image:url(../img/flags/sd.svg)}.flag-country-se{background-image:url(../img/flags/se.svg)}.flag-country-sg{background-image:url(../img/flags/sg.svg)}.flag-country-sh{background-image:url(../img/flags/sh.svg)}.flag-country-si{background-image:url(../img/flags/si.svg)}.flag-country-sj{background-image:url(../img/flags/sj.svg)}.flag-country-sk{background-image:url(../img/flags/sk.svg)}.flag-country-sl{background-image:url(../img/flags/sl.svg)}.flag-country-sm{background-image:url(../img/flags/sm.svg)}.flag-country-sn{background-image:url(../img/flags/sn.svg)}.flag-country-so{background-image:url(../img/flags/so.svg)}.flag-country-sr{background-image:url(../img/flags/sr.svg)}.flag-country-ss{background-image:url(../img/flags/ss.svg)}.flag-country-st{background-image:url(../img/flags/st.svg)}.flag-country-sv{background-image:url(../img/flags/sv.svg)}.flag-country-sx{background-image:url(../img/flags/sx.svg)}.flag-country-sy{background-image:url(../img/flags/sy.svg)}.flag-country-sz{background-image:url(../img/flags/sz.svg)}.flag-country-tc{background-image:url(../img/flags/tc.svg)}.flag-country-td{background-image:url(../img/flags/td.svg)}.flag-country-tf{background-image:url(../img/flags/tf.svg)}.flag-country-tg{background-image:url(../img/flags/tg.svg)}.flag-country-th{background-image:url(../img/flags/th.svg)}.flag-country-tj{background-image:url(../img/flags/tj.svg)}.flag-country-tk{background-image:url(../img/flags/tk.svg)}.flag-country-tl{background-image:url(../img/flags/tl.svg)}.flag-country-tm{background-image:url(../img/flags/tm.svg)}.flag-country-tn{background-image:url(../img/flags/tn.svg)}.flag-country-to{background-image:url(../img/flags/to.svg)}.flag-country-tr{background-image:url(../img/flags/tr.svg)}.flag-country-tt{background-image:url(../img/flags/tt.svg)}.flag-country-tv{background-image:url(../img/flags/tv.svg)}.flag-country-tw{background-image:url(../img/flags/tw.svg)}.flag-country-tz{background-image:url(../img/flags/tz.svg)}.flag-country-ua{background-image:url(../img/flags/ua.svg)}.flag-country-ug{background-image:url(../img/flags/ug.svg)}.flag-country-um{background-image:url(../img/flags/um.svg)}.flag-country-us{background-image:url(../img/flags/us.svg)}.flag-country-uy{background-image:url(../img/flags/uy.svg)}.flag-country-uz{background-image:url(../img/flags/uz.svg)}.flag-country-va{background-image:url(../img/flags/va.svg)}.flag-country-vc{background-image:url(../img/flags/vc.svg)}.flag-country-ve{background-image:url(../img/flags/ve.svg)}.flag-country-vg{background-image:url(../img/flags/vg.svg)}.flag-country-vi{background-image:url(../img/flags/vi.svg)}.flag-country-vn{background-image:url(../img/flags/vn.svg)}.flag-country-vu{background-image:url(../img/flags/vu.svg)}.flag-country-wf{background-image:url(../img/flags/wf.svg)}.flag-country-ws{background-image:url(../img/flags/ws.svg)}.flag-country-ye{background-image:url(../img/flags/ye.svg)}.flag-country-yt{background-image:url(../img/flags/yt.svg)}.flag-country-za{background-image:url(../img/flags/za.svg)}.flag-country-zm{background-image:url(../img/flags/zm.svg)}.flag-country-zw{background-image:url(../img/flags/zw.svg)}.flag-country-es-ct{background-image:url(../img/flags/es-ct.svg)}.flag-country-eu{background-image:url(../img/flags/eu.svg)}.flag-country-gb-eng{background-image:url(../img/flags/gb-eng.svg)}.flag-country-gb-nir{background-image:url(../img/flags/gb-nir.svg)}.flag-country-gb-sct{background-image:url(../img/flags/gb-sct.svg)}.flag-country-gb-wls{background-image:url(../img/flags/gb-wls.svg)}.flag-country-un{background-image:url(../img/flags/un.svg)}.flag-md{width:2.66666rem;height:2rem}.flag-lg{width:3.99999rem;height:3rem}.flag-xl{width:5.33332rem;height:4rem}
+ */.flag{position:relative;display:inline-block;width:1.33333em;height:1em;vertical-align:-3px;background-repeat:no-repeat;background-position:center;background-size:cover;border:1px solid rgba(110,117,130,.2);border-radius:3px}.flag-country-ad{background-image:url(../img/flags/ad.svg)}.flag-country-ae{background-image:url(../img/flags/ae.svg)}.flag-country-af{background-image:url(../img/flags/af.svg)}.flag-country-ag{background-image:url(../img/flags/ag.svg)}.flag-country-ai{background-image:url(../img/flags/ai.svg)}.flag-country-al{background-image:url(../img/flags/al.svg)}.flag-country-am{background-image:url(../img/flags/am.svg)}.flag-country-ao{background-image:url(../img/flags/ao.svg)}.flag-country-aq{background-image:url(../img/flags/aq.svg)}.flag-country-ar{background-image:url(../img/flags/ar.svg)}.flag-country-as{background-image:url(../img/flags/as.svg)}.flag-country-at{background-image:url(../img/flags/at.svg)}.flag-country-au{background-image:url(../img/flags/au.svg)}.flag-country-aw{background-image:url(../img/flags/aw.svg)}.flag-country-ax{background-image:url(../img/flags/ax.svg)}.flag-country-az{background-image:url(../img/flags/az.svg)}.flag-country-ba{background-image:url(../img/flags/ba.svg)}.flag-country-bb{background-image:url(../img/flags/bb.svg)}.flag-country-bd{background-image:url(../img/flags/bd.svg)}.flag-country-be{background-image:url(../img/flags/be.svg)}.flag-country-bf{background-image:url(../img/flags/bf.svg)}.flag-country-bg{background-image:url(../img/flags/bg.svg)}.flag-country-bh{background-image:url(../img/flags/bh.svg)}.flag-country-bi{background-image:url(../img/flags/bi.svg)}.flag-country-bj{background-image:url(../img/flags/bj.svg)}.flag-country-bl{background-image:url(../img/flags/bl.svg)}.flag-country-bm{background-image:url(../img/flags/bm.svg)}.flag-country-bn{background-image:url(../img/flags/bn.svg)}.flag-country-bo{background-image:url(../img/flags/bo.svg)}.flag-country-bq{background-image:url(../img/flags/bq.svg)}.flag-country-br{background-image:url(../img/flags/br.svg)}.flag-country-bs{background-image:url(../img/flags/bs.svg)}.flag-country-bt{background-image:url(../img/flags/bt.svg)}.flag-country-bv{background-image:url(../img/flags/bv.svg)}.flag-country-bw{background-image:url(../img/flags/bw.svg)}.flag-country-by{background-image:url(../img/flags/by.svg)}.flag-country-bz{background-image:url(../img/flags/bz.svg)}.flag-country-ca{background-image:url(../img/flags/ca.svg)}.flag-country-cc{background-image:url(../img/flags/cc.svg)}.flag-country-cd{background-image:url(../img/flags/cd.svg)}.flag-country-cf{background-image:url(../img/flags/cf.svg)}.flag-country-cg{background-image:url(../img/flags/cg.svg)}.flag-country-ch{background-image:url(../img/flags/ch.svg)}.flag-country-ci{background-image:url(../img/flags/ci.svg)}.flag-country-ck{background-image:url(../img/flags/ck.svg)}.flag-country-cl{background-image:url(../img/flags/cl.svg)}.flag-country-cm{background-image:url(../img/flags/cm.svg)}.flag-country-cn{background-image:url(../img/flags/cn.svg)}.flag-country-co{background-image:url(../img/flags/co.svg)}.flag-country-cr{background-image:url(../img/flags/cr.svg)}.flag-country-cu{background-image:url(../img/flags/cu.svg)}.flag-country-cv{background-image:url(../img/flags/cv.svg)}.flag-country-cw{background-image:url(../img/flags/cw.svg)}.flag-country-cx{background-image:url(../img/flags/cx.svg)}.flag-country-cy{background-image:url(../img/flags/cy.svg)}.flag-country-cz{background-image:url(../img/flags/cz.svg)}.flag-country-de{background-image:url(../img/flags/de.svg)}.flag-country-dj{background-image:url(../img/flags/dj.svg)}.flag-country-dk{background-image:url(../img/flags/dk.svg)}.flag-country-dm{background-image:url(../img/flags/dm.svg)}.flag-country-do{background-image:url(../img/flags/do.svg)}.flag-country-dz{background-image:url(../img/flags/dz.svg)}.flag-country-ec{background-image:url(../img/flags/ec.svg)}.flag-country-ee{background-image:url(../img/flags/ee.svg)}.flag-country-eg{background-image:url(../img/flags/eg.svg)}.flag-country-eh{background-image:url(../img/flags/eh.svg)}.flag-country-er{background-image:url(../img/flags/er.svg)}.flag-country-es{background-image:url(../img/flags/es.svg)}.flag-country-et{background-image:url(../img/flags/et.svg)}.flag-country-fi{background-image:url(../img/flags/fi.svg)}.flag-country-fj{background-image:url(../img/flags/fj.svg)}.flag-country-fk{background-image:url(../img/flags/fk.svg)}.flag-country-fm{background-image:url(../img/flags/fm.svg)}.flag-country-fo{background-image:url(../img/flags/fo.svg)}.flag-country-fr{background-image:url(../img/flags/fr.svg)}.flag-country-ga{background-image:url(../img/flags/ga.svg)}.flag-country-gb{background-image:url(../img/flags/gb.svg)}.flag-country-gd{background-image:url(../img/flags/gd.svg)}.flag-country-ge{background-image:url(../img/flags/ge.svg)}.flag-country-gf{background-image:url(../img/flags/gf.svg)}.flag-country-gg{background-image:url(../img/flags/gg.svg)}.flag-country-gh{background-image:url(../img/flags/gh.svg)}.flag-country-gi{background-image:url(../img/flags/gi.svg)}.flag-country-gl{background-image:url(../img/flags/gl.svg)}.flag-country-gm{background-image:url(../img/flags/gm.svg)}.flag-country-gn{background-image:url(../img/flags/gn.svg)}.flag-country-gp{background-image:url(../img/flags/gp.svg)}.flag-country-gq{background-image:url(../img/flags/gq.svg)}.flag-country-gr{background-image:url(../img/flags/gr.svg)}.flag-country-gs{background-image:url(../img/flags/gs.svg)}.flag-country-gt{background-image:url(../img/flags/gt.svg)}.flag-country-gu{background-image:url(../img/flags/gu.svg)}.flag-country-gw{background-image:url(../img/flags/gw.svg)}.flag-country-gy{background-image:url(../img/flags/gy.svg)}.flag-country-hk{background-image:url(../img/flags/hk.svg)}.flag-country-hm{background-image:url(../img/flags/hm.svg)}.flag-country-hn{background-image:url(../img/flags/hn.svg)}.flag-country-hr{background-image:url(../img/flags/hr.svg)}.flag-country-ht{background-image:url(../img/flags/ht.svg)}.flag-country-hu{background-image:url(../img/flags/hu.svg)}.flag-country-id{background-image:url(../img/flags/id.svg)}.flag-country-ie{background-image:url(../img/flags/ie.svg)}.flag-country-il{background-image:url(../img/flags/il.svg)}.flag-country-im{background-image:url(../img/flags/im.svg)}.flag-country-in{background-image:url(../img/flags/in.svg)}.flag-country-io{background-image:url(../img/flags/io.svg)}.flag-country-iq{background-image:url(../img/flags/iq.svg)}.flag-country-ir{background-image:url(../img/flags/ir.svg)}.flag-country-is{background-image:url(../img/flags/is.svg)}.flag-country-it{background-image:url(../img/flags/it.svg)}.flag-country-je{background-image:url(../img/flags/je.svg)}.flag-country-jm{background-image:url(../img/flags/jm.svg)}.flag-country-jo{background-image:url(../img/flags/jo.svg)}.flag-country-jp{background-image:url(../img/flags/jp.svg)}.flag-country-ke{background-image:url(../img/flags/ke.svg)}.flag-country-kg{background-image:url(../img/flags/kg.svg)}.flag-country-kh{background-image:url(../img/flags/kh.svg)}.flag-country-ki{background-image:url(../img/flags/ki.svg)}.flag-country-km{background-image:url(../img/flags/km.svg)}.flag-country-kn{background-image:url(../img/flags/kn.svg)}.flag-country-kp{background-image:url(../img/flags/kp.svg)}.flag-country-kr{background-image:url(../img/flags/kr.svg)}.flag-country-kw{background-image:url(../img/flags/kw.svg)}.flag-country-ky{background-image:url(../img/flags/ky.svg)}.flag-country-kz{background-image:url(../img/flags/kz.svg)}.flag-country-la{background-image:url(../img/flags/la.svg)}.flag-country-lb{background-image:url(../img/flags/lb.svg)}.flag-country-lc{background-image:url(../img/flags/lc.svg)}.flag-country-li{background-image:url(../img/flags/li.svg)}.flag-country-lk{background-image:url(../img/flags/lk.svg)}.flag-country-lr{background-image:url(../img/flags/lr.svg)}.flag-country-ls{background-image:url(../img/flags/ls.svg)}.flag-country-lt{background-image:url(../img/flags/lt.svg)}.flag-country-lu{background-image:url(../img/flags/lu.svg)}.flag-country-lv{background-image:url(../img/flags/lv.svg)}.flag-country-ly{background-image:url(../img/flags/ly.svg)}.flag-country-ma{background-image:url(../img/flags/ma.svg)}.flag-country-mc{background-image:url(../img/flags/mc.svg)}.flag-country-md{background-image:url(../img/flags/md.svg)}.flag-country-me{background-image:url(../img/flags/me.svg)}.flag-country-mf{background-image:url(../img/flags/mf.svg)}.flag-country-mg{background-image:url(../img/flags/mg.svg)}.flag-country-mh{background-image:url(../img/flags/mh.svg)}.flag-country-mk{background-image:url(../img/flags/mk.svg)}.flag-country-ml{background-image:url(../img/flags/ml.svg)}.flag-country-mm{background-image:url(../img/flags/mm.svg)}.flag-country-mn{background-image:url(../img/flags/mn.svg)}.flag-country-mo{background-image:url(../img/flags/mo.svg)}.flag-country-mp{background-image:url(../img/flags/mp.svg)}.flag-country-mq{background-image:url(../img/flags/mq.svg)}.flag-country-mr{background-image:url(../img/flags/mr.svg)}.flag-country-ms{background-image:url(../img/flags/ms.svg)}.flag-country-mt{background-image:url(../img/flags/mt.svg)}.flag-country-mu{background-image:url(../img/flags/mu.svg)}.flag-country-mv{background-image:url(../img/flags/mv.svg)}.flag-country-mw{background-image:url(../img/flags/mw.svg)}.flag-country-mx{background-image:url(../img/flags/mx.svg)}.flag-country-my{background-image:url(../img/flags/my.svg)}.flag-country-mz{background-image:url(../img/flags/mz.svg)}.flag-country-na{background-image:url(../img/flags/na.svg)}.flag-country-nc{background-image:url(../img/flags/nc.svg)}.flag-country-ne{background-image:url(../img/flags/ne.svg)}.flag-country-nf{background-image:url(../img/flags/nf.svg)}.flag-country-ng{background-image:url(../img/flags/ng.svg)}.flag-country-ni{background-image:url(../img/flags/ni.svg)}.flag-country-nl{background-image:url(../img/flags/nl.svg)}.flag-country-no{background-image:url(../img/flags/no.svg)}.flag-country-np{background-image:url(../img/flags/np.svg)}.flag-country-nr{background-image:url(../img/flags/nr.svg)}.flag-country-nu{background-image:url(../img/flags/nu.svg)}.flag-country-nz{background-image:url(../img/flags/nz.svg)}.flag-country-om{background-image:url(../img/flags/om.svg)}.flag-country-pa{background-image:url(../img/flags/pa.svg)}.flag-country-pe{background-image:url(../img/flags/pe.svg)}.flag-country-pf{background-image:url(../img/flags/pf.svg)}.flag-country-pg{background-image:url(../img/flags/pg.svg)}.flag-country-ph{background-image:url(../img/flags/ph.svg)}.flag-country-pk{background-image:url(../img/flags/pk.svg)}.flag-country-pl{background-image:url(../img/flags/pl.svg)}.flag-country-pm{background-image:url(../img/flags/pm.svg)}.flag-country-pn{background-image:url(../img/flags/pn.svg)}.flag-country-pr{background-image:url(../img/flags/pr.svg)}.flag-country-ps{background-image:url(../img/flags/ps.svg)}.flag-country-pt{background-image:url(../img/flags/pt.svg)}.flag-country-pw{background-image:url(../img/flags/pw.svg)}.flag-country-py{background-image:url(../img/flags/py.svg)}.flag-country-qa{background-image:url(../img/flags/qa.svg)}.flag-country-re{background-image:url(../img/flags/re.svg)}.flag-country-ro{background-image:url(../img/flags/ro.svg)}.flag-country-rs{background-image:url(../img/flags/rs.svg)}.flag-country-ru{background-image:url(../img/flags/ru.svg)}.flag-country-rw{background-image:url(../img/flags/rw.svg)}.flag-country-sa{background-image:url(../img/flags/sa.svg)}.flag-country-sb{background-image:url(../img/flags/sb.svg)}.flag-country-sc{background-image:url(../img/flags/sc.svg)}.flag-country-sd{background-image:url(../img/flags/sd.svg)}.flag-country-se{background-image:url(../img/flags/se.svg)}.flag-country-sg{background-image:url(../img/flags/sg.svg)}.flag-country-sh{background-image:url(../img/flags/sh.svg)}.flag-country-si{background-image:url(../img/flags/si.svg)}.flag-country-sj{background-image:url(../img/flags/sj.svg)}.flag-country-sk{background-image:url(../img/flags/sk.svg)}.flag-country-sl{background-image:url(../img/flags/sl.svg)}.flag-country-sm{background-image:url(../img/flags/sm.svg)}.flag-country-sn{background-image:url(../img/flags/sn.svg)}.flag-country-so{background-image:url(../img/flags/so.svg)}.flag-country-sr{background-image:url(../img/flags/sr.svg)}.flag-country-ss{background-image:url(../img/flags/ss.svg)}.flag-country-st{background-image:url(../img/flags/st.svg)}.flag-country-sv{background-image:url(../img/flags/sv.svg)}.flag-country-sx{background-image:url(../img/flags/sx.svg)}.flag-country-sy{background-image:url(../img/flags/sy.svg)}.flag-country-sz{background-image:url(../img/flags/sz.svg)}.flag-country-tc{background-image:url(../img/flags/tc.svg)}.flag-country-td{background-image:url(../img/flags/td.svg)}.flag-country-tf{background-image:url(../img/flags/tf.svg)}.flag-country-tg{background-image:url(../img/flags/tg.svg)}.flag-country-th{background-image:url(../img/flags/th.svg)}.flag-country-tj{background-image:url(../img/flags/tj.svg)}.flag-country-tk{background-image:url(../img/flags/tk.svg)}.flag-country-tl{background-image:url(../img/flags/tl.svg)}.flag-country-tm{background-image:url(../img/flags/tm.svg)}.flag-country-tn{background-image:url(../img/flags/tn.svg)}.flag-country-to{background-image:url(../img/flags/to.svg)}.flag-country-tr{background-image:url(../img/flags/tr.svg)}.flag-country-tt{background-image:url(../img/flags/tt.svg)}.flag-country-tv{background-image:url(../img/flags/tv.svg)}.flag-country-tw{background-image:url(../img/flags/tw.svg)}.flag-country-tz{background-image:url(../img/flags/tz.svg)}.flag-country-ua{background-image:url(../img/flags/ua.svg)}.flag-country-ug{background-image:url(../img/flags/ug.svg)}.flag-country-um{background-image:url(../img/flags/um.svg)}.flag-country-us{background-image:url(../img/flags/us.svg)}.flag-country-uy{background-image:url(../img/flags/uy.svg)}.flag-country-uz{background-image:url(../img/flags/uz.svg)}.flag-country-va{background-image:url(../img/flags/va.svg)}.flag-country-vc{background-image:url(../img/flags/vc.svg)}.flag-country-ve{background-image:url(../img/flags/ve.svg)}.flag-country-vg{background-image:url(../img/flags/vg.svg)}.flag-country-vi{background-image:url(../img/flags/vi.svg)}.flag-country-vn{background-image:url(../img/flags/vn.svg)}.flag-country-vu{background-image:url(../img/flags/vu.svg)}.flag-country-wf{background-image:url(../img/flags/wf.svg)}.flag-country-ws{background-image:url(../img/flags/ws.svg)}.flag-country-ye{background-image:url(../img/flags/ye.svg)}.flag-country-yt{background-image:url(../img/flags/yt.svg)}.flag-country-za{background-image:url(../img/flags/za.svg)}.flag-country-zm{background-image:url(../img/flags/zm.svg)}.flag-country-zw{background-image:url(../img/flags/zw.svg)}.flag-country-es-ct{background-image:url(../img/flags/es-ct.svg)}.flag-country-eu{background-image:url(../img/flags/eu.svg)}.flag-country-gb-eng{background-image:url(../img/flags/gb-eng.svg)}.flag-country-gb-nir{background-image:url(../img/flags/gb-nir.svg)}.flag-country-gb-sct{background-image:url(../img/flags/gb-sct.svg)}.flag-country-gb-wls{background-image:url(../img/flags/gb-wls.svg)}.flag-country-un{background-image:url(../img/flags/un.svg)}.flag-md{width:2.66666rem;height:2rem}.flag-lg{width:3.99999rem;height:3rem}.flag-xl{width:5.33332rem;height:4rem}
 /*# sourceMappingURL=tabler-flags.min.css.map */
\ No newline at end of file
diff --git a/demo/dist/css/tabler-flags.min.css.map b/demo/dist/css/tabler-flags.min.css.map
index 1becb4165..6f8ede118 100644
Binary files a/demo/dist/css/tabler-flags.min.css.map and b/demo/dist/css/tabler-flags.min.css.map differ
diff --git a/demo/dist/css/tabler-payments.css b/demo/dist/css/tabler-payments.css
index c7718f41c..bd6112a94 100644
--- a/demo/dist/css/tabler-payments.css
+++ b/demo/dist/css/tabler-payments.css
@@ -1,5 +1,5 @@
 /*!
- * Tabler (v1.0.0-alpha.4)
+ * Tabler (v1.0.0-alpha.5)
  * Copyright 2018-2020 The Tabler Authors
  * Copyright 2018-2020 codecalm
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
diff --git a/demo/dist/css/tabler-payments.css.map b/demo/dist/css/tabler-payments.css.map
index 8d6a118a5..a02830c87 100644
Binary files a/demo/dist/css/tabler-payments.css.map and b/demo/dist/css/tabler-payments.css.map differ
diff --git a/demo/dist/css/tabler-payments.min.css b/demo/dist/css/tabler-payments.min.css
index 84e02105d..4e5ddaacf 100644
--- a/demo/dist/css/tabler-payments.min.css
+++ b/demo/dist/css/tabler-payments.min.css
@@ -1,5 +1,5 @@
 /*!
- * Tabler (v1.0.0-alpha.4)
+ * Tabler (v1.0.0-alpha.5)
  * Copyright 2018-2020 The Tabler Authors
  * Copyright 2018-2020 codecalm
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
diff --git a/demo/dist/css/tabler-payments.min.css.map b/demo/dist/css/tabler-payments.min.css.map
index 79034fd14..fc4fd4add 100644
Binary files a/demo/dist/css/tabler-payments.min.css.map and b/demo/dist/css/tabler-payments.min.css.map differ
diff --git a/demo/dist/css/tabler.css b/demo/dist/css/tabler.css
index 82366e23d..91f9be3a9 100644
--- a/demo/dist/css/tabler.css
+++ b/demo/dist/css/tabler.css
@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Tabler (v1.0.0-alpha.4)
+ * Tabler (v1.0.0-alpha.5)
  * Copyright 2018-2020 The Tabler Authors
  * Copyright 2018-2020 codecalm
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
@@ -8,14 +8,14 @@
 /**
 Dark mode
  */
-@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,500,600,700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;600;700&display=swap");
 :root {
   --blue: #206bc4;
   --azure: #45aaf2;
   --indigo: #6574cd;
   --purple: #a55eea;
   --pink: #f66d9b;
-  --red: #fa4654;
+  --red: #cd201f;
   --orange: #ff922b;
   --yellow: #fab005;
   --lime: #94d82d;
@@ -27,14 +27,14 @@ Dark mode
   --gray-dark: #545d6d;
   --dark: #354052;
   --primary: #206bc4;
-  --secondary: #868c97;
+  --secondary: #6e7582;
   --success: #5eba00;
   --info: #45aaf2;
   --warning: #fab005;
-  --danger: #fa4654;
+  --danger: #cd201f;
   --light: #f5f7fb;
   --dark: #354052;
-  --font-family-sans-serif: "Source Sans Pro", -apple-system, blinkmacsystemfont, segoe ui, helvetica, arial, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol;
+  --font-family-sans-serif: "Ubuntu", system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
   --font-family-monospace: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; }
 
 *,
@@ -44,10 +44,10 @@ Dark mode
 
 body {
   margin: 0;
-  font-family: "Source Sans Pro", -apple-system, blinkmacsystemfont, segoe ui, helvetica, arial, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol;
-  font-size: 0.9375rem;
+  font-family: "Ubuntu", system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.6;
+  line-height: 1.7142857;
   color: #354052;
   background-color: #f5f7fb;
   -webkit-text-size-adjust: 100%;
@@ -69,14 +69,14 @@ hr:not([size]), .hr:not([size]) {
 h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
   margin-top: 0;
   margin-bottom: 0.5rem;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 1.2; }
 
 h1, .h1 {
-  font-size: calc(1.2875rem + 0.45vw); }
+  font-size: calc(1.3rem + 0.6vw); }
   @media (min-width: 1200px) {
     h1, .h1 {
-      font-size: 1.625rem; } }
+      font-size: 1.75rem; } }
 
 h2, .h2 {
   font-size: calc(1.2625rem + 0.15vw); }
@@ -88,13 +88,13 @@ h3, .h3 {
   font-size: 1.125rem; }
 
 h4, .h4 {
-  font-size: 0.9375rem; }
+  font-size: 0.875rem; }
 
 h5, .h5 {
-  font-size: 0.8125rem; }
+  font-size: 0.75rem; }
 
 h6, .h6 {
-  font-size: 0.6875rem; }
+  font-size: 0.625rem; }
 
 p {
   margin-top: 0;
@@ -131,7 +131,7 @@ ul ol {
   margin-bottom: 0; }
 
 dt {
-  font-weight: 600; }
+  font-weight: 500; }
 
 dd {
   margin-bottom: .5rem;
@@ -186,14 +186,14 @@ pre {
   margin-top: 0;
   margin-bottom: 1rem;
   overflow: auto;
-  font-size: 0.6875rem; }
+  font-size: 0.625rem; }
   pre code {
     font-size: inherit;
     color: inherit;
     word-break: normal; }
 
 code {
-  font-size: 0.6875rem;
+  font-size: 0.625rem;
   color: #206bc4;
   word-wrap: break-word; }
   a > code {
@@ -201,14 +201,14 @@ code {
 
 kbd {
   padding: 0.2rem 0.4rem;
-  font-size: 0.6875rem;
+  font-size: 0.625rem;
   color: #ffffff;
   background-color: #354052;
   border-radius: 0.2rem; }
   kbd kbd {
     padding: 0;
     font-size: 1em;
-    font-weight: 600; }
+    font-weight: 500; }
 
 figure {
   margin: 0 0 1rem; }
@@ -224,7 +224,7 @@ table {
 caption {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  color: #868c97;
+  color: #6e7582;
   text-align: left; }
 
 th {
@@ -350,7 +350,7 @@ progress {
   display: none !important; }
 
 .lead {
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   font-weight: 400; }
 
 .display-1 {
@@ -404,7 +404,7 @@ progress {
 
 .blockquote {
   margin-bottom: 1rem;
-  font-size: 0.9375rem; }
+  font-size: 0.875rem; }
 
 .blockquote-footer {
   display: block;
@@ -438,8 +438,8 @@ progress {
 
 .container {
   width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
   margin-right: auto;
   margin-left: auto; }
   @media (min-width: 33rem) {
@@ -457,8 +457,8 @@ progress {
 
 .container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
   width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
   margin-right: auto;
   margin-left: auto; }
 
@@ -556,83 +556,51 @@ progress {
 
 .g-4,
 .gx-4 {
-  margin-right: -0.625rem;
-  margin-left: -0.625rem; }
+  margin-right: -0.75rem;
+  margin-left: -0.75rem; }
   .g-4 > *,
   .gx-4 > * {
-    padding-right: 0.625rem;
-    padding-left: 0.625rem; }
+    padding-right: 0.75rem;
+    padding-left: 0.75rem; }
 
 .g-4,
 .gy-4 {
-  margin-top: -1.25rem; }
+  margin-top: -1.5rem; }
   .g-4 > *,
   .gy-4 > * {
-    margin-top: 1.25rem; }
+    margin-top: 1.5rem; }
 
 .g-5,
 .gx-5 {
-  margin-right: -1rem;
-  margin-left: -1rem; }
-  .g-5 > *,
-  .gx-5 > * {
-    padding-right: 1rem;
-    padding-left: 1rem; }
-
-.g-5,
-.gy-5 {
-  margin-top: -2rem; }
-  .g-5 > *,
-  .gy-5 > * {
-    margin-top: 2rem; }
-
-.g-6,
-.gx-6 {
   margin-right: -1.5rem;
   margin-left: -1.5rem; }
-  .g-6 > *,
-  .gx-6 > * {
+  .g-5 > *,
+  .gx-5 > * {
     padding-right: 1.5rem;
     padding-left: 1.5rem; }
 
-.g-6,
-.gy-6 {
+.g-5,
+.gy-5 {
   margin-top: -3rem; }
-  .g-6 > *,
-  .gy-6 > * {
+  .g-5 > *,
+  .gy-5 > * {
     margin-top: 3rem; }
 
-.g-7,
-.gx-7 {
-  margin-right: -3rem;
-  margin-left: -3rem; }
-  .g-7 > *,
-  .gx-7 > * {
-    padding-right: 3rem;
-    padding-left: 3rem; }
+.g-6,
+.gx-6 {
+  margin-right: -2.25rem;
+  margin-left: -2.25rem; }
+  .g-6 > *,
+  .gx-6 > * {
+    padding-right: 2.25rem;
+    padding-left: 2.25rem; }
 
-.g-7,
-.gy-7 {
-  margin-top: -6rem; }
-  .g-7 > *,
-  .gy-7 > * {
-    margin-top: 6rem; }
-
-.g-8,
-.gx-8 {
-  margin-right: -4.5rem;
-  margin-left: -4.5rem; }
-  .g-8 > *,
-  .gx-8 > * {
-    padding-right: 4.5rem;
-    padding-left: 4.5rem; }
-
-.g-8,
-.gy-8 {
-  margin-top: -9rem; }
-  .g-8 > *,
-  .gy-8 > * {
-    margin-top: 9rem; }
+.g-6,
+.gy-6 {
+  margin-top: -4.5rem; }
+  .g-6 > *,
+  .gy-6 > * {
+    margin-top: 4.5rem; }
 
 @media (min-width: 33rem) {
   .g-sm-0,
@@ -693,74 +661,46 @@ progress {
       margin-top: 1rem; }
   .g-sm-4,
   .gx-sm-4 {
-    margin-right: -0.625rem;
-    margin-left: -0.625rem; }
+    margin-right: -0.75rem;
+    margin-left: -0.75rem; }
     .g-sm-4 > *,
     .gx-sm-4 > * {
-      padding-right: 0.625rem;
-      padding-left: 0.625rem; }
+      padding-right: 0.75rem;
+      padding-left: 0.75rem; }
   .g-sm-4,
   .gy-sm-4 {
-    margin-top: -1.25rem; }
+    margin-top: -1.5rem; }
     .g-sm-4 > *,
     .gy-sm-4 > * {
-      margin-top: 1.25rem; }
+      margin-top: 1.5rem; }
   .g-sm-5,
   .gx-sm-5 {
-    margin-right: -1rem;
-    margin-left: -1rem; }
-    .g-sm-5 > *,
-    .gx-sm-5 > * {
-      padding-right: 1rem;
-      padding-left: 1rem; }
-  .g-sm-5,
-  .gy-sm-5 {
-    margin-top: -2rem; }
-    .g-sm-5 > *,
-    .gy-sm-5 > * {
-      margin-top: 2rem; }
-  .g-sm-6,
-  .gx-sm-6 {
     margin-right: -1.5rem;
     margin-left: -1.5rem; }
-    .g-sm-6 > *,
-    .gx-sm-6 > * {
+    .g-sm-5 > *,
+    .gx-sm-5 > * {
       padding-right: 1.5rem;
       padding-left: 1.5rem; }
+  .g-sm-5,
+  .gy-sm-5 {
+    margin-top: -3rem; }
+    .g-sm-5 > *,
+    .gy-sm-5 > * {
+      margin-top: 3rem; }
+  .g-sm-6,
+  .gx-sm-6 {
+    margin-right: -2.25rem;
+    margin-left: -2.25rem; }
+    .g-sm-6 > *,
+    .gx-sm-6 > * {
+      padding-right: 2.25rem;
+      padding-left: 2.25rem; }
   .g-sm-6,
   .gy-sm-6 {
-    margin-top: -3rem; }
+    margin-top: -4.5rem; }
     .g-sm-6 > *,
     .gy-sm-6 > * {
-      margin-top: 3rem; }
-  .g-sm-7,
-  .gx-sm-7 {
-    margin-right: -3rem;
-    margin-left: -3rem; }
-    .g-sm-7 > *,
-    .gx-sm-7 > * {
-      padding-right: 3rem;
-      padding-left: 3rem; }
-  .g-sm-7,
-  .gy-sm-7 {
-    margin-top: -6rem; }
-    .g-sm-7 > *,
-    .gy-sm-7 > * {
-      margin-top: 6rem; }
-  .g-sm-8,
-  .gx-sm-8 {
-    margin-right: -4.5rem;
-    margin-left: -4.5rem; }
-    .g-sm-8 > *,
-    .gx-sm-8 > * {
-      padding-right: 4.5rem;
-      padding-left: 4.5rem; }
-  .g-sm-8,
-  .gy-sm-8 {
-    margin-top: -9rem; }
-    .g-sm-8 > *,
-    .gy-sm-8 > * {
-      margin-top: 9rem; } }
+      margin-top: 4.5rem; } }
 
 @media (min-width: 48rem) {
   .g-md-0,
@@ -821,74 +761,46 @@ progress {
       margin-top: 1rem; }
   .g-md-4,
   .gx-md-4 {
-    margin-right: -0.625rem;
-    margin-left: -0.625rem; }
+    margin-right: -0.75rem;
+    margin-left: -0.75rem; }
     .g-md-4 > *,
     .gx-md-4 > * {
-      padding-right: 0.625rem;
-      padding-left: 0.625rem; }
+      padding-right: 0.75rem;
+      padding-left: 0.75rem; }
   .g-md-4,
   .gy-md-4 {
-    margin-top: -1.25rem; }
+    margin-top: -1.5rem; }
     .g-md-4 > *,
     .gy-md-4 > * {
-      margin-top: 1.25rem; }
+      margin-top: 1.5rem; }
   .g-md-5,
   .gx-md-5 {
-    margin-right: -1rem;
-    margin-left: -1rem; }
-    .g-md-5 > *,
-    .gx-md-5 > * {
-      padding-right: 1rem;
-      padding-left: 1rem; }
-  .g-md-5,
-  .gy-md-5 {
-    margin-top: -2rem; }
-    .g-md-5 > *,
-    .gy-md-5 > * {
-      margin-top: 2rem; }
-  .g-md-6,
-  .gx-md-6 {
     margin-right: -1.5rem;
     margin-left: -1.5rem; }
-    .g-md-6 > *,
-    .gx-md-6 > * {
+    .g-md-5 > *,
+    .gx-md-5 > * {
       padding-right: 1.5rem;
       padding-left: 1.5rem; }
+  .g-md-5,
+  .gy-md-5 {
+    margin-top: -3rem; }
+    .g-md-5 > *,
+    .gy-md-5 > * {
+      margin-top: 3rem; }
+  .g-md-6,
+  .gx-md-6 {
+    margin-right: -2.25rem;
+    margin-left: -2.25rem; }
+    .g-md-6 > *,
+    .gx-md-6 > * {
+      padding-right: 2.25rem;
+      padding-left: 2.25rem; }
   .g-md-6,
   .gy-md-6 {
-    margin-top: -3rem; }
+    margin-top: -4.5rem; }
     .g-md-6 > *,
     .gy-md-6 > * {
-      margin-top: 3rem; }
-  .g-md-7,
-  .gx-md-7 {
-    margin-right: -3rem;
-    margin-left: -3rem; }
-    .g-md-7 > *,
-    .gx-md-7 > * {
-      padding-right: 3rem;
-      padding-left: 3rem; }
-  .g-md-7,
-  .gy-md-7 {
-    margin-top: -6rem; }
-    .g-md-7 > *,
-    .gy-md-7 > * {
-      margin-top: 6rem; }
-  .g-md-8,
-  .gx-md-8 {
-    margin-right: -4.5rem;
-    margin-left: -4.5rem; }
-    .g-md-8 > *,
-    .gx-md-8 > * {
-      padding-right: 4.5rem;
-      padding-left: 4.5rem; }
-  .g-md-8,
-  .gy-md-8 {
-    margin-top: -9rem; }
-    .g-md-8 > *,
-    .gy-md-8 > * {
-      margin-top: 9rem; } }
+      margin-top: 4.5rem; } }
 
 @media (min-width: 64rem) {
   .g-lg-0,
@@ -949,74 +861,46 @@ progress {
       margin-top: 1rem; }
   .g-lg-4,
   .gx-lg-4 {
-    margin-right: -0.625rem;
-    margin-left: -0.625rem; }
+    margin-right: -0.75rem;
+    margin-left: -0.75rem; }
     .g-lg-4 > *,
     .gx-lg-4 > * {
-      padding-right: 0.625rem;
-      padding-left: 0.625rem; }
+      padding-right: 0.75rem;
+      padding-left: 0.75rem; }
   .g-lg-4,
   .gy-lg-4 {
-    margin-top: -1.25rem; }
+    margin-top: -1.5rem; }
     .g-lg-4 > *,
     .gy-lg-4 > * {
-      margin-top: 1.25rem; }
+      margin-top: 1.5rem; }
   .g-lg-5,
   .gx-lg-5 {
-    margin-right: -1rem;
-    margin-left: -1rem; }
-    .g-lg-5 > *,
-    .gx-lg-5 > * {
-      padding-right: 1rem;
-      padding-left: 1rem; }
-  .g-lg-5,
-  .gy-lg-5 {
-    margin-top: -2rem; }
-    .g-lg-5 > *,
-    .gy-lg-5 > * {
-      margin-top: 2rem; }
-  .g-lg-6,
-  .gx-lg-6 {
     margin-right: -1.5rem;
     margin-left: -1.5rem; }
-    .g-lg-6 > *,
-    .gx-lg-6 > * {
+    .g-lg-5 > *,
+    .gx-lg-5 > * {
       padding-right: 1.5rem;
       padding-left: 1.5rem; }
+  .g-lg-5,
+  .gy-lg-5 {
+    margin-top: -3rem; }
+    .g-lg-5 > *,
+    .gy-lg-5 > * {
+      margin-top: 3rem; }
+  .g-lg-6,
+  .gx-lg-6 {
+    margin-right: -2.25rem;
+    margin-left: -2.25rem; }
+    .g-lg-6 > *,
+    .gx-lg-6 > * {
+      padding-right: 2.25rem;
+      padding-left: 2.25rem; }
   .g-lg-6,
   .gy-lg-6 {
-    margin-top: -3rem; }
+    margin-top: -4.5rem; }
     .g-lg-6 > *,
     .gy-lg-6 > * {
-      margin-top: 3rem; }
-  .g-lg-7,
-  .gx-lg-7 {
-    margin-right: -3rem;
-    margin-left: -3rem; }
-    .g-lg-7 > *,
-    .gx-lg-7 > * {
-      padding-right: 3rem;
-      padding-left: 3rem; }
-  .g-lg-7,
-  .gy-lg-7 {
-    margin-top: -6rem; }
-    .g-lg-7 > *,
-    .gy-lg-7 > * {
-      margin-top: 6rem; }
-  .g-lg-8,
-  .gx-lg-8 {
-    margin-right: -4.5rem;
-    margin-left: -4.5rem; }
-    .g-lg-8 > *,
-    .gx-lg-8 > * {
-      padding-right: 4.5rem;
-      padding-left: 4.5rem; }
-  .g-lg-8,
-  .gy-lg-8 {
-    margin-top: -9rem; }
-    .g-lg-8 > *,
-    .gy-lg-8 > * {
-      margin-top: 9rem; } }
+      margin-top: 4.5rem; } }
 
 @media (min-width: 75.25rem) {
   .g-xl-0,
@@ -1077,74 +961,46 @@ progress {
       margin-top: 1rem; }
   .g-xl-4,
   .gx-xl-4 {
-    margin-right: -0.625rem;
-    margin-left: -0.625rem; }
+    margin-right: -0.75rem;
+    margin-left: -0.75rem; }
     .g-xl-4 > *,
     .gx-xl-4 > * {
-      padding-right: 0.625rem;
-      padding-left: 0.625rem; }
+      padding-right: 0.75rem;
+      padding-left: 0.75rem; }
   .g-xl-4,
   .gy-xl-4 {
-    margin-top: -1.25rem; }
+    margin-top: -1.5rem; }
     .g-xl-4 > *,
     .gy-xl-4 > * {
-      margin-top: 1.25rem; }
+      margin-top: 1.5rem; }
   .g-xl-5,
   .gx-xl-5 {
-    margin-right: -1rem;
-    margin-left: -1rem; }
-    .g-xl-5 > *,
-    .gx-xl-5 > * {
-      padding-right: 1rem;
-      padding-left: 1rem; }
-  .g-xl-5,
-  .gy-xl-5 {
-    margin-top: -2rem; }
-    .g-xl-5 > *,
-    .gy-xl-5 > * {
-      margin-top: 2rem; }
-  .g-xl-6,
-  .gx-xl-6 {
     margin-right: -1.5rem;
     margin-left: -1.5rem; }
-    .g-xl-6 > *,
-    .gx-xl-6 > * {
+    .g-xl-5 > *,
+    .gx-xl-5 > * {
       padding-right: 1.5rem;
       padding-left: 1.5rem; }
+  .g-xl-5,
+  .gy-xl-5 {
+    margin-top: -3rem; }
+    .g-xl-5 > *,
+    .gy-xl-5 > * {
+      margin-top: 3rem; }
+  .g-xl-6,
+  .gx-xl-6 {
+    margin-right: -2.25rem;
+    margin-left: -2.25rem; }
+    .g-xl-6 > *,
+    .gx-xl-6 > * {
+      padding-right: 2.25rem;
+      padding-left: 2.25rem; }
   .g-xl-6,
   .gy-xl-6 {
-    margin-top: -3rem; }
+    margin-top: -4.5rem; }
     .g-xl-6 > *,
     .gy-xl-6 > * {
-      margin-top: 3rem; }
-  .g-xl-7,
-  .gx-xl-7 {
-    margin-right: -3rem;
-    margin-left: -3rem; }
-    .g-xl-7 > *,
-    .gx-xl-7 > * {
-      padding-right: 3rem;
-      padding-left: 3rem; }
-  .g-xl-7,
-  .gy-xl-7 {
-    margin-top: -6rem; }
-    .g-xl-7 > *,
-    .gy-xl-7 > * {
-      margin-top: 6rem; }
-  .g-xl-8,
-  .gx-xl-8 {
-    margin-right: -4.5rem;
-    margin-left: -4.5rem; }
-    .g-xl-8 > *,
-    .gx-xl-8 > * {
-      padding-right: 4.5rem;
-      padding-left: 4.5rem; }
-  .g-xl-8,
-  .gy-xl-8 {
-    margin-top: -9rem; }
-    .g-xl-8 > *,
-    .gy-xl-8 > * {
-      margin-top: 9rem; } }
+      margin-top: 4.5rem; } }
 
 .col {
   flex: 1 0 0%;
@@ -1628,14 +1484,14 @@ progress {
   .table td,
   .markdown > table td {
     padding: 0.5rem;
-    border-bottom: 1px solid rgba(134, 140, 151, 0.24); }
+    border-bottom: 1px solid rgba(110, 117, 130, 0.2); }
   .table tbody, .markdown > table tbody {
     vertical-align: inherit; }
   .table thead th, .markdown > table thead th {
     vertical-align: bottom;
-    border-bottom-color: rgba(134, 140, 151, 0.24); }
+    border-bottom-color: rgba(110, 117, 130, 0.2); }
   .table tbody + tbody, .markdown > table tbody + tbody {
-    border-top: 2px solid rgba(134, 140, 151, 0.24); }
+    border-top: 2px solid rgba(110, 117, 130, 0.2); }
 
 .caption-top {
   caption-side: top; }
@@ -1645,11 +1501,11 @@ progress {
   padding: 0.25rem; }
 
 .table-bordered, .markdown > table {
-  border: 1px solid rgba(134, 140, 151, 0.24); }
+  border: 1px solid rgba(110, 117, 130, 0.2); }
   .table-bordered th, .markdown > table th,
   .table-bordered td,
   .markdown > table td {
-    border: 1px solid rgba(134, 140, 151, 0.24); }
+    border: 1px solid rgba(110, 117, 130, 0.2); }
   .table-bordered thead th, .markdown > table thead th,
   .table-bordered thead td,
   .markdown > table thead td {
@@ -1688,19 +1544,19 @@ progress {
 .table-secondary,
 .table-secondary > th,
 .table-secondary > td {
-  background-color: #f3f4f5; }
+  background-color: #f1f1f3; }
 
 .table-secondary th,
 .table-secondary td,
 .table-secondary thead th,
 .table-secondary tbody + tbody {
-  border-color: #cfd1d5; }
+  border-color: #c5c8cd; }
 
 .table-hover .table-secondary:hover {
-  background-color: #e5e7e9; }
+  background-color: #e3e3e7; }
   .table-hover .table-secondary:hover > td,
   .table-hover .table-secondary:hover > th {
-    background-color: #e5e7e9; }
+    background-color: #e3e3e7; }
 
 .table-success,
 .table-success > th,
@@ -1756,19 +1612,19 @@ progress {
 .table-danger,
 .table-danger > th,
 .table-danger > td {
-  background-color: #ffedee; }
+  background-color: #fae9e9; }
 
 .table-danger th,
 .table-danger td,
 .table-danger thead th,
 .table-danger tbody + tbody {
-  border-color: #fdb5bb; }
+  border-color: #eba6a5; }
 
 .table-hover .table-danger:hover {
-  background-color: #ffd4d6; }
+  background-color: #f5d4d4; }
   .table-hover .table-danger:hover > td,
   .table-hover .table-danger:hover > th {
-    background-color: #ffd4d6; }
+    background-color: #f5d4d4; }
 
 .table-light,
 .table-light > th,
@@ -1823,7 +1679,7 @@ progress {
 .table .thead-light th, .markdown > table .thead-light th {
   color: #7a828f;
   background-color: #f1f3f8;
-  border-color: rgba(134, 140, 151, 0.24); }
+  border-color: rgba(110, 117, 130, 0.2); }
 
 .table-dark {
   color: #ffffff;
@@ -1902,20 +1758,20 @@ progress {
 .col-form-label-sm {
   padding-top: calc(0.125rem + 1px);
   padding-bottom: calc(0.125rem + 1px);
-  font-size: 0.8125rem; }
+  font-size: 0.75rem; }
 
 .form-control {
   display: block;
   width: 100%;
   min-height: calc(1.4666667em + 0.75rem + 2px);
   padding: 0.375rem 0.75rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.4666667;
   color: #354052;
   background-color: #ffffff;
   background-clip: padding-box;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 3px;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
   @media (prefers-reduced-motion: reduce) {
@@ -1928,19 +1784,19 @@ progress {
     outline: 0;
     box-shadow: 0 0 0 0.2rem rgba(32, 107, 196, 0.25); }
   .form-control::-webkit-input-placeholder {
-    color: #868c97;
+    color: #6e7582;
     opacity: 1; }
   .form-control::-moz-placeholder {
-    color: #868c97;
+    color: #6e7582;
     opacity: 1; }
   .form-control:-ms-input-placeholder {
-    color: #868c97;
+    color: #6e7582;
     opacity: 1; }
   .form-control::-ms-input-placeholder {
-    color: #868c97;
+    color: #6e7582;
     opacity: 1; }
   .form-control::placeholder {
-    color: #868c97;
+    color: #6e7582;
     opacity: 1; }
   .form-control:disabled, .form-control[readonly] {
     background-color: #f5f7fb;
@@ -1963,7 +1819,7 @@ progress {
 .form-control-sm {
   min-height: calc(1.4666667em + 0.25rem + 2px);
   padding: 0.125rem 0.5rem;
-  font-size: 0.8125rem;
+  font-size: 0.75rem;
   border-radius: 0.2rem; }
 
 .form-control-lg {
@@ -1990,17 +1846,17 @@ progress {
   width: 100%;
   height: calc(1.4666667em + 0.75rem + 2px);
   padding: 0.375rem 1.75rem 0.375rem 0.75rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.4666667;
   color: #354052;
   vertical-align: middle;
   background-color: #ffffff;
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28134, 140, 151, 0.48%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28110, 117, 130, 0.44%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right 0.75rem center;
   background-size: 16px 12px;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 3px;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -2028,7 +1884,7 @@ progress {
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
   padding-left: 0.5rem;
-  font-size: 0.8125rem; }
+  font-size: 0.75rem; }
 
 .form-select-lg {
   height: calc(1.4666667em + 1rem + 2px);
@@ -2052,10 +1908,10 @@ progress {
 .form-check-input {
   width: 1rem;
   height: 1rem;
-  margin-top: 0.3rem;
+  margin-top: 0.3571429rem;
   vertical-align: top;
   background-color: #ffffff;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -2077,7 +1933,7 @@ progress {
     background-repeat: repeat;
     background-position: center center;
     background-size: 1rem;
-    border-color: rgba(134, 140, 151, 0.24); }
+    border-color: rgba(110, 117, 130, 0.2); }
     .form-check-input:checked[type="checkbox"] {
       background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6' transform='scale%28.8%29' transform-origin='50% 50%'/%3e%3c/svg%3e"); }
     .form-check-input:checked[type="radio"] {
@@ -2105,7 +1961,7 @@ progress {
   .form-switch .form-check-input {
     width: 1.75rem;
     margin-left: -2.25rem;
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28134, 140, 151, 0.24%29'/%3e%3c/svg%3e");
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28110, 117, 130, 0.2%29'/%3e%3c/svg%3e");
     background-repeat: no-repeat;
     background-position: left center;
     background-size: auto;
@@ -2148,7 +2004,7 @@ progress {
   z-index: 1;
   display: flex;
   height: 100%;
-  border-color: rgba(134, 140, 151, 0.24);
+  border-color: rgba(110, 117, 130, 0.2);
   border-radius: 3px; }
 
 .form-file-text {
@@ -2184,7 +2040,7 @@ progress {
 
 .form-file-sm {
   height: calc(1.4666667em + 0.25rem + 2px);
-  font-size: 0.8125rem; }
+  font-size: 0.75rem; }
   .form-file-sm .form-file-text,
   .form-file-sm .form-file-button {
     padding: 0.125rem 0.5rem; }
@@ -2344,14 +2200,14 @@ progress {
   align-items: center;
   padding: 0.375rem 0.75rem;
   margin-bottom: 0;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.4666667;
-  color: #868c97;
+  color: #6e7582;
   text-align: center;
   white-space: nowrap;
   background-color: rgba(53, 64, 82, 0.024);
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 3px; }
 
 .input-group-lg > .form-control {
@@ -2385,7 +2241,7 @@ progress {
 .input-group-sm > .input-group-text,
 .input-group-sm > .btn {
   padding: 0.125rem 0.5rem;
-  font-size: 0.8125rem;
+  font-size: 0.75rem;
   border-radius: 0.2rem; }
 
 .input-group-lg > .form-select,
@@ -2417,8 +2273,8 @@ progress {
   max-width: 100%;
   padding: 0.25rem 0.5rem;
   margin-top: .1rem;
-  font-size: 0.8203125rem;
-  color: #354052;
+  font-size: 0.765625rem;
+  color: #ffffff;
   background-color: rgba(94, 186, 0, 0.9);
   border-radius: 3px; }
 
@@ -2446,7 +2302,7 @@ progress {
 .was-validated .form-select:valid, .form-select.is-valid {
   border-color: #5eba00;
   padding-right: calc(0.75em + 2.3125rem);
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28134, 140, 151, 0.48%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235eba00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28110, 117, 130, 0.44%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235eba00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e");
   background-position: right 0.75rem center, center right 1.75rem;
   background-size: 16px 12px, calc(0.7333333em + 0.375rem) calc(0.7333333em + 0.375rem); }
   .was-validated .form-select:valid:focus, .form-select.is-valid:focus {
@@ -2477,7 +2333,7 @@ progress {
   width: 100%;
   margin-top: 0.25rem;
   font-size: 87.5%;
-  color: #fa4654; }
+  color: #cd201f; }
 
 .invalid-tooltip {
   position: absolute;
@@ -2487,9 +2343,9 @@ progress {
   max-width: 100%;
   padding: 0.25rem 0.5rem;
   margin-top: .1rem;
-  font-size: 0.8203125rem;
+  font-size: 0.765625rem;
   color: #ffffff;
-  background-color: rgba(250, 70, 84, 0.9);
+  background-color: rgba(205, 32, 31, 0.9);
   border-radius: 3px; }
 
 .was-validated :invalid ~ .invalid-feedback,
@@ -2499,48 +2355,48 @@ progress {
   display: block; }
 
 .was-validated .form-control:invalid, .form-control.is-invalid {
-  border-color: #fa4654;
+  border-color: #cd201f;
   padding-right: calc(1.4666667em + 0.75rem);
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fa4654' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23cd201f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right calc(0.3666667em + 0.1875rem) center;
   background-size: calc(0.7333333em + 0.375rem) calc(0.7333333em + 0.375rem); }
   .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
-    border-color: #fa4654;
-    box-shadow: 0 0 0 0.2rem rgba(250, 70, 84, 0.25); }
+    border-color: #cd201f;
+    box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.25); }
 
 .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
   padding-right: calc(1.4666667em + 0.75rem);
   background-position: top calc(0.3666667em + 0.1875rem) right calc(0.3666667em + 0.1875rem); }
 
 .was-validated .form-select:invalid, .form-select.is-invalid {
-  border-color: #fa4654;
+  border-color: #cd201f;
   padding-right: calc(0.75em + 2.3125rem);
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28134, 140, 151, 0.48%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fa4654' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28110, 117, 130, 0.44%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23cd201f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
   background-position: right 0.75rem center, center right 1.75rem;
   background-size: 16px 12px, calc(0.7333333em + 0.375rem) calc(0.7333333em + 0.375rem); }
   .was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {
-    border-color: #fa4654;
-    box-shadow: 0 0 0 0.2rem rgba(250, 70, 84, 0.25); }
+    border-color: #cd201f;
+    box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.25); }
 
 .was-validated .form-check-input:invalid, .form-check-input.is-invalid {
-  border-color: #fa4654; }
+  border-color: #cd201f; }
   .was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked {
-    background-color: #fb7882; }
+    background-color: #e23e3d; }
   .was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus {
-    box-shadow: 0 0 0 0.2rem rgba(250, 70, 84, 0.25); }
+    box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.25); }
   .was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
-    color: #fa4654; }
+    color: #cd201f; }
 
 .form-check-inline .form-check-input ~ .invalid-feedback {
   margin-left: .5em; }
 
 .was-validated .form-file-input:invalid ~ .form-file-label, .form-file-input.is-invalid ~ .form-file-label {
-  border-color: #fa4654; }
+  border-color: #cd201f; }
 
 .was-validated .form-file-input:invalid:focus ~ .form-file-label, .form-file-input.is-invalid:focus ~ .form-file-label {
-  border-color: #fa4654;
-  box-shadow: 0 0 0 0.2rem rgba(250, 70, 84, 0.25); }
+  border-color: #cd201f;
+  box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.25); }
 
 .btn {
   display: inline-block;
@@ -2557,7 +2413,7 @@ progress {
   background-color: transparent;
   border: 1px solid transparent;
   padding: 0.375rem 1rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   border-radius: 3px;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
   @media (prefers-reduced-motion: reduce) {
@@ -2601,32 +2457,32 @@ progress {
 
 .btn-secondary {
   color: #ffffff;
-  background-color: #868c97;
-  border-color: #868c97; }
+  background-color: #6e7582;
+  border-color: #6e7582; }
   .btn-secondary:hover {
     color: #ffffff;
-    background-color: #727985;
-    border-color: #6c727e; }
+    background-color: #5c626d;
+    border-color: #575c66; }
   .btn-secondary:focus, .btn-secondary.focus {
     color: #ffffff;
-    background-color: #727985;
-    border-color: #6c727e;
-    box-shadow: 0 0 0 0.2rem rgba(152, 157, 167, 0.5); }
+    background-color: #5c626d;
+    border-color: #575c66;
+    box-shadow: 0 0 0 0.2rem rgba(132, 138, 149, 0.5); }
   .btn-secondary:active, .btn-secondary.active,
   .show > .btn-secondary.dropdown-toggle {
     color: #ffffff;
-    background-color: #6c727e;
-    border-color: #666c77; }
+    background-color: #575c66;
+    border-color: #51565f; }
     .btn-secondary:active:focus, .btn-secondary.active:focus,
     .show > .btn-secondary.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(152, 157, 167, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(132, 138, 149, 0.5); }
   .btn-secondary:disabled, .btn-secondary.disabled {
     color: #ffffff;
-    background-color: #868c97;
-    border-color: #868c97; }
+    background-color: #6e7582;
+    border-color: #6e7582; }
 
 .btn-success {
-  color: #354052;
+  color: #ffffff;
   background-color: #5eba00;
   border-color: #5eba00; }
   .btn-success:hover {
@@ -2637,7 +2493,7 @@ progress {
     color: #ffffff;
     background-color: #4b9400;
     border-color: #448700;
-    box-shadow: 0 0 0 0.2rem rgba(88, 168, 12, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(118, 196, 38, 0.5); }
   .btn-success:active, .btn-success.active,
   .show > .btn-success.dropdown-toggle {
     color: #ffffff;
@@ -2645,14 +2501,14 @@ progress {
     border-color: #3e7a00; }
     .btn-success:active:focus, .btn-success.active:focus,
     .show > .btn-success.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(88, 168, 12, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(118, 196, 38, 0.5); }
   .btn-success:disabled, .btn-success.disabled {
-    color: #354052;
+    color: #ffffff;
     background-color: #5eba00;
     border-color: #5eba00; }
 
 .btn-info {
-  color: #354052;
+  color: #ffffff;
   background-color: #45aaf2;
   border-color: #45aaf2; }
   .btn-info:hover {
@@ -2663,7 +2519,7 @@ progress {
     color: #ffffff;
     background-color: #219af0;
     border-color: #1594ef;
-    box-shadow: 0 0 0 0.2rem rgba(67, 154, 218, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(97, 183, 244, 0.5); }
   .btn-info:active, .btn-info.active,
   .show > .btn-info.dropdown-toggle {
     color: #ffffff;
@@ -2671,63 +2527,63 @@ progress {
     border-color: #108ee7; }
     .btn-info:active:focus, .btn-info.active:focus,
     .show > .btn-info.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(67, 154, 218, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(97, 183, 244, 0.5); }
   .btn-info:disabled, .btn-info.disabled {
-    color: #354052;
+    color: #ffffff;
     background-color: #45aaf2;
     border-color: #45aaf2; }
 
 .btn-warning {
-  color: #354052;
+  color: #ffffff;
   background-color: #fab005;
   border-color: #fab005; }
   .btn-warning:hover {
-    color: #354052;
+    color: #ffffff;
     background-color: #d59604;
     border-color: #c88d04; }
   .btn-warning:focus, .btn-warning.focus {
-    color: #354052;
+    color: #ffffff;
     background-color: #d59604;
     border-color: #c88d04;
-    box-shadow: 0 0 0 0.2rem rgba(220, 159, 17, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(251, 188, 43, 0.5); }
   .btn-warning:active, .btn-warning.active,
   .show > .btn-warning.dropdown-toggle {
-    color: #354052;
+    color: #ffffff;
     background-color: #c88d04;
     border-color: #bc8404; }
     .btn-warning:active:focus, .btn-warning.active:focus,
     .show > .btn-warning.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(220, 159, 17, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(251, 188, 43, 0.5); }
   .btn-warning:disabled, .btn-warning.disabled {
-    color: #354052;
+    color: #ffffff;
     background-color: #fab005;
     border-color: #fab005; }
 
 .btn-danger {
   color: #ffffff;
-  background-color: #fa4654;
-  border-color: #fa4654; }
+  background-color: #cd201f;
+  border-color: #cd201f; }
   .btn-danger:hover {
     color: #ffffff;
-    background-color: #f92132;
-    border-color: #f91426; }
+    background-color: #ac1b1a;
+    border-color: #a11918; }
   .btn-danger:focus, .btn-danger.focus {
     color: #ffffff;
-    background-color: #f92132;
-    border-color: #f91426;
-    box-shadow: 0 0 0 0.2rem rgba(251, 98, 110, 0.5); }
+    background-color: #ac1b1a;
+    border-color: #a11918;
+    box-shadow: 0 0 0 0.2rem rgba(213, 65, 65, 0.5); }
   .btn-danger:active, .btn-danger.active,
   .show > .btn-danger.dropdown-toggle {
     color: #ffffff;
-    background-color: #f91426;
-    border-color: #f8081b; }
+    background-color: #a11918;
+    border-color: #961717; }
     .btn-danger:active:focus, .btn-danger.active:focus,
     .show > .btn-danger.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(251, 98, 110, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(213, 65, 65, 0.5); }
   .btn-danger:disabled, .btn-danger.disabled {
     color: #ffffff;
-    background-color: #fa4654;
-    border-color: #fa4654; }
+    background-color: #cd201f;
+    border-color: #cd201f; }
 
 .btn-light {
   color: #354052;
@@ -2801,35 +2657,35 @@ progress {
     background-color: transparent; }
 
 .btn-outline-secondary {
-  color: #868c97;
-  border-color: #868c97; }
+  color: #6e7582;
+  border-color: #6e7582; }
   .btn-outline-secondary:hover {
     color: #ffffff;
-    background-color: #868c97;
-    border-color: #868c97; }
+    background-color: #6e7582;
+    border-color: #6e7582; }
   .btn-outline-secondary:focus, .btn-outline-secondary.focus {
-    box-shadow: 0 0 0 0.2rem rgba(134, 140, 151, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(110, 117, 130, 0.5); }
   .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show {
     color: #ffffff;
-    background-color: #868c97;
-    border-color: #868c97; }
+    background-color: #6e7582;
+    border-color: #6e7582; }
     .btn-outline-secondary:active:focus, .btn-outline-secondary.active:focus, .btn-outline-secondary.dropdown-toggle.show:focus {
-      box-shadow: 0 0 0 0.2rem rgba(134, 140, 151, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(110, 117, 130, 0.5); }
   .btn-outline-secondary:disabled, .btn-outline-secondary.disabled {
-    color: #868c97;
+    color: #6e7582;
     background-color: transparent; }
 
 .btn-outline-success {
   color: #5eba00;
   border-color: #5eba00; }
   .btn-outline-success:hover {
-    color: #354052;
+    color: #ffffff;
     background-color: #5eba00;
     border-color: #5eba00; }
   .btn-outline-success:focus, .btn-outline-success.focus {
     box-shadow: 0 0 0 0.2rem rgba(94, 186, 0, 0.5); }
   .btn-outline-success:active, .btn-outline-success.active, .btn-outline-success.dropdown-toggle.show {
-    color: #354052;
+    color: #ffffff;
     background-color: #5eba00;
     border-color: #5eba00; }
     .btn-outline-success:active:focus, .btn-outline-success.active:focus, .btn-outline-success.dropdown-toggle.show:focus {
@@ -2842,13 +2698,13 @@ progress {
   color: #45aaf2;
   border-color: #45aaf2; }
   .btn-outline-info:hover {
-    color: #354052;
+    color: #ffffff;
     background-color: #45aaf2;
     border-color: #45aaf2; }
   .btn-outline-info:focus, .btn-outline-info.focus {
     box-shadow: 0 0 0 0.2rem rgba(69, 170, 242, 0.5); }
   .btn-outline-info:active, .btn-outline-info.active, .btn-outline-info.dropdown-toggle.show {
-    color: #354052;
+    color: #ffffff;
     background-color: #45aaf2;
     border-color: #45aaf2; }
     .btn-outline-info:active:focus, .btn-outline-info.active:focus, .btn-outline-info.dropdown-toggle.show:focus {
@@ -2861,13 +2717,13 @@ progress {
   color: #fab005;
   border-color: #fab005; }
   .btn-outline-warning:hover {
-    color: #354052;
+    color: #ffffff;
     background-color: #fab005;
     border-color: #fab005; }
   .btn-outline-warning:focus, .btn-outline-warning.focus {
     box-shadow: 0 0 0 0.2rem rgba(250, 176, 5, 0.5); }
   .btn-outline-warning:active, .btn-outline-warning.active, .btn-outline-warning.dropdown-toggle.show {
-    color: #354052;
+    color: #ffffff;
     background-color: #fab005;
     border-color: #fab005; }
     .btn-outline-warning:active:focus, .btn-outline-warning.active:focus, .btn-outline-warning.dropdown-toggle.show:focus {
@@ -2877,22 +2733,22 @@ progress {
     background-color: transparent; }
 
 .btn-outline-danger {
-  color: #fa4654;
-  border-color: #fa4654; }
+  color: #cd201f;
+  border-color: #cd201f; }
   .btn-outline-danger:hover {
     color: #ffffff;
-    background-color: #fa4654;
-    border-color: #fa4654; }
+    background-color: #cd201f;
+    border-color: #cd201f; }
   .btn-outline-danger:focus, .btn-outline-danger.focus {
-    box-shadow: 0 0 0 0.2rem rgba(250, 70, 84, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.5); }
   .btn-outline-danger:active, .btn-outline-danger.active, .btn-outline-danger.dropdown-toggle.show {
     color: #ffffff;
-    background-color: #fa4654;
-    border-color: #fa4654; }
+    background-color: #cd201f;
+    border-color: #cd201f; }
     .btn-outline-danger:active:focus, .btn-outline-danger.active:focus, .btn-outline-danger.dropdown-toggle.show:focus {
-      box-shadow: 0 0 0 0.2rem rgba(250, 70, 84, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.5); }
   .btn-outline-danger:disabled, .btn-outline-danger.disabled {
-    color: #fa4654;
+    color: #cd201f;
     background-color: transparent; }
 
 .btn-outline-light {
@@ -2952,7 +2808,7 @@ progress {
 
 .btn-sm, .btn-group-sm > .btn {
   padding: 0.125rem 0.5rem;
-  font-size: 0.8125rem;
+  font-size: 0.75rem;
   border-radius: 0.2rem; }
 
 .btn-block {
@@ -2991,11 +2847,12 @@ progress {
   .dropdown-toggle:after {
     content: "";
     display: inline-block;
-    vertical-align: 0.272em;
-    width: 0.32em;
-    height: 0.32em;
+    vertical-align: 0.306em;
+    width: 0.36em;
+    height: 0.36em;
     border-bottom: 1px solid;
     border-left: 1px solid;
+    margin-right: .1em;
     margin-left: 0.4em;
     transform: rotate(-45deg); }
 
@@ -3008,13 +2865,13 @@ progress {
   min-width: 14rem;
   padding: 0.5rem 0;
   margin: 1px 0 0;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   color: #354052;
   text-align: left;
   list-style: none;
   background-color: #ffffff;
   background-clip: padding-box;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 3px; }
 
 .dropdown-menu-left {
@@ -3066,11 +2923,12 @@ progress {
 .dropup .dropdown-toggle:after {
   content: "";
   display: inline-block;
-  vertical-align: 0.272em;
-  width: 0.32em;
-  height: 0.32em;
+  vertical-align: 0.306em;
+  width: 0.36em;
+  height: 0.36em;
   border-bottom: 1px solid;
   border-left: 1px solid;
+  margin-right: .1em;
   margin-left: 0.4em;
   transform: rotate(135deg); }
 
@@ -3084,11 +2942,12 @@ progress {
 .dropright .dropdown-toggle:after {
   content: "";
   display: inline-block;
-  vertical-align: 0.272em;
-  width: 0.32em;
-  height: 0.32em;
+  vertical-align: 0.306em;
+  width: 0.36em;
+  height: 0.36em;
   border-bottom: 1px solid;
   border-left: 1px solid;
+  margin-right: .1em;
   margin-left: 0.4em;
   transform: rotate(-135deg); }
 
@@ -3105,11 +2964,12 @@ progress {
 .dropleft .dropdown-toggle:before {
   content: "";
   display: inline-block;
-  vertical-align: 0.272em;
-  width: 0.32em;
-  height: 0.32em;
+  vertical-align: 0.306em;
+  width: 0.36em;
+  height: 0.36em;
   border-bottom: 1px solid;
   border-left: 1px solid;
+  margin-right: .1em;
   margin-right: 0.4em;
   transform: rotate(45deg); }
 
@@ -3127,7 +2987,7 @@ progress {
   height: 0;
   margin: 0.5rem 0;
   overflow: hidden;
-  border-top: 1px solid rgba(134, 140, 151, 0.24); }
+  border-top: 1px solid rgba(110, 117, 130, 0.2); }
 
 .dropdown-item {
   display: block;
@@ -3142,7 +3002,7 @@ progress {
   border: 0; }
   .dropdown-item:hover, .dropdown-item:focus {
     color: inherit;
-    background-color: rgba(134, 140, 151, 0.06); }
+    background-color: rgba(110, 117, 130, 0.06); }
   .dropdown-item.active, .dropdown-item:active {
     color: #206bc4;
     text-decoration: none;
@@ -3159,7 +3019,7 @@ progress {
   display: block;
   padding: 0.5rem 1rem;
   margin-bottom: 0;
-  font-size: 0.8203125rem;
+  font-size: 0.765625rem;
   color: #a8aeb7;
   white-space: nowrap; }
 
@@ -3262,7 +3122,7 @@ progress {
 
 .nav-link {
   display: block;
-  padding: 0.5rem 1rem; }
+  padding: 0.25rem 0.75rem; }
   .nav-link.disabled {
     color: #a8aeb7;
     pointer-events: none;
@@ -3320,8 +3180,8 @@ progress {
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem; }
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem; }
   .navbar > .container,
   .navbar > .container-fluid, .navbar > .container-sm, .navbar > .container-md, .navbar > .container-lg, .navbar > .container-xl {
     display: flex;
@@ -3330,10 +3190,10 @@ progress {
     justify-content: space-between; }
 
 .navbar-brand {
-  padding-top: 0.3125rem;
-  padding-bottom: 0.3125rem;
-  margin-right: 1rem;
-  font-size: 1.171875rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  margin-right: 0;
+  font-size: 1.125rem;
   white-space: nowrap; }
   .navbar-brand:hover, .navbar-brand:focus {
     text-decoration: none; }
@@ -3351,15 +3211,15 @@ progress {
     position: static; }
 
 .navbar-text {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem; }
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem; }
 
 .navbar-collapse {
   align-items: center;
   width: 100%; }
 
 .navbar-toggler {
-  padding: 0.75rem 0.75rem;
+  padding: 0 0;
   font-size: 1rem;
   line-height: 1;
   background-color: transparent;
@@ -3374,7 +3234,7 @@ progress {
   .navbar-toggler:focus {
     text-decoration: none;
     outline: 0;
-    box-shadow: 0 0 0 0.2rem; }
+    box-shadow: 0 0 0 0; }
 
 .navbar-toggler-icon {
   display: inline-block;
@@ -3465,36 +3325,36 @@ progress {
     display: none; }
 
 .navbar-light .navbar-brand {
-  color: rgba(0, 0, 0, 0.9); }
+  color: #354052; }
   .navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
-    color: rgba(0, 0, 0, 0.9); }
+    color: #354052; }
 
 .navbar-light .navbar-nav .nav-link {
-  color: rgba(0, 0, 0, 0.55); }
+  color: rgba(53, 64, 82, 0.72); }
   .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
     color: rgba(0, 0, 0, 0.7); }
   .navbar-light .navbar-nav .nav-link.disabled {
-    color: rgba(0, 0, 0, 0.3); }
+    color: rgba(53, 64, 82, 0.3); }
 
 .navbar-light .navbar-nav .show > .nav-link,
 .navbar-light .navbar-nav .active > .nav-link,
 .navbar-light .navbar-nav .nav-link.show,
 .navbar-light .navbar-nav .nav-link.active {
-  color: rgba(0, 0, 0, 0.9); }
+  color: #354052; }
 
 .navbar-light .navbar-toggler {
-  color: rgba(0, 0, 0, 0.55);
+  color: rgba(53, 64, 82, 0.72);
   border-color: rgba(0, 0, 0, 0.1); }
 
 .navbar-light .navbar-toggler-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2853, 64, 82, 0.72%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
 
 .navbar-light .navbar-text {
-  color: rgba(0, 0, 0, 0.55); }
+  color: rgba(53, 64, 82, 0.72); }
   .navbar-light .navbar-text a,
   .navbar-light .navbar-text a:hover,
   .navbar-light .navbar-text a:focus {
-    color: rgba(0, 0, 0, 0.9); }
+    color: #354052; }
 
 .navbar-dark .navbar-brand {
   color: #ffffff; }
@@ -3502,11 +3362,11 @@ progress {
     color: #ffffff; }
 
 .navbar-dark .navbar-nav .nav-link {
-  color: rgba(255, 255, 255, 0.55); }
+  color: rgba(255, 255, 255, 0.72); }
   .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
     color: rgba(255, 255, 255, 0.75); }
   .navbar-dark .navbar-nav .nav-link.disabled {
-    color: rgba(255, 255, 255, 0.25); }
+    color: rgba(255, 255, 255, 0.3); }
 
 .navbar-dark .navbar-nav .show > .nav-link,
 .navbar-dark .navbar-nav .active > .nav-link,
@@ -3515,14 +3375,14 @@ progress {
   color: #ffffff; }
 
 .navbar-dark .navbar-toggler {
-  color: rgba(255, 255, 255, 0.55);
+  color: rgba(255, 255, 255, 0.72);
   border-color: rgba(255, 255, 255, 0.1); }
 
 .navbar-dark .navbar-toggler-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.72%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
 
 .navbar-dark .navbar-text {
-  color: rgba(255, 255, 255, 0.55); }
+  color: rgba(255, 255, 255, 0.72); }
   .navbar-dark .navbar-text a,
   .navbar-dark .navbar-text a:hover,
   .navbar-dark .navbar-text a:focus {
@@ -3536,7 +3396,7 @@ progress {
   word-wrap: break-word;
   background-color: #ffffff;
   background-clip: border-box;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 3px; }
   .card > hr, .card > .hr {
     margin-right: 0;
@@ -3572,7 +3432,7 @@ progress {
   padding: 0.75rem 1.25rem;
   margin-bottom: 0;
   background-color: rgba(53, 64, 82, 0.024);
-  border-bottom: 1px solid rgba(134, 140, 151, 0.24); }
+  border-bottom: 1px solid rgba(110, 117, 130, 0.2); }
   .card-header:first-child {
     border-radius: 2px 2px 0 0; }
   .card-header + .list-group .list-group-item:first-child {
@@ -3581,7 +3441,7 @@ progress {
 .card-footer {
   padding: 0.75rem 1.25rem;
   background-color: rgba(53, 64, 82, 0.024);
-  border-top: 1px solid rgba(134, 140, 151, 0.24); }
+  border-top: 1px solid rgba(110, 117, 130, 0.2); }
   .card-footer:last-child {
     border-radius: 0 0 2px 2px; }
 
@@ -3695,7 +3555,7 @@ progress {
 .page-link {
   position: relative;
   display: block;
-  color: #868c97;
+  color: #6e7582;
   background-color: transparent;
   border: 0 solid #e9ecf1; }
   .page-link:hover {
@@ -3718,7 +3578,7 @@ progress {
   border-color: #206bc4; }
 
 .page-item.disabled .page-link {
-  color: rgba(134, 140, 151, 0.5);
+  color: rgba(110, 117, 130, 0.5);
   pointer-events: none;
   background-color: transparent;
   border-color: #e9ecf1; }
@@ -3736,7 +3596,7 @@ progress {
 
 .pagination-lg .page-link {
   padding: 0.75rem 1.5rem;
-  font-size: 1.171875rem; }
+  font-size: 1.09375rem; }
 
 .pagination-lg .page-item:first-child .page-link {
   border-top-left-radius: 0.3rem;
@@ -3748,7 +3608,7 @@ progress {
 
 .pagination-sm .page-link {
   padding: 0.25rem 0.5rem;
-  font-size: 0.8203125rem; }
+  font-size: 0.765625rem; }
 
 .pagination-sm .page-item:first-child .page-link {
   border-top-left-radius: 0.2rem;
@@ -3760,9 +3620,9 @@ progress {
 
 .badge {
   display: inline-block;
-  padding: 0.25em 0.5em;
-  font-size: 0.75em;
-  font-weight: 600;
+  padding: 0.125rem 0.25rem;
+  font-size: 0.625rem;
+  font-weight: 500;
   line-height: 1;
   color: #ffffff;
   text-align: center;
@@ -3787,7 +3647,7 @@ progress {
   color: inherit; }
 
 .alert-link {
-  font-weight: 600; }
+  font-weight: 500; }
 
 .alert-dismissible {
   padding-right: 4rem; }
@@ -3806,11 +3666,11 @@ progress {
     color: black; }
 
 .alert-secondary {
-  color: #1b1c1e;
-  background-color: #e7e8ea;
-  border-color: #cfd1d5; }
+  color: #16171a;
+  background-color: #e2e3e6;
+  border-color: #c5c8cd; }
   .alert-secondary .alert-link {
-    color: #030303; }
+    color: black; }
 
 .alert-success {
   color: #132500;
@@ -3834,11 +3694,11 @@ progress {
     color: black; }
 
 .alert-danger {
-  color: #320e11;
-  background-color: #fedadd;
-  border-color: #fdb5bb; }
+  color: #290606;
+  background-color: #f5d2d2;
+  border-color: #eba6a5; }
   .alert-danger .alert-link {
-    color: #0a0303; }
+    color: black; }
 
 .alert-light {
   color: #313132;
@@ -3866,7 +3726,7 @@ progress {
   display: flex;
   height: 0.5rem;
   overflow: hidden;
-  font-size: 0.703125rem;
+  font-size: 0.65625rem;
   background-color: rgba(176, 181, 190, 0.24);
   border-radius: 3px; }
 
@@ -3920,8 +3780,8 @@ progress {
   display: block;
   padding: 0.5rem 0.75rem;
   margin-bottom: 0;
-  background-color: #ffffff;
-  border: 1px solid rgba(134, 140, 151, 0.24); }
+  background-color: inherit;
+  border: 1px solid rgba(110, 117, 130, 0.2); }
   .list-group-item:first-child {
     border-top-left-radius: 3px;
     border-top-right-radius: 3px; }
@@ -3931,7 +3791,7 @@ progress {
   .list-group-item.disabled, .list-group-item:disabled {
     color: #a8aeb7;
     pointer-events: none;
-    background-color: #ffffff; }
+    background-color: inherit; }
   .list-group-item.active {
     z-index: 2;
     color: #ffffff;
@@ -4054,15 +3914,15 @@ progress {
     border-color: #0d2b4e; }
 
 .list-group-item-secondary {
-  color: #36383c;
-  background-color: #f3f4f5; }
+  color: #2c2f34;
+  background-color: #f1f1f3; }
   .list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
-    color: #36383c;
-    background-color: #e5e7e9; }
+    color: #2c2f34;
+    background-color: #e3e3e7; }
   .list-group-item-secondary.list-group-item-action.active {
     color: #ffffff;
-    background-color: #36383c;
-    border-color: #36383c; }
+    background-color: #2c2f34;
+    border-color: #2c2f34; }
 
 .list-group-item-success {
   color: #264a00;
@@ -4098,15 +3958,15 @@ progress {
     border-color: #644602; }
 
 .list-group-item-danger {
-  color: #641c22;
-  background-color: #ffedee; }
+  color: #520d0c;
+  background-color: #fae9e9; }
   .list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus {
-    color: #641c22;
-    background-color: #ffd4d6; }
+    color: #520d0c;
+    background-color: #f5d4d4; }
   .list-group-item-danger.list-group-item-action.active {
     color: #ffffff;
-    background-color: #641c22;
-    border-color: #641c22; }
+    background-color: #520d0c;
+    border-color: #520d0c; }
 
 .list-group-item-light {
   color: #626364;
@@ -4162,7 +4022,7 @@ button.close {
   font-size: 0.875rem;
   background-color: rgba(255, 255, 255, 0.85);
   background-clip: padding-box;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
@@ -4182,7 +4042,7 @@ button.close {
   display: flex;
   align-items: center;
   padding: 0.25rem 0.75rem;
-  color: #868c97;
+  color: #6e7582;
   background-color: rgba(255, 255, 255, 0.85);
   background-clip: padding-box;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
@@ -4246,7 +4106,7 @@ button.close {
   pointer-events: auto;
   background-color: #fbfbfb;
   background-clip: padding-box;
-  border: 1px solid rgba(134, 140, 151, 0.12);
+  border: 1px solid rgba(110, 117, 130, 0.1);
   border-radius: 3px;
   outline: 0; }
 
@@ -4268,7 +4128,7 @@ button.close {
   align-items: flex-start;
   justify-content: space-between;
   padding: 1.5rem;
-  border-bottom: 1px solid rgba(134, 140, 151, 0.12);
+  border-bottom: 1px solid rgba(110, 117, 130, 0.1);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px; }
   .modal-header .close {
@@ -4277,7 +4137,7 @@ button.close {
 
 .modal-title {
   margin-bottom: 0;
-  line-height: 1.6; }
+  line-height: 1.7142857; }
 
 .modal-body {
   position: relative;
@@ -4290,7 +4150,7 @@ button.close {
   align-items: center;
   justify-content: flex-end;
   padding: 1.125rem;
-  border-top: 0 solid rgba(134, 140, 151, 0.12);
+  border-top: 0 solid rgba(110, 117, 130, 0.1);
   border-bottom-right-radius: 2px;
   border-bottom-left-radius: 2px; }
   .modal-footer > * {
@@ -4328,10 +4188,10 @@ button.close {
   z-index: 1070;
   display: block;
   margin: 0;
-  font-family: "Source Sans Pro", -apple-system, blinkmacsystemfont, segoe ui, helvetica, arial, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol;
+  font-family: "Ubuntu", system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
   font-style: normal;
   font-weight: 400;
-  line-height: 1.6;
+  line-height: 1.7142857;
   text-align: left;
   text-align: start;
   text-decoration: none;
@@ -4342,7 +4202,7 @@ button.close {
   word-spacing: normal;
   white-space: normal;
   line-break: auto;
-  font-size: 0.8203125rem;
+  font-size: 0.765625rem;
   word-wrap: break-word;
   opacity: 0; }
   .tooltip.show {
@@ -4413,10 +4273,10 @@ button.close {
   z-index: 1060;
   display: block;
   max-width: 276px;
-  font-family: "Source Sans Pro", -apple-system, blinkmacsystemfont, segoe ui, helvetica, arial, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol;
+  font-family: "Ubuntu", system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
   font-style: normal;
   font-weight: 400;
-  line-height: 1.6;
+  line-height: 1.7142857;
   text-align: left;
   text-align: start;
   text-decoration: none;
@@ -4427,11 +4287,11 @@ button.close {
   word-spacing: normal;
   white-space: normal;
   line-break: auto;
-  font-size: 0.8203125rem;
+  font-size: 0.765625rem;
   word-wrap: break-word;
   background-color: #ffffff;
   background-clip: padding-box;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 0.3rem; }
   .popover .popover-arrow {
     position: absolute;
@@ -4453,7 +4313,7 @@ button.close {
     .bs-popover-top > .popover-arrow::before, .bs-popover-auto[x-placement^="top"] > .popover-arrow::before {
       bottom: 0;
       border-width: 0.5rem 0.5rem 0;
-      border-top-color: rgba(134, 140, 151, 0.29); }
+      border-top-color: rgba(110, 117, 130, 0.25); }
     .bs-popover-top > .popover-arrow::after, .bs-popover-auto[x-placement^="top"] > .popover-arrow::after {
       bottom: 1px;
       border-width: 0.5rem 0.5rem 0;
@@ -4469,7 +4329,7 @@ button.close {
     .bs-popover-right > .popover-arrow::before, .bs-popover-auto[x-placement^="right"] > .popover-arrow::before {
       left: 0;
       border-width: 0.5rem 0.5rem 0.5rem 0;
-      border-right-color: rgba(134, 140, 151, 0.29); }
+      border-right-color: rgba(110, 117, 130, 0.25); }
     .bs-popover-right > .popover-arrow::after, .bs-popover-auto[x-placement^="right"] > .popover-arrow::after {
       left: 1px;
       border-width: 0.5rem 0.5rem 0.5rem 0;
@@ -4482,7 +4342,7 @@ button.close {
     .bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[x-placement^="bottom"] > .popover-arrow::before {
       top: 0;
       border-width: 0 0.5rem 0.5rem 0.5rem;
-      border-bottom-color: rgba(134, 140, 151, 0.29); }
+      border-bottom-color: rgba(110, 117, 130, 0.25); }
     .bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[x-placement^="bottom"] > .popover-arrow::after {
       top: 1px;
       border-width: 0 0.5rem 0.5rem 0.5rem;
@@ -4507,7 +4367,7 @@ button.close {
     .bs-popover-left > .popover-arrow::before, .bs-popover-auto[x-placement^="left"] > .popover-arrow::before {
       right: 0;
       border-width: 0.5rem 0 0.5rem 0.5rem;
-      border-left-color: rgba(134, 140, 151, 0.29); }
+      border-left-color: rgba(110, 117, 130, 0.25); }
     .bs-popover-left > .popover-arrow::after, .bs-popover-auto[x-placement^="left"] > .popover-arrow::after {
       right: 1px;
       border-width: 0.5rem 0 0.5rem 0.5rem;
@@ -4516,7 +4376,7 @@ button.close {
 .popover-header {
   padding: 0.5rem 0.75rem;
   margin-bottom: 0;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   background-color: #f7f7f7;
   border-bottom: 1px solid #ebebeb;
   border-top-left-radius: calc(0.3rem - 1px);
@@ -4742,9 +4602,9 @@ button.close {
     color: #154782; }
 
 .link-secondary {
-  color: #868c97; }
+  color: #6e7582; }
   .link-secondary:hover, .link-secondary:focus {
-    color: #606670; }
+    color: #4b5059; }
 
 .link-success {
   color: #5eba00; }
@@ -4762,9 +4622,9 @@ button.close {
     color: #af7b04; }
 
 .link-danger {
-  color: #fa4654; }
+  color: #cd201f; }
   .link-danger:hover, .link-danger:focus {
-    color: #ed0618; }
+    color: #8b1615; }
 
 .link-light {
   color: #f5f7fb; }
@@ -4969,46 +4829,46 @@ button.close {
   position: sticky !important; }
 
 .border {
-  border: 1px solid rgba(134, 140, 151, 0.24) !important; }
+  border: 1px solid rgba(110, 117, 130, 0.2) !important; }
 
 .border-wide {
-  border: 2px solid rgba(134, 140, 151, 0.24) !important; }
+  border: 2px solid rgba(110, 117, 130, 0.2) !important; }
 
 .border-0 {
   border: 0 !important; }
 
 .border-top {
-  border-top: 1px solid rgba(134, 140, 151, 0.24) !important; }
+  border-top: 1px solid rgba(110, 117, 130, 0.2) !important; }
 
 .border-top-wide {
-  border-top: 2px solid rgba(134, 140, 151, 0.24) !important; }
+  border-top: 2px solid rgba(110, 117, 130, 0.2) !important; }
 
 .border-top-0 {
   border-top: 0 !important; }
 
 .border-right {
-  border-right: 1px solid rgba(134, 140, 151, 0.24) !important; }
+  border-right: 1px solid rgba(110, 117, 130, 0.2) !important; }
 
 .border-right-wide {
-  border-right: 2px solid rgba(134, 140, 151, 0.24) !important; }
+  border-right: 2px solid rgba(110, 117, 130, 0.2) !important; }
 
 .border-right-0 {
   border-right: 0 !important; }
 
 .border-bottom {
-  border-bottom: 1px solid rgba(134, 140, 151, 0.24) !important; }
+  border-bottom: 1px solid rgba(110, 117, 130, 0.2) !important; }
 
 .border-bottom-wide {
-  border-bottom: 2px solid rgba(134, 140, 151, 0.24) !important; }
+  border-bottom: 2px solid rgba(110, 117, 130, 0.2) !important; }
 
 .border-bottom-0 {
   border-bottom: 0 !important; }
 
 .border-left {
-  border-left: 1px solid rgba(134, 140, 151, 0.24) !important; }
+  border-left: 1px solid rgba(110, 117, 130, 0.2) !important; }
 
 .border-left-wide {
-  border-left: 2px solid rgba(134, 140, 151, 0.24) !important; }
+  border-left: 2px solid rgba(110, 117, 130, 0.2) !important; }
 
 .border-left-0 {
   border-left: 0 !important; }
@@ -5017,7 +4877,7 @@ button.close {
   border-color: #206bc4 !important; }
 
 .border-secondary {
-  border-color: #868c97 !important; }
+  border-color: #6e7582 !important; }
 
 .border-success {
   border-color: #5eba00 !important; }
@@ -5029,7 +4889,7 @@ button.close {
   border-color: #fab005 !important; }
 
 .border-danger {
-  border-color: #fa4654 !important; }
+  border-color: #cd201f !important; }
 
 .border-light {
   border-color: #f5f7fb !important; }
@@ -5236,19 +5096,13 @@ button.close {
   margin: 1rem !important; }
 
 .m-4 {
-  margin: 1.25rem !important; }
+  margin: 1.5rem !important; }
 
 .m-5 {
-  margin: 2rem !important; }
-
-.m-6 {
   margin: 3rem !important; }
 
-.m-7 {
-  margin: 6rem !important; }
-
-.m-8 {
-  margin: 9rem !important; }
+.m-6 {
+  margin: 4.5rem !important; }
 
 .m-auto {
   margin: auto !important; }
@@ -5270,24 +5124,16 @@ button.close {
   margin-left: 1rem !important; }
 
 .mx-4 {
-  margin-right: 1.25rem !important;
-  margin-left: 1.25rem !important; }
+  margin-right: 1.5rem !important;
+  margin-left: 1.5rem !important; }
 
 .mx-5 {
-  margin-right: 2rem !important;
-  margin-left: 2rem !important; }
-
-.mx-6 {
   margin-right: 3rem !important;
   margin-left: 3rem !important; }
 
-.mx-7 {
-  margin-right: 6rem !important;
-  margin-left: 6rem !important; }
-
-.mx-8 {
-  margin-right: 9rem !important;
-  margin-left: 9rem !important; }
+.mx-6 {
+  margin-right: 4.5rem !important;
+  margin-left: 4.5rem !important; }
 
 .mx-auto {
   margin-right: auto !important;
@@ -5310,24 +5156,16 @@ button.close {
   margin-bottom: 1rem !important; }
 
 .my-4 {
-  margin-top: 1.25rem !important;
-  margin-bottom: 1.25rem !important; }
+  margin-top: 1.5rem !important;
+  margin-bottom: 1.5rem !important; }
 
 .my-5 {
-  margin-top: 2rem !important;
-  margin-bottom: 2rem !important; }
-
-.my-6 {
   margin-top: 3rem !important;
   margin-bottom: 3rem !important; }
 
-.my-7 {
-  margin-top: 6rem !important;
-  margin-bottom: 6rem !important; }
-
-.my-8 {
-  margin-top: 9rem !important;
-  margin-bottom: 9rem !important; }
+.my-6 {
+  margin-top: 4.5rem !important;
+  margin-bottom: 4.5rem !important; }
 
 .my-auto {
   margin-top: auto !important;
@@ -5346,19 +5184,13 @@ button.close {
   margin-top: 1rem !important; }
 
 .mt-4 {
-  margin-top: 1.25rem !important; }
+  margin-top: 1.5rem !important; }
 
 .mt-5 {
-  margin-top: 2rem !important; }
-
-.mt-6 {
   margin-top: 3rem !important; }
 
-.mt-7 {
-  margin-top: 6rem !important; }
-
-.mt-8 {
-  margin-top: 9rem !important; }
+.mt-6 {
+  margin-top: 4.5rem !important; }
 
 .mt-auto {
   margin-top: auto !important; }
@@ -5376,19 +5208,13 @@ button.close {
   margin-right: 1rem !important; }
 
 .mr-4 {
-  margin-right: 1.25rem !important; }
+  margin-right: 1.5rem !important; }
 
 .mr-5 {
-  margin-right: 2rem !important; }
-
-.mr-6 {
   margin-right: 3rem !important; }
 
-.mr-7 {
-  margin-right: 6rem !important; }
-
-.mr-8 {
-  margin-right: 9rem !important; }
+.mr-6 {
+  margin-right: 4.5rem !important; }
 
 .mr-auto {
   margin-right: auto !important; }
@@ -5406,19 +5232,13 @@ button.close {
   margin-bottom: 1rem !important; }
 
 .mb-4 {
-  margin-bottom: 1.25rem !important; }
+  margin-bottom: 1.5rem !important; }
 
 .mb-5 {
-  margin-bottom: 2rem !important; }
-
-.mb-6 {
   margin-bottom: 3rem !important; }
 
-.mb-7 {
-  margin-bottom: 6rem !important; }
-
-.mb-8 {
-  margin-bottom: 9rem !important; }
+.mb-6 {
+  margin-bottom: 4.5rem !important; }
 
 .mb-auto {
   margin-bottom: auto !important; }
@@ -5436,19 +5256,13 @@ button.close {
   margin-left: 1rem !important; }
 
 .ml-4 {
-  margin-left: 1.25rem !important; }
+  margin-left: 1.5rem !important; }
 
 .ml-5 {
-  margin-left: 2rem !important; }
-
-.ml-6 {
   margin-left: 3rem !important; }
 
-.ml-7 {
-  margin-left: 6rem !important; }
-
-.ml-8 {
-  margin-left: 9rem !important; }
+.ml-6 {
+  margin-left: 4.5rem !important; }
 
 .ml-auto {
   margin-left: auto !important; }
@@ -5463,19 +5277,13 @@ button.close {
   margin: -1rem !important; }
 
 .m-n4 {
-  margin: -1.25rem !important; }
+  margin: -1.5rem !important; }
 
 .m-n5 {
-  margin: -2rem !important; }
-
-.m-n6 {
   margin: -3rem !important; }
 
-.m-n7 {
-  margin: -6rem !important; }
-
-.m-n8 {
-  margin: -9rem !important; }
+.m-n6 {
+  margin: -4.5rem !important; }
 
 .mx-n1 {
   margin-right: -0.25rem !important;
@@ -5490,24 +5298,16 @@ button.close {
   margin-left: -1rem !important; }
 
 .mx-n4 {
-  margin-right: -1.25rem !important;
-  margin-left: -1.25rem !important; }
+  margin-right: -1.5rem !important;
+  margin-left: -1.5rem !important; }
 
 .mx-n5 {
-  margin-right: -2rem !important;
-  margin-left: -2rem !important; }
-
-.mx-n6 {
   margin-right: -3rem !important;
   margin-left: -3rem !important; }
 
-.mx-n7 {
-  margin-right: -6rem !important;
-  margin-left: -6rem !important; }
-
-.mx-n8 {
-  margin-right: -9rem !important;
-  margin-left: -9rem !important; }
+.mx-n6 {
+  margin-right: -4.5rem !important;
+  margin-left: -4.5rem !important; }
 
 .my-n1 {
   margin-top: -0.25rem !important;
@@ -5522,24 +5322,16 @@ button.close {
   margin-bottom: -1rem !important; }
 
 .my-n4 {
-  margin-top: -1.25rem !important;
-  margin-bottom: -1.25rem !important; }
+  margin-top: -1.5rem !important;
+  margin-bottom: -1.5rem !important; }
 
 .my-n5 {
-  margin-top: -2rem !important;
-  margin-bottom: -2rem !important; }
-
-.my-n6 {
   margin-top: -3rem !important;
   margin-bottom: -3rem !important; }
 
-.my-n7 {
-  margin-top: -6rem !important;
-  margin-bottom: -6rem !important; }
-
-.my-n8 {
-  margin-top: -9rem !important;
-  margin-bottom: -9rem !important; }
+.my-n6 {
+  margin-top: -4.5rem !important;
+  margin-bottom: -4.5rem !important; }
 
 .mt-n1 {
   margin-top: -0.25rem !important; }
@@ -5551,19 +5343,13 @@ button.close {
   margin-top: -1rem !important; }
 
 .mt-n4 {
-  margin-top: -1.25rem !important; }
+  margin-top: -1.5rem !important; }
 
 .mt-n5 {
-  margin-top: -2rem !important; }
-
-.mt-n6 {
   margin-top: -3rem !important; }
 
-.mt-n7 {
-  margin-top: -6rem !important; }
-
-.mt-n8 {
-  margin-top: -9rem !important; }
+.mt-n6 {
+  margin-top: -4.5rem !important; }
 
 .mr-n1 {
   margin-right: -0.25rem !important; }
@@ -5575,19 +5361,13 @@ button.close {
   margin-right: -1rem !important; }
 
 .mr-n4 {
-  margin-right: -1.25rem !important; }
+  margin-right: -1.5rem !important; }
 
 .mr-n5 {
-  margin-right: -2rem !important; }
-
-.mr-n6 {
   margin-right: -3rem !important; }
 
-.mr-n7 {
-  margin-right: -6rem !important; }
-
-.mr-n8 {
-  margin-right: -9rem !important; }
+.mr-n6 {
+  margin-right: -4.5rem !important; }
 
 .mb-n1 {
   margin-bottom: -0.25rem !important; }
@@ -5599,19 +5379,13 @@ button.close {
   margin-bottom: -1rem !important; }
 
 .mb-n4 {
-  margin-bottom: -1.25rem !important; }
+  margin-bottom: -1.5rem !important; }
 
 .mb-n5 {
-  margin-bottom: -2rem !important; }
-
-.mb-n6 {
   margin-bottom: -3rem !important; }
 
-.mb-n7 {
-  margin-bottom: -6rem !important; }
-
-.mb-n8 {
-  margin-bottom: -9rem !important; }
+.mb-n6 {
+  margin-bottom: -4.5rem !important; }
 
 .ml-n1 {
   margin-left: -0.25rem !important; }
@@ -5623,19 +5397,13 @@ button.close {
   margin-left: -1rem !important; }
 
 .ml-n4 {
-  margin-left: -1.25rem !important; }
+  margin-left: -1.5rem !important; }
 
 .ml-n5 {
-  margin-left: -2rem !important; }
-
-.ml-n6 {
   margin-left: -3rem !important; }
 
-.ml-n7 {
-  margin-left: -6rem !important; }
-
-.ml-n8 {
-  margin-left: -9rem !important; }
+.ml-n6 {
+  margin-left: -4.5rem !important; }
 
 .p-0 {
   padding: 0 !important; }
@@ -5650,19 +5418,13 @@ button.close {
   padding: 1rem !important; }
 
 .p-4 {
-  padding: 1.25rem !important; }
+  padding: 1.5rem !important; }
 
 .p-5 {
-  padding: 2rem !important; }
-
-.p-6 {
   padding: 3rem !important; }
 
-.p-7 {
-  padding: 6rem !important; }
-
-.p-8 {
-  padding: 9rem !important; }
+.p-6 {
+  padding: 4.5rem !important; }
 
 .px-0 {
   padding-right: 0 !important;
@@ -5681,24 +5443,16 @@ button.close {
   padding-left: 1rem !important; }
 
 .px-4 {
-  padding-right: 1.25rem !important;
-  padding-left: 1.25rem !important; }
+  padding-right: 1.5rem !important;
+  padding-left: 1.5rem !important; }
 
 .px-5 {
-  padding-right: 2rem !important;
-  padding-left: 2rem !important; }
-
-.px-6 {
   padding-right: 3rem !important;
   padding-left: 3rem !important; }
 
-.px-7 {
-  padding-right: 6rem !important;
-  padding-left: 6rem !important; }
-
-.px-8 {
-  padding-right: 9rem !important;
-  padding-left: 9rem !important; }
+.px-6 {
+  padding-right: 4.5rem !important;
+  padding-left: 4.5rem !important; }
 
 .py-0 {
   padding-top: 0 !important;
@@ -5717,24 +5471,16 @@ button.close {
   padding-bottom: 1rem !important; }
 
 .py-4 {
-  padding-top: 1.25rem !important;
-  padding-bottom: 1.25rem !important; }
+  padding-top: 1.5rem !important;
+  padding-bottom: 1.5rem !important; }
 
 .py-5 {
-  padding-top: 2rem !important;
-  padding-bottom: 2rem !important; }
-
-.py-6 {
   padding-top: 3rem !important;
   padding-bottom: 3rem !important; }
 
-.py-7 {
-  padding-top: 6rem !important;
-  padding-bottom: 6rem !important; }
-
-.py-8 {
-  padding-top: 9rem !important;
-  padding-bottom: 9rem !important; }
+.py-6 {
+  padding-top: 4.5rem !important;
+  padding-bottom: 4.5rem !important; }
 
 .pt-0 {
   padding-top: 0 !important; }
@@ -5749,19 +5495,13 @@ button.close {
   padding-top: 1rem !important; }
 
 .pt-4 {
-  padding-top: 1.25rem !important; }
+  padding-top: 1.5rem !important; }
 
 .pt-5 {
-  padding-top: 2rem !important; }
-
-.pt-6 {
   padding-top: 3rem !important; }
 
-.pt-7 {
-  padding-top: 6rem !important; }
-
-.pt-8 {
-  padding-top: 9rem !important; }
+.pt-6 {
+  padding-top: 4.5rem !important; }
 
 .pr-0 {
   padding-right: 0 !important; }
@@ -5776,19 +5516,13 @@ button.close {
   padding-right: 1rem !important; }
 
 .pr-4 {
-  padding-right: 1.25rem !important; }
+  padding-right: 1.5rem !important; }
 
 .pr-5 {
-  padding-right: 2rem !important; }
-
-.pr-6 {
   padding-right: 3rem !important; }
 
-.pr-7 {
-  padding-right: 6rem !important; }
-
-.pr-8 {
-  padding-right: 9rem !important; }
+.pr-6 {
+  padding-right: 4.5rem !important; }
 
 .pb-0 {
   padding-bottom: 0 !important; }
@@ -5803,19 +5537,13 @@ button.close {
   padding-bottom: 1rem !important; }
 
 .pb-4 {
-  padding-bottom: 1.25rem !important; }
+  padding-bottom: 1.5rem !important; }
 
 .pb-5 {
-  padding-bottom: 2rem !important; }
-
-.pb-6 {
   padding-bottom: 3rem !important; }
 
-.pb-7 {
-  padding-bottom: 6rem !important; }
-
-.pb-8 {
-  padding-bottom: 9rem !important; }
+.pb-6 {
+  padding-bottom: 4.5rem !important; }
 
 .pl-0 {
   padding-left: 0 !important; }
@@ -5830,19 +5558,13 @@ button.close {
   padding-left: 1rem !important; }
 
 .pl-4 {
-  padding-left: 1.25rem !important; }
+  padding-left: 1.5rem !important; }
 
 .pl-5 {
-  padding-left: 2rem !important; }
-
-.pl-6 {
   padding-left: 3rem !important; }
 
-.pl-7 {
-  padding-left: 6rem !important; }
-
-.pl-8 {
-  padding-left: 9rem !important; }
+.pl-6 {
+  padding-left: 4.5rem !important; }
 
 .font-weight-light {
   font-weight: 300 !important; }
@@ -5887,7 +5609,7 @@ button.close {
   color: #206bc4 !important; }
 
 .text-secondary {
-  color: #868c97 !important; }
+  color: #6e7582 !important; }
 
 .text-success {
   color: #5eba00 !important; }
@@ -5899,7 +5621,7 @@ button.close {
   color: #fab005 !important; }
 
 .text-danger {
-  color: #fa4654 !important; }
+  color: #cd201f !important; }
 
 .text-light {
   color: #f5f7fb !important; }
@@ -5914,7 +5636,7 @@ button.close {
   color: #354052 !important; }
 
 .text-muted {
-  color: #868c97 !important; }
+  color: #6e7582 !important; }
 
 .text-black-50 {
   color: rgba(0, 0, 0, 0.5) !important; }
@@ -5932,7 +5654,7 @@ button.close {
   line-height: 1.3333334 !important; }
 
 .lh-base {
-  line-height: 1.6 !important; }
+  line-height: 1.7142857 !important; }
 
 .lh-lg {
   line-height: 2.1333334 !important; }
@@ -5941,7 +5663,7 @@ button.close {
   background-color: #206bc4 !important; }
 
 .bg-secondary {
-  background-color: #868c97 !important; }
+  background-color: #6e7582 !important; }
 
 .bg-success {
   background-color: #5eba00 !important; }
@@ -5953,7 +5675,7 @@ button.close {
   background-color: #fab005 !important; }
 
 .bg-danger {
-  background-color: #fa4654 !important; }
+  background-color: #cd201f !important; }
 
 .bg-light {
   background-color: #f5f7fb !important; }
@@ -6109,7 +5831,7 @@ button.close {
   cursor: zoom-out !important; }
 
 .text-h1 {
-  font-size: 1.625rem !important; }
+  font-size: 1.75rem !important; }
 
 .text-h2 {
   font-size: 1.375rem !important; }
@@ -6118,13 +5840,13 @@ button.close {
   font-size: 1.125rem !important; }
 
 .text-h4 {
-  font-size: 0.9375rem !important; }
+  font-size: 0.875rem !important; }
 
 .text-h5 {
-  font-size: 0.8125rem !important; }
+  font-size: 0.75rem !important; }
 
 .text-h6 {
-  font-size: 0.6875rem !important; }
+  font-size: 0.625rem !important; }
 
 .leading-0 {
   line-height: 0 !important; }
@@ -6139,19 +5861,13 @@ button.close {
   line-height: 1rem !important; }
 
 .leading-4 {
-  line-height: 1.25rem !important; }
+  line-height: 1.5rem !important; }
 
 .leading-5 {
-  line-height: 2rem !important; }
-
-.leading-6 {
   line-height: 3rem !important; }
 
-.leading-7 {
-  line-height: 6rem !important; }
-
-.leading-8 {
-  line-height: 9rem !important; }
+.leading-6 {
+  line-height: 4.5rem !important; }
 
 @media (min-width: 33rem) {
   .float-sm-left {
@@ -6274,15 +5990,11 @@ button.close {
   .m-sm-3 {
     margin: 1rem !important; }
   .m-sm-4 {
-    margin: 1.25rem !important; }
+    margin: 1.5rem !important; }
   .m-sm-5 {
-    margin: 2rem !important; }
-  .m-sm-6 {
     margin: 3rem !important; }
-  .m-sm-7 {
-    margin: 6rem !important; }
-  .m-sm-8 {
-    margin: 9rem !important; }
+  .m-sm-6 {
+    margin: 4.5rem !important; }
   .m-sm-auto {
     margin: auto !important; }
   .mx-sm-0 {
@@ -6298,20 +6010,14 @@ button.close {
     margin-right: 1rem !important;
     margin-left: 1rem !important; }
   .mx-sm-4 {
-    margin-right: 1.25rem !important;
-    margin-left: 1.25rem !important; }
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important; }
   .mx-sm-5 {
-    margin-right: 2rem !important;
-    margin-left: 2rem !important; }
-  .mx-sm-6 {
     margin-right: 3rem !important;
     margin-left: 3rem !important; }
-  .mx-sm-7 {
-    margin-right: 6rem !important;
-    margin-left: 6rem !important; }
-  .mx-sm-8 {
-    margin-right: 9rem !important;
-    margin-left: 9rem !important; }
+  .mx-sm-6 {
+    margin-right: 4.5rem !important;
+    margin-left: 4.5rem !important; }
   .mx-sm-auto {
     margin-right: auto !important;
     margin-left: auto !important; }
@@ -6328,20 +6034,14 @@ button.close {
     margin-top: 1rem !important;
     margin-bottom: 1rem !important; }
   .my-sm-4 {
-    margin-top: 1.25rem !important;
-    margin-bottom: 1.25rem !important; }
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important; }
   .my-sm-5 {
-    margin-top: 2rem !important;
-    margin-bottom: 2rem !important; }
-  .my-sm-6 {
     margin-top: 3rem !important;
     margin-bottom: 3rem !important; }
-  .my-sm-7 {
-    margin-top: 6rem !important;
-    margin-bottom: 6rem !important; }
-  .my-sm-8 {
-    margin-top: 9rem !important;
-    margin-bottom: 9rem !important; }
+  .my-sm-6 {
+    margin-top: 4.5rem !important;
+    margin-bottom: 4.5rem !important; }
   .my-sm-auto {
     margin-top: auto !important;
     margin-bottom: auto !important; }
@@ -6354,15 +6054,11 @@ button.close {
   .mt-sm-3 {
     margin-top: 1rem !important; }
   .mt-sm-4 {
-    margin-top: 1.25rem !important; }
+    margin-top: 1.5rem !important; }
   .mt-sm-5 {
-    margin-top: 2rem !important; }
-  .mt-sm-6 {
     margin-top: 3rem !important; }
-  .mt-sm-7 {
-    margin-top: 6rem !important; }
-  .mt-sm-8 {
-    margin-top: 9rem !important; }
+  .mt-sm-6 {
+    margin-top: 4.5rem !important; }
   .mt-sm-auto {
     margin-top: auto !important; }
   .mr-sm-0 {
@@ -6374,15 +6070,11 @@ button.close {
   .mr-sm-3 {
     margin-right: 1rem !important; }
   .mr-sm-4 {
-    margin-right: 1.25rem !important; }
+    margin-right: 1.5rem !important; }
   .mr-sm-5 {
-    margin-right: 2rem !important; }
-  .mr-sm-6 {
     margin-right: 3rem !important; }
-  .mr-sm-7 {
-    margin-right: 6rem !important; }
-  .mr-sm-8 {
-    margin-right: 9rem !important; }
+  .mr-sm-6 {
+    margin-right: 4.5rem !important; }
   .mr-sm-auto {
     margin-right: auto !important; }
   .mb-sm-0 {
@@ -6394,15 +6086,11 @@ button.close {
   .mb-sm-3 {
     margin-bottom: 1rem !important; }
   .mb-sm-4 {
-    margin-bottom: 1.25rem !important; }
+    margin-bottom: 1.5rem !important; }
   .mb-sm-5 {
-    margin-bottom: 2rem !important; }
-  .mb-sm-6 {
     margin-bottom: 3rem !important; }
-  .mb-sm-7 {
-    margin-bottom: 6rem !important; }
-  .mb-sm-8 {
-    margin-bottom: 9rem !important; }
+  .mb-sm-6 {
+    margin-bottom: 4.5rem !important; }
   .mb-sm-auto {
     margin-bottom: auto !important; }
   .ml-sm-0 {
@@ -6414,15 +6102,11 @@ button.close {
   .ml-sm-3 {
     margin-left: 1rem !important; }
   .ml-sm-4 {
-    margin-left: 1.25rem !important; }
+    margin-left: 1.5rem !important; }
   .ml-sm-5 {
-    margin-left: 2rem !important; }
-  .ml-sm-6 {
     margin-left: 3rem !important; }
-  .ml-sm-7 {
-    margin-left: 6rem !important; }
-  .ml-sm-8 {
-    margin-left: 9rem !important; }
+  .ml-sm-6 {
+    margin-left: 4.5rem !important; }
   .ml-sm-auto {
     margin-left: auto !important; }
   .m-sm-n1 {
@@ -6432,15 +6116,11 @@ button.close {
   .m-sm-n3 {
     margin: -1rem !important; }
   .m-sm-n4 {
-    margin: -1.25rem !important; }
+    margin: -1.5rem !important; }
   .m-sm-n5 {
-    margin: -2rem !important; }
-  .m-sm-n6 {
     margin: -3rem !important; }
-  .m-sm-n7 {
-    margin: -6rem !important; }
-  .m-sm-n8 {
-    margin: -9rem !important; }
+  .m-sm-n6 {
+    margin: -4.5rem !important; }
   .mx-sm-n1 {
     margin-right: -0.25rem !important;
     margin-left: -0.25rem !important; }
@@ -6451,20 +6131,14 @@ button.close {
     margin-right: -1rem !important;
     margin-left: -1rem !important; }
   .mx-sm-n4 {
-    margin-right: -1.25rem !important;
-    margin-left: -1.25rem !important; }
+    margin-right: -1.5rem !important;
+    margin-left: -1.5rem !important; }
   .mx-sm-n5 {
-    margin-right: -2rem !important;
-    margin-left: -2rem !important; }
-  .mx-sm-n6 {
     margin-right: -3rem !important;
     margin-left: -3rem !important; }
-  .mx-sm-n7 {
-    margin-right: -6rem !important;
-    margin-left: -6rem !important; }
-  .mx-sm-n8 {
-    margin-right: -9rem !important;
-    margin-left: -9rem !important; }
+  .mx-sm-n6 {
+    margin-right: -4.5rem !important;
+    margin-left: -4.5rem !important; }
   .my-sm-n1 {
     margin-top: -0.25rem !important;
     margin-bottom: -0.25rem !important; }
@@ -6475,20 +6149,14 @@ button.close {
     margin-top: -1rem !important;
     margin-bottom: -1rem !important; }
   .my-sm-n4 {
-    margin-top: -1.25rem !important;
-    margin-bottom: -1.25rem !important; }
+    margin-top: -1.5rem !important;
+    margin-bottom: -1.5rem !important; }
   .my-sm-n5 {
-    margin-top: -2rem !important;
-    margin-bottom: -2rem !important; }
-  .my-sm-n6 {
     margin-top: -3rem !important;
     margin-bottom: -3rem !important; }
-  .my-sm-n7 {
-    margin-top: -6rem !important;
-    margin-bottom: -6rem !important; }
-  .my-sm-n8 {
-    margin-top: -9rem !important;
-    margin-bottom: -9rem !important; }
+  .my-sm-n6 {
+    margin-top: -4.5rem !important;
+    margin-bottom: -4.5rem !important; }
   .mt-sm-n1 {
     margin-top: -0.25rem !important; }
   .mt-sm-n2 {
@@ -6496,15 +6164,11 @@ button.close {
   .mt-sm-n3 {
     margin-top: -1rem !important; }
   .mt-sm-n4 {
-    margin-top: -1.25rem !important; }
+    margin-top: -1.5rem !important; }
   .mt-sm-n5 {
-    margin-top: -2rem !important; }
-  .mt-sm-n6 {
     margin-top: -3rem !important; }
-  .mt-sm-n7 {
-    margin-top: -6rem !important; }
-  .mt-sm-n8 {
-    margin-top: -9rem !important; }
+  .mt-sm-n6 {
+    margin-top: -4.5rem !important; }
   .mr-sm-n1 {
     margin-right: -0.25rem !important; }
   .mr-sm-n2 {
@@ -6512,15 +6176,11 @@ button.close {
   .mr-sm-n3 {
     margin-right: -1rem !important; }
   .mr-sm-n4 {
-    margin-right: -1.25rem !important; }
+    margin-right: -1.5rem !important; }
   .mr-sm-n5 {
-    margin-right: -2rem !important; }
-  .mr-sm-n6 {
     margin-right: -3rem !important; }
-  .mr-sm-n7 {
-    margin-right: -6rem !important; }
-  .mr-sm-n8 {
-    margin-right: -9rem !important; }
+  .mr-sm-n6 {
+    margin-right: -4.5rem !important; }
   .mb-sm-n1 {
     margin-bottom: -0.25rem !important; }
   .mb-sm-n2 {
@@ -6528,15 +6188,11 @@ button.close {
   .mb-sm-n3 {
     margin-bottom: -1rem !important; }
   .mb-sm-n4 {
-    margin-bottom: -1.25rem !important; }
+    margin-bottom: -1.5rem !important; }
   .mb-sm-n5 {
-    margin-bottom: -2rem !important; }
-  .mb-sm-n6 {
     margin-bottom: -3rem !important; }
-  .mb-sm-n7 {
-    margin-bottom: -6rem !important; }
-  .mb-sm-n8 {
-    margin-bottom: -9rem !important; }
+  .mb-sm-n6 {
+    margin-bottom: -4.5rem !important; }
   .ml-sm-n1 {
     margin-left: -0.25rem !important; }
   .ml-sm-n2 {
@@ -6544,15 +6200,11 @@ button.close {
   .ml-sm-n3 {
     margin-left: -1rem !important; }
   .ml-sm-n4 {
-    margin-left: -1.25rem !important; }
+    margin-left: -1.5rem !important; }
   .ml-sm-n5 {
-    margin-left: -2rem !important; }
-  .ml-sm-n6 {
     margin-left: -3rem !important; }
-  .ml-sm-n7 {
-    margin-left: -6rem !important; }
-  .ml-sm-n8 {
-    margin-left: -9rem !important; }
+  .ml-sm-n6 {
+    margin-left: -4.5rem !important; }
   .p-sm-0 {
     padding: 0 !important; }
   .p-sm-1 {
@@ -6562,15 +6214,11 @@ button.close {
   .p-sm-3 {
     padding: 1rem !important; }
   .p-sm-4 {
-    padding: 1.25rem !important; }
+    padding: 1.5rem !important; }
   .p-sm-5 {
-    padding: 2rem !important; }
-  .p-sm-6 {
     padding: 3rem !important; }
-  .p-sm-7 {
-    padding: 6rem !important; }
-  .p-sm-8 {
-    padding: 9rem !important; }
+  .p-sm-6 {
+    padding: 4.5rem !important; }
   .px-sm-0 {
     padding-right: 0 !important;
     padding-left: 0 !important; }
@@ -6584,20 +6232,14 @@ button.close {
     padding-right: 1rem !important;
     padding-left: 1rem !important; }
   .px-sm-4 {
-    padding-right: 1.25rem !important;
-    padding-left: 1.25rem !important; }
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important; }
   .px-sm-5 {
-    padding-right: 2rem !important;
-    padding-left: 2rem !important; }
-  .px-sm-6 {
     padding-right: 3rem !important;
     padding-left: 3rem !important; }
-  .px-sm-7 {
-    padding-right: 6rem !important;
-    padding-left: 6rem !important; }
-  .px-sm-8 {
-    padding-right: 9rem !important;
-    padding-left: 9rem !important; }
+  .px-sm-6 {
+    padding-right: 4.5rem !important;
+    padding-left: 4.5rem !important; }
   .py-sm-0 {
     padding-top: 0 !important;
     padding-bottom: 0 !important; }
@@ -6611,20 +6253,14 @@ button.close {
     padding-top: 1rem !important;
     padding-bottom: 1rem !important; }
   .py-sm-4 {
-    padding-top: 1.25rem !important;
-    padding-bottom: 1.25rem !important; }
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important; }
   .py-sm-5 {
-    padding-top: 2rem !important;
-    padding-bottom: 2rem !important; }
-  .py-sm-6 {
     padding-top: 3rem !important;
     padding-bottom: 3rem !important; }
-  .py-sm-7 {
-    padding-top: 6rem !important;
-    padding-bottom: 6rem !important; }
-  .py-sm-8 {
-    padding-top: 9rem !important;
-    padding-bottom: 9rem !important; }
+  .py-sm-6 {
+    padding-top: 4.5rem !important;
+    padding-bottom: 4.5rem !important; }
   .pt-sm-0 {
     padding-top: 0 !important; }
   .pt-sm-1 {
@@ -6634,15 +6270,11 @@ button.close {
   .pt-sm-3 {
     padding-top: 1rem !important; }
   .pt-sm-4 {
-    padding-top: 1.25rem !important; }
+    padding-top: 1.5rem !important; }
   .pt-sm-5 {
-    padding-top: 2rem !important; }
-  .pt-sm-6 {
     padding-top: 3rem !important; }
-  .pt-sm-7 {
-    padding-top: 6rem !important; }
-  .pt-sm-8 {
-    padding-top: 9rem !important; }
+  .pt-sm-6 {
+    padding-top: 4.5rem !important; }
   .pr-sm-0 {
     padding-right: 0 !important; }
   .pr-sm-1 {
@@ -6652,15 +6284,11 @@ button.close {
   .pr-sm-3 {
     padding-right: 1rem !important; }
   .pr-sm-4 {
-    padding-right: 1.25rem !important; }
+    padding-right: 1.5rem !important; }
   .pr-sm-5 {
-    padding-right: 2rem !important; }
-  .pr-sm-6 {
     padding-right: 3rem !important; }
-  .pr-sm-7 {
-    padding-right: 6rem !important; }
-  .pr-sm-8 {
-    padding-right: 9rem !important; }
+  .pr-sm-6 {
+    padding-right: 4.5rem !important; }
   .pb-sm-0 {
     padding-bottom: 0 !important; }
   .pb-sm-1 {
@@ -6670,15 +6298,11 @@ button.close {
   .pb-sm-3 {
     padding-bottom: 1rem !important; }
   .pb-sm-4 {
-    padding-bottom: 1.25rem !important; }
+    padding-bottom: 1.5rem !important; }
   .pb-sm-5 {
-    padding-bottom: 2rem !important; }
-  .pb-sm-6 {
     padding-bottom: 3rem !important; }
-  .pb-sm-7 {
-    padding-bottom: 6rem !important; }
-  .pb-sm-8 {
-    padding-bottom: 9rem !important; }
+  .pb-sm-6 {
+    padding-bottom: 4.5rem !important; }
   .pl-sm-0 {
     padding-left: 0 !important; }
   .pl-sm-1 {
@@ -6688,15 +6312,11 @@ button.close {
   .pl-sm-3 {
     padding-left: 1rem !important; }
   .pl-sm-4 {
-    padding-left: 1.25rem !important; }
+    padding-left: 1.5rem !important; }
   .pl-sm-5 {
-    padding-left: 2rem !important; }
-  .pl-sm-6 {
     padding-left: 3rem !important; }
-  .pl-sm-7 {
-    padding-left: 6rem !important; }
-  .pl-sm-8 {
-    padding-left: 9rem !important; }
+  .pl-sm-6 {
+    padding-left: 4.5rem !important; }
   .text-sm-left {
     text-align: left !important; }
   .text-sm-right {
@@ -6825,15 +6445,11 @@ button.close {
   .m-md-3 {
     margin: 1rem !important; }
   .m-md-4 {
-    margin: 1.25rem !important; }
+    margin: 1.5rem !important; }
   .m-md-5 {
-    margin: 2rem !important; }
-  .m-md-6 {
     margin: 3rem !important; }
-  .m-md-7 {
-    margin: 6rem !important; }
-  .m-md-8 {
-    margin: 9rem !important; }
+  .m-md-6 {
+    margin: 4.5rem !important; }
   .m-md-auto {
     margin: auto !important; }
   .mx-md-0 {
@@ -6849,20 +6465,14 @@ button.close {
     margin-right: 1rem !important;
     margin-left: 1rem !important; }
   .mx-md-4 {
-    margin-right: 1.25rem !important;
-    margin-left: 1.25rem !important; }
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important; }
   .mx-md-5 {
-    margin-right: 2rem !important;
-    margin-left: 2rem !important; }
-  .mx-md-6 {
     margin-right: 3rem !important;
     margin-left: 3rem !important; }
-  .mx-md-7 {
-    margin-right: 6rem !important;
-    margin-left: 6rem !important; }
-  .mx-md-8 {
-    margin-right: 9rem !important;
-    margin-left: 9rem !important; }
+  .mx-md-6 {
+    margin-right: 4.5rem !important;
+    margin-left: 4.5rem !important; }
   .mx-md-auto {
     margin-right: auto !important;
     margin-left: auto !important; }
@@ -6879,20 +6489,14 @@ button.close {
     margin-top: 1rem !important;
     margin-bottom: 1rem !important; }
   .my-md-4 {
-    margin-top: 1.25rem !important;
-    margin-bottom: 1.25rem !important; }
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important; }
   .my-md-5 {
-    margin-top: 2rem !important;
-    margin-bottom: 2rem !important; }
-  .my-md-6 {
     margin-top: 3rem !important;
     margin-bottom: 3rem !important; }
-  .my-md-7 {
-    margin-top: 6rem !important;
-    margin-bottom: 6rem !important; }
-  .my-md-8 {
-    margin-top: 9rem !important;
-    margin-bottom: 9rem !important; }
+  .my-md-6 {
+    margin-top: 4.5rem !important;
+    margin-bottom: 4.5rem !important; }
   .my-md-auto {
     margin-top: auto !important;
     margin-bottom: auto !important; }
@@ -6905,15 +6509,11 @@ button.close {
   .mt-md-3 {
     margin-top: 1rem !important; }
   .mt-md-4 {
-    margin-top: 1.25rem !important; }
+    margin-top: 1.5rem !important; }
   .mt-md-5 {
-    margin-top: 2rem !important; }
-  .mt-md-6 {
     margin-top: 3rem !important; }
-  .mt-md-7 {
-    margin-top: 6rem !important; }
-  .mt-md-8 {
-    margin-top: 9rem !important; }
+  .mt-md-6 {
+    margin-top: 4.5rem !important; }
   .mt-md-auto {
     margin-top: auto !important; }
   .mr-md-0 {
@@ -6925,15 +6525,11 @@ button.close {
   .mr-md-3 {
     margin-right: 1rem !important; }
   .mr-md-4 {
-    margin-right: 1.25rem !important; }
+    margin-right: 1.5rem !important; }
   .mr-md-5 {
-    margin-right: 2rem !important; }
-  .mr-md-6 {
     margin-right: 3rem !important; }
-  .mr-md-7 {
-    margin-right: 6rem !important; }
-  .mr-md-8 {
-    margin-right: 9rem !important; }
+  .mr-md-6 {
+    margin-right: 4.5rem !important; }
   .mr-md-auto {
     margin-right: auto !important; }
   .mb-md-0 {
@@ -6945,15 +6541,11 @@ button.close {
   .mb-md-3 {
     margin-bottom: 1rem !important; }
   .mb-md-4 {
-    margin-bottom: 1.25rem !important; }
+    margin-bottom: 1.5rem !important; }
   .mb-md-5 {
-    margin-bottom: 2rem !important; }
-  .mb-md-6 {
     margin-bottom: 3rem !important; }
-  .mb-md-7 {
-    margin-bottom: 6rem !important; }
-  .mb-md-8 {
-    margin-bottom: 9rem !important; }
+  .mb-md-6 {
+    margin-bottom: 4.5rem !important; }
   .mb-md-auto {
     margin-bottom: auto !important; }
   .ml-md-0 {
@@ -6965,15 +6557,11 @@ button.close {
   .ml-md-3 {
     margin-left: 1rem !important; }
   .ml-md-4 {
-    margin-left: 1.25rem !important; }
+    margin-left: 1.5rem !important; }
   .ml-md-5 {
-    margin-left: 2rem !important; }
-  .ml-md-6 {
     margin-left: 3rem !important; }
-  .ml-md-7 {
-    margin-left: 6rem !important; }
-  .ml-md-8 {
-    margin-left: 9rem !important; }
+  .ml-md-6 {
+    margin-left: 4.5rem !important; }
   .ml-md-auto {
     margin-left: auto !important; }
   .m-md-n1 {
@@ -6983,15 +6571,11 @@ button.close {
   .m-md-n3 {
     margin: -1rem !important; }
   .m-md-n4 {
-    margin: -1.25rem !important; }
+    margin: -1.5rem !important; }
   .m-md-n5 {
-    margin: -2rem !important; }
-  .m-md-n6 {
     margin: -3rem !important; }
-  .m-md-n7 {
-    margin: -6rem !important; }
-  .m-md-n8 {
-    margin: -9rem !important; }
+  .m-md-n6 {
+    margin: -4.5rem !important; }
   .mx-md-n1 {
     margin-right: -0.25rem !important;
     margin-left: -0.25rem !important; }
@@ -7002,20 +6586,14 @@ button.close {
     margin-right: -1rem !important;
     margin-left: -1rem !important; }
   .mx-md-n4 {
-    margin-right: -1.25rem !important;
-    margin-left: -1.25rem !important; }
+    margin-right: -1.5rem !important;
+    margin-left: -1.5rem !important; }
   .mx-md-n5 {
-    margin-right: -2rem !important;
-    margin-left: -2rem !important; }
-  .mx-md-n6 {
     margin-right: -3rem !important;
     margin-left: -3rem !important; }
-  .mx-md-n7 {
-    margin-right: -6rem !important;
-    margin-left: -6rem !important; }
-  .mx-md-n8 {
-    margin-right: -9rem !important;
-    margin-left: -9rem !important; }
+  .mx-md-n6 {
+    margin-right: -4.5rem !important;
+    margin-left: -4.5rem !important; }
   .my-md-n1 {
     margin-top: -0.25rem !important;
     margin-bottom: -0.25rem !important; }
@@ -7026,20 +6604,14 @@ button.close {
     margin-top: -1rem !important;
     margin-bottom: -1rem !important; }
   .my-md-n4 {
-    margin-top: -1.25rem !important;
-    margin-bottom: -1.25rem !important; }
+    margin-top: -1.5rem !important;
+    margin-bottom: -1.5rem !important; }
   .my-md-n5 {
-    margin-top: -2rem !important;
-    margin-bottom: -2rem !important; }
-  .my-md-n6 {
     margin-top: -3rem !important;
     margin-bottom: -3rem !important; }
-  .my-md-n7 {
-    margin-top: -6rem !important;
-    margin-bottom: -6rem !important; }
-  .my-md-n8 {
-    margin-top: -9rem !important;
-    margin-bottom: -9rem !important; }
+  .my-md-n6 {
+    margin-top: -4.5rem !important;
+    margin-bottom: -4.5rem !important; }
   .mt-md-n1 {
     margin-top: -0.25rem !important; }
   .mt-md-n2 {
@@ -7047,15 +6619,11 @@ button.close {
   .mt-md-n3 {
     margin-top: -1rem !important; }
   .mt-md-n4 {
-    margin-top: -1.25rem !important; }
+    margin-top: -1.5rem !important; }
   .mt-md-n5 {
-    margin-top: -2rem !important; }
-  .mt-md-n6 {
     margin-top: -3rem !important; }
-  .mt-md-n7 {
-    margin-top: -6rem !important; }
-  .mt-md-n8 {
-    margin-top: -9rem !important; }
+  .mt-md-n6 {
+    margin-top: -4.5rem !important; }
   .mr-md-n1 {
     margin-right: -0.25rem !important; }
   .mr-md-n2 {
@@ -7063,15 +6631,11 @@ button.close {
   .mr-md-n3 {
     margin-right: -1rem !important; }
   .mr-md-n4 {
-    margin-right: -1.25rem !important; }
+    margin-right: -1.5rem !important; }
   .mr-md-n5 {
-    margin-right: -2rem !important; }
-  .mr-md-n6 {
     margin-right: -3rem !important; }
-  .mr-md-n7 {
-    margin-right: -6rem !important; }
-  .mr-md-n8 {
-    margin-right: -9rem !important; }
+  .mr-md-n6 {
+    margin-right: -4.5rem !important; }
   .mb-md-n1 {
     margin-bottom: -0.25rem !important; }
   .mb-md-n2 {
@@ -7079,15 +6643,11 @@ button.close {
   .mb-md-n3 {
     margin-bottom: -1rem !important; }
   .mb-md-n4 {
-    margin-bottom: -1.25rem !important; }
+    margin-bottom: -1.5rem !important; }
   .mb-md-n5 {
-    margin-bottom: -2rem !important; }
-  .mb-md-n6 {
     margin-bottom: -3rem !important; }
-  .mb-md-n7 {
-    margin-bottom: -6rem !important; }
-  .mb-md-n8 {
-    margin-bottom: -9rem !important; }
+  .mb-md-n6 {
+    margin-bottom: -4.5rem !important; }
   .ml-md-n1 {
     margin-left: -0.25rem !important; }
   .ml-md-n2 {
@@ -7095,15 +6655,11 @@ button.close {
   .ml-md-n3 {
     margin-left: -1rem !important; }
   .ml-md-n4 {
-    margin-left: -1.25rem !important; }
+    margin-left: -1.5rem !important; }
   .ml-md-n5 {
-    margin-left: -2rem !important; }
-  .ml-md-n6 {
     margin-left: -3rem !important; }
-  .ml-md-n7 {
-    margin-left: -6rem !important; }
-  .ml-md-n8 {
-    margin-left: -9rem !important; }
+  .ml-md-n6 {
+    margin-left: -4.5rem !important; }
   .p-md-0 {
     padding: 0 !important; }
   .p-md-1 {
@@ -7113,15 +6669,11 @@ button.close {
   .p-md-3 {
     padding: 1rem !important; }
   .p-md-4 {
-    padding: 1.25rem !important; }
+    padding: 1.5rem !important; }
   .p-md-5 {
-    padding: 2rem !important; }
-  .p-md-6 {
     padding: 3rem !important; }
-  .p-md-7 {
-    padding: 6rem !important; }
-  .p-md-8 {
-    padding: 9rem !important; }
+  .p-md-6 {
+    padding: 4.5rem !important; }
   .px-md-0 {
     padding-right: 0 !important;
     padding-left: 0 !important; }
@@ -7135,20 +6687,14 @@ button.close {
     padding-right: 1rem !important;
     padding-left: 1rem !important; }
   .px-md-4 {
-    padding-right: 1.25rem !important;
-    padding-left: 1.25rem !important; }
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important; }
   .px-md-5 {
-    padding-right: 2rem !important;
-    padding-left: 2rem !important; }
-  .px-md-6 {
     padding-right: 3rem !important;
     padding-left: 3rem !important; }
-  .px-md-7 {
-    padding-right: 6rem !important;
-    padding-left: 6rem !important; }
-  .px-md-8 {
-    padding-right: 9rem !important;
-    padding-left: 9rem !important; }
+  .px-md-6 {
+    padding-right: 4.5rem !important;
+    padding-left: 4.5rem !important; }
   .py-md-0 {
     padding-top: 0 !important;
     padding-bottom: 0 !important; }
@@ -7162,20 +6708,14 @@ button.close {
     padding-top: 1rem !important;
     padding-bottom: 1rem !important; }
   .py-md-4 {
-    padding-top: 1.25rem !important;
-    padding-bottom: 1.25rem !important; }
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important; }
   .py-md-5 {
-    padding-top: 2rem !important;
-    padding-bottom: 2rem !important; }
-  .py-md-6 {
     padding-top: 3rem !important;
     padding-bottom: 3rem !important; }
-  .py-md-7 {
-    padding-top: 6rem !important;
-    padding-bottom: 6rem !important; }
-  .py-md-8 {
-    padding-top: 9rem !important;
-    padding-bottom: 9rem !important; }
+  .py-md-6 {
+    padding-top: 4.5rem !important;
+    padding-bottom: 4.5rem !important; }
   .pt-md-0 {
     padding-top: 0 !important; }
   .pt-md-1 {
@@ -7185,15 +6725,11 @@ button.close {
   .pt-md-3 {
     padding-top: 1rem !important; }
   .pt-md-4 {
-    padding-top: 1.25rem !important; }
+    padding-top: 1.5rem !important; }
   .pt-md-5 {
-    padding-top: 2rem !important; }
-  .pt-md-6 {
     padding-top: 3rem !important; }
-  .pt-md-7 {
-    padding-top: 6rem !important; }
-  .pt-md-8 {
-    padding-top: 9rem !important; }
+  .pt-md-6 {
+    padding-top: 4.5rem !important; }
   .pr-md-0 {
     padding-right: 0 !important; }
   .pr-md-1 {
@@ -7203,15 +6739,11 @@ button.close {
   .pr-md-3 {
     padding-right: 1rem !important; }
   .pr-md-4 {
-    padding-right: 1.25rem !important; }
+    padding-right: 1.5rem !important; }
   .pr-md-5 {
-    padding-right: 2rem !important; }
-  .pr-md-6 {
     padding-right: 3rem !important; }
-  .pr-md-7 {
-    padding-right: 6rem !important; }
-  .pr-md-8 {
-    padding-right: 9rem !important; }
+  .pr-md-6 {
+    padding-right: 4.5rem !important; }
   .pb-md-0 {
     padding-bottom: 0 !important; }
   .pb-md-1 {
@@ -7221,15 +6753,11 @@ button.close {
   .pb-md-3 {
     padding-bottom: 1rem !important; }
   .pb-md-4 {
-    padding-bottom: 1.25rem !important; }
+    padding-bottom: 1.5rem !important; }
   .pb-md-5 {
-    padding-bottom: 2rem !important; }
-  .pb-md-6 {
     padding-bottom: 3rem !important; }
-  .pb-md-7 {
-    padding-bottom: 6rem !important; }
-  .pb-md-8 {
-    padding-bottom: 9rem !important; }
+  .pb-md-6 {
+    padding-bottom: 4.5rem !important; }
   .pl-md-0 {
     padding-left: 0 !important; }
   .pl-md-1 {
@@ -7239,15 +6767,11 @@ button.close {
   .pl-md-3 {
     padding-left: 1rem !important; }
   .pl-md-4 {
-    padding-left: 1.25rem !important; }
+    padding-left: 1.5rem !important; }
   .pl-md-5 {
-    padding-left: 2rem !important; }
-  .pl-md-6 {
     padding-left: 3rem !important; }
-  .pl-md-7 {
-    padding-left: 6rem !important; }
-  .pl-md-8 {
-    padding-left: 9rem !important; }
+  .pl-md-6 {
+    padding-left: 4.5rem !important; }
   .text-md-left {
     text-align: left !important; }
   .text-md-right {
@@ -7376,15 +6900,11 @@ button.close {
   .m-lg-3 {
     margin: 1rem !important; }
   .m-lg-4 {
-    margin: 1.25rem !important; }
+    margin: 1.5rem !important; }
   .m-lg-5 {
-    margin: 2rem !important; }
-  .m-lg-6 {
     margin: 3rem !important; }
-  .m-lg-7 {
-    margin: 6rem !important; }
-  .m-lg-8 {
-    margin: 9rem !important; }
+  .m-lg-6 {
+    margin: 4.5rem !important; }
   .m-lg-auto {
     margin: auto !important; }
   .mx-lg-0 {
@@ -7400,20 +6920,14 @@ button.close {
     margin-right: 1rem !important;
     margin-left: 1rem !important; }
   .mx-lg-4 {
-    margin-right: 1.25rem !important;
-    margin-left: 1.25rem !important; }
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important; }
   .mx-lg-5 {
-    margin-right: 2rem !important;
-    margin-left: 2rem !important; }
-  .mx-lg-6 {
     margin-right: 3rem !important;
     margin-left: 3rem !important; }
-  .mx-lg-7 {
-    margin-right: 6rem !important;
-    margin-left: 6rem !important; }
-  .mx-lg-8 {
-    margin-right: 9rem !important;
-    margin-left: 9rem !important; }
+  .mx-lg-6 {
+    margin-right: 4.5rem !important;
+    margin-left: 4.5rem !important; }
   .mx-lg-auto {
     margin-right: auto !important;
     margin-left: auto !important; }
@@ -7430,20 +6944,14 @@ button.close {
     margin-top: 1rem !important;
     margin-bottom: 1rem !important; }
   .my-lg-4 {
-    margin-top: 1.25rem !important;
-    margin-bottom: 1.25rem !important; }
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important; }
   .my-lg-5 {
-    margin-top: 2rem !important;
-    margin-bottom: 2rem !important; }
-  .my-lg-6 {
     margin-top: 3rem !important;
     margin-bottom: 3rem !important; }
-  .my-lg-7 {
-    margin-top: 6rem !important;
-    margin-bottom: 6rem !important; }
-  .my-lg-8 {
-    margin-top: 9rem !important;
-    margin-bottom: 9rem !important; }
+  .my-lg-6 {
+    margin-top: 4.5rem !important;
+    margin-bottom: 4.5rem !important; }
   .my-lg-auto {
     margin-top: auto !important;
     margin-bottom: auto !important; }
@@ -7456,15 +6964,11 @@ button.close {
   .mt-lg-3 {
     margin-top: 1rem !important; }
   .mt-lg-4 {
-    margin-top: 1.25rem !important; }
+    margin-top: 1.5rem !important; }
   .mt-lg-5 {
-    margin-top: 2rem !important; }
-  .mt-lg-6 {
     margin-top: 3rem !important; }
-  .mt-lg-7 {
-    margin-top: 6rem !important; }
-  .mt-lg-8 {
-    margin-top: 9rem !important; }
+  .mt-lg-6 {
+    margin-top: 4.5rem !important; }
   .mt-lg-auto {
     margin-top: auto !important; }
   .mr-lg-0 {
@@ -7476,15 +6980,11 @@ button.close {
   .mr-lg-3 {
     margin-right: 1rem !important; }
   .mr-lg-4 {
-    margin-right: 1.25rem !important; }
+    margin-right: 1.5rem !important; }
   .mr-lg-5 {
-    margin-right: 2rem !important; }
-  .mr-lg-6 {
     margin-right: 3rem !important; }
-  .mr-lg-7 {
-    margin-right: 6rem !important; }
-  .mr-lg-8 {
-    margin-right: 9rem !important; }
+  .mr-lg-6 {
+    margin-right: 4.5rem !important; }
   .mr-lg-auto {
     margin-right: auto !important; }
   .mb-lg-0 {
@@ -7496,15 +6996,11 @@ button.close {
   .mb-lg-3 {
     margin-bottom: 1rem !important; }
   .mb-lg-4 {
-    margin-bottom: 1.25rem !important; }
+    margin-bottom: 1.5rem !important; }
   .mb-lg-5 {
-    margin-bottom: 2rem !important; }
-  .mb-lg-6 {
     margin-bottom: 3rem !important; }
-  .mb-lg-7 {
-    margin-bottom: 6rem !important; }
-  .mb-lg-8 {
-    margin-bottom: 9rem !important; }
+  .mb-lg-6 {
+    margin-bottom: 4.5rem !important; }
   .mb-lg-auto {
     margin-bottom: auto !important; }
   .ml-lg-0 {
@@ -7516,15 +7012,11 @@ button.close {
   .ml-lg-3 {
     margin-left: 1rem !important; }
   .ml-lg-4 {
-    margin-left: 1.25rem !important; }
+    margin-left: 1.5rem !important; }
   .ml-lg-5 {
-    margin-left: 2rem !important; }
-  .ml-lg-6 {
     margin-left: 3rem !important; }
-  .ml-lg-7 {
-    margin-left: 6rem !important; }
-  .ml-lg-8 {
-    margin-left: 9rem !important; }
+  .ml-lg-6 {
+    margin-left: 4.5rem !important; }
   .ml-lg-auto {
     margin-left: auto !important; }
   .m-lg-n1 {
@@ -7534,15 +7026,11 @@ button.close {
   .m-lg-n3 {
     margin: -1rem !important; }
   .m-lg-n4 {
-    margin: -1.25rem !important; }
+    margin: -1.5rem !important; }
   .m-lg-n5 {
-    margin: -2rem !important; }
-  .m-lg-n6 {
     margin: -3rem !important; }
-  .m-lg-n7 {
-    margin: -6rem !important; }
-  .m-lg-n8 {
-    margin: -9rem !important; }
+  .m-lg-n6 {
+    margin: -4.5rem !important; }
   .mx-lg-n1 {
     margin-right: -0.25rem !important;
     margin-left: -0.25rem !important; }
@@ -7553,20 +7041,14 @@ button.close {
     margin-right: -1rem !important;
     margin-left: -1rem !important; }
   .mx-lg-n4 {
-    margin-right: -1.25rem !important;
-    margin-left: -1.25rem !important; }
+    margin-right: -1.5rem !important;
+    margin-left: -1.5rem !important; }
   .mx-lg-n5 {
-    margin-right: -2rem !important;
-    margin-left: -2rem !important; }
-  .mx-lg-n6 {
     margin-right: -3rem !important;
     margin-left: -3rem !important; }
-  .mx-lg-n7 {
-    margin-right: -6rem !important;
-    margin-left: -6rem !important; }
-  .mx-lg-n8 {
-    margin-right: -9rem !important;
-    margin-left: -9rem !important; }
+  .mx-lg-n6 {
+    margin-right: -4.5rem !important;
+    margin-left: -4.5rem !important; }
   .my-lg-n1 {
     margin-top: -0.25rem !important;
     margin-bottom: -0.25rem !important; }
@@ -7577,20 +7059,14 @@ button.close {
     margin-top: -1rem !important;
     margin-bottom: -1rem !important; }
   .my-lg-n4 {
-    margin-top: -1.25rem !important;
-    margin-bottom: -1.25rem !important; }
+    margin-top: -1.5rem !important;
+    margin-bottom: -1.5rem !important; }
   .my-lg-n5 {
-    margin-top: -2rem !important;
-    margin-bottom: -2rem !important; }
-  .my-lg-n6 {
     margin-top: -3rem !important;
     margin-bottom: -3rem !important; }
-  .my-lg-n7 {
-    margin-top: -6rem !important;
-    margin-bottom: -6rem !important; }
-  .my-lg-n8 {
-    margin-top: -9rem !important;
-    margin-bottom: -9rem !important; }
+  .my-lg-n6 {
+    margin-top: -4.5rem !important;
+    margin-bottom: -4.5rem !important; }
   .mt-lg-n1 {
     margin-top: -0.25rem !important; }
   .mt-lg-n2 {
@@ -7598,15 +7074,11 @@ button.close {
   .mt-lg-n3 {
     margin-top: -1rem !important; }
   .mt-lg-n4 {
-    margin-top: -1.25rem !important; }
+    margin-top: -1.5rem !important; }
   .mt-lg-n5 {
-    margin-top: -2rem !important; }
-  .mt-lg-n6 {
     margin-top: -3rem !important; }
-  .mt-lg-n7 {
-    margin-top: -6rem !important; }
-  .mt-lg-n8 {
-    margin-top: -9rem !important; }
+  .mt-lg-n6 {
+    margin-top: -4.5rem !important; }
   .mr-lg-n1 {
     margin-right: -0.25rem !important; }
   .mr-lg-n2 {
@@ -7614,15 +7086,11 @@ button.close {
   .mr-lg-n3 {
     margin-right: -1rem !important; }
   .mr-lg-n4 {
-    margin-right: -1.25rem !important; }
+    margin-right: -1.5rem !important; }
   .mr-lg-n5 {
-    margin-right: -2rem !important; }
-  .mr-lg-n6 {
     margin-right: -3rem !important; }
-  .mr-lg-n7 {
-    margin-right: -6rem !important; }
-  .mr-lg-n8 {
-    margin-right: -9rem !important; }
+  .mr-lg-n6 {
+    margin-right: -4.5rem !important; }
   .mb-lg-n1 {
     margin-bottom: -0.25rem !important; }
   .mb-lg-n2 {
@@ -7630,15 +7098,11 @@ button.close {
   .mb-lg-n3 {
     margin-bottom: -1rem !important; }
   .mb-lg-n4 {
-    margin-bottom: -1.25rem !important; }
+    margin-bottom: -1.5rem !important; }
   .mb-lg-n5 {
-    margin-bottom: -2rem !important; }
-  .mb-lg-n6 {
     margin-bottom: -3rem !important; }
-  .mb-lg-n7 {
-    margin-bottom: -6rem !important; }
-  .mb-lg-n8 {
-    margin-bottom: -9rem !important; }
+  .mb-lg-n6 {
+    margin-bottom: -4.5rem !important; }
   .ml-lg-n1 {
     margin-left: -0.25rem !important; }
   .ml-lg-n2 {
@@ -7646,15 +7110,11 @@ button.close {
   .ml-lg-n3 {
     margin-left: -1rem !important; }
   .ml-lg-n4 {
-    margin-left: -1.25rem !important; }
+    margin-left: -1.5rem !important; }
   .ml-lg-n5 {
-    margin-left: -2rem !important; }
-  .ml-lg-n6 {
     margin-left: -3rem !important; }
-  .ml-lg-n7 {
-    margin-left: -6rem !important; }
-  .ml-lg-n8 {
-    margin-left: -9rem !important; }
+  .ml-lg-n6 {
+    margin-left: -4.5rem !important; }
   .p-lg-0 {
     padding: 0 !important; }
   .p-lg-1 {
@@ -7664,15 +7124,11 @@ button.close {
   .p-lg-3 {
     padding: 1rem !important; }
   .p-lg-4 {
-    padding: 1.25rem !important; }
+    padding: 1.5rem !important; }
   .p-lg-5 {
-    padding: 2rem !important; }
-  .p-lg-6 {
     padding: 3rem !important; }
-  .p-lg-7 {
-    padding: 6rem !important; }
-  .p-lg-8 {
-    padding: 9rem !important; }
+  .p-lg-6 {
+    padding: 4.5rem !important; }
   .px-lg-0 {
     padding-right: 0 !important;
     padding-left: 0 !important; }
@@ -7686,20 +7142,14 @@ button.close {
     padding-right: 1rem !important;
     padding-left: 1rem !important; }
   .px-lg-4 {
-    padding-right: 1.25rem !important;
-    padding-left: 1.25rem !important; }
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important; }
   .px-lg-5 {
-    padding-right: 2rem !important;
-    padding-left: 2rem !important; }
-  .px-lg-6 {
     padding-right: 3rem !important;
     padding-left: 3rem !important; }
-  .px-lg-7 {
-    padding-right: 6rem !important;
-    padding-left: 6rem !important; }
-  .px-lg-8 {
-    padding-right: 9rem !important;
-    padding-left: 9rem !important; }
+  .px-lg-6 {
+    padding-right: 4.5rem !important;
+    padding-left: 4.5rem !important; }
   .py-lg-0 {
     padding-top: 0 !important;
     padding-bottom: 0 !important; }
@@ -7713,20 +7163,14 @@ button.close {
     padding-top: 1rem !important;
     padding-bottom: 1rem !important; }
   .py-lg-4 {
-    padding-top: 1.25rem !important;
-    padding-bottom: 1.25rem !important; }
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important; }
   .py-lg-5 {
-    padding-top: 2rem !important;
-    padding-bottom: 2rem !important; }
-  .py-lg-6 {
     padding-top: 3rem !important;
     padding-bottom: 3rem !important; }
-  .py-lg-7 {
-    padding-top: 6rem !important;
-    padding-bottom: 6rem !important; }
-  .py-lg-8 {
-    padding-top: 9rem !important;
-    padding-bottom: 9rem !important; }
+  .py-lg-6 {
+    padding-top: 4.5rem !important;
+    padding-bottom: 4.5rem !important; }
   .pt-lg-0 {
     padding-top: 0 !important; }
   .pt-lg-1 {
@@ -7736,15 +7180,11 @@ button.close {
   .pt-lg-3 {
     padding-top: 1rem !important; }
   .pt-lg-4 {
-    padding-top: 1.25rem !important; }
+    padding-top: 1.5rem !important; }
   .pt-lg-5 {
-    padding-top: 2rem !important; }
-  .pt-lg-6 {
     padding-top: 3rem !important; }
-  .pt-lg-7 {
-    padding-top: 6rem !important; }
-  .pt-lg-8 {
-    padding-top: 9rem !important; }
+  .pt-lg-6 {
+    padding-top: 4.5rem !important; }
   .pr-lg-0 {
     padding-right: 0 !important; }
   .pr-lg-1 {
@@ -7754,15 +7194,11 @@ button.close {
   .pr-lg-3 {
     padding-right: 1rem !important; }
   .pr-lg-4 {
-    padding-right: 1.25rem !important; }
+    padding-right: 1.5rem !important; }
   .pr-lg-5 {
-    padding-right: 2rem !important; }
-  .pr-lg-6 {
     padding-right: 3rem !important; }
-  .pr-lg-7 {
-    padding-right: 6rem !important; }
-  .pr-lg-8 {
-    padding-right: 9rem !important; }
+  .pr-lg-6 {
+    padding-right: 4.5rem !important; }
   .pb-lg-0 {
     padding-bottom: 0 !important; }
   .pb-lg-1 {
@@ -7772,15 +7208,11 @@ button.close {
   .pb-lg-3 {
     padding-bottom: 1rem !important; }
   .pb-lg-4 {
-    padding-bottom: 1.25rem !important; }
+    padding-bottom: 1.5rem !important; }
   .pb-lg-5 {
-    padding-bottom: 2rem !important; }
-  .pb-lg-6 {
     padding-bottom: 3rem !important; }
-  .pb-lg-7 {
-    padding-bottom: 6rem !important; }
-  .pb-lg-8 {
-    padding-bottom: 9rem !important; }
+  .pb-lg-6 {
+    padding-bottom: 4.5rem !important; }
   .pl-lg-0 {
     padding-left: 0 !important; }
   .pl-lg-1 {
@@ -7790,15 +7222,11 @@ button.close {
   .pl-lg-3 {
     padding-left: 1rem !important; }
   .pl-lg-4 {
-    padding-left: 1.25rem !important; }
+    padding-left: 1.5rem !important; }
   .pl-lg-5 {
-    padding-left: 2rem !important; }
-  .pl-lg-6 {
     padding-left: 3rem !important; }
-  .pl-lg-7 {
-    padding-left: 6rem !important; }
-  .pl-lg-8 {
-    padding-left: 9rem !important; }
+  .pl-lg-6 {
+    padding-left: 4.5rem !important; }
   .text-lg-left {
     text-align: left !important; }
   .text-lg-right {
@@ -7927,15 +7355,11 @@ button.close {
   .m-xl-3 {
     margin: 1rem !important; }
   .m-xl-4 {
-    margin: 1.25rem !important; }
+    margin: 1.5rem !important; }
   .m-xl-5 {
-    margin: 2rem !important; }
-  .m-xl-6 {
     margin: 3rem !important; }
-  .m-xl-7 {
-    margin: 6rem !important; }
-  .m-xl-8 {
-    margin: 9rem !important; }
+  .m-xl-6 {
+    margin: 4.5rem !important; }
   .m-xl-auto {
     margin: auto !important; }
   .mx-xl-0 {
@@ -7951,20 +7375,14 @@ button.close {
     margin-right: 1rem !important;
     margin-left: 1rem !important; }
   .mx-xl-4 {
-    margin-right: 1.25rem !important;
-    margin-left: 1.25rem !important; }
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important; }
   .mx-xl-5 {
-    margin-right: 2rem !important;
-    margin-left: 2rem !important; }
-  .mx-xl-6 {
     margin-right: 3rem !important;
     margin-left: 3rem !important; }
-  .mx-xl-7 {
-    margin-right: 6rem !important;
-    margin-left: 6rem !important; }
-  .mx-xl-8 {
-    margin-right: 9rem !important;
-    margin-left: 9rem !important; }
+  .mx-xl-6 {
+    margin-right: 4.5rem !important;
+    margin-left: 4.5rem !important; }
   .mx-xl-auto {
     margin-right: auto !important;
     margin-left: auto !important; }
@@ -7981,20 +7399,14 @@ button.close {
     margin-top: 1rem !important;
     margin-bottom: 1rem !important; }
   .my-xl-4 {
-    margin-top: 1.25rem !important;
-    margin-bottom: 1.25rem !important; }
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important; }
   .my-xl-5 {
-    margin-top: 2rem !important;
-    margin-bottom: 2rem !important; }
-  .my-xl-6 {
     margin-top: 3rem !important;
     margin-bottom: 3rem !important; }
-  .my-xl-7 {
-    margin-top: 6rem !important;
-    margin-bottom: 6rem !important; }
-  .my-xl-8 {
-    margin-top: 9rem !important;
-    margin-bottom: 9rem !important; }
+  .my-xl-6 {
+    margin-top: 4.5rem !important;
+    margin-bottom: 4.5rem !important; }
   .my-xl-auto {
     margin-top: auto !important;
     margin-bottom: auto !important; }
@@ -8007,15 +7419,11 @@ button.close {
   .mt-xl-3 {
     margin-top: 1rem !important; }
   .mt-xl-4 {
-    margin-top: 1.25rem !important; }
+    margin-top: 1.5rem !important; }
   .mt-xl-5 {
-    margin-top: 2rem !important; }
-  .mt-xl-6 {
     margin-top: 3rem !important; }
-  .mt-xl-7 {
-    margin-top: 6rem !important; }
-  .mt-xl-8 {
-    margin-top: 9rem !important; }
+  .mt-xl-6 {
+    margin-top: 4.5rem !important; }
   .mt-xl-auto {
     margin-top: auto !important; }
   .mr-xl-0 {
@@ -8027,15 +7435,11 @@ button.close {
   .mr-xl-3 {
     margin-right: 1rem !important; }
   .mr-xl-4 {
-    margin-right: 1.25rem !important; }
+    margin-right: 1.5rem !important; }
   .mr-xl-5 {
-    margin-right: 2rem !important; }
-  .mr-xl-6 {
     margin-right: 3rem !important; }
-  .mr-xl-7 {
-    margin-right: 6rem !important; }
-  .mr-xl-8 {
-    margin-right: 9rem !important; }
+  .mr-xl-6 {
+    margin-right: 4.5rem !important; }
   .mr-xl-auto {
     margin-right: auto !important; }
   .mb-xl-0 {
@@ -8047,15 +7451,11 @@ button.close {
   .mb-xl-3 {
     margin-bottom: 1rem !important; }
   .mb-xl-4 {
-    margin-bottom: 1.25rem !important; }
+    margin-bottom: 1.5rem !important; }
   .mb-xl-5 {
-    margin-bottom: 2rem !important; }
-  .mb-xl-6 {
     margin-bottom: 3rem !important; }
-  .mb-xl-7 {
-    margin-bottom: 6rem !important; }
-  .mb-xl-8 {
-    margin-bottom: 9rem !important; }
+  .mb-xl-6 {
+    margin-bottom: 4.5rem !important; }
   .mb-xl-auto {
     margin-bottom: auto !important; }
   .ml-xl-0 {
@@ -8067,15 +7467,11 @@ button.close {
   .ml-xl-3 {
     margin-left: 1rem !important; }
   .ml-xl-4 {
-    margin-left: 1.25rem !important; }
+    margin-left: 1.5rem !important; }
   .ml-xl-5 {
-    margin-left: 2rem !important; }
-  .ml-xl-6 {
     margin-left: 3rem !important; }
-  .ml-xl-7 {
-    margin-left: 6rem !important; }
-  .ml-xl-8 {
-    margin-left: 9rem !important; }
+  .ml-xl-6 {
+    margin-left: 4.5rem !important; }
   .ml-xl-auto {
     margin-left: auto !important; }
   .m-xl-n1 {
@@ -8085,15 +7481,11 @@ button.close {
   .m-xl-n3 {
     margin: -1rem !important; }
   .m-xl-n4 {
-    margin: -1.25rem !important; }
+    margin: -1.5rem !important; }
   .m-xl-n5 {
-    margin: -2rem !important; }
-  .m-xl-n6 {
     margin: -3rem !important; }
-  .m-xl-n7 {
-    margin: -6rem !important; }
-  .m-xl-n8 {
-    margin: -9rem !important; }
+  .m-xl-n6 {
+    margin: -4.5rem !important; }
   .mx-xl-n1 {
     margin-right: -0.25rem !important;
     margin-left: -0.25rem !important; }
@@ -8104,20 +7496,14 @@ button.close {
     margin-right: -1rem !important;
     margin-left: -1rem !important; }
   .mx-xl-n4 {
-    margin-right: -1.25rem !important;
-    margin-left: -1.25rem !important; }
+    margin-right: -1.5rem !important;
+    margin-left: -1.5rem !important; }
   .mx-xl-n5 {
-    margin-right: -2rem !important;
-    margin-left: -2rem !important; }
-  .mx-xl-n6 {
     margin-right: -3rem !important;
     margin-left: -3rem !important; }
-  .mx-xl-n7 {
-    margin-right: -6rem !important;
-    margin-left: -6rem !important; }
-  .mx-xl-n8 {
-    margin-right: -9rem !important;
-    margin-left: -9rem !important; }
+  .mx-xl-n6 {
+    margin-right: -4.5rem !important;
+    margin-left: -4.5rem !important; }
   .my-xl-n1 {
     margin-top: -0.25rem !important;
     margin-bottom: -0.25rem !important; }
@@ -8128,20 +7514,14 @@ button.close {
     margin-top: -1rem !important;
     margin-bottom: -1rem !important; }
   .my-xl-n4 {
-    margin-top: -1.25rem !important;
-    margin-bottom: -1.25rem !important; }
+    margin-top: -1.5rem !important;
+    margin-bottom: -1.5rem !important; }
   .my-xl-n5 {
-    margin-top: -2rem !important;
-    margin-bottom: -2rem !important; }
-  .my-xl-n6 {
     margin-top: -3rem !important;
     margin-bottom: -3rem !important; }
-  .my-xl-n7 {
-    margin-top: -6rem !important;
-    margin-bottom: -6rem !important; }
-  .my-xl-n8 {
-    margin-top: -9rem !important;
-    margin-bottom: -9rem !important; }
+  .my-xl-n6 {
+    margin-top: -4.5rem !important;
+    margin-bottom: -4.5rem !important; }
   .mt-xl-n1 {
     margin-top: -0.25rem !important; }
   .mt-xl-n2 {
@@ -8149,15 +7529,11 @@ button.close {
   .mt-xl-n3 {
     margin-top: -1rem !important; }
   .mt-xl-n4 {
-    margin-top: -1.25rem !important; }
+    margin-top: -1.5rem !important; }
   .mt-xl-n5 {
-    margin-top: -2rem !important; }
-  .mt-xl-n6 {
     margin-top: -3rem !important; }
-  .mt-xl-n7 {
-    margin-top: -6rem !important; }
-  .mt-xl-n8 {
-    margin-top: -9rem !important; }
+  .mt-xl-n6 {
+    margin-top: -4.5rem !important; }
   .mr-xl-n1 {
     margin-right: -0.25rem !important; }
   .mr-xl-n2 {
@@ -8165,15 +7541,11 @@ button.close {
   .mr-xl-n3 {
     margin-right: -1rem !important; }
   .mr-xl-n4 {
-    margin-right: -1.25rem !important; }
+    margin-right: -1.5rem !important; }
   .mr-xl-n5 {
-    margin-right: -2rem !important; }
-  .mr-xl-n6 {
     margin-right: -3rem !important; }
-  .mr-xl-n7 {
-    margin-right: -6rem !important; }
-  .mr-xl-n8 {
-    margin-right: -9rem !important; }
+  .mr-xl-n6 {
+    margin-right: -4.5rem !important; }
   .mb-xl-n1 {
     margin-bottom: -0.25rem !important; }
   .mb-xl-n2 {
@@ -8181,15 +7553,11 @@ button.close {
   .mb-xl-n3 {
     margin-bottom: -1rem !important; }
   .mb-xl-n4 {
-    margin-bottom: -1.25rem !important; }
+    margin-bottom: -1.5rem !important; }
   .mb-xl-n5 {
-    margin-bottom: -2rem !important; }
-  .mb-xl-n6 {
     margin-bottom: -3rem !important; }
-  .mb-xl-n7 {
-    margin-bottom: -6rem !important; }
-  .mb-xl-n8 {
-    margin-bottom: -9rem !important; }
+  .mb-xl-n6 {
+    margin-bottom: -4.5rem !important; }
   .ml-xl-n1 {
     margin-left: -0.25rem !important; }
   .ml-xl-n2 {
@@ -8197,15 +7565,11 @@ button.close {
   .ml-xl-n3 {
     margin-left: -1rem !important; }
   .ml-xl-n4 {
-    margin-left: -1.25rem !important; }
+    margin-left: -1.5rem !important; }
   .ml-xl-n5 {
-    margin-left: -2rem !important; }
-  .ml-xl-n6 {
     margin-left: -3rem !important; }
-  .ml-xl-n7 {
-    margin-left: -6rem !important; }
-  .ml-xl-n8 {
-    margin-left: -9rem !important; }
+  .ml-xl-n6 {
+    margin-left: -4.5rem !important; }
   .p-xl-0 {
     padding: 0 !important; }
   .p-xl-1 {
@@ -8215,15 +7579,11 @@ button.close {
   .p-xl-3 {
     padding: 1rem !important; }
   .p-xl-4 {
-    padding: 1.25rem !important; }
+    padding: 1.5rem !important; }
   .p-xl-5 {
-    padding: 2rem !important; }
-  .p-xl-6 {
     padding: 3rem !important; }
-  .p-xl-7 {
-    padding: 6rem !important; }
-  .p-xl-8 {
-    padding: 9rem !important; }
+  .p-xl-6 {
+    padding: 4.5rem !important; }
   .px-xl-0 {
     padding-right: 0 !important;
     padding-left: 0 !important; }
@@ -8237,20 +7597,14 @@ button.close {
     padding-right: 1rem !important;
     padding-left: 1rem !important; }
   .px-xl-4 {
-    padding-right: 1.25rem !important;
-    padding-left: 1.25rem !important; }
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important; }
   .px-xl-5 {
-    padding-right: 2rem !important;
-    padding-left: 2rem !important; }
-  .px-xl-6 {
     padding-right: 3rem !important;
     padding-left: 3rem !important; }
-  .px-xl-7 {
-    padding-right: 6rem !important;
-    padding-left: 6rem !important; }
-  .px-xl-8 {
-    padding-right: 9rem !important;
-    padding-left: 9rem !important; }
+  .px-xl-6 {
+    padding-right: 4.5rem !important;
+    padding-left: 4.5rem !important; }
   .py-xl-0 {
     padding-top: 0 !important;
     padding-bottom: 0 !important; }
@@ -8264,20 +7618,14 @@ button.close {
     padding-top: 1rem !important;
     padding-bottom: 1rem !important; }
   .py-xl-4 {
-    padding-top: 1.25rem !important;
-    padding-bottom: 1.25rem !important; }
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important; }
   .py-xl-5 {
-    padding-top: 2rem !important;
-    padding-bottom: 2rem !important; }
-  .py-xl-6 {
     padding-top: 3rem !important;
     padding-bottom: 3rem !important; }
-  .py-xl-7 {
-    padding-top: 6rem !important;
-    padding-bottom: 6rem !important; }
-  .py-xl-8 {
-    padding-top: 9rem !important;
-    padding-bottom: 9rem !important; }
+  .py-xl-6 {
+    padding-top: 4.5rem !important;
+    padding-bottom: 4.5rem !important; }
   .pt-xl-0 {
     padding-top: 0 !important; }
   .pt-xl-1 {
@@ -8287,15 +7635,11 @@ button.close {
   .pt-xl-3 {
     padding-top: 1rem !important; }
   .pt-xl-4 {
-    padding-top: 1.25rem !important; }
+    padding-top: 1.5rem !important; }
   .pt-xl-5 {
-    padding-top: 2rem !important; }
-  .pt-xl-6 {
     padding-top: 3rem !important; }
-  .pt-xl-7 {
-    padding-top: 6rem !important; }
-  .pt-xl-8 {
-    padding-top: 9rem !important; }
+  .pt-xl-6 {
+    padding-top: 4.5rem !important; }
   .pr-xl-0 {
     padding-right: 0 !important; }
   .pr-xl-1 {
@@ -8305,15 +7649,11 @@ button.close {
   .pr-xl-3 {
     padding-right: 1rem !important; }
   .pr-xl-4 {
-    padding-right: 1.25rem !important; }
+    padding-right: 1.5rem !important; }
   .pr-xl-5 {
-    padding-right: 2rem !important; }
-  .pr-xl-6 {
     padding-right: 3rem !important; }
-  .pr-xl-7 {
-    padding-right: 6rem !important; }
-  .pr-xl-8 {
-    padding-right: 9rem !important; }
+  .pr-xl-6 {
+    padding-right: 4.5rem !important; }
   .pb-xl-0 {
     padding-bottom: 0 !important; }
   .pb-xl-1 {
@@ -8323,15 +7663,11 @@ button.close {
   .pb-xl-3 {
     padding-bottom: 1rem !important; }
   .pb-xl-4 {
-    padding-bottom: 1.25rem !important; }
+    padding-bottom: 1.5rem !important; }
   .pb-xl-5 {
-    padding-bottom: 2rem !important; }
-  .pb-xl-6 {
     padding-bottom: 3rem !important; }
-  .pb-xl-7 {
-    padding-bottom: 6rem !important; }
-  .pb-xl-8 {
-    padding-bottom: 9rem !important; }
+  .pb-xl-6 {
+    padding-bottom: 4.5rem !important; }
   .pl-xl-0 {
     padding-left: 0 !important; }
   .pl-xl-1 {
@@ -8341,15 +7677,11 @@ button.close {
   .pl-xl-3 {
     padding-left: 1rem !important; }
   .pl-xl-4 {
-    padding-left: 1.25rem !important; }
+    padding-left: 1.5rem !important; }
   .pl-xl-5 {
-    padding-left: 2rem !important; }
-  .pl-xl-6 {
     padding-left: 3rem !important; }
-  .pl-xl-7 {
-    padding-left: 6rem !important; }
-  .pl-xl-8 {
-    padding-left: 9rem !important; }
+  .pl-xl-6 {
+    padding-left: 4.5rem !important; }
   .text-xl-left {
     text-align: left !important; }
   .text-xl-right {
@@ -8383,9 +7715,11 @@ html {
 
 body {
   overflow-y: scroll;
+  letter-spacing: -0.01em;
   touch-action: manipulation;
   text-rendering: optimizeLegibility;
-  font-feature-settings: "liga" 0; }
+  font-feature-settings: "liga" 0;
+  position: relative; }
   body .content *::-webkit-scrollbar {
     width: 6px;
     height: 6px;
@@ -8403,135 +7737,604 @@ body {
     body {
       background: transparent; } }
 
-/*
-Horizontal navbar
- */
-/*
-Vertical narrow navbar
- */
-/*
-Vertical navbar
- */
-/*
-All navbars
+/**
+Navbar
  */
 .navbar {
-  padding-top: 0;
-  padding-bottom: 0;
   min-height: 3.5rem;
-  box-shadow: 0 0 0 1px rgba(134, 140, 151, 0.24);
-  z-index: 1030; }
-  @media print {
-    .navbar {
-      display: none;
-      margin: 0 !important; } }
-  .navbar .nav-link {
-    line-height: 1;
-    min-width: 2rem;
-    min-height: 2rem;
-    position: relative;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    text-align: center; }
-  .navbar .nav-link-icon {
-    font-size: 1rem;
-    width: 1rem;
-    height: 1rem;
-    display: block;
-    margin-right: .5rem;
-    line-height: .99; }
+  align-items: stretch;
+  background: transparent;
+  color: rgba(53, 64, 82, 0.72); }
+  .navbar::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    -webkit-transition: .3s background;
+    transition: .3s background; }
+  .navbar::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background: #dee1e7; }
+  .navbar::-webkit-scrollbar-corner {
+    background: transparent; }
+  .navbar:hover::-webkit-scrollbar-thumb {
+    background: #cbcfd6;
+    background: #cbcfd6; }
+  .navbar .text-muted {
+    color: rgba(53, 64, 82, 0.5184) !important; }
+  .navbar .navbar-brand {
+    color: #354052; }
+    .navbar .navbar-brand:hover, .navbar .navbar-brand:focus {
+      color: #354052;
+      opacity: .8; }
+  .navbar .navbar-nav .nav-link {
+    color: rgba(53, 64, 82, 0.72); }
+    .navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link:focus {
+      color: #354052; }
+    .navbar .navbar-nav .nav-link.disabled {
+      color: rgba(53, 64, 82, 0.3); }
+  .navbar .navbar-nav .show > .nav-link,
+  .navbar .navbar-nav .active > .nav-link,
+  .navbar .navbar-nav .nav-link.show,
+  .navbar .navbar-nav .nav-link.active {
+    color: #354052; }
+  .navbar .navbar-toggler {
+    color: #354052;
+    border-color: transparent; }
+  .navbar .navbar-text {
+    color: rgba(53, 64, 82, 0.72); }
+    .navbar .navbar-text a,
+    .navbar .navbar-text a:hover,
+    .navbar .navbar-text a:focus {
+      color: rgba(53, 64, 82, 0.72); }
+  @media not print {
+    .theme-dark .navbar {
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+      background: #354052;
+      color: rgba(255, 255, 255, 0.72); }
+      .theme-dark .navbar::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+        -webkit-transition: .3s background;
+        transition: .3s background; }
+      .theme-dark .navbar::-webkit-scrollbar-thumb {
+        border-radius: 5px;
+        background: #dee1e7; }
+      .theme-dark .navbar::-webkit-scrollbar-corner {
+        background: transparent; }
+      .theme-dark .navbar:hover::-webkit-scrollbar-thumb {
+        background: #cbcfd6;
+        background: #cbcfd6; }
+      .theme-dark .navbar .text-muted {
+        color: rgba(255, 255, 255, 0.5184) !important; }
+      .theme-dark .navbar .navbar-brand {
+        color: #ffffff; }
+        .theme-dark .navbar .navbar-brand:hover, .theme-dark .navbar .navbar-brand:focus {
+          color: #ffffff;
+          opacity: .8; }
+      .theme-dark .navbar .navbar-nav .nav-link {
+        color: rgba(255, 255, 255, 0.72); }
+        .theme-dark .navbar .navbar-nav .nav-link:hover, .theme-dark .navbar .navbar-nav .nav-link:focus {
+          color: #ffffff; }
+        .theme-dark .navbar .navbar-nav .nav-link.disabled {
+          color: rgba(255, 255, 255, 0.3); }
+      .theme-dark .navbar .navbar-nav .show > .nav-link,
+      .theme-dark .navbar .navbar-nav .active > .nav-link,
+      .theme-dark .navbar .navbar-nav .nav-link.show,
+      .theme-dark .navbar .navbar-nav .nav-link.active {
+        color: #ffffff; }
+      .theme-dark .navbar .navbar-toggler {
+        color: #ffffff;
+        border-color: transparent; }
+      .theme-dark .navbar .navbar-text {
+        color: rgba(255, 255, 255, 0.72); }
+        .theme-dark .navbar .navbar-text a,
+        .theme-dark .navbar .navbar-text a:hover,
+        .theme-dark .navbar .navbar-text a:focus {
+          color: rgba(255, 255, 255, 0.72); }
+      .theme-dark .navbar::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+        -webkit-transition: .3s background;
+        transition: .3s background; }
+      .theme-dark .navbar::-webkit-scrollbar-thumb {
+        border-radius: 5px;
+        background: transparent; }
+      .theme-dark .navbar::-webkit-scrollbar-corner {
+        background: transparent; }
+      .theme-dark .navbar:hover::-webkit-scrollbar-thumb {
+        background: #cbcfd6;
+        background: #5d6675; }
+      .theme-dark .navbar .input-icon-addon {
+        color: rgba(245, 247, 251, 0.64); }
+      .theme-dark .navbar .form-control {
+        border-color: transparent;
+        background-color: rgba(0, 0, 0, 0.1); }
+        .theme-dark .navbar .form-control::-webkit-input-placeholder {
+          color: rgba(245, 247, 251, 0.64); }
+        .theme-dark .navbar .form-control::-moz-placeholder {
+          color: rgba(245, 247, 251, 0.64); }
+        .theme-dark .navbar .form-control:-ms-input-placeholder {
+          color: rgba(245, 247, 251, 0.64); }
+        .theme-dark .navbar .form-control::-ms-input-placeholder {
+          color: rgba(245, 247, 251, 0.64); }
+        .theme-dark .navbar .form-control::placeholder {
+          color: rgba(245, 247, 251, 0.64); } }
+  @media not print and (prefers-color-scheme: dark) {
+    .theme-dark-auto .navbar {
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+      background: #354052;
+      color: rgba(255, 255, 255, 0.72); }
+      .theme-dark-auto .navbar::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+        -webkit-transition: .3s background;
+        transition: .3s background; }
+      .theme-dark-auto .navbar::-webkit-scrollbar-thumb {
+        border-radius: 5px;
+        background: #dee1e7; }
+      .theme-dark-auto .navbar::-webkit-scrollbar-corner {
+        background: transparent; }
+      .theme-dark-auto .navbar:hover::-webkit-scrollbar-thumb {
+        background: #cbcfd6;
+        background: #cbcfd6; }
+      .theme-dark-auto .navbar .text-muted {
+        color: rgba(255, 255, 255, 0.5184) !important; }
+      .theme-dark-auto .navbar .navbar-brand {
+        color: #ffffff; }
+        .theme-dark-auto .navbar .navbar-brand:hover, .theme-dark-auto .navbar .navbar-brand:focus {
+          color: #ffffff;
+          opacity: .8; }
+      .theme-dark-auto .navbar .navbar-nav .nav-link {
+        color: rgba(255, 255, 255, 0.72); }
+        .theme-dark-auto .navbar .navbar-nav .nav-link:hover, .theme-dark-auto .navbar .navbar-nav .nav-link:focus {
+          color: #ffffff; }
+        .theme-dark-auto .navbar .navbar-nav .nav-link.disabled {
+          color: rgba(255, 255, 255, 0.3); }
+      .theme-dark-auto .navbar .navbar-nav .show > .nav-link,
+      .theme-dark-auto .navbar .navbar-nav .active > .nav-link,
+      .theme-dark-auto .navbar .navbar-nav .nav-link.show,
+      .theme-dark-auto .navbar .navbar-nav .nav-link.active {
+        color: #ffffff; }
+      .theme-dark-auto .navbar .navbar-toggler {
+        color: #ffffff;
+        border-color: transparent; }
+      .theme-dark-auto .navbar .navbar-text {
+        color: rgba(255, 255, 255, 0.72); }
+        .theme-dark-auto .navbar .navbar-text a,
+        .theme-dark-auto .navbar .navbar-text a:hover,
+        .theme-dark-auto .navbar .navbar-text a:focus {
+          color: rgba(255, 255, 255, 0.72); }
+      .theme-dark-auto .navbar::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+        -webkit-transition: .3s background;
+        transition: .3s background; }
+      .theme-dark-auto .navbar::-webkit-scrollbar-thumb {
+        border-radius: 5px;
+        background: transparent; }
+      .theme-dark-auto .navbar::-webkit-scrollbar-corner {
+        background: transparent; }
+      .theme-dark-auto .navbar:hover::-webkit-scrollbar-thumb {
+        background: #cbcfd6;
+        background: #5d6675; }
+      .theme-dark-auto .navbar .input-icon-addon {
+        color: rgba(245, 247, 251, 0.64); }
+      .theme-dark-auto .navbar .form-control {
+        border-color: transparent;
+        background-color: rgba(0, 0, 0, 0.1); }
+        .theme-dark-auto .navbar .form-control::-webkit-input-placeholder {
+          color: rgba(245, 247, 251, 0.64); }
+        .theme-dark-auto .navbar .form-control::-moz-placeholder {
+          color: rgba(245, 247, 251, 0.64); }
+        .theme-dark-auto .navbar .form-control:-ms-input-placeholder {
+          color: rgba(245, 247, 251, 0.64); }
+        .theme-dark-auto .navbar .form-control::-ms-input-placeholder {
+          color: rgba(245, 247, 251, 0.64); }
+        .theme-dark-auto .navbar .form-control::placeholder {
+          color: rgba(245, 247, 251, 0.64); } }
+  .navbar .dropdown-menu {
+    position: absolute; }
   .navbar .navbar-nav {
-    align-items: center; }
+    min-height: 3rem; }
     .navbar .navbar-nav .nav-link {
-      color: inherit;
-      opacity: 0.6;
-      transition: .3s opacity;
+      position: relative;
+      min-width: 2rem;
+      min-height: 2rem;
       justify-content: center; }
-      .navbar .navbar-nav .nav-link:hover {
-        color: inherit;
-        opacity: 1; }
-      .navbar .navbar-nav .nav-link.disabled {
-        color: inherit;
-        opacity: 0.2; }
-    .navbar .navbar-nav .show > .nav-link,
-    .navbar .navbar-nav .active > .nav-link,
-    .navbar .navbar-nav .nav-link.show,
-    .navbar .navbar-nav .nav-link.active {
-      color: inherit;
-      opacity: 1; }
+      .navbar .navbar-nav .nav-link .badge {
+        position: absolute;
+        top: .375rem;
+        right: .375rem;
+        transform: translate(50%, -50%); }
 
-.navbar-expand-xs .navbar-nav {
-  margin-left: -0.75rem; }
-  .navbar-expand-xs .navbar-nav .nav-item {
-    position: relative; }
+@media (max-width: 32.98rem) {
+  .navbar-expand-sm .navbar-collapse {
+    flex-direction: column; }
+    .navbar-expand-sm .navbar-collapse [class*="container"] {
+      flex-direction: column;
+      align-items: stretch; }
+    .navbar-expand-sm .navbar-collapse .navbar-nav {
+      margin-left: -0.75rem;
+      margin-right: -0.75rem; }
+      .navbar-expand-sm .navbar-collapse .navbar-nav .nav-link {
+        padding: 0.5rem 0.75rem;
+        justify-content: flex-start; }
+    .navbar-expand-sm .navbar-collapse .dropdown-menu {
+      padding: 0;
+      background: transparent;
+      position: static;
+      color: inherit;
+      box-shadow: none;
+      border: none;
+      -moz-columns: 1;
+      columns: 1;
+      min-width: 0; }
+      .navbar-expand-sm .navbar-collapse .dropdown-menu .dropdown-item {
+        min-width: 0;
+        display: flex;
+        width: auto;
+        padding-left: 2.25rem; }
+    .navbar-expand-sm .navbar-collapse .dropdown-toggle:after {
+      margin-left: auto; }
+    .navbar-expand-sm .navbar-collapse .nav-item.active:after {
+      border-bottom-width: 0;
+      border-left-width: 2px;
+      right: auto;
+      top: 0;
+      bottom: 0; } }
 
 @media (min-width: 33rem) {
-  .navbar-expand-sm .navbar-nav {
-    margin-left: -0.75rem; }
-    .navbar-expand-sm .navbar-nav .nav-item {
-      position: relative; } }
+  .navbar-expand-sm .navbar-collapse {
+    width: auto;
+    flex: 1 1 auto; }
+  .navbar-expand-sm.navbar-dark .nav-item.active .nav-link,
+  .navbar-expand-sm .navbar-dark .nav-item.active .nav-link {
+    background-color: rgba(0, 0, 0, 0.1); }
+  .navbar-expand-sm.navbar-light .nav-item.active,
+  .navbar-expand-sm .navbar-light .nav-item.active {
+    position: relative; }
+    .navbar-expand-sm.navbar-light .nav-item.active:after,
+    .navbar-expand-sm .navbar-light .nav-item.active:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: calc(-0.25rem - 1px);
+      border: 0 solid #206bc4;
+      border-bottom-width: 2px; } }
+
+@media (max-width: 47.98rem) {
+  .navbar-expand-md .navbar-collapse {
+    flex-direction: column; }
+    .navbar-expand-md .navbar-collapse [class*="container"] {
+      flex-direction: column;
+      align-items: stretch; }
+    .navbar-expand-md .navbar-collapse .navbar-nav {
+      margin-left: -0.75rem;
+      margin-right: -0.75rem; }
+      .navbar-expand-md .navbar-collapse .navbar-nav .nav-link {
+        padding: 0.5rem 0.75rem;
+        justify-content: flex-start; }
+    .navbar-expand-md .navbar-collapse .dropdown-menu {
+      padding: 0;
+      background: transparent;
+      position: static;
+      color: inherit;
+      box-shadow: none;
+      border: none;
+      -moz-columns: 1;
+      columns: 1;
+      min-width: 0; }
+      .navbar-expand-md .navbar-collapse .dropdown-menu .dropdown-item {
+        min-width: 0;
+        display: flex;
+        width: auto;
+        padding-left: 2.25rem; }
+    .navbar-expand-md .navbar-collapse .dropdown-toggle:after {
+      margin-left: auto; }
+    .navbar-expand-md .navbar-collapse .nav-item.active:after {
+      border-bottom-width: 0;
+      border-left-width: 2px;
+      right: auto;
+      top: 0;
+      bottom: 0; } }
 
 @media (min-width: 48rem) {
-  .navbar-expand-md .navbar-nav {
-    margin-left: -0.75rem; }
-    .navbar-expand-md .navbar-nav .nav-item {
-      position: relative; } }
+  .navbar-expand-md .navbar-collapse {
+    width: auto;
+    flex: 1 1 auto; }
+  .navbar-expand-md.navbar-dark .nav-item.active .nav-link,
+  .navbar-expand-md .navbar-dark .nav-item.active .nav-link {
+    background-color: rgba(0, 0, 0, 0.1); }
+  .navbar-expand-md.navbar-light .nav-item.active,
+  .navbar-expand-md .navbar-light .nav-item.active {
+    position: relative; }
+    .navbar-expand-md.navbar-light .nav-item.active:after,
+    .navbar-expand-md .navbar-light .nav-item.active:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: calc(-0.25rem - 1px);
+      border: 0 solid #206bc4;
+      border-bottom-width: 2px; } }
+
+@media (max-width: 63.98rem) {
+  .navbar-expand-lg .navbar-collapse {
+    flex-direction: column; }
+    .navbar-expand-lg .navbar-collapse [class*="container"] {
+      flex-direction: column;
+      align-items: stretch; }
+    .navbar-expand-lg .navbar-collapse .navbar-nav {
+      margin-left: -0.75rem;
+      margin-right: -0.75rem; }
+      .navbar-expand-lg .navbar-collapse .navbar-nav .nav-link {
+        padding: 0.5rem 0.75rem;
+        justify-content: flex-start; }
+    .navbar-expand-lg .navbar-collapse .dropdown-menu {
+      padding: 0;
+      background: transparent;
+      position: static;
+      color: inherit;
+      box-shadow: none;
+      border: none;
+      -moz-columns: 1;
+      columns: 1;
+      min-width: 0; }
+      .navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item {
+        min-width: 0;
+        display: flex;
+        width: auto;
+        padding-left: 2.25rem; }
+    .navbar-expand-lg .navbar-collapse .dropdown-toggle:after {
+      margin-left: auto; }
+    .navbar-expand-lg .navbar-collapse .nav-item.active:after {
+      border-bottom-width: 0;
+      border-left-width: 2px;
+      right: auto;
+      top: 0;
+      bottom: 0; } }
 
 @media (min-width: 64rem) {
-  .navbar-expand-lg .navbar-nav {
-    margin-left: -0.75rem; }
-    .navbar-expand-lg .navbar-nav .nav-item {
-      position: relative; } }
+  .navbar-expand-lg .navbar-collapse {
+    width: auto;
+    flex: 1 1 auto; }
+  .navbar-expand-lg.navbar-dark .nav-item.active .nav-link,
+  .navbar-expand-lg .navbar-dark .nav-item.active .nav-link {
+    background-color: rgba(0, 0, 0, 0.1); }
+  .navbar-expand-lg.navbar-light .nav-item.active,
+  .navbar-expand-lg .navbar-light .nav-item.active {
+    position: relative; }
+    .navbar-expand-lg.navbar-light .nav-item.active:after,
+    .navbar-expand-lg .navbar-light .nav-item.active:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: calc(-0.25rem - 1px);
+      border: 0 solid #206bc4;
+      border-bottom-width: 2px; } }
+
+@media (max-width: 75.23rem) {
+  .navbar-expand-xl .navbar-collapse {
+    flex-direction: column; }
+    .navbar-expand-xl .navbar-collapse [class*="container"] {
+      flex-direction: column;
+      align-items: stretch; }
+    .navbar-expand-xl .navbar-collapse .navbar-nav {
+      margin-left: -0.75rem;
+      margin-right: -0.75rem; }
+      .navbar-expand-xl .navbar-collapse .navbar-nav .nav-link {
+        padding: 0.5rem 0.75rem;
+        justify-content: flex-start; }
+    .navbar-expand-xl .navbar-collapse .dropdown-menu {
+      padding: 0;
+      background: transparent;
+      position: static;
+      color: inherit;
+      box-shadow: none;
+      border: none;
+      -moz-columns: 1;
+      columns: 1;
+      min-width: 0; }
+      .navbar-expand-xl .navbar-collapse .dropdown-menu .dropdown-item {
+        min-width: 0;
+        display: flex;
+        width: auto;
+        padding-left: 2.25rem; }
+    .navbar-expand-xl .navbar-collapse .dropdown-toggle:after {
+      margin-left: auto; }
+    .navbar-expand-xl .navbar-collapse .nav-item.active:after {
+      border-bottom-width: 0;
+      border-left-width: 2px;
+      right: auto;
+      top: 0;
+      bottom: 0; } }
 
 @media (min-width: 75.25rem) {
-  .navbar-expand-xl .navbar-nav {
-    margin-left: -0.75rem; }
-    .navbar-expand-xl .navbar-nav .nav-item {
-      position: relative; } }
+  .navbar-expand-xl .navbar-collapse {
+    width: auto;
+    flex: 1 1 auto; }
+  .navbar-expand-xl.navbar-dark .nav-item.active .nav-link,
+  .navbar-expand-xl .navbar-dark .nav-item.active .nav-link {
+    background-color: rgba(0, 0, 0, 0.1); }
+  .navbar-expand-xl.navbar-light .nav-item.active,
+  .navbar-expand-xl .navbar-light .nav-item.active {
+    position: relative; }
+    .navbar-expand-xl.navbar-light .nav-item.active:after,
+    .navbar-expand-xl .navbar-light .nav-item.active:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: calc(-0.25rem - 1px);
+      border: 0 solid #206bc4;
+      border-bottom-width: 2px; } }
 
-.navbar-side {
-  margin-left: auto;
-  padding-left: 1.5rem; }
-  .navbar-side > * {
-    margin-left: 1rem; }
+.navbar-expand .navbar-collapse {
+  flex-direction: column; }
+  .navbar-expand .navbar-collapse [class*="container"] {
+    flex-direction: column;
+    align-items: stretch; }
+  .navbar-expand .navbar-collapse .navbar-nav {
+    margin-left: -0.75rem;
+    margin-right: -0.75rem; }
+    .navbar-expand .navbar-collapse .navbar-nav .nav-link {
+      padding: 0.5rem 0.75rem;
+      justify-content: flex-start; }
+  .navbar-expand .navbar-collapse .dropdown-menu {
+    padding: 0;
+    background: transparent;
+    position: static;
+    color: inherit;
+    box-shadow: none;
+    border: none;
+    -moz-columns: 1;
+    columns: 1;
+    min-width: 0; }
+    .navbar-expand .navbar-collapse .dropdown-menu .dropdown-item {
+      min-width: 0;
+      display: flex;
+      width: auto;
+      padding-left: 2.25rem; }
+  .navbar-expand .navbar-collapse .dropdown-toggle:after {
+    margin-left: auto; }
+  .navbar-expand .navbar-collapse .nav-item.active:after {
+    border-bottom-width: 0;
+    border-left-width: 2px;
+    right: auto;
+    top: 0;
+    bottom: 0; }
 
-.navbar-heading {
-  display: none; }
+.navbar-expand .navbar-collapse {
+  width: auto;
+  flex: 1 1 auto; }
+
+.navbar-expand.navbar-dark .nav-item.active .nav-link,
+.navbar-expand .navbar-dark .nav-item.active .nav-link {
+  background-color: rgba(0, 0, 0, 0.1); }
+
+.navbar-expand.navbar-light .nav-item.active,
+.navbar-expand .navbar-light .nav-item.active {
+  position: relative; }
+  .navbar-expand.navbar-light .nav-item.active:after,
+  .navbar-expand .navbar-light .nav-item.active:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: calc(-0.25rem - 1px);
+    border: 0 solid #206bc4;
+    border-bottom-width: 2px; }
 
 /**
 Navbar brand
  */
 .navbar-brand {
-  padding: 0; }
+  display: inline-flex;
+  align-items: center;
+  font-weight: 500; }
 
-.navbar-brand-logo {
+.navbar-brand-image {
+  display: block;
   height: 2rem; }
 
-.navbar-brand-logo-small {
-  display: none; }
+/**
+Navbar toggler
+ */
+.navbar-toggler {
+  border: 0;
+  width: 2rem;
+  height: 2rem;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center; }
 
+.navbar-toggler-icon {
+  height: 2px;
+  width: 1.25em;
+  background: currentColor;
+  border-radius: 10px;
+  transition: 0.2s 0.2s top, 0.2s 0.2s bottom, 0.2s transform, 0s 0.2s opacity;
+  position: relative; }
+  .navbar-toggler-icon:before, .navbar-toggler-icon:after {
+    content: '';
+    display: block;
+    height: inherit;
+    width: inherit;
+    border-radius: inherit;
+    background: inherit;
+    position: absolute;
+    left: 0;
+    transition: inherit; }
+  .navbar-toggler-icon:before {
+    top: -.45em; }
+  .navbar-toggler-icon:after {
+    bottom: -.45em; }
+  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
+    transform: rotate(45deg);
+    transition: .3s top, .3s bottom, .3s .3s transform, 0s .3s opacity; }
+    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
+      top: 0;
+      transform: rotate(-90deg); }
+    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
+      bottom: 0;
+      opacity: 0; }
+
+/**
+Navbar light
+ */
 .navbar-light {
-  background: #ffffff; }
-  .navbar-light::-webkit-scrollbar {
+  box-shadow: 0 0 0 1px rgba(110, 117, 130, 0.2);
+  background-color: #ffffff; }
+
+/**
+Navbar dark
+ */
+.navbar-dark {
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+  background: #354052;
+  color: rgba(255, 255, 255, 0.72); }
+  .navbar-dark::-webkit-scrollbar {
     width: 6px;
     height: 6px;
     -webkit-transition: .3s background;
     transition: .3s background; }
-  .navbar-light::-webkit-scrollbar-thumb {
+  .navbar-dark::-webkit-scrollbar-thumb {
     border-radius: 5px;
     background: #dee1e7; }
-  .navbar-light::-webkit-scrollbar-corner {
+  .navbar-dark::-webkit-scrollbar-corner {
     background: transparent; }
-  .navbar-light:hover::-webkit-scrollbar-thumb {
+  .navbar-dark:hover::-webkit-scrollbar-thumb {
     background: #cbcfd6;
     background: #cbcfd6; }
-
-.navbar-dark {
-  background: #354052;
-  color: #ffffff;
-  box-shadow: 0 0 0 1px #2f3949; }
+  .navbar-dark .text-muted {
+    color: rgba(255, 255, 255, 0.5184) !important; }
+  .navbar-dark .navbar-brand {
+    color: #ffffff; }
+    .navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
+      color: #ffffff;
+      opacity: .8; }
+  .navbar-dark .navbar-nav .nav-link {
+    color: rgba(255, 255, 255, 0.72); }
+    .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
+      color: #ffffff; }
+    .navbar-dark .navbar-nav .nav-link.disabled {
+      color: rgba(255, 255, 255, 0.3); }
+  .navbar-dark .navbar-nav .show > .nav-link,
+  .navbar-dark .navbar-nav .active > .nav-link,
+  .navbar-dark .navbar-nav .nav-link.show,
+  .navbar-dark .navbar-nav .nav-link.active {
+    color: #ffffff; }
+  .navbar-dark .navbar-toggler {
+    color: #ffffff;
+    border-color: transparent; }
+  .navbar-dark .navbar-text {
+    color: rgba(255, 255, 255, 0.72); }
+    .navbar-dark .navbar-text a,
+    .navbar-dark .navbar-text a:hover,
+    .navbar-dark .navbar-text a:focus {
+      color: rgba(255, 255, 255, 0.72); }
   .navbar-dark::-webkit-scrollbar {
     width: 6px;
     height: 6px;
@@ -8545,854 +8348,413 @@ Navbar brand
   .navbar-dark:hover::-webkit-scrollbar-thumb {
     background: #cbcfd6;
     background: #5d6675; }
-  .navbar-dark .text-muted {
-    color: inherit !important;
-    opacity: 0.6; }
-  .navbar-dark .navbar-brand-autodark {
-    -webkit-filter: brightness(0) invert(1);
-    filter: brightness(0) invert(1); }
+  .navbar-dark .input-icon-addon {
+    color: rgba(245, 247, 251, 0.64); }
   .navbar-dark .form-control {
     border-color: transparent;
-    background: #3b475b;
-    color: #ffffff; }
+    background-color: rgba(0, 0, 0, 0.1); }
+    .navbar-dark .form-control::-webkit-input-placeholder {
+      color: rgba(245, 247, 251, 0.64); }
+    .navbar-dark .form-control::-moz-placeholder {
+      color: rgba(245, 247, 251, 0.64); }
+    .navbar-dark .form-control:-ms-input-placeholder {
+      color: rgba(245, 247, 251, 0.64); }
+    .navbar-dark .form-control::-ms-input-placeholder {
+      color: rgba(245, 247, 251, 0.64); }
+    .navbar-dark .form-control::placeholder {
+      color: rgba(245, 247, 251, 0.64); }
+
+/**
+Navbar nav
+ */
+.navbar-nav {
+  align-items: stretch; }
+  .navbar-nav .nav-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center; }
+
+/**
+Navbar side
+ */
+.navbar-side {
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around; }
 
 /**
 Navbar vertical
  */
-.navbar:not(.navbar-vertical) .d-none-navbar-horizontal,
-.navbar:not(.navbar-vertical) ~ * .d-none-navbar-vertical-narrow {
-  display: none !important; }
-
-.navbar:not(.navbar-vertical) .dropdown-menu {
-  margin-right: -.25rem; }
-
-.navbar-vertical.navbar-expand-xs {
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 15.625rem;
-  z-index: 1030;
-  min-height: auto;
-  align-items: start;
-  overflow: auto; }
-  .navbar-vertical.navbar-expand-xs > [class*="container"] {
-    flex-direction: column;
-    align-items: stretch;
-    padding-left: 0;
-    padding-right: 0;
-    min-height: 100%; }
-  .navbar-vertical.navbar-expand-xs ~ .navbar,
-  .navbar-vertical.navbar-expand-xs ~ .content {
-    margin-left: 15.625rem; }
-    .navbar-vertical.navbar-expand-xs ~ .navbar [class*="container"],
-    .navbar-vertical.navbar-expand-xs ~ .content [class*="container"] {
-      padding-left: 1.25rem;
-      padding-right: 1.25rem; }
-  .navbar-vertical.navbar-expand-xs .d-none-navbar-vertical,
-  .navbar-vertical.navbar-expand-xs ~ * .d-none-navbar-vertical {
-    display: none !important; }
-  .navbar-vertical.navbar-expand-xs .navbar-brand {
-    display: flex;
-    width: 100%;
-    margin: 0;
-    text-align: center;
-    height: 3.5rem;
-    align-items: center;
-    justify-content: center; }
-  .navbar-vertical.navbar-expand-xs .navbar-heading {
-    font-size: 0.6875rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: .04em;
-    color: #868c97;
-    display: block;
-    margin-bottom: .5rem; }
-  .navbar-vertical.navbar-expand-xs .navbar-collapse {
-    flex-direction: column;
-    text-align: left;
-    align-items: normal;
-    padding: 1rem 1rem; }
-  .navbar-vertical.navbar-expand-xs .navbar-nav {
-    flex-direction: column;
-    align-items: normal;
-    margin-left: -1rem;
-    margin-right: -1rem; }
-    .navbar-vertical.navbar-expand-xs .navbar-nav .nav-link {
-      min-height: 0;
-      height: 2.5rem;
-      padding-left: 1rem;
-      padding-right: 1rem;
-      justify-content: start; }
-    .navbar-vertical.navbar-expand-xs .navbar-nav .nav-item.active {
-      font-weight: 600; }
-      .navbar-vertical.navbar-expand-xs .navbar-nav .nav-item.active > .nav-link:before {
-        left: 0;
-        right: auto;
-        top: 0;
-        bottom: 0;
-        height: auto;
-        width: 2px; }
-  .navbar-vertical.navbar-expand-xs .navbar-side {
-    margin-left: 0;
-    margin-top: auto;
-    padding-left: 0;
-    padding-top: 1rem; }
-    .navbar-vertical.navbar-expand-xs .navbar-side > * {
-      margin-left: 0;
-      margin-top: 1rem; }
-  .navbar-vertical.navbar-expand-xs.navbar-right {
-    left: auto;
-    right: 0; }
-    .navbar-vertical.navbar-expand-xs.navbar-right ~ .navbar,
-    .navbar-vertical.navbar-expand-xs.navbar-right ~ .content {
-      margin-left: 0;
-      margin-right: 15.625rem; }
-  .navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .d-none-navbar-vertical-wide,
-  .navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) ~ * .d-none-navbar-vertical-wide {
-    display: none !important; }
-  .navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .nav-item.active > .dropdown-menu {
-    display: block; }
-  .navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .dropdown-menu {
-    position: static;
-    background: inherit;
-    border: 0;
-    box-shadow: none;
-    padding: 0;
-    margin: 0;
-    color: inherit;
-    -moz-columns: 1;
-    columns: 1; }
-    .navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .dropdown-menu:before, .navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .dropdown-menu:after {
-      content: none; }
-  .navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .dropdown-item {
-    padding-left: 2.5rem;
-    opacity: 0.6;
-    color: inherit;
-    background: transparent; }
-    .navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .dropdown-item.active {
-      font-weight: 600;
-      opacity: 1; }
-    .navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .dropdown-item:hover {
-      opacity: 1; }
-  .navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .dropdown-toggle:after {
-    margin-left: auto; }
-  .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow {
-    width: 4rem;
-    overflow: visible; }
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .d-none-navbar-vertical-narrow,
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow ~ * .d-none-navbar-vertical-narrow {
-      display: none !important; }
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .navbar-nav {
-      margin-top: 0; }
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .nav-link {
-      height: 3rem; }
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .nav-link-title,
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .navbar-heading {
-      display: none; }
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .nav-link-icon {
-      margin: 0 auto;
-      font-size: 1.125rem;
-      width: 1.125rem;
-      height: 1.125rem; }
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .navbar-brand-logo-large {
-      display: none; }
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .navbar-brand-logo-small {
-      display: inline-block; }
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow ~ .navbar,
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow ~ .content {
-      margin-left: 4rem; }
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .dropdown-toggle:after {
-      content: none; }
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .dropdown-menu {
-      left: 100%;
-      top: 0;
-      margin: 0 0 0 -4px; }
-      .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .dropdown-menu:before, .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .dropdown-menu:after {
-        content: none; }
-      .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .dropdown-menu.dropdown-menu-right {
-        top: auto;
-        bottom: 0;
-        right: auto; }
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow.navbar-right ~ .navbar,
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow.navbar-right ~ .content {
-      margin-left: 0;
-      margin-right: 4rem; }
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow.navbar-right .dropdown-menu {
-      margin: 0 -4px 0 0;
-      left: auto;
-      right: 100%; }
-  .navbar-vertical.navbar-expand-xs .d-none-navbar-horizontal,
-  .navbar-vertical.navbar-expand-xs ~ * .d-none-navbar-vertical-narrow {
-    display: none !important; }
-  .navbar-vertical.navbar-expand-xs .dropdown-menu {
-    margin-right: -.25rem; }
-
 @media (min-width: 33rem) {
   .navbar-vertical.navbar-expand-sm {
+    width: 15rem;
     position: fixed;
-    left: 0;
     top: 0;
+    left: 0;
     bottom: 0;
-    width: 15.625rem;
     z-index: 1030;
-    min-height: auto;
-    align-items: start;
-    overflow: auto; }
-    .navbar-vertical.navbar-expand-sm > [class*="container"] {
-      flex-direction: column;
-      align-items: stretch;
-      padding-left: 0;
-      padding-right: 0;
-      min-height: 100%; }
-    .navbar-vertical.navbar-expand-sm ~ .navbar,
-    .navbar-vertical.navbar-expand-sm ~ .content {
-      margin-left: 15.625rem; }
-      .navbar-vertical.navbar-expand-sm ~ .navbar [class*="container"],
-      .navbar-vertical.navbar-expand-sm ~ .content [class*="container"] {
-        padding-left: 1.25rem;
-        padding-right: 1.25rem; }
-    .navbar-vertical.navbar-expand-sm .d-none-navbar-vertical,
-    .navbar-vertical.navbar-expand-sm ~ * .d-none-navbar-vertical {
-      display: none !important; }
-    .navbar-vertical.navbar-expand-sm .navbar-brand {
-      display: flex;
-      width: 100%;
-      margin: 0;
-      text-align: center;
-      height: 3.5rem;
-      align-items: center;
-      justify-content: center; }
-    .navbar-vertical.navbar-expand-sm .navbar-heading {
-      font-size: 0.6875rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: .04em;
-      color: #868c97;
-      display: block;
-      margin-bottom: .5rem; }
-    .navbar-vertical.navbar-expand-sm .navbar-collapse {
-      flex-direction: column;
-      text-align: left;
-      align-items: normal;
-      padding: 1rem 1rem; }
-    .navbar-vertical.navbar-expand-sm .navbar-nav {
-      flex-direction: column;
-      align-items: normal;
-      margin-left: -1rem;
-      margin-right: -1rem; }
-      .navbar-vertical.navbar-expand-sm .navbar-nav .nav-link {
-        min-height: 0;
-        height: 2.5rem;
-        padding-left: 1rem;
-        padding-right: 1rem;
-        justify-content: start; }
-      .navbar-vertical.navbar-expand-sm .navbar-nav .nav-item.active {
-        font-weight: 600; }
-        .navbar-vertical.navbar-expand-sm .navbar-nav .nav-item.active > .nav-link:before {
-          left: 0;
-          right: auto;
-          top: 0;
-          bottom: 0;
-          height: auto;
-          width: 2px; }
-    .navbar-vertical.navbar-expand-sm .navbar-side {
-      margin-left: 0;
-      margin-top: auto;
-      padding-left: 0;
-      padding-top: 1rem; }
-      .navbar-vertical.navbar-expand-sm .navbar-side > * {
-        margin-left: 0;
-        margin-top: 1rem; }
+    align-items: flex-start;
+    transition: .3s transform;
+    overflow-x: auto; }
     .navbar-vertical.navbar-expand-sm.navbar-right {
       left: auto;
       right: 0; }
-      .navbar-vertical.navbar-expand-sm.navbar-right ~ .navbar,
-      .navbar-vertical.navbar-expand-sm.navbar-right ~ .content {
-        margin-left: 0;
-        margin-right: 15.625rem; }
-    .navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .d-none-navbar-vertical-wide,
-    .navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) ~ * .d-none-navbar-vertical-wide {
-      display: none !important; }
-    .navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .nav-item.active > .dropdown-menu {
-      display: block; }
-    .navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .dropdown-menu {
-      position: static;
-      background: inherit;
-      border: 0;
-      box-shadow: none;
-      padding: 0;
-      margin: 0;
-      color: inherit;
-      -moz-columns: 1;
-      columns: 1; }
-      .navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .dropdown-menu:before, .navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .dropdown-menu:after {
-        content: none; }
-    .navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .dropdown-item {
-      padding-left: 2.5rem;
-      opacity: 0.6;
-      color: inherit;
-      background: transparent; }
-      .navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .dropdown-item.active {
-        font-weight: 600;
-        opacity: 1; }
-      .navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .dropdown-item:hover {
-        opacity: 1; }
-    .navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .dropdown-toggle:after {
-      margin-left: auto; }
-    .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow {
-      width: 4rem;
-      overflow: visible; }
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .d-none-navbar-vertical-narrow,
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow ~ * .d-none-navbar-vertical-narrow {
-        display: none !important; }
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .navbar-nav {
-        margin-top: 0; }
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .nav-link {
-        height: 3rem; }
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .nav-link-title,
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .navbar-heading {
-        display: none; }
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .nav-link-icon {
-        margin: 0 auto;
-        font-size: 1.125rem;
-        width: 1.125rem;
-        height: 1.125rem; }
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .navbar-brand-logo-large {
-        display: none; }
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .navbar-brand-logo-small {
-        display: inline-block; }
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow ~ .navbar,
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow ~ .content {
-        margin-left: 4rem; }
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .dropdown-toggle:after {
-        content: none; }
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .dropdown-menu {
-        left: 100%;
+    .navbar-vertical.navbar-expand-sm .navbar-brand {
+      padding: 0.75rem 0;
+      justify-content: center; }
+    .navbar-vertical.navbar-expand-sm .navbar-collapse {
+      align-items: stretch; }
+    .navbar-vertical.navbar-expand-sm .navbar-nav {
+      flex-direction: column;
+      flex-grow: 1;
+      min-height: auto; }
+      .navbar-vertical.navbar-expand-sm .navbar-nav .nav-link {
+        padding-top: .5rem;
+        padding-bottom: .5rem; }
+    .navbar-vertical.navbar-expand-sm > [class*="container"] {
+      flex-direction: column;
+      align-items: stretch;
+      min-height: 100%;
+      justify-content: flex-start; }
+    .navbar-vertical.navbar-expand-sm ~ .page {
+      padding-left: 15rem; }
+      .navbar-vertical.navbar-expand-sm ~ .page [class*="container"] {
+        padding-left: 1.5rem;
+        padding-right: 1.5rem; }
+    .navbar-vertical.navbar-expand-sm.navbar-right ~ .page {
+      padding-left: 0;
+      padding-right: 15rem; }
+    .navbar-vertical.navbar-expand-sm .navbar-collapse {
+      flex-direction: column; }
+      .navbar-vertical.navbar-expand-sm .navbar-collapse [class*="container"] {
+        flex-direction: column;
+        align-items: stretch; }
+      .navbar-vertical.navbar-expand-sm .navbar-collapse .navbar-nav {
+        margin-left: -0.75rem;
+        margin-right: -0.75rem; }
+        .navbar-vertical.navbar-expand-sm .navbar-collapse .navbar-nav .nav-link {
+          padding: 0.5rem 0.75rem;
+          justify-content: flex-start; }
+      .navbar-vertical.navbar-expand-sm .navbar-collapse .dropdown-menu {
+        padding: 0;
+        background: transparent;
+        position: static;
+        color: inherit;
+        box-shadow: none;
+        border: none;
+        -moz-columns: 1;
+        columns: 1;
+        min-width: 0; }
+        .navbar-vertical.navbar-expand-sm .navbar-collapse .dropdown-menu .dropdown-item {
+          min-width: 0;
+          display: flex;
+          width: auto;
+          padding-left: 2.25rem; }
+      .navbar-vertical.navbar-expand-sm .navbar-collapse .dropdown-toggle:after {
+        margin-left: auto; }
+      .navbar-vertical.navbar-expand-sm .navbar-collapse .nav-item.active:after {
+        border-bottom-width: 0;
+        border-left-width: 2px;
+        right: auto;
         top: 0;
-        margin: 0 0 0 -4px; }
-        .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .dropdown-menu:before, .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .dropdown-menu:after {
-          content: none; }
-        .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .dropdown-menu.dropdown-menu-right {
-          top: auto;
-          bottom: 0;
-          right: auto; }
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow.navbar-right ~ .navbar,
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow.navbar-right ~ .content {
-        margin-left: 0;
-        margin-right: 4rem; }
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow.navbar-right .dropdown-menu {
-        margin: 0 -4px 0 0;
-        left: auto;
-        right: 100%; } }
-
-@media (max-width: 32.98rem) {
-  .navbar-vertical.navbar-expand-sm .d-none-navbar-horizontal,
-  .navbar-vertical.navbar-expand-sm ~ * .d-none-navbar-vertical-narrow {
-    display: none !important; }
-  .navbar-vertical.navbar-expand-sm .dropdown-menu {
-    margin-right: -.25rem; } }
+        bottom: 0; } }
 
 @media (min-width: 48rem) {
   .navbar-vertical.navbar-expand-md {
+    width: 15rem;
     position: fixed;
-    left: 0;
     top: 0;
+    left: 0;
     bottom: 0;
-    width: 15.625rem;
     z-index: 1030;
-    min-height: auto;
-    align-items: start;
-    overflow: auto; }
-    .navbar-vertical.navbar-expand-md > [class*="container"] {
-      flex-direction: column;
-      align-items: stretch;
-      padding-left: 0;
-      padding-right: 0;
-      min-height: 100%; }
-    .navbar-vertical.navbar-expand-md ~ .navbar,
-    .navbar-vertical.navbar-expand-md ~ .content {
-      margin-left: 15.625rem; }
-      .navbar-vertical.navbar-expand-md ~ .navbar [class*="container"],
-      .navbar-vertical.navbar-expand-md ~ .content [class*="container"] {
-        padding-left: 1.25rem;
-        padding-right: 1.25rem; }
-    .navbar-vertical.navbar-expand-md .d-none-navbar-vertical,
-    .navbar-vertical.navbar-expand-md ~ * .d-none-navbar-vertical {
-      display: none !important; }
-    .navbar-vertical.navbar-expand-md .navbar-brand {
-      display: flex;
-      width: 100%;
-      margin: 0;
-      text-align: center;
-      height: 3.5rem;
-      align-items: center;
-      justify-content: center; }
-    .navbar-vertical.navbar-expand-md .navbar-heading {
-      font-size: 0.6875rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: .04em;
-      color: #868c97;
-      display: block;
-      margin-bottom: .5rem; }
-    .navbar-vertical.navbar-expand-md .navbar-collapse {
-      flex-direction: column;
-      text-align: left;
-      align-items: normal;
-      padding: 1rem 1rem; }
-    .navbar-vertical.navbar-expand-md .navbar-nav {
-      flex-direction: column;
-      align-items: normal;
-      margin-left: -1rem;
-      margin-right: -1rem; }
-      .navbar-vertical.navbar-expand-md .navbar-nav .nav-link {
-        min-height: 0;
-        height: 2.5rem;
-        padding-left: 1rem;
-        padding-right: 1rem;
-        justify-content: start; }
-      .navbar-vertical.navbar-expand-md .navbar-nav .nav-item.active {
-        font-weight: 600; }
-        .navbar-vertical.navbar-expand-md .navbar-nav .nav-item.active > .nav-link:before {
-          left: 0;
-          right: auto;
-          top: 0;
-          bottom: 0;
-          height: auto;
-          width: 2px; }
-    .navbar-vertical.navbar-expand-md .navbar-side {
-      margin-left: 0;
-      margin-top: auto;
-      padding-left: 0;
-      padding-top: 1rem; }
-      .navbar-vertical.navbar-expand-md .navbar-side > * {
-        margin-left: 0;
-        margin-top: 1rem; }
+    align-items: flex-start;
+    transition: .3s transform;
+    overflow-x: auto; }
     .navbar-vertical.navbar-expand-md.navbar-right {
       left: auto;
       right: 0; }
-      .navbar-vertical.navbar-expand-md.navbar-right ~ .navbar,
-      .navbar-vertical.navbar-expand-md.navbar-right ~ .content {
-        margin-left: 0;
-        margin-right: 15.625rem; }
-    .navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .d-none-navbar-vertical-wide,
-    .navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) ~ * .d-none-navbar-vertical-wide {
-      display: none !important; }
-    .navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .nav-item.active > .dropdown-menu {
-      display: block; }
-    .navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .dropdown-menu {
-      position: static;
-      background: inherit;
-      border: 0;
-      box-shadow: none;
-      padding: 0;
-      margin: 0;
-      color: inherit;
-      -moz-columns: 1;
-      columns: 1; }
-      .navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .dropdown-menu:before, .navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .dropdown-menu:after {
-        content: none; }
-    .navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .dropdown-item {
-      padding-left: 2.5rem;
-      opacity: 0.6;
-      color: inherit;
-      background: transparent; }
-      .navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .dropdown-item.active {
-        font-weight: 600;
-        opacity: 1; }
-      .navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .dropdown-item:hover {
-        opacity: 1; }
-    .navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .dropdown-toggle:after {
-      margin-left: auto; }
-    .navbar-vertical.navbar-expand-md.navbar-vertical-narrow {
-      width: 4rem;
-      overflow: visible; }
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow .d-none-navbar-vertical-narrow,
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow ~ * .d-none-navbar-vertical-narrow {
-        display: none !important; }
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow .navbar-nav {
-        margin-top: 0; }
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow .nav-link {
-        height: 3rem; }
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow .nav-link-title,
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow .navbar-heading {
-        display: none; }
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow .nav-link-icon {
-        margin: 0 auto;
-        font-size: 1.125rem;
-        width: 1.125rem;
-        height: 1.125rem; }
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow .navbar-brand-logo-large {
-        display: none; }
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow .navbar-brand-logo-small {
-        display: inline-block; }
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow ~ .navbar,
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow ~ .content {
-        margin-left: 4rem; }
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow .dropdown-toggle:after {
-        content: none; }
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow .dropdown-menu {
-        left: 100%;
+    .navbar-vertical.navbar-expand-md .navbar-brand {
+      padding: 0.75rem 0;
+      justify-content: center; }
+    .navbar-vertical.navbar-expand-md .navbar-collapse {
+      align-items: stretch; }
+    .navbar-vertical.navbar-expand-md .navbar-nav {
+      flex-direction: column;
+      flex-grow: 1;
+      min-height: auto; }
+      .navbar-vertical.navbar-expand-md .navbar-nav .nav-link {
+        padding-top: .5rem;
+        padding-bottom: .5rem; }
+    .navbar-vertical.navbar-expand-md > [class*="container"] {
+      flex-direction: column;
+      align-items: stretch;
+      min-height: 100%;
+      justify-content: flex-start; }
+    .navbar-vertical.navbar-expand-md ~ .page {
+      padding-left: 15rem; }
+      .navbar-vertical.navbar-expand-md ~ .page [class*="container"] {
+        padding-left: 1.5rem;
+        padding-right: 1.5rem; }
+    .navbar-vertical.navbar-expand-md.navbar-right ~ .page {
+      padding-left: 0;
+      padding-right: 15rem; }
+    .navbar-vertical.navbar-expand-md .navbar-collapse {
+      flex-direction: column; }
+      .navbar-vertical.navbar-expand-md .navbar-collapse [class*="container"] {
+        flex-direction: column;
+        align-items: stretch; }
+      .navbar-vertical.navbar-expand-md .navbar-collapse .navbar-nav {
+        margin-left: -0.75rem;
+        margin-right: -0.75rem; }
+        .navbar-vertical.navbar-expand-md .navbar-collapse .navbar-nav .nav-link {
+          padding: 0.5rem 0.75rem;
+          justify-content: flex-start; }
+      .navbar-vertical.navbar-expand-md .navbar-collapse .dropdown-menu {
+        padding: 0;
+        background: transparent;
+        position: static;
+        color: inherit;
+        box-shadow: none;
+        border: none;
+        -moz-columns: 1;
+        columns: 1;
+        min-width: 0; }
+        .navbar-vertical.navbar-expand-md .navbar-collapse .dropdown-menu .dropdown-item {
+          min-width: 0;
+          display: flex;
+          width: auto;
+          padding-left: 2.25rem; }
+      .navbar-vertical.navbar-expand-md .navbar-collapse .dropdown-toggle:after {
+        margin-left: auto; }
+      .navbar-vertical.navbar-expand-md .navbar-collapse .nav-item.active:after {
+        border-bottom-width: 0;
+        border-left-width: 2px;
+        right: auto;
         top: 0;
-        margin: 0 0 0 -4px; }
-        .navbar-vertical.navbar-expand-md.navbar-vertical-narrow .dropdown-menu:before, .navbar-vertical.navbar-expand-md.navbar-vertical-narrow .dropdown-menu:after {
-          content: none; }
-        .navbar-vertical.navbar-expand-md.navbar-vertical-narrow .dropdown-menu.dropdown-menu-right {
-          top: auto;
-          bottom: 0;
-          right: auto; }
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow.navbar-right ~ .navbar,
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow.navbar-right ~ .content {
-        margin-left: 0;
-        margin-right: 4rem; }
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow.navbar-right .dropdown-menu {
-        margin: 0 -4px 0 0;
-        left: auto;
-        right: 100%; } }
-
-@media (max-width: 47.98rem) {
-  .navbar-vertical.navbar-expand-md .d-none-navbar-horizontal,
-  .navbar-vertical.navbar-expand-md ~ * .d-none-navbar-vertical-narrow {
-    display: none !important; }
-  .navbar-vertical.navbar-expand-md .dropdown-menu {
-    margin-right: -.25rem; } }
+        bottom: 0; } }
 
 @media (min-width: 64rem) {
   .navbar-vertical.navbar-expand-lg {
+    width: 15rem;
     position: fixed;
-    left: 0;
     top: 0;
+    left: 0;
     bottom: 0;
-    width: 15.625rem;
     z-index: 1030;
-    min-height: auto;
-    align-items: start;
-    overflow: auto; }
-    .navbar-vertical.navbar-expand-lg > [class*="container"] {
-      flex-direction: column;
-      align-items: stretch;
-      padding-left: 0;
-      padding-right: 0;
-      min-height: 100%; }
-    .navbar-vertical.navbar-expand-lg ~ .navbar,
-    .navbar-vertical.navbar-expand-lg ~ .content {
-      margin-left: 15.625rem; }
-      .navbar-vertical.navbar-expand-lg ~ .navbar [class*="container"],
-      .navbar-vertical.navbar-expand-lg ~ .content [class*="container"] {
-        padding-left: 1.25rem;
-        padding-right: 1.25rem; }
-    .navbar-vertical.navbar-expand-lg .d-none-navbar-vertical,
-    .navbar-vertical.navbar-expand-lg ~ * .d-none-navbar-vertical {
-      display: none !important; }
-    .navbar-vertical.navbar-expand-lg .navbar-brand {
-      display: flex;
-      width: 100%;
-      margin: 0;
-      text-align: center;
-      height: 3.5rem;
-      align-items: center;
-      justify-content: center; }
-    .navbar-vertical.navbar-expand-lg .navbar-heading {
-      font-size: 0.6875rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: .04em;
-      color: #868c97;
-      display: block;
-      margin-bottom: .5rem; }
-    .navbar-vertical.navbar-expand-lg .navbar-collapse {
-      flex-direction: column;
-      text-align: left;
-      align-items: normal;
-      padding: 1rem 1rem; }
-    .navbar-vertical.navbar-expand-lg .navbar-nav {
-      flex-direction: column;
-      align-items: normal;
-      margin-left: -1rem;
-      margin-right: -1rem; }
-      .navbar-vertical.navbar-expand-lg .navbar-nav .nav-link {
-        min-height: 0;
-        height: 2.5rem;
-        padding-left: 1rem;
-        padding-right: 1rem;
-        justify-content: start; }
-      .navbar-vertical.navbar-expand-lg .navbar-nav .nav-item.active {
-        font-weight: 600; }
-        .navbar-vertical.navbar-expand-lg .navbar-nav .nav-item.active > .nav-link:before {
-          left: 0;
-          right: auto;
-          top: 0;
-          bottom: 0;
-          height: auto;
-          width: 2px; }
-    .navbar-vertical.navbar-expand-lg .navbar-side {
-      margin-left: 0;
-      margin-top: auto;
-      padding-left: 0;
-      padding-top: 1rem; }
-      .navbar-vertical.navbar-expand-lg .navbar-side > * {
-        margin-left: 0;
-        margin-top: 1rem; }
+    align-items: flex-start;
+    transition: .3s transform;
+    overflow-x: auto; }
     .navbar-vertical.navbar-expand-lg.navbar-right {
       left: auto;
       right: 0; }
-      .navbar-vertical.navbar-expand-lg.navbar-right ~ .navbar,
-      .navbar-vertical.navbar-expand-lg.navbar-right ~ .content {
-        margin-left: 0;
-        margin-right: 15.625rem; }
-    .navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .d-none-navbar-vertical-wide,
-    .navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) ~ * .d-none-navbar-vertical-wide {
-      display: none !important; }
-    .navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .nav-item.active > .dropdown-menu {
-      display: block; }
-    .navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .dropdown-menu {
-      position: static;
-      background: inherit;
-      border: 0;
-      box-shadow: none;
-      padding: 0;
-      margin: 0;
-      color: inherit;
-      -moz-columns: 1;
-      columns: 1; }
-      .navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .dropdown-menu:before, .navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .dropdown-menu:after {
-        content: none; }
-    .navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .dropdown-item {
-      padding-left: 2.5rem;
-      opacity: 0.6;
-      color: inherit;
-      background: transparent; }
-      .navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .dropdown-item.active {
-        font-weight: 600;
-        opacity: 1; }
-      .navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .dropdown-item:hover {
-        opacity: 1; }
-    .navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .dropdown-toggle:after {
-      margin-left: auto; }
-    .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow {
-      width: 4rem;
-      overflow: visible; }
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .d-none-navbar-vertical-narrow,
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow ~ * .d-none-navbar-vertical-narrow {
-        display: none !important; }
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .navbar-nav {
-        margin-top: 0; }
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .nav-link {
-        height: 3rem; }
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .nav-link-title,
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .navbar-heading {
-        display: none; }
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .nav-link-icon {
-        margin: 0 auto;
-        font-size: 1.125rem;
-        width: 1.125rem;
-        height: 1.125rem; }
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .navbar-brand-logo-large {
-        display: none; }
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .navbar-brand-logo-small {
-        display: inline-block; }
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow ~ .navbar,
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow ~ .content {
-        margin-left: 4rem; }
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .dropdown-toggle:after {
-        content: none; }
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .dropdown-menu {
-        left: 100%;
+    .navbar-vertical.navbar-expand-lg .navbar-brand {
+      padding: 0.75rem 0;
+      justify-content: center; }
+    .navbar-vertical.navbar-expand-lg .navbar-collapse {
+      align-items: stretch; }
+    .navbar-vertical.navbar-expand-lg .navbar-nav {
+      flex-direction: column;
+      flex-grow: 1;
+      min-height: auto; }
+      .navbar-vertical.navbar-expand-lg .navbar-nav .nav-link {
+        padding-top: .5rem;
+        padding-bottom: .5rem; }
+    .navbar-vertical.navbar-expand-lg > [class*="container"] {
+      flex-direction: column;
+      align-items: stretch;
+      min-height: 100%;
+      justify-content: flex-start; }
+    .navbar-vertical.navbar-expand-lg ~ .page {
+      padding-left: 15rem; }
+      .navbar-vertical.navbar-expand-lg ~ .page [class*="container"] {
+        padding-left: 1.5rem;
+        padding-right: 1.5rem; }
+    .navbar-vertical.navbar-expand-lg.navbar-right ~ .page {
+      padding-left: 0;
+      padding-right: 15rem; }
+    .navbar-vertical.navbar-expand-lg .navbar-collapse {
+      flex-direction: column; }
+      .navbar-vertical.navbar-expand-lg .navbar-collapse [class*="container"] {
+        flex-direction: column;
+        align-items: stretch; }
+      .navbar-vertical.navbar-expand-lg .navbar-collapse .navbar-nav {
+        margin-left: -0.75rem;
+        margin-right: -0.75rem; }
+        .navbar-vertical.navbar-expand-lg .navbar-collapse .navbar-nav .nav-link {
+          padding: 0.5rem 0.75rem;
+          justify-content: flex-start; }
+      .navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu {
+        padding: 0;
+        background: transparent;
+        position: static;
+        color: inherit;
+        box-shadow: none;
+        border: none;
+        -moz-columns: 1;
+        columns: 1;
+        min-width: 0; }
+        .navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item {
+          min-width: 0;
+          display: flex;
+          width: auto;
+          padding-left: 2.25rem; }
+      .navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-toggle:after {
+        margin-left: auto; }
+      .navbar-vertical.navbar-expand-lg .navbar-collapse .nav-item.active:after {
+        border-bottom-width: 0;
+        border-left-width: 2px;
+        right: auto;
         top: 0;
-        margin: 0 0 0 -4px; }
-        .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .dropdown-menu:before, .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .dropdown-menu:after {
-          content: none; }
-        .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .dropdown-menu.dropdown-menu-right {
-          top: auto;
-          bottom: 0;
-          right: auto; }
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow.navbar-right ~ .navbar,
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow.navbar-right ~ .content {
-        margin-left: 0;
-        margin-right: 4rem; }
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow.navbar-right .dropdown-menu {
-        margin: 0 -4px 0 0;
-        left: auto;
-        right: 100%; } }
-
-@media (max-width: 63.98rem) {
-  .navbar-vertical.navbar-expand-lg .d-none-navbar-horizontal,
-  .navbar-vertical.navbar-expand-lg ~ * .d-none-navbar-vertical-narrow {
-    display: none !important; }
-  .navbar-vertical.navbar-expand-lg .dropdown-menu {
-    margin-right: -.25rem; } }
+        bottom: 0; } }
 
 @media (min-width: 75.25rem) {
   .navbar-vertical.navbar-expand-xl {
+    width: 15rem;
     position: fixed;
-    left: 0;
     top: 0;
+    left: 0;
     bottom: 0;
-    width: 15.625rem;
     z-index: 1030;
-    min-height: auto;
-    align-items: start;
-    overflow: auto; }
-    .navbar-vertical.navbar-expand-xl > [class*="container"] {
-      flex-direction: column;
-      align-items: stretch;
-      padding-left: 0;
-      padding-right: 0;
-      min-height: 100%; }
-    .navbar-vertical.navbar-expand-xl ~ .navbar,
-    .navbar-vertical.navbar-expand-xl ~ .content {
-      margin-left: 15.625rem; }
-      .navbar-vertical.navbar-expand-xl ~ .navbar [class*="container"],
-      .navbar-vertical.navbar-expand-xl ~ .content [class*="container"] {
-        padding-left: 1.25rem;
-        padding-right: 1.25rem; }
-    .navbar-vertical.navbar-expand-xl .d-none-navbar-vertical,
-    .navbar-vertical.navbar-expand-xl ~ * .d-none-navbar-vertical {
-      display: none !important; }
-    .navbar-vertical.navbar-expand-xl .navbar-brand {
-      display: flex;
-      width: 100%;
-      margin: 0;
-      text-align: center;
-      height: 3.5rem;
-      align-items: center;
-      justify-content: center; }
-    .navbar-vertical.navbar-expand-xl .navbar-heading {
-      font-size: 0.6875rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: .04em;
-      color: #868c97;
-      display: block;
-      margin-bottom: .5rem; }
-    .navbar-vertical.navbar-expand-xl .navbar-collapse {
-      flex-direction: column;
-      text-align: left;
-      align-items: normal;
-      padding: 1rem 1rem; }
-    .navbar-vertical.navbar-expand-xl .navbar-nav {
-      flex-direction: column;
-      align-items: normal;
-      margin-left: -1rem;
-      margin-right: -1rem; }
-      .navbar-vertical.navbar-expand-xl .navbar-nav .nav-link {
-        min-height: 0;
-        height: 2.5rem;
-        padding-left: 1rem;
-        padding-right: 1rem;
-        justify-content: start; }
-      .navbar-vertical.navbar-expand-xl .navbar-nav .nav-item.active {
-        font-weight: 600; }
-        .navbar-vertical.navbar-expand-xl .navbar-nav .nav-item.active > .nav-link:before {
-          left: 0;
-          right: auto;
-          top: 0;
-          bottom: 0;
-          height: auto;
-          width: 2px; }
-    .navbar-vertical.navbar-expand-xl .navbar-side {
-      margin-left: 0;
-      margin-top: auto;
-      padding-left: 0;
-      padding-top: 1rem; }
-      .navbar-vertical.navbar-expand-xl .navbar-side > * {
-        margin-left: 0;
-        margin-top: 1rem; }
+    align-items: flex-start;
+    transition: .3s transform;
+    overflow-x: auto; }
     .navbar-vertical.navbar-expand-xl.navbar-right {
       left: auto;
       right: 0; }
-      .navbar-vertical.navbar-expand-xl.navbar-right ~ .navbar,
-      .navbar-vertical.navbar-expand-xl.navbar-right ~ .content {
-        margin-left: 0;
-        margin-right: 15.625rem; }
-    .navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .d-none-navbar-vertical-wide,
-    .navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) ~ * .d-none-navbar-vertical-wide {
-      display: none !important; }
-    .navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .nav-item.active > .dropdown-menu {
-      display: block; }
-    .navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .dropdown-menu {
-      position: static;
-      background: inherit;
-      border: 0;
-      box-shadow: none;
-      padding: 0;
-      margin: 0;
-      color: inherit;
-      -moz-columns: 1;
-      columns: 1; }
-      .navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .dropdown-menu:before, .navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .dropdown-menu:after {
-        content: none; }
-    .navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .dropdown-item {
-      padding-left: 2.5rem;
-      opacity: 0.6;
-      color: inherit;
-      background: transparent; }
-      .navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .dropdown-item.active {
-        font-weight: 600;
-        opacity: 1; }
-      .navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .dropdown-item:hover {
-        opacity: 1; }
-    .navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .dropdown-toggle:after {
-      margin-left: auto; }
-    .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow {
-      width: 4rem;
-      overflow: visible; }
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .d-none-navbar-vertical-narrow,
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow ~ * .d-none-navbar-vertical-narrow {
-        display: none !important; }
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .navbar-nav {
-        margin-top: 0; }
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .nav-link {
-        height: 3rem; }
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .nav-link-title,
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .navbar-heading {
-        display: none; }
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .nav-link-icon {
-        margin: 0 auto;
-        font-size: 1.125rem;
-        width: 1.125rem;
-        height: 1.125rem; }
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .navbar-brand-logo-large {
-        display: none; }
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .navbar-brand-logo-small {
-        display: inline-block; }
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow ~ .navbar,
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow ~ .content {
-        margin-left: 4rem; }
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .dropdown-toggle:after {
-        content: none; }
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .dropdown-menu {
-        left: 100%;
+    .navbar-vertical.navbar-expand-xl .navbar-brand {
+      padding: 0.75rem 0;
+      justify-content: center; }
+    .navbar-vertical.navbar-expand-xl .navbar-collapse {
+      align-items: stretch; }
+    .navbar-vertical.navbar-expand-xl .navbar-nav {
+      flex-direction: column;
+      flex-grow: 1;
+      min-height: auto; }
+      .navbar-vertical.navbar-expand-xl .navbar-nav .nav-link {
+        padding-top: .5rem;
+        padding-bottom: .5rem; }
+    .navbar-vertical.navbar-expand-xl > [class*="container"] {
+      flex-direction: column;
+      align-items: stretch;
+      min-height: 100%;
+      justify-content: flex-start; }
+    .navbar-vertical.navbar-expand-xl ~ .page {
+      padding-left: 15rem; }
+      .navbar-vertical.navbar-expand-xl ~ .page [class*="container"] {
+        padding-left: 1.5rem;
+        padding-right: 1.5rem; }
+    .navbar-vertical.navbar-expand-xl.navbar-right ~ .page {
+      padding-left: 0;
+      padding-right: 15rem; }
+    .navbar-vertical.navbar-expand-xl .navbar-collapse {
+      flex-direction: column; }
+      .navbar-vertical.navbar-expand-xl .navbar-collapse [class*="container"] {
+        flex-direction: column;
+        align-items: stretch; }
+      .navbar-vertical.navbar-expand-xl .navbar-collapse .navbar-nav {
+        margin-left: -0.75rem;
+        margin-right: -0.75rem; }
+        .navbar-vertical.navbar-expand-xl .navbar-collapse .navbar-nav .nav-link {
+          padding: 0.5rem 0.75rem;
+          justify-content: flex-start; }
+      .navbar-vertical.navbar-expand-xl .navbar-collapse .dropdown-menu {
+        padding: 0;
+        background: transparent;
+        position: static;
+        color: inherit;
+        box-shadow: none;
+        border: none;
+        -moz-columns: 1;
+        columns: 1;
+        min-width: 0; }
+        .navbar-vertical.navbar-expand-xl .navbar-collapse .dropdown-menu .dropdown-item {
+          min-width: 0;
+          display: flex;
+          width: auto;
+          padding-left: 2.25rem; }
+      .navbar-vertical.navbar-expand-xl .navbar-collapse .dropdown-toggle:after {
+        margin-left: auto; }
+      .navbar-vertical.navbar-expand-xl .navbar-collapse .nav-item.active:after {
+        border-bottom-width: 0;
+        border-left-width: 2px;
+        right: auto;
         top: 0;
-        margin: 0 0 0 -4px; }
-        .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .dropdown-menu:before, .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .dropdown-menu:after {
-          content: none; }
-        .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .dropdown-menu.dropdown-menu-right {
-          top: auto;
-          bottom: 0;
-          right: auto; }
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow.navbar-right ~ .navbar,
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow.navbar-right ~ .content {
-        margin-left: 0;
-        margin-right: 4rem; }
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow.navbar-right .dropdown-menu {
-        margin: 0 -4px 0 0;
-        left: auto;
-        right: 100%; } }
+        bottom: 0; } }
 
-@media (max-width: 75.23rem) {
-  .navbar-vertical.navbar-expand-xl .d-none-navbar-horizontal,
-  .navbar-vertical.navbar-expand-xl ~ * .d-none-navbar-vertical-narrow {
-    display: none !important; }
-  .navbar-vertical.navbar-expand-xl .dropdown-menu {
-    margin-right: -.25rem; } }
-
-/**
-Navbar secondary
- */
-.navbar-secondary {
-  order: -1; }
+.navbar-vertical.navbar-expand {
+  width: 15rem;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 1030;
+  align-items: flex-start;
+  transition: .3s transform;
+  overflow-x: auto; }
+  .navbar-vertical.navbar-expand.navbar-right {
+    left: auto;
+    right: 0; }
+  .navbar-vertical.navbar-expand .navbar-brand {
+    padding: 0.75rem 0;
+    justify-content: center; }
+  .navbar-vertical.navbar-expand .navbar-collapse {
+    align-items: stretch; }
+  .navbar-vertical.navbar-expand .navbar-nav {
+    flex-direction: column;
+    flex-grow: 1;
+    min-height: auto; }
+    .navbar-vertical.navbar-expand .navbar-nav .nav-link {
+      padding-top: .5rem;
+      padding-bottom: .5rem; }
+  .navbar-vertical.navbar-expand > [class*="container"] {
+    flex-direction: column;
+    align-items: stretch;
+    min-height: 100%;
+    justify-content: flex-start; }
+  .navbar-vertical.navbar-expand ~ .page {
+    padding-left: 15rem; }
+    .navbar-vertical.navbar-expand ~ .page [class*="container"] {
+      padding-left: 1.5rem;
+      padding-right: 1.5rem; }
+  .navbar-vertical.navbar-expand.navbar-right ~ .page {
+    padding-left: 0;
+    padding-right: 15rem; }
+  .navbar-vertical.navbar-expand .navbar-collapse {
+    flex-direction: column; }
+    .navbar-vertical.navbar-expand .navbar-collapse [class*="container"] {
+      flex-direction: column;
+      align-items: stretch; }
+    .navbar-vertical.navbar-expand .navbar-collapse .navbar-nav {
+      margin-left: -0.75rem;
+      margin-right: -0.75rem; }
+      .navbar-vertical.navbar-expand .navbar-collapse .navbar-nav .nav-link {
+        padding: 0.5rem 0.75rem;
+        justify-content: flex-start; }
+    .navbar-vertical.navbar-expand .navbar-collapse .dropdown-menu {
+      padding: 0;
+      background: transparent;
+      position: static;
+      color: inherit;
+      box-shadow: none;
+      border: none;
+      -moz-columns: 1;
+      columns: 1;
+      min-width: 0; }
+      .navbar-vertical.navbar-expand .navbar-collapse .dropdown-menu .dropdown-item {
+        min-width: 0;
+        display: flex;
+        width: auto;
+        padding-left: 2.25rem; }
+    .navbar-vertical.navbar-expand .navbar-collapse .dropdown-toggle:after {
+      margin-left: auto; }
+    .navbar-vertical.navbar-expand .navbar-collapse .nav-item.active:after {
+      border-bottom-width: 0;
+      border-left-width: 2px;
+      right: auto;
+      top: 0;
+      bottom: 0; }
 
 .page {
   display: flex;
@@ -9421,11 +8783,11 @@ Navbar secondary
     flex: 1; }
 
 .page-pretitle {
-  font-size: 0.6875rem;
-  font-weight: 600;
+  font-size: 0.625rem;
+  font-weight: 500;
   text-transform: uppercase;
   letter-spacing: .04em;
-  color: #868c97; }
+  color: #6e7582; }
 
 .page-title {
   margin: 0;
@@ -9435,10 +8797,10 @@ Navbar secondary
   color: inherit; }
 
 .footer {
-  border-top: 1px solid rgba(134, 140, 151, 0.24);
+  border-top: 1px solid rgba(110, 117, 130, 0.2);
   background-color: #ffffff;
   padding: 1rem 0;
-  color: #868c97;
+  color: #6e7582;
   margin-bottom: -1.25rem;
   margin-top: 1.25rem; }
 
@@ -9465,12 +8827,12 @@ Navbar secondary
   position: relative;
   width: 2rem;
   height: 2rem;
-  font-size: 0.8125rem;
+  font-size: 0.75rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-weight: 400;
-  color: #868c97;
+  color: #6e7582;
   text-align: center;
   text-transform: uppercase;
   vertical-align: bottom;
@@ -9535,7 +8897,7 @@ Navbar secondary
 .avatar-upload {
   width: 4rem;
   height: 4rem;
-  border: 1px dashed rgba(134, 140, 151, 0.24);
+  border: 1px dashed rgba(110, 117, 130, 0.2);
   background: #ffffff;
   flex-direction: column;
   transition: .3s color, .3s background-color; }
@@ -9549,22 +8911,24 @@ Navbar secondary
     text-decoration: none; }
 
 .avatar-upload-text {
-  font-size: 0.6875rem;
+  font-size: 0.625rem;
   line-height: 1;
   margin-top: .25rem; }
 
 .badge {
-  font-size: 0.6875rem;
-  font-weight: 600;
+  font-size: 0.625rem;
+  font-weight: 500;
   text-transform: uppercase;
   letter-spacing: .04em;
   display: inline-flex;
   justify-content: center;
-  padding: 0 .5em;
-  line-height: 1.75em;
   background: #cbcfd6;
   overflow: hidden;
-  vertical-align: text-bottom; }
+  vertical-align: text-bottom;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none; }
   a.badge {
     color: #ffffff; }
   .badge:empty {
@@ -9631,13 +8995,13 @@ Navbar secondary
   content: "•"; }
 
 .breadcrumb-alternate a {
-  color: #868c97; }
+  color: #6e7582; }
 
 .breadcrumb-alternate .breadcrumb-item.active {
   color: inherit; }
 
 .btn {
-  font-weight: 600;
+  font-weight: 500;
   display: inline-flex;
   align-items: center;
   justify-content: center; }
@@ -9669,30 +9033,30 @@ Navbar secondary
 .btn-secondary {
   color: #354052;
   background-color: #ffffff;
-  border-color: rgba(134, 140, 151, 0.24);
+  border-color: rgba(110, 117, 130, 0.2);
   background-image: linear-gradient(-180deg, rgba(53, 64, 82, 0), rgba(53, 64, 82, 0.04) 100%);
   box-shadow: none !important; }
   .btn-secondary:hover {
     color: #354052;
     background-color: #ececec;
-    border-color: rgba(108, 114, 126, 0.24); }
+    border-color: rgba(87, 92, 102, 0.2); }
   .btn-secondary:focus, .btn-secondary.focus {
     color: #354052;
     background-color: #ececec;
-    border-color: rgba(108, 114, 126, 0.24);
-    box-shadow: 0 0 0 0.2rem rgba(88, 97, 112, 0.5); }
+    border-color: rgba(87, 92, 102, 0.2);
+    box-shadow: 0 0 0 0.2rem rgba(75, 84, 101, 0.5); }
   .btn-secondary:active, .btn-secondary.active,
   .show > .btn-secondary.dropdown-toggle {
     color: #354052;
     background-color: #e6e6e6;
-    border-color: rgba(102, 108, 119, 0.24); }
+    border-color: rgba(81, 86, 95, 0.2); }
     .btn-secondary:active:focus, .btn-secondary.active:focus,
     .show > .btn-secondary.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(88, 97, 112, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(75, 84, 101, 0.5); }
   .btn-secondary:disabled, .btn-secondary.disabled {
     color: #354052;
     background-color: #ffffff;
-    border-color: rgba(134, 140, 151, 0.24); }
+    border-color: rgba(110, 117, 130, 0.2); }
   .btn-secondary.active {
     background: #206bc4;
     color: #ffffff;
@@ -9709,9 +9073,9 @@ Navbar secondary
     padding: 0.375rem 15px; }
 
 .btn-icon {
-  min-width: calc(2.125rem + 2px); }
+  min-width: calc(2.0333333rem + 2px); }
   .btn-icon.btn-sm, .btn-group-sm > .btn-icon.btn {
-    min-width: calc(1.4416667rem + 2px); }
+    min-width: calc(1.35rem + 2px); }
   .btn-icon .icon {
     margin: 0 -1em; }
 
@@ -9738,7 +9102,7 @@ Navbar secondary
   display: flex;
   align-items: center;
   padding: 0;
-  color: #868c97;
+  color: #6e7582;
   cursor: pointer;
   background: none;
   border: none; }
@@ -9778,8 +9142,8 @@ Navbar secondary
 
 .calendar {
   display: block;
-  font-size: 0.8203125rem;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  font-size: 0.765625rem;
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 3px; }
 
 .calendar-nav {
@@ -9798,7 +9162,7 @@ Navbar secondary
   padding: .5rem 0; }
 
 .calendar-header {
-  color: #868c97; }
+  color: #6e7582; }
 
 .calendar-date {
   flex: 0 0 14.2857143%;
@@ -9829,10 +9193,10 @@ Navbar secondary
       color: #206bc4;
       text-decoration: none;
       background: #fefeff;
-      border-color: rgba(134, 140, 151, 0.24); }
+      border-color: rgba(110, 117, 130, 0.2); }
   .calendar-date .date-today {
     color: #206bc4;
-    border-color: rgba(134, 140, 151, 0.24); }
+    border-color: rgba(110, 117, 130, 0.2); }
 
 .calendar-range {
   position: relative; }
@@ -9919,7 +9283,7 @@ Navbar secondary
     height: 5px;
     content: "";
     background: #ffffff;
-    border: 1px solid rgba(134, 140, 151, 0.24);
+    border: 1px solid rgba(110, 117, 130, 0.2);
     border-radius: 3px 3px 0 0; }
 
 .card-cover {
@@ -9943,7 +9307,7 @@ Navbar secondary
 
 .card-actions {
   margin-left: auto;
-  font-size: 0.8125rem; }
+  font-size: 0.75rem; }
   .card-actions a {
     text-decoration: none; }
 
@@ -9960,7 +9324,7 @@ Navbar secondary
   flex: 1; }
 
 .card-footer {
-  color: #868c97; }
+  color: #6e7582; }
 
 .card-progress {
   height: .25rem; }
@@ -9970,13 +9334,13 @@ Navbar secondary
     border-radius: 2px 2px 0 0; }
 
 .card-meta {
-  color: #868c97; }
+  color: #6e7582; }
 
 .card-title {
   display: block;
   margin: 0 0 1rem;
   font-size: 1.125rem;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 1.3333333; }
   a.card-title:hover {
     color: inherit; }
@@ -9987,7 +9351,7 @@ Navbar secondary
   margin-top: -1.25rem;
   margin-bottom: 0.625rem;
   font-size: 87.5%;
-  color: #868c97; }
+  color: #6e7582; }
 
 .card-body > :last-child {
   margin-bottom: 0; }
@@ -10012,7 +9376,7 @@ Navbar secondary
     padding: 0; } }
 
 .card-body + .card-body {
-  border-top: 1px solid rgba(134, 140, 151, 0.24); }
+  border-top: 1px solid rgba(110, 117, 130, 0.2); }
 
 .card-body-scrollable {
   overflow: auto; }
@@ -10030,11 +9394,11 @@ Card optinos
   display: inline-block;
   min-width: 1rem;
   margin-left: .25rem;
-  color: #868c97; }
+  color: #6e7582; }
 
 .card-drop {
   line-height: 1;
-  color: #868c97; }
+  color: #6e7582; }
   .card-drop .icon {
     width: 1.5rem;
     height: 1.5rem;
@@ -10085,7 +9449,7 @@ Card table
   .card-table tbody tr:last-child th {
     border-bottom: 0; }
   .card-body + .card-table {
-    border-top: 1px solid rgba(134, 140, 151, 0.24); }
+    border-top: 1px solid rgba(110, 117, 130, 0.2); }
 
 /*
 Card code
@@ -10119,7 +9483,7 @@ Card avatar
 Card list group
  */
 .card-body + .card-list-group {
-  border-top: 1px solid rgba(134, 140, 151, 0.24); }
+  border-top: 1px solid rgba(110, 117, 130, 0.2); }
 
 .card-list-group .list-group-item {
   padding-right: 1.25rem;
@@ -10143,10 +9507,10 @@ Card tabs
     border-bottom: 0; }
     .card-tabs .nav-tabs .nav-link {
       background: rgba(53, 64, 82, 0.024);
-      border: 1px solid rgba(134, 140, 151, 0.24);
+      border: 1px solid rgba(110, 117, 130, 0.2);
       border-bottom: 0; }
       .card-tabs .nav-tabs .nav-link.active, .card-tabs .nav-tabs .nav-link:active, .card-tabs .nav-tabs .nav-link:hover {
-        border-color: rgba(134, 140, 151, 0.24); }
+        border-color: rgba(110, 117, 130, 0.2); }
       .card-tabs .nav-tabs .nav-link.active {
         background: #ffffff; }
     .card-tabs .nav-tabs .nav-item:not(:first-child) .nav-link {
@@ -10162,7 +9526,7 @@ Card tabs
       margin-bottom: 0; }
       .card-tabs .nav-tabs-bottom .nav-item .nav-link {
         border-top-width: 0;
-        border-bottom: 1px solid rgba(134, 140, 151, 0.24);
+        border-bottom: 1px solid rgba(110, 117, 130, 0.2);
         border-top-left-radius: 0;
         border-top-right-radius: 0; }
   .card-tabs .card {
@@ -10195,19 +9559,19 @@ Card tabs
   margin: 0; }
 
 .dropdown-item-icon {
-  width: 1rem;
-  font-size: 1rem;
+  width: 1rem !important;
+  font-size: 1rem !important;
   margin-right: .5rem;
   opacity: .64;
   text-align: center;
   stroke-width: 2px; }
 
 .dropdown-header {
-  font-size: 0.6875rem;
-  font-weight: 600;
+  font-size: 0.625rem;
+  font-weight: 500;
   text-transform: uppercase;
   letter-spacing: .04em;
-  color: #868c97;
+  color: #6e7582;
   padding-bottom: .25rem;
   pointer-events: none; }
 
@@ -10295,24 +9659,24 @@ Card tabs
     margin-top: 1.5rem; }
 
 .empty-bordered {
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 3px; }
 
 .col-separator {
-  border-left: 1px solid rgba(134, 140, 151, 0.24); }
+  border-left: 1px solid rgba(110, 117, 130, 0.2); }
 
 .container-tight {
   width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
   margin-right: auto;
   margin-left: auto;
   max-width: 30rem; }
 
 .container-narrow {
   width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
   margin-right: auto;
   margin-left: auto;
   max-width: 45rem; }
@@ -10422,8 +9786,8 @@ Card tabs
   justify-content: center;
   height: 4rem;
   text-align: center;
-  border-right: 1px solid rgba(134, 140, 151, 0.24);
-  border-bottom: 1px solid rgba(134, 140, 151, 0.24); }
+  border-right: 1px solid rgba(110, 117, 130, 0.2);
+  border-bottom: 1px solid rgba(110, 117, 130, 0.2); }
   .icons-list-item i {
     font-size: 1.25rem; }
 
@@ -10434,16 +9798,20 @@ textarea[cols] {
 Form label
  */
 .form-label {
-  font-size: 0.9375rem;
-  font-weight: 600;
+  font-size: 0.875rem;
+  font-weight: 500;
   display: block;
   margin-bottom: .5rem; }
+  .form-label.required:after {
+    content: "*";
+    margin-left: .25rem;
+    color: #cd201f; }
 
 .form-label-description {
   float: right;
   font-weight: 400;
-  color: #868c97;
-  line-height: 1.8285714;
+  color: #6e7582;
+  line-height: 1.9591837;
   font-size: 87.5%; }
 
 /**
@@ -10452,7 +9820,7 @@ Form hint
 .form-hint {
   display: block;
   font-size: 87.5%;
-  color: #868c97;
+  color: #6e7582;
   line-height: 1.3333334; }
   .form-hint:last-child {
     margin-bottom: 0; }
@@ -10471,7 +9839,7 @@ Form control
   box-shadow: 0 0 0 1000px #ffffff inset; }
 
 .form-control:disabled, .form-control.disabled {
-  color: #868c97;
+  color: #6e7582;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -10484,6 +9852,25 @@ Form control
   background-color: #f5f7fb;
   border-color: transparent; }
 
+.form-control-dark {
+  background-color: rgba(0, 0, 0, 0.1);
+  color: #ffffff;
+  border-color: transparent; }
+  .form-control-dark:focus {
+    background-color: rgba(0, 0, 0, 0.1);
+    box-shadow: none;
+    border-color: rgba(255, 255, 255, 0.24); }
+  .form-control-dark::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.6); }
+  .form-control-dark::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6); }
+  .form-control-dark:-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6); }
+  .form-control-dark::-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6); }
+  .form-control-dark::placeholder {
+    color: rgba(255, 255, 255, 0.6); }
+
 .form-control-rounded {
   border-radius: 10rem; }
 
@@ -10502,24 +9889,21 @@ Form control
   padding: 1rem;
   margin-bottom: 1rem;
   background: rgba(53, 64, 82, 0.024);
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 3px; }
 
-.form-required {
-  color: #fa4654; }
-
 /**
 Form help
  */
 .form-help {
   display: inline-flex;
-  font-weight: 600;
+  font-weight: 500;
   align-items: center;
   justify-content: center;
   width: 1.125rem;
   height: 1.125rem;
   font-size: .75rem;
-  color: #868c97;
+  color: #6e7582;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
@@ -10555,21 +9939,15 @@ Form switch
   padding: .125rem 0; }
 
 .form-check-description {
-  color: #868c97;
-  font-size: 0.8125rem;
+  color: #6e7582;
+  font-size: 0.75rem;
   line-height: 1.3333334; }
 
 /**
 Input group
  */
-.input-group-prepend .input-group-text {
-  border-right: 0; }
-
-.input-group-append .input-group-text {
-  border-left: 0; }
-
 .input-group-link {
-  font-size: 0.8125rem; }
+  font-size: 0.75rem; }
 
 .input-group-flat:focus-within {
   box-shadow: 0 0 0 0.2rem rgba(32, 107, 196, 0.25);
@@ -10579,7 +9957,7 @@ Input group
     border-color: #7aade9 !important; }
 
 .input-group-flat .form-control:focus {
-  border-color: rgba(134, 140, 151, 0.24);
+  border-color: rgba(110, 117, 130, 0.2);
   box-shadow: none; }
 
 .input-group-flat .form-control:not(:last-child) {
@@ -10588,23 +9966,13 @@ Input group
 .input-group-flat .form-control:not(:first-child) {
   border-left: 0; }
 
-.input-group-flat .input-group-prepend {
-  margin-right: 0;
-  border-right: 0;
-  background: #ffffff; }
-  .input-group-flat .input-group-prepend .input-group-text {
-    padding-right: 0; }
-
-.input-group-flat .input-group-append {
-  margin-left: 0; }
-  .input-group-flat .input-group-append:not(:last-child) .input-group-text {
-    border-right: 0; }
-  .input-group-flat .input-group-append .input-group-text {
-    padding-left: 0; }
-
 .input-group-flat .input-group-text {
   background: transparent;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
+  .input-group-flat .input-group-text:first-child {
+    padding-right: 0; }
+  .input-group-flat .input-group-text:last-child {
+    padding-left: 0; }
 
 /**
 Upload files
@@ -10632,7 +10000,7 @@ Icon input
   align-items: center;
   justify-content: center;
   min-width: 2.5rem;
-  color: #868c97;
+  color: #6e7582;
   pointer-events: none;
   font-size: 1.2em; }
   .input-icon-addon:last-child {
@@ -10659,7 +10027,7 @@ Color Input
   width: 1.5rem;
   height: 1.5rem;
   color: #fff;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 3px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
   .form-colorinput-color:before {
@@ -10702,13 +10070,13 @@ Image check
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 3px; }
   .form-imagecheck-input:focus ~ .form-imagecheck-figure {
     border-color: #206bc4;
     box-shadow: 0 0 0 0.2rem rgba(32, 107, 196, 0.25); }
   .form-imagecheck-input:checked ~ .form-imagecheck-figure {
-    border-color: rgba(134, 140, 151, 0.24); }
+    border-color: rgba(110, 117, 130, 0.2); }
   .form-imagecheck-figure:before {
     position: absolute;
     top: .25rem;
@@ -10725,7 +10093,7 @@ Image check
     -ms-user-select: none;
     user-select: none;
     background: #ffffff;
-    border: 1px solid rgba(134, 140, 151, 0.24);
+    border: 1px solid rgba(110, 117, 130, 0.2);
     border-radius: 3px;
     transition: .3s opacity; }
     .form-imagecheck-input:checked ~ .form-imagecheck-figure:before {
@@ -10734,7 +10102,7 @@ Image check
       background-repeat: repeat;
       background-position: center center;
       background-size: 1rem;
-      border-color: rgba(134, 140, 151, 0.24); }
+      border-color: rgba(110, 117, 130, 0.2); }
 
 .form-imagecheck-image {
   max-width: 100%;
@@ -10754,8 +10122,8 @@ Image check
 
 .form-imagecheck-caption {
   padding: .25rem;
-  font-size: 0.8203125rem;
-  color: #868c97;
+  font-size: 0.765625rem;
+  color: #6e7582;
   text-align: center;
   transition: .3s color; }
   .form-imagecheck:hover .form-imagecheck-caption,
@@ -10787,14 +10155,15 @@ Select group
   z-index: -1;
   opacity: 0; }
 
-.form-selectgroup-box {
+.form-selectgroup-label {
   position: relative;
   display: block;
   min-width: calc(1.4666667em + 0.75rem + 2px);
+  margin: 0;
   padding: 0.375rem 0.75rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   line-height: 1.4666667;
-  color: #868c97;
+  color: #6e7582;
   background: #ffffff;
   text-align: center;
   cursor: pointer;
@@ -10802,64 +10171,64 @@ Select group
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 3px;
   transition: border-color .3s, background .3s, color .3s; }
-  .form-selectgroup-box .icon:only-child {
+  .form-selectgroup-label .icon:only-child {
     margin: 0 -.25rem; }
-  .form-selectgroup-box:hover {
+  .form-selectgroup-label:hover {
     color: #354052; }
 
 .form-selectgroup-check {
   display: inline-block;
   width: 1rem;
   height: 1rem;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   vertical-align: middle; }
-  .form-selectgroup-input[type="checkbox"] + .form-selectgroup-box .form-selectgroup-check {
+  .form-selectgroup-input[type="checkbox"] + .form-selectgroup-label .form-selectgroup-check {
     border-radius: 3px; }
-  .form-selectgroup-input[type="radio"] + .form-selectgroup-box .form-selectgroup-check {
+  .form-selectgroup-input[type="radio"] + .form-selectgroup-label .form-selectgroup-check {
     border-radius: 50%; }
-  .form-selectgroup-input:checked + .form-selectgroup-box .form-selectgroup-check {
+  .form-selectgroup-input:checked + .form-selectgroup-label .form-selectgroup-check {
     background-color: #206bc4;
     background-repeat: repeat;
     background-position: center center;
     background-size: 1rem;
-    border-color: rgba(134, 140, 151, 0.24); }
-  .form-selectgroup-input[type="checkbox"]:checked + .form-selectgroup-box .form-selectgroup-check {
+    border-color: rgba(110, 117, 130, 0.2); }
+  .form-selectgroup-input[type="checkbox"]:checked + .form-selectgroup-label .form-selectgroup-check {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6' transform='scale%28.8%29' transform-origin='50% 50%'/%3e%3c/svg%3e"); }
-  .form-selectgroup-input[type="radio"]:checked + .form-selectgroup-box .form-selectgroup-check {
+  .form-selectgroup-input[type="radio"]:checked + .form-selectgroup-label .form-selectgroup-check {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3' fill='%23ffffff' cx='8' cy='8' /%3e%3c/svg%3e"); }
 
-.form-selectgroup-input:checked + .form-selectgroup-box {
+.form-selectgroup-input:checked + .form-selectgroup-label {
   z-index: 1;
   color: #206bc4;
   background: rgba(32, 107, 196, 0.04);
   border-color: #7aade9;
   box-shadow: 0 1px 1px 0 rgba(32, 107, 196, 0.2); }
 
-.form-selectgroup-input:focus + .form-selectgroup-box {
+.form-selectgroup-input:focus + .form-selectgroup-label {
   z-index: 2;
   color: #206bc4;
   border-color: #7aade9;
   box-shadow: 0 0 0 0.2rem rgba(32, 107, 196, 0.25); }
 
-.form-selectgroup-box-content {
+.form-selectgroup-label-content {
   line-height: 1.3333334; }
 
 /**
 Alternate version of form select group
  */
-.form-selectgroup-boxes .form-selectgroup-box {
+.form-selectgroup-boxes .form-selectgroup-label {
   text-align: left;
   padding: 1.25rem 1.25rem;
   color: inherit; }
 
-.form-selectgroup-boxes .form-selectgroup-input:checked + .form-selectgroup-box {
+.form-selectgroup-boxes .form-selectgroup-input:checked + .form-selectgroup-label {
   color: inherit; }
-  .form-selectgroup-boxes .form-selectgroup-input:checked + .form-selectgroup-box .form-selectgroup-title {
+  .form-selectgroup-boxes .form-selectgroup-input:checked + .form-selectgroup-label .form-selectgroup-title {
     color: #206bc4; }
-  .form-selectgroup-boxes .form-selectgroup-input:checked + .form-selectgroup-box .form-selectgroup-box-content {
+  .form-selectgroup-boxes .form-selectgroup-input:checked + .form-selectgroup-label .form-selectgroup-label-content {
     opacity: 1; }
 
 /**
@@ -10870,7 +10239,7 @@ Select group
   align-items: flex-start; }
   .form-selectgroup-pills .form-selectgroup-item {
     flex-grow: 0; }
-  .form-selectgroup-pills .form-selectgroup-box {
+  .form-selectgroup-pills .form-selectgroup-label {
     border-radius: 50px; }
 
 /**
@@ -10886,7 +10255,7 @@ Remove the cancel buttons in Chrome and Safari on macOS.
   -webkit-appearance: none; }
 
 .form-control.is-valid-lite, .form-control.is-invalid-lite {
-  border-color: rgba(134, 140, 151, 0.24); }
+  border-color: rgba(110, 117, 130, 0.2); }
 
 .legend {
   display: inline-block;
@@ -10906,7 +10275,7 @@ Remove the cancel buttons in Chrome and Safari on macOS.
   margin-left: auto; }
 
 .list-bordered .list-item, .list-row .list-item {
-  border-top: 1px solid rgba(134, 140, 151, 0.24);
+  border-top: 1px solid rgba(110, 117, 130, 0.2);
   margin-top: -1px; }
   .list-bordered .list-item:first-child, .list-row .list-item:first-child {
     border-top: none; }
@@ -10941,7 +10310,7 @@ Remove the cancel buttons in Chrome and Safari on macOS.
 .list-timeline-time {
   float: right;
   margin-left: 1rem;
-  color: #868c97; }
+  color: #6e7582; }
 
 .list-timeline-icon {
   position: absolute;
@@ -10954,7 +10323,7 @@ Remove the cancel buttons in Chrome and Safari on macOS.
   height: 2.5rem;
   color: #ffffff;
   text-align: center;
-  background: #868c97;
+  background: #6e7582;
   border-radius: 50%; }
   .list-timeline-icon .icon {
     width: 1rem;
@@ -10962,7 +10331,7 @@ Remove the cancel buttons in Chrome and Safari on macOS.
 
 .list-timeline-title {
   margin: 0;
-  font-weight: 600; }
+  font-weight: 500; }
 
 .list-timeline-content {
   margin-left: 3.5rem; }
@@ -11002,9 +10371,9 @@ Remove the cancel buttons in Chrome and Safari on macOS.
     border: 0;
     border-radius: 3px; }
     .list-group-transparent .list-group-item .icon {
-      color: #868c97; }
+      color: #6e7582; }
     .list-group-transparent .list-group-item.active {
-      font-weight: 600;
+      font-weight: 500;
       color: inherit;
       background: rgba(32, 107, 196, 0.06); }
       .list-group-transparent .list-group-item.active .icon {
@@ -11017,7 +10386,7 @@ Remove the cancel buttons in Chrome and Safari on macOS.
   .list-separated-item:last-child {
     padding-bottom: 0; }
   .list-separated-item + .list-separated-item {
-    border-top: 1px solid rgba(134, 140, 151, 0.24); }
+    border-top: 1px solid rgba(110, 117, 130, 0.2); }
 
 /**
 Inline list
@@ -11113,7 +10482,7 @@ Dimmer
   margin-bottom: 1rem; }
 
 .modal-body + .modal-body {
-  border-top: 1px solid rgba(134, 140, 151, 0.12); }
+  border-top: 1px solid rgba(110, 117, 130, 0.1); }
 
 .modal-header {
   align-items: center;
@@ -11123,7 +10492,7 @@ Dimmer
 
 .modal-title {
   font-size: 1.125rem;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 1.3333333; }
 
 .modal-footer {
@@ -11139,12 +10508,12 @@ Dimmer
   margin: 0 0.5rem; }
 
 .nav-tabs .icon {
-  color: #868c97; }
+  color: #6e7582; }
 
 .nav-tabs .nav-link {
   padding: 0.75rem 1.25rem;
   line-height: 20px;
-  color: #868c97;
+  color: #6e7582;
   cursor: pointer;
   background: transparent;
   border: none;
@@ -11154,7 +10523,7 @@ Dimmer
     color: #354052;
     border-color: transparent; }
   .nav-tabs .nav-link.disabled {
-    color: rgba(134, 140, 151, 0.2); }
+    color: rgba(110, 117, 130, 0.2); }
   .nav-tabs .nav-link.active {
     color: #354052;
     background: inherit;
@@ -11163,7 +10532,7 @@ Dimmer
 
 .nav-tabs-alt .nav-link {
   font-size: 13px;
-  font-weight: 600;
+  font-weight: 500;
   text-transform: uppercase; }
 
 .nav-icon {
@@ -11174,14 +10543,25 @@ Dimmer
     stroke-width: 1.5; }
 
 .nav-link {
+  border-radius: 3px;
   display: flex;
-  align-items: center;
-  transition: .3s color; }
+  transition: .3s color;
+  align-items: center; }
+  .nav-link .icon {
+    display: inline-block;
+    font-size: 1rem; }
+
+.nav-link-icon {
+  width: 1.25rem;
+  height: 1rem;
+  font-size: 1rem; }
+  .nav-link-icon .icon {
+    display: block; }
 
 .stars {
   display: inline-flex;
   color: #dee1e7;
-  font-size: 0.8125rem; }
+  font-size: 0.75rem; }
   .stars .star:not(:first-child) {
     margin-left: .25rem; }
 
@@ -11209,10 +10589,10 @@ Dimmer
 .page-item-subtitle {
   margin-bottom: 2px;
   font-size: 12px;
-  color: #868c97;
+  color: #6e7582;
   text-transform: uppercase; }
   .page-item.disabled .page-item-subtitle {
-    color: rgba(134, 140, 151, 0.5); }
+    color: rgba(110, 117, 130, 0.5); }
 
 .page-item-title {
   font-size: 1.125rem;
@@ -11221,7 +10601,7 @@ Dimmer
   .page-link:hover .page-item-title {
     color: #206bc4; }
   .page-item.disabled .page-item-title {
-    color: rgba(134, 140, 151, 0.5); }
+    color: rgba(110, 117, 130, 0.5); }
 
 @-webkit-keyframes progress-indeterminate {
   0% {
@@ -11283,8 +10663,8 @@ Dimmer
   right: -0.25rem;
   z-index: 1;
   padding: .25rem .75rem;
-  font-size: 0.6875rem;
-  font-weight: 600;
+  font-size: 0.625rem;
+  font-weight: 500;
   line-height: 1.5rem;
   color: #fff;
   text-align: center;
@@ -11325,9 +10705,9 @@ Dimmer
   .ribbon.bg-pink-lt {
     border-color: #fde2eb !important; }
   .ribbon.bg-red {
-    border-color: #fa4654; }
+    border-color: #cd201f; }
   .ribbon.bg-red-lt {
-    border-color: #fedadd !important; }
+    border-color: #f5d2d2 !important; }
   .ribbon.bg-orange {
     border-color: #ff922b; }
   .ribbon.bg-orange-lt {
@@ -11453,9 +10833,9 @@ Dimmer
   height: 2.5rem;
   line-height: 2.5rem;
   padding: 0 .25rem;
-  font-size: 0.9375rem;
-  font-weight: 600;
-  color: #868c97;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #6e7582;
   text-align: center;
   background: #f1f3f8;
   border-radius: 3px; }
@@ -11527,11 +10907,11 @@ Dimmer
 
 .steps-red .step-item:after, .steps-red .step-item:before {
   color: #ffffff;
-  background: #fa4654; }
+  background: #cd201f; }
 
 .steps-red .step-item.active:before {
   color: inherit;
-  border-color: #fa4654; }
+  border-color: #cd201f; }
 
 .steps-orange .step-item:after, .steps-orange .step-item:before {
   color: #ffffff;
@@ -11643,15 +11023,15 @@ Dimmer
     border-radius: 50%;
     transform: translateX(-50%); }
   .step-item.active {
-    font-weight: 600; }
+    font-weight: 500; }
     .step-item.active:before {
       background: #fff; }
     .step-item.active ~ .step-item {
-      color: #868c97; }
+      color: #6e7582; }
       .step-item.active ~ .step-item:after, .step-item.active ~ .step-item:before {
         background: #f3f5f5; }
       .step-item.active ~ .step-item:before {
-        color: #868c97 !important; }
+        color: #6e7582 !important; }
 
 .steps-counter {
   counter-reset: steps; }
@@ -11677,18 +11057,18 @@ Dimmer
   .table thead th, .markdown > table thead th {
     background: rgba(53, 64, 82, 0.024);
     border-width: 1px;
-    font-size: 0.6875rem;
-    font-weight: 600;
+    font-size: 0.625rem;
+    font-weight: 500;
     text-transform: uppercase;
     letter-spacing: .04em;
-    color: #868c97;
+    color: #6e7582;
     padding-top: .5rem;
     padding-bottom: .5rem; }
     @media print {
       .table thead th, .markdown > table thead th {
         background: transparent; } }
   .table th, .markdown > table th {
-    color: #868c97; }
+    color: #6e7582; }
 
 .table-nowrap th,
 .table-nowrap td {
@@ -11725,15 +11105,15 @@ Dimmer
       border: none;
       color: #354052 !important; }
       .table-mobile td[data-label]:before {
-        font-size: 0.6875rem;
-        font-weight: 600;
+        font-size: 0.625rem;
+        font-weight: 500;
         text-transform: uppercase;
         letter-spacing: .04em;
-        color: #868c97;
+        color: #6e7582;
         content: attr(data-label);
         display: block; }
     .table-mobile tr {
-      border-bottom: 1px solid rgba(134, 140, 151, 0.24); }
+      border-bottom: 1px solid rgba(110, 117, 130, 0.2); }
     .table-mobile .btn {
       display: block; } }
 
@@ -11752,15 +11132,15 @@ Dimmer
       border: none;
       color: #354052 !important; }
       .table-mobile-sm td[data-label]:before {
-        font-size: 0.6875rem;
-        font-weight: 600;
+        font-size: 0.625rem;
+        font-weight: 500;
         text-transform: uppercase;
         letter-spacing: .04em;
-        color: #868c97;
+        color: #6e7582;
         content: attr(data-label);
         display: block; }
     .table-mobile-sm tr {
-      border-bottom: 1px solid rgba(134, 140, 151, 0.24); }
+      border-bottom: 1px solid rgba(110, 117, 130, 0.2); }
     .table-mobile-sm .btn {
       display: block; } }
 
@@ -11779,15 +11159,15 @@ Dimmer
       border: none;
       color: #354052 !important; }
       .table-mobile-md td[data-label]:before {
-        font-size: 0.6875rem;
-        font-weight: 600;
+        font-size: 0.625rem;
+        font-weight: 500;
         text-transform: uppercase;
         letter-spacing: .04em;
-        color: #868c97;
+        color: #6e7582;
         content: attr(data-label);
         display: block; }
     .table-mobile-md tr {
-      border-bottom: 1px solid rgba(134, 140, 151, 0.24); }
+      border-bottom: 1px solid rgba(110, 117, 130, 0.2); }
     .table-mobile-md .btn {
       display: block; } }
 
@@ -11806,15 +11186,15 @@ Dimmer
       border: none;
       color: #354052 !important; }
       .table-mobile-lg td[data-label]:before {
-        font-size: 0.6875rem;
-        font-weight: 600;
+        font-size: 0.625rem;
+        font-weight: 500;
         text-transform: uppercase;
         letter-spacing: .04em;
-        color: #868c97;
+        color: #6e7582;
         content: attr(data-label);
         display: block; }
     .table-mobile-lg tr {
-      border-bottom: 1px solid rgba(134, 140, 151, 0.24); }
+      border-bottom: 1px solid rgba(110, 117, 130, 0.2); }
     .table-mobile-lg .btn {
       display: block; } }
 
@@ -11832,15 +11212,15 @@ Dimmer
     border: none;
     color: #354052 !important; }
     .table-mobile-xl td[data-label]:before {
-      font-size: 0.6875rem;
-      font-weight: 600;
+      font-size: 0.625rem;
+      font-weight: 500;
       text-transform: uppercase;
       letter-spacing: .04em;
-      color: #868c97;
+      color: #6e7582;
       content: attr(data-label);
       display: block; }
   .table-mobile-xl tr {
-    border-bottom: 1px solid rgba(134, 140, 151, 0.24); }
+    border-bottom: 1px solid rgba(110, 117, 130, 0.2); }
   .table-mobile-xl .btn {
     display: block; }
 
@@ -11871,11 +11251,11 @@ Hr text
   display: flex;
   align-items: center;
   margin: 2rem 0;
-  font-size: 0.6875rem;
-  font-weight: 600;
+  font-size: 0.625rem;
+  font-weight: 500;
   text-transform: uppercase;
   letter-spacing: .04em;
-  color: #868c97;
+  color: #6e7582;
   height: 1px; }
   .hr-text:after, .hr-text:before {
     flex: 1 1 auto;
@@ -11891,7 +11271,7 @@ Hr text
   .hr-text > *:first-child {
     padding-right: .5rem;
     padding-left: 0;
-    color: #868c97; }
+    color: #6e7582; }
   .hr-text.hr-text-left:before {
     content: none; }
   .hr-text.hr-text-left > *:first-child {
@@ -11939,12 +11319,12 @@ h6 a,
 strong,
 .strong,
 b {
-  font-weight: 600; }
+  font-weight: 500; }
 
 blockquote {
   padding-left: 1rem;
-  color: #868c97;
-  border-left: 2px solid rgba(134, 140, 151, 0.24); }
+  color: #6e7582;
+  border-left: 2px solid rgba(110, 117, 130, 0.2); }
   blockquote p {
     margin-bottom: 1rem; }
   blockquote cite {
@@ -11968,11 +11348,11 @@ code {
 pre {
   padding: 1rem;
   overflow: auto;
-  font-size: 0.6875rem;
+  font-size: 0.625rem;
   -webkit-hyphens: none;
   -ms-hyphens: none;
   hyphens: none;
-  line-height: 1.6;
+  line-height: 1.7142857;
   -moz-tab-size: 3;
   -o-tab-size: 3;
   tab-size: 3;
@@ -12008,19 +11388,15 @@ Links
 Subheader
  */
 .subheader {
-  font-size: 0.6875rem;
-  font-weight: 600;
+  font-size: 0.625rem;
+  font-weight: 500;
   text-transform: uppercase;
   letter-spacing: .04em;
-  color: #868c97; }
+  color: #6e7582; }
 
 /**
 Markdown
  */
-@media (min-width: 48rem) {
-  .markdown {
-    font-size: 1rem; } }
-
 .markdown > :first-child {
   margin-top: 0; }
 
@@ -12083,7 +11459,7 @@ Chart sparkline
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.6875rem; }
+  font-size: 0.625rem; }
   .chart-sparkline-label .icon {
     width: 1rem;
     height: 1rem; }
@@ -12253,14 +11629,14 @@ SOCIAL COLORS
   background: #fde2eb !important; }
 
 .bg-red {
-  background: #fa4654; }
+  background: #cd201f; }
 
 .text-red {
-  color: #fa4654 !important; }
+  color: #cd201f !important; }
 
 .bg-red-lt {
-  color: #fa4654 !important;
-  background: #fedadd !important; }
+  color: #cd201f !important;
+  background: #f5d2d2 !important; }
 
 .bg-orange {
   background: #ff922b; }
@@ -12418,34 +11794,22 @@ Scrollable
   height: 1rem !important; }
 
 .w-4 {
-  width: 1.25rem !important; }
+  width: 1.5rem !important; }
 
 .h-4 {
-  height: 1.25rem !important; }
+  height: 1.5rem !important; }
 
 .w-5 {
-  width: 2rem !important; }
-
-.h-5 {
-  height: 2rem !important; }
-
-.w-6 {
   width: 3rem !important; }
 
-.h-6 {
+.h-5 {
   height: 3rem !important; }
 
-.w-7 {
-  width: 6rem !important; }
+.w-6 {
+  width: 4.5rem !important; }
 
-.h-7 {
-  height: 6rem !important; }
-
-.w-8 {
-  width: 9rem !important; }
-
-.h-8 {
-  height: 9rem !important; }
+.h-6 {
+  height: 4.5rem !important; }
 
 .w-auto {
   width: auto !important; }
@@ -12556,11 +11920,11 @@ Antialiasing
     color: #f5f7fb;
     background-color: #2f3949; }
   .theme-dark .card,
-  .theme-dark .navbar-light,
   .theme-dark .footer,
   .theme-dark .modal-content,
   .theme-dark .modal-header,
-  .theme-dark .dropdown-menu {
+  .theme-dark .dropdown-menu,
+  .theme-dark .flatpickr-calendar {
     background-color: #354052;
     color: inherit; }
   .theme-dark .card {
@@ -12569,20 +11933,20 @@ Antialiasing
   .theme-dark .form-file-button {
     color: #f5f7fb;
     background-color: #3b475b;
-    border-color: rgba(134, 140, 151, 0.24);
+    border-color: rgba(110, 117, 130, 0.2);
     background-image: none; }
     .theme-dark .btn-secondary:hover,
     .theme-dark .form-file-button:hover {
       color: #f5f7fb;
       background-color: rgba(53, 64, 82, 0);
-      border-color: rgba(134, 140, 151, 0.24); }
+      border-color: rgba(110, 117, 130, 0.2); }
     .theme-dark .btn-secondary:focus, .theme-dark .btn-secondary.focus,
     .theme-dark .form-file-button:focus,
     .theme-dark .form-file-button.focus {
       color: #f5f7fb;
       background-color: rgba(53, 64, 82, 0);
-      border-color: rgba(134, 140, 151, 0.24);
-      box-shadow: 0 0 0 0.2rem rgba(197, 200, 207, 0.5); }
+      border-color: rgba(110, 117, 130, 0.2);
+      box-shadow: 0 0 0 0.2rem rgba(193, 197, 204, 0.5); }
     .theme-dark .btn-secondary:active, .theme-dark .btn-secondary.active,
     .show > .theme-dark .btn-secondary.dropdown-toggle,
     .theme-dark .form-file-button:active,
@@ -12591,25 +11955,25 @@ Antialiasing
     .theme-dark .form-file-button.dropdown-toggle {
       color: #ffffff;
       background-color: #272f3c;
-      border-color: rgba(102, 108, 119, 0.24); }
+      border-color: rgba(81, 86, 95, 0.2); }
       .theme-dark .btn-secondary:active:focus, .theme-dark .btn-secondary.active:focus,
       .show > .theme-dark .btn-secondary.dropdown-toggle:focus,
       .theme-dark .form-file-button:active:focus,
       .theme-dark .form-file-button.active:focus,
       .show >
       .theme-dark .form-file-button.dropdown-toggle:focus {
-        box-shadow: 0 0 0 0.2rem rgba(197, 200, 207, 0.5); }
+        box-shadow: 0 0 0 0.2rem rgba(193, 197, 204, 0.5); }
     .theme-dark .btn-secondary:disabled, .theme-dark .btn-secondary.disabled,
     .theme-dark .form-file-button:disabled,
     .theme-dark .form-file-button.disabled {
       color: #f5f7fb;
       background-color: #3b475b;
-      border-color: rgba(134, 140, 151, 0.24); }
+      border-color: rgba(110, 117, 130, 0.2); }
   .theme-dark .form-check-input:not(:checked),
   .theme-dark .form-select,
   .theme-dark .form-file-text,
   .theme-dark .form-control,
-  .theme-dark .form-selectgroup-box,
+  .theme-dark .form-selectgroup-label,
   .theme-dark .flatpickr-input.flatpickr-input,
   .theme-dark .form-selectgroup-check,
   .theme-dark .form-imagecheck-figure:before {
@@ -12619,8 +11983,6 @@ Antialiasing
     color: #f5f7fb; }
   .theme-dark .input-group-flat .input-group-text {
     background-color: #2f3949; }
-  .theme-dark .navbar {
-    box-shadow: 0 0 0 1px #2f3949; }
   .theme-dark .highlight {
     background-color: #2f3949; }
   .theme-dark .avatar {
@@ -12644,11 +12006,11 @@ Antialiasing
     color: #f5f7fb;
     background-color: #2f3949; }
   .theme-dark-auto .card,
-  .theme-dark-auto .navbar-light,
   .theme-dark-auto .footer,
   .theme-dark-auto .modal-content,
   .theme-dark-auto .modal-header,
-  .theme-dark-auto .dropdown-menu {
+  .theme-dark-auto .dropdown-menu,
+  .theme-dark-auto .flatpickr-calendar {
     background-color: #354052;
     color: inherit; }
   .theme-dark-auto .card {
@@ -12657,20 +12019,20 @@ Antialiasing
   .theme-dark-auto .form-file-button {
     color: #f5f7fb;
     background-color: #3b475b;
-    border-color: rgba(134, 140, 151, 0.24);
+    border-color: rgba(110, 117, 130, 0.2);
     background-image: none; }
     .theme-dark-auto .btn-secondary:hover,
     .theme-dark-auto .form-file-button:hover {
       color: #f5f7fb;
       background-color: rgba(53, 64, 82, 0);
-      border-color: rgba(134, 140, 151, 0.24); }
+      border-color: rgba(110, 117, 130, 0.2); }
     .theme-dark-auto .btn-secondary:focus, .theme-dark-auto .btn-secondary.focus,
     .theme-dark-auto .form-file-button:focus,
     .theme-dark-auto .form-file-button.focus {
       color: #f5f7fb;
       background-color: rgba(53, 64, 82, 0);
-      border-color: rgba(134, 140, 151, 0.24);
-      box-shadow: 0 0 0 0.2rem rgba(197, 200, 207, 0.5); }
+      border-color: rgba(110, 117, 130, 0.2);
+      box-shadow: 0 0 0 0.2rem rgba(193, 197, 204, 0.5); }
     .theme-dark-auto .btn-secondary:active, .theme-dark-auto .btn-secondary.active,
     .show > .theme-dark-auto .btn-secondary.dropdown-toggle,
     .theme-dark-auto .form-file-button:active,
@@ -12679,25 +12041,25 @@ Antialiasing
     .theme-dark-auto .form-file-button.dropdown-toggle {
       color: #ffffff;
       background-color: #272f3c;
-      border-color: rgba(102, 108, 119, 0.24); }
+      border-color: rgba(81, 86, 95, 0.2); }
       .theme-dark-auto .btn-secondary:active:focus, .theme-dark-auto .btn-secondary.active:focus,
       .show > .theme-dark-auto .btn-secondary.dropdown-toggle:focus,
       .theme-dark-auto .form-file-button:active:focus,
       .theme-dark-auto .form-file-button.active:focus,
       .show >
       .theme-dark-auto .form-file-button.dropdown-toggle:focus {
-        box-shadow: 0 0 0 0.2rem rgba(197, 200, 207, 0.5); }
+        box-shadow: 0 0 0 0.2rem rgba(193, 197, 204, 0.5); }
     .theme-dark-auto .btn-secondary:disabled, .theme-dark-auto .btn-secondary.disabled,
     .theme-dark-auto .form-file-button:disabled,
     .theme-dark-auto .form-file-button.disabled {
       color: #f5f7fb;
       background-color: #3b475b;
-      border-color: rgba(134, 140, 151, 0.24); }
+      border-color: rgba(110, 117, 130, 0.2); }
   .theme-dark-auto .form-check-input:not(:checked),
   .theme-dark-auto .form-select,
   .theme-dark-auto .form-file-text,
   .theme-dark-auto .form-control,
-  .theme-dark-auto .form-selectgroup-box,
+  .theme-dark-auto .form-selectgroup-label,
   .theme-dark-auto .flatpickr-input.flatpickr-input,
   .theme-dark-auto .form-selectgroup-check,
   .theme-dark-auto .form-imagecheck-figure:before {
@@ -12707,8 +12069,6 @@ Antialiasing
     color: #f5f7fb; }
   .theme-dark-auto .input-group-flat .input-group-text {
     background-color: #2f3949; }
-  .theme-dark-auto .navbar {
-    box-shadow: 0 0 0 1px #2f3949; }
   .theme-dark-auto .highlight {
     background-color: #2f3949; }
   .theme-dark-auto .avatar {
@@ -12733,11 +12093,12 @@ Antialiasing
 
 .selectize-control {
   padding: 0;
-  border: 0; }
+  border: 0;
+  height: auto; }
   .selectize-control.multi .selectize-input.has-items {
     padding-left: 6px; }
   .selectize-control.multi .selectize-input > div {
-    font-size: 0.8125rem;
+    font-size: 0.75rem;
     margin: 0 6px 2px 0;
     padding: 2px 8px;
     border-radius: 3px;
@@ -12747,7 +12108,7 @@ Antialiasing
     font-size: inherit !important;
     font-weight: normal !important;
     border-left: 0 !important;
-    color: #868c97 !important; }
+    color: #6e7582 !important; }
   .selectize-control.is-valid {
     padding: 0; }
     .selectize-control.is-valid .selectize-input {
@@ -12757,36 +12118,36 @@ Antialiasing
     .selectize-control.is-valid .selectize-dropdown {
       background: none;
       background-color: inherit;
-      border-color: rgba(134, 140, 151, 0.24);
+      border-color: rgba(110, 117, 130, 0.2);
       padding-right: 0; }
   .selectize-control.is-invalid {
     padding: 0; }
     .selectize-control.is-invalid .selectize-input {
-      border-color: #fa4654; }
+      border-color: #cd201f; }
       .selectize-control.is-invalid .selectize-input.focus {
-        box-shadow: 0 0 0 0.2rem rgba(250, 70, 84, 0.25); }
+        box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.25); }
     .selectize-control.is-invalid .selectize-dropdown {
       background: none;
       background-color: inherit;
-      border-color: rgba(134, 140, 151, 0.24);
+      border-color: rgba(110, 117, 130, 0.2);
       padding-right: 0; }
 
 .selectize-input {
   display: flex !important;
-  height: 100%;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   padding: 0.375rem 0.75rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   box-shadow: none;
   line-height: 1.4666667;
-  background-color: inherit;
-  color: inherit !important; }
+  background-color: inherit !important;
+  color: inherit !important;
+  flex-wrap: wrap; }
   .selectize-input.full {
     background-color: inherit; }
   .selectize-input.dropdown-active {
     border-radius: 3px; }
   .selectize-control.single .selectize-input {
-    background: #ffffff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28134, 140, 151, 0.48%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.75rem center/16px 12px; }
+    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28110, 117, 130, 0.44%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.75rem center/16px 12px; }
   .selectize-input.focus {
     border-color: #7aade9;
     box-shadow: 0 0 0 0.2rem rgba(32, 107, 196, 0.25); }
@@ -12802,7 +12163,7 @@ Antialiasing
   .selectize-dropdown .option-header {
     padding: 0.25rem 0.75rem; }
   .selectize-dropdown .active {
-    background: rgba(134, 140, 151, 0.06);
+    background: rgba(110, 117, 130, 0.06);
     color: inherit;
     cursor: pointer; }
 
@@ -12811,7 +12172,7 @@ Antialiasing
   height: auto;
   width: auto;
   left: .5rem;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   background: #ffffff;
   color: #354052; }
 
@@ -12823,22 +12184,22 @@ Antialiasing
 
 .jqvmap-label {
   font-family: inherit;
-  font-size: 0.6875rem;
+  font-size: 0.625rem;
   line-height: 1;
   padding: .25rem;
   background: #354052; }
 
 .apexcharts-title-text {
-  font-weight: 600 !important; }
+  font-weight: 500 !important; }
 
 .apexcharts-tooltip-title {
-  font-weight: 600 !important;
+  font-weight: 500 !important;
   padding-bottom: .25rem !important; }
 
 .apexcharts-gridline,
 .apexcharts-ycrosshairs,
 .apexcharts-xaxis-tick {
-  stroke: rgba(134, 140, 151, 0.24) !important; }
+  stroke: rgba(110, 117, 130, 0.2) !important; }
 
 .apexcharts-tooltip {
   line-height: 1;
@@ -12874,41 +12235,41 @@ Antialiasing
 .fc-unthemed td,
 .fc-unthemed th,
 .fc-unthemed thead {
-  border-color: rgba(134, 140, 151, 0.24); }
+  border-color: rgba(110, 117, 130, 0.2); }
 
 .fc-unthemed .fc-toolbar h2, .fc-unthemed .fc-toolbar .h2 {
   font-size: 1.375rem;
   margin: 0; }
 
 .fc-unthemed .fc-button {
-  color: #868c97;
+  color: #6e7582;
   background-color: #ffffff;
-  border-color: rgba(134, 140, 151, 0.24);
+  border-color: rgba(110, 117, 130, 0.2);
   padding: 0.375rem 1rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   border-radius: 3px;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
   .fc-unthemed .fc-button:hover {
     color: #354052;
     background-color: #ececec;
-    border-color: rgba(108, 114, 126, 0.24); }
+    border-color: rgba(87, 92, 102, 0.2); }
   .fc-unthemed .fc-button:focus, .fc-unthemed .fc-button.focus {
     color: #354052;
     background-color: #ececec;
-    border-color: rgba(108, 114, 126, 0.24);
-    box-shadow: 0 0 0 0.2rem rgba(134, 140, 151, 0.5); }
+    border-color: rgba(87, 92, 102, 0.2);
+    box-shadow: 0 0 0 0.2rem rgba(110, 117, 130, 0.5); }
   .fc-unthemed .fc-button:active, .fc-unthemed .fc-button.active,
   .show > .fc-unthemed .fc-button.dropdown-toggle {
     color: #354052;
     background-color: #e6e6e6;
-    border-color: rgba(102, 108, 119, 0.24); }
+    border-color: rgba(81, 86, 95, 0.2); }
     .fc-unthemed .fc-button:active:focus, .fc-unthemed .fc-button.active:focus,
     .show > .fc-unthemed .fc-button.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(134, 140, 151, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(110, 117, 130, 0.5); }
   .fc-unthemed .fc-button:disabled, .fc-unthemed .fc-button.disabled {
-    color: #868c97;
+    color: #6e7582;
     background-color: #ffffff;
-    border-color: rgba(134, 140, 151, 0.24); }
+    border-color: rgba(110, 117, 130, 0.2); }
   @media (prefers-reduced-motion: reduce) {
     .fc-unthemed .fc-button {
       transition: none; } }
@@ -12918,14 +12279,14 @@ Antialiasing
 
 .fc-unthemed .fc-day-header {
   padding-bottom: .25rem;
-  font-weight: 600; }
+  font-weight: 500; }
 
 .fc-unthemed.card-calendar .fc-day-grid-container {
   border-bottom: 0;
   border-left: 0; }
 
 .fc-unthemed .fc-time {
-  font-weight: 600; }
+  font-weight: 500; }
 
 .fc-unthemed .fc-event {
   border-color: rgba(0, 0, 0, 0.05);
@@ -12941,7 +12302,7 @@ Antialiasing
 
 .flatpickr-calendar {
   background: #ffffff;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 3px;
   padding: .5rem;
   font-size: inherit;
@@ -12977,16 +12338,16 @@ Antialiasing
     color: inherit;
     opacity: .2; }
   .flatpickr-day.today {
-    border-color: rgba(134, 140, 151, 0.24); }
+    border-color: rgba(110, 117, 130, 0.2); }
   .flatpickr-day.selected {
     background-color: #206bc4; }
 
 span.flatpickr-weekday {
-  font-size: 0.6875rem;
-  font-weight: 600;
+  font-size: 0.625rem;
+  font-weight: 500;
   text-transform: uppercase;
   letter-spacing: .04em;
-  color: #868c97; }
+  color: #6e7582; }
 
 .flatpickr-months {
   margin-bottom: .5rem; }
@@ -13003,7 +12364,7 @@ span.flatpickr-weekday {
   .flatpickr-months .flatpickr-prev-month,
   .flatpickr-months .flatpickr-next-month {
     position: static;
-    color: #868c97; }
+    color: #6e7582; }
     .flatpickr-months .flatpickr-prev-month:hover,
     .flatpickr-months .flatpickr-next-month:hover {
       color: #354052; }
@@ -13029,7 +12390,7 @@ span.flatpickr-weekday {
 .flatpickr-day:focus,
 .flatpickr-day.prevMonthDay:focus,
 .flatpickr-day.nextMonthDay:focus {
-  background: rgba(134, 140, 151, 0.06);
+  background: rgba(110, 117, 130, 0.06);
   border-color: transparent; }
 
 .noUi-target {
diff --git a/demo/dist/css/tabler.css.map b/demo/dist/css/tabler.css.map
index c6bb53ec7..27eb01db6 100644
Binary files a/demo/dist/css/tabler.css.map and b/demo/dist/css/tabler.css.map differ
diff --git a/demo/dist/css/tabler.min.css b/demo/dist/css/tabler.min.css
index c1dd91e55..e82265ec8 100644
--- a/demo/dist/css/tabler.min.css
+++ b/demo/dist/css/tabler.min.css
@@ -1,7 +1,7 @@
 @charset "UTF-8";/*!
- * Tabler (v1.0.0-alpha.4)
+ * Tabler (v1.0.0-alpha.5)
  * Copyright 2018-2020 The Tabler Authors
  * Copyright 2018-2020 codecalm
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,500,600,700&display=swap);:root{--blue:#206bc4;--azure:#45aaf2;--indigo:#6574cd;--purple:#a55eea;--pink:#f66d9b;--red:#fa4654;--orange:#ff922b;--yellow:#fab005;--lime:#94d82d;--green:#5eba00;--teal:#2bcbba;--cyan:#17a2b8;--white:#ffffff;--gray:#a8aeb7;--gray-dark:#545d6d;--dark:#354052;--primary:#206bc4;--secondary:#868c97;--success:#5eba00;--info:#45aaf2;--warning:#fab005;--danger:#fa4654;--light:#f5f7fb;--dark:#354052;--font-family-sans-serif:"Source Sans Pro",-apple-system,blinkmacsystemfont,segoe ui,helvetica,arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;--font-family-monospace:Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}*,::after,::before{box-sizing:border-box}body{margin:0;font-family:"Source Sans Pro",-apple-system,blinkmacsystemfont,segoe ui,helvetica,arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;font-size:.9375rem;font-weight:400;line-height:1.6;color:#354052;background-color:#f5f7fb;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}.hr,hr{margin:2rem 0;color:inherit;background-color:currentColor;border:0;opacity:.1}.hr:not([size]),hr:not([size]){height:1px}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:600;line-height:1.2}.h1,h1{font-size:calc(1.2875rem + .45vw)}@media (min-width:1200px){.h1,h1{font-size:1.625rem}}.h2,h2{font-size:calc(1.2625rem + .15vw)}@media (min-width:1200px){.h2,h2{font-size:1.375rem}}.h3,h3{font-size:1.125rem}.h4,h4{font-size:.9375rem}.h5,h5{font-size:.8125rem}.h6,h6{font-size:.6875rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:600}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}.small,small{font-size:87.5%}.mark,mark{padding:.2em;background-color:#fcf8e3}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#206bc4;text-decoration:none}a:hover{color:#154782}a:not([href]),a:not([href]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.6875rem}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.6875rem;color:#206bc4;word-wrap:break-word}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:.6875rem;color:#fff;background-color:#354052;border-radius:.2rem}kbd kbd{padding:0;font-size:1em;font-weight:600}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:#868c97;text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[list]::-webkit-calendar-picker-indicator{display:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:textfield}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit;white-space:normal}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}.lead{font-size:.9375rem;font-weight:400}.display-1{font-size:calc(1.725rem + 5.7vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-1{font-size:6rem}}.display-2{font-size:calc(1.675rem + 5.1vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-2{font-size:5.5rem}}.display-3{font-size:calc(1.575rem + 3.9vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-3{font-size:4.5rem}}.display-4{font-size:calc(1.475rem + 2.7vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-4{font-size:3.5rem}}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}.initialism{font-size:87.5%;text-transform:uppercase}.blockquote{margin-bottom:1rem;font-size:.9375rem}.blockquote-footer{display:block;font-size:87.5%;color:#a8aeb7}.blockquote-footer::before{content:"\2014\00A0"}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:#f5f7fb;border:1px solid #e9ecf1;border-radius:3px;max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:.5rem;line-height:1}.figure-caption{font-size:87.5%;color:#a8aeb7}.container{width:100%;padding-right:1rem;padding-left:1rem;margin-right:auto;margin-left:auto}@media (min-width:33rem){.container{max-width:32.5rem}}@media (min-width:48rem){.container{max-width:47.5rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:75.25rem){.container{max-width:75.25rem}}.container-fluid,.container-lg,.container-md,.container-sm,.container-xl{width:100%;padding-right:1rem;padding-left:1rem;margin-right:auto;margin-left:auto}@media (min-width:33rem){.container,.container-sm{max-width:32.5rem}}@media (min-width:48rem){.container,.container-md,.container-sm{max-width:47.5rem}}@media (min-width:64rem){.container,.container-lg,.container-md,.container-sm{max-width:64rem}}@media (min-width:75.25rem){.container,.container-lg,.container-md,.container-sm,.container-xl{max-width:75.25rem}}.row{display:flex;flex-wrap:wrap;margin-right:-.75rem;margin-left:-.75rem}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:.75rem;padding-left:.75rem}.g-0,.gx-0{margin-right:0;margin-left:0}.g-0>*,.gx-0>*{padding-right:0;padding-left:0}.g-0,.gy-0{margin-top:0}.g-0>*,.gy-0>*{margin-top:0}.g-1,.gx-1{margin-right:-.125rem;margin-left:-.125rem}.g-1>*,.gx-1>*{padding-right:.125rem;padding-left:.125rem}.g-1,.gy-1{margin-top:-.25rem}.g-1>*,.gy-1>*{margin-top:.25rem}.g-2,.gx-2{margin-right:-.25rem;margin-left:-.25rem}.g-2>*,.gx-2>*{padding-right:.25rem;padding-left:.25rem}.g-2,.gy-2{margin-top:-.5rem}.g-2>*,.gy-2>*{margin-top:.5rem}.g-3,.gx-3{margin-right:-.5rem;margin-left:-.5rem}.g-3>*,.gx-3>*{padding-right:.5rem;padding-left:.5rem}.g-3,.gy-3{margin-top:-1rem}.g-3>*,.gy-3>*{margin-top:1rem}.g-4,.gx-4{margin-right:-.625rem;margin-left:-.625rem}.g-4>*,.gx-4>*{padding-right:.625rem;padding-left:.625rem}.g-4,.gy-4{margin-top:-1.25rem}.g-4>*,.gy-4>*{margin-top:1.25rem}.g-5,.gx-5{margin-right:-1rem;margin-left:-1rem}.g-5>*,.gx-5>*{padding-right:1rem;padding-left:1rem}.g-5,.gy-5{margin-top:-2rem}.g-5>*,.gy-5>*{margin-top:2rem}.g-6,.gx-6{margin-right:-1.5rem;margin-left:-1.5rem}.g-6>*,.gx-6>*{padding-right:1.5rem;padding-left:1.5rem}.g-6,.gy-6{margin-top:-3rem}.g-6>*,.gy-6>*{margin-top:3rem}.g-7,.gx-7{margin-right:-3rem;margin-left:-3rem}.g-7>*,.gx-7>*{padding-right:3rem;padding-left:3rem}.g-7,.gy-7{margin-top:-6rem}.g-7>*,.gy-7>*{margin-top:6rem}.g-8,.gx-8{margin-right:-4.5rem;margin-left:-4.5rem}.g-8>*,.gx-8>*{padding-right:4.5rem;padding-left:4.5rem}.g-8,.gy-8{margin-top:-9rem}.g-8>*,.gy-8>*{margin-top:9rem}@media (min-width:33rem){.g-sm-0,.gx-sm-0{margin-right:0;margin-left:0}.g-sm-0>*,.gx-sm-0>*{padding-right:0;padding-left:0}.g-sm-0,.gy-sm-0{margin-top:0}.g-sm-0>*,.gy-sm-0>*{margin-top:0}.g-sm-1,.gx-sm-1{margin-right:-.125rem;margin-left:-.125rem}.g-sm-1>*,.gx-sm-1>*{padding-right:.125rem;padding-left:.125rem}.g-sm-1,.gy-sm-1{margin-top:-.25rem}.g-sm-1>*,.gy-sm-1>*{margin-top:.25rem}.g-sm-2,.gx-sm-2{margin-right:-.25rem;margin-left:-.25rem}.g-sm-2>*,.gx-sm-2>*{padding-right:.25rem;padding-left:.25rem}.g-sm-2,.gy-sm-2{margin-top:-.5rem}.g-sm-2>*,.gy-sm-2>*{margin-top:.5rem}.g-sm-3,.gx-sm-3{margin-right:-.5rem;margin-left:-.5rem}.g-sm-3>*,.gx-sm-3>*{padding-right:.5rem;padding-left:.5rem}.g-sm-3,.gy-sm-3{margin-top:-1rem}.g-sm-3>*,.gy-sm-3>*{margin-top:1rem}.g-sm-4,.gx-sm-4{margin-right:-.625rem;margin-left:-.625rem}.g-sm-4>*,.gx-sm-4>*{padding-right:.625rem;padding-left:.625rem}.g-sm-4,.gy-sm-4{margin-top:-1.25rem}.g-sm-4>*,.gy-sm-4>*{margin-top:1.25rem}.g-sm-5,.gx-sm-5{margin-right:-1rem;margin-left:-1rem}.g-sm-5>*,.gx-sm-5>*{padding-right:1rem;padding-left:1rem}.g-sm-5,.gy-sm-5{margin-top:-2rem}.g-sm-5>*,.gy-sm-5>*{margin-top:2rem}.g-sm-6,.gx-sm-6{margin-right:-1.5rem;margin-left:-1.5rem}.g-sm-6>*,.gx-sm-6>*{padding-right:1.5rem;padding-left:1.5rem}.g-sm-6,.gy-sm-6{margin-top:-3rem}.g-sm-6>*,.gy-sm-6>*{margin-top:3rem}.g-sm-7,.gx-sm-7{margin-right:-3rem;margin-left:-3rem}.g-sm-7>*,.gx-sm-7>*{padding-right:3rem;padding-left:3rem}.g-sm-7,.gy-sm-7{margin-top:-6rem}.g-sm-7>*,.gy-sm-7>*{margin-top:6rem}.g-sm-8,.gx-sm-8{margin-right:-4.5rem;margin-left:-4.5rem}.g-sm-8>*,.gx-sm-8>*{padding-right:4.5rem;padding-left:4.5rem}.g-sm-8,.gy-sm-8{margin-top:-9rem}.g-sm-8>*,.gy-sm-8>*{margin-top:9rem}}@media (min-width:48rem){.g-md-0,.gx-md-0{margin-right:0;margin-left:0}.g-md-0>*,.gx-md-0>*{padding-right:0;padding-left:0}.g-md-0,.gy-md-0{margin-top:0}.g-md-0>*,.gy-md-0>*{margin-top:0}.g-md-1,.gx-md-1{margin-right:-.125rem;margin-left:-.125rem}.g-md-1>*,.gx-md-1>*{padding-right:.125rem;padding-left:.125rem}.g-md-1,.gy-md-1{margin-top:-.25rem}.g-md-1>*,.gy-md-1>*{margin-top:.25rem}.g-md-2,.gx-md-2{margin-right:-.25rem;margin-left:-.25rem}.g-md-2>*,.gx-md-2>*{padding-right:.25rem;padding-left:.25rem}.g-md-2,.gy-md-2{margin-top:-.5rem}.g-md-2>*,.gy-md-2>*{margin-top:.5rem}.g-md-3,.gx-md-3{margin-right:-.5rem;margin-left:-.5rem}.g-md-3>*,.gx-md-3>*{padding-right:.5rem;padding-left:.5rem}.g-md-3,.gy-md-3{margin-top:-1rem}.g-md-3>*,.gy-md-3>*{margin-top:1rem}.g-md-4,.gx-md-4{margin-right:-.625rem;margin-left:-.625rem}.g-md-4>*,.gx-md-4>*{padding-right:.625rem;padding-left:.625rem}.g-md-4,.gy-md-4{margin-top:-1.25rem}.g-md-4>*,.gy-md-4>*{margin-top:1.25rem}.g-md-5,.gx-md-5{margin-right:-1rem;margin-left:-1rem}.g-md-5>*,.gx-md-5>*{padding-right:1rem;padding-left:1rem}.g-md-5,.gy-md-5{margin-top:-2rem}.g-md-5>*,.gy-md-5>*{margin-top:2rem}.g-md-6,.gx-md-6{margin-right:-1.5rem;margin-left:-1.5rem}.g-md-6>*,.gx-md-6>*{padding-right:1.5rem;padding-left:1.5rem}.g-md-6,.gy-md-6{margin-top:-3rem}.g-md-6>*,.gy-md-6>*{margin-top:3rem}.g-md-7,.gx-md-7{margin-right:-3rem;margin-left:-3rem}.g-md-7>*,.gx-md-7>*{padding-right:3rem;padding-left:3rem}.g-md-7,.gy-md-7{margin-top:-6rem}.g-md-7>*,.gy-md-7>*{margin-top:6rem}.g-md-8,.gx-md-8{margin-right:-4.5rem;margin-left:-4.5rem}.g-md-8>*,.gx-md-8>*{padding-right:4.5rem;padding-left:4.5rem}.g-md-8,.gy-md-8{margin-top:-9rem}.g-md-8>*,.gy-md-8>*{margin-top:9rem}}@media (min-width:64rem){.g-lg-0,.gx-lg-0{margin-right:0;margin-left:0}.g-lg-0>*,.gx-lg-0>*{padding-right:0;padding-left:0}.g-lg-0,.gy-lg-0{margin-top:0}.g-lg-0>*,.gy-lg-0>*{margin-top:0}.g-lg-1,.gx-lg-1{margin-right:-.125rem;margin-left:-.125rem}.g-lg-1>*,.gx-lg-1>*{padding-right:.125rem;padding-left:.125rem}.g-lg-1,.gy-lg-1{margin-top:-.25rem}.g-lg-1>*,.gy-lg-1>*{margin-top:.25rem}.g-lg-2,.gx-lg-2{margin-right:-.25rem;margin-left:-.25rem}.g-lg-2>*,.gx-lg-2>*{padding-right:.25rem;padding-left:.25rem}.g-lg-2,.gy-lg-2{margin-top:-.5rem}.g-lg-2>*,.gy-lg-2>*{margin-top:.5rem}.g-lg-3,.gx-lg-3{margin-right:-.5rem;margin-left:-.5rem}.g-lg-3>*,.gx-lg-3>*{padding-right:.5rem;padding-left:.5rem}.g-lg-3,.gy-lg-3{margin-top:-1rem}.g-lg-3>*,.gy-lg-3>*{margin-top:1rem}.g-lg-4,.gx-lg-4{margin-right:-.625rem;margin-left:-.625rem}.g-lg-4>*,.gx-lg-4>*{padding-right:.625rem;padding-left:.625rem}.g-lg-4,.gy-lg-4{margin-top:-1.25rem}.g-lg-4>*,.gy-lg-4>*{margin-top:1.25rem}.g-lg-5,.gx-lg-5{margin-right:-1rem;margin-left:-1rem}.g-lg-5>*,.gx-lg-5>*{padding-right:1rem;padding-left:1rem}.g-lg-5,.gy-lg-5{margin-top:-2rem}.g-lg-5>*,.gy-lg-5>*{margin-top:2rem}.g-lg-6,.gx-lg-6{margin-right:-1.5rem;margin-left:-1.5rem}.g-lg-6>*,.gx-lg-6>*{padding-right:1.5rem;padding-left:1.5rem}.g-lg-6,.gy-lg-6{margin-top:-3rem}.g-lg-6>*,.gy-lg-6>*{margin-top:3rem}.g-lg-7,.gx-lg-7{margin-right:-3rem;margin-left:-3rem}.g-lg-7>*,.gx-lg-7>*{padding-right:3rem;padding-left:3rem}.g-lg-7,.gy-lg-7{margin-top:-6rem}.g-lg-7>*,.gy-lg-7>*{margin-top:6rem}.g-lg-8,.gx-lg-8{margin-right:-4.5rem;margin-left:-4.5rem}.g-lg-8>*,.gx-lg-8>*{padding-right:4.5rem;padding-left:4.5rem}.g-lg-8,.gy-lg-8{margin-top:-9rem}.g-lg-8>*,.gy-lg-8>*{margin-top:9rem}}@media (min-width:75.25rem){.g-xl-0,.gx-xl-0{margin-right:0;margin-left:0}.g-xl-0>*,.gx-xl-0>*{padding-right:0;padding-left:0}.g-xl-0,.gy-xl-0{margin-top:0}.g-xl-0>*,.gy-xl-0>*{margin-top:0}.g-xl-1,.gx-xl-1{margin-right:-.125rem;margin-left:-.125rem}.g-xl-1>*,.gx-xl-1>*{padding-right:.125rem;padding-left:.125rem}.g-xl-1,.gy-xl-1{margin-top:-.25rem}.g-xl-1>*,.gy-xl-1>*{margin-top:.25rem}.g-xl-2,.gx-xl-2{margin-right:-.25rem;margin-left:-.25rem}.g-xl-2>*,.gx-xl-2>*{padding-right:.25rem;padding-left:.25rem}.g-xl-2,.gy-xl-2{margin-top:-.5rem}.g-xl-2>*,.gy-xl-2>*{margin-top:.5rem}.g-xl-3,.gx-xl-3{margin-right:-.5rem;margin-left:-.5rem}.g-xl-3>*,.gx-xl-3>*{padding-right:.5rem;padding-left:.5rem}.g-xl-3,.gy-xl-3{margin-top:-1rem}.g-xl-3>*,.gy-xl-3>*{margin-top:1rem}.g-xl-4,.gx-xl-4{margin-right:-.625rem;margin-left:-.625rem}.g-xl-4>*,.gx-xl-4>*{padding-right:.625rem;padding-left:.625rem}.g-xl-4,.gy-xl-4{margin-top:-1.25rem}.g-xl-4>*,.gy-xl-4>*{margin-top:1.25rem}.g-xl-5,.gx-xl-5{margin-right:-1rem;margin-left:-1rem}.g-xl-5>*,.gx-xl-5>*{padding-right:1rem;padding-left:1rem}.g-xl-5,.gy-xl-5{margin-top:-2rem}.g-xl-5>*,.gy-xl-5>*{margin-top:2rem}.g-xl-6,.gx-xl-6{margin-right:-1.5rem;margin-left:-1.5rem}.g-xl-6>*,.gx-xl-6>*{padding-right:1.5rem;padding-left:1.5rem}.g-xl-6,.gy-xl-6{margin-top:-3rem}.g-xl-6>*,.gy-xl-6>*{margin-top:3rem}.g-xl-7,.gx-xl-7{margin-right:-3rem;margin-left:-3rem}.g-xl-7>*,.gx-xl-7>*{padding-right:3rem;padding-left:3rem}.g-xl-7,.gy-xl-7{margin-top:-6rem}.g-xl-7>*,.gy-xl-7>*{margin-top:6rem}.g-xl-8,.gx-xl-8{margin-right:-4.5rem;margin-left:-4.5rem}.g-xl-8>*,.gx-xl-8>*{padding-right:4.5rem;padding-left:4.5rem}.g-xl-8,.gy-xl-8{margin-top:-9rem}.g-xl-8>*,.gy-xl-8>*{margin-top:9rem}}.col{flex:1 0 0%;min-width:0}.row-cols-auto>*{flex:0 0 auto;width:auto}.row-cols-1>*{flex:0 0 auto;width:100%}.row-cols-2>*{flex:0 0 auto;width:50%}.row-cols-3>*{flex:0 0 auto;width:33.3333333%}.row-cols-4>*{flex:0 0 auto;width:25%}.row-cols-5>*{flex:0 0 auto;width:20%}.row-cols-6>*{flex:0 0 auto;width:16.6666667%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.3333333%}.col-2{flex:0 0 auto;width:16.6666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.3333333%}.col-5{flex:0 0 auto;width:41.6666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.3333333%}.col-8{flex:0 0 auto;width:66.6666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.3333333%}.col-11{flex:0 0 auto;width:91.6666667%}.col-12{flex:0 0 auto;width:100%}.offset-1{margin-left:8.3333333%}.offset-2{margin-left:16.6666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.3333333%}.offset-5{margin-left:41.6666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.3333333%}.offset-8{margin-left:66.6666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.3333333%}.offset-11{margin-left:91.6666667%}@media (min-width:33rem){.col-sm{flex:1 0 0%;min-width:0}.row-cols-sm-auto>*{flex:0 0 auto;width:auto}.row-cols-sm-1>*{flex:0 0 auto;width:100%}.row-cols-sm-2>*{flex:0 0 auto;width:50%}.row-cols-sm-3>*{flex:0 0 auto;width:33.3333333%}.row-cols-sm-4>*{flex:0 0 auto;width:25%}.row-cols-sm-5>*{flex:0 0 auto;width:20%}.row-cols-sm-6>*{flex:0 0 auto;width:16.6666667%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.3333333%}.col-sm-2{flex:0 0 auto;width:16.6666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.3333333%}.col-sm-5{flex:0 0 auto;width:41.6666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.3333333%}.col-sm-8{flex:0 0 auto;width:66.6666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.3333333%}.col-sm-11{flex:0 0 auto;width:91.6666667%}.col-sm-12{flex:0 0 auto;width:100%}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.3333333%}.offset-sm-2{margin-left:16.6666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.3333333%}.offset-sm-5{margin-left:41.6666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.3333333%}.offset-sm-8{margin-left:66.6666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.3333333%}.offset-sm-11{margin-left:91.6666667%}}@media (min-width:48rem){.col-md{flex:1 0 0%;min-width:0}.row-cols-md-auto>*{flex:0 0 auto;width:auto}.row-cols-md-1>*{flex:0 0 auto;width:100%}.row-cols-md-2>*{flex:0 0 auto;width:50%}.row-cols-md-3>*{flex:0 0 auto;width:33.3333333%}.row-cols-md-4>*{flex:0 0 auto;width:25%}.row-cols-md-5>*{flex:0 0 auto;width:20%}.row-cols-md-6>*{flex:0 0 auto;width:16.6666667%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.3333333%}.col-md-2{flex:0 0 auto;width:16.6666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.3333333%}.col-md-5{flex:0 0 auto;width:41.6666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.3333333%}.col-md-8{flex:0 0 auto;width:66.6666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.3333333%}.col-md-11{flex:0 0 auto;width:91.6666667%}.col-md-12{flex:0 0 auto;width:100%}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.3333333%}.offset-md-2{margin-left:16.6666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.3333333%}.offset-md-5{margin-left:41.6666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.3333333%}.offset-md-8{margin-left:66.6666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.3333333%}.offset-md-11{margin-left:91.6666667%}}@media (min-width:64rem){.col-lg{flex:1 0 0%;min-width:0}.row-cols-lg-auto>*{flex:0 0 auto;width:auto}.row-cols-lg-1>*{flex:0 0 auto;width:100%}.row-cols-lg-2>*{flex:0 0 auto;width:50%}.row-cols-lg-3>*{flex:0 0 auto;width:33.3333333%}.row-cols-lg-4>*{flex:0 0 auto;width:25%}.row-cols-lg-5>*{flex:0 0 auto;width:20%}.row-cols-lg-6>*{flex:0 0 auto;width:16.6666667%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.3333333%}.col-lg-2{flex:0 0 auto;width:16.6666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.3333333%}.col-lg-5{flex:0 0 auto;width:41.6666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.3333333%}.col-lg-8{flex:0 0 auto;width:66.6666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.3333333%}.col-lg-11{flex:0 0 auto;width:91.6666667%}.col-lg-12{flex:0 0 auto;width:100%}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.3333333%}.offset-lg-2{margin-left:16.6666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.3333333%}.offset-lg-5{margin-left:41.6666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.3333333%}.offset-lg-8{margin-left:66.6666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.3333333%}.offset-lg-11{margin-left:91.6666667%}}@media (min-width:75.25rem){.col-xl{flex:1 0 0%;min-width:0}.row-cols-xl-auto>*{flex:0 0 auto;width:auto}.row-cols-xl-1>*{flex:0 0 auto;width:100%}.row-cols-xl-2>*{flex:0 0 auto;width:50%}.row-cols-xl-3>*{flex:0 0 auto;width:33.3333333%}.row-cols-xl-4>*{flex:0 0 auto;width:25%}.row-cols-xl-5>*{flex:0 0 auto;width:20%}.row-cols-xl-6>*{flex:0 0 auto;width:16.6666667%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.3333333%}.col-xl-2{flex:0 0 auto;width:16.6666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.3333333%}.col-xl-5{flex:0 0 auto;width:41.6666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.3333333%}.col-xl-8{flex:0 0 auto;width:66.6666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.3333333%}.col-xl-11{flex:0 0 auto;width:91.6666667%}.col-xl-12{flex:0 0 auto;width:100%}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.3333333%}.offset-xl-2{margin-left:16.6666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.3333333%}.offset-xl-5{margin-left:41.6666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.3333333%}.offset-xl-8{margin-left:66.6666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.3333333%}.offset-xl-11{margin-left:91.6666667%}}.markdown>table,.table{width:100%;margin-bottom:1rem;color:#354052;vertical-align:top}.markdown>table td,.markdown>table th,.table td,.table th{padding:.5rem;border-bottom:1px solid rgba(134,140,151,.24)}.markdown>table tbody,.table tbody{vertical-align:inherit}.markdown>table thead th,.table thead th{vertical-align:bottom;border-bottom-color:rgba(134,140,151,.24)}.markdown>table tbody+tbody,.table tbody+tbody{border-top:2px solid rgba(134,140,151,.24)}.caption-top{caption-side:top}.table-sm td,.table-sm th{padding:.25rem}.markdown>table,.table-bordered{border:1px solid rgba(134,140,151,.24)}.markdown>table td,.markdown>table th,.table-bordered td,.table-bordered th{border:1px solid rgba(134,140,151,.24)}.markdown>table thead td,.markdown>table thead th,.table-bordered thead td,.table-bordered thead th{border-bottom-width:2px}.table-borderless tbody+tbody,.table-borderless td,.table-borderless th,.table-borderless thead th{border:0}.table-striped tbody tr:nth-of-type(even){background-color:rgba(53,64,82,.024)}.table-hover tbody tr:hover{color:#354052;background-color:rgba(0,0,0,.075)}.table-primary,.table-primary>td,.table-primary>th{background-color:#e9f0f9}.table-primary tbody+tbody,.table-primary td,.table-primary th,.table-primary thead th{border-color:#a6c4e7}.table-hover .table-primary:hover{background-color:#d5e2f4}.table-hover .table-primary:hover>td,.table-hover .table-primary:hover>th{background-color:#d5e2f4}.table-secondary,.table-secondary>td,.table-secondary>th{background-color:#f3f4f5}.table-secondary tbody+tbody,.table-secondary td,.table-secondary th,.table-secondary thead th{border-color:#cfd1d5}.table-hover .table-secondary:hover{background-color:#e5e7e9}.table-hover .table-secondary:hover>td,.table-hover .table-secondary:hover>th{background-color:#e5e7e9}.table-success,.table-success>td,.table-success>th{background-color:#eff8e6}.table-success tbody+tbody,.table-success td,.table-success th,.table-success thead th{border-color:#bfe399}.table-hover .table-success:hover{background-color:#e2f2d2}.table-hover .table-success:hover>td,.table-hover .table-success:hover>th{background-color:#e2f2d2}.table-info,.table-info>td,.table-info>th{background-color:#ecf7fe}.table-info tbody+tbody,.table-info td,.table-info th,.table-info thead th{border-color:#b5ddfa}.table-hover .table-info:hover{background-color:#d4edfd}.table-hover .table-info:hover>td,.table-hover .table-info:hover>th{background-color:#d4edfd}.table-warning,.table-warning>td,.table-warning>th{background-color:#fff7e6}.table-warning tbody+tbody,.table-warning td,.table-warning th,.table-warning thead th{border-color:#fddf9b}.table-hover .table-warning:hover{background-color:#ffefcd}.table-hover .table-warning:hover>td,.table-hover .table-warning:hover>th{background-color:#ffefcd}.table-danger,.table-danger>td,.table-danger>th{background-color:#ffedee}.table-danger tbody+tbody,.table-danger td,.table-danger th,.table-danger thead th{border-color:#fdb5bb}.table-hover .table-danger:hover{background-color:#ffd4d6}.table-hover .table-danger:hover>td,.table-hover .table-danger:hover>th{background-color:#ffd4d6}.table-light,.table-light>td,.table-light>th{background-color:#fefeff}.table-light tbody+tbody,.table-light td,.table-light th,.table-light thead th{border-color:#fbfcfd}.table-hover .table-light:hover{background-color:#e5e5ff}.table-hover .table-light:hover>td,.table-hover .table-light:hover>th{background-color:#e5e5ff}.table-dark,.table-dark>td,.table-dark>th{background-color:#ebecee}.table-dark tbody+tbody,.table-dark td,.table-dark th,.table-dark thead th{border-color:#aeb3ba}.table-hover .table-dark:hover{background-color:#dddfe2}.table-hover .table-dark:hover>td,.table-hover .table-dark:hover>th{background-color:#dddfe2}.table-active,.table-active>td,.table-active>th{background-color:rgba(0,0,0,.075)}.table-hover .table-active:hover{background-color:rgba(0,0,0,.075)}.table-hover .table-active:hover>td,.table-hover .table-active:hover>th{background-color:rgba(0,0,0,.075)}.markdown>table .thead-dark th,.table .thead-dark th{color:#fff;background-color:#545d6d;border-color:#656f83}.markdown>table .thead-light th,.table .thead-light th{color:#7a828f;background-color:#f1f3f8;border-color:rgba(134,140,151,.24)}.table-dark{color:#fff;background-color:#545d6d}.table-dark td,.table-dark th,.table-dark thead th{border-color:#656f83}.markdown>table.table-dark,.table-dark.table-bordered{border:0}.table-dark.table-striped tbody tr:nth-of-type(even){background-color:rgba(255,255,255,.05)}.table-dark.table-hover tbody tr:hover{color:#fff;background-color:rgba(255,255,255,.075)}@media (max-width:32.98rem){.table-responsive-sm{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.markdown.table-responsive-sm>table,.table-responsive-sm>.table-bordered{border:0}}@media (max-width:47.98rem){.table-responsive-md{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.markdown.table-responsive-md>table,.table-responsive-md>.table-bordered{border:0}}@media (max-width:63.98rem){.table-responsive-lg{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.markdown.table-responsive-lg>table,.table-responsive-lg>.table-bordered{border:0}}@media (max-width:75.23rem){.table-responsive-xl{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.markdown.table-responsive-xl>table,.table-responsive-xl>.table-bordered{border:0}}.table-responsive{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.markdown.table-responsive>table,.table-responsive>.table-bordered{border:0}.col-form-label{padding-top:calc(.375rem + 1px);padding-bottom:calc(.375rem + 1px);margin-bottom:0;font-size:inherit;line-height:1.4666667}.col-form-label-lg{padding-top:calc(.5rem + 1px);padding-bottom:calc(.5rem + 1px);font-size:calc(1.2625rem + .15vw)}@media (min-width:1200px){.col-form-label-lg{font-size:1.375rem}}.col-form-label-sm{padding-top:calc(.125rem + 1px);padding-bottom:calc(.125rem + 1px);font-size:.8125rem}.form-control{display:block;width:100%;min-height:calc(1.4666667em + .75rem + 2px);padding:.375rem .75rem;font-size:.9375rem;font-weight:400;line-height:1.4666667;color:#354052;background-color:#fff;background-clip:padding-box;border:1px solid rgba(134,140,151,.24);border-radius:3px;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control:focus{color:inherit;background-color:#fff;border-color:#7aade9;outline:0;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.form-control::-webkit-input-placeholder{color:#868c97;opacity:1}.form-control::-moz-placeholder{color:#868c97;opacity:1}.form-control:-ms-input-placeholder{color:#868c97;opacity:1}.form-control::-ms-input-placeholder{color:#868c97;opacity:1}.form-control::placeholder{color:#868c97;opacity:1}.form-control:disabled,.form-control[readonly]{background-color:#f5f7fb;opacity:1}.form-control-plaintext{display:block;width:100%;padding:.375rem 0;margin-bottom:0;line-height:1.4666667;color:#354052;background-color:transparent;border:solid transparent;border-width:1px 0}.form-control-plaintext.form-control-lg,.form-control-plaintext.form-control-sm{padding-right:0;padding-left:0}.form-control-sm{min-height:calc(1.4666667em + .25rem + 2px);padding:.125rem .5rem;font-size:.8125rem;border-radius:.2rem}.form-control-lg{min-height:calc(1.4666667em + 1rem + 2px);padding:.5rem 1.5rem;font-size:calc(1.2625rem + .15vw);border-radius:.3rem}@media (min-width:1200px){.form-control-lg{font-size:1.375rem}}.form-control-color{max-width:3rem;padding:.375rem}.form-control-color::-moz-color-swatch{border-radius:3px}.form-control-color::-webkit-color-swatch{border-radius:3px}.form-select{display:block;width:100%;height:calc(1.4666667em + .75rem + 2px);padding:.375rem 1.75rem .375rem .75rem;font-size:.9375rem;font-weight:400;line-height:1.4666667;color:#354052;vertical-align:middle;background-color:#fff;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28134, 140, 151, 0.48%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px;border:1px solid rgba(134,140,151,.24);border-radius:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-select:focus{border-color:#7aade9;outline:0;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.form-select:focus::-ms-value{color:#354052;background-color:#fff}.form-select[multiple],.form-select[size]:not([size="1"]){height:auto;padding-right:.75rem;background-image:none}.form-select:disabled{color:#a8aeb7;background-color:#f1f3f8}.form-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #354052}.form-select-sm{height:calc(1.4666667em + .25rem + 2px);padding-top:.125rem;padding-bottom:.125rem;padding-left:.5rem;font-size:.8125rem}.form-select-lg{height:calc(1.4666667em + 1rem + 2px);padding-top:.5rem;padding-bottom:.5rem;padding-left:1.5rem;font-size:calc(1.2625rem + .15vw)}@media (min-width:1200px){.form-select-lg{font-size:1.375rem}}.form-check{display:block;min-height:1.5rem;padding-left:1.5rem;margin-bottom:.125rem}.form-check .form-check-input{float:left;margin-left:-1.5rem}.form-check-input{width:1rem;height:1rem;margin-top:.3rem;vertical-align:top;background-color:#fff;border:1px solid rgba(134,140,151,.24);-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-print-color-adjust:exact;color-adjust:exact}.form-check-input[type=checkbox]{border-radius:3px}.form-check-input[type=radio]{border-radius:50%}.form-check-input:active{-webkit-filter:brightness(90%);filter:brightness(90%)}.form-check-input:focus{border-color:#7aade9;outline:0;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.form-check-input:checked{background-color:#206bc4;background-repeat:repeat;background-position:center center;background-size:1rem;border-color:rgba(134,140,151,.24)}.form-check-input:checked[type=checkbox]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6' transform='scale%28.8%29' transform-origin='50% 50%'/%3e%3c/svg%3e")}.form-check-input:checked[type=radio]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3' fill='%23ffffff' cx='8' cy='8' /%3e%3c/svg%3e")}.form-check-input[type=checkbox]:indeterminate{background-color:#206bc4;background-repeat:no-repeat;background-position:center center;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5 8h6'/%3e%3c/svg%3e");background-size:1em;border-color:#206bc4}.form-check-input:disabled{pointer-events:none;-webkit-filter:none;filter:none;opacity:.5}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{opacity:.5}.form-check-label{margin-bottom:0}.form-switch{padding-left:2.25rem}.form-switch .form-check-input{width:1.75rem;margin-left:-2.25rem;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28134, 140, 151, 0.24%29'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:left center;background-size:auto;border-radius:1.75rem;-webkit-print-color-adjust:exact;color-adjust:exact}.form-switch .form-check-input:focus{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2380bdff'/%3e%3c/svg%3e")}.form-switch .form-check-input:checked{background-position:right center;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e")}.form-check-inline{display:inline-block;margin-right:1rem}.form-file{position:relative;height:calc(1.4666667em + .75rem + 2px)}.form-file-input{position:relative;z-index:2;width:100%;height:100%;margin:0;opacity:0}.form-file-input:focus-within~.form-file-label{border-color:#7aade9;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.form-file-input:disabled~.form-file-label .form-file-text,.form-file-input[disabled]~.form-file-label .form-file-text{background-color:#f5f7fb}.form-file-label{position:absolute;top:0;right:0;left:0;z-index:1;display:flex;height:100%;border-color:rgba(134,140,151,.24);border-radius:3px}.form-file-text{display:block;flex-grow:1;padding:.375rem .75rem;overflow:hidden;font-weight:400;line-height:1.4666667;color:#354052;text-overflow:ellipsis;white-space:nowrap;background-color:#fff;border-color:inherit;border-style:solid;border-width:1px;border-top-left-radius:inherit;border-bottom-left-radius:inherit}.form-file-button{display:block;flex-shrink:0;padding:.375rem .75rem;margin-left:-1px;line-height:1.4666667;color:#354052;background-color:rgba(53,64,82,.024);border-color:inherit;border-style:solid;border-width:1px;border-top-right-radius:inherit;border-bottom-right-radius:inherit}.form-file-sm{height:calc(1.4666667em + .25rem + 2px);font-size:.8125rem}.form-file-sm .form-file-button,.form-file-sm .form-file-text{padding:.125rem .5rem}.form-file-lg{height:calc(1.4666667em + 1rem + 2px);font-size:calc(1.2625rem + .15vw)}@media (min-width:1200px){.form-file-lg{font-size:1.375rem}}.form-file-lg .form-file-button,.form-file-lg .form-file-text{padding:.5rem 1.5rem}.form-range{width:100%;height:1.25rem;padding:0;background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-range:focus{outline:0}.form-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 1px #f5f7fb,0 0 0 .2rem rgba(32,107,196,.25)}.form-range:focus::-moz-range-thumb{box-shadow:0 0 0 1px #f5f7fb,0 0 0 .2rem rgba(32,107,196,.25)}.form-range:focus::-ms-thumb{box-shadow:0 0 0 1px #f5f7fb,0 0 0 .2rem rgba(32,107,196,.25)}.form-range::-moz-focus-outer{border:0}.form-range::-webkit-slider-thumb{width:1rem;height:1rem;margin-top:-.375rem;background-color:#206bc4;border:2px solid #fff;border-radius:1rem;-webkit-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-appearance:none;appearance:none}@media (prefers-reduced-motion:reduce){.form-range::-webkit-slider-thumb{-webkit-transition:none;transition:none}}.form-range::-webkit-slider-thumb:active{background-color:#a6c8f0}.form-range::-webkit-slider-runnable-track{width:100%;height:.25rem;color:transparent;cursor:pointer;background-color:rgba(176,181,190,.24);border-color:transparent;border-radius:1rem}.form-range::-moz-range-thumb{width:1rem;height:1rem;background-color:#206bc4;border:2px solid #fff;border-radius:1rem;-moz-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-moz-appearance:none;appearance:none}@media (prefers-reduced-motion:reduce){.form-range::-moz-range-thumb{-moz-transition:none;transition:none}}.form-range::-moz-range-thumb:active{background-color:#a6c8f0}.form-range::-moz-range-track{width:100%;height:.25rem;color:transparent;cursor:pointer;background-color:rgba(176,181,190,.24);border-color:transparent;border-radius:1rem}.form-range::-ms-thumb{width:1rem;height:1rem;margin-top:0;margin-right:.125rem;margin-left:.125rem;background-color:#206bc4;border:2px solid #fff;border-radius:1rem;-ms-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;appearance:none}@media (prefers-reduced-motion:reduce){.form-range::-ms-thumb{-ms-transition:none;transition:none}}.form-range::-ms-thumb:active{background-color:#a6c8f0}.form-range::-ms-track{width:100%;height:.25rem;color:transparent;cursor:pointer;background-color:transparent;border-color:transparent;border-width:.5rem}.form-range::-ms-fill-lower{background-color:rgba(176,181,190,.24);border-radius:1rem}.form-range::-ms-fill-upper{margin-right:15px;background-color:rgba(176,181,190,.24);border-radius:1rem}.form-range:disabled{pointer-events:none}.form-range:disabled::-webkit-slider-thumb{background-color:#cbcfd6}.form-range:disabled::-moz-range-thumb{background-color:#cbcfd6}.form-range:disabled::-ms-thumb{background-color:#cbcfd6}.input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.input-group>.form-control,.input-group>.form-file,.input-group>.form-select{position:relative;flex:1 1 auto;width:1%;min-width:0}.input-group>.form-control:focus,.input-group>.form-file .form-file-input:focus~.form-file-label,.input-group>.form-select:focus{z-index:3}.input-group>.form-file>.form-file-input:focus{z-index:4}.input-group>.form-file:not(:last-child)>.form-file-label{border-top-right-radius:0;border-bottom-right-radius:0}.input-group>.form-file:not(:first-child)>.form-file-label{border-top-left-radius:0;border-bottom-left-radius:0}.input-group .btn{position:relative;z-index:2}.input-group .btn:focus{z-index:3}.input-group-text{display:flex;align-items:center;padding:.375rem .75rem;margin-bottom:0;font-size:.9375rem;font-weight:400;line-height:1.4666667;color:#868c97;text-align:center;white-space:nowrap;background-color:rgba(53,64,82,.024);border:1px solid rgba(134,140,151,.24);border-radius:3px}.input-group-lg>.form-control{min-height:calc(1.4666667em + 1rem + 2px)}.input-group-lg>.form-select{height:calc(1.4666667em + 1rem + 2px)}.input-group-lg>.btn,.input-group-lg>.form-control,.input-group-lg>.form-select,.input-group-lg>.input-group-text{padding:.5rem 1.5rem;font-size:calc(1.2625rem + .15vw);border-radius:.3rem}@media (min-width:1200px){.input-group-lg>.btn,.input-group-lg>.form-control,.input-group-lg>.form-select,.input-group-lg>.input-group-text{font-size:1.375rem}}.input-group-sm>.form-control{min-height:calc(1.4666667em + .25rem + 2px)}.input-group-sm>.form-select{height:calc(1.4666667em + .25rem + 2px)}.input-group-sm>.btn,.input-group-sm>.form-control,.input-group-sm>.form-select,.input-group-sm>.input-group-text{padding:.125rem .5rem;font-size:.8125rem;border-radius:.2rem}.input-group-lg>.form-select,.input-group-sm>.form-select{padding-right:1.75rem}.input-group>.dropdown-toggle:nth-last-child(n+3),.input-group>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu){border-top-right-radius:0;border-bottom-right-radius:0}.input-group>:not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}.valid-feedback{display:none;width:100%;margin-top:.25rem;font-size:87.5%;color:#5eba00}.valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.8203125rem;color:#354052;background-color:rgba(94,186,0,.9);border-radius:3px}.is-valid~.valid-feedback,.is-valid~.valid-tooltip,.was-validated :valid~.valid-feedback,.was-validated :valid~.valid-tooltip{display:block}.form-control.is-valid,.was-validated .form-control:valid{border-color:#5eba00;padding-right:calc(1.4666667em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235eba00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.3666667em + .1875rem) center;background-size:calc(.7333333em + .375rem) calc(.7333333em + .375rem)}.form-control.is-valid:focus,.was-validated .form-control:valid:focus{border-color:#5eba00;box-shadow:0 0 0 .2rem rgba(94,186,0,.25)}.was-validated textarea.form-control:valid,textarea.form-control.is-valid{padding-right:calc(1.4666667em + .75rem);background-position:top calc(.3666667em + .1875rem) right calc(.3666667em + .1875rem)}.form-select.is-valid,.was-validated .form-select:valid{border-color:#5eba00;padding-right:calc(.75em + 2.3125rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28134, 140, 151, 0.48%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235eba00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e");background-position:right .75rem center,center right 1.75rem;background-size:16px 12px,calc(.7333333em + .375rem) calc(.7333333em + .375rem)}.form-select.is-valid:focus,.was-validated .form-select:valid:focus{border-color:#5eba00;box-shadow:0 0 0 .2rem rgba(94,186,0,.25)}.form-check-input.is-valid,.was-validated .form-check-input:valid{border-color:#5eba00}.form-check-input.is-valid:checked,.was-validated .form-check-input:valid:checked{background-color:#78ed00}.form-check-input.is-valid:focus,.was-validated .form-check-input:valid:focus{box-shadow:0 0 0 .2rem rgba(94,186,0,.25)}.form-check-input.is-valid~.form-check-label,.was-validated .form-check-input:valid~.form-check-label{color:#5eba00}.form-check-inline .form-check-input~.valid-feedback{margin-left:.5em}.form-file-input.is-valid~.form-file-label,.was-validated .form-file-input:valid~.form-file-label{border-color:#5eba00}.form-file-input.is-valid:focus~.form-file-label,.was-validated .form-file-input:valid:focus~.form-file-label{border-color:#5eba00;box-shadow:0 0 0 .2rem rgba(94,186,0,.25)}.invalid-feedback{display:none;width:100%;margin-top:.25rem;font-size:87.5%;color:#fa4654}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.8203125rem;color:#fff;background-color:rgba(250,70,84,.9);border-radius:3px}.is-invalid~.invalid-feedback,.is-invalid~.invalid-tooltip,.was-validated :invalid~.invalid-feedback,.was-validated :invalid~.invalid-tooltip{display:block}.form-control.is-invalid,.was-validated .form-control:invalid{border-color:#fa4654;padding-right:calc(1.4666667em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fa4654' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.3666667em + .1875rem) center;background-size:calc(.7333333em + .375rem) calc(.7333333em + .375rem)}.form-control.is-invalid:focus,.was-validated .form-control:invalid:focus{border-color:#fa4654;box-shadow:0 0 0 .2rem rgba(250,70,84,.25)}.was-validated textarea.form-control:invalid,textarea.form-control.is-invalid{padding-right:calc(1.4666667em + .75rem);background-position:top calc(.3666667em + .1875rem) right calc(.3666667em + .1875rem)}.form-select.is-invalid,.was-validated .form-select:invalid{border-color:#fa4654;padding-right:calc(.75em + 2.3125rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28134, 140, 151, 0.48%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fa4654' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");background-position:right .75rem center,center right 1.75rem;background-size:16px 12px,calc(.7333333em + .375rem) calc(.7333333em + .375rem)}.form-select.is-invalid:focus,.was-validated .form-select:invalid:focus{border-color:#fa4654;box-shadow:0 0 0 .2rem rgba(250,70,84,.25)}.form-check-input.is-invalid,.was-validated .form-check-input:invalid{border-color:#fa4654}.form-check-input.is-invalid:checked,.was-validated .form-check-input:invalid:checked{background-color:#fb7882}.form-check-input.is-invalid:focus,.was-validated .form-check-input:invalid:focus{box-shadow:0 0 0 .2rem rgba(250,70,84,.25)}.form-check-input.is-invalid~.form-check-label,.was-validated .form-check-input:invalid~.form-check-label{color:#fa4654}.form-check-inline .form-check-input~.invalid-feedback{margin-left:.5em}.form-file-input.is-invalid~.form-file-label,.was-validated .form-file-input:invalid~.form-file-label{border-color:#fa4654}.form-file-input.is-invalid:focus~.form-file-label,.was-validated .form-file-input:invalid:focus~.form-file-label{border-color:#fa4654;box-shadow:0 0 0 .2rem rgba(250,70,84,.25)}.btn{display:inline-block;font-weight:500;line-height:1.4666667;color:#354052;text-align:center;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent;border:1px solid transparent;padding:.375rem 1rem;font-size:.9375rem;border-radius:3px;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:#354052}.btn.focus,.btn:focus{outline:0;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.btn.disabled,.btn:disabled,fieldset:disabled .btn{pointer-events:none;opacity:.65}.btn-primary{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-primary:hover{color:#fff;background-color:#1b59a3;border-color:#195398}.btn-primary.focus,.btn-primary:focus{color:#fff;background-color:#1b59a3;border-color:#195398;box-shadow:0 0 0 .2rem rgba(65,129,205,.5)}.btn-primary.active,.btn-primary:active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#195398;border-color:#174d8d}.btn-primary.active:focus,.btn-primary:active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(65,129,205,.5)}.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-secondary{color:#fff;background-color:#868c97;border-color:#868c97}.btn-secondary:hover{color:#fff;background-color:#727985;border-color:#6c727e}.btn-secondary.focus,.btn-secondary:focus{color:#fff;background-color:#727985;border-color:#6c727e;box-shadow:0 0 0 .2rem rgba(152,157,167,.5)}.btn-secondary.active,.btn-secondary:active,.show>.btn-secondary.dropdown-toggle{color:#fff;background-color:#6c727e;border-color:#666c77}.btn-secondary.active:focus,.btn-secondary:active:focus,.show>.btn-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(152,157,167,.5)}.btn-secondary.disabled,.btn-secondary:disabled{color:#fff;background-color:#868c97;border-color:#868c97}.btn-success{color:#354052;background-color:#5eba00;border-color:#5eba00}.btn-success:hover{color:#fff;background-color:#4b9400;border-color:#448700}.btn-success.focus,.btn-success:focus{color:#fff;background-color:#4b9400;border-color:#448700;box-shadow:0 0 0 .2rem rgba(88,168,12,.5)}.btn-success.active,.btn-success:active,.show>.btn-success.dropdown-toggle{color:#fff;background-color:#448700;border-color:#3e7a00}.btn-success.active:focus,.btn-success:active:focus,.show>.btn-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(88,168,12,.5)}.btn-success.disabled,.btn-success:disabled{color:#354052;background-color:#5eba00;border-color:#5eba00}.btn-info{color:#354052;background-color:#45aaf2;border-color:#45aaf2}.btn-info:hover{color:#fff;background-color:#219af0;border-color:#1594ef}.btn-info.focus,.btn-info:focus{color:#fff;background-color:#219af0;border-color:#1594ef;box-shadow:0 0 0 .2rem rgba(67,154,218,.5)}.btn-info.active,.btn-info:active,.show>.btn-info.dropdown-toggle{color:#fff;background-color:#1594ef;border-color:#108ee7}.btn-info.active:focus,.btn-info:active:focus,.show>.btn-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(67,154,218,.5)}.btn-info.disabled,.btn-info:disabled{color:#354052;background-color:#45aaf2;border-color:#45aaf2}.btn-warning{color:#354052;background-color:#fab005;border-color:#fab005}.btn-warning:hover{color:#354052;background-color:#d59604;border-color:#c88d04}.btn-warning.focus,.btn-warning:focus{color:#354052;background-color:#d59604;border-color:#c88d04;box-shadow:0 0 0 .2rem rgba(220,159,17,.5)}.btn-warning.active,.btn-warning:active,.show>.btn-warning.dropdown-toggle{color:#354052;background-color:#c88d04;border-color:#bc8404}.btn-warning.active:focus,.btn-warning:active:focus,.show>.btn-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(220,159,17,.5)}.btn-warning.disabled,.btn-warning:disabled{color:#354052;background-color:#fab005;border-color:#fab005}.btn-danger{color:#fff;background-color:#fa4654;border-color:#fa4654}.btn-danger:hover{color:#fff;background-color:#f92132;border-color:#f91426}.btn-danger.focus,.btn-danger:focus{color:#fff;background-color:#f92132;border-color:#f91426;box-shadow:0 0 0 .2rem rgba(251,98,110,.5)}.btn-danger.active,.btn-danger:active,.show>.btn-danger.dropdown-toggle{color:#fff;background-color:#f91426;border-color:#f8081b}.btn-danger.active:focus,.btn-danger:active:focus,.show>.btn-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(251,98,110,.5)}.btn-danger.disabled,.btn-danger:disabled{color:#fff;background-color:#fa4654;border-color:#fa4654}.btn-light{color:#354052;background-color:#f5f7fb;border-color:#f5f7fb}.btn-light:hover{color:#354052;background-color:#dae1f0;border-color:#d1daec}.btn-light.focus,.btn-light:focus{color:#354052;background-color:#dae1f0;border-color:#d1daec;box-shadow:0 0 0 .2rem rgba(216,220,226,.5)}.btn-light.active,.btn-light:active,.show>.btn-light.dropdown-toggle{color:#354052;background-color:#d1daec;border-color:#c7d3e9}.btn-light.active:focus,.btn-light:active:focus,.show>.btn-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(216,220,226,.5)}.btn-light.disabled,.btn-light:disabled{color:#354052;background-color:#f5f7fb;border-color:#f5f7fb}.btn-dark{color:#fff;background-color:#354052;border-color:#354052}.btn-dark:hover{color:#fff;background-color:#262e3b;border-color:#212833}.btn-dark.focus,.btn-dark:focus{color:#fff;background-color:#262e3b;border-color:#212833;box-shadow:0 0 0 .2rem rgba(83,93,108,.5)}.btn-dark.active,.btn-dark:active,.show>.btn-dark.dropdown-toggle{color:#fff;background-color:#212833;border-color:#1c222b}.btn-dark.active:focus,.btn-dark:active:focus,.show>.btn-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(83,93,108,.5)}.btn-dark.disabled,.btn-dark:disabled{color:#fff;background-color:#354052;border-color:#354052}.btn-outline-primary{color:#206bc4;border-color:#206bc4}.btn-outline-primary:hover{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-outline-primary.focus,.btn-outline-primary:focus{box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-outline-primary.active,.btn-outline-primary.dropdown-toggle.show,.btn-outline-primary:active{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-outline-primary.active:focus,.btn-outline-primary.dropdown-toggle.show:focus,.btn-outline-primary:active:focus{box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:#206bc4;background-color:transparent}.btn-outline-secondary{color:#868c97;border-color:#868c97}.btn-outline-secondary:hover{color:#fff;background-color:#868c97;border-color:#868c97}.btn-outline-secondary.focus,.btn-outline-secondary:focus{box-shadow:0 0 0 .2rem rgba(134,140,151,.5)}.btn-outline-secondary.active,.btn-outline-secondary.dropdown-toggle.show,.btn-outline-secondary:active{color:#fff;background-color:#868c97;border-color:#868c97}.btn-outline-secondary.active:focus,.btn-outline-secondary.dropdown-toggle.show:focus,.btn-outline-secondary:active:focus{box-shadow:0 0 0 .2rem rgba(134,140,151,.5)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{color:#868c97;background-color:transparent}.btn-outline-success{color:#5eba00;border-color:#5eba00}.btn-outline-success:hover{color:#354052;background-color:#5eba00;border-color:#5eba00}.btn-outline-success.focus,.btn-outline-success:focus{box-shadow:0 0 0 .2rem rgba(94,186,0,.5)}.btn-outline-success.active,.btn-outline-success.dropdown-toggle.show,.btn-outline-success:active{color:#354052;background-color:#5eba00;border-color:#5eba00}.btn-outline-success.active:focus,.btn-outline-success.dropdown-toggle.show:focus,.btn-outline-success:active:focus{box-shadow:0 0 0 .2rem rgba(94,186,0,.5)}.btn-outline-success.disabled,.btn-outline-success:disabled{color:#5eba00;background-color:transparent}.btn-outline-info{color:#45aaf2;border-color:#45aaf2}.btn-outline-info:hover{color:#354052;background-color:#45aaf2;border-color:#45aaf2}.btn-outline-info.focus,.btn-outline-info:focus{box-shadow:0 0 0 .2rem rgba(69,170,242,.5)}.btn-outline-info.active,.btn-outline-info.dropdown-toggle.show,.btn-outline-info:active{color:#354052;background-color:#45aaf2;border-color:#45aaf2}.btn-outline-info.active:focus,.btn-outline-info.dropdown-toggle.show:focus,.btn-outline-info:active:focus{box-shadow:0 0 0 .2rem rgba(69,170,242,.5)}.btn-outline-info.disabled,.btn-outline-info:disabled{color:#45aaf2;background-color:transparent}.btn-outline-warning{color:#fab005;border-color:#fab005}.btn-outline-warning:hover{color:#354052;background-color:#fab005;border-color:#fab005}.btn-outline-warning.focus,.btn-outline-warning:focus{box-shadow:0 0 0 .2rem rgba(250,176,5,.5)}.btn-outline-warning.active,.btn-outline-warning.dropdown-toggle.show,.btn-outline-warning:active{color:#354052;background-color:#fab005;border-color:#fab005}.btn-outline-warning.active:focus,.btn-outline-warning.dropdown-toggle.show:focus,.btn-outline-warning:active:focus{box-shadow:0 0 0 .2rem rgba(250,176,5,.5)}.btn-outline-warning.disabled,.btn-outline-warning:disabled{color:#fab005;background-color:transparent}.btn-outline-danger{color:#fa4654;border-color:#fa4654}.btn-outline-danger:hover{color:#fff;background-color:#fa4654;border-color:#fa4654}.btn-outline-danger.focus,.btn-outline-danger:focus{box-shadow:0 0 0 .2rem rgba(250,70,84,.5)}.btn-outline-danger.active,.btn-outline-danger.dropdown-toggle.show,.btn-outline-danger:active{color:#fff;background-color:#fa4654;border-color:#fa4654}.btn-outline-danger.active:focus,.btn-outline-danger.dropdown-toggle.show:focus,.btn-outline-danger:active:focus{box-shadow:0 0 0 .2rem rgba(250,70,84,.5)}.btn-outline-danger.disabled,.btn-outline-danger:disabled{color:#fa4654;background-color:transparent}.btn-outline-light{color:#f5f7fb;border-color:#f5f7fb}.btn-outline-light:hover{color:#354052;background-color:#f5f7fb;border-color:#f5f7fb}.btn-outline-light.focus,.btn-outline-light:focus{box-shadow:0 0 0 .2rem rgba(245,247,251,.5)}.btn-outline-light.active,.btn-outline-light.dropdown-toggle.show,.btn-outline-light:active{color:#354052;background-color:#f5f7fb;border-color:#f5f7fb}.btn-outline-light.active:focus,.btn-outline-light.dropdown-toggle.show:focus,.btn-outline-light:active:focus{box-shadow:0 0 0 .2rem rgba(245,247,251,.5)}.btn-outline-light.disabled,.btn-outline-light:disabled{color:#f5f7fb;background-color:transparent}.btn-outline-dark{color:#354052;border-color:#354052}.btn-outline-dark:hover{color:#fff;background-color:#354052;border-color:#354052}.btn-outline-dark.focus,.btn-outline-dark:focus{box-shadow:0 0 0 .2rem rgba(53,64,82,.5)}.btn-outline-dark.active,.btn-outline-dark.dropdown-toggle.show,.btn-outline-dark:active{color:#fff;background-color:#354052;border-color:#354052}.btn-outline-dark.active:focus,.btn-outline-dark.dropdown-toggle.show:focus,.btn-outline-dark:active:focus{box-shadow:0 0 0 .2rem rgba(53,64,82,.5)}.btn-outline-dark.disabled,.btn-outline-dark:disabled{color:#354052;background-color:transparent}.btn-link{font-weight:400;color:#206bc4;text-decoration:none}.btn-link:hover{color:#154782}.btn-link.disabled,.btn-link:disabled{color:#a8aeb7}.btn-group-lg>.btn,.btn-lg{padding:.5rem 1.5rem;font-size:calc(1.2625rem + .15vw);border-radius:.3rem}@media (min-width:1200px){.btn-group-lg>.btn,.btn-lg{font-size:1.375rem}}.btn-group-sm>.btn,.btn-sm{padding:.125rem .5rem;font-size:.8125rem;border-radius:.2rem}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:.5rem}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{height:0;overflow:hidden;transition:height .35s ease}@media (prefers-reduced-motion:reduce){.collapsing{transition:none}}.dropdown,.dropleft,.dropright,.dropup{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle:after{content:"";display:inline-block;vertical-align:.272em;width:.32em;height:.32em;border-bottom:1px solid;border-left:1px solid;margin-left:.4em;transform:rotate(-45deg)}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;min-width:14rem;padding:.5rem 0;margin:1px 0 0;font-size:.9375rem;color:#354052;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(134,140,151,.24);border-radius:3px}.dropdown-menu-left{right:auto;left:0}.dropdown-menu-right{right:0;left:auto}@media (min-width:33rem){.dropdown-menu-sm-left{right:auto;left:0}.dropdown-menu-sm-right{right:0;left:auto}}@media (min-width:48rem){.dropdown-menu-md-left{right:auto;left:0}.dropdown-menu-md-right{right:0;left:auto}}@media (min-width:64rem){.dropdown-menu-lg-left{right:auto;left:0}.dropdown-menu-lg-right{right:0;left:auto}}@media (min-width:75.25rem){.dropdown-menu-xl-left{right:auto;left:0}.dropdown-menu-xl-right{right:0;left:auto}}.dropup .dropdown-menu{top:auto;bottom:100%;margin-top:0;margin-bottom:1px}.dropup .dropdown-toggle:after{content:"";display:inline-block;vertical-align:.272em;width:.32em;height:.32em;border-bottom:1px solid;border-left:1px solid;margin-left:.4em;transform:rotate(135deg)}.dropright .dropdown-menu{top:0;right:auto;left:100%;margin-top:0;margin-left:1px}.dropright .dropdown-toggle:after{content:"";display:inline-block;vertical-align:.272em;width:.32em;height:.32em;border-bottom:1px solid;border-left:1px solid;margin-left:.4em;transform:rotate(-135deg)}.dropright .dropdown-toggle::after{vertical-align:0}.dropleft .dropdown-menu{top:0;right:100%;left:auto;margin-top:0;margin-right:1px}.dropleft .dropdown-toggle:before{content:"";display:inline-block;vertical-align:.272em;width:.32em;height:.32em;border-bottom:1px solid;border-left:1px solid;margin-right:.4em;transform:rotate(45deg)}.dropleft .dropdown-toggle:after{content:none}.dropleft .dropdown-toggle::before{vertical-align:0}.dropdown-menu[x-placement^=bottom],.dropdown-menu[x-placement^=left],.dropdown-menu[x-placement^=right],.dropdown-menu[x-placement^=top]{right:auto;bottom:auto}.dropdown-divider{height:0;margin:.5rem 0;overflow:hidden;border-top:1px solid rgba(134,140,151,.24)}.dropdown-item{display:block;width:100%;padding:.25rem 1rem;clear:both;font-weight:400;color:#354052;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}.dropdown-item:focus,.dropdown-item:hover{color:inherit;background-color:rgba(134,140,151,.06)}.dropdown-item.active,.dropdown-item:active{color:#206bc4;text-decoration:none;background-color:rgba(32,107,196,.06)}.dropdown-item.disabled,.dropdown-item:disabled{color:#a8aeb7;pointer-events:none;background-color:transparent}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:.5rem 1rem;margin-bottom:0;font-size:.8203125rem;color:#a8aeb7;white-space:nowrap}.dropdown-item-text{display:block;padding:.25rem 1rem;color:#354052}.btn-group,.btn-group-vertical{position:relative;display:inline-flex;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;flex:1 1 auto}.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:hover,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover{z-index:1}.btn-toolbar{display:flex;flex-wrap:wrap;justify-content:flex-start}.btn-toolbar .input-group{width:auto}.btn-group>.btn-group:not(:first-child),.btn-group>.btn:not(:first-child){margin-left:-1px}.btn-group>.btn-group:not(:last-child)>.btn,.btn-group>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:not(:first-child)>.btn,.btn-group>.btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.dropdown-toggle-split::after,.dropright .dropdown-toggle-split::after,.dropup .dropdown-toggle-split::after{margin-left:0}.dropleft .dropdown-toggle-split::before{margin-right:0}.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split{padding-right:.375rem;padding-left:.375rem}.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split{padding-right:1.125rem;padding-left:1.125rem}.btn-group-vertical{flex-direction:column;align-items:flex-start;justify-content:center}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group{width:100%}.btn-group-vertical>.btn-group:not(:first-child),.btn-group-vertical>.btn:not(:first-child){margin-top:-1px}.btn-group-vertical>.btn-group:not(:last-child)>.btn,.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:not(:first-child)>.btn,.btn-group-vertical>.btn:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.btn-group-toggle>.btn,.btn-group-toggle>.btn-group>.btn{margin-bottom:0}.btn-group-toggle>.btn input[type=checkbox],.btn-group-toggle>.btn input[type=radio],.btn-group-toggle>.btn-group>.btn input[type=checkbox],.btn-group-toggle>.btn-group>.btn input[type=radio]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.nav{display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:.5rem 1rem}.nav-link.disabled{color:#a8aeb7;pointer-events:none;cursor:default}.nav-tabs{border-bottom:1px solid #e9ecf1}.nav-tabs .nav-link{margin-bottom:-1px;border:1px solid transparent;border-top-left-radius:3px;border-top-right-radius:3px}.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover{border-color:#f1f3f8 #f1f3f8 #e9ecf1}.nav-tabs .nav-link.disabled{color:#a8aeb7;background-color:transparent;border-color:transparent}.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{color:#7a828f;background-color:#f5f7fb;border-color:#e9ecf1 #e9ecf1 #f5f7fb}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}.nav-pills .nav-link{border-radius:3px}.nav-pills .nav-link.active,.nav-pills .show>.nav-link{color:#fff;background-color:#206bc4}.nav-fill .nav-item{flex:1 1 auto;text-align:center}.nav-justified .nav-item{flex-basis:0;flex-grow:1;text-align:center}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.navbar{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-top:.5rem;padding-bottom:.5rem}.navbar>.container,.navbar>.container-fluid,.navbar>.container-lg,.navbar>.container-md,.navbar>.container-sm,.navbar>.container-xl{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}.navbar-brand{padding-top:.3125rem;padding-bottom:.3125rem;margin-right:1rem;font-size:1.171875rem;white-space:nowrap}.navbar-brand:focus,.navbar-brand:hover{text-decoration:none}.navbar-nav{display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link{padding-right:0;padding-left:0}.navbar-nav .dropdown-menu{position:static}.navbar-text{padding-top:.5rem;padding-bottom:.5rem}.navbar-collapse{align-items:center;width:100%}.navbar-toggler{padding:.75rem .75rem;font-size:1rem;line-height:1;background-color:transparent;border:1px solid transparent;border-radius:3px;transition:box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-toggler:hover{text-decoration:none}.navbar-toggler:focus{text-decoration:none;outline:0;box-shadow:0 0 0 .2rem}.navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;background-repeat:no-repeat;background-position:center;background-size:100%}@media (min-width:33rem){.navbar-expand-sm{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm .navbar-nav .nav-link{padding-right:.75rem;padding-left:.75rem}.navbar-expand-sm .navbar-collapse{display:flex!important}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:48rem){.navbar-expand-md{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-md .navbar-nav .nav-link{padding-right:.75rem;padding-left:.75rem}.navbar-expand-md .navbar-collapse{display:flex!important}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:64rem){.navbar-expand-lg{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-lg .navbar-nav .nav-link{padding-right:.75rem;padding-left:.75rem}.navbar-expand-lg .navbar-collapse{display:flex!important}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:75.25rem){.navbar-expand-xl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xl .navbar-nav .nav-link{padding-right:.75rem;padding-left:.75rem}.navbar-expand-xl .navbar-collapse{display:flex!important}.navbar-expand-xl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.navbar-expand .navbar-nav .nav-link{padding-right:.75rem;padding-left:.75rem}.navbar-expand .navbar-collapse{display:flex!important}.navbar-expand .navbar-toggler{display:none}.navbar-light .navbar-brand{color:rgba(0,0,0,.9)}.navbar-light .navbar-brand:focus,.navbar-light .navbar-brand:hover{color:rgba(0,0,0,.9)}.navbar-light .navbar-nav .nav-link{color:rgba(0,0,0,.55)}.navbar-light .navbar-nav .nav-link:focus,.navbar-light .navbar-nav .nav-link:hover{color:rgba(0,0,0,.7)}.navbar-light .navbar-nav .nav-link.disabled{color:rgba(0,0,0,.3)}.navbar-light .navbar-nav .active>.nav-link,.navbar-light .navbar-nav .nav-link.active,.navbar-light .navbar-nav .nav-link.show,.navbar-light .navbar-nav .show>.nav-link{color:rgba(0,0,0,.9)}.navbar-light .navbar-toggler{color:rgba(0,0,0,.55);border-color:rgba(0,0,0,.1)}.navbar-light .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.navbar-light .navbar-text{color:rgba(0,0,0,.55)}.navbar-light .navbar-text a,.navbar-light .navbar-text a:focus,.navbar-light .navbar-text a:hover{color:rgba(0,0,0,.9)}.navbar-dark .navbar-brand{color:#fff}.navbar-dark .navbar-brand:focus,.navbar-dark .navbar-brand:hover{color:#fff}.navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,.55)}.navbar-dark .navbar-nav .nav-link:focus,.navbar-dark .navbar-nav .nav-link:hover{color:rgba(255,255,255,.75)}.navbar-dark .navbar-nav .nav-link.disabled{color:rgba(255,255,255,.25)}.navbar-dark .navbar-nav .active>.nav-link,.navbar-dark .navbar-nav .nav-link.active,.navbar-dark .navbar-nav .nav-link.show,.navbar-dark .navbar-nav .show>.nav-link{color:#fff}.navbar-dark .navbar-toggler{color:rgba(255,255,255,.55);border-color:rgba(255,255,255,.1)}.navbar-dark .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.navbar-dark .navbar-text{color:rgba(255,255,255,.55)}.navbar-dark .navbar-text a,.navbar-dark .navbar-text a:focus,.navbar-dark .navbar-text a:hover{color:#fff}.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(134,140,151,.24);border-radius:3px}.card>.hr,.card>hr{margin-right:0;margin-left:0}.card>.list-group:first-child .list-group-item:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.card>.list-group:last-child .list-group-item:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.card-body{flex:1 1 auto;padding:1.25rem 1.25rem}.card-title{margin-bottom:.75rem}.card-subtitle{margin-top:-.375rem;margin-bottom:0}.card-text:last-child{margin-bottom:0}.card-link:hover{text-decoration:none}.card-link+.card-link{margin-left:1.25rem}.card-header{padding:.75rem 1.25rem;margin-bottom:0;background-color:rgba(53,64,82,.024);border-bottom:1px solid rgba(134,140,151,.24)}.card-header:first-child{border-radius:2px 2px 0 0}.card-header+.list-group .list-group-item:first-child{border-top:0}.card-footer{padding:.75rem 1.25rem;background-color:rgba(53,64,82,.024);border-top:1px solid rgba(134,140,151,.24)}.card-footer:last-child{border-radius:0 0 2px 2px}.card-header-tabs{margin-right:-.625rem;margin-bottom:-.75rem;margin-left:-.625rem;border-bottom:0}.card-header-tabs .nav-link.active{background-color:#fff;border-bottom-color:#fff}.card-header-pills{margin-right:-.625rem;margin-left:-.625rem}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:1.25rem}.card-img,.card-img-bottom,.card-img-top{width:100%}.card-img,.card-img-top{border-top-left-radius:2px;border-top-right-radius:2px}.card-img,.card-img-bottom{border-bottom-right-radius:2px;border-bottom-left-radius:2px}.card-group>.card{margin-bottom:1.5rem}@media (min-width:33rem){.card-group{display:flex;flex-flow:row wrap}.card-group>.card{flex:1 0 0%;margin-bottom:0}.card-group>.card+.card{margin-left:0;border-left:0}.card-group>.card:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.card-group>.card:not(:last-child) .card-header,.card-group>.card:not(:last-child) .card-img-top{border-top-right-radius:0}.card-group>.card:not(:last-child) .card-footer,.card-group>.card:not(:last-child) .card-img-bottom{border-bottom-right-radius:0}.card-group>.card:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.card-group>.card:not(:first-child) .card-header,.card-group>.card:not(:first-child) .card-img-top{border-top-left-radius:0}.card-group>.card:not(:first-child) .card-footer,.card-group>.card:not(:first-child) .card-img-bottom{border-bottom-left-radius:0}}.accordion>.card{overflow:hidden}.accordion>.card:not(:last-of-type){border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.accordion>.card:not(:first-of-type){border-top-left-radius:0;border-top-right-radius:0}.accordion>.card>.card-header{border-radius:0;margin-bottom:-1px}.breadcrumb{display:flex;flex-wrap:wrap;padding:.75rem 1rem;margin-bottom:1rem;list-style:none;background-color:#f1f3f8;border-radius:3px}.breadcrumb-item{display:flex}.breadcrumb-item+.breadcrumb-item{padding-left:.5rem}.breadcrumb-item+.breadcrumb-item::before{display:inline-block;padding-right:.5rem;color:#a8aeb7;content:"/"}.breadcrumb-item.active{color:#a8aeb7}.pagination{display:flex;padding-left:0;list-style:none}.page-link{position:relative;display:block;color:#868c97;background-color:transparent;border:0 solid #e9ecf1}.page-link:hover{z-index:2;color:#154782;background-color:#f1f3f8;border-color:#e9ecf1}.page-link:focus{z-index:3;outline:0;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.page-item:not(:first-child) .page-link{margin-left:0}.page-item.active .page-link{z-index:3;color:#fff;background-color:#206bc4;border-color:#206bc4}.page-item.disabled .page-link{color:rgba(134,140,151,.5);pointer-events:none;background-color:transparent;border-color:#e9ecf1}.page-link{padding:.25rem .25rem}.page-item:first-child .page-link{border-top-left-radius:3px;border-bottom-left-radius:3px}.page-item:last-child .page-link{border-top-right-radius:3px;border-bottom-right-radius:3px}.pagination-lg .page-link{padding:.75rem 1.5rem;font-size:1.171875rem}.pagination-lg .page-item:first-child .page-link{border-top-left-radius:.3rem;border-bottom-left-radius:.3rem}.pagination-lg .page-item:last-child .page-link{border-top-right-radius:.3rem;border-bottom-right-radius:.3rem}.pagination-sm .page-link{padding:.25rem .5rem;font-size:.8203125rem}.pagination-sm .page-item:first-child .page-link{border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}.pagination-sm .page-item:last-child .page-link{border-top-right-radius:.2rem;border-bottom-right-radius:.2rem}.badge{display:inline-block;padding:.25em .5em;font-size:.75em;font-weight:600;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:3px}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.alert{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:3px}.alert-heading{color:inherit}.alert-link{font-weight:600}.alert-dismissible{padding-right:4rem}.alert-dismissible .close{position:absolute;top:0;right:0;padding:.75rem 1.25rem;color:inherit}.alert-primary{color:#061527;background-color:#d2e1f3;border-color:#a6c4e7}.alert-primary .alert-link{color:#000}.alert-secondary{color:#1b1c1e;background-color:#e7e8ea;border-color:#cfd1d5}.alert-secondary .alert-link{color:#030303}.alert-success{color:#132500;background-color:#dff1cc;border-color:#bfe399}.alert-success .alert-link{color:#000}.alert-info{color:#0e2230;background-color:#daeefc;border-color:#b5ddfa}.alert-info .alert-link{color:#020609}.alert-warning{color:#322301;background-color:#feefcd;border-color:#fddf9b}.alert-warning .alert-link{color:#000}.alert-danger{color:#320e11;background-color:#fedadd;border-color:#fdb5bb}.alert-danger .alert-link{color:#0a0303}.alert-light{color:#313132;background-color:#fdfdfe;border-color:#fbfcfd}.alert-light .alert-link{color:#181818}.alert-dark{color:#0b0d10;background-color:#d7d9dc;border-color:#aeb3ba}.alert-dark .alert-link{color:#000}@-webkit-keyframes progress-bar-stripes{0%{background-position-x:.5rem}}@keyframes progress-bar-stripes{0%{background-position-x:.5rem}}.progress{display:flex;height:.5rem;overflow:hidden;font-size:.703125rem;background-color:rgba(176,181,190,.24);border-radius:3px}.progress-bar{display:flex;flex-direction:column;justify-content:center;overflow:hidden;color:#fff;text-align:center;white-space:nowrap;background-color:#206bc4;transition:width .6s ease}@media (prefers-reduced-motion:reduce){.progress-bar{transition:none}}.progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:.5rem .5rem}.progress-bar-animated{-webkit-animation:progress-bar-stripes 1s linear infinite;animation:progress-bar-stripes 1s linear infinite}@media (prefers-reduced-motion:reduce){.progress-bar-animated{-webkit-animation:none;animation:none}}.list-group{display:flex;flex-direction:column;padding-left:0;margin-bottom:0}.list-group-item-action{width:100%;color:inherit;text-align:inherit}.list-group-item-action:focus,.list-group-item-action:hover{z-index:1;color:inherit;text-decoration:none;background-color:#f5f7fb}.list-group-item-action:active{color:#354052;background-color:#f1f3f8}.list-group-item{position:relative;display:block;padding:.5rem .75rem;margin-bottom:0;background-color:#fff;border:1px solid rgba(134,140,151,.24)}.list-group-item:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.list-group-item:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.list-group-item.disabled,.list-group-item:disabled{color:#a8aeb7;pointer-events:none;background-color:#fff}.list-group-item.active{z-index:2;color:#fff;background-color:#206bc4;border-color:#206bc4}.list-group-item+.list-group-item{border-top-width:0}.list-group-item+.list-group-item.active{margin-top:-1px;border-top-width:1px}.list-group-horizontal{flex-direction:row}.list-group-horizontal .list-group-item:first-child{border-bottom-left-radius:3px;border-top-right-radius:0}.list-group-horizontal .list-group-item:last-child{border-top-right-radius:3px;border-bottom-left-radius:0}.list-group-horizontal .list-group-item.active{margin-top:0}.list-group-horizontal .list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal .list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}@media (min-width:33rem){.list-group-horizontal-sm{flex-direction:row}.list-group-horizontal-sm .list-group-item:first-child{border-bottom-left-radius:3px;border-top-right-radius:0}.list-group-horizontal-sm .list-group-item:last-child{border-top-right-radius:3px;border-bottom-left-radius:0}.list-group-horizontal-sm .list-group-item.active{margin-top:0}.list-group-horizontal-sm .list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-sm .list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media (min-width:48rem){.list-group-horizontal-md{flex-direction:row}.list-group-horizontal-md .list-group-item:first-child{border-bottom-left-radius:3px;border-top-right-radius:0}.list-group-horizontal-md .list-group-item:last-child{border-top-right-radius:3px;border-bottom-left-radius:0}.list-group-horizontal-md .list-group-item.active{margin-top:0}.list-group-horizontal-md .list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-md .list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media (min-width:64rem){.list-group-horizontal-lg{flex-direction:row}.list-group-horizontal-lg .list-group-item:first-child{border-bottom-left-radius:3px;border-top-right-radius:0}.list-group-horizontal-lg .list-group-item:last-child{border-top-right-radius:3px;border-bottom-left-radius:0}.list-group-horizontal-lg .list-group-item.active{margin-top:0}.list-group-horizontal-lg .list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-lg .list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media (min-width:75.25rem){.list-group-horizontal-xl{flex-direction:row}.list-group-horizontal-xl .list-group-item:first-child{border-bottom-left-radius:3px;border-top-right-radius:0}.list-group-horizontal-xl .list-group-item:last-child{border-top-right-radius:3px;border-bottom-left-radius:0}.list-group-horizontal-xl .list-group-item.active{margin-top:0}.list-group-horizontal-xl .list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-xl .list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}.list-group-flush .list-group-item{border-right-width:0;border-left-width:0;border-radius:0}.list-group-flush .list-group-item:first-child{border-top-width:0}.list-group-flush:last-child .list-group-item:last-child{border-bottom-width:0}.list-group-item-primary{color:#0d2b4e;background-color:#e9f0f9}.list-group-item-primary.list-group-item-action:focus,.list-group-item-primary.list-group-item-action:hover{color:#0d2b4e;background-color:#d5e2f4}.list-group-item-primary.list-group-item-action.active{color:#fff;background-color:#0d2b4e;border-color:#0d2b4e}.list-group-item-secondary{color:#36383c;background-color:#f3f4f5}.list-group-item-secondary.list-group-item-action:focus,.list-group-item-secondary.list-group-item-action:hover{color:#36383c;background-color:#e5e7e9}.list-group-item-secondary.list-group-item-action.active{color:#fff;background-color:#36383c;border-color:#36383c}.list-group-item-success{color:#264a00;background-color:#eff8e6}.list-group-item-success.list-group-item-action:focus,.list-group-item-success.list-group-item-action:hover{color:#264a00;background-color:#e2f2d2}.list-group-item-success.list-group-item-action.active{color:#fff;background-color:#264a00;border-color:#264a00}.list-group-item-info{color:#1c4461;background-color:#ecf7fe}.list-group-item-info.list-group-item-action:focus,.list-group-item-info.list-group-item-action:hover{color:#1c4461;background-color:#d4edfd}.list-group-item-info.list-group-item-action.active{color:#fff;background-color:#1c4461;border-color:#1c4461}.list-group-item-warning{color:#644602;background-color:#fff7e6}.list-group-item-warning.list-group-item-action:focus,.list-group-item-warning.list-group-item-action:hover{color:#644602;background-color:#ffefcd}.list-group-item-warning.list-group-item-action.active{color:#fff;background-color:#644602;border-color:#644602}.list-group-item-danger{color:#641c22;background-color:#ffedee}.list-group-item-danger.list-group-item-action:focus,.list-group-item-danger.list-group-item-action:hover{color:#641c22;background-color:#ffd4d6}.list-group-item-danger.list-group-item-action.active{color:#fff;background-color:#641c22;border-color:#641c22}.list-group-item-light{color:#626364;background-color:#fefeff}.list-group-item-light.list-group-item-action:focus,.list-group-item-light.list-group-item-action:hover{color:#626364;background-color:#e5e5ff}.list-group-item-light.list-group-item-action.active{color:#fff;background-color:#626364;border-color:#626364}.list-group-item-dark{color:#151a21;background-color:#ebecee}.list-group-item-dark.list-group-item-action:focus,.list-group-item-dark.list-group-item-action:hover{color:#151a21;background-color:#dddfe2}.list-group-item-dark.list-group-item-action.active{color:#fff;background-color:#151a21;border-color:#151a21}.close{font-size:calc(1.275rem + .3vw);font-weight:400;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}@media (min-width:1200px){.close{font-size:1.5rem}}.close:hover{color:#000;text-decoration:none}.close:focus,.close:hover{opacity:.75}.close.disabled,.close:disabled{pointer-events:none}button.close{padding:0;background-color:transparent;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.toast{max-width:350px;overflow:hidden;font-size:.875rem;background-color:rgba(255,255,255,.85);background-clip:padding-box;border:1px solid rgba(134,140,151,.24);box-shadow:0 .5rem 1rem rgba(0,0,0,.15);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;border-radius:3px}.toast:not(:last-child){margin-bottom:.75rem}.toast.showing{opacity:1}.toast.show{display:block;opacity:1}.toast.hide{display:none}.toast-header{display:flex;align-items:center;padding:.25rem .75rem;color:#868c97;background-color:rgba(255,255,255,.85);background-clip:padding-box;border-bottom:1px solid rgba(0,0,0,.05)}.toast-body{padding:.75rem}.modal-open{overflow:hidden}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal{position:fixed;top:0;left:0;z-index:1050;display:none;width:100%;height:100%;overflow:hidden;outline:0}.modal-dialog{position:relative;width:auto;margin:.5rem;pointer-events:none}.modal.fade .modal-dialog{transition:transform .3s ease-out;transform:translate(0,-1rem)}@media (prefers-reduced-motion:reduce){.modal.fade .modal-dialog{transition:none}}.modal.show .modal-dialog{transform:none}.modal.modal-static .modal-dialog{transform:scale(1.02)}.modal-dialog-scrollable{max-height:calc(100% - 1rem)}.modal-dialog-scrollable .modal-content{overflow:hidden}.modal-dialog-scrollable .modal-footer,.modal-dialog-scrollable .modal-header{flex-shrink:0}.modal-dialog-scrollable .modal-body{overflow-y:auto}.modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - 1rem)}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background-color:#fbfbfb;background-clip:padding-box;border:1px solid rgba(134,140,151,.12);border-radius:3px;outline:0}.modal-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#354052}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:.24}.modal-header{display:flex;align-items:flex-start;justify-content:space-between;padding:1.5rem;border-bottom:1px solid rgba(134,140,151,.12);border-top-left-radius:2px;border-top-right-radius:2px}.modal-header .close{padding:1.5rem;margin:-1rem -1rem -1rem auto}.modal-title{margin-bottom:0;line-height:1.6}.modal-body{position:relative;flex:1 1 auto;padding:1.5rem}.modal-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;padding:1.125rem;border-top:0 solid rgba(134,140,151,.12);border-bottom-right-radius:2px;border-bottom-left-radius:2px}.modal-footer>*{margin:.375rem}.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media (min-width:33rem){.modal-dialog{max-width:540px;margin:1.75rem auto}.modal-dialog-scrollable{max-height:calc(100% - 3.5rem)}.modal-dialog-centered{min-height:calc(100% - 3.5rem)}.modal-sm{max-width:380px}}@media (min-width:64rem){.modal-lg,.modal-xl{max-width:720px}}@media (min-width:75.25rem){.modal-xl{max-width:1140px}}.tooltip{position:absolute;z-index:1070;display:block;margin:0;font-family:"Source Sans Pro",-apple-system,blinkmacsystemfont,segoe ui,helvetica,arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;font-style:normal;font-weight:400;line-height:1.6;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.8203125rem;word-wrap:break-word;opacity:0}.tooltip.show{opacity:.9}.tooltip .tooltip-arrow{position:absolute;display:block;width:.8rem;height:.4rem}.tooltip .tooltip-arrow::before{position:absolute;content:"";border-color:transparent;border-style:solid}.bs-tooltip-auto[x-placement^=top],.bs-tooltip-top{padding:.4rem 0}.bs-tooltip-auto[x-placement^=top] .tooltip-arrow,.bs-tooltip-top .tooltip-arrow{bottom:0}.bs-tooltip-auto[x-placement^=top] .tooltip-arrow::before,.bs-tooltip-top .tooltip-arrow::before{top:0;border-width:.4rem .4rem 0;border-top-color:#000}.bs-tooltip-auto[x-placement^=right],.bs-tooltip-right{padding:0 .4rem}.bs-tooltip-auto[x-placement^=right] .tooltip-arrow,.bs-tooltip-right .tooltip-arrow{left:0;width:.4rem;height:.8rem}.bs-tooltip-auto[x-placement^=right] .tooltip-arrow::before,.bs-tooltip-right .tooltip-arrow::before{right:0;border-width:.4rem .4rem .4rem 0;border-right-color:#000}.bs-tooltip-auto[x-placement^=bottom],.bs-tooltip-bottom{padding:.4rem 0}.bs-tooltip-auto[x-placement^=bottom] .tooltip-arrow,.bs-tooltip-bottom .tooltip-arrow{top:0}.bs-tooltip-auto[x-placement^=bottom] .tooltip-arrow::before,.bs-tooltip-bottom .tooltip-arrow::before{bottom:0;border-width:0 .4rem .4rem;border-bottom-color:#000}.bs-tooltip-auto[x-placement^=left],.bs-tooltip-left{padding:0 .4rem}.bs-tooltip-auto[x-placement^=left] .tooltip-arrow,.bs-tooltip-left .tooltip-arrow{right:0;width:.4rem;height:.8rem}.bs-tooltip-auto[x-placement^=left] .tooltip-arrow::before,.bs-tooltip-left .tooltip-arrow::before{left:0;border-width:.4rem 0 .4rem .4rem;border-left-color:#000}.tooltip-inner{max-width:200px;padding:.25rem .5rem;color:#fff;text-align:center;background-color:#000;border-radius:3px}.popover{position:absolute;top:0;left:0;z-index:1060;display:block;max-width:276px;font-family:"Source Sans Pro",-apple-system,blinkmacsystemfont,segoe ui,helvetica,arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;font-style:normal;font-weight:400;line-height:1.6;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.8203125rem;word-wrap:break-word;background-color:#fff;background-clip:padding-box;border:1px solid rgba(134,140,151,.24);border-radius:.3rem}.popover .popover-arrow{position:absolute;display:block;width:1rem;height:.5rem;margin:0 .3rem}.popover .popover-arrow::after,.popover .popover-arrow::before{position:absolute;display:block;content:"";border-color:transparent;border-style:solid}.bs-popover-auto[x-placement^=top],.bs-popover-top{margin-bottom:.5rem}.bs-popover-auto[x-placement^=top]>.popover-arrow,.bs-popover-top>.popover-arrow{bottom:calc(-.5rem - 1px)}.bs-popover-auto[x-placement^=top]>.popover-arrow::before,.bs-popover-top>.popover-arrow::before{bottom:0;border-width:.5rem .5rem 0;border-top-color:rgba(134,140,151,.29)}.bs-popover-auto[x-placement^=top]>.popover-arrow::after,.bs-popover-top>.popover-arrow::after{bottom:1px;border-width:.5rem .5rem 0;border-top-color:#fff}.bs-popover-auto[x-placement^=right],.bs-popover-right{margin-left:.5rem}.bs-popover-auto[x-placement^=right]>.popover-arrow,.bs-popover-right>.popover-arrow{left:calc(-.5rem - 1px);width:.5rem;height:1rem;margin:.3rem 0}.bs-popover-auto[x-placement^=right]>.popover-arrow::before,.bs-popover-right>.popover-arrow::before{left:0;border-width:.5rem .5rem .5rem 0;border-right-color:rgba(134,140,151,.29)}.bs-popover-auto[x-placement^=right]>.popover-arrow::after,.bs-popover-right>.popover-arrow::after{left:1px;border-width:.5rem .5rem .5rem 0;border-right-color:#fff}.bs-popover-auto[x-placement^=bottom],.bs-popover-bottom{margin-top:.5rem}.bs-popover-auto[x-placement^=bottom]>.popover-arrow,.bs-popover-bottom>.popover-arrow{top:calc(-.5rem - 1px)}.bs-popover-auto[x-placement^=bottom]>.popover-arrow::before,.bs-popover-bottom>.popover-arrow::before{top:0;border-width:0 .5rem .5rem .5rem;border-bottom-color:rgba(134,140,151,.29)}.bs-popover-auto[x-placement^=bottom]>.popover-arrow::after,.bs-popover-bottom>.popover-arrow::after{top:1px;border-width:0 .5rem .5rem .5rem;border-bottom-color:#fff}.bs-popover-auto[x-placement^=bottom] .popover-header::before,.bs-popover-bottom .popover-header::before{position:absolute;top:0;left:50%;display:block;width:1rem;margin-left:-.5rem;content:"";border-bottom:1px solid #f7f7f7}.bs-popover-auto[x-placement^=left],.bs-popover-left{margin-right:.5rem}.bs-popover-auto[x-placement^=left]>.popover-arrow,.bs-popover-left>.popover-arrow{right:calc(-.5rem - 1px);width:.5rem;height:1rem;margin:.3rem 0}.bs-popover-auto[x-placement^=left]>.popover-arrow::before,.bs-popover-left>.popover-arrow::before{right:0;border-width:.5rem 0 .5rem .5rem;border-left-color:rgba(134,140,151,.29)}.bs-popover-auto[x-placement^=left]>.popover-arrow::after,.bs-popover-left>.popover-arrow::after{right:1px;border-width:.5rem 0 .5rem .5rem;border-left-color:#fff}.popover-header{padding:.5rem .75rem;margin-bottom:0;font-size:.9375rem;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px)}.popover-header:empty{display:none}.popover-body{padding:.5rem .75rem;color:#354052}.carousel{position:relative}.carousel.pointer-event{touch-action:pan-y}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner::after{display:block;clear:both;content:""}.carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .6s ease-in-out}@media (prefers-reduced-motion:reduce){.carousel-item{transition:none}}.carousel-item-next,.carousel-item-prev,.carousel-item.active{display:block}.active.carousel-item-right,.carousel-item-next:not(.carousel-item-left){transform:translateX(100%)}.active.carousel-item-left,.carousel-item-prev:not(.carousel-item-right){transform:translateX(-100%)}.carousel-fade .carousel-item{opacity:0;transition-property:opacity;transform:none}.carousel-fade .carousel-item-next.carousel-item-left,.carousel-fade .carousel-item-prev.carousel-item-right,.carousel-fade .carousel-item.active{z-index:1;opacity:1}.carousel-fade .active.carousel-item-left,.carousel-fade .active.carousel-item-right{z-index:0;opacity:0;transition:opacity 0s .6s}@media (prefers-reduced-motion:reduce){.carousel-fade .active.carousel-item-left,.carousel-fade .active.carousel-item-right{transition:none}}.carousel-control-next,.carousel-control-prev{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;color:#fff;text-align:center;opacity:.5;transition:opacity .15s ease}@media (prefers-reduced-motion:reduce){.carousel-control-next,.carousel-control-prev{transition:none}}.carousel-control-next:focus,.carousel-control-next:hover,.carousel-control-prev:focus,.carousel-control-prev:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-next-icon,.carousel-control-prev-icon{display:inline-block;width:1.5rem;height:1.5rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.carousel-control-prev-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='15 18 9 12 15 6'%3e%3c/polyline%3e%3c/svg%3e")}.carousel-control-next-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='9 18 15 12 9 6'%3e%3c/polyline%3e%3c/svg%3e")}.carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding-left:0;margin-right:15%;margin-left:15%;list-style:none}.carousel-indicators li{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#fff;background-clip:padding-box;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}@media (prefers-reduced-motion:reduce){.carousel-indicators li{transition:none}}.carousel-indicators .active{opacity:1}.carousel-caption{position:absolute;right:15%;bottom:1.25rem;left:15%;padding-top:1.25rem;padding-bottom:1.25rem;color:#fff;text-align:center}@-webkit-keyframes spinner-border{to{transform:rotate(360deg)}}@keyframes spinner-border{to{transform:rotate(360deg)}}.spinner-border{display:inline-block;width:1.5rem;height:1.5rem;vertical-align:text-bottom;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;-webkit-animation:spinner-border .75s linear infinite;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:1rem;height:1rem;border-width:1px}@-webkit-keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1}}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1}}.spinner-grow{display:inline-block;width:1.5rem;height:1.5rem;vertical-align:text-bottom;background-color:currentColor;border-radius:50%;opacity:0;-webkit-animation:spinner-grow .75s linear infinite;animation:spinner-grow .75s linear infinite}.spinner-grow-sm{width:1rem;height:1rem}.clearfix::after{display:block;clear:both;content:""}.link-primary{color:#206bc4}.link-primary:focus,.link-primary:hover{color:#154782}.link-secondary{color:#868c97}.link-secondary:focus,.link-secondary:hover{color:#606670}.link-success{color:#5eba00}.link-success:focus,.link-success:hover{color:#376e00}.link-info{color:#45aaf2}.link-info:focus,.link-info:hover{color:#0f86db}.link-warning{color:#fab005}.link-warning:focus,.link-warning:hover{color:#af7b04}.link-danger{color:#fa4654}.link-danger:focus,.link-danger:hover{color:#ed0618}.link-light{color:#f5f7fb}.link-light:focus,.link-light:hover{color:#becbe5}.link-dark{color:#354052}.link-dark:focus,.link-dark:hover{color:#171c24}.embed-responsive{position:relative;width:100%}.embed-responsive::before{display:block;content:""}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.embed-responsive-21by9::before{padding-top:42.8571429%}.embed-responsive-16by9::before{padding-top:56.25%}.embed-responsive-4by3::before{padding-top:75%}.embed-responsive-1by1::before{padding-top:100%}.embed-responsive-2by1::before{padding-top:50%}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}.fixed-bottom{position:fixed;right:0;bottom:0;left:0;z-index:1030}@supports ((position:-webkit-sticky) or (position:sticky)){.sticky-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}@media (min-width:33rem){.sticky-sm-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}@media (min-width:48rem){.sticky-md-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}@media (min-width:64rem){.sticky-lg-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}@media (min-width:75.25rem){.sticky-xl-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}}.sr-only,.sr-only-focusable:not(:focus){position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.stretched-link::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;content:""}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.align-baseline{vertical-align:baseline!important}.align-top{vertical-align:top!important}.align-middle{vertical-align:middle!important}.align-bottom{vertical-align:bottom!important}.align-text-bottom{vertical-align:text-bottom!important}.align-text-top{vertical-align:text-top!important}.float-left{float:left!important}.float-right{float:right!important}.float-none{float:none!important}.overflow-auto{overflow:auto!important}.overflow-hidden{overflow:hidden!important}.d-none{display:none!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.shadow{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}.shadow-sm{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}.shadow-lg{box-shadow:0 1rem 3rem rgba(0,0,0,.175)!important}.shadow-none{box-shadow:none!important}.position-static{position:static!important}.position-relative{position:relative!important}.position-absolute{position:absolute!important}.position-fixed{position:fixed!important}.position-sticky{position:-webkit-sticky!important;position:sticky!important}.border{border:1px solid rgba(134,140,151,.24)!important}.border-wide{border:2px solid rgba(134,140,151,.24)!important}.border-0{border:0!important}.border-top{border-top:1px solid rgba(134,140,151,.24)!important}.border-top-wide{border-top:2px solid rgba(134,140,151,.24)!important}.border-top-0{border-top:0!important}.border-right{border-right:1px solid rgba(134,140,151,.24)!important}.border-right-wide{border-right:2px solid rgba(134,140,151,.24)!important}.border-right-0{border-right:0!important}.border-bottom{border-bottom:1px solid rgba(134,140,151,.24)!important}.border-bottom-wide{border-bottom:2px solid rgba(134,140,151,.24)!important}.border-bottom-0{border-bottom:0!important}.border-left{border-left:1px solid rgba(134,140,151,.24)!important}.border-left-wide{border-left:2px solid rgba(134,140,151,.24)!important}.border-left-0{border-left:0!important}.border-primary{border-color:#206bc4!important}.border-secondary{border-color:#868c97!important}.border-success{border-color:#5eba00!important}.border-info{border-color:#45aaf2!important}.border-warning{border-color:#fab005!important}.border-danger{border-color:#fa4654!important}.border-light{border-color:#f5f7fb!important}.border-dark{border-color:#354052!important}.border-white{border-color:#fff!important}.w-1{width:1%!important}.w-25{width:25%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.w-auto{width:auto!important}.mw-100{max-width:100%!important}.vw-100{width:100vw!important}.min-vw-100{min-width:100vw!important}.h-1{height:1%!important}.h-25{height:25%!important}.h-50{height:50%!important}.h-75{height:75%!important}.h-100{height:100%!important}.h-auto{height:auto!important}.mh-100{max-height:100%!important}.vh-100{height:100vh!important}.min-vh-100{min-height:100vh!important}.flex-fill{flex:1 1 auto!important}.flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important}.flex-row-reverse{flex-direction:row-reverse!important}.flex-column-reverse{flex-direction:column-reverse!important}.flex-grow-0{flex-grow:0!important}.flex-grow-1{flex-grow:1!important}.flex-shrink-0{flex-shrink:0!important}.flex-shrink-1{flex-shrink:1!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}.flex-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-start{justify-content:flex-start!important}.justify-content-end{justify-content:flex-end!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}.align-items-start{align-items:flex-start!important}.align-items-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.align-items-baseline{align-items:baseline!important}.align-items-stretch{align-items:stretch!important}.align-content-start{align-content:flex-start!important}.align-content-end{align-content:flex-end!important}.align-content-center{align-content:center!important}.align-content-between{align-content:space-between!important}.align-content-around{align-content:space-around!important}.align-content-stretch{align-content:stretch!important}.align-self-auto{-ms-grid-row-align:auto!important;align-self:auto!important}.align-self-start{align-self:flex-start!important}.align-self-end{align-self:flex-end!important}.align-self-center{-ms-grid-row-align:center!important;align-self:center!important}.align-self-baseline{align-self:baseline!important}.align-self-stretch{-ms-grid-row-align:stretch!important;align-self:stretch!important}.order-first{order:-1!important}.order-0{order:0!important}.order-1{order:1!important}.order-2{order:2!important}.order-3{order:3!important}.order-4{order:4!important}.order-5{order:5!important}.order-last{order:6!important}.m-0{margin:0!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}.m-3{margin:1rem!important}.m-4{margin:1.25rem!important}.m-5{margin:2rem!important}.m-6{margin:3rem!important}.m-7{margin:6rem!important}.m-8{margin:9rem!important}.m-auto{margin:auto!important}.mx-0{margin-right:0!important;margin-left:0!important}.mx-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-3{margin-right:1rem!important;margin-left:1rem!important}.mx-4{margin-right:1.25rem!important;margin-left:1.25rem!important}.mx-5{margin-right:2rem!important;margin-left:2rem!important}.mx-6{margin-right:3rem!important;margin-left:3rem!important}.mx-7{margin-right:6rem!important;margin-left:6rem!important}.mx-8{margin-right:9rem!important;margin-left:9rem!important}.mx-auto{margin-right:auto!important;margin-left:auto!important}.my-0{margin-top:0!important;margin-bottom:0!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-4{margin-top:1.25rem!important;margin-bottom:1.25rem!important}.my-5{margin-top:2rem!important;margin-bottom:2rem!important}.my-6{margin-top:3rem!important;margin-bottom:3rem!important}.my-7{margin-top:6rem!important;margin-bottom:6rem!important}.my-8{margin-top:9rem!important;margin-bottom:9rem!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.25rem!important}.mt-5{margin-top:2rem!important}.mt-6{margin-top:3rem!important}.mt-7{margin-top:6rem!important}.mt-8{margin-top:9rem!important}.mt-auto{margin-top:auto!important}.mr-0{margin-right:0!important}.mr-1{margin-right:.25rem!important}.mr-2{margin-right:.5rem!important}.mr-3{margin-right:1rem!important}.mr-4{margin-right:1.25rem!important}.mr-5{margin-right:2rem!important}.mr-6{margin-right:3rem!important}.mr-7{margin-right:6rem!important}.mr-8{margin-right:9rem!important}.mr-auto{margin-right:auto!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.25rem!important}.mb-5{margin-bottom:2rem!important}.mb-6{margin-bottom:3rem!important}.mb-7{margin-bottom:6rem!important}.mb-8{margin-bottom:9rem!important}.mb-auto{margin-bottom:auto!important}.ml-0{margin-left:0!important}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.ml-3{margin-left:1rem!important}.ml-4{margin-left:1.25rem!important}.ml-5{margin-left:2rem!important}.ml-6{margin-left:3rem!important}.ml-7{margin-left:6rem!important}.ml-8{margin-left:9rem!important}.ml-auto{margin-left:auto!important}.m-n1{margin:-.25rem!important}.m-n2{margin:-.5rem!important}.m-n3{margin:-1rem!important}.m-n4{margin:-1.25rem!important}.m-n5{margin:-2rem!important}.m-n6{margin:-3rem!important}.m-n7{margin:-6rem!important}.m-n8{margin:-9rem!important}.mx-n1{margin-right:-.25rem!important;margin-left:-.25rem!important}.mx-n2{margin-right:-.5rem!important;margin-left:-.5rem!important}.mx-n3{margin-right:-1rem!important;margin-left:-1rem!important}.mx-n4{margin-right:-1.25rem!important;margin-left:-1.25rem!important}.mx-n5{margin-right:-2rem!important;margin-left:-2rem!important}.mx-n6{margin-right:-3rem!important;margin-left:-3rem!important}.mx-n7{margin-right:-6rem!important;margin-left:-6rem!important}.mx-n8{margin-right:-9rem!important;margin-left:-9rem!important}.my-n1{margin-top:-.25rem!important;margin-bottom:-.25rem!important}.my-n2{margin-top:-.5rem!important;margin-bottom:-.5rem!important}.my-n3{margin-top:-1rem!important;margin-bottom:-1rem!important}.my-n4{margin-top:-1.25rem!important;margin-bottom:-1.25rem!important}.my-n5{margin-top:-2rem!important;margin-bottom:-2rem!important}.my-n6{margin-top:-3rem!important;margin-bottom:-3rem!important}.my-n7{margin-top:-6rem!important;margin-bottom:-6rem!important}.my-n8{margin-top:-9rem!important;margin-bottom:-9rem!important}.mt-n1{margin-top:-.25rem!important}.mt-n2{margin-top:-.5rem!important}.mt-n3{margin-top:-1rem!important}.mt-n4{margin-top:-1.25rem!important}.mt-n5{margin-top:-2rem!important}.mt-n6{margin-top:-3rem!important}.mt-n7{margin-top:-6rem!important}.mt-n8{margin-top:-9rem!important}.mr-n1{margin-right:-.25rem!important}.mr-n2{margin-right:-.5rem!important}.mr-n3{margin-right:-1rem!important}.mr-n4{margin-right:-1.25rem!important}.mr-n5{margin-right:-2rem!important}.mr-n6{margin-right:-3rem!important}.mr-n7{margin-right:-6rem!important}.mr-n8{margin-right:-9rem!important}.mb-n1{margin-bottom:-.25rem!important}.mb-n2{margin-bottom:-.5rem!important}.mb-n3{margin-bottom:-1rem!important}.mb-n4{margin-bottom:-1.25rem!important}.mb-n5{margin-bottom:-2rem!important}.mb-n6{margin-bottom:-3rem!important}.mb-n7{margin-bottom:-6rem!important}.mb-n8{margin-bottom:-9rem!important}.ml-n1{margin-left:-.25rem!important}.ml-n2{margin-left:-.5rem!important}.ml-n3{margin-left:-1rem!important}.ml-n4{margin-left:-1.25rem!important}.ml-n5{margin-left:-2rem!important}.ml-n6{margin-left:-3rem!important}.ml-n7{margin-left:-6rem!important}.ml-n8{margin-left:-9rem!important}.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.25rem!important}.p-5{padding:2rem!important}.p-6{padding:3rem!important}.p-7{padding:6rem!important}.p-8{padding:9rem!important}.px-0{padding-right:0!important;padding-left:0!important}.px-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-3{padding-right:1rem!important;padding-left:1rem!important}.px-4{padding-right:1.25rem!important;padding-left:1.25rem!important}.px-5{padding-right:2rem!important;padding-left:2rem!important}.px-6{padding-right:3rem!important;padding-left:3rem!important}.px-7{padding-right:6rem!important;padding-left:6rem!important}.px-8{padding-right:9rem!important;padding-left:9rem!important}.py-0{padding-top:0!important;padding-bottom:0!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-4{padding-top:1.25rem!important;padding-bottom:1.25rem!important}.py-5{padding-top:2rem!important;padding-bottom:2rem!important}.py-6{padding-top:3rem!important;padding-bottom:3rem!important}.py-7{padding-top:6rem!important;padding-bottom:6rem!important}.py-8{padding-top:9rem!important;padding-bottom:9rem!important}.pt-0{padding-top:0!important}.pt-1{padding-top:.25rem!important}.pt-2{padding-top:.5rem!important}.pt-3{padding-top:1rem!important}.pt-4{padding-top:1.25rem!important}.pt-5{padding-top:2rem!important}.pt-6{padding-top:3rem!important}.pt-7{padding-top:6rem!important}.pt-8{padding-top:9rem!important}.pr-0{padding-right:0!important}.pr-1{padding-right:.25rem!important}.pr-2{padding-right:.5rem!important}.pr-3{padding-right:1rem!important}.pr-4{padding-right:1.25rem!important}.pr-5{padding-right:2rem!important}.pr-6{padding-right:3rem!important}.pr-7{padding-right:6rem!important}.pr-8{padding-right:9rem!important}.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:.25rem!important}.pb-2{padding-bottom:.5rem!important}.pb-3{padding-bottom:1rem!important}.pb-4{padding-bottom:1.25rem!important}.pb-5{padding-bottom:2rem!important}.pb-6{padding-bottom:3rem!important}.pb-7{padding-bottom:6rem!important}.pb-8{padding-bottom:9rem!important}.pl-0{padding-left:0!important}.pl-1{padding-left:.25rem!important}.pl-2{padding-left:.5rem!important}.pl-3{padding-left:1rem!important}.pl-4{padding-left:1.25rem!important}.pl-5{padding-left:2rem!important}.pl-6{padding-left:3rem!important}.pl-7{padding-left:6rem!important}.pl-8{padding-left:9rem!important}.font-weight-light{font-weight:300!important}.font-weight-normal{font-weight:400!important}.font-weight-medium{font-weight:500!important}.font-weight-semibold{font-weight:600!important}.font-weight-bold{font-weight:700!important}.font-weight-extrabold{font-weight:800!important}.font-weight-black{font-weight:900!important}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-primary{color:#206bc4!important}.text-secondary{color:#868c97!important}.text-success{color:#5eba00!important}.text-info{color:#45aaf2!important}.text-warning{color:#fab005!important}.text-danger{color:#fa4654!important}.text-light{color:#f5f7fb!important}.text-dark{color:#354052!important}.text-white{color:#fff!important}.text-body{color:#354052!important}.text-muted{color:#868c97!important}.text-black-50{color:rgba(0,0,0,.5)!important}.text-white-50{color:rgba(255,255,255,.5)!important}.text-reset{color:inherit!important}.lh-1{line-height:1!important}.lh-sm{line-height:1.3333334!important}.lh-base{line-height:1.6!important}.lh-lg{line-height:2.1333334!important}.bg-primary{background-color:#206bc4!important}.bg-secondary{background-color:#868c97!important}.bg-success{background-color:#5eba00!important}.bg-info{background-color:#45aaf2!important}.bg-warning{background-color:#fab005!important}.bg-danger{background-color:#fa4654!important}.bg-light{background-color:#f5f7fb!important}.bg-dark{background-color:#354052!important}.bg-body{background-color:#f5f7fb!important}.bg-white{background-color:#fff!important}.bg-transparent{background-color:transparent!important}.text-wrap{white-space:normal!important}.text-nowrap{white-space:nowrap!important}.text-decoration-none{text-decoration:none!important}.text-decoration-underline{text-decoration:underline!important}.text-decoration-line-through{text-decoration:line-through!important}.font-italic{font-style:italic!important}.font-normal{font-style:normal!important}.text-break{word-wrap:break-word!important}.font-monospace{font-family:Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace!important}.user-select-all{-webkit-user-select:all!important;-moz-user-select:all!important;-ms-user-select:all!important;user-select:all!important}.user-select-auto{-webkit-user-select:auto!important;-moz-user-select:auto!important;-ms-user-select:auto!important;user-select:auto!important}.user-select-none{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.pe-none{pointer-events:none!important}.pe-auto{pointer-events:auto!important}.rounded{border-radius:3px!important}.rounded-sm{border-radius:.2rem!important}.rounded-lg{border-radius:.3rem!important}.rounded-circle{border-radius:50%!important}.rounded-pill{border-radius:50rem!important}.rounded-0{border-radius:0!important}.rounded-top{border-top-left-radius:3px!important;border-top-right-radius:3px!important}.rounded-right{border-top-right-radius:3px!important;border-bottom-right-radius:3px!important}.rounded-bottom{border-bottom-right-radius:3px!important;border-bottom-left-radius:3px!important}.rounded-left{border-bottom-left-radius:3px!important;border-top-left-radius:3px!important}.visible{visibility:visible!important}.invisible{visibility:hidden!important}.object-contain{-o-object-fit:contain!important;object-fit:contain!important}.object-cover{-o-object-fit:cover!important;object-fit:cover!important}.object-fill{-o-object-fit:fill!important;object-fit:fill!important}.object-scale-down{-o-object-fit:scale-down!important;object-fit:scale-down!important}.object-none{-o-object-fit:none!important;object-fit:none!important}.tracking-tight{letter-spacing:-.05em!important}.tracking-normal{letter-spacing:0!important}.tracking-wide{letter-spacing:.05em!important}.cursor-auto{cursor:auto!important}.cursor-pointer{cursor:pointer!important}.cursor-move{cursor:move!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-zoom-in{cursor:zoom-in!important}.cursor-zoom-out{cursor:zoom-out!important}.text-h1{font-size:1.625rem!important}.text-h2{font-size:1.375rem!important}.text-h3{font-size:1.125rem!important}.text-h4{font-size:.9375rem!important}.text-h5{font-size:.8125rem!important}.text-h6{font-size:.6875rem!important}.leading-0{line-height:0!important}.leading-1{line-height:.25rem!important}.leading-2{line-height:.5rem!important}.leading-3{line-height:1rem!important}.leading-4{line-height:1.25rem!important}.leading-5{line-height:2rem!important}.leading-6{line-height:3rem!important}.leading-7{line-height:6rem!important}.leading-8{line-height:9rem!important}@media (min-width:33rem){.float-sm-left{float:left!important}.float-sm-right{float:right!important}.float-sm-none{float:none!important}.d-sm-none{display:none!important}.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:flex!important}.d-sm-inline-flex{display:inline-flex!important}.flex-sm-fill{flex:1 1 auto!important}.flex-sm-row{flex-direction:row!important}.flex-sm-column{flex-direction:column!important}.flex-sm-row-reverse{flex-direction:row-reverse!important}.flex-sm-column-reverse{flex-direction:column-reverse!important}.flex-sm-grow-0{flex-grow:0!important}.flex-sm-grow-1{flex-grow:1!important}.flex-sm-shrink-0{flex-shrink:0!important}.flex-sm-shrink-1{flex-shrink:1!important}.flex-sm-wrap{flex-wrap:wrap!important}.flex-sm-nowrap{flex-wrap:nowrap!important}.flex-sm-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-sm-start{justify-content:flex-start!important}.justify-content-sm-end{justify-content:flex-end!important}.justify-content-sm-center{justify-content:center!important}.justify-content-sm-between{justify-content:space-between!important}.justify-content-sm-around{justify-content:space-around!important}.align-items-sm-start{align-items:flex-start!important}.align-items-sm-end{align-items:flex-end!important}.align-items-sm-center{align-items:center!important}.align-items-sm-baseline{align-items:baseline!important}.align-items-sm-stretch{align-items:stretch!important}.align-content-sm-start{align-content:flex-start!important}.align-content-sm-end{align-content:flex-end!important}.align-content-sm-center{align-content:center!important}.align-content-sm-between{align-content:space-between!important}.align-content-sm-around{align-content:space-around!important}.align-content-sm-stretch{align-content:stretch!important}.align-self-sm-auto{-ms-grid-row-align:auto!important;align-self:auto!important}.align-self-sm-start{align-self:flex-start!important}.align-self-sm-end{align-self:flex-end!important}.align-self-sm-center{-ms-grid-row-align:center!important;align-self:center!important}.align-self-sm-baseline{align-self:baseline!important}.align-self-sm-stretch{-ms-grid-row-align:stretch!important;align-self:stretch!important}.order-sm-first{order:-1!important}.order-sm-0{order:0!important}.order-sm-1{order:1!important}.order-sm-2{order:2!important}.order-sm-3{order:3!important}.order-sm-4{order:4!important}.order-sm-5{order:5!important}.order-sm-last{order:6!important}.m-sm-0{margin:0!important}.m-sm-1{margin:.25rem!important}.m-sm-2{margin:.5rem!important}.m-sm-3{margin:1rem!important}.m-sm-4{margin:1.25rem!important}.m-sm-5{margin:2rem!important}.m-sm-6{margin:3rem!important}.m-sm-7{margin:6rem!important}.m-sm-8{margin:9rem!important}.m-sm-auto{margin:auto!important}.mx-sm-0{margin-right:0!important;margin-left:0!important}.mx-sm-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-sm-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-sm-3{margin-right:1rem!important;margin-left:1rem!important}.mx-sm-4{margin-right:1.25rem!important;margin-left:1.25rem!important}.mx-sm-5{margin-right:2rem!important;margin-left:2rem!important}.mx-sm-6{margin-right:3rem!important;margin-left:3rem!important}.mx-sm-7{margin-right:6rem!important;margin-left:6rem!important}.mx-sm-8{margin-right:9rem!important;margin-left:9rem!important}.mx-sm-auto{margin-right:auto!important;margin-left:auto!important}.my-sm-0{margin-top:0!important;margin-bottom:0!important}.my-sm-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-sm-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-sm-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-sm-4{margin-top:1.25rem!important;margin-bottom:1.25rem!important}.my-sm-5{margin-top:2rem!important;margin-bottom:2rem!important}.my-sm-6{margin-top:3rem!important;margin-bottom:3rem!important}.my-sm-7{margin-top:6rem!important;margin-bottom:6rem!important}.my-sm-8{margin-top:9rem!important;margin-bottom:9rem!important}.my-sm-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-sm-0{margin-top:0!important}.mt-sm-1{margin-top:.25rem!important}.mt-sm-2{margin-top:.5rem!important}.mt-sm-3{margin-top:1rem!important}.mt-sm-4{margin-top:1.25rem!important}.mt-sm-5{margin-top:2rem!important}.mt-sm-6{margin-top:3rem!important}.mt-sm-7{margin-top:6rem!important}.mt-sm-8{margin-top:9rem!important}.mt-sm-auto{margin-top:auto!important}.mr-sm-0{margin-right:0!important}.mr-sm-1{margin-right:.25rem!important}.mr-sm-2{margin-right:.5rem!important}.mr-sm-3{margin-right:1rem!important}.mr-sm-4{margin-right:1.25rem!important}.mr-sm-5{margin-right:2rem!important}.mr-sm-6{margin-right:3rem!important}.mr-sm-7{margin-right:6rem!important}.mr-sm-8{margin-right:9rem!important}.mr-sm-auto{margin-right:auto!important}.mb-sm-0{margin-bottom:0!important}.mb-sm-1{margin-bottom:.25rem!important}.mb-sm-2{margin-bottom:.5rem!important}.mb-sm-3{margin-bottom:1rem!important}.mb-sm-4{margin-bottom:1.25rem!important}.mb-sm-5{margin-bottom:2rem!important}.mb-sm-6{margin-bottom:3rem!important}.mb-sm-7{margin-bottom:6rem!important}.mb-sm-8{margin-bottom:9rem!important}.mb-sm-auto{margin-bottom:auto!important}.ml-sm-0{margin-left:0!important}.ml-sm-1{margin-left:.25rem!important}.ml-sm-2{margin-left:.5rem!important}.ml-sm-3{margin-left:1rem!important}.ml-sm-4{margin-left:1.25rem!important}.ml-sm-5{margin-left:2rem!important}.ml-sm-6{margin-left:3rem!important}.ml-sm-7{margin-left:6rem!important}.ml-sm-8{margin-left:9rem!important}.ml-sm-auto{margin-left:auto!important}.m-sm-n1{margin:-.25rem!important}.m-sm-n2{margin:-.5rem!important}.m-sm-n3{margin:-1rem!important}.m-sm-n4{margin:-1.25rem!important}.m-sm-n5{margin:-2rem!important}.m-sm-n6{margin:-3rem!important}.m-sm-n7{margin:-6rem!important}.m-sm-n8{margin:-9rem!important}.mx-sm-n1{margin-right:-.25rem!important;margin-left:-.25rem!important}.mx-sm-n2{margin-right:-.5rem!important;margin-left:-.5rem!important}.mx-sm-n3{margin-right:-1rem!important;margin-left:-1rem!important}.mx-sm-n4{margin-right:-1.25rem!important;margin-left:-1.25rem!important}.mx-sm-n5{margin-right:-2rem!important;margin-left:-2rem!important}.mx-sm-n6{margin-right:-3rem!important;margin-left:-3rem!important}.mx-sm-n7{margin-right:-6rem!important;margin-left:-6rem!important}.mx-sm-n8{margin-right:-9rem!important;margin-left:-9rem!important}.my-sm-n1{margin-top:-.25rem!important;margin-bottom:-.25rem!important}.my-sm-n2{margin-top:-.5rem!important;margin-bottom:-.5rem!important}.my-sm-n3{margin-top:-1rem!important;margin-bottom:-1rem!important}.my-sm-n4{margin-top:-1.25rem!important;margin-bottom:-1.25rem!important}.my-sm-n5{margin-top:-2rem!important;margin-bottom:-2rem!important}.my-sm-n6{margin-top:-3rem!important;margin-bottom:-3rem!important}.my-sm-n7{margin-top:-6rem!important;margin-bottom:-6rem!important}.my-sm-n8{margin-top:-9rem!important;margin-bottom:-9rem!important}.mt-sm-n1{margin-top:-.25rem!important}.mt-sm-n2{margin-top:-.5rem!important}.mt-sm-n3{margin-top:-1rem!important}.mt-sm-n4{margin-top:-1.25rem!important}.mt-sm-n5{margin-top:-2rem!important}.mt-sm-n6{margin-top:-3rem!important}.mt-sm-n7{margin-top:-6rem!important}.mt-sm-n8{margin-top:-9rem!important}.mr-sm-n1{margin-right:-.25rem!important}.mr-sm-n2{margin-right:-.5rem!important}.mr-sm-n3{margin-right:-1rem!important}.mr-sm-n4{margin-right:-1.25rem!important}.mr-sm-n5{margin-right:-2rem!important}.mr-sm-n6{margin-right:-3rem!important}.mr-sm-n7{margin-right:-6rem!important}.mr-sm-n8{margin-right:-9rem!important}.mb-sm-n1{margin-bottom:-.25rem!important}.mb-sm-n2{margin-bottom:-.5rem!important}.mb-sm-n3{margin-bottom:-1rem!important}.mb-sm-n4{margin-bottom:-1.25rem!important}.mb-sm-n5{margin-bottom:-2rem!important}.mb-sm-n6{margin-bottom:-3rem!important}.mb-sm-n7{margin-bottom:-6rem!important}.mb-sm-n8{margin-bottom:-9rem!important}.ml-sm-n1{margin-left:-.25rem!important}.ml-sm-n2{margin-left:-.5rem!important}.ml-sm-n3{margin-left:-1rem!important}.ml-sm-n4{margin-left:-1.25rem!important}.ml-sm-n5{margin-left:-2rem!important}.ml-sm-n6{margin-left:-3rem!important}.ml-sm-n7{margin-left:-6rem!important}.ml-sm-n8{margin-left:-9rem!important}.p-sm-0{padding:0!important}.p-sm-1{padding:.25rem!important}.p-sm-2{padding:.5rem!important}.p-sm-3{padding:1rem!important}.p-sm-4{padding:1.25rem!important}.p-sm-5{padding:2rem!important}.p-sm-6{padding:3rem!important}.p-sm-7{padding:6rem!important}.p-sm-8{padding:9rem!important}.px-sm-0{padding-right:0!important;padding-left:0!important}.px-sm-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-sm-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-sm-3{padding-right:1rem!important;padding-left:1rem!important}.px-sm-4{padding-right:1.25rem!important;padding-left:1.25rem!important}.px-sm-5{padding-right:2rem!important;padding-left:2rem!important}.px-sm-6{padding-right:3rem!important;padding-left:3rem!important}.px-sm-7{padding-right:6rem!important;padding-left:6rem!important}.px-sm-8{padding-right:9rem!important;padding-left:9rem!important}.py-sm-0{padding-top:0!important;padding-bottom:0!important}.py-sm-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-sm-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-sm-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-sm-4{padding-top:1.25rem!important;padding-bottom:1.25rem!important}.py-sm-5{padding-top:2rem!important;padding-bottom:2rem!important}.py-sm-6{padding-top:3rem!important;padding-bottom:3rem!important}.py-sm-7{padding-top:6rem!important;padding-bottom:6rem!important}.py-sm-8{padding-top:9rem!important;padding-bottom:9rem!important}.pt-sm-0{padding-top:0!important}.pt-sm-1{padding-top:.25rem!important}.pt-sm-2{padding-top:.5rem!important}.pt-sm-3{padding-top:1rem!important}.pt-sm-4{padding-top:1.25rem!important}.pt-sm-5{padding-top:2rem!important}.pt-sm-6{padding-top:3rem!important}.pt-sm-7{padding-top:6rem!important}.pt-sm-8{padding-top:9rem!important}.pr-sm-0{padding-right:0!important}.pr-sm-1{padding-right:.25rem!important}.pr-sm-2{padding-right:.5rem!important}.pr-sm-3{padding-right:1rem!important}.pr-sm-4{padding-right:1.25rem!important}.pr-sm-5{padding-right:2rem!important}.pr-sm-6{padding-right:3rem!important}.pr-sm-7{padding-right:6rem!important}.pr-sm-8{padding-right:9rem!important}.pb-sm-0{padding-bottom:0!important}.pb-sm-1{padding-bottom:.25rem!important}.pb-sm-2{padding-bottom:.5rem!important}.pb-sm-3{padding-bottom:1rem!important}.pb-sm-4{padding-bottom:1.25rem!important}.pb-sm-5{padding-bottom:2rem!important}.pb-sm-6{padding-bottom:3rem!important}.pb-sm-7{padding-bottom:6rem!important}.pb-sm-8{padding-bottom:9rem!important}.pl-sm-0{padding-left:0!important}.pl-sm-1{padding-left:.25rem!important}.pl-sm-2{padding-left:.5rem!important}.pl-sm-3{padding-left:1rem!important}.pl-sm-4{padding-left:1.25rem!important}.pl-sm-5{padding-left:2rem!important}.pl-sm-6{padding-left:3rem!important}.pl-sm-7{padding-left:6rem!important}.pl-sm-8{padding-left:9rem!important}.text-sm-left{text-align:left!important}.text-sm-right{text-align:right!important}.text-sm-center{text-align:center!important}}@media (min-width:48rem){.float-md-left{float:left!important}.float-md-right{float:right!important}.float-md-none{float:none!important}.d-md-none{display:none!important}.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:flex!important}.d-md-inline-flex{display:inline-flex!important}.flex-md-fill{flex:1 1 auto!important}.flex-md-row{flex-direction:row!important}.flex-md-column{flex-direction:column!important}.flex-md-row-reverse{flex-direction:row-reverse!important}.flex-md-column-reverse{flex-direction:column-reverse!important}.flex-md-grow-0{flex-grow:0!important}.flex-md-grow-1{flex-grow:1!important}.flex-md-shrink-0{flex-shrink:0!important}.flex-md-shrink-1{flex-shrink:1!important}.flex-md-wrap{flex-wrap:wrap!important}.flex-md-nowrap{flex-wrap:nowrap!important}.flex-md-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-md-start{justify-content:flex-start!important}.justify-content-md-end{justify-content:flex-end!important}.justify-content-md-center{justify-content:center!important}.justify-content-md-between{justify-content:space-between!important}.justify-content-md-around{justify-content:space-around!important}.align-items-md-start{align-items:flex-start!important}.align-items-md-end{align-items:flex-end!important}.align-items-md-center{align-items:center!important}.align-items-md-baseline{align-items:baseline!important}.align-items-md-stretch{align-items:stretch!important}.align-content-md-start{align-content:flex-start!important}.align-content-md-end{align-content:flex-end!important}.align-content-md-center{align-content:center!important}.align-content-md-between{align-content:space-between!important}.align-content-md-around{align-content:space-around!important}.align-content-md-stretch{align-content:stretch!important}.align-self-md-auto{-ms-grid-row-align:auto!important;align-self:auto!important}.align-self-md-start{align-self:flex-start!important}.align-self-md-end{align-self:flex-end!important}.align-self-md-center{-ms-grid-row-align:center!important;align-self:center!important}.align-self-md-baseline{align-self:baseline!important}.align-self-md-stretch{-ms-grid-row-align:stretch!important;align-self:stretch!important}.order-md-first{order:-1!important}.order-md-0{order:0!important}.order-md-1{order:1!important}.order-md-2{order:2!important}.order-md-3{order:3!important}.order-md-4{order:4!important}.order-md-5{order:5!important}.order-md-last{order:6!important}.m-md-0{margin:0!important}.m-md-1{margin:.25rem!important}.m-md-2{margin:.5rem!important}.m-md-3{margin:1rem!important}.m-md-4{margin:1.25rem!important}.m-md-5{margin:2rem!important}.m-md-6{margin:3rem!important}.m-md-7{margin:6rem!important}.m-md-8{margin:9rem!important}.m-md-auto{margin:auto!important}.mx-md-0{margin-right:0!important;margin-left:0!important}.mx-md-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-md-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-md-3{margin-right:1rem!important;margin-left:1rem!important}.mx-md-4{margin-right:1.25rem!important;margin-left:1.25rem!important}.mx-md-5{margin-right:2rem!important;margin-left:2rem!important}.mx-md-6{margin-right:3rem!important;margin-left:3rem!important}.mx-md-7{margin-right:6rem!important;margin-left:6rem!important}.mx-md-8{margin-right:9rem!important;margin-left:9rem!important}.mx-md-auto{margin-right:auto!important;margin-left:auto!important}.my-md-0{margin-top:0!important;margin-bottom:0!important}.my-md-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-md-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-md-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-md-4{margin-top:1.25rem!important;margin-bottom:1.25rem!important}.my-md-5{margin-top:2rem!important;margin-bottom:2rem!important}.my-md-6{margin-top:3rem!important;margin-bottom:3rem!important}.my-md-7{margin-top:6rem!important;margin-bottom:6rem!important}.my-md-8{margin-top:9rem!important;margin-bottom:9rem!important}.my-md-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-md-0{margin-top:0!important}.mt-md-1{margin-top:.25rem!important}.mt-md-2{margin-top:.5rem!important}.mt-md-3{margin-top:1rem!important}.mt-md-4{margin-top:1.25rem!important}.mt-md-5{margin-top:2rem!important}.mt-md-6{margin-top:3rem!important}.mt-md-7{margin-top:6rem!important}.mt-md-8{margin-top:9rem!important}.mt-md-auto{margin-top:auto!important}.mr-md-0{margin-right:0!important}.mr-md-1{margin-right:.25rem!important}.mr-md-2{margin-right:.5rem!important}.mr-md-3{margin-right:1rem!important}.mr-md-4{margin-right:1.25rem!important}.mr-md-5{margin-right:2rem!important}.mr-md-6{margin-right:3rem!important}.mr-md-7{margin-right:6rem!important}.mr-md-8{margin-right:9rem!important}.mr-md-auto{margin-right:auto!important}.mb-md-0{margin-bottom:0!important}.mb-md-1{margin-bottom:.25rem!important}.mb-md-2{margin-bottom:.5rem!important}.mb-md-3{margin-bottom:1rem!important}.mb-md-4{margin-bottom:1.25rem!important}.mb-md-5{margin-bottom:2rem!important}.mb-md-6{margin-bottom:3rem!important}.mb-md-7{margin-bottom:6rem!important}.mb-md-8{margin-bottom:9rem!important}.mb-md-auto{margin-bottom:auto!important}.ml-md-0{margin-left:0!important}.ml-md-1{margin-left:.25rem!important}.ml-md-2{margin-left:.5rem!important}.ml-md-3{margin-left:1rem!important}.ml-md-4{margin-left:1.25rem!important}.ml-md-5{margin-left:2rem!important}.ml-md-6{margin-left:3rem!important}.ml-md-7{margin-left:6rem!important}.ml-md-8{margin-left:9rem!important}.ml-md-auto{margin-left:auto!important}.m-md-n1{margin:-.25rem!important}.m-md-n2{margin:-.5rem!important}.m-md-n3{margin:-1rem!important}.m-md-n4{margin:-1.25rem!important}.m-md-n5{margin:-2rem!important}.m-md-n6{margin:-3rem!important}.m-md-n7{margin:-6rem!important}.m-md-n8{margin:-9rem!important}.mx-md-n1{margin-right:-.25rem!important;margin-left:-.25rem!important}.mx-md-n2{margin-right:-.5rem!important;margin-left:-.5rem!important}.mx-md-n3{margin-right:-1rem!important;margin-left:-1rem!important}.mx-md-n4{margin-right:-1.25rem!important;margin-left:-1.25rem!important}.mx-md-n5{margin-right:-2rem!important;margin-left:-2rem!important}.mx-md-n6{margin-right:-3rem!important;margin-left:-3rem!important}.mx-md-n7{margin-right:-6rem!important;margin-left:-6rem!important}.mx-md-n8{margin-right:-9rem!important;margin-left:-9rem!important}.my-md-n1{margin-top:-.25rem!important;margin-bottom:-.25rem!important}.my-md-n2{margin-top:-.5rem!important;margin-bottom:-.5rem!important}.my-md-n3{margin-top:-1rem!important;margin-bottom:-1rem!important}.my-md-n4{margin-top:-1.25rem!important;margin-bottom:-1.25rem!important}.my-md-n5{margin-top:-2rem!important;margin-bottom:-2rem!important}.my-md-n6{margin-top:-3rem!important;margin-bottom:-3rem!important}.my-md-n7{margin-top:-6rem!important;margin-bottom:-6rem!important}.my-md-n8{margin-top:-9rem!important;margin-bottom:-9rem!important}.mt-md-n1{margin-top:-.25rem!important}.mt-md-n2{margin-top:-.5rem!important}.mt-md-n3{margin-top:-1rem!important}.mt-md-n4{margin-top:-1.25rem!important}.mt-md-n5{margin-top:-2rem!important}.mt-md-n6{margin-top:-3rem!important}.mt-md-n7{margin-top:-6rem!important}.mt-md-n8{margin-top:-9rem!important}.mr-md-n1{margin-right:-.25rem!important}.mr-md-n2{margin-right:-.5rem!important}.mr-md-n3{margin-right:-1rem!important}.mr-md-n4{margin-right:-1.25rem!important}.mr-md-n5{margin-right:-2rem!important}.mr-md-n6{margin-right:-3rem!important}.mr-md-n7{margin-right:-6rem!important}.mr-md-n8{margin-right:-9rem!important}.mb-md-n1{margin-bottom:-.25rem!important}.mb-md-n2{margin-bottom:-.5rem!important}.mb-md-n3{margin-bottom:-1rem!important}.mb-md-n4{margin-bottom:-1.25rem!important}.mb-md-n5{margin-bottom:-2rem!important}.mb-md-n6{margin-bottom:-3rem!important}.mb-md-n7{margin-bottom:-6rem!important}.mb-md-n8{margin-bottom:-9rem!important}.ml-md-n1{margin-left:-.25rem!important}.ml-md-n2{margin-left:-.5rem!important}.ml-md-n3{margin-left:-1rem!important}.ml-md-n4{margin-left:-1.25rem!important}.ml-md-n5{margin-left:-2rem!important}.ml-md-n6{margin-left:-3rem!important}.ml-md-n7{margin-left:-6rem!important}.ml-md-n8{margin-left:-9rem!important}.p-md-0{padding:0!important}.p-md-1{padding:.25rem!important}.p-md-2{padding:.5rem!important}.p-md-3{padding:1rem!important}.p-md-4{padding:1.25rem!important}.p-md-5{padding:2rem!important}.p-md-6{padding:3rem!important}.p-md-7{padding:6rem!important}.p-md-8{padding:9rem!important}.px-md-0{padding-right:0!important;padding-left:0!important}.px-md-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-md-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-md-3{padding-right:1rem!important;padding-left:1rem!important}.px-md-4{padding-right:1.25rem!important;padding-left:1.25rem!important}.px-md-5{padding-right:2rem!important;padding-left:2rem!important}.px-md-6{padding-right:3rem!important;padding-left:3rem!important}.px-md-7{padding-right:6rem!important;padding-left:6rem!important}.px-md-8{padding-right:9rem!important;padding-left:9rem!important}.py-md-0{padding-top:0!important;padding-bottom:0!important}.py-md-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-md-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-md-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-md-4{padding-top:1.25rem!important;padding-bottom:1.25rem!important}.py-md-5{padding-top:2rem!important;padding-bottom:2rem!important}.py-md-6{padding-top:3rem!important;padding-bottom:3rem!important}.py-md-7{padding-top:6rem!important;padding-bottom:6rem!important}.py-md-8{padding-top:9rem!important;padding-bottom:9rem!important}.pt-md-0{padding-top:0!important}.pt-md-1{padding-top:.25rem!important}.pt-md-2{padding-top:.5rem!important}.pt-md-3{padding-top:1rem!important}.pt-md-4{padding-top:1.25rem!important}.pt-md-5{padding-top:2rem!important}.pt-md-6{padding-top:3rem!important}.pt-md-7{padding-top:6rem!important}.pt-md-8{padding-top:9rem!important}.pr-md-0{padding-right:0!important}.pr-md-1{padding-right:.25rem!important}.pr-md-2{padding-right:.5rem!important}.pr-md-3{padding-right:1rem!important}.pr-md-4{padding-right:1.25rem!important}.pr-md-5{padding-right:2rem!important}.pr-md-6{padding-right:3rem!important}.pr-md-7{padding-right:6rem!important}.pr-md-8{padding-right:9rem!important}.pb-md-0{padding-bottom:0!important}.pb-md-1{padding-bottom:.25rem!important}.pb-md-2{padding-bottom:.5rem!important}.pb-md-3{padding-bottom:1rem!important}.pb-md-4{padding-bottom:1.25rem!important}.pb-md-5{padding-bottom:2rem!important}.pb-md-6{padding-bottom:3rem!important}.pb-md-7{padding-bottom:6rem!important}.pb-md-8{padding-bottom:9rem!important}.pl-md-0{padding-left:0!important}.pl-md-1{padding-left:.25rem!important}.pl-md-2{padding-left:.5rem!important}.pl-md-3{padding-left:1rem!important}.pl-md-4{padding-left:1.25rem!important}.pl-md-5{padding-left:2rem!important}.pl-md-6{padding-left:3rem!important}.pl-md-7{padding-left:6rem!important}.pl-md-8{padding-left:9rem!important}.text-md-left{text-align:left!important}.text-md-right{text-align:right!important}.text-md-center{text-align:center!important}}@media (min-width:64rem){.float-lg-left{float:left!important}.float-lg-right{float:right!important}.float-lg-none{float:none!important}.d-lg-none{display:none!important}.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:flex!important}.d-lg-inline-flex{display:inline-flex!important}.flex-lg-fill{flex:1 1 auto!important}.flex-lg-row{flex-direction:row!important}.flex-lg-column{flex-direction:column!important}.flex-lg-row-reverse{flex-direction:row-reverse!important}.flex-lg-column-reverse{flex-direction:column-reverse!important}.flex-lg-grow-0{flex-grow:0!important}.flex-lg-grow-1{flex-grow:1!important}.flex-lg-shrink-0{flex-shrink:0!important}.flex-lg-shrink-1{flex-shrink:1!important}.flex-lg-wrap{flex-wrap:wrap!important}.flex-lg-nowrap{flex-wrap:nowrap!important}.flex-lg-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-lg-start{justify-content:flex-start!important}.justify-content-lg-end{justify-content:flex-end!important}.justify-content-lg-center{justify-content:center!important}.justify-content-lg-between{justify-content:space-between!important}.justify-content-lg-around{justify-content:space-around!important}.align-items-lg-start{align-items:flex-start!important}.align-items-lg-end{align-items:flex-end!important}.align-items-lg-center{align-items:center!important}.align-items-lg-baseline{align-items:baseline!important}.align-items-lg-stretch{align-items:stretch!important}.align-content-lg-start{align-content:flex-start!important}.align-content-lg-end{align-content:flex-end!important}.align-content-lg-center{align-content:center!important}.align-content-lg-between{align-content:space-between!important}.align-content-lg-around{align-content:space-around!important}.align-content-lg-stretch{align-content:stretch!important}.align-self-lg-auto{-ms-grid-row-align:auto!important;align-self:auto!important}.align-self-lg-start{align-self:flex-start!important}.align-self-lg-end{align-self:flex-end!important}.align-self-lg-center{-ms-grid-row-align:center!important;align-self:center!important}.align-self-lg-baseline{align-self:baseline!important}.align-self-lg-stretch{-ms-grid-row-align:stretch!important;align-self:stretch!important}.order-lg-first{order:-1!important}.order-lg-0{order:0!important}.order-lg-1{order:1!important}.order-lg-2{order:2!important}.order-lg-3{order:3!important}.order-lg-4{order:4!important}.order-lg-5{order:5!important}.order-lg-last{order:6!important}.m-lg-0{margin:0!important}.m-lg-1{margin:.25rem!important}.m-lg-2{margin:.5rem!important}.m-lg-3{margin:1rem!important}.m-lg-4{margin:1.25rem!important}.m-lg-5{margin:2rem!important}.m-lg-6{margin:3rem!important}.m-lg-7{margin:6rem!important}.m-lg-8{margin:9rem!important}.m-lg-auto{margin:auto!important}.mx-lg-0{margin-right:0!important;margin-left:0!important}.mx-lg-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-lg-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-lg-3{margin-right:1rem!important;margin-left:1rem!important}.mx-lg-4{margin-right:1.25rem!important;margin-left:1.25rem!important}.mx-lg-5{margin-right:2rem!important;margin-left:2rem!important}.mx-lg-6{margin-right:3rem!important;margin-left:3rem!important}.mx-lg-7{margin-right:6rem!important;margin-left:6rem!important}.mx-lg-8{margin-right:9rem!important;margin-left:9rem!important}.mx-lg-auto{margin-right:auto!important;margin-left:auto!important}.my-lg-0{margin-top:0!important;margin-bottom:0!important}.my-lg-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-lg-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-lg-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-lg-4{margin-top:1.25rem!important;margin-bottom:1.25rem!important}.my-lg-5{margin-top:2rem!important;margin-bottom:2rem!important}.my-lg-6{margin-top:3rem!important;margin-bottom:3rem!important}.my-lg-7{margin-top:6rem!important;margin-bottom:6rem!important}.my-lg-8{margin-top:9rem!important;margin-bottom:9rem!important}.my-lg-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-lg-0{margin-top:0!important}.mt-lg-1{margin-top:.25rem!important}.mt-lg-2{margin-top:.5rem!important}.mt-lg-3{margin-top:1rem!important}.mt-lg-4{margin-top:1.25rem!important}.mt-lg-5{margin-top:2rem!important}.mt-lg-6{margin-top:3rem!important}.mt-lg-7{margin-top:6rem!important}.mt-lg-8{margin-top:9rem!important}.mt-lg-auto{margin-top:auto!important}.mr-lg-0{margin-right:0!important}.mr-lg-1{margin-right:.25rem!important}.mr-lg-2{margin-right:.5rem!important}.mr-lg-3{margin-right:1rem!important}.mr-lg-4{margin-right:1.25rem!important}.mr-lg-5{margin-right:2rem!important}.mr-lg-6{margin-right:3rem!important}.mr-lg-7{margin-right:6rem!important}.mr-lg-8{margin-right:9rem!important}.mr-lg-auto{margin-right:auto!important}.mb-lg-0{margin-bottom:0!important}.mb-lg-1{margin-bottom:.25rem!important}.mb-lg-2{margin-bottom:.5rem!important}.mb-lg-3{margin-bottom:1rem!important}.mb-lg-4{margin-bottom:1.25rem!important}.mb-lg-5{margin-bottom:2rem!important}.mb-lg-6{margin-bottom:3rem!important}.mb-lg-7{margin-bottom:6rem!important}.mb-lg-8{margin-bottom:9rem!important}.mb-lg-auto{margin-bottom:auto!important}.ml-lg-0{margin-left:0!important}.ml-lg-1{margin-left:.25rem!important}.ml-lg-2{margin-left:.5rem!important}.ml-lg-3{margin-left:1rem!important}.ml-lg-4{margin-left:1.25rem!important}.ml-lg-5{margin-left:2rem!important}.ml-lg-6{margin-left:3rem!important}.ml-lg-7{margin-left:6rem!important}.ml-lg-8{margin-left:9rem!important}.ml-lg-auto{margin-left:auto!important}.m-lg-n1{margin:-.25rem!important}.m-lg-n2{margin:-.5rem!important}.m-lg-n3{margin:-1rem!important}.m-lg-n4{margin:-1.25rem!important}.m-lg-n5{margin:-2rem!important}.m-lg-n6{margin:-3rem!important}.m-lg-n7{margin:-6rem!important}.m-lg-n8{margin:-9rem!important}.mx-lg-n1{margin-right:-.25rem!important;margin-left:-.25rem!important}.mx-lg-n2{margin-right:-.5rem!important;margin-left:-.5rem!important}.mx-lg-n3{margin-right:-1rem!important;margin-left:-1rem!important}.mx-lg-n4{margin-right:-1.25rem!important;margin-left:-1.25rem!important}.mx-lg-n5{margin-right:-2rem!important;margin-left:-2rem!important}.mx-lg-n6{margin-right:-3rem!important;margin-left:-3rem!important}.mx-lg-n7{margin-right:-6rem!important;margin-left:-6rem!important}.mx-lg-n8{margin-right:-9rem!important;margin-left:-9rem!important}.my-lg-n1{margin-top:-.25rem!important;margin-bottom:-.25rem!important}.my-lg-n2{margin-top:-.5rem!important;margin-bottom:-.5rem!important}.my-lg-n3{margin-top:-1rem!important;margin-bottom:-1rem!important}.my-lg-n4{margin-top:-1.25rem!important;margin-bottom:-1.25rem!important}.my-lg-n5{margin-top:-2rem!important;margin-bottom:-2rem!important}.my-lg-n6{margin-top:-3rem!important;margin-bottom:-3rem!important}.my-lg-n7{margin-top:-6rem!important;margin-bottom:-6rem!important}.my-lg-n8{margin-top:-9rem!important;margin-bottom:-9rem!important}.mt-lg-n1{margin-top:-.25rem!important}.mt-lg-n2{margin-top:-.5rem!important}.mt-lg-n3{margin-top:-1rem!important}.mt-lg-n4{margin-top:-1.25rem!important}.mt-lg-n5{margin-top:-2rem!important}.mt-lg-n6{margin-top:-3rem!important}.mt-lg-n7{margin-top:-6rem!important}.mt-lg-n8{margin-top:-9rem!important}.mr-lg-n1{margin-right:-.25rem!important}.mr-lg-n2{margin-right:-.5rem!important}.mr-lg-n3{margin-right:-1rem!important}.mr-lg-n4{margin-right:-1.25rem!important}.mr-lg-n5{margin-right:-2rem!important}.mr-lg-n6{margin-right:-3rem!important}.mr-lg-n7{margin-right:-6rem!important}.mr-lg-n8{margin-right:-9rem!important}.mb-lg-n1{margin-bottom:-.25rem!important}.mb-lg-n2{margin-bottom:-.5rem!important}.mb-lg-n3{margin-bottom:-1rem!important}.mb-lg-n4{margin-bottom:-1.25rem!important}.mb-lg-n5{margin-bottom:-2rem!important}.mb-lg-n6{margin-bottom:-3rem!important}.mb-lg-n7{margin-bottom:-6rem!important}.mb-lg-n8{margin-bottom:-9rem!important}.ml-lg-n1{margin-left:-.25rem!important}.ml-lg-n2{margin-left:-.5rem!important}.ml-lg-n3{margin-left:-1rem!important}.ml-lg-n4{margin-left:-1.25rem!important}.ml-lg-n5{margin-left:-2rem!important}.ml-lg-n6{margin-left:-3rem!important}.ml-lg-n7{margin-left:-6rem!important}.ml-lg-n8{margin-left:-9rem!important}.p-lg-0{padding:0!important}.p-lg-1{padding:.25rem!important}.p-lg-2{padding:.5rem!important}.p-lg-3{padding:1rem!important}.p-lg-4{padding:1.25rem!important}.p-lg-5{padding:2rem!important}.p-lg-6{padding:3rem!important}.p-lg-7{padding:6rem!important}.p-lg-8{padding:9rem!important}.px-lg-0{padding-right:0!important;padding-left:0!important}.px-lg-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-lg-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-lg-3{padding-right:1rem!important;padding-left:1rem!important}.px-lg-4{padding-right:1.25rem!important;padding-left:1.25rem!important}.px-lg-5{padding-right:2rem!important;padding-left:2rem!important}.px-lg-6{padding-right:3rem!important;padding-left:3rem!important}.px-lg-7{padding-right:6rem!important;padding-left:6rem!important}.px-lg-8{padding-right:9rem!important;padding-left:9rem!important}.py-lg-0{padding-top:0!important;padding-bottom:0!important}.py-lg-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-lg-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-lg-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-lg-4{padding-top:1.25rem!important;padding-bottom:1.25rem!important}.py-lg-5{padding-top:2rem!important;padding-bottom:2rem!important}.py-lg-6{padding-top:3rem!important;padding-bottom:3rem!important}.py-lg-7{padding-top:6rem!important;padding-bottom:6rem!important}.py-lg-8{padding-top:9rem!important;padding-bottom:9rem!important}.pt-lg-0{padding-top:0!important}.pt-lg-1{padding-top:.25rem!important}.pt-lg-2{padding-top:.5rem!important}.pt-lg-3{padding-top:1rem!important}.pt-lg-4{padding-top:1.25rem!important}.pt-lg-5{padding-top:2rem!important}.pt-lg-6{padding-top:3rem!important}.pt-lg-7{padding-top:6rem!important}.pt-lg-8{padding-top:9rem!important}.pr-lg-0{padding-right:0!important}.pr-lg-1{padding-right:.25rem!important}.pr-lg-2{padding-right:.5rem!important}.pr-lg-3{padding-right:1rem!important}.pr-lg-4{padding-right:1.25rem!important}.pr-lg-5{padding-right:2rem!important}.pr-lg-6{padding-right:3rem!important}.pr-lg-7{padding-right:6rem!important}.pr-lg-8{padding-right:9rem!important}.pb-lg-0{padding-bottom:0!important}.pb-lg-1{padding-bottom:.25rem!important}.pb-lg-2{padding-bottom:.5rem!important}.pb-lg-3{padding-bottom:1rem!important}.pb-lg-4{padding-bottom:1.25rem!important}.pb-lg-5{padding-bottom:2rem!important}.pb-lg-6{padding-bottom:3rem!important}.pb-lg-7{padding-bottom:6rem!important}.pb-lg-8{padding-bottom:9rem!important}.pl-lg-0{padding-left:0!important}.pl-lg-1{padding-left:.25rem!important}.pl-lg-2{padding-left:.5rem!important}.pl-lg-3{padding-left:1rem!important}.pl-lg-4{padding-left:1.25rem!important}.pl-lg-5{padding-left:2rem!important}.pl-lg-6{padding-left:3rem!important}.pl-lg-7{padding-left:6rem!important}.pl-lg-8{padding-left:9rem!important}.text-lg-left{text-align:left!important}.text-lg-right{text-align:right!important}.text-lg-center{text-align:center!important}}@media (min-width:75.25rem){.float-xl-left{float:left!important}.float-xl-right{float:right!important}.float-xl-none{float:none!important}.d-xl-none{display:none!important}.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:flex!important}.d-xl-inline-flex{display:inline-flex!important}.flex-xl-fill{flex:1 1 auto!important}.flex-xl-row{flex-direction:row!important}.flex-xl-column{flex-direction:column!important}.flex-xl-row-reverse{flex-direction:row-reverse!important}.flex-xl-column-reverse{flex-direction:column-reverse!important}.flex-xl-grow-0{flex-grow:0!important}.flex-xl-grow-1{flex-grow:1!important}.flex-xl-shrink-0{flex-shrink:0!important}.flex-xl-shrink-1{flex-shrink:1!important}.flex-xl-wrap{flex-wrap:wrap!important}.flex-xl-nowrap{flex-wrap:nowrap!important}.flex-xl-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-xl-start{justify-content:flex-start!important}.justify-content-xl-end{justify-content:flex-end!important}.justify-content-xl-center{justify-content:center!important}.justify-content-xl-between{justify-content:space-between!important}.justify-content-xl-around{justify-content:space-around!important}.align-items-xl-start{align-items:flex-start!important}.align-items-xl-end{align-items:flex-end!important}.align-items-xl-center{align-items:center!important}.align-items-xl-baseline{align-items:baseline!important}.align-items-xl-stretch{align-items:stretch!important}.align-content-xl-start{align-content:flex-start!important}.align-content-xl-end{align-content:flex-end!important}.align-content-xl-center{align-content:center!important}.align-content-xl-between{align-content:space-between!important}.align-content-xl-around{align-content:space-around!important}.align-content-xl-stretch{align-content:stretch!important}.align-self-xl-auto{-ms-grid-row-align:auto!important;align-self:auto!important}.align-self-xl-start{align-self:flex-start!important}.align-self-xl-end{align-self:flex-end!important}.align-self-xl-center{-ms-grid-row-align:center!important;align-self:center!important}.align-self-xl-baseline{align-self:baseline!important}.align-self-xl-stretch{-ms-grid-row-align:stretch!important;align-self:stretch!important}.order-xl-first{order:-1!important}.order-xl-0{order:0!important}.order-xl-1{order:1!important}.order-xl-2{order:2!important}.order-xl-3{order:3!important}.order-xl-4{order:4!important}.order-xl-5{order:5!important}.order-xl-last{order:6!important}.m-xl-0{margin:0!important}.m-xl-1{margin:.25rem!important}.m-xl-2{margin:.5rem!important}.m-xl-3{margin:1rem!important}.m-xl-4{margin:1.25rem!important}.m-xl-5{margin:2rem!important}.m-xl-6{margin:3rem!important}.m-xl-7{margin:6rem!important}.m-xl-8{margin:9rem!important}.m-xl-auto{margin:auto!important}.mx-xl-0{margin-right:0!important;margin-left:0!important}.mx-xl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xl-4{margin-right:1.25rem!important;margin-left:1.25rem!important}.mx-xl-5{margin-right:2rem!important;margin-left:2rem!important}.mx-xl-6{margin-right:3rem!important;margin-left:3rem!important}.mx-xl-7{margin-right:6rem!important;margin-left:6rem!important}.mx-xl-8{margin-right:9rem!important;margin-left:9rem!important}.mx-xl-auto{margin-right:auto!important;margin-left:auto!important}.my-xl-0{margin-top:0!important;margin-bottom:0!important}.my-xl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xl-4{margin-top:1.25rem!important;margin-bottom:1.25rem!important}.my-xl-5{margin-top:2rem!important;margin-bottom:2rem!important}.my-xl-6{margin-top:3rem!important;margin-bottom:3rem!important}.my-xl-7{margin-top:6rem!important;margin-bottom:6rem!important}.my-xl-8{margin-top:9rem!important;margin-bottom:9rem!important}.my-xl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xl-0{margin-top:0!important}.mt-xl-1{margin-top:.25rem!important}.mt-xl-2{margin-top:.5rem!important}.mt-xl-3{margin-top:1rem!important}.mt-xl-4{margin-top:1.25rem!important}.mt-xl-5{margin-top:2rem!important}.mt-xl-6{margin-top:3rem!important}.mt-xl-7{margin-top:6rem!important}.mt-xl-8{margin-top:9rem!important}.mt-xl-auto{margin-top:auto!important}.mr-xl-0{margin-right:0!important}.mr-xl-1{margin-right:.25rem!important}.mr-xl-2{margin-right:.5rem!important}.mr-xl-3{margin-right:1rem!important}.mr-xl-4{margin-right:1.25rem!important}.mr-xl-5{margin-right:2rem!important}.mr-xl-6{margin-right:3rem!important}.mr-xl-7{margin-right:6rem!important}.mr-xl-8{margin-right:9rem!important}.mr-xl-auto{margin-right:auto!important}.mb-xl-0{margin-bottom:0!important}.mb-xl-1{margin-bottom:.25rem!important}.mb-xl-2{margin-bottom:.5rem!important}.mb-xl-3{margin-bottom:1rem!important}.mb-xl-4{margin-bottom:1.25rem!important}.mb-xl-5{margin-bottom:2rem!important}.mb-xl-6{margin-bottom:3rem!important}.mb-xl-7{margin-bottom:6rem!important}.mb-xl-8{margin-bottom:9rem!important}.mb-xl-auto{margin-bottom:auto!important}.ml-xl-0{margin-left:0!important}.ml-xl-1{margin-left:.25rem!important}.ml-xl-2{margin-left:.5rem!important}.ml-xl-3{margin-left:1rem!important}.ml-xl-4{margin-left:1.25rem!important}.ml-xl-5{margin-left:2rem!important}.ml-xl-6{margin-left:3rem!important}.ml-xl-7{margin-left:6rem!important}.ml-xl-8{margin-left:9rem!important}.ml-xl-auto{margin-left:auto!important}.m-xl-n1{margin:-.25rem!important}.m-xl-n2{margin:-.5rem!important}.m-xl-n3{margin:-1rem!important}.m-xl-n4{margin:-1.25rem!important}.m-xl-n5{margin:-2rem!important}.m-xl-n6{margin:-3rem!important}.m-xl-n7{margin:-6rem!important}.m-xl-n8{margin:-9rem!important}.mx-xl-n1{margin-right:-.25rem!important;margin-left:-.25rem!important}.mx-xl-n2{margin-right:-.5rem!important;margin-left:-.5rem!important}.mx-xl-n3{margin-right:-1rem!important;margin-left:-1rem!important}.mx-xl-n4{margin-right:-1.25rem!important;margin-left:-1.25rem!important}.mx-xl-n5{margin-right:-2rem!important;margin-left:-2rem!important}.mx-xl-n6{margin-right:-3rem!important;margin-left:-3rem!important}.mx-xl-n7{margin-right:-6rem!important;margin-left:-6rem!important}.mx-xl-n8{margin-right:-9rem!important;margin-left:-9rem!important}.my-xl-n1{margin-top:-.25rem!important;margin-bottom:-.25rem!important}.my-xl-n2{margin-top:-.5rem!important;margin-bottom:-.5rem!important}.my-xl-n3{margin-top:-1rem!important;margin-bottom:-1rem!important}.my-xl-n4{margin-top:-1.25rem!important;margin-bottom:-1.25rem!important}.my-xl-n5{margin-top:-2rem!important;margin-bottom:-2rem!important}.my-xl-n6{margin-top:-3rem!important;margin-bottom:-3rem!important}.my-xl-n7{margin-top:-6rem!important;margin-bottom:-6rem!important}.my-xl-n8{margin-top:-9rem!important;margin-bottom:-9rem!important}.mt-xl-n1{margin-top:-.25rem!important}.mt-xl-n2{margin-top:-.5rem!important}.mt-xl-n3{margin-top:-1rem!important}.mt-xl-n4{margin-top:-1.25rem!important}.mt-xl-n5{margin-top:-2rem!important}.mt-xl-n6{margin-top:-3rem!important}.mt-xl-n7{margin-top:-6rem!important}.mt-xl-n8{margin-top:-9rem!important}.mr-xl-n1{margin-right:-.25rem!important}.mr-xl-n2{margin-right:-.5rem!important}.mr-xl-n3{margin-right:-1rem!important}.mr-xl-n4{margin-right:-1.25rem!important}.mr-xl-n5{margin-right:-2rem!important}.mr-xl-n6{margin-right:-3rem!important}.mr-xl-n7{margin-right:-6rem!important}.mr-xl-n8{margin-right:-9rem!important}.mb-xl-n1{margin-bottom:-.25rem!important}.mb-xl-n2{margin-bottom:-.5rem!important}.mb-xl-n3{margin-bottom:-1rem!important}.mb-xl-n4{margin-bottom:-1.25rem!important}.mb-xl-n5{margin-bottom:-2rem!important}.mb-xl-n6{margin-bottom:-3rem!important}.mb-xl-n7{margin-bottom:-6rem!important}.mb-xl-n8{margin-bottom:-9rem!important}.ml-xl-n1{margin-left:-.25rem!important}.ml-xl-n2{margin-left:-.5rem!important}.ml-xl-n3{margin-left:-1rem!important}.ml-xl-n4{margin-left:-1.25rem!important}.ml-xl-n5{margin-left:-2rem!important}.ml-xl-n6{margin-left:-3rem!important}.ml-xl-n7{margin-left:-6rem!important}.ml-xl-n8{margin-left:-9rem!important}.p-xl-0{padding:0!important}.p-xl-1{padding:.25rem!important}.p-xl-2{padding:.5rem!important}.p-xl-3{padding:1rem!important}.p-xl-4{padding:1.25rem!important}.p-xl-5{padding:2rem!important}.p-xl-6{padding:3rem!important}.p-xl-7{padding:6rem!important}.p-xl-8{padding:9rem!important}.px-xl-0{padding-right:0!important;padding-left:0!important}.px-xl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xl-4{padding-right:1.25rem!important;padding-left:1.25rem!important}.px-xl-5{padding-right:2rem!important;padding-left:2rem!important}.px-xl-6{padding-right:3rem!important;padding-left:3rem!important}.px-xl-7{padding-right:6rem!important;padding-left:6rem!important}.px-xl-8{padding-right:9rem!important;padding-left:9rem!important}.py-xl-0{padding-top:0!important;padding-bottom:0!important}.py-xl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xl-4{padding-top:1.25rem!important;padding-bottom:1.25rem!important}.py-xl-5{padding-top:2rem!important;padding-bottom:2rem!important}.py-xl-6{padding-top:3rem!important;padding-bottom:3rem!important}.py-xl-7{padding-top:6rem!important;padding-bottom:6rem!important}.py-xl-8{padding-top:9rem!important;padding-bottom:9rem!important}.pt-xl-0{padding-top:0!important}.pt-xl-1{padding-top:.25rem!important}.pt-xl-2{padding-top:.5rem!important}.pt-xl-3{padding-top:1rem!important}.pt-xl-4{padding-top:1.25rem!important}.pt-xl-5{padding-top:2rem!important}.pt-xl-6{padding-top:3rem!important}.pt-xl-7{padding-top:6rem!important}.pt-xl-8{padding-top:9rem!important}.pr-xl-0{padding-right:0!important}.pr-xl-1{padding-right:.25rem!important}.pr-xl-2{padding-right:.5rem!important}.pr-xl-3{padding-right:1rem!important}.pr-xl-4{padding-right:1.25rem!important}.pr-xl-5{padding-right:2rem!important}.pr-xl-6{padding-right:3rem!important}.pr-xl-7{padding-right:6rem!important}.pr-xl-8{padding-right:9rem!important}.pb-xl-0{padding-bottom:0!important}.pb-xl-1{padding-bottom:.25rem!important}.pb-xl-2{padding-bottom:.5rem!important}.pb-xl-3{padding-bottom:1rem!important}.pb-xl-4{padding-bottom:1.25rem!important}.pb-xl-5{padding-bottom:2rem!important}.pb-xl-6{padding-bottom:3rem!important}.pb-xl-7{padding-bottom:6rem!important}.pb-xl-8{padding-bottom:9rem!important}.pl-xl-0{padding-left:0!important}.pl-xl-1{padding-left:.25rem!important}.pl-xl-2{padding-left:.5rem!important}.pl-xl-3{padding-left:1rem!important}.pl-xl-4{padding-left:1.25rem!important}.pl-xl-5{padding-left:2rem!important}.pl-xl-6{padding-left:3rem!important}.pl-xl-7{padding-left:6rem!important}.pl-xl-8{padding-left:9rem!important}.text-xl-left{text-align:left!important}.text-xl-right{text-align:right!important}.text-xl-center{text-align:center!important}}@media print{.d-print-none{display:none!important}.d-print-inline{display:inline!important}.d-print-inline-block{display:inline-block!important}.d-print-block{display:block!important}.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}.d-print-flex{display:flex!important}.d-print-inline-flex{display:inline-flex!important}}html{font-size:16px;scroll-behavior:smooth}body{overflow-y:scroll;touch-action:manipulation;text-rendering:optimizeLegibility;font-feature-settings:"liga" 0}body .content ::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}body .content ::-webkit-scrollbar-thumb{border-radius:5px;background:#dee1e7}body .content ::-webkit-scrollbar-corner{background:0 0}body .content :hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#cbcfd6}@media print{body{background:0 0}}.navbar{padding-top:0;padding-bottom:0;min-height:3.5rem;box-shadow:0 0 0 1px rgba(134,140,151,.24);z-index:1030}@media print{.navbar{display:none;margin:0!important}}.navbar .nav-link{line-height:1;min-width:2rem;min-height:2rem;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center}.navbar .nav-link-icon{font-size:1rem;width:1rem;height:1rem;display:block;margin-right:.5rem;line-height:.99}.navbar .navbar-nav{align-items:center}.navbar .navbar-nav .nav-link{color:inherit;opacity:.6;transition:.3s opacity;justify-content:center}.navbar .navbar-nav .nav-link:hover{color:inherit;opacity:1}.navbar .navbar-nav .nav-link.disabled{color:inherit;opacity:.2}.navbar .navbar-nav .active>.nav-link,.navbar .navbar-nav .nav-link.active,.navbar .navbar-nav .nav-link.show,.navbar .navbar-nav .show>.nav-link{color:inherit;opacity:1}.navbar-expand-xs .navbar-nav{margin-left:-.75rem}.navbar-expand-xs .navbar-nav .nav-item{position:relative}@media (min-width:33rem){.navbar-expand-sm .navbar-nav{margin-left:-.75rem}.navbar-expand-sm .navbar-nav .nav-item{position:relative}}@media (min-width:48rem){.navbar-expand-md .navbar-nav{margin-left:-.75rem}.navbar-expand-md .navbar-nav .nav-item{position:relative}}@media (min-width:64rem){.navbar-expand-lg .navbar-nav{margin-left:-.75rem}.navbar-expand-lg .navbar-nav .nav-item{position:relative}}@media (min-width:75.25rem){.navbar-expand-xl .navbar-nav{margin-left:-.75rem}.navbar-expand-xl .navbar-nav .nav-item{position:relative}}.navbar-side{margin-left:auto;padding-left:1.5rem}.navbar-side>*{margin-left:1rem}.navbar-heading{display:none}.navbar-brand{padding:0}.navbar-brand-logo{height:2rem}.navbar-brand-logo-small{display:none}.navbar-light{background:#fff}.navbar-light::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.navbar-light::-webkit-scrollbar-thumb{border-radius:5px;background:#dee1e7}.navbar-light::-webkit-scrollbar-corner{background:0 0}.navbar-light:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#cbcfd6}.navbar-dark{background:#354052;color:#fff;box-shadow:0 0 0 1px #2f3949}.navbar-dark::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.navbar-dark::-webkit-scrollbar-thumb{border-radius:5px;background:0 0}.navbar-dark::-webkit-scrollbar-corner{background:0 0}.navbar-dark:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#5d6675}.navbar-dark .text-muted{color:inherit!important;opacity:.6}.navbar-dark .navbar-brand-autodark{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}.navbar-dark .form-control{border-color:transparent;background:#3b475b;color:#fff}.navbar:not(.navbar-vertical) .d-none-navbar-horizontal,.navbar:not(.navbar-vertical)~* .d-none-navbar-vertical-narrow{display:none!important}.navbar:not(.navbar-vertical) .dropdown-menu{margin-right:-.25rem}.navbar-vertical.navbar-expand-xs{position:fixed;left:0;top:0;bottom:0;width:15.625rem;z-index:1030;min-height:auto;align-items:start;overflow:auto}.navbar-vertical.navbar-expand-xs>[class*=container]{flex-direction:column;align-items:stretch;padding-left:0;padding-right:0;min-height:100%}.navbar-vertical.navbar-expand-xs~.content,.navbar-vertical.navbar-expand-xs~.navbar{margin-left:15.625rem}.navbar-vertical.navbar-expand-xs~.content [class*=container],.navbar-vertical.navbar-expand-xs~.navbar [class*=container]{padding-left:1.25rem;padding-right:1.25rem}.navbar-vertical.navbar-expand-xs .d-none-navbar-vertical,.navbar-vertical.navbar-expand-xs~* .d-none-navbar-vertical{display:none!important}.navbar-vertical.navbar-expand-xs .navbar-brand{display:flex;width:100%;margin:0;text-align:center;height:3.5rem;align-items:center;justify-content:center}.navbar-vertical.navbar-expand-xs .navbar-heading{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97;display:block;margin-bottom:.5rem}.navbar-vertical.navbar-expand-xs .navbar-collapse{flex-direction:column;text-align:left;align-items:normal;padding:1rem 1rem}.navbar-vertical.navbar-expand-xs .navbar-nav{flex-direction:column;align-items:normal;margin-left:-1rem;margin-right:-1rem}.navbar-vertical.navbar-expand-xs .navbar-nav .nav-link{min-height:0;height:2.5rem;padding-left:1rem;padding-right:1rem;justify-content:start}.navbar-vertical.navbar-expand-xs .navbar-nav .nav-item.active{font-weight:600}.navbar-vertical.navbar-expand-xs .navbar-nav .nav-item.active>.nav-link:before{left:0;right:auto;top:0;bottom:0;height:auto;width:2px}.navbar-vertical.navbar-expand-xs .navbar-side{margin-left:0;margin-top:auto;padding-left:0;padding-top:1rem}.navbar-vertical.navbar-expand-xs .navbar-side>*{margin-left:0;margin-top:1rem}.navbar-vertical.navbar-expand-xs.navbar-right{left:auto;right:0}.navbar-vertical.navbar-expand-xs.navbar-right~.content,.navbar-vertical.navbar-expand-xs.navbar-right~.navbar{margin-left:0;margin-right:15.625rem}.navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .d-none-navbar-vertical-wide,.navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow)~* .d-none-navbar-vertical-wide{display:none!important}.navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .nav-item.active>.dropdown-menu{display:block}.navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .dropdown-menu{position:static;background:inherit;border:0;box-shadow:none;padding:0;margin:0;color:inherit;-moz-columns:1;columns:1}.navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .dropdown-menu:after,.navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .dropdown-menu:before{content:none}.navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .dropdown-item{padding-left:2.5rem;opacity:.6;color:inherit;background:0 0}.navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .dropdown-item.active{font-weight:600;opacity:1}.navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .dropdown-item:hover{opacity:1}.navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .dropdown-toggle:after{margin-left:auto}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow{width:4rem;overflow:visible}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .d-none-navbar-vertical-narrow,.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow~* .d-none-navbar-vertical-narrow{display:none!important}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .navbar-nav{margin-top:0}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .nav-link{height:3rem}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .nav-link-title,.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .navbar-heading{display:none}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .nav-link-icon{margin:0 auto;font-size:1.125rem;width:1.125rem;height:1.125rem}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .navbar-brand-logo-large{display:none}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .navbar-brand-logo-small{display:inline-block}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow~.content,.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow~.navbar{margin-left:4rem}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .dropdown-toggle:after{content:none}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .dropdown-menu{left:100%;top:0;margin:0 0 0 -4px}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .dropdown-menu:after,.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .dropdown-menu:before{content:none}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .dropdown-menu.dropdown-menu-right{top:auto;bottom:0;right:auto}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow.navbar-right~.content,.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow.navbar-right~.navbar{margin-left:0;margin-right:4rem}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow.navbar-right .dropdown-menu{margin:0 -4px 0 0;left:auto;right:100%}.navbar-vertical.navbar-expand-xs .d-none-navbar-horizontal,.navbar-vertical.navbar-expand-xs~* .d-none-navbar-vertical-narrow{display:none!important}.navbar-vertical.navbar-expand-xs .dropdown-menu{margin-right:-.25rem}@media (min-width:33rem){.navbar-vertical.navbar-expand-sm{position:fixed;left:0;top:0;bottom:0;width:15.625rem;z-index:1030;min-height:auto;align-items:start;overflow:auto}.navbar-vertical.navbar-expand-sm>[class*=container]{flex-direction:column;align-items:stretch;padding-left:0;padding-right:0;min-height:100%}.navbar-vertical.navbar-expand-sm~.content,.navbar-vertical.navbar-expand-sm~.navbar{margin-left:15.625rem}.navbar-vertical.navbar-expand-sm~.content [class*=container],.navbar-vertical.navbar-expand-sm~.navbar [class*=container]{padding-left:1.25rem;padding-right:1.25rem}.navbar-vertical.navbar-expand-sm .d-none-navbar-vertical,.navbar-vertical.navbar-expand-sm~* .d-none-navbar-vertical{display:none!important}.navbar-vertical.navbar-expand-sm .navbar-brand{display:flex;width:100%;margin:0;text-align:center;height:3.5rem;align-items:center;justify-content:center}.navbar-vertical.navbar-expand-sm .navbar-heading{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97;display:block;margin-bottom:.5rem}.navbar-vertical.navbar-expand-sm .navbar-collapse{flex-direction:column;text-align:left;align-items:normal;padding:1rem 1rem}.navbar-vertical.navbar-expand-sm .navbar-nav{flex-direction:column;align-items:normal;margin-left:-1rem;margin-right:-1rem}.navbar-vertical.navbar-expand-sm .navbar-nav .nav-link{min-height:0;height:2.5rem;padding-left:1rem;padding-right:1rem;justify-content:start}.navbar-vertical.navbar-expand-sm .navbar-nav .nav-item.active{font-weight:600}.navbar-vertical.navbar-expand-sm .navbar-nav .nav-item.active>.nav-link:before{left:0;right:auto;top:0;bottom:0;height:auto;width:2px}.navbar-vertical.navbar-expand-sm .navbar-side{margin-left:0;margin-top:auto;padding-left:0;padding-top:1rem}.navbar-vertical.navbar-expand-sm .navbar-side>*{margin-left:0;margin-top:1rem}.navbar-vertical.navbar-expand-sm.navbar-right{left:auto;right:0}.navbar-vertical.navbar-expand-sm.navbar-right~.content,.navbar-vertical.navbar-expand-sm.navbar-right~.navbar{margin-left:0;margin-right:15.625rem}.navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .d-none-navbar-vertical-wide,.navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow)~* .d-none-navbar-vertical-wide{display:none!important}.navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .nav-item.active>.dropdown-menu{display:block}.navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .dropdown-menu{position:static;background:inherit;border:0;box-shadow:none;padding:0;margin:0;color:inherit;-moz-columns:1;columns:1}.navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .dropdown-menu:after,.navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .dropdown-menu:before{content:none}.navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .dropdown-item{padding-left:2.5rem;opacity:.6;color:inherit;background:0 0}.navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .dropdown-item.active{font-weight:600;opacity:1}.navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .dropdown-item:hover{opacity:1}.navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .dropdown-toggle:after{margin-left:auto}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow{width:4rem;overflow:visible}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .d-none-navbar-vertical-narrow,.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow~* .d-none-navbar-vertical-narrow{display:none!important}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .navbar-nav{margin-top:0}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .nav-link{height:3rem}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .nav-link-title,.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .navbar-heading{display:none}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .nav-link-icon{margin:0 auto;font-size:1.125rem;width:1.125rem;height:1.125rem}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .navbar-brand-logo-large{display:none}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .navbar-brand-logo-small{display:inline-block}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow~.content,.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow~.navbar{margin-left:4rem}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .dropdown-toggle:after{content:none}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .dropdown-menu{left:100%;top:0;margin:0 0 0 -4px}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .dropdown-menu:after,.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .dropdown-menu:before{content:none}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .dropdown-menu.dropdown-menu-right{top:auto;bottom:0;right:auto}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow.navbar-right~.content,.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow.navbar-right~.navbar{margin-left:0;margin-right:4rem}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow.navbar-right .dropdown-menu{margin:0 -4px 0 0;left:auto;right:100%}}@media (max-width:32.98rem){.navbar-vertical.navbar-expand-sm .d-none-navbar-horizontal,.navbar-vertical.navbar-expand-sm~* .d-none-navbar-vertical-narrow{display:none!important}.navbar-vertical.navbar-expand-sm .dropdown-menu{margin-right:-.25rem}}@media (min-width:48rem){.navbar-vertical.navbar-expand-md{position:fixed;left:0;top:0;bottom:0;width:15.625rem;z-index:1030;min-height:auto;align-items:start;overflow:auto}.navbar-vertical.navbar-expand-md>[class*=container]{flex-direction:column;align-items:stretch;padding-left:0;padding-right:0;min-height:100%}.navbar-vertical.navbar-expand-md~.content,.navbar-vertical.navbar-expand-md~.navbar{margin-left:15.625rem}.navbar-vertical.navbar-expand-md~.content [class*=container],.navbar-vertical.navbar-expand-md~.navbar [class*=container]{padding-left:1.25rem;padding-right:1.25rem}.navbar-vertical.navbar-expand-md .d-none-navbar-vertical,.navbar-vertical.navbar-expand-md~* .d-none-navbar-vertical{display:none!important}.navbar-vertical.navbar-expand-md .navbar-brand{display:flex;width:100%;margin:0;text-align:center;height:3.5rem;align-items:center;justify-content:center}.navbar-vertical.navbar-expand-md .navbar-heading{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97;display:block;margin-bottom:.5rem}.navbar-vertical.navbar-expand-md .navbar-collapse{flex-direction:column;text-align:left;align-items:normal;padding:1rem 1rem}.navbar-vertical.navbar-expand-md .navbar-nav{flex-direction:column;align-items:normal;margin-left:-1rem;margin-right:-1rem}.navbar-vertical.navbar-expand-md .navbar-nav .nav-link{min-height:0;height:2.5rem;padding-left:1rem;padding-right:1rem;justify-content:start}.navbar-vertical.navbar-expand-md .navbar-nav .nav-item.active{font-weight:600}.navbar-vertical.navbar-expand-md .navbar-nav .nav-item.active>.nav-link:before{left:0;right:auto;top:0;bottom:0;height:auto;width:2px}.navbar-vertical.navbar-expand-md .navbar-side{margin-left:0;margin-top:auto;padding-left:0;padding-top:1rem}.navbar-vertical.navbar-expand-md .navbar-side>*{margin-left:0;margin-top:1rem}.navbar-vertical.navbar-expand-md.navbar-right{left:auto;right:0}.navbar-vertical.navbar-expand-md.navbar-right~.content,.navbar-vertical.navbar-expand-md.navbar-right~.navbar{margin-left:0;margin-right:15.625rem}.navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .d-none-navbar-vertical-wide,.navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow)~* .d-none-navbar-vertical-wide{display:none!important}.navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .nav-item.active>.dropdown-menu{display:block}.navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .dropdown-menu{position:static;background:inherit;border:0;box-shadow:none;padding:0;margin:0;color:inherit;-moz-columns:1;columns:1}.navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .dropdown-menu:after,.navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .dropdown-menu:before{content:none}.navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .dropdown-item{padding-left:2.5rem;opacity:.6;color:inherit;background:0 0}.navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .dropdown-item.active{font-weight:600;opacity:1}.navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .dropdown-item:hover{opacity:1}.navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .dropdown-toggle:after{margin-left:auto}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow{width:4rem;overflow:visible}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow .d-none-navbar-vertical-narrow,.navbar-vertical.navbar-expand-md.navbar-vertical-narrow~* .d-none-navbar-vertical-narrow{display:none!important}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow .navbar-nav{margin-top:0}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow .nav-link{height:3rem}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow .nav-link-title,.navbar-vertical.navbar-expand-md.navbar-vertical-narrow .navbar-heading{display:none}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow .nav-link-icon{margin:0 auto;font-size:1.125rem;width:1.125rem;height:1.125rem}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow .navbar-brand-logo-large{display:none}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow .navbar-brand-logo-small{display:inline-block}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow~.content,.navbar-vertical.navbar-expand-md.navbar-vertical-narrow~.navbar{margin-left:4rem}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow .dropdown-toggle:after{content:none}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow .dropdown-menu{left:100%;top:0;margin:0 0 0 -4px}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow .dropdown-menu:after,.navbar-vertical.navbar-expand-md.navbar-vertical-narrow .dropdown-menu:before{content:none}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow .dropdown-menu.dropdown-menu-right{top:auto;bottom:0;right:auto}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow.navbar-right~.content,.navbar-vertical.navbar-expand-md.navbar-vertical-narrow.navbar-right~.navbar{margin-left:0;margin-right:4rem}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow.navbar-right .dropdown-menu{margin:0 -4px 0 0;left:auto;right:100%}}@media (max-width:47.98rem){.navbar-vertical.navbar-expand-md .d-none-navbar-horizontal,.navbar-vertical.navbar-expand-md~* .d-none-navbar-vertical-narrow{display:none!important}.navbar-vertical.navbar-expand-md .dropdown-menu{margin-right:-.25rem}}@media (min-width:64rem){.navbar-vertical.navbar-expand-lg{position:fixed;left:0;top:0;bottom:0;width:15.625rem;z-index:1030;min-height:auto;align-items:start;overflow:auto}.navbar-vertical.navbar-expand-lg>[class*=container]{flex-direction:column;align-items:stretch;padding-left:0;padding-right:0;min-height:100%}.navbar-vertical.navbar-expand-lg~.content,.navbar-vertical.navbar-expand-lg~.navbar{margin-left:15.625rem}.navbar-vertical.navbar-expand-lg~.content [class*=container],.navbar-vertical.navbar-expand-lg~.navbar [class*=container]{padding-left:1.25rem;padding-right:1.25rem}.navbar-vertical.navbar-expand-lg .d-none-navbar-vertical,.navbar-vertical.navbar-expand-lg~* .d-none-navbar-vertical{display:none!important}.navbar-vertical.navbar-expand-lg .navbar-brand{display:flex;width:100%;margin:0;text-align:center;height:3.5rem;align-items:center;justify-content:center}.navbar-vertical.navbar-expand-lg .navbar-heading{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97;display:block;margin-bottom:.5rem}.navbar-vertical.navbar-expand-lg .navbar-collapse{flex-direction:column;text-align:left;align-items:normal;padding:1rem 1rem}.navbar-vertical.navbar-expand-lg .navbar-nav{flex-direction:column;align-items:normal;margin-left:-1rem;margin-right:-1rem}.navbar-vertical.navbar-expand-lg .navbar-nav .nav-link{min-height:0;height:2.5rem;padding-left:1rem;padding-right:1rem;justify-content:start}.navbar-vertical.navbar-expand-lg .navbar-nav .nav-item.active{font-weight:600}.navbar-vertical.navbar-expand-lg .navbar-nav .nav-item.active>.nav-link:before{left:0;right:auto;top:0;bottom:0;height:auto;width:2px}.navbar-vertical.navbar-expand-lg .navbar-side{margin-left:0;margin-top:auto;padding-left:0;padding-top:1rem}.navbar-vertical.navbar-expand-lg .navbar-side>*{margin-left:0;margin-top:1rem}.navbar-vertical.navbar-expand-lg.navbar-right{left:auto;right:0}.navbar-vertical.navbar-expand-lg.navbar-right~.content,.navbar-vertical.navbar-expand-lg.navbar-right~.navbar{margin-left:0;margin-right:15.625rem}.navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .d-none-navbar-vertical-wide,.navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow)~* .d-none-navbar-vertical-wide{display:none!important}.navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .nav-item.active>.dropdown-menu{display:block}.navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .dropdown-menu{position:static;background:inherit;border:0;box-shadow:none;padding:0;margin:0;color:inherit;-moz-columns:1;columns:1}.navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .dropdown-menu:after,.navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .dropdown-menu:before{content:none}.navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .dropdown-item{padding-left:2.5rem;opacity:.6;color:inherit;background:0 0}.navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .dropdown-item.active{font-weight:600;opacity:1}.navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .dropdown-item:hover{opacity:1}.navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .dropdown-toggle:after{margin-left:auto}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow{width:4rem;overflow:visible}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .d-none-navbar-vertical-narrow,.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow~* .d-none-navbar-vertical-narrow{display:none!important}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .navbar-nav{margin-top:0}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .nav-link{height:3rem}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .nav-link-title,.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .navbar-heading{display:none}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .nav-link-icon{margin:0 auto;font-size:1.125rem;width:1.125rem;height:1.125rem}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .navbar-brand-logo-large{display:none}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .navbar-brand-logo-small{display:inline-block}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow~.content,.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow~.navbar{margin-left:4rem}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .dropdown-toggle:after{content:none}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .dropdown-menu{left:100%;top:0;margin:0 0 0 -4px}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .dropdown-menu:after,.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .dropdown-menu:before{content:none}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .dropdown-menu.dropdown-menu-right{top:auto;bottom:0;right:auto}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow.navbar-right~.content,.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow.navbar-right~.navbar{margin-left:0;margin-right:4rem}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow.navbar-right .dropdown-menu{margin:0 -4px 0 0;left:auto;right:100%}}@media (max-width:63.98rem){.navbar-vertical.navbar-expand-lg .d-none-navbar-horizontal,.navbar-vertical.navbar-expand-lg~* .d-none-navbar-vertical-narrow{display:none!important}.navbar-vertical.navbar-expand-lg .dropdown-menu{margin-right:-.25rem}}@media (min-width:75.25rem){.navbar-vertical.navbar-expand-xl{position:fixed;left:0;top:0;bottom:0;width:15.625rem;z-index:1030;min-height:auto;align-items:start;overflow:auto}.navbar-vertical.navbar-expand-xl>[class*=container]{flex-direction:column;align-items:stretch;padding-left:0;padding-right:0;min-height:100%}.navbar-vertical.navbar-expand-xl~.content,.navbar-vertical.navbar-expand-xl~.navbar{margin-left:15.625rem}.navbar-vertical.navbar-expand-xl~.content [class*=container],.navbar-vertical.navbar-expand-xl~.navbar [class*=container]{padding-left:1.25rem;padding-right:1.25rem}.navbar-vertical.navbar-expand-xl .d-none-navbar-vertical,.navbar-vertical.navbar-expand-xl~* .d-none-navbar-vertical{display:none!important}.navbar-vertical.navbar-expand-xl .navbar-brand{display:flex;width:100%;margin:0;text-align:center;height:3.5rem;align-items:center;justify-content:center}.navbar-vertical.navbar-expand-xl .navbar-heading{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97;display:block;margin-bottom:.5rem}.navbar-vertical.navbar-expand-xl .navbar-collapse{flex-direction:column;text-align:left;align-items:normal;padding:1rem 1rem}.navbar-vertical.navbar-expand-xl .navbar-nav{flex-direction:column;align-items:normal;margin-left:-1rem;margin-right:-1rem}.navbar-vertical.navbar-expand-xl .navbar-nav .nav-link{min-height:0;height:2.5rem;padding-left:1rem;padding-right:1rem;justify-content:start}.navbar-vertical.navbar-expand-xl .navbar-nav .nav-item.active{font-weight:600}.navbar-vertical.navbar-expand-xl .navbar-nav .nav-item.active>.nav-link:before{left:0;right:auto;top:0;bottom:0;height:auto;width:2px}.navbar-vertical.navbar-expand-xl .navbar-side{margin-left:0;margin-top:auto;padding-left:0;padding-top:1rem}.navbar-vertical.navbar-expand-xl .navbar-side>*{margin-left:0;margin-top:1rem}.navbar-vertical.navbar-expand-xl.navbar-right{left:auto;right:0}.navbar-vertical.navbar-expand-xl.navbar-right~.content,.navbar-vertical.navbar-expand-xl.navbar-right~.navbar{margin-left:0;margin-right:15.625rem}.navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .d-none-navbar-vertical-wide,.navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow)~* .d-none-navbar-vertical-wide{display:none!important}.navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .nav-item.active>.dropdown-menu{display:block}.navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .dropdown-menu{position:static;background:inherit;border:0;box-shadow:none;padding:0;margin:0;color:inherit;-moz-columns:1;columns:1}.navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .dropdown-menu:after,.navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .dropdown-menu:before{content:none}.navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .dropdown-item{padding-left:2.5rem;opacity:.6;color:inherit;background:0 0}.navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .dropdown-item.active{font-weight:600;opacity:1}.navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .dropdown-item:hover{opacity:1}.navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .dropdown-toggle:after{margin-left:auto}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow{width:4rem;overflow:visible}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .d-none-navbar-vertical-narrow,.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow~* .d-none-navbar-vertical-narrow{display:none!important}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .navbar-nav{margin-top:0}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .nav-link{height:3rem}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .nav-link-title,.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .navbar-heading{display:none}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .nav-link-icon{margin:0 auto;font-size:1.125rem;width:1.125rem;height:1.125rem}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .navbar-brand-logo-large{display:none}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .navbar-brand-logo-small{display:inline-block}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow~.content,.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow~.navbar{margin-left:4rem}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .dropdown-toggle:after{content:none}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .dropdown-menu{left:100%;top:0;margin:0 0 0 -4px}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .dropdown-menu:after,.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .dropdown-menu:before{content:none}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .dropdown-menu.dropdown-menu-right{top:auto;bottom:0;right:auto}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow.navbar-right~.content,.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow.navbar-right~.navbar{margin-left:0;margin-right:4rem}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow.navbar-right .dropdown-menu{margin:0 -4px 0 0;left:auto;right:100%}}@media (max-width:75.23rem){.navbar-vertical.navbar-expand-xl .d-none-navbar-horizontal,.navbar-vertical.navbar-expand-xl~* .d-none-navbar-vertical-narrow{display:none!important}.navbar-vertical.navbar-expand-xl .dropdown-menu{margin-right:-.25rem}}.navbar-secondary{order:-1}.page{display:flex;flex-direction:column;position:relative;min-height:100vh}.content{padding-top:1.25rem;padding-bottom:1.25rem;flex:1;display:flex;flex-direction:column}.content>[class*=container]{flex:1}@media print{.content{margin:0!important}}.page-header{display:flex;align-items:center;min-height:2.25rem;margin:0 0 1.25rem}.page-header>*{flex:1}.page-pretitle{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97}.page-title{margin:0;font-size:1.375rem;font-weight:400;line-height:1;color:inherit}.footer{border-top:1px solid rgba(134,140,151,.24);background-color:#fff;padding:1rem 0;color:#868c97;margin-bottom:-1.25rem;margin-top:1.25rem}.footer-transparent{margin-top:0;background-color:transparent;border-top:0}.alert-avatar{padding-left:3.75rem}.alert-avatar .avatar{position:absolute;top:.5rem;left:.75rem}.alert a{display:inline-block;height:100%;vertical-align:middle}.alert a .icon{height:100%}.avatar{position:relative;width:2rem;height:2rem;font-size:.8125rem;display:inline-flex;align-items:center;justify-content:center;font-weight:400;color:#868c97;text-align:center;text-transform:uppercase;vertical-align:bottom;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:#f1f3f8 no-repeat center/cover;border-radius:50%}.avatar .icon{font-size:1.25em}.avatar .badge{position:absolute;right:0;bottom:0;border-radius:50%;box-shadow:0 0 0 2px #fff}a.avatar{cursor:pointer}.avatar-sm{width:1.25rem;height:1.25rem;font-size:.625rem;line-height:1.25rem}.avatar-md{width:2.5rem;height:2.5rem;font-size:1.25rem;line-height:2.5rem}.avatar-lg{width:4.5rem;height:4.5rem;font-size:2.25rem;line-height:4.5rem}.avatar-xl{width:6rem;height:6rem;font-size:3rem;line-height:6rem}.avatar-list{display:inline-flex;padding:0;margin:0 0 -.5rem}.avatar-list .avatar{margin-bottom:.5rem}.avatar-list .avatar:not(:last-child){margin-right:.5rem}.avatar-list a.avatar:hover{z-index:1}.avatar-list-stacked .avatar{margin-right:-.5rem!important;box-shadow:0 0 0 2px #fff}.card-footer .avatar-list-stacked .avatar{box-shadow:0 0 0 2px rgba(53,64,82,.024)}.avatar-upload{width:4rem;height:4rem;border:1px dashed rgba(134,140,151,.24);background:#fff;flex-direction:column;transition:.3s color,.3s background-color}.avatar-upload svg{width:1.5rem;height:1.5rem;stroke-width:1}.avatar-upload:hover{border-color:#206bc4;color:#206bc4;text-decoration:none}.avatar-upload-text{font-size:.6875rem;line-height:1;margin-top:.25rem}.badge{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;display:inline-flex;justify-content:center;padding:0 .5em;line-height:1.75em;background:#cbcfd6;overflow:hidden;vertical-align:text-bottom}a.badge{color:#fff}.badge:empty{display:inline-block;width:.5rem;height:.5rem;min-width:0;min-height:auto;padding:0;border-radius:50%}.badge-up{position:absolute;top:25%;right:0;min-width:1.75em;min-height:1.75em;padding:0 .25rem;line-height:1rem;background-clip:padding-box;transform:translate(0,-50%)}.badge-outline{background-color:transparent;border:1px solid currentColor}.badge-pill{border-radius:100px;min-width:1.75em}.badge-avatar{box-sizing:content-box;width:1.75em;margin:0 .5em 0 -.5em;color:rgba(245,247,251,.24);background:rgba(53,64,82,.24) no-repeat center/cover;vertical-align:text-bottom}.badge-addon{padding:0 .5rem;margin:0 -.5em 0 .5em;min-width:1.75em;background:rgba(53,64,82,.24);text-align:center;color:#fff;text-decoration:none}.breadcrumb{padding:0;margin:0;background:0 0}.breadcrumb-item.active a{color:inherit;pointer-events:none}.breadcrumb-dots .breadcrumb-item+.breadcrumb-item:before{content:"·"}.breadcrumb-arrows .breadcrumb-item+.breadcrumb-item:before{content:"›"}.breadcrumb-bullets .breadcrumb-item+.breadcrumb-item:before{content:"•"}.breadcrumb-alternate a{color:#868c97}.breadcrumb-alternate .breadcrumb-item.active{color:inherit}.btn{font-weight:600;display:inline-flex;align-items:center;justify-content:center}.btn:not([class^=btn-outline]):not([class*=" btn-outline"]):not([class^=btn-ghost]):not([class*=" btn-ghost"]):not(.btn-secondary){text-shadow:1px 1px 0 rgba(0,0,0,.02)}.btn:not([class^=btn-outline]):not([class*=" btn-outline"]):not([class^=btn-ghost]):not([class*=" btn-ghost"]):not(:focus):not(.focus){box-shadow:0 1px 3px 0 rgba(0,0,0,.05),inset 0 2px 0 -1px rgba(255,255,255,.1)}.btn:not([class^=btn-outline]):not([class*=" btn-outline"]):not([class^=btn-ghost]):not([class*=" btn-ghost"]) svg.icon{-webkit-filter:drop-shadow(1px 1px 0 rgba(0, 0, 0, .05));filter:drop-shadow(1px 1px 0 rgba(0, 0, 0, .05))}.btn.disabled,.btn:disabled{cursor:not-allowed}.btn .icon{margin:0 .25em 0 -.25em;font-size:1.2em;vertical-align:sub}.btn .avatar{width:1.25rem;height:1.25rem;vertical-align:text-top;margin:0 .5em 0 -.25em}.btn .icon-right{margin:0 -.25em 0 .5em}.btn svg.icon{width:1em;height:1em;stroke-width:1.75}.btn-secondary{color:#354052;background-color:#fff;border-color:rgba(134,140,151,.24);background-image:linear-gradient(-180deg,rgba(53,64,82,0),rgba(53,64,82,.04) 100%);box-shadow:none!important}.btn-secondary:hover{color:#354052;background-color:#ececec;border-color:rgba(108,114,126,.24)}.btn-secondary.focus,.btn-secondary:focus{color:#354052;background-color:#ececec;border-color:rgba(108,114,126,.24);box-shadow:0 0 0 .2rem rgba(88,97,112,.5)}.btn-secondary.active,.btn-secondary:active,.show>.btn-secondary.dropdown-toggle{color:#354052;background-color:#e6e6e6;border-color:rgba(102,108,119,.24)}.btn-secondary.active:focus,.btn-secondary:active:focus,.show>.btn-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(88,97,112,.5)}.btn-secondary.disabled,.btn-secondary:disabled{color:#354052;background-color:#fff;border-color:rgba(134,140,151,.24)}.btn-secondary.active{background:#206bc4;color:#fff;z-index:3!important}.btn-group-lg>.btn svg.icon,.btn-lg svg.icon{stroke-width:2}.btn-pill{padding-right:1.5em;padding-left:1.5em;border-radius:10rem}.btn-pill[class*=btn-icon]{padding:.375rem 15px}.btn-icon{min-width:calc(2.125rem + 2px)}.btn-group-sm>.btn-icon.btn,.btn-icon.btn-sm{min-width:calc(1.4416667rem + 2px)}.btn-icon .icon{margin:0 -1em}.btn-link{box-shadow:none!important}.btn-square{border-radius:0}.btn-list{display:flex;flex-wrap:wrap;margin-bottom:-.5rem!important;margin-right:-.5rem;line-height:1}.btn-list>.btn,.btn-list>.dropdown{margin:0 .5rem .5rem 0}.btn-list>.btn-block{flex:1;white-space:nowrap}.btn-options{display:flex;align-items:center;padding:0;color:#868c97;cursor:pointer;background:0 0;border:none}.btn-options:focus{outline:0}.btn-options .icon{width:1rem;height:1rem}.btn-floating{position:fixed;z-index:1030;bottom:1.5rem;right:1.5rem;border-radius:50%}.btn-loading{position:relative;color:transparent!important;text-shadow:none!important;pointer-events:none}.btn-loading:after{content:'';display:inline-block;vertical-align:text-bottom;border:1px solid currentColor;border-right-color:transparent;border-radius:50%;color:#fff;position:absolute;width:1rem;height:1rem;left:calc(50% - .5rem);top:calc(50% - .5rem);-webkit-animation:spinner-border .75s linear infinite;animation:spinner-border .75s linear infinite}.calendar{display:block;font-size:.8203125rem;border:1px solid rgba(134,140,151,.24);border-radius:3px}.calendar-nav{display:flex;align-items:center}.calendar-title{flex:1;text-align:center}.calendar-body,.calendar-header{display:flex;flex-wrap:wrap;justify-content:flex-start;padding:.5rem 0}.calendar-header{color:#868c97}.calendar-date{flex:0 0 14.2857143%;max-width:14.2857143%;padding:.2rem;text-align:center;border:0}.calendar-date.next-month,.calendar-date.prev-month{opacity:.25}.calendar-date .date-item{position:relative;display:inline-block;width:1.4rem;height:1.4rem;line-height:1.4rem;color:#66758c;text-align:center;text-decoration:none;white-space:nowrap;vertical-align:middle;cursor:pointer;background:0 0;border:1px solid transparent;border-radius:50%;outline:0;transition:background .3s,border .3s,box-shadow .32s,color .3s}.calendar-date .date-item:hover{color:#206bc4;text-decoration:none;background:#fefeff;border-color:rgba(134,140,151,.24)}.calendar-date .date-today{color:#206bc4;border-color:rgba(134,140,151,.24)}.calendar-range{position:relative}.calendar-range:before{position:absolute;top:50%;right:0;left:0;height:1.4rem;content:"";background:rgba(32,107,196,.1);transform:translateY(-50%)}.calendar-range.range-end .date-item,.calendar-range.range-start .date-item{color:#fff;background:#206bc4;border-color:#206bc4}.calendar-range.range-start:before{left:50%}.calendar-range.range-end:before{right:50%}.card{margin-bottom:1.25rem;box-shadow:rgba(53,64,82,.04) 0 2px 4px 0}@media (max-width:75.23rem){.card{margin-bottom:.75rem}}@media print{.card{border:none;box-shadow:none}}a.card{color:inherit;transition:.3s box-shadow}a.card:hover{text-decoration:none;box-shadow:rgba(53,64,82,.16) 0 2px 16px 0}.card-group{margin-bottom:1.5rem}.card-inactive{pointer-events:none;box-shadow:none}.card-inactive .card-body{opacity:.64}.card-active{position:relative;background-color:rgba(32,107,196,.03)}.card-active:before{position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;content:"";border:1px solid #206bc4;border-radius:inherit}.card-link{color:inherit}.card-link:hover{color:inherit;text-decoration:none;box-shadow:0 1px 6px 0 rgba(0,0,0,.08)}.card-btn{padding:1.25rem 1.25rem;text-align:center;background:rgba(32,107,196,.02);transition:.3s background}.card-btn:hover{text-decoration:none;background:rgba(32,107,196,.06)}.card-stacked{position:relative}.card-stacked:after{position:absolute;top:-5px;right:5px;left:5px;height:5px;content:"";background:#fff;border:1px solid rgba(134,140,151,.24);border-radius:3px 3px 0 0}.card-cover{position:relative;padding:1.25rem 1.25rem;background:#666 no-repeat center/cover}.card-cover:before{position:absolute;top:0;right:0;bottom:0;left:0;content:"";background:rgba(53,64,82,.24)}.card-cover:first-child,.card-cover:first-child:before{border-radius:3px 3px 0 0}.card-cover-blurred:before{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.card-actions{margin-left:auto;font-size:.8125rem}.card-actions a{text-decoration:none}.card-header{display:flex;align-items:center;background:0 0}.card-header-tabs{flex:1;margin:-1.25rem -1.25rem}.card-header-pills{flex:1}.card-footer{color:#868c97}.card-progress{height:.25rem}.card-progress:last-child{border-radius:0 0 2px 2px}.card-progress:first-child{border-radius:2px 2px 0 0}.card-meta{color:#868c97}.card-title{display:block;margin:0 0 1rem;font-size:1.125rem;font-weight:600;line-height:1.3333333}a.card-title:hover{color:inherit}.card-header .card-title{margin:.125rem 0}.card-subtitle{margin-top:-1.25rem;margin-bottom:.625rem;font-size:87.5%;color:#868c97}.card-body>:last-child{margin-bottom:0}.card-sm>.card-body{padding:.75rem}@media (min-width:48rem){.card-md>.card-body{padding:1.5rem}}@media (min-width:48rem){.card-lg>.card-body{padding:2rem}}@media (min-width:64rem){.card-lg>.card-body{padding:4rem}}@media print{.card-body{padding:0}}.card-body+.card-body{border-top:1px solid rgba(134,140,151,.24)}.card-body-scrollable{overflow:auto}.card-options{top:1.5rem;right:.75rem;display:flex;margin-left:auto}.card-options-link{display:inline-block;min-width:1rem;margin-left:.25rem;color:#868c97}.card-drop{line-height:1;color:#868c97}.card-drop .icon{width:1.5rem;height:1.5rem;stroke-width:1}.card-status-top{position:absolute;top:0;right:0;left:0;height:2px;border-radius:3px 3px 0 0}.card-status-left{position:absolute;right:auto;bottom:0;width:2px;height:100%;border-radius:3px 0 0 3px}.card-status-bottom{position:absolute;top:initial;bottom:0;width:100%;height:2px;border-radius:0 0 3px 3px}.card-table{margin-bottom:0}.card-table tr td:first-child,.card-table tr th:first-child{padding-left:1.25rem}.card-table tr td:last-child,.card-table tr th:last-child{padding-right:1.25rem}.card-table thead tr:first-child td,.card-table thead tr:first-child th{border-top:0}.card-table tbody tr:last-child td,.card-table tbody tr:last-child th{border-bottom:0}.card-body+.card-table{border-top:1px solid rgba(134,140,151,.24)}.card-code{padding:0}.card-code .highlight{margin:0;border:0}.card-code pre{margin:0;color:#fff;text-shadow:none;background:0 0}.card-chart{position:relative;z-index:1;height:3.5rem}.card-avatar{box-shadow:0 0 0 .5rem #fff}.card-body+.card-list-group{border-top:1px solid rgba(134,140,151,.24)}.card-list-group .list-group-item{padding-right:1.25rem;padding-left:1.25rem;border-right:0;border-left:0;border-radius:0}.card-list-group .list-group-item:last-child{border-bottom:0}.card-list-group .list-group-item:first-child{border-top:0}.card-tabs{margin-bottom:1.5rem}.card-tabs .nav-tabs{position:relative;z-index:1000;border-bottom:0}.card-tabs .nav-tabs .nav-link{background:rgba(53,64,82,.024);border:1px solid rgba(134,140,151,.24);border-bottom:0}.card-tabs .nav-tabs .nav-link.active,.card-tabs .nav-tabs .nav-link:active,.card-tabs .nav-tabs .nav-link:hover{border-color:rgba(134,140,151,.24)}.card-tabs .nav-tabs .nav-link.active{background:#fff}.card-tabs .nav-tabs .nav-item:not(:first-child) .nav-link{border-top-left-radius:0}.card-tabs .nav-tabs .nav-item:not(:last-child) .nav-link{border-top-right-radius:0}.card-tabs .nav-tabs .nav-item+.nav-item{margin-left:-1px}.card-tabs .nav-tabs-bottom{margin-bottom:0}.card-tabs .nav-tabs-bottom .nav-item{margin-top:-1px;margin-bottom:0}.card-tabs .nav-tabs-bottom .nav-item .nav-link{border-top-width:0;border-bottom:1px solid rgba(134,140,151,.24);border-top-left-radius:0;border-top-right-radius:0}.card-tabs .card{margin:0;border-top-left-radius:0}.close:focus{outline:0;color:#354052}.dropdown-menu{box-shadow:0 .5rem 1rem rgba(0,0,0,.15);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:0}.dropdown-menu.card{padding:0;min-width:25rem;display:none}.dropdown-menu.card.show{display:flex}.dropdown-item{min-width:14rem;color:inherit;display:flex;align-items:center;margin:0}.dropdown-item-icon{width:1rem;font-size:1rem;margin-right:.5rem;opacity:.64;text-align:center;stroke-width:2px}.dropdown-header{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97;padding-bottom:.25rem;pointer-events:none}.dropdown-menu-scrollable{height:auto;max-height:12rem;overflow-x:hidden}.dropdown-menu-columns{-moz-columns:2;columns:2;-moz-column-gap:0;column-gap:0}.dropdown-menu-columns .dropdown-item{display:inline-flex;min-width:10rem}.dropdown-menu-columns-2{-moz-columns:2;columns:2}.dropdown-menu-columns-3{-moz-columns:3;columns:3}.dropdown-menu-columns-4{-moz-columns:4;columns:4}.dropdown-menu-arrow{margin-top:.5rem}.dropdown-menu-arrow:before{content:"";position:absolute;top:-4px;left:12px;display:block;background:inherit;width:14px;height:14px;transform:rotate(45deg);transform-origin:center;border:1px solid;border-color:inherit;z-index:-1;clip:rect(0,9px,9px,0)}.dropdown-menu-arrow.dropdown-menu-right:before{right:12px;left:auto}.dropright>.dropdown-menu{margin-top:calc(-.5rem - 1px);margin-left:0}.dropright .dropdown-toggle:after{margin-left:auto}.dropdown-menu-card{padding:0}.dropdown-menu-card>.card{margin:0;border:0;box-shadow:none}.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:1rem;text-align:center}@media (min-width:48rem){.empty{padding:3rem}}.empty .empty-icon{margin:0 0 1rem;font-size:2rem;font-weight:400;line-height:1}.empty .empty-subtitle,.empty .empty-title{margin:0 0 .5rem}.empty .empty-action{margin-top:1.5rem}.empty-bordered{border:1px solid rgba(134,140,151,.24);border-radius:3px}.col-separator{border-left:1px solid rgba(134,140,151,.24)}.container-tight{width:100%;padding-right:1rem;padding-left:1rem;margin-right:auto;margin-left:auto;max-width:30rem}.container-narrow{width:100%;padding-right:1rem;padding-left:1rem;margin-right:auto;margin-left:auto;max-width:45rem}.row-0{margin-right:0;margin-left:0}.row-0>.col,.row-0>[class*=col-]{padding-right:0;padding-left:0}.row-0 .card{margin-bottom:0}.row-sm{margin-right:-.375rem;margin-left:-.375rem}.row-sm>.col,.row-sm>[class*=col-]{padding-right:.375rem;padding-left:.375rem}.row-sm .card{margin-bottom:.75rem}.row-md{margin-right:-1.5rem;margin-left:-1.5rem}.row-md>.col,.row-md>[class*=col-]{padding-right:1.5rem;padding-left:1.5rem}.row-md .card{margin-bottom:3rem}.row-lg{margin-right:-3rem;margin-left:-3rem}.row-lg>.col,.row-lg>[class*=col-]{padding-right:3rem;padding-left:3rem}.row-lg .card{margin-bottom:6rem}.row-deck>.col,.row-deck>[class*=col-]{display:flex;align-items:stretch}.row-deck>.col .card,.row-deck>[class*=col-] .card{flex:1 1 auto}.row-cards{margin-left:-.625rem;margin-right:-.625rem}.row-cards .row-cards{flex:1}.row-cards>*{padding-left:.625rem;padding-right:.625rem}@media (max-width:75.23rem){.row-cards{margin-left:-.375rem;margin-right:-.375rem}.row-cards>*{padding-left:.375rem;padding-right:.375rem}}.icon{width:1em;height:1em;font-size:1em;vertical-align:-.2em}.icon:hover{text-decoration:none}.icon-filled{fill:currentColor}.icon-thin{stroke-width:1.5}.icon-md{font-size:1.5rem}.icon-lg{font-size:2rem}.icon-xl{font-size:4rem}.icons-list{display:flex;flex-wrap:wrap;padding:0;margin:0 -2px -1px 0;list-style:none}.icons-list>li{flex:1 0 4rem}.icons-list-wrap{overflow:hidden}.icons-list-item{display:flex;align-items:center;justify-content:center;height:4rem;text-align:center;border-right:1px solid rgba(134,140,151,.24);border-bottom:1px solid rgba(134,140,151,.24)}.icons-list-item i{font-size:1.25rem}textarea[cols]{height:auto}.form-label{font-size:.9375rem;font-weight:600;display:block;margin-bottom:.5rem}.form-label-description{float:right;font-weight:400;color:#868c97;line-height:1.8285714;font-size:87.5%}.form-hint{display:block;font-size:87.5%;color:#868c97;line-height:1.3333334}.form-hint:last-child{margin-bottom:0}.form-hint+.form-control{margin-top:.25rem}.form-label+.form-hint{margin-top:-.5rem}.form-control+.form-hint,.form-select+.form-hint{margin-top:.25rem}.form-control:-webkit-autofill{box-shadow:0 0 0 1000px #fff inset}.form-control.disabled,.form-control:disabled{color:#868c97;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-control[size]{width:auto}.form-control-light{background-color:#f5f7fb;border-color:transparent}.form-control-rounded{border-radius:10rem}.form-control-flush{padding:0;background:0 0!important;border-color:transparent!important;resize:none;box-shadow:none!important;line-height:inherit}.form-footer{margin-top:2rem}.form-fieldset{padding:1rem;margin-bottom:1rem;background:rgba(53,64,82,.024);border:1px solid rgba(134,140,151,.24);border-radius:3px}.form-required{color:#fa4654}.form-help{display:inline-flex;font-weight:600;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;font-size:.75rem;color:#868c97;text-align:center;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:rgba(145,152,163,.1);border-radius:50%;transition:.3s background-color,.3s color}.form-help:hover,.form-help[aria-describedby]{color:#fff;background:#206bc4}.form-check{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-check.form-check-highlight .form-check-input:not(:checked)~.form-check-label{opacity:.64}.form-check-input{margin-top:.25rem}.form-switch .form-check-input{transition:.3s background-color,.3s background-position}.form-check-label{line-height:1.3333334;padding:.125rem 0}.form-check-description{color:#868c97;font-size:.8125rem;line-height:1.3333334}.input-group-prepend .input-group-text{border-right:0}.input-group-append .input-group-text{border-left:0}.input-group-link{font-size:.8125rem}.input-group-flat:focus-within{box-shadow:0 0 0 .2rem rgba(32,107,196,.25);border-radius:3px}.input-group-flat:focus-within .form-control,.input-group-flat:focus-within .input-group-text{border-color:#7aade9!important}.input-group-flat .form-control:focus{border-color:rgba(134,140,151,.24);box-shadow:none}.input-group-flat .form-control:not(:last-child){border-right:0}.input-group-flat .form-control:not(:first-child){border-left:0}.input-group-flat .input-group-prepend{margin-right:0;border-right:0;background:#fff}.input-group-flat .input-group-prepend .input-group-text{padding-right:0}.input-group-flat .input-group-append{margin-left:0}.input-group-flat .input-group-append:not(:last-child) .input-group-text{border-right:0}.input-group-flat .input-group-append .input-group-text{padding-left:0}.input-group-flat .input-group-text{background:0 0;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-file-button{margin-left:0;border-left:0}.input-icon{position:relative}.input-icon .form-control:not(:last-child){padding-right:2.5rem}.input-icon .form-control:not(:first-child){padding-left:2.5rem}.input-icon-addon{position:absolute;top:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;min-width:2.5rem;color:#868c97;pointer-events:none;font-size:1.2em}.input-icon-addon:last-child{right:0;left:auto}.form-colorinput{position:relative;display:inline-block;margin:0;line-height:1;cursor:pointer}.form-colorinput-input{position:absolute;z-index:-1;opacity:0}.form-colorinput-color{display:block;width:1.5rem;height:1.5rem;color:#fff;border:1px solid rgba(134,140,151,.24);border-radius:3px;box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}.form-colorinput-color:before{position:absolute;top:0;left:0;width:100%;height:100%;content:"";background:no-repeat center center/1rem;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6' transform='scale%28.8%29' transform-origin='50% 50%'/%3e%3c/svg%3e");opacity:0;transition:.3s opacity}.form-colorinput-input:checked~.form-colorinput-color:before{opacity:1}.form-colorinput-input:focus~.form-colorinput-color{border-color:#206bc4;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.form-colorinput-light .form-colorinput-color:before{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23354052' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6' transform='scale%28.8%29' transform-origin='50% 50%'/%3e%3c/svg%3e")}.form-imagecheck{position:relative;margin:0;cursor:pointer}.form-imagecheck-input{position:absolute;z-index:-1;opacity:0}.form-imagecheck-figure{position:relative;display:block;margin:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid rgba(134,140,151,.24);border-radius:3px}.form-imagecheck-input:focus~.form-imagecheck-figure{border-color:#206bc4;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.form-imagecheck-input:checked~.form-imagecheck-figure{border-color:rgba(134,140,151,.24)}.form-imagecheck-figure:before{position:absolute;top:.25rem;left:.25rem;z-index:1;display:block;width:1rem;height:1rem;color:#fff;pointer-events:none;content:"";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:#fff;border:1px solid rgba(134,140,151,.24);border-radius:3px;transition:.3s opacity}.form-imagecheck-input:checked~.form-imagecheck-figure:before{background-color:#206bc4;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6' transform='scale%28.8%29' transform-origin='50% 50%'/%3e%3c/svg%3e");background-repeat:repeat;background-position:center center;background-size:1rem;border-color:rgba(134,140,151,.24)}.form-imagecheck-image{max-width:100%;display:block;opacity:.64;transition:.3s opacity}.form-imagecheck-image:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.form-imagecheck-image:last-child{border-bottom-right-radius:2px;border-bottom-left-radius:2px}.form-imagecheck-input:checked~.form-imagecheck-figure .form-imagecheck-image,.form-imagecheck-input:focus~.form-imagecheck-figure .form-imagecheck-image,.form-imagecheck:hover .form-imagecheck-image{opacity:1}.form-imagecheck-caption{padding:.25rem;font-size:.8203125rem;color:#868c97;text-align:center;transition:.3s color}.form-imagecheck-input:checked~.form-imagecheck-figure .form-imagecheck-caption,.form-imagecheck-input:focus~.form-imagecheck-figure .form-imagecheck-caption,.form-imagecheck:hover .form-imagecheck-caption{color:#354052}.form-selectgroup{display:inline-flex;margin:0 -.5rem -.5rem 0;flex-wrap:wrap}.form-selectgroup .form-selectgroup-item{margin:0 .5rem .5rem 0}.form-selectgroup-vertical{flex-direction:column}.form-selectgroup-item{display:block;position:relative}.form-selectgroup-input{position:absolute;top:0;left:0;z-index:-1;opacity:0}.form-selectgroup-box{position:relative;display:block;min-width:calc(1.4666667em + .75rem + 2px);padding:.375rem .75rem;font-size:.9375rem;line-height:1.4666667;color:#868c97;background:#fff;text-align:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid rgba(134,140,151,.24);border-radius:3px;transition:border-color .3s,background .3s,color .3s}.form-selectgroup-box .icon:only-child{margin:0 -.25rem}.form-selectgroup-box:hover{color:#354052}.form-selectgroup-check{display:inline-block;width:1rem;height:1rem;border:1px solid rgba(134,140,151,.24);vertical-align:middle}.form-selectgroup-input[type=checkbox]+.form-selectgroup-box .form-selectgroup-check{border-radius:3px}.form-selectgroup-input[type=radio]+.form-selectgroup-box .form-selectgroup-check{border-radius:50%}.form-selectgroup-input:checked+.form-selectgroup-box .form-selectgroup-check{background-color:#206bc4;background-repeat:repeat;background-position:center center;background-size:1rem;border-color:rgba(134,140,151,.24)}.form-selectgroup-input[type=checkbox]:checked+.form-selectgroup-box .form-selectgroup-check{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6' transform='scale%28.8%29' transform-origin='50% 50%'/%3e%3c/svg%3e")}.form-selectgroup-input[type=radio]:checked+.form-selectgroup-box .form-selectgroup-check{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3' fill='%23ffffff' cx='8' cy='8' /%3e%3c/svg%3e")}.form-selectgroup-input:checked+.form-selectgroup-box{z-index:1;color:#206bc4;background:rgba(32,107,196,.04);border-color:#7aade9;box-shadow:0 1px 1px 0 rgba(32,107,196,.2)}.form-selectgroup-input:focus+.form-selectgroup-box{z-index:2;color:#206bc4;border-color:#7aade9;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.form-selectgroup-box-content{line-height:1.3333334}.form-selectgroup-boxes .form-selectgroup-box{text-align:left;padding:1.25rem 1.25rem;color:inherit}.form-selectgroup-boxes .form-selectgroup-input:checked+.form-selectgroup-box{color:inherit}.form-selectgroup-boxes .form-selectgroup-input:checked+.form-selectgroup-box .form-selectgroup-title{color:#206bc4}.form-selectgroup-boxes .form-selectgroup-input:checked+.form-selectgroup-box .form-selectgroup-box-content{opacity:1}.form-selectgroup-pills{flex-wrap:wrap;align-items:flex-start}.form-selectgroup-pills .form-selectgroup-item{flex-grow:0}.form-selectgroup-pills .form-selectgroup-box{border-radius:50px}.form-control-color::-webkit-color-swatch{border:none}[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.form-control.is-invalid-lite,.form-control.is-valid-lite{border-color:rgba(134,140,151,.24)}.legend{display:inline-block;background:#e9ecf1;width:.75em;height:.75em;border-radius:3px}.list-item{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word}.list-item-actions{margin-left:auto}.list-bordered .list-item,.list-row .list-item{border-top:1px solid rgba(134,140,151,.24);margin-top:-1px}.list-bordered .list-item:first-child,.list-row .list-item:first-child{border-top:none}.list-hoverable .list-item-actions{opacity:0;transition:.3s opacity}.list-hoverable .list-item-actions.show,.list-hoverable .list-item:hover .list-item-actions{opacity:1}.list-row .list-item{flex-direction:row;align-items:center;padding:.5rem .625rem}.list-row .list-item>*{padding-left:.625rem;padding-right:.625rem}.list-timeline{position:relative;padding:0;margin:0;list-style:none}.list-timeline>li{position:relative;margin-bottom:1.5rem}.list-timeline>li:last-child{margin-bottom:0}.list-timeline-time{float:right;margin-left:1rem;color:#868c97}.list-timeline-icon{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;color:#fff;text-align:center;background:#868c97;border-radius:50%}.list-timeline-icon .icon{width:1rem;height:1rem}.list-timeline-title{margin:0;font-weight:600}.list-timeline-content{margin-left:3.5rem}@media screen and (min-width:768px){.list-timeline:not(.list-timeline-simple):before{position:absolute;top:0;bottom:0;left:calc(7.5rem + 2px);z-index:1;display:block;width:4px;content:"";background-color:#f5f7fb}.list-timeline:not(.list-timeline-simple)>li{z-index:2;min-height:40px}.list-timeline:not(.list-timeline-simple) .list-timeline-time{position:absolute;top:.5rem;left:0;width:5.5rem;margin:0;text-align:right}.list-timeline:not(.list-timeline-simple) .list-timeline-icon{top:0;left:6.5rem}.list-timeline:not(.list-timeline-simple) .list-timeline-content{padding:.625rem 0 0 10rem;margin:0}}.list-group-transparent{margin:0 -.75rem}.list-group-transparent .list-group-item{background:0 0;border:0;border-radius:3px}.list-group-transparent .list-group-item .icon{color:#868c97}.list-group-transparent .list-group-item.active{font-weight:600;color:inherit;background:rgba(32,107,196,.06)}.list-group-transparent .list-group-item.active .icon{color:inherit}.list-separated-item{padding:1rem 0}.list-separated-item:first-child{padding-top:0}.list-separated-item:last-child{padding-bottom:0}.list-separated-item+.list-separated-item{border-top:1px solid rgba(134,140,151,.24)}.list-inline-dots .list-inline-item+.list-inline-item:before{content:'· ';margin-right:.5rem}@-webkit-keyframes loader{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes loader{from{transform:rotate(0)}to{transform:rotate(360deg)}}.loader{position:relative;display:block;width:2.5rem;height:2.5rem;color:#206bc4;vertical-align:middle}.loader:after{position:absolute;top:0;left:0;width:100%;height:100%;content:"";border:1px solid;border-color:transparent;border-top-color:currentColor;border-left-color:currentColor;border-radius:50%;-webkit-animation:loader .6s linear;animation:loader .6s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.dimmer{position:relative}.dimmer .loader{position:absolute;top:50%;right:0;left:0;display:none;margin:0 auto;transform:translateY(-50%)}.dimmer.active .loader{display:block}.dimmer.active .dimmer-content{pointer-events:none;opacity:.1}.modal-content .close{position:absolute;top:0;right:0;font-size:1rem;width:3.5rem;height:3.5rem;margin:0;padding:0;z-index:10}.modal-body::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.modal-body::-webkit-scrollbar-thumb{border-radius:5px;background:#dee1e7}.modal-body::-webkit-scrollbar-corner{background:0 0}.modal-body:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#cbcfd6}.modal-body .modal-title{margin-bottom:1rem}.modal-body+.modal-body{border-top:1px solid rgba(134,140,151,.12)}.modal-header{align-items:center;min-height:3.5rem;background:#fff;padding:0 3.5rem 0 1.5rem}.modal-title{font-size:1.125rem;font-weight:600;line-height:1.3333333}.modal-footer{padding-top:0;padding-bottom:.75rem}.modal-blur{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-full-width{max-width:none;margin:0 .5rem}.nav-tabs .icon{color:#868c97}.nav-tabs .nav-link{padding:.75rem 1.25rem;line-height:20px;color:#868c97;cursor:pointer;background:0 0;border:none;border-bottom:1px solid transparent;transition:.3s color,.3s border-color}.nav-tabs .nav-link:hover{color:#354052;border-color:transparent}.nav-tabs .nav-link.disabled{color:rgba(134,140,151,.2)}.nav-tabs .nav-link.active{color:#354052;background:inherit;border-color:transparent;border-bottom-color:#206bc4}.nav-tabs-alt .nav-link{font-size:13px;font-weight:600;text-transform:uppercase}.nav-icon{line-height:1;margin-right:.25rem}.nav-icon .icon{display:block;stroke-width:1.5}.nav-link{display:flex;align-items:center;transition:.3s color}.stars{display:inline-flex;color:#dee1e7;font-size:.8125rem}.stars .star:not(:first-child){margin-left:.25rem}.pagination{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.page-link{min-width:1.5rem;border-radius:3px}.page-link:hover{background:0 0}.page-item{text-align:center}.page-item.page-next,.page-item.page-prev{flex:0 0 50%;text-align:left}.page-item.page-next{margin-left:auto;text-align:right}.page-item-subtitle{margin-bottom:2px;font-size:12px;color:#868c97;text-transform:uppercase}.page-item.disabled .page-item-subtitle{color:rgba(134,140,151,.5)}.page-item-title{font-size:1.125rem;font-weight:400;color:#354052}.page-link:hover .page-item-title{color:#206bc4}.page-item.disabled .page-item-title{color:rgba(134,140,151,.5)}@-webkit-keyframes progress-indeterminate{0%{right:100%;left:-35%}100%,60%{right:-90%;left:100%}}@keyframes progress-indeterminate{0%{right:100%;left:-35%}100%,60%{right:-90%;left:100%}}.progress{position:relative;width:100%;line-height:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress::-webkit-progress-bar{background:#f5f7fb}.progress::-webkit-progress-value{background-color:#206bc4}.progress::-moz-progress-bar{background-color:#206bc4}.progress::-ms-fill{background-color:#206bc4;border:none}.progress-sm{height:.25rem}.progress-bar{height:100%}.progress-bar-indeterminate:after,.progress-bar-indeterminate:before{position:absolute;top:0;bottom:0;left:0;content:"";background-color:inherit;will-change:left,right}.progress-bar-indeterminate:before{-webkit-animation:progress-indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite;animation:progress-indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite}.ribbon{position:absolute;top:.75rem;right:-.25rem;z-index:1;padding:.25rem .75rem;font-size:.6875rem;font-weight:600;line-height:1.5rem;color:#fff;text-align:center;text-transform:uppercase;background:#206bc4;border-color:#206bc4}.ribbon:before{position:absolute;right:0;bottom:100%;width:0;height:0;content:"";-webkit-filter:brightness(70%);filter:brightness(70%);border:.125rem solid;border-color:inherit;border-top-color:transparent;border-right-color:transparent}.ribbon.bg-blue{border-color:#206bc4}.ribbon.bg-blue-lt{border-color:#d2e1f3!important}.ribbon.bg-azure{border-color:#45aaf2}.ribbon.bg-azure-lt{border-color:#daeefc!important}.ribbon.bg-indigo{border-color:#6574cd}.ribbon.bg-indigo-lt{border-color:#e0e3f5!important}.ribbon.bg-purple{border-color:#a55eea}.ribbon.bg-purple-lt{border-color:#eddffb!important}.ribbon.bg-pink{border-color:#f66d9b}.ribbon.bg-pink-lt{border-color:#fde2eb!important}.ribbon.bg-red{border-color:#fa4654}.ribbon.bg-red-lt{border-color:#fedadd!important}.ribbon.bg-orange{border-color:#ff922b}.ribbon.bg-orange-lt{border-color:#ffe9d5!important}.ribbon.bg-yellow{border-color:#fab005}.ribbon.bg-yellow-lt{border-color:#feefcd!important}.ribbon.bg-lime{border-color:#94d82d}.ribbon.bg-lime-lt{border-color:#eaf7d5!important}.ribbon.bg-green{border-color:#5eba00}.ribbon.bg-green-lt{border-color:#dff1cc!important}.ribbon.bg-teal{border-color:#2bcbba}.ribbon.bg-teal-lt{border-color:#d5f5f1!important}.ribbon.bg-cyan{border-color:#17a2b8}.ribbon.bg-cyan-lt{border-color:#d1ecf1!important}.ribbon.bg-white{border-color:#fff}.ribbon.bg-white-lt{border-color:#fff!important}.ribbon.bg-gray{border-color:#a8aeb7}.ribbon.bg-gray-lt{border-color:#eeeff1!important}.ribbon.bg-gray-dark{border-color:#545d6d}.ribbon.bg-gray-dark-lt{border-color:#dddfe2!important}.ribbon.bg-dark{border-color:#354052}.ribbon.bg-dark-lt{border-color:#d7d9dc!important}.ribbon .icon{width:1rem;height:1rem}.ribbon-top{top:-.25rem;right:.75rem;width:2rem;padding:.25rem 0}.ribbon-top:before{top:0;right:100%;bottom:auto;border-color:inherit;border-top-color:transparent;border-left-color:transparent}.ribbon-top.ribbon-left{right:auto;left:.75rem}.ribbon-top.ribbon-left:before{top:0;right:100%;left:auto}.ribbon-left{right:auto;left:-.25rem}.ribbon-left:before{top:auto;bottom:100%;left:0;border-color:inherit;border-top-color:transparent;border-left-color:transparent}.ribbon-bottom{top:auto;bottom:.75rem}.ribbon-bookmark{padding-left:.25rem}.ribbon-bookmark:after{position:absolute;top:0;right:100%;display:block;width:0;height:0;content:"";border:1rem solid;border-color:inherit;border-right-width:0;border-left-color:transparent;border-left-width:.5rem}.ribbon-bookmark.ribbon-left{padding-right:.5rem;padding-left:.5rem}.ribbon-bookmark.ribbon-left:after{right:auto;left:100%;border-right-color:transparent;border-right-width:.5rem;border-left-width:0}.ribbon-bookmark.ribbon-top{padding-right:0;padding-bottom:.25rem;padding-left:0}.ribbon-bookmark.ribbon-top:after{top:100%;right:0;left:0;border-color:inherit;border-width:1rem;border-top-width:0;border-bottom-color:transparent;border-bottom-width:.5rem}.stamp{display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;height:2.5rem;line-height:2.5rem;padding:0 .25rem;font-size:.9375rem;font-weight:600;color:#868c97;text-align:center;background:#f1f3f8;border-radius:3px}.stamp .icon{font-size:1.25rem;vertical-align:middle}.steps{display:flex;flex-wrap:nowrap;width:100%;padding:0;margin:2rem 0;list-style:none}.steps .step-item{padding-top:calc(.5rem + 4px)}.steps .step-item:after{top:calc(.25rem + 2px);height:2px}.steps .step-item:before{width:.5rem;height:.5rem}.steps .step-item:after,.steps .step-item:before{color:#fff;background:#206bc4}.steps .step-item.active:before{color:inherit;border-color:#206bc4}.steps-blue .step-item:after,.steps-blue .step-item:before{color:#fff;background:#206bc4}.steps-blue .step-item.active:before{color:inherit;border-color:#206bc4}.steps-azure .step-item:after,.steps-azure .step-item:before{color:#fff;background:#45aaf2}.steps-azure .step-item.active:before{color:inherit;border-color:#45aaf2}.steps-indigo .step-item:after,.steps-indigo .step-item:before{color:#fff;background:#6574cd}.steps-indigo .step-item.active:before{color:inherit;border-color:#6574cd}.steps-purple .step-item:after,.steps-purple .step-item:before{color:#fff;background:#a55eea}.steps-purple .step-item.active:before{color:inherit;border-color:#a55eea}.steps-pink .step-item:after,.steps-pink .step-item:before{color:#fff;background:#f66d9b}.steps-pink .step-item.active:before{color:inherit;border-color:#f66d9b}.steps-red .step-item:after,.steps-red .step-item:before{color:#fff;background:#fa4654}.steps-red .step-item.active:before{color:inherit;border-color:#fa4654}.steps-orange .step-item:after,.steps-orange .step-item:before{color:#fff;background:#ff922b}.steps-orange .step-item.active:before{color:inherit;border-color:#ff922b}.steps-yellow .step-item:after,.steps-yellow .step-item:before{color:#fff;background:#fab005}.steps-yellow .step-item.active:before{color:inherit;border-color:#fab005}.steps-lime .step-item:after,.steps-lime .step-item:before{color:#fff;background:#94d82d}.steps-lime .step-item.active:before{color:inherit;border-color:#94d82d}.steps-green .step-item:after,.steps-green .step-item:before{color:#fff;background:#5eba00}.steps-green .step-item.active:before{color:inherit;border-color:#5eba00}.steps-teal .step-item:after,.steps-teal .step-item:before{color:#fff;background:#2bcbba}.steps-teal .step-item.active:before{color:inherit;border-color:#2bcbba}.steps-cyan .step-item:after,.steps-cyan .step-item:before{color:#fff;background:#17a2b8}.steps-cyan .step-item.active:before{color:inherit;border-color:#17a2b8}.steps-white .step-item:after,.steps-white .step-item:before{color:#fff;background:#fff}.steps-white .step-item.active:before{color:inherit;border-color:#fff}.steps-gray .step-item:after,.steps-gray .step-item:before{color:#fff;background:#a8aeb7}.steps-gray .step-item.active:before{color:inherit;border-color:#a8aeb7}.steps-gray-dark .step-item:after,.steps-gray-dark .step-item:before{color:#fff;background:#545d6d}.steps-gray-dark .step-item.active:before{color:inherit;border-color:#545d6d}.steps-dark .step-item:after,.steps-dark .step-item:before{color:#fff;background:#354052}.steps-dark .step-item.active:before{color:inherit;border-color:#354052}.step-item{position:relative;flex:1 1 0;min-height:1rem;margin-top:0;color:inherit;text-align:center;cursor:default}a.step-item{cursor:pointer}a.step-item:hover{color:inherit}.step-item:not(:first-child):after{position:absolute;left:-50%;width:100%;content:"";transform:translateY(-50%)}.step-item:before{position:absolute;top:0;left:50%;z-index:1;box-sizing:content-box;display:block;content:"";border:2px solid #fff;border-radius:50%;transform:translateX(-50%)}.step-item.active{font-weight:600}.step-item.active:before{background:#fff}.step-item.active~.step-item{color:#868c97}.step-item.active~.step-item:after,.step-item.active~.step-item:before{background:#f3f5f5}.step-item.active~.step-item:before{color:#868c97!important}.steps-counter{counter-reset:steps}.steps-counter .step-item{padding-top:calc(1.5rem + 4px)}.steps-counter .step-item:after{top:calc(.75rem + 2px);height:2px}.steps-counter .step-item:before{width:1.5rem;height:1.5rem}.steps-counter .step-item{counter-increment:steps}.steps-counter .step-item:before{font-size:1rem;line-height:1.5rem;content:counter(steps)}.steps-counter .step-item.active~.step-item:before{background:#fff}.markdown>table,.table{color:inherit}.markdown>table thead th,.table thead th{background:rgba(53,64,82,.024);border-width:1px;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97;padding-top:.5rem;padding-bottom:.5rem}@media print{.markdown>table thead th,.table thead th{background:0 0}}.markdown>table th,.table th{color:#868c97}.table-nowrap td,.table-nowrap th{white-space:nowrap}.table-md td,.table-md th{padding:.5rem}.table-vcenter td,.table-vcenter th{vertical-align:middle}.table-center td,.table-center th{text-align:center}.td-truncate{max-width:1px;width:100%}@media (max-width:32.98rem){.table-mobile{display:block}.table-mobile thead{display:none}.table-mobile tbody,.table-mobile tr{display:flex;flex-direction:column}.table-mobile td{display:block;padding:.5rem!important;border:none;color:#354052!important}.table-mobile td[data-label]:before{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97;content:attr(data-label);display:block}.table-mobile tr{border-bottom:1px solid rgba(134,140,151,.24)}.table-mobile .btn{display:block}}@media (max-width:47.98rem){.table-mobile-sm{display:block}.table-mobile-sm thead{display:none}.table-mobile-sm tbody,.table-mobile-sm tr{display:flex;flex-direction:column}.table-mobile-sm td{display:block;padding:.5rem!important;border:none;color:#354052!important}.table-mobile-sm td[data-label]:before{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97;content:attr(data-label);display:block}.table-mobile-sm tr{border-bottom:1px solid rgba(134,140,151,.24)}.table-mobile-sm .btn{display:block}}@media (max-width:63.98rem){.table-mobile-md{display:block}.table-mobile-md thead{display:none}.table-mobile-md tbody,.table-mobile-md tr{display:flex;flex-direction:column}.table-mobile-md td{display:block;padding:.5rem!important;border:none;color:#354052!important}.table-mobile-md td[data-label]:before{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97;content:attr(data-label);display:block}.table-mobile-md tr{border-bottom:1px solid rgba(134,140,151,.24)}.table-mobile-md .btn{display:block}}@media (max-width:75.23rem){.table-mobile-lg{display:block}.table-mobile-lg thead{display:none}.table-mobile-lg tbody,.table-mobile-lg tr{display:flex;flex-direction:column}.table-mobile-lg td{display:block;padding:.5rem!important;border:none;color:#354052!important}.table-mobile-lg td[data-label]:before{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97;content:attr(data-label);display:block}.table-mobile-lg tr{border-bottom:1px solid rgba(134,140,151,.24)}.table-mobile-lg .btn{display:block}}.table-mobile-xl{display:block}.table-mobile-xl thead{display:none}.table-mobile-xl tbody,.table-mobile-xl tr{display:flex;flex-direction:column}.table-mobile-xl td{display:block;padding:.5rem!important;border:none;color:#354052!important}.table-mobile-xl td[data-label]:before{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97;content:attr(data-label);display:block}.table-mobile-xl tr{border-bottom:1px solid rgba(134,140,151,.24)}.table-mobile-xl .btn{display:block}.toast-header{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.toast button[data-dismiss=toast]{outline:0}.toolbar{display:flex;flex-wrap:nowrap;flex-shrink:0;margin:0 -.5rem}.toolbar>*{margin:0 .5rem}.hr-text{display:flex;align-items:center;margin:2rem 0;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97;height:1px}.hr-text:after,.hr-text:before{flex:1 1 auto;height:1px;background-color:currentColor;opacity:.1}.hr-text:before{content:"";margin-right:.5rem}.hr-text:after{content:"";margin-left:.5rem}.hr-text>:first-child{padding-right:.5rem;padding-left:0;color:#868c97}.hr-text.hr-text-left:before{content:none}.hr-text.hr-text-left>:first-child{padding-right:.5rem;padding-left:.5rem}.hr-text.hr-text-right:before{content:""}.hr-text.hr-text-right:after{content:none}.hr-text.hr-text-right>:first-child{padding-right:0;padding-left:.5rem}.card>.hr-text{margin:0}.hr-text-spaceless{margin:-.5rem 0}.lead{line-height:1.4}a{-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}.h1 a,.h2 a,.h3 a,.h4 a,.h5 a,.h6 a,h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:inherit}.strong,b,strong{font-weight:600}blockquote{padding-left:1rem;color:#868c97;border-left:2px solid rgba(134,140,151,.24)}blockquote p{margin-bottom:1rem}blockquote cite{display:block;text-align:right}blockquote cite:before{content:"— "}.hr,hr{margin:2rem 0}dl dd:last-child{margin-bottom:0}code{padding:2px 4px;background:rgba(32,107,196,.03);border:1px solid rgba(32,107,196,.064);border-radius:3px}pre{padding:1rem;overflow:auto;font-size:.6875rem;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;line-height:1.6;-moz-tab-size:3;-o-tab-size:3;tab-size:3;border-radius:3px;white-space:pre-wrap}pre code{padding:0;background:0 0;border:none;border-radius:0}img{max-width:100%}::-moz-selection{color:#fff;background-color:#307fdd}::selection{color:#fff;background-color:#307fdd}[class*=" link-"].disabled,[class^=link-].disabled{color:#a8aeb7;pointer-events:none}.subheader{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97}@media (min-width:48rem){.markdown{font-size:1rem}}.markdown>:first-child{margin-top:0}.markdown>:last-child,.markdown>:last-child .highlight{margin-bottom:0}.markdown>.h1,.markdown>.h2,.markdown>.h3,.markdown>.h4,.markdown>.h5,.markdown>.h6,.markdown>h1,.markdown>h2,.markdown>h3,.markdown>h4,.markdown>h5,.markdown>h6{margin-top:2rem}.markdown>.h2,.markdown>h2{margin-bottom:1rem}.markdown>.h2:before,.markdown>h2:before{content:'';padding-top:1em;margin-top:-1em;display:block}@media (min-width:48rem){.markdown>.hr,.markdown>hr{margin-top:3em;margin-bottom:3em}}.chart{display:block;min-height:10rem}.chart text{font-family:inherit}.chart-sm{height:2.5rem}.chart-lg{height:15rem}.chart-square{height:5.75rem}.chart-sparkline{position:relative;width:4rem;height:2.5rem;line-height:1}.chart-sparkline-square{width:2.5rem}.chart-sparkline-wide{width:6rem}.chart-sparkline-label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:.6875rem}.chart-sparkline-label .icon{width:1rem;height:1rem}.bg-white-overlay{color:#fff;background-color:rgba(245,247,251,.24)}.bg-dark-overlay{color:#fff;background-color:rgba(53,64,82,.24)}.bg-cover{background-repeat:no-repeat;background-size:cover;background-position:center}.bg-facebook{color:#fff!important;background:#3b5998!important}.text-facebook{color:#3b5998!important}.bg-twitter{color:#fff!important;background:#1da1f2!important}.text-twitter{color:#1da1f2!important}.bg-google{color:#fff!important;background:#dc4e41!important}.text-google{color:#dc4e41!important}.bg-youtube{color:#fff!important;background:red!important}.text-youtube{color:red!important}.bg-vimeo{color:#fff!important;background:#1ab7ea!important}.text-vimeo{color:#1ab7ea!important}.bg-dribbble{color:#fff!important;background:#ea4c89!important}.text-dribbble{color:#ea4c89!important}.bg-github{color:#fff!important;background:#181717!important}.text-github{color:#181717!important}.bg-instagram{color:#fff!important;background:#e4405f!important}.text-instagram{color:#e4405f!important}.bg-pinterest{color:#fff!important;background:#bd081c!important}.text-pinterest{color:#bd081c!important}.bg-vk{color:#fff!important;background:#6383a8!important}.text-vk{color:#6383a8!important}.bg-rss{color:#fff!important;background:orange!important}.text-rss{color:orange!important}.bg-flickr{color:#fff!important;background:#0063dc!important}.text-flickr{color:#0063dc!important}.bg-bitbucket{color:#fff!important;background:#0052cc!important}.text-bitbucket{color:#0052cc!important}.bg-tabler{color:#fff!important;background:#206bc4!important}.text-tabler{color:#206bc4!important}.bg-blue{background:#206bc4}.text-blue{color:#206bc4!important}.bg-blue-lt{color:#206bc4!important;background:#d2e1f3!important}.bg-azure{background:#45aaf2}.text-azure{color:#45aaf2!important}.bg-azure-lt{color:#45aaf2!important;background:#daeefc!important}.bg-indigo{background:#6574cd}.text-indigo{color:#6574cd!important}.bg-indigo-lt{color:#6574cd!important;background:#e0e3f5!important}.bg-purple{background:#a55eea}.text-purple{color:#a55eea!important}.bg-purple-lt{color:#a55eea!important;background:#eddffb!important}.bg-pink{background:#f66d9b}.text-pink{color:#f66d9b!important}.bg-pink-lt{color:#f66d9b!important;background:#fde2eb!important}.bg-red{background:#fa4654}.text-red{color:#fa4654!important}.bg-red-lt{color:#fa4654!important;background:#fedadd!important}.bg-orange{background:#ff922b}.text-orange{color:#ff922b!important}.bg-orange-lt{color:#ff922b!important;background:#ffe9d5!important}.bg-yellow{background:#fab005}.text-yellow{color:#fab005!important}.bg-yellow-lt{color:#fab005!important;background:#feefcd!important}.bg-lime{background:#94d82d}.text-lime{color:#94d82d!important}.bg-lime-lt{color:#94d82d!important;background:#eaf7d5!important}.bg-green{background:#5eba00}.text-green{color:#5eba00!important}.bg-green-lt{color:#5eba00!important;background:#dff1cc!important}.bg-teal{background:#2bcbba}.text-teal{color:#2bcbba!important}.bg-teal-lt{color:#2bcbba!important;background:#d5f5f1!important}.bg-cyan{background:#17a2b8}.text-cyan{color:#17a2b8!important}.bg-cyan-lt{color:#17a2b8!important;background:#d1ecf1!important}.bg-white{background:#fff}.text-white{color:#fff!important}.bg-white-lt{color:#fff!important;background:#fff!important}.bg-gray{background:#a8aeb7}.text-gray{color:#a8aeb7!important}.bg-gray-lt{color:#a8aeb7!important;background:#eeeff1!important}.bg-gray-dark{background:#545d6d}.text-gray-dark{color:#545d6d!important}.bg-gray-dark-lt{color:#545d6d!important;background:#dddfe2!important}.bg-dark{background:#354052}.text-dark{color:#354052!important}.bg-dark-lt{color:#354052!important;background:#d7d9dc!important}.scrollable{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.scrollable.hover{overflow-y:hidden}.scrollable.hover>*{margin-top:-1px}.scrollable.hover:active,.scrollable.hover:focus,.scrollable.hover:hover{overflow:visible;overflow-y:auto}.touch .scrollable{overflow-y:auto!important}.scroll-x,.scroll-y{overflow:hidden;-webkit-overflow-scrolling:touch}.scroll-y{overflow-y:auto}.scroll-x{overflow-x:auto}.no-scroll{overflow:hidden}.w-0{width:0!important}.h-0{height:0!important}.w-1{width:.25rem!important}.h-1{height:.25rem!important}.w-2{width:.5rem!important}.h-2{height:.5rem!important}.w-3{width:1rem!important}.h-3{height:1rem!important}.w-4{width:1.25rem!important}.h-4{height:1.25rem!important}.w-5{width:2rem!important}.h-5{height:2rem!important}.w-6{width:3rem!important}.h-6{height:3rem!important}.w-7{width:6rem!important}.h-7{height:6rem!important}.w-8{width:9rem!important}.h-8{height:9rem!important}.w-auto{width:auto!important}.h-auto{height:auto!important}.w-px{width:1px!important}.h-px{height:1px!important}.w-full{width:100%!important}.h-full{height:100%!important}.opacity-0{opacity:0!important}.opacity-5{opacity:.05!important}.opacity-10{opacity:.1!important}.opacity-15{opacity:.15!important}.opacity-20{opacity:.2!important}.opacity-25{opacity:.25!important}.opacity-30{opacity:.3!important}.opacity-35{opacity:.35!important}.opacity-40{opacity:.4!important}.opacity-45{opacity:.45!important}.opacity-50{opacity:.5!important}.opacity-55{opacity:.55!important}.opacity-60{opacity:.6!important}.opacity-65{opacity:.65!important}.opacity-70{opacity:.7!important}.opacity-75{opacity:.75!important}.opacity-80{opacity:.8!important}.opacity-85{opacity:.85!important}.opacity-90{opacity:.9!important}.opacity-95{opacity:.95!important}.opacity-100{opacity:1!important}.hover-shadow-sm:hover{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}.hover-shadow:hover{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}.hover-shadow-lg:hover{box-shadow:0 1rem 3rem rgba(0,0,0,.175)!important}.hover-shadow-none:hover{box-shadow:none!important}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.subpixel-antialiased{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}@media not print{.theme-dark{color:#f5f7fb;background-color:#2f3949}.theme-dark .card,.theme-dark .dropdown-menu,.theme-dark .footer,.theme-dark .modal-content,.theme-dark .modal-header,.theme-dark .navbar-light{background-color:#354052;color:inherit}.theme-dark .card{border-color:transparent}.theme-dark .btn-secondary,.theme-dark .form-file-button{color:#f5f7fb;background-color:#3b475b;border-color:rgba(134,140,151,.24);background-image:none}.theme-dark .btn-secondary:hover,.theme-dark .form-file-button:hover{color:#f5f7fb;background-color:rgba(53,64,82,0);border-color:rgba(134,140,151,.24)}.theme-dark .btn-secondary.focus,.theme-dark .btn-secondary:focus,.theme-dark .form-file-button.focus,.theme-dark .form-file-button:focus{color:#f5f7fb;background-color:rgba(53,64,82,0);border-color:rgba(134,140,151,.24);box-shadow:0 0 0 .2rem rgba(197,200,207,.5)}.show>.theme-dark .btn-secondary.dropdown-toggle,.show>.theme-dark .form-file-button.dropdown-toggle,.theme-dark .btn-secondary.active,.theme-dark .btn-secondary:active,.theme-dark .form-file-button.active,.theme-dark .form-file-button:active{color:#fff;background-color:#272f3c;border-color:rgba(102,108,119,.24)}.show>.theme-dark .btn-secondary.dropdown-toggle:focus,.show>.theme-dark .form-file-button.dropdown-toggle:focus,.theme-dark .btn-secondary.active:focus,.theme-dark .btn-secondary:active:focus,.theme-dark .form-file-button.active:focus,.theme-dark .form-file-button:active:focus{box-shadow:0 0 0 .2rem rgba(197,200,207,.5)}.theme-dark .btn-secondary.disabled,.theme-dark .btn-secondary:disabled,.theme-dark .form-file-button.disabled,.theme-dark .form-file-button:disabled{color:#f5f7fb;background-color:#3b475b;border-color:rgba(134,140,151,.24)}.theme-dark .flatpickr-input.flatpickr-input,.theme-dark .form-check-input:not(:checked),.theme-dark .form-control,.theme-dark .form-file-text,.theme-dark .form-imagecheck-figure:before,.theme-dark .form-select,.theme-dark .form-selectgroup-box,.theme-dark .form-selectgroup-check{background-color:#2f3949;color:#f5f7fb}.theme-dark .form-control-plaintext{color:#f5f7fb}.theme-dark .input-group-flat .input-group-text{background-color:#2f3949}.theme-dark .navbar{box-shadow:0 0 0 1px #2f3949}.theme-dark .highlight{background-color:#2f3949}.theme-dark .avatar{background-color:#3b475b}.theme-dark .avatar-list-stacked .avatar{box-shadow:0 0 0 2px #354052}.theme-dark .close,.theme-dark .markdown,.theme-dark .markdown>*{color:inherit}.theme-dark .apexcharts-text{fill:#f5f7fb}.theme-dark .apexcharts-legend-text{color:inherit!important}.theme-dark .navbar-brand-autodark{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}}@media not print and (prefers-color-scheme:dark){.theme-dark-auto{color:#f5f7fb;background-color:#2f3949}.theme-dark-auto .card,.theme-dark-auto .dropdown-menu,.theme-dark-auto .footer,.theme-dark-auto .modal-content,.theme-dark-auto .modal-header,.theme-dark-auto .navbar-light{background-color:#354052;color:inherit}.theme-dark-auto .card{border-color:transparent}.theme-dark-auto .btn-secondary,.theme-dark-auto .form-file-button{color:#f5f7fb;background-color:#3b475b;border-color:rgba(134,140,151,.24);background-image:none}.theme-dark-auto .btn-secondary:hover,.theme-dark-auto .form-file-button:hover{color:#f5f7fb;background-color:rgba(53,64,82,0);border-color:rgba(134,140,151,.24)}.theme-dark-auto .btn-secondary.focus,.theme-dark-auto .btn-secondary:focus,.theme-dark-auto .form-file-button.focus,.theme-dark-auto .form-file-button:focus{color:#f5f7fb;background-color:rgba(53,64,82,0);border-color:rgba(134,140,151,.24);box-shadow:0 0 0 .2rem rgba(197,200,207,.5)}.show>.theme-dark-auto .btn-secondary.dropdown-toggle,.show>.theme-dark-auto .form-file-button.dropdown-toggle,.theme-dark-auto .btn-secondary.active,.theme-dark-auto .btn-secondary:active,.theme-dark-auto .form-file-button.active,.theme-dark-auto .form-file-button:active{color:#fff;background-color:#272f3c;border-color:rgba(102,108,119,.24)}.show>.theme-dark-auto .btn-secondary.dropdown-toggle:focus,.show>.theme-dark-auto .form-file-button.dropdown-toggle:focus,.theme-dark-auto .btn-secondary.active:focus,.theme-dark-auto .btn-secondary:active:focus,.theme-dark-auto .form-file-button.active:focus,.theme-dark-auto .form-file-button:active:focus{box-shadow:0 0 0 .2rem rgba(197,200,207,.5)}.theme-dark-auto .btn-secondary.disabled,.theme-dark-auto .btn-secondary:disabled,.theme-dark-auto .form-file-button.disabled,.theme-dark-auto .form-file-button:disabled{color:#f5f7fb;background-color:#3b475b;border-color:rgba(134,140,151,.24)}.theme-dark-auto .flatpickr-input.flatpickr-input,.theme-dark-auto .form-check-input:not(:checked),.theme-dark-auto .form-control,.theme-dark-auto .form-file-text,.theme-dark-auto .form-imagecheck-figure:before,.theme-dark-auto .form-select,.theme-dark-auto .form-selectgroup-box,.theme-dark-auto .form-selectgroup-check{background-color:#2f3949;color:#f5f7fb}.theme-dark-auto .form-control-plaintext{color:#f5f7fb}.theme-dark-auto .input-group-flat .input-group-text{background-color:#2f3949}.theme-dark-auto .navbar{box-shadow:0 0 0 1px #2f3949}.theme-dark-auto .highlight{background-color:#2f3949}.theme-dark-auto .avatar{background-color:#3b475b}.theme-dark-auto .avatar-list-stacked .avatar{box-shadow:0 0 0 2px #354052}.theme-dark-auto .close,.theme-dark-auto .markdown,.theme-dark-auto .markdown>*{color:inherit}.theme-dark-auto .apexcharts-text{fill:#f5f7fb}.theme-dark-auto .apexcharts-legend-text{color:inherit!important}.theme-dark-auto .navbar-brand-autodark{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}}.peity{stroke-linejoin:round;stroke-linecap:round}.selectize-control{padding:0;border:0}.selectize-control.multi .selectize-input.has-items{padding-left:6px}.selectize-control.multi .selectize-input>div{font-size:.8125rem;margin:0 6px 2px 0;padding:2px 8px;border-radius:3px;background-color:rgba(145,152,163,.1);color:inherit}.selectize-control .remove{font-size:inherit!important;font-weight:400!important;border-left:0!important;color:#868c97!important}.selectize-control.is-valid{padding:0}.selectize-control.is-valid .selectize-input{border-color:#5eba00}.selectize-control.is-valid .selectize-input.focus{box-shadow:0 0 0 .2rem rgba(94,186,0,.25)}.selectize-control.is-valid .selectize-dropdown{background:0 0;background-color:inherit;border-color:rgba(134,140,151,.24);padding-right:0}.selectize-control.is-invalid{padding:0}.selectize-control.is-invalid .selectize-input{border-color:#fa4654}.selectize-control.is-invalid .selectize-input.focus{box-shadow:0 0 0 .2rem rgba(250,70,84,.25)}.selectize-control.is-invalid .selectize-dropdown{background:0 0;background-color:inherit;border-color:rgba(134,140,151,.24);padding-right:0}.selectize-input{display:flex!important;height:100%;border:1px solid rgba(134,140,151,.24);padding:.375rem .75rem;font-size:.9375rem;box-shadow:none;line-height:1.4666667;background-color:inherit;color:inherit!important}.selectize-input.full{background-color:inherit}.selectize-input.dropdown-active{border-radius:3px}.selectize-control.single .selectize-input{background:#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28134, 140, 151, 0.48%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right .75rem center/16px 12px}.selectize-input.focus{border-color:#7aade9;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.selectize-input:after{content:none!important}.selectize-dropdown{height:auto;background:#fff;padding:.375rem 0;margin-top:1px}.selectize-dropdown .option,.selectize-dropdown .option-header{padding:.25rem .75rem}.selectize-dropdown .active{background:rgba(134,140,151,.06);color:inherit;cursor:pointer}.jqvmap-zoomin,.jqvmap-zoomout{height:auto;width:auto;left:.5rem;border:1px solid rgba(134,140,151,.24);background:#fff;color:#354052}.jqvmap-zoomin{top:.5rem}.jqvmap-zoomout{top:2rem}.jqvmap-label{font-family:inherit;font-size:.6875rem;line-height:1;padding:.25rem;background:#354052}.apexcharts-title-text{font-weight:600!important}.apexcharts-tooltip-title{font-weight:600!important;padding-bottom:.25rem!important}.apexcharts-gridline,.apexcharts-xaxis-tick,.apexcharts-ycrosshairs{stroke:rgba(134,140,151,.24)!important}.apexcharts-tooltip{line-height:1;color:#fff;background:#354052!important;border:0!important;border-radius:3px!important}.apexcharts-tooltip-title{margin:0!important;background:0 0!important;border:0!important}.apexcharts-tooltip-series-group{padding:0 8px!important}.apexcharts-tooltip-marker{width:.5rem;height:.5rem}.apexcharts-gridline,.apexcharts-xaxis-tick,.apexcharts-ycrosshairs{stroke:#e9ecf1}.fc-unthemed .fc-content,.fc-unthemed .fc-divider,.fc-unthemed .fc-list-heading td,.fc-unthemed .fc-list-view,.fc-unthemed .fc-popover,.fc-unthemed .fc-row,.fc-unthemed tbody,.fc-unthemed td,.fc-unthemed th,.fc-unthemed thead{border-color:rgba(134,140,151,.24)}.fc-unthemed .fc-toolbar .h2,.fc-unthemed .fc-toolbar h2{font-size:1.375rem;margin:0}.fc-unthemed .fc-button{color:#868c97;background-color:#fff;border-color:rgba(134,140,151,.24);padding:.375rem 1rem;font-size:.9375rem;border-radius:3px;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.fc-unthemed .fc-button:hover{color:#354052;background-color:#ececec;border-color:rgba(108,114,126,.24)}.fc-unthemed .fc-button.focus,.fc-unthemed .fc-button:focus{color:#354052;background-color:#ececec;border-color:rgba(108,114,126,.24);box-shadow:0 0 0 .2rem rgba(134,140,151,.5)}.fc-unthemed .fc-button.active,.fc-unthemed .fc-button:active,.show>.fc-unthemed .fc-button.dropdown-toggle{color:#354052;background-color:#e6e6e6;border-color:rgba(102,108,119,.24)}.fc-unthemed .fc-button.active:focus,.fc-unthemed .fc-button:active:focus,.show>.fc-unthemed .fc-button.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(134,140,151,.5)}.fc-unthemed .fc-button.disabled,.fc-unthemed .fc-button:disabled{color:#868c97;background-color:#fff;border-color:rgba(134,140,151,.24)}@media (prefers-reduced-motion:reduce){.fc-unthemed .fc-button{transition:none}}.fc-unthemed .fc-widget-header{border:0}.fc-unthemed .fc-day-header{padding-bottom:.25rem;font-weight:600}.fc-unthemed.card-calendar .fc-day-grid-container{border-bottom:0;border-left:0}.fc-unthemed .fc-time{font-weight:600}.fc-unthemed .fc-event{border-color:rgba(0,0,0,.05);color:#206bc4;background-color:#d2e1f3;padding:0 .25rem}.flatpickr-input.flatpickr-input{background:#fff}.flatpickr-input.flatpickr-input.active{border-color:#7aade9;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.flatpickr-calendar{background:#fff;border:1px solid rgba(134,140,151,.24);border-radius:3px;padding:.5rem;font-size:inherit;box-shadow:0 .5rem 1rem rgba(0,0,0,.15);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-top:-1px}.flatpickr-calendar:after,.flatpickr-calendar:before{content:none}.flatpickr-calendar .dayContainer,.flatpickr-calendar .flatpickr-days,.flatpickr-calendar .flatpickr-innerContainer,.flatpickr-calendar .flatpickr-rContainer{width:100%}.flatpickr-calendar .dayContainer,.flatpickr-calendar .flatpickr-day{max-width:100%;min-width:0}.flatpickr-calendar.inline{width:100%;box-shadow:none;margin:0}.flatpickr-day{color:inherit;border-radius:3px;display:flex;align-items:center;line-height:1}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.nextMonthDay,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.prevMonthDay{color:inherit;opacity:.2}.flatpickr-day.today{border-color:rgba(134,140,151,.24)}.flatpickr-day.selected{background-color:#206bc4}span.flatpickr-weekday{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97}.flatpickr-months{margin-bottom:.5rem}.flatpickr-months .flatpickr-month{color:currentColor;fill:currentColor}.flatpickr-months .flatpickr-current-month{font-weight:400}.flatpickr-months .flatpickr-monthDropdown-months{-webkit-appearance:none;-moz-appearance:none;appearance:none;font-weight:inherit}.flatpickr-months .flatpickr-next-month,.flatpickr-months .flatpickr-prev-month{position:static;color:#868c97}.flatpickr-months .flatpickr-next-month:hover,.flatpickr-months .flatpickr-prev-month:hover{color:#354052}.flatpickr-months .flatpickr-next-month svg,.flatpickr-months .flatpickr-prev-month svg{display:block;fill:currentColor!important}.flatpickr-months .numInputWrapper .cur-year{font-weight:inherit}.flatpickr-months .numInputWrapper .arrowDown,.flatpickr-months .numInputWrapper .arrowUp{display:none}.flatpickr-day.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day.nextMonthDay:focus,.flatpickr-day.nextMonthDay:hover,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.today.inRange,.flatpickr-day:focus,.flatpickr-day:hover{background:rgba(134,140,151,.06);border-color:transparent}.noUi-target{border:0;box-shadow:none;background:0 0;border-radius:0;color:#206bc4}.noUi-horizontal{height:1.25rem;padding:.5rem 0}.noUi-base{background:rgba(176,181,190,.24);border-radius:1rem}.noUi-handle{width:1rem;height:1rem;border:2px solid #fff;box-shadow:0 .1rem .25rem rgba(0,0,0,.1);border-radius:1rem;background:currentColor;outline:0}.noUi-handle:after,.noUi-handle:before{content:none}.noUi-horizontal .noUi-handle{width:1rem;height:1rem;top:-.5rem;right:-.5rem;margin:1px 1px 0 0}.noUi-handle.noUi-active,.noUi-handle:focus{box-shadow:0 0 0 1px #f5f7fb,0 0 0 .2rem rgba(32,107,196,.25)}.noUi-connect{background:currentColor}
+ */@import url(https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;600;700&display=swap);:root{--blue:#206bc4;--azure:#45aaf2;--indigo:#6574cd;--purple:#a55eea;--pink:#f66d9b;--red:#cd201f;--orange:#ff922b;--yellow:#fab005;--lime:#94d82d;--green:#5eba00;--teal:#2bcbba;--cyan:#17a2b8;--white:#ffffff;--gray:#a8aeb7;--gray-dark:#545d6d;--dark:#354052;--primary:#206bc4;--secondary:#6e7582;--success:#5eba00;--info:#45aaf2;--warning:#fab005;--danger:#cd201f;--light:#f5f7fb;--dark:#354052;--font-family-sans-serif:"Ubuntu",system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;--font-family-monospace:Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}*,::after,::before{box-sizing:border-box}body{margin:0;font-family:Ubuntu,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:.875rem;font-weight:400;line-height:1.7142857;color:#354052;background-color:#f5f7fb;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}.hr,hr{margin:2rem 0;color:inherit;background-color:currentColor;border:0;opacity:.1}.hr:not([size]),hr:not([size]){height:1px}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}.h1,h1{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){.h1,h1{font-size:1.75rem}}.h2,h2{font-size:calc(1.2625rem + .15vw)}@media (min-width:1200px){.h2,h2{font-size:1.375rem}}.h3,h3{font-size:1.125rem}.h4,h4{font-size:.875rem}.h5,h5{font-size:.75rem}.h6,h6{font-size:.625rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:500}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}.small,small{font-size:87.5%}.mark,mark{padding:.2em;background-color:#fcf8e3}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#206bc4;text-decoration:none}a:hover{color:#154782}a:not([href]),a:not([href]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.625rem}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.625rem;color:#206bc4;word-wrap:break-word}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:.625rem;color:#fff;background-color:#354052;border-radius:.2rem}kbd kbd{padding:0;font-size:1em;font-weight:500}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:#6e7582;text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[list]::-webkit-calendar-picker-indicator{display:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:textfield}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit;white-space:normal}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}.lead{font-size:.875rem;font-weight:400}.display-1{font-size:calc(1.725rem + 5.7vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-1{font-size:6rem}}.display-2{font-size:calc(1.675rem + 5.1vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-2{font-size:5.5rem}}.display-3{font-size:calc(1.575rem + 3.9vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-3{font-size:4.5rem}}.display-4{font-size:calc(1.475rem + 2.7vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-4{font-size:3.5rem}}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}.initialism{font-size:87.5%;text-transform:uppercase}.blockquote{margin-bottom:1rem;font-size:.875rem}.blockquote-footer{display:block;font-size:87.5%;color:#a8aeb7}.blockquote-footer::before{content:"\2014\00A0"}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:#f5f7fb;border:1px solid #e9ecf1;border-radius:3px;max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:.5rem;line-height:1}.figure-caption{font-size:87.5%;color:#a8aeb7}.container{width:100%;padding-right:.75rem;padding-left:.75rem;margin-right:auto;margin-left:auto}@media (min-width:33rem){.container{max-width:32.5rem}}@media (min-width:48rem){.container{max-width:47.5rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:75.25rem){.container{max-width:75.25rem}}.container-fluid,.container-lg,.container-md,.container-sm,.container-xl{width:100%;padding-right:.75rem;padding-left:.75rem;margin-right:auto;margin-left:auto}@media (min-width:33rem){.container,.container-sm{max-width:32.5rem}}@media (min-width:48rem){.container,.container-md,.container-sm{max-width:47.5rem}}@media (min-width:64rem){.container,.container-lg,.container-md,.container-sm{max-width:64rem}}@media (min-width:75.25rem){.container,.container-lg,.container-md,.container-sm,.container-xl{max-width:75.25rem}}.row{display:flex;flex-wrap:wrap;margin-right:-.75rem;margin-left:-.75rem}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:.75rem;padding-left:.75rem}.g-0,.gx-0{margin-right:0;margin-left:0}.g-0>*,.gx-0>*{padding-right:0;padding-left:0}.g-0,.gy-0{margin-top:0}.g-0>*,.gy-0>*{margin-top:0}.g-1,.gx-1{margin-right:-.125rem;margin-left:-.125rem}.g-1>*,.gx-1>*{padding-right:.125rem;padding-left:.125rem}.g-1,.gy-1{margin-top:-.25rem}.g-1>*,.gy-1>*{margin-top:.25rem}.g-2,.gx-2{margin-right:-.25rem;margin-left:-.25rem}.g-2>*,.gx-2>*{padding-right:.25rem;padding-left:.25rem}.g-2,.gy-2{margin-top:-.5rem}.g-2>*,.gy-2>*{margin-top:.5rem}.g-3,.gx-3{margin-right:-.5rem;margin-left:-.5rem}.g-3>*,.gx-3>*{padding-right:.5rem;padding-left:.5rem}.g-3,.gy-3{margin-top:-1rem}.g-3>*,.gy-3>*{margin-top:1rem}.g-4,.gx-4{margin-right:-.75rem;margin-left:-.75rem}.g-4>*,.gx-4>*{padding-right:.75rem;padding-left:.75rem}.g-4,.gy-4{margin-top:-1.5rem}.g-4>*,.gy-4>*{margin-top:1.5rem}.g-5,.gx-5{margin-right:-1.5rem;margin-left:-1.5rem}.g-5>*,.gx-5>*{padding-right:1.5rem;padding-left:1.5rem}.g-5,.gy-5{margin-top:-3rem}.g-5>*,.gy-5>*{margin-top:3rem}.g-6,.gx-6{margin-right:-2.25rem;margin-left:-2.25rem}.g-6>*,.gx-6>*{padding-right:2.25rem;padding-left:2.25rem}.g-6,.gy-6{margin-top:-4.5rem}.g-6>*,.gy-6>*{margin-top:4.5rem}@media (min-width:33rem){.g-sm-0,.gx-sm-0{margin-right:0;margin-left:0}.g-sm-0>*,.gx-sm-0>*{padding-right:0;padding-left:0}.g-sm-0,.gy-sm-0{margin-top:0}.g-sm-0>*,.gy-sm-0>*{margin-top:0}.g-sm-1,.gx-sm-1{margin-right:-.125rem;margin-left:-.125rem}.g-sm-1>*,.gx-sm-1>*{padding-right:.125rem;padding-left:.125rem}.g-sm-1,.gy-sm-1{margin-top:-.25rem}.g-sm-1>*,.gy-sm-1>*{margin-top:.25rem}.g-sm-2,.gx-sm-2{margin-right:-.25rem;margin-left:-.25rem}.g-sm-2>*,.gx-sm-2>*{padding-right:.25rem;padding-left:.25rem}.g-sm-2,.gy-sm-2{margin-top:-.5rem}.g-sm-2>*,.gy-sm-2>*{margin-top:.5rem}.g-sm-3,.gx-sm-3{margin-right:-.5rem;margin-left:-.5rem}.g-sm-3>*,.gx-sm-3>*{padding-right:.5rem;padding-left:.5rem}.g-sm-3,.gy-sm-3{margin-top:-1rem}.g-sm-3>*,.gy-sm-3>*{margin-top:1rem}.g-sm-4,.gx-sm-4{margin-right:-.75rem;margin-left:-.75rem}.g-sm-4>*,.gx-sm-4>*{padding-right:.75rem;padding-left:.75rem}.g-sm-4,.gy-sm-4{margin-top:-1.5rem}.g-sm-4>*,.gy-sm-4>*{margin-top:1.5rem}.g-sm-5,.gx-sm-5{margin-right:-1.5rem;margin-left:-1.5rem}.g-sm-5>*,.gx-sm-5>*{padding-right:1.5rem;padding-left:1.5rem}.g-sm-5,.gy-sm-5{margin-top:-3rem}.g-sm-5>*,.gy-sm-5>*{margin-top:3rem}.g-sm-6,.gx-sm-6{margin-right:-2.25rem;margin-left:-2.25rem}.g-sm-6>*,.gx-sm-6>*{padding-right:2.25rem;padding-left:2.25rem}.g-sm-6,.gy-sm-6{margin-top:-4.5rem}.g-sm-6>*,.gy-sm-6>*{margin-top:4.5rem}}@media (min-width:48rem){.g-md-0,.gx-md-0{margin-right:0;margin-left:0}.g-md-0>*,.gx-md-0>*{padding-right:0;padding-left:0}.g-md-0,.gy-md-0{margin-top:0}.g-md-0>*,.gy-md-0>*{margin-top:0}.g-md-1,.gx-md-1{margin-right:-.125rem;margin-left:-.125rem}.g-md-1>*,.gx-md-1>*{padding-right:.125rem;padding-left:.125rem}.g-md-1,.gy-md-1{margin-top:-.25rem}.g-md-1>*,.gy-md-1>*{margin-top:.25rem}.g-md-2,.gx-md-2{margin-right:-.25rem;margin-left:-.25rem}.g-md-2>*,.gx-md-2>*{padding-right:.25rem;padding-left:.25rem}.g-md-2,.gy-md-2{margin-top:-.5rem}.g-md-2>*,.gy-md-2>*{margin-top:.5rem}.g-md-3,.gx-md-3{margin-right:-.5rem;margin-left:-.5rem}.g-md-3>*,.gx-md-3>*{padding-right:.5rem;padding-left:.5rem}.g-md-3,.gy-md-3{margin-top:-1rem}.g-md-3>*,.gy-md-3>*{margin-top:1rem}.g-md-4,.gx-md-4{margin-right:-.75rem;margin-left:-.75rem}.g-md-4>*,.gx-md-4>*{padding-right:.75rem;padding-left:.75rem}.g-md-4,.gy-md-4{margin-top:-1.5rem}.g-md-4>*,.gy-md-4>*{margin-top:1.5rem}.g-md-5,.gx-md-5{margin-right:-1.5rem;margin-left:-1.5rem}.g-md-5>*,.gx-md-5>*{padding-right:1.5rem;padding-left:1.5rem}.g-md-5,.gy-md-5{margin-top:-3rem}.g-md-5>*,.gy-md-5>*{margin-top:3rem}.g-md-6,.gx-md-6{margin-right:-2.25rem;margin-left:-2.25rem}.g-md-6>*,.gx-md-6>*{padding-right:2.25rem;padding-left:2.25rem}.g-md-6,.gy-md-6{margin-top:-4.5rem}.g-md-6>*,.gy-md-6>*{margin-top:4.5rem}}@media (min-width:64rem){.g-lg-0,.gx-lg-0{margin-right:0;margin-left:0}.g-lg-0>*,.gx-lg-0>*{padding-right:0;padding-left:0}.g-lg-0,.gy-lg-0{margin-top:0}.g-lg-0>*,.gy-lg-0>*{margin-top:0}.g-lg-1,.gx-lg-1{margin-right:-.125rem;margin-left:-.125rem}.g-lg-1>*,.gx-lg-1>*{padding-right:.125rem;padding-left:.125rem}.g-lg-1,.gy-lg-1{margin-top:-.25rem}.g-lg-1>*,.gy-lg-1>*{margin-top:.25rem}.g-lg-2,.gx-lg-2{margin-right:-.25rem;margin-left:-.25rem}.g-lg-2>*,.gx-lg-2>*{padding-right:.25rem;padding-left:.25rem}.g-lg-2,.gy-lg-2{margin-top:-.5rem}.g-lg-2>*,.gy-lg-2>*{margin-top:.5rem}.g-lg-3,.gx-lg-3{margin-right:-.5rem;margin-left:-.5rem}.g-lg-3>*,.gx-lg-3>*{padding-right:.5rem;padding-left:.5rem}.g-lg-3,.gy-lg-3{margin-top:-1rem}.g-lg-3>*,.gy-lg-3>*{margin-top:1rem}.g-lg-4,.gx-lg-4{margin-right:-.75rem;margin-left:-.75rem}.g-lg-4>*,.gx-lg-4>*{padding-right:.75rem;padding-left:.75rem}.g-lg-4,.gy-lg-4{margin-top:-1.5rem}.g-lg-4>*,.gy-lg-4>*{margin-top:1.5rem}.g-lg-5,.gx-lg-5{margin-right:-1.5rem;margin-left:-1.5rem}.g-lg-5>*,.gx-lg-5>*{padding-right:1.5rem;padding-left:1.5rem}.g-lg-5,.gy-lg-5{margin-top:-3rem}.g-lg-5>*,.gy-lg-5>*{margin-top:3rem}.g-lg-6,.gx-lg-6{margin-right:-2.25rem;margin-left:-2.25rem}.g-lg-6>*,.gx-lg-6>*{padding-right:2.25rem;padding-left:2.25rem}.g-lg-6,.gy-lg-6{margin-top:-4.5rem}.g-lg-6>*,.gy-lg-6>*{margin-top:4.5rem}}@media (min-width:75.25rem){.g-xl-0,.gx-xl-0{margin-right:0;margin-left:0}.g-xl-0>*,.gx-xl-0>*{padding-right:0;padding-left:0}.g-xl-0,.gy-xl-0{margin-top:0}.g-xl-0>*,.gy-xl-0>*{margin-top:0}.g-xl-1,.gx-xl-1{margin-right:-.125rem;margin-left:-.125rem}.g-xl-1>*,.gx-xl-1>*{padding-right:.125rem;padding-left:.125rem}.g-xl-1,.gy-xl-1{margin-top:-.25rem}.g-xl-1>*,.gy-xl-1>*{margin-top:.25rem}.g-xl-2,.gx-xl-2{margin-right:-.25rem;margin-left:-.25rem}.g-xl-2>*,.gx-xl-2>*{padding-right:.25rem;padding-left:.25rem}.g-xl-2,.gy-xl-2{margin-top:-.5rem}.g-xl-2>*,.gy-xl-2>*{margin-top:.5rem}.g-xl-3,.gx-xl-3{margin-right:-.5rem;margin-left:-.5rem}.g-xl-3>*,.gx-xl-3>*{padding-right:.5rem;padding-left:.5rem}.g-xl-3,.gy-xl-3{margin-top:-1rem}.g-xl-3>*,.gy-xl-3>*{margin-top:1rem}.g-xl-4,.gx-xl-4{margin-right:-.75rem;margin-left:-.75rem}.g-xl-4>*,.gx-xl-4>*{padding-right:.75rem;padding-left:.75rem}.g-xl-4,.gy-xl-4{margin-top:-1.5rem}.g-xl-4>*,.gy-xl-4>*{margin-top:1.5rem}.g-xl-5,.gx-xl-5{margin-right:-1.5rem;margin-left:-1.5rem}.g-xl-5>*,.gx-xl-5>*{padding-right:1.5rem;padding-left:1.5rem}.g-xl-5,.gy-xl-5{margin-top:-3rem}.g-xl-5>*,.gy-xl-5>*{margin-top:3rem}.g-xl-6,.gx-xl-6{margin-right:-2.25rem;margin-left:-2.25rem}.g-xl-6>*,.gx-xl-6>*{padding-right:2.25rem;padding-left:2.25rem}.g-xl-6,.gy-xl-6{margin-top:-4.5rem}.g-xl-6>*,.gy-xl-6>*{margin-top:4.5rem}}.col{flex:1 0 0%;min-width:0}.row-cols-auto>*{flex:0 0 auto;width:auto}.row-cols-1>*{flex:0 0 auto;width:100%}.row-cols-2>*{flex:0 0 auto;width:50%}.row-cols-3>*{flex:0 0 auto;width:33.3333333%}.row-cols-4>*{flex:0 0 auto;width:25%}.row-cols-5>*{flex:0 0 auto;width:20%}.row-cols-6>*{flex:0 0 auto;width:16.6666667%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.3333333%}.col-2{flex:0 0 auto;width:16.6666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.3333333%}.col-5{flex:0 0 auto;width:41.6666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.3333333%}.col-8{flex:0 0 auto;width:66.6666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.3333333%}.col-11{flex:0 0 auto;width:91.6666667%}.col-12{flex:0 0 auto;width:100%}.offset-1{margin-left:8.3333333%}.offset-2{margin-left:16.6666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.3333333%}.offset-5{margin-left:41.6666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.3333333%}.offset-8{margin-left:66.6666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.3333333%}.offset-11{margin-left:91.6666667%}@media (min-width:33rem){.col-sm{flex:1 0 0%;min-width:0}.row-cols-sm-auto>*{flex:0 0 auto;width:auto}.row-cols-sm-1>*{flex:0 0 auto;width:100%}.row-cols-sm-2>*{flex:0 0 auto;width:50%}.row-cols-sm-3>*{flex:0 0 auto;width:33.3333333%}.row-cols-sm-4>*{flex:0 0 auto;width:25%}.row-cols-sm-5>*{flex:0 0 auto;width:20%}.row-cols-sm-6>*{flex:0 0 auto;width:16.6666667%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.3333333%}.col-sm-2{flex:0 0 auto;width:16.6666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.3333333%}.col-sm-5{flex:0 0 auto;width:41.6666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.3333333%}.col-sm-8{flex:0 0 auto;width:66.6666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.3333333%}.col-sm-11{flex:0 0 auto;width:91.6666667%}.col-sm-12{flex:0 0 auto;width:100%}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.3333333%}.offset-sm-2{margin-left:16.6666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.3333333%}.offset-sm-5{margin-left:41.6666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.3333333%}.offset-sm-8{margin-left:66.6666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.3333333%}.offset-sm-11{margin-left:91.6666667%}}@media (min-width:48rem){.col-md{flex:1 0 0%;min-width:0}.row-cols-md-auto>*{flex:0 0 auto;width:auto}.row-cols-md-1>*{flex:0 0 auto;width:100%}.row-cols-md-2>*{flex:0 0 auto;width:50%}.row-cols-md-3>*{flex:0 0 auto;width:33.3333333%}.row-cols-md-4>*{flex:0 0 auto;width:25%}.row-cols-md-5>*{flex:0 0 auto;width:20%}.row-cols-md-6>*{flex:0 0 auto;width:16.6666667%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.3333333%}.col-md-2{flex:0 0 auto;width:16.6666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.3333333%}.col-md-5{flex:0 0 auto;width:41.6666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.3333333%}.col-md-8{flex:0 0 auto;width:66.6666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.3333333%}.col-md-11{flex:0 0 auto;width:91.6666667%}.col-md-12{flex:0 0 auto;width:100%}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.3333333%}.offset-md-2{margin-left:16.6666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.3333333%}.offset-md-5{margin-left:41.6666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.3333333%}.offset-md-8{margin-left:66.6666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.3333333%}.offset-md-11{margin-left:91.6666667%}}@media (min-width:64rem){.col-lg{flex:1 0 0%;min-width:0}.row-cols-lg-auto>*{flex:0 0 auto;width:auto}.row-cols-lg-1>*{flex:0 0 auto;width:100%}.row-cols-lg-2>*{flex:0 0 auto;width:50%}.row-cols-lg-3>*{flex:0 0 auto;width:33.3333333%}.row-cols-lg-4>*{flex:0 0 auto;width:25%}.row-cols-lg-5>*{flex:0 0 auto;width:20%}.row-cols-lg-6>*{flex:0 0 auto;width:16.6666667%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.3333333%}.col-lg-2{flex:0 0 auto;width:16.6666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.3333333%}.col-lg-5{flex:0 0 auto;width:41.6666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.3333333%}.col-lg-8{flex:0 0 auto;width:66.6666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.3333333%}.col-lg-11{flex:0 0 auto;width:91.6666667%}.col-lg-12{flex:0 0 auto;width:100%}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.3333333%}.offset-lg-2{margin-left:16.6666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.3333333%}.offset-lg-5{margin-left:41.6666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.3333333%}.offset-lg-8{margin-left:66.6666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.3333333%}.offset-lg-11{margin-left:91.6666667%}}@media (min-width:75.25rem){.col-xl{flex:1 0 0%;min-width:0}.row-cols-xl-auto>*{flex:0 0 auto;width:auto}.row-cols-xl-1>*{flex:0 0 auto;width:100%}.row-cols-xl-2>*{flex:0 0 auto;width:50%}.row-cols-xl-3>*{flex:0 0 auto;width:33.3333333%}.row-cols-xl-4>*{flex:0 0 auto;width:25%}.row-cols-xl-5>*{flex:0 0 auto;width:20%}.row-cols-xl-6>*{flex:0 0 auto;width:16.6666667%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.3333333%}.col-xl-2{flex:0 0 auto;width:16.6666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.3333333%}.col-xl-5{flex:0 0 auto;width:41.6666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.3333333%}.col-xl-8{flex:0 0 auto;width:66.6666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.3333333%}.col-xl-11{flex:0 0 auto;width:91.6666667%}.col-xl-12{flex:0 0 auto;width:100%}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.3333333%}.offset-xl-2{margin-left:16.6666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.3333333%}.offset-xl-5{margin-left:41.6666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.3333333%}.offset-xl-8{margin-left:66.6666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.3333333%}.offset-xl-11{margin-left:91.6666667%}}.markdown>table,.table{width:100%;margin-bottom:1rem;color:#354052;vertical-align:top}.markdown>table td,.markdown>table th,.table td,.table th{padding:.5rem;border-bottom:1px solid rgba(110,117,130,.2)}.markdown>table tbody,.table tbody{vertical-align:inherit}.markdown>table thead th,.table thead th{vertical-align:bottom;border-bottom-color:rgba(110,117,130,.2)}.markdown>table tbody+tbody,.table tbody+tbody{border-top:2px solid rgba(110,117,130,.2)}.caption-top{caption-side:top}.table-sm td,.table-sm th{padding:.25rem}.markdown>table,.table-bordered{border:1px solid rgba(110,117,130,.2)}.markdown>table td,.markdown>table th,.table-bordered td,.table-bordered th{border:1px solid rgba(110,117,130,.2)}.markdown>table thead td,.markdown>table thead th,.table-bordered thead td,.table-bordered thead th{border-bottom-width:2px}.table-borderless tbody+tbody,.table-borderless td,.table-borderless th,.table-borderless thead th{border:0}.table-striped tbody tr:nth-of-type(even){background-color:rgba(53,64,82,.024)}.table-hover tbody tr:hover{color:#354052;background-color:rgba(0,0,0,.075)}.table-primary,.table-primary>td,.table-primary>th{background-color:#e9f0f9}.table-primary tbody+tbody,.table-primary td,.table-primary th,.table-primary thead th{border-color:#a6c4e7}.table-hover .table-primary:hover{background-color:#d5e2f4}.table-hover .table-primary:hover>td,.table-hover .table-primary:hover>th{background-color:#d5e2f4}.table-secondary,.table-secondary>td,.table-secondary>th{background-color:#f1f1f3}.table-secondary tbody+tbody,.table-secondary td,.table-secondary th,.table-secondary thead th{border-color:#c5c8cd}.table-hover .table-secondary:hover{background-color:#e3e3e7}.table-hover .table-secondary:hover>td,.table-hover .table-secondary:hover>th{background-color:#e3e3e7}.table-success,.table-success>td,.table-success>th{background-color:#eff8e6}.table-success tbody+tbody,.table-success td,.table-success th,.table-success thead th{border-color:#bfe399}.table-hover .table-success:hover{background-color:#e2f2d2}.table-hover .table-success:hover>td,.table-hover .table-success:hover>th{background-color:#e2f2d2}.table-info,.table-info>td,.table-info>th{background-color:#ecf7fe}.table-info tbody+tbody,.table-info td,.table-info th,.table-info thead th{border-color:#b5ddfa}.table-hover .table-info:hover{background-color:#d4edfd}.table-hover .table-info:hover>td,.table-hover .table-info:hover>th{background-color:#d4edfd}.table-warning,.table-warning>td,.table-warning>th{background-color:#fff7e6}.table-warning tbody+tbody,.table-warning td,.table-warning th,.table-warning thead th{border-color:#fddf9b}.table-hover .table-warning:hover{background-color:#ffefcd}.table-hover .table-warning:hover>td,.table-hover .table-warning:hover>th{background-color:#ffefcd}.table-danger,.table-danger>td,.table-danger>th{background-color:#fae9e9}.table-danger tbody+tbody,.table-danger td,.table-danger th,.table-danger thead th{border-color:#eba6a5}.table-hover .table-danger:hover{background-color:#f5d4d4}.table-hover .table-danger:hover>td,.table-hover .table-danger:hover>th{background-color:#f5d4d4}.table-light,.table-light>td,.table-light>th{background-color:#fefeff}.table-light tbody+tbody,.table-light td,.table-light th,.table-light thead th{border-color:#fbfcfd}.table-hover .table-light:hover{background-color:#e5e5ff}.table-hover .table-light:hover>td,.table-hover .table-light:hover>th{background-color:#e5e5ff}.table-dark,.table-dark>td,.table-dark>th{background-color:#ebecee}.table-dark tbody+tbody,.table-dark td,.table-dark th,.table-dark thead th{border-color:#aeb3ba}.table-hover .table-dark:hover{background-color:#dddfe2}.table-hover .table-dark:hover>td,.table-hover .table-dark:hover>th{background-color:#dddfe2}.table-active,.table-active>td,.table-active>th{background-color:rgba(0,0,0,.075)}.table-hover .table-active:hover{background-color:rgba(0,0,0,.075)}.table-hover .table-active:hover>td,.table-hover .table-active:hover>th{background-color:rgba(0,0,0,.075)}.markdown>table .thead-dark th,.table .thead-dark th{color:#fff;background-color:#545d6d;border-color:#656f83}.markdown>table .thead-light th,.table .thead-light th{color:#7a828f;background-color:#f1f3f8;border-color:rgba(110,117,130,.2)}.table-dark{color:#fff;background-color:#545d6d}.table-dark td,.table-dark th,.table-dark thead th{border-color:#656f83}.markdown>table.table-dark,.table-dark.table-bordered{border:0}.table-dark.table-striped tbody tr:nth-of-type(even){background-color:rgba(255,255,255,.05)}.table-dark.table-hover tbody tr:hover{color:#fff;background-color:rgba(255,255,255,.075)}@media (max-width:32.98rem){.table-responsive-sm{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.markdown.table-responsive-sm>table,.table-responsive-sm>.table-bordered{border:0}}@media (max-width:47.98rem){.table-responsive-md{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.markdown.table-responsive-md>table,.table-responsive-md>.table-bordered{border:0}}@media (max-width:63.98rem){.table-responsive-lg{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.markdown.table-responsive-lg>table,.table-responsive-lg>.table-bordered{border:0}}@media (max-width:75.23rem){.table-responsive-xl{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.markdown.table-responsive-xl>table,.table-responsive-xl>.table-bordered{border:0}}.table-responsive{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.markdown.table-responsive>table,.table-responsive>.table-bordered{border:0}.col-form-label{padding-top:calc(.375rem + 1px);padding-bottom:calc(.375rem + 1px);margin-bottom:0;font-size:inherit;line-height:1.4666667}.col-form-label-lg{padding-top:calc(.5rem + 1px);padding-bottom:calc(.5rem + 1px);font-size:calc(1.2625rem + .15vw)}@media (min-width:1200px){.col-form-label-lg{font-size:1.375rem}}.col-form-label-sm{padding-top:calc(.125rem + 1px);padding-bottom:calc(.125rem + 1px);font-size:.75rem}.form-control{display:block;width:100%;min-height:calc(1.4666667em + .75rem + 2px);padding:.375rem .75rem;font-size:.875rem;font-weight:400;line-height:1.4666667;color:#354052;background-color:#fff;background-clip:padding-box;border:1px solid rgba(110,117,130,.2);border-radius:3px;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control:focus{color:inherit;background-color:#fff;border-color:#7aade9;outline:0;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.form-control::-webkit-input-placeholder{color:#6e7582;opacity:1}.form-control::-moz-placeholder{color:#6e7582;opacity:1}.form-control:-ms-input-placeholder{color:#6e7582;opacity:1}.form-control::-ms-input-placeholder{color:#6e7582;opacity:1}.form-control::placeholder{color:#6e7582;opacity:1}.form-control:disabled,.form-control[readonly]{background-color:#f5f7fb;opacity:1}.form-control-plaintext{display:block;width:100%;padding:.375rem 0;margin-bottom:0;line-height:1.4666667;color:#354052;background-color:transparent;border:solid transparent;border-width:1px 0}.form-control-plaintext.form-control-lg,.form-control-plaintext.form-control-sm{padding-right:0;padding-left:0}.form-control-sm{min-height:calc(1.4666667em + .25rem + 2px);padding:.125rem .5rem;font-size:.75rem;border-radius:.2rem}.form-control-lg{min-height:calc(1.4666667em + 1rem + 2px);padding:.5rem 1.5rem;font-size:calc(1.2625rem + .15vw);border-radius:.3rem}@media (min-width:1200px){.form-control-lg{font-size:1.375rem}}.form-control-color{max-width:3rem;padding:.375rem}.form-control-color::-moz-color-swatch{border-radius:3px}.form-control-color::-webkit-color-swatch{border-radius:3px}.form-select{display:block;width:100%;height:calc(1.4666667em + .75rem + 2px);padding:.375rem 1.75rem .375rem .75rem;font-size:.875rem;font-weight:400;line-height:1.4666667;color:#354052;vertical-align:middle;background-color:#fff;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28110, 117, 130, 0.44%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px;border:1px solid rgba(110,117,130,.2);border-radius:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-select:focus{border-color:#7aade9;outline:0;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.form-select:focus::-ms-value{color:#354052;background-color:#fff}.form-select[multiple],.form-select[size]:not([size="1"]){height:auto;padding-right:.75rem;background-image:none}.form-select:disabled{color:#a8aeb7;background-color:#f1f3f8}.form-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #354052}.form-select-sm{height:calc(1.4666667em + .25rem + 2px);padding-top:.125rem;padding-bottom:.125rem;padding-left:.5rem;font-size:.75rem}.form-select-lg{height:calc(1.4666667em + 1rem + 2px);padding-top:.5rem;padding-bottom:.5rem;padding-left:1.5rem;font-size:calc(1.2625rem + .15vw)}@media (min-width:1200px){.form-select-lg{font-size:1.375rem}}.form-check{display:block;min-height:1.5rem;padding-left:1.5rem;margin-bottom:.125rem}.form-check .form-check-input{float:left;margin-left:-1.5rem}.form-check-input{width:1rem;height:1rem;margin-top:.3571429rem;vertical-align:top;background-color:#fff;border:1px solid rgba(110,117,130,.2);-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-print-color-adjust:exact;color-adjust:exact}.form-check-input[type=checkbox]{border-radius:3px}.form-check-input[type=radio]{border-radius:50%}.form-check-input:active{-webkit-filter:brightness(90%);filter:brightness(90%)}.form-check-input:focus{border-color:#7aade9;outline:0;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.form-check-input:checked{background-color:#206bc4;background-repeat:repeat;background-position:center center;background-size:1rem;border-color:rgba(110,117,130,.2)}.form-check-input:checked[type=checkbox]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6' transform='scale%28.8%29' transform-origin='50% 50%'/%3e%3c/svg%3e")}.form-check-input:checked[type=radio]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3' fill='%23ffffff' cx='8' cy='8' /%3e%3c/svg%3e")}.form-check-input[type=checkbox]:indeterminate{background-color:#206bc4;background-repeat:no-repeat;background-position:center center;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5 8h6'/%3e%3c/svg%3e");background-size:1em;border-color:#206bc4}.form-check-input:disabled{pointer-events:none;-webkit-filter:none;filter:none;opacity:.5}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{opacity:.5}.form-check-label{margin-bottom:0}.form-switch{padding-left:2.25rem}.form-switch .form-check-input{width:1.75rem;margin-left:-2.25rem;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28110, 117, 130, 0.2%29'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:left center;background-size:auto;border-radius:1.75rem;-webkit-print-color-adjust:exact;color-adjust:exact}.form-switch .form-check-input:focus{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2380bdff'/%3e%3c/svg%3e")}.form-switch .form-check-input:checked{background-position:right center;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e")}.form-check-inline{display:inline-block;margin-right:1rem}.form-file{position:relative;height:calc(1.4666667em + .75rem + 2px)}.form-file-input{position:relative;z-index:2;width:100%;height:100%;margin:0;opacity:0}.form-file-input:focus-within~.form-file-label{border-color:#7aade9;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.form-file-input:disabled~.form-file-label .form-file-text,.form-file-input[disabled]~.form-file-label .form-file-text{background-color:#f5f7fb}.form-file-label{position:absolute;top:0;right:0;left:0;z-index:1;display:flex;height:100%;border-color:rgba(110,117,130,.2);border-radius:3px}.form-file-text{display:block;flex-grow:1;padding:.375rem .75rem;overflow:hidden;font-weight:400;line-height:1.4666667;color:#354052;text-overflow:ellipsis;white-space:nowrap;background-color:#fff;border-color:inherit;border-style:solid;border-width:1px;border-top-left-radius:inherit;border-bottom-left-radius:inherit}.form-file-button{display:block;flex-shrink:0;padding:.375rem .75rem;margin-left:-1px;line-height:1.4666667;color:#354052;background-color:rgba(53,64,82,.024);border-color:inherit;border-style:solid;border-width:1px;border-top-right-radius:inherit;border-bottom-right-radius:inherit}.form-file-sm{height:calc(1.4666667em + .25rem + 2px);font-size:.75rem}.form-file-sm .form-file-button,.form-file-sm .form-file-text{padding:.125rem .5rem}.form-file-lg{height:calc(1.4666667em + 1rem + 2px);font-size:calc(1.2625rem + .15vw)}@media (min-width:1200px){.form-file-lg{font-size:1.375rem}}.form-file-lg .form-file-button,.form-file-lg .form-file-text{padding:.5rem 1.5rem}.form-range{width:100%;height:1.25rem;padding:0;background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-range:focus{outline:0}.form-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 1px #f5f7fb,0 0 0 .2rem rgba(32,107,196,.25)}.form-range:focus::-moz-range-thumb{box-shadow:0 0 0 1px #f5f7fb,0 0 0 .2rem rgba(32,107,196,.25)}.form-range:focus::-ms-thumb{box-shadow:0 0 0 1px #f5f7fb,0 0 0 .2rem rgba(32,107,196,.25)}.form-range::-moz-focus-outer{border:0}.form-range::-webkit-slider-thumb{width:1rem;height:1rem;margin-top:-.375rem;background-color:#206bc4;border:2px solid #fff;border-radius:1rem;-webkit-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-appearance:none;appearance:none}@media (prefers-reduced-motion:reduce){.form-range::-webkit-slider-thumb{-webkit-transition:none;transition:none}}.form-range::-webkit-slider-thumb:active{background-color:#a6c8f0}.form-range::-webkit-slider-runnable-track{width:100%;height:.25rem;color:transparent;cursor:pointer;background-color:rgba(176,181,190,.24);border-color:transparent;border-radius:1rem}.form-range::-moz-range-thumb{width:1rem;height:1rem;background-color:#206bc4;border:2px solid #fff;border-radius:1rem;-moz-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-moz-appearance:none;appearance:none}@media (prefers-reduced-motion:reduce){.form-range::-moz-range-thumb{-moz-transition:none;transition:none}}.form-range::-moz-range-thumb:active{background-color:#a6c8f0}.form-range::-moz-range-track{width:100%;height:.25rem;color:transparent;cursor:pointer;background-color:rgba(176,181,190,.24);border-color:transparent;border-radius:1rem}.form-range::-ms-thumb{width:1rem;height:1rem;margin-top:0;margin-right:.125rem;margin-left:.125rem;background-color:#206bc4;border:2px solid #fff;border-radius:1rem;-ms-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;appearance:none}@media (prefers-reduced-motion:reduce){.form-range::-ms-thumb{-ms-transition:none;transition:none}}.form-range::-ms-thumb:active{background-color:#a6c8f0}.form-range::-ms-track{width:100%;height:.25rem;color:transparent;cursor:pointer;background-color:transparent;border-color:transparent;border-width:.5rem}.form-range::-ms-fill-lower{background-color:rgba(176,181,190,.24);border-radius:1rem}.form-range::-ms-fill-upper{margin-right:15px;background-color:rgba(176,181,190,.24);border-radius:1rem}.form-range:disabled{pointer-events:none}.form-range:disabled::-webkit-slider-thumb{background-color:#cbcfd6}.form-range:disabled::-moz-range-thumb{background-color:#cbcfd6}.form-range:disabled::-ms-thumb{background-color:#cbcfd6}.input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.input-group>.form-control,.input-group>.form-file,.input-group>.form-select{position:relative;flex:1 1 auto;width:1%;min-width:0}.input-group>.form-control:focus,.input-group>.form-file .form-file-input:focus~.form-file-label,.input-group>.form-select:focus{z-index:3}.input-group>.form-file>.form-file-input:focus{z-index:4}.input-group>.form-file:not(:last-child)>.form-file-label{border-top-right-radius:0;border-bottom-right-radius:0}.input-group>.form-file:not(:first-child)>.form-file-label{border-top-left-radius:0;border-bottom-left-radius:0}.input-group .btn{position:relative;z-index:2}.input-group .btn:focus{z-index:3}.input-group-text{display:flex;align-items:center;padding:.375rem .75rem;margin-bottom:0;font-size:.875rem;font-weight:400;line-height:1.4666667;color:#6e7582;text-align:center;white-space:nowrap;background-color:rgba(53,64,82,.024);border:1px solid rgba(110,117,130,.2);border-radius:3px}.input-group-lg>.form-control{min-height:calc(1.4666667em + 1rem + 2px)}.input-group-lg>.form-select{height:calc(1.4666667em + 1rem + 2px)}.input-group-lg>.btn,.input-group-lg>.form-control,.input-group-lg>.form-select,.input-group-lg>.input-group-text{padding:.5rem 1.5rem;font-size:calc(1.2625rem + .15vw);border-radius:.3rem}@media (min-width:1200px){.input-group-lg>.btn,.input-group-lg>.form-control,.input-group-lg>.form-select,.input-group-lg>.input-group-text{font-size:1.375rem}}.input-group-sm>.form-control{min-height:calc(1.4666667em + .25rem + 2px)}.input-group-sm>.form-select{height:calc(1.4666667em + .25rem + 2px)}.input-group-sm>.btn,.input-group-sm>.form-control,.input-group-sm>.form-select,.input-group-sm>.input-group-text{padding:.125rem .5rem;font-size:.75rem;border-radius:.2rem}.input-group-lg>.form-select,.input-group-sm>.form-select{padding-right:1.75rem}.input-group>.dropdown-toggle:nth-last-child(n+3),.input-group>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu){border-top-right-radius:0;border-bottom-right-radius:0}.input-group>:not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}.valid-feedback{display:none;width:100%;margin-top:.25rem;font-size:87.5%;color:#5eba00}.valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.765625rem;color:#fff;background-color:rgba(94,186,0,.9);border-radius:3px}.is-valid~.valid-feedback,.is-valid~.valid-tooltip,.was-validated :valid~.valid-feedback,.was-validated :valid~.valid-tooltip{display:block}.form-control.is-valid,.was-validated .form-control:valid{border-color:#5eba00;padding-right:calc(1.4666667em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235eba00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.3666667em + .1875rem) center;background-size:calc(.7333333em + .375rem) calc(.7333333em + .375rem)}.form-control.is-valid:focus,.was-validated .form-control:valid:focus{border-color:#5eba00;box-shadow:0 0 0 .2rem rgba(94,186,0,.25)}.was-validated textarea.form-control:valid,textarea.form-control.is-valid{padding-right:calc(1.4666667em + .75rem);background-position:top calc(.3666667em + .1875rem) right calc(.3666667em + .1875rem)}.form-select.is-valid,.was-validated .form-select:valid{border-color:#5eba00;padding-right:calc(.75em + 2.3125rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28110, 117, 130, 0.44%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235eba00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e");background-position:right .75rem center,center right 1.75rem;background-size:16px 12px,calc(.7333333em + .375rem) calc(.7333333em + .375rem)}.form-select.is-valid:focus,.was-validated .form-select:valid:focus{border-color:#5eba00;box-shadow:0 0 0 .2rem rgba(94,186,0,.25)}.form-check-input.is-valid,.was-validated .form-check-input:valid{border-color:#5eba00}.form-check-input.is-valid:checked,.was-validated .form-check-input:valid:checked{background-color:#78ed00}.form-check-input.is-valid:focus,.was-validated .form-check-input:valid:focus{box-shadow:0 0 0 .2rem rgba(94,186,0,.25)}.form-check-input.is-valid~.form-check-label,.was-validated .form-check-input:valid~.form-check-label{color:#5eba00}.form-check-inline .form-check-input~.valid-feedback{margin-left:.5em}.form-file-input.is-valid~.form-file-label,.was-validated .form-file-input:valid~.form-file-label{border-color:#5eba00}.form-file-input.is-valid:focus~.form-file-label,.was-validated .form-file-input:valid:focus~.form-file-label{border-color:#5eba00;box-shadow:0 0 0 .2rem rgba(94,186,0,.25)}.invalid-feedback{display:none;width:100%;margin-top:.25rem;font-size:87.5%;color:#cd201f}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.765625rem;color:#fff;background-color:rgba(205,32,31,.9);border-radius:3px}.is-invalid~.invalid-feedback,.is-invalid~.invalid-tooltip,.was-validated :invalid~.invalid-feedback,.was-validated :invalid~.invalid-tooltip{display:block}.form-control.is-invalid,.was-validated .form-control:invalid{border-color:#cd201f;padding-right:calc(1.4666667em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23cd201f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.3666667em + .1875rem) center;background-size:calc(.7333333em + .375rem) calc(.7333333em + .375rem)}.form-control.is-invalid:focus,.was-validated .form-control:invalid:focus{border-color:#cd201f;box-shadow:0 0 0 .2rem rgba(205,32,31,.25)}.was-validated textarea.form-control:invalid,textarea.form-control.is-invalid{padding-right:calc(1.4666667em + .75rem);background-position:top calc(.3666667em + .1875rem) right calc(.3666667em + .1875rem)}.form-select.is-invalid,.was-validated .form-select:invalid{border-color:#cd201f;padding-right:calc(.75em + 2.3125rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28110, 117, 130, 0.44%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23cd201f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");background-position:right .75rem center,center right 1.75rem;background-size:16px 12px,calc(.7333333em + .375rem) calc(.7333333em + .375rem)}.form-select.is-invalid:focus,.was-validated .form-select:invalid:focus{border-color:#cd201f;box-shadow:0 0 0 .2rem rgba(205,32,31,.25)}.form-check-input.is-invalid,.was-validated .form-check-input:invalid{border-color:#cd201f}.form-check-input.is-invalid:checked,.was-validated .form-check-input:invalid:checked{background-color:#e23e3d}.form-check-input.is-invalid:focus,.was-validated .form-check-input:invalid:focus{box-shadow:0 0 0 .2rem rgba(205,32,31,.25)}.form-check-input.is-invalid~.form-check-label,.was-validated .form-check-input:invalid~.form-check-label{color:#cd201f}.form-check-inline .form-check-input~.invalid-feedback{margin-left:.5em}.form-file-input.is-invalid~.form-file-label,.was-validated .form-file-input:invalid~.form-file-label{border-color:#cd201f}.form-file-input.is-invalid:focus~.form-file-label,.was-validated .form-file-input:invalid:focus~.form-file-label{border-color:#cd201f;box-shadow:0 0 0 .2rem rgba(205,32,31,.25)}.btn{display:inline-block;font-weight:500;line-height:1.4666667;color:#354052;text-align:center;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent;border:1px solid transparent;padding:.375rem 1rem;font-size:.875rem;border-radius:3px;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:#354052}.btn.focus,.btn:focus{outline:0;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.btn.disabled,.btn:disabled,fieldset:disabled .btn{pointer-events:none;opacity:.65}.btn-primary{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-primary:hover{color:#fff;background-color:#1b59a3;border-color:#195398}.btn-primary.focus,.btn-primary:focus{color:#fff;background-color:#1b59a3;border-color:#195398;box-shadow:0 0 0 .2rem rgba(65,129,205,.5)}.btn-primary.active,.btn-primary:active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#195398;border-color:#174d8d}.btn-primary.active:focus,.btn-primary:active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(65,129,205,.5)}.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-secondary{color:#fff;background-color:#6e7582;border-color:#6e7582}.btn-secondary:hover{color:#fff;background-color:#5c626d;border-color:#575c66}.btn-secondary.focus,.btn-secondary:focus{color:#fff;background-color:#5c626d;border-color:#575c66;box-shadow:0 0 0 .2rem rgba(132,138,149,.5)}.btn-secondary.active,.btn-secondary:active,.show>.btn-secondary.dropdown-toggle{color:#fff;background-color:#575c66;border-color:#51565f}.btn-secondary.active:focus,.btn-secondary:active:focus,.show>.btn-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(132,138,149,.5)}.btn-secondary.disabled,.btn-secondary:disabled{color:#fff;background-color:#6e7582;border-color:#6e7582}.btn-success{color:#fff;background-color:#5eba00;border-color:#5eba00}.btn-success:hover{color:#fff;background-color:#4b9400;border-color:#448700}.btn-success.focus,.btn-success:focus{color:#fff;background-color:#4b9400;border-color:#448700;box-shadow:0 0 0 .2rem rgba(118,196,38,.5)}.btn-success.active,.btn-success:active,.show>.btn-success.dropdown-toggle{color:#fff;background-color:#448700;border-color:#3e7a00}.btn-success.active:focus,.btn-success:active:focus,.show>.btn-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(118,196,38,.5)}.btn-success.disabled,.btn-success:disabled{color:#fff;background-color:#5eba00;border-color:#5eba00}.btn-info{color:#fff;background-color:#45aaf2;border-color:#45aaf2}.btn-info:hover{color:#fff;background-color:#219af0;border-color:#1594ef}.btn-info.focus,.btn-info:focus{color:#fff;background-color:#219af0;border-color:#1594ef;box-shadow:0 0 0 .2rem rgba(97,183,244,.5)}.btn-info.active,.btn-info:active,.show>.btn-info.dropdown-toggle{color:#fff;background-color:#1594ef;border-color:#108ee7}.btn-info.active:focus,.btn-info:active:focus,.show>.btn-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(97,183,244,.5)}.btn-info.disabled,.btn-info:disabled{color:#fff;background-color:#45aaf2;border-color:#45aaf2}.btn-warning{color:#fff;background-color:#fab005;border-color:#fab005}.btn-warning:hover{color:#fff;background-color:#d59604;border-color:#c88d04}.btn-warning.focus,.btn-warning:focus{color:#fff;background-color:#d59604;border-color:#c88d04;box-shadow:0 0 0 .2rem rgba(251,188,43,.5)}.btn-warning.active,.btn-warning:active,.show>.btn-warning.dropdown-toggle{color:#fff;background-color:#c88d04;border-color:#bc8404}.btn-warning.active:focus,.btn-warning:active:focus,.show>.btn-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(251,188,43,.5)}.btn-warning.disabled,.btn-warning:disabled{color:#fff;background-color:#fab005;border-color:#fab005}.btn-danger{color:#fff;background-color:#cd201f;border-color:#cd201f}.btn-danger:hover{color:#fff;background-color:#ac1b1a;border-color:#a11918}.btn-danger.focus,.btn-danger:focus{color:#fff;background-color:#ac1b1a;border-color:#a11918;box-shadow:0 0 0 .2rem rgba(213,65,65,.5)}.btn-danger.active,.btn-danger:active,.show>.btn-danger.dropdown-toggle{color:#fff;background-color:#a11918;border-color:#961717}.btn-danger.active:focus,.btn-danger:active:focus,.show>.btn-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(213,65,65,.5)}.btn-danger.disabled,.btn-danger:disabled{color:#fff;background-color:#cd201f;border-color:#cd201f}.btn-light{color:#354052;background-color:#f5f7fb;border-color:#f5f7fb}.btn-light:hover{color:#354052;background-color:#dae1f0;border-color:#d1daec}.btn-light.focus,.btn-light:focus{color:#354052;background-color:#dae1f0;border-color:#d1daec;box-shadow:0 0 0 .2rem rgba(216,220,226,.5)}.btn-light.active,.btn-light:active,.show>.btn-light.dropdown-toggle{color:#354052;background-color:#d1daec;border-color:#c7d3e9}.btn-light.active:focus,.btn-light:active:focus,.show>.btn-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(216,220,226,.5)}.btn-light.disabled,.btn-light:disabled{color:#354052;background-color:#f5f7fb;border-color:#f5f7fb}.btn-dark{color:#fff;background-color:#354052;border-color:#354052}.btn-dark:hover{color:#fff;background-color:#262e3b;border-color:#212833}.btn-dark.focus,.btn-dark:focus{color:#fff;background-color:#262e3b;border-color:#212833;box-shadow:0 0 0 .2rem rgba(83,93,108,.5)}.btn-dark.active,.btn-dark:active,.show>.btn-dark.dropdown-toggle{color:#fff;background-color:#212833;border-color:#1c222b}.btn-dark.active:focus,.btn-dark:active:focus,.show>.btn-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(83,93,108,.5)}.btn-dark.disabled,.btn-dark:disabled{color:#fff;background-color:#354052;border-color:#354052}.btn-outline-primary{color:#206bc4;border-color:#206bc4}.btn-outline-primary:hover{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-outline-primary.focus,.btn-outline-primary:focus{box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-outline-primary.active,.btn-outline-primary.dropdown-toggle.show,.btn-outline-primary:active{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-outline-primary.active:focus,.btn-outline-primary.dropdown-toggle.show:focus,.btn-outline-primary:active:focus{box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:#206bc4;background-color:transparent}.btn-outline-secondary{color:#6e7582;border-color:#6e7582}.btn-outline-secondary:hover{color:#fff;background-color:#6e7582;border-color:#6e7582}.btn-outline-secondary.focus,.btn-outline-secondary:focus{box-shadow:0 0 0 .2rem rgba(110,117,130,.5)}.btn-outline-secondary.active,.btn-outline-secondary.dropdown-toggle.show,.btn-outline-secondary:active{color:#fff;background-color:#6e7582;border-color:#6e7582}.btn-outline-secondary.active:focus,.btn-outline-secondary.dropdown-toggle.show:focus,.btn-outline-secondary:active:focus{box-shadow:0 0 0 .2rem rgba(110,117,130,.5)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{color:#6e7582;background-color:transparent}.btn-outline-success{color:#5eba00;border-color:#5eba00}.btn-outline-success:hover{color:#fff;background-color:#5eba00;border-color:#5eba00}.btn-outline-success.focus,.btn-outline-success:focus{box-shadow:0 0 0 .2rem rgba(94,186,0,.5)}.btn-outline-success.active,.btn-outline-success.dropdown-toggle.show,.btn-outline-success:active{color:#fff;background-color:#5eba00;border-color:#5eba00}.btn-outline-success.active:focus,.btn-outline-success.dropdown-toggle.show:focus,.btn-outline-success:active:focus{box-shadow:0 0 0 .2rem rgba(94,186,0,.5)}.btn-outline-success.disabled,.btn-outline-success:disabled{color:#5eba00;background-color:transparent}.btn-outline-info{color:#45aaf2;border-color:#45aaf2}.btn-outline-info:hover{color:#fff;background-color:#45aaf2;border-color:#45aaf2}.btn-outline-info.focus,.btn-outline-info:focus{box-shadow:0 0 0 .2rem rgba(69,170,242,.5)}.btn-outline-info.active,.btn-outline-info.dropdown-toggle.show,.btn-outline-info:active{color:#fff;background-color:#45aaf2;border-color:#45aaf2}.btn-outline-info.active:focus,.btn-outline-info.dropdown-toggle.show:focus,.btn-outline-info:active:focus{box-shadow:0 0 0 .2rem rgba(69,170,242,.5)}.btn-outline-info.disabled,.btn-outline-info:disabled{color:#45aaf2;background-color:transparent}.btn-outline-warning{color:#fab005;border-color:#fab005}.btn-outline-warning:hover{color:#fff;background-color:#fab005;border-color:#fab005}.btn-outline-warning.focus,.btn-outline-warning:focus{box-shadow:0 0 0 .2rem rgba(250,176,5,.5)}.btn-outline-warning.active,.btn-outline-warning.dropdown-toggle.show,.btn-outline-warning:active{color:#fff;background-color:#fab005;border-color:#fab005}.btn-outline-warning.active:focus,.btn-outline-warning.dropdown-toggle.show:focus,.btn-outline-warning:active:focus{box-shadow:0 0 0 .2rem rgba(250,176,5,.5)}.btn-outline-warning.disabled,.btn-outline-warning:disabled{color:#fab005;background-color:transparent}.btn-outline-danger{color:#cd201f;border-color:#cd201f}.btn-outline-danger:hover{color:#fff;background-color:#cd201f;border-color:#cd201f}.btn-outline-danger.focus,.btn-outline-danger:focus{box-shadow:0 0 0 .2rem rgba(205,32,31,.5)}.btn-outline-danger.active,.btn-outline-danger.dropdown-toggle.show,.btn-outline-danger:active{color:#fff;background-color:#cd201f;border-color:#cd201f}.btn-outline-danger.active:focus,.btn-outline-danger.dropdown-toggle.show:focus,.btn-outline-danger:active:focus{box-shadow:0 0 0 .2rem rgba(205,32,31,.5)}.btn-outline-danger.disabled,.btn-outline-danger:disabled{color:#cd201f;background-color:transparent}.btn-outline-light{color:#f5f7fb;border-color:#f5f7fb}.btn-outline-light:hover{color:#354052;background-color:#f5f7fb;border-color:#f5f7fb}.btn-outline-light.focus,.btn-outline-light:focus{box-shadow:0 0 0 .2rem rgba(245,247,251,.5)}.btn-outline-light.active,.btn-outline-light.dropdown-toggle.show,.btn-outline-light:active{color:#354052;background-color:#f5f7fb;border-color:#f5f7fb}.btn-outline-light.active:focus,.btn-outline-light.dropdown-toggle.show:focus,.btn-outline-light:active:focus{box-shadow:0 0 0 .2rem rgba(245,247,251,.5)}.btn-outline-light.disabled,.btn-outline-light:disabled{color:#f5f7fb;background-color:transparent}.btn-outline-dark{color:#354052;border-color:#354052}.btn-outline-dark:hover{color:#fff;background-color:#354052;border-color:#354052}.btn-outline-dark.focus,.btn-outline-dark:focus{box-shadow:0 0 0 .2rem rgba(53,64,82,.5)}.btn-outline-dark.active,.btn-outline-dark.dropdown-toggle.show,.btn-outline-dark:active{color:#fff;background-color:#354052;border-color:#354052}.btn-outline-dark.active:focus,.btn-outline-dark.dropdown-toggle.show:focus,.btn-outline-dark:active:focus{box-shadow:0 0 0 .2rem rgba(53,64,82,.5)}.btn-outline-dark.disabled,.btn-outline-dark:disabled{color:#354052;background-color:transparent}.btn-link{font-weight:400;color:#206bc4;text-decoration:none}.btn-link:hover{color:#154782}.btn-link.disabled,.btn-link:disabled{color:#a8aeb7}.btn-group-lg>.btn,.btn-lg{padding:.5rem 1.5rem;font-size:calc(1.2625rem + .15vw);border-radius:.3rem}@media (min-width:1200px){.btn-group-lg>.btn,.btn-lg{font-size:1.375rem}}.btn-group-sm>.btn,.btn-sm{padding:.125rem .5rem;font-size:.75rem;border-radius:.2rem}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:.5rem}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{height:0;overflow:hidden;transition:height .35s ease}@media (prefers-reduced-motion:reduce){.collapsing{transition:none}}.dropdown,.dropleft,.dropright,.dropup{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle:after{content:"";display:inline-block;vertical-align:.306em;width:.36em;height:.36em;border-bottom:1px solid;border-left:1px solid;margin-right:.1em;margin-left:.4em;transform:rotate(-45deg)}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;min-width:14rem;padding:.5rem 0;margin:1px 0 0;font-size:.875rem;color:#354052;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(110,117,130,.2);border-radius:3px}.dropdown-menu-left{right:auto;left:0}.dropdown-menu-right{right:0;left:auto}@media (min-width:33rem){.dropdown-menu-sm-left{right:auto;left:0}.dropdown-menu-sm-right{right:0;left:auto}}@media (min-width:48rem){.dropdown-menu-md-left{right:auto;left:0}.dropdown-menu-md-right{right:0;left:auto}}@media (min-width:64rem){.dropdown-menu-lg-left{right:auto;left:0}.dropdown-menu-lg-right{right:0;left:auto}}@media (min-width:75.25rem){.dropdown-menu-xl-left{right:auto;left:0}.dropdown-menu-xl-right{right:0;left:auto}}.dropup .dropdown-menu{top:auto;bottom:100%;margin-top:0;margin-bottom:1px}.dropup .dropdown-toggle:after{content:"";display:inline-block;vertical-align:.306em;width:.36em;height:.36em;border-bottom:1px solid;border-left:1px solid;margin-right:.1em;margin-left:.4em;transform:rotate(135deg)}.dropright .dropdown-menu{top:0;right:auto;left:100%;margin-top:0;margin-left:1px}.dropright .dropdown-toggle:after{content:"";display:inline-block;vertical-align:.306em;width:.36em;height:.36em;border-bottom:1px solid;border-left:1px solid;margin-right:.1em;margin-left:.4em;transform:rotate(-135deg)}.dropright .dropdown-toggle::after{vertical-align:0}.dropleft .dropdown-menu{top:0;right:100%;left:auto;margin-top:0;margin-right:1px}.dropleft .dropdown-toggle:before{content:"";display:inline-block;vertical-align:.306em;width:.36em;height:.36em;border-bottom:1px solid;border-left:1px solid;margin-right:.1em;margin-right:.4em;transform:rotate(45deg)}.dropleft .dropdown-toggle:after{content:none}.dropleft .dropdown-toggle::before{vertical-align:0}.dropdown-menu[x-placement^=bottom],.dropdown-menu[x-placement^=left],.dropdown-menu[x-placement^=right],.dropdown-menu[x-placement^=top]{right:auto;bottom:auto}.dropdown-divider{height:0;margin:.5rem 0;overflow:hidden;border-top:1px solid rgba(110,117,130,.2)}.dropdown-item{display:block;width:100%;padding:.25rem 1rem;clear:both;font-weight:400;color:#354052;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}.dropdown-item:focus,.dropdown-item:hover{color:inherit;background-color:rgba(110,117,130,.06)}.dropdown-item.active,.dropdown-item:active{color:#206bc4;text-decoration:none;background-color:rgba(32,107,196,.06)}.dropdown-item.disabled,.dropdown-item:disabled{color:#a8aeb7;pointer-events:none;background-color:transparent}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:.5rem 1rem;margin-bottom:0;font-size:.765625rem;color:#a8aeb7;white-space:nowrap}.dropdown-item-text{display:block;padding:.25rem 1rem;color:#354052}.btn-group,.btn-group-vertical{position:relative;display:inline-flex;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;flex:1 1 auto}.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:hover,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover{z-index:1}.btn-toolbar{display:flex;flex-wrap:wrap;justify-content:flex-start}.btn-toolbar .input-group{width:auto}.btn-group>.btn-group:not(:first-child),.btn-group>.btn:not(:first-child){margin-left:-1px}.btn-group>.btn-group:not(:last-child)>.btn,.btn-group>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:not(:first-child)>.btn,.btn-group>.btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.dropdown-toggle-split::after,.dropright .dropdown-toggle-split::after,.dropup .dropdown-toggle-split::after{margin-left:0}.dropleft .dropdown-toggle-split::before{margin-right:0}.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split{padding-right:.375rem;padding-left:.375rem}.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split{padding-right:1.125rem;padding-left:1.125rem}.btn-group-vertical{flex-direction:column;align-items:flex-start;justify-content:center}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group{width:100%}.btn-group-vertical>.btn-group:not(:first-child),.btn-group-vertical>.btn:not(:first-child){margin-top:-1px}.btn-group-vertical>.btn-group:not(:last-child)>.btn,.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:not(:first-child)>.btn,.btn-group-vertical>.btn:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.btn-group-toggle>.btn,.btn-group-toggle>.btn-group>.btn{margin-bottom:0}.btn-group-toggle>.btn input[type=checkbox],.btn-group-toggle>.btn input[type=radio],.btn-group-toggle>.btn-group>.btn input[type=checkbox],.btn-group-toggle>.btn-group>.btn input[type=radio]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.nav{display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:.25rem .75rem}.nav-link.disabled{color:#a8aeb7;pointer-events:none;cursor:default}.nav-tabs{border-bottom:1px solid #e9ecf1}.nav-tabs .nav-link{margin-bottom:-1px;border:1px solid transparent;border-top-left-radius:3px;border-top-right-radius:3px}.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover{border-color:#f1f3f8 #f1f3f8 #e9ecf1}.nav-tabs .nav-link.disabled{color:#a8aeb7;background-color:transparent;border-color:transparent}.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{color:#7a828f;background-color:#f5f7fb;border-color:#e9ecf1 #e9ecf1 #f5f7fb}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}.nav-pills .nav-link{border-radius:3px}.nav-pills .nav-link.active,.nav-pills .show>.nav-link{color:#fff;background-color:#206bc4}.nav-fill .nav-item{flex:1 1 auto;text-align:center}.nav-justified .nav-item{flex-basis:0;flex-grow:1;text-align:center}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.navbar{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-top:.25rem;padding-bottom:.25rem}.navbar>.container,.navbar>.container-fluid,.navbar>.container-lg,.navbar>.container-md,.navbar>.container-sm,.navbar>.container-xl{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}.navbar-brand{padding-top:.25rem;padding-bottom:.25rem;margin-right:0;font-size:1.125rem;white-space:nowrap}.navbar-brand:focus,.navbar-brand:hover{text-decoration:none}.navbar-nav{display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link{padding-right:0;padding-left:0}.navbar-nav .dropdown-menu{position:static}.navbar-text{padding-top:.25rem;padding-bottom:.25rem}.navbar-collapse{align-items:center;width:100%}.navbar-toggler{padding:0 0;font-size:1rem;line-height:1;background-color:transparent;border:1px solid transparent;border-radius:3px;transition:box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-toggler:hover{text-decoration:none}.navbar-toggler:focus{text-decoration:none;outline:0;box-shadow:0 0}.navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;background-repeat:no-repeat;background-position:center;background-size:100%}@media (min-width:33rem){.navbar-expand-sm{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm .navbar-nav .nav-link{padding-right:.75rem;padding-left:.75rem}.navbar-expand-sm .navbar-collapse{display:flex!important}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:48rem){.navbar-expand-md{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-md .navbar-nav .nav-link{padding-right:.75rem;padding-left:.75rem}.navbar-expand-md .navbar-collapse{display:flex!important}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:64rem){.navbar-expand-lg{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-lg .navbar-nav .nav-link{padding-right:.75rem;padding-left:.75rem}.navbar-expand-lg .navbar-collapse{display:flex!important}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:75.25rem){.navbar-expand-xl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xl .navbar-nav .nav-link{padding-right:.75rem;padding-left:.75rem}.navbar-expand-xl .navbar-collapse{display:flex!important}.navbar-expand-xl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.navbar-expand .navbar-nav .nav-link{padding-right:.75rem;padding-left:.75rem}.navbar-expand .navbar-collapse{display:flex!important}.navbar-expand .navbar-toggler{display:none}.navbar-light .navbar-brand{color:#354052}.navbar-light .navbar-brand:focus,.navbar-light .navbar-brand:hover{color:#354052}.navbar-light .navbar-nav .nav-link{color:rgba(53,64,82,.72)}.navbar-light .navbar-nav .nav-link:focus,.navbar-light .navbar-nav .nav-link:hover{color:rgba(0,0,0,.7)}.navbar-light .navbar-nav .nav-link.disabled{color:rgba(53,64,82,.3)}.navbar-light .navbar-nav .active>.nav-link,.navbar-light .navbar-nav .nav-link.active,.navbar-light .navbar-nav .nav-link.show,.navbar-light .navbar-nav .show>.nav-link{color:#354052}.navbar-light .navbar-toggler{color:rgba(53,64,82,.72);border-color:rgba(0,0,0,.1)}.navbar-light .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2853, 64, 82, 0.72%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.navbar-light .navbar-text{color:rgba(53,64,82,.72)}.navbar-light .navbar-text a,.navbar-light .navbar-text a:focus,.navbar-light .navbar-text a:hover{color:#354052}.navbar-dark .navbar-brand{color:#fff}.navbar-dark .navbar-brand:focus,.navbar-dark .navbar-brand:hover{color:#fff}.navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,.72)}.navbar-dark .navbar-nav .nav-link:focus,.navbar-dark .navbar-nav .nav-link:hover{color:rgba(255,255,255,.75)}.navbar-dark .navbar-nav .nav-link.disabled{color:rgba(255,255,255,.3)}.navbar-dark .navbar-nav .active>.nav-link,.navbar-dark .navbar-nav .nav-link.active,.navbar-dark .navbar-nav .nav-link.show,.navbar-dark .navbar-nav .show>.nav-link{color:#fff}.navbar-dark .navbar-toggler{color:rgba(255,255,255,.72);border-color:rgba(255,255,255,.1)}.navbar-dark .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.72%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.navbar-dark .navbar-text{color:rgba(255,255,255,.72)}.navbar-dark .navbar-text a,.navbar-dark .navbar-text a:focus,.navbar-dark .navbar-text a:hover{color:#fff}.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(110,117,130,.2);border-radius:3px}.card>.hr,.card>hr{margin-right:0;margin-left:0}.card>.list-group:first-child .list-group-item:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.card>.list-group:last-child .list-group-item:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.card-body{flex:1 1 auto;padding:1.25rem 1.25rem}.card-title{margin-bottom:.75rem}.card-subtitle{margin-top:-.375rem;margin-bottom:0}.card-text:last-child{margin-bottom:0}.card-link:hover{text-decoration:none}.card-link+.card-link{margin-left:1.25rem}.card-header{padding:.75rem 1.25rem;margin-bottom:0;background-color:rgba(53,64,82,.024);border-bottom:1px solid rgba(110,117,130,.2)}.card-header:first-child{border-radius:2px 2px 0 0}.card-header+.list-group .list-group-item:first-child{border-top:0}.card-footer{padding:.75rem 1.25rem;background-color:rgba(53,64,82,.024);border-top:1px solid rgba(110,117,130,.2)}.card-footer:last-child{border-radius:0 0 2px 2px}.card-header-tabs{margin-right:-.625rem;margin-bottom:-.75rem;margin-left:-.625rem;border-bottom:0}.card-header-tabs .nav-link.active{background-color:#fff;border-bottom-color:#fff}.card-header-pills{margin-right:-.625rem;margin-left:-.625rem}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:1.25rem}.card-img,.card-img-bottom,.card-img-top{width:100%}.card-img,.card-img-top{border-top-left-radius:2px;border-top-right-radius:2px}.card-img,.card-img-bottom{border-bottom-right-radius:2px;border-bottom-left-radius:2px}.card-group>.card{margin-bottom:1.5rem}@media (min-width:33rem){.card-group{display:flex;flex-flow:row wrap}.card-group>.card{flex:1 0 0%;margin-bottom:0}.card-group>.card+.card{margin-left:0;border-left:0}.card-group>.card:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.card-group>.card:not(:last-child) .card-header,.card-group>.card:not(:last-child) .card-img-top{border-top-right-radius:0}.card-group>.card:not(:last-child) .card-footer,.card-group>.card:not(:last-child) .card-img-bottom{border-bottom-right-radius:0}.card-group>.card:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.card-group>.card:not(:first-child) .card-header,.card-group>.card:not(:first-child) .card-img-top{border-top-left-radius:0}.card-group>.card:not(:first-child) .card-footer,.card-group>.card:not(:first-child) .card-img-bottom{border-bottom-left-radius:0}}.accordion>.card{overflow:hidden}.accordion>.card:not(:last-of-type){border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.accordion>.card:not(:first-of-type){border-top-left-radius:0;border-top-right-radius:0}.accordion>.card>.card-header{border-radius:0;margin-bottom:-1px}.breadcrumb{display:flex;flex-wrap:wrap;padding:.75rem 1rem;margin-bottom:1rem;list-style:none;background-color:#f1f3f8;border-radius:3px}.breadcrumb-item{display:flex}.breadcrumb-item+.breadcrumb-item{padding-left:.5rem}.breadcrumb-item+.breadcrumb-item::before{display:inline-block;padding-right:.5rem;color:#a8aeb7;content:"/"}.breadcrumb-item.active{color:#a8aeb7}.pagination{display:flex;padding-left:0;list-style:none}.page-link{position:relative;display:block;color:#6e7582;background-color:transparent;border:0 solid #e9ecf1}.page-link:hover{z-index:2;color:#154782;background-color:#f1f3f8;border-color:#e9ecf1}.page-link:focus{z-index:3;outline:0;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.page-item:not(:first-child) .page-link{margin-left:0}.page-item.active .page-link{z-index:3;color:#fff;background-color:#206bc4;border-color:#206bc4}.page-item.disabled .page-link{color:rgba(110,117,130,.5);pointer-events:none;background-color:transparent;border-color:#e9ecf1}.page-link{padding:.25rem .25rem}.page-item:first-child .page-link{border-top-left-radius:3px;border-bottom-left-radius:3px}.page-item:last-child .page-link{border-top-right-radius:3px;border-bottom-right-radius:3px}.pagination-lg .page-link{padding:.75rem 1.5rem;font-size:1.09375rem}.pagination-lg .page-item:first-child .page-link{border-top-left-radius:.3rem;border-bottom-left-radius:.3rem}.pagination-lg .page-item:last-child .page-link{border-top-right-radius:.3rem;border-bottom-right-radius:.3rem}.pagination-sm .page-link{padding:.25rem .5rem;font-size:.765625rem}.pagination-sm .page-item:first-child .page-link{border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}.pagination-sm .page-item:last-child .page-link{border-top-right-radius:.2rem;border-bottom-right-radius:.2rem}.badge{display:inline-block;padding:.125rem .25rem;font-size:.625rem;font-weight:500;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:3px}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.alert{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:3px}.alert-heading{color:inherit}.alert-link{font-weight:500}.alert-dismissible{padding-right:4rem}.alert-dismissible .close{position:absolute;top:0;right:0;padding:.75rem 1.25rem;color:inherit}.alert-primary{color:#061527;background-color:#d2e1f3;border-color:#a6c4e7}.alert-primary .alert-link{color:#000}.alert-secondary{color:#16171a;background-color:#e2e3e6;border-color:#c5c8cd}.alert-secondary .alert-link{color:#000}.alert-success{color:#132500;background-color:#dff1cc;border-color:#bfe399}.alert-success .alert-link{color:#000}.alert-info{color:#0e2230;background-color:#daeefc;border-color:#b5ddfa}.alert-info .alert-link{color:#020609}.alert-warning{color:#322301;background-color:#feefcd;border-color:#fddf9b}.alert-warning .alert-link{color:#000}.alert-danger{color:#290606;background-color:#f5d2d2;border-color:#eba6a5}.alert-danger .alert-link{color:#000}.alert-light{color:#313132;background-color:#fdfdfe;border-color:#fbfcfd}.alert-light .alert-link{color:#181818}.alert-dark{color:#0b0d10;background-color:#d7d9dc;border-color:#aeb3ba}.alert-dark .alert-link{color:#000}@-webkit-keyframes progress-bar-stripes{0%{background-position-x:.5rem}}@keyframes progress-bar-stripes{0%{background-position-x:.5rem}}.progress{display:flex;height:.5rem;overflow:hidden;font-size:.65625rem;background-color:rgba(176,181,190,.24);border-radius:3px}.progress-bar{display:flex;flex-direction:column;justify-content:center;overflow:hidden;color:#fff;text-align:center;white-space:nowrap;background-color:#206bc4;transition:width .6s ease}@media (prefers-reduced-motion:reduce){.progress-bar{transition:none}}.progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:.5rem .5rem}.progress-bar-animated{-webkit-animation:progress-bar-stripes 1s linear infinite;animation:progress-bar-stripes 1s linear infinite}@media (prefers-reduced-motion:reduce){.progress-bar-animated{-webkit-animation:none;animation:none}}.list-group{display:flex;flex-direction:column;padding-left:0;margin-bottom:0}.list-group-item-action{width:100%;color:inherit;text-align:inherit}.list-group-item-action:focus,.list-group-item-action:hover{z-index:1;color:inherit;text-decoration:none;background-color:#f5f7fb}.list-group-item-action:active{color:#354052;background-color:#f1f3f8}.list-group-item{position:relative;display:block;padding:.5rem .75rem;margin-bottom:0;background-color:inherit;border:1px solid rgba(110,117,130,.2)}.list-group-item:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.list-group-item:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.list-group-item.disabled,.list-group-item:disabled{color:#a8aeb7;pointer-events:none;background-color:inherit}.list-group-item.active{z-index:2;color:#fff;background-color:#206bc4;border-color:#206bc4}.list-group-item+.list-group-item{border-top-width:0}.list-group-item+.list-group-item.active{margin-top:-1px;border-top-width:1px}.list-group-horizontal{flex-direction:row}.list-group-horizontal .list-group-item:first-child{border-bottom-left-radius:3px;border-top-right-radius:0}.list-group-horizontal .list-group-item:last-child{border-top-right-radius:3px;border-bottom-left-radius:0}.list-group-horizontal .list-group-item.active{margin-top:0}.list-group-horizontal .list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal .list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}@media (min-width:33rem){.list-group-horizontal-sm{flex-direction:row}.list-group-horizontal-sm .list-group-item:first-child{border-bottom-left-radius:3px;border-top-right-radius:0}.list-group-horizontal-sm .list-group-item:last-child{border-top-right-radius:3px;border-bottom-left-radius:0}.list-group-horizontal-sm .list-group-item.active{margin-top:0}.list-group-horizontal-sm .list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-sm .list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media (min-width:48rem){.list-group-horizontal-md{flex-direction:row}.list-group-horizontal-md .list-group-item:first-child{border-bottom-left-radius:3px;border-top-right-radius:0}.list-group-horizontal-md .list-group-item:last-child{border-top-right-radius:3px;border-bottom-left-radius:0}.list-group-horizontal-md .list-group-item.active{margin-top:0}.list-group-horizontal-md .list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-md .list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media (min-width:64rem){.list-group-horizontal-lg{flex-direction:row}.list-group-horizontal-lg .list-group-item:first-child{border-bottom-left-radius:3px;border-top-right-radius:0}.list-group-horizontal-lg .list-group-item:last-child{border-top-right-radius:3px;border-bottom-left-radius:0}.list-group-horizontal-lg .list-group-item.active{margin-top:0}.list-group-horizontal-lg .list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-lg .list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media (min-width:75.25rem){.list-group-horizontal-xl{flex-direction:row}.list-group-horizontal-xl .list-group-item:first-child{border-bottom-left-radius:3px;border-top-right-radius:0}.list-group-horizontal-xl .list-group-item:last-child{border-top-right-radius:3px;border-bottom-left-radius:0}.list-group-horizontal-xl .list-group-item.active{margin-top:0}.list-group-horizontal-xl .list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-xl .list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}.list-group-flush .list-group-item{border-right-width:0;border-left-width:0;border-radius:0}.list-group-flush .list-group-item:first-child{border-top-width:0}.list-group-flush:last-child .list-group-item:last-child{border-bottom-width:0}.list-group-item-primary{color:#0d2b4e;background-color:#e9f0f9}.list-group-item-primary.list-group-item-action:focus,.list-group-item-primary.list-group-item-action:hover{color:#0d2b4e;background-color:#d5e2f4}.list-group-item-primary.list-group-item-action.active{color:#fff;background-color:#0d2b4e;border-color:#0d2b4e}.list-group-item-secondary{color:#2c2f34;background-color:#f1f1f3}.list-group-item-secondary.list-group-item-action:focus,.list-group-item-secondary.list-group-item-action:hover{color:#2c2f34;background-color:#e3e3e7}.list-group-item-secondary.list-group-item-action.active{color:#fff;background-color:#2c2f34;border-color:#2c2f34}.list-group-item-success{color:#264a00;background-color:#eff8e6}.list-group-item-success.list-group-item-action:focus,.list-group-item-success.list-group-item-action:hover{color:#264a00;background-color:#e2f2d2}.list-group-item-success.list-group-item-action.active{color:#fff;background-color:#264a00;border-color:#264a00}.list-group-item-info{color:#1c4461;background-color:#ecf7fe}.list-group-item-info.list-group-item-action:focus,.list-group-item-info.list-group-item-action:hover{color:#1c4461;background-color:#d4edfd}.list-group-item-info.list-group-item-action.active{color:#fff;background-color:#1c4461;border-color:#1c4461}.list-group-item-warning{color:#644602;background-color:#fff7e6}.list-group-item-warning.list-group-item-action:focus,.list-group-item-warning.list-group-item-action:hover{color:#644602;background-color:#ffefcd}.list-group-item-warning.list-group-item-action.active{color:#fff;background-color:#644602;border-color:#644602}.list-group-item-danger{color:#520d0c;background-color:#fae9e9}.list-group-item-danger.list-group-item-action:focus,.list-group-item-danger.list-group-item-action:hover{color:#520d0c;background-color:#f5d4d4}.list-group-item-danger.list-group-item-action.active{color:#fff;background-color:#520d0c;border-color:#520d0c}.list-group-item-light{color:#626364;background-color:#fefeff}.list-group-item-light.list-group-item-action:focus,.list-group-item-light.list-group-item-action:hover{color:#626364;background-color:#e5e5ff}.list-group-item-light.list-group-item-action.active{color:#fff;background-color:#626364;border-color:#626364}.list-group-item-dark{color:#151a21;background-color:#ebecee}.list-group-item-dark.list-group-item-action:focus,.list-group-item-dark.list-group-item-action:hover{color:#151a21;background-color:#dddfe2}.list-group-item-dark.list-group-item-action.active{color:#fff;background-color:#151a21;border-color:#151a21}.close{font-size:calc(1.275rem + .3vw);font-weight:400;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}@media (min-width:1200px){.close{font-size:1.5rem}}.close:hover{color:#000;text-decoration:none}.close:focus,.close:hover{opacity:.75}.close.disabled,.close:disabled{pointer-events:none}button.close{padding:0;background-color:transparent;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.toast{max-width:350px;overflow:hidden;font-size:.875rem;background-color:rgba(255,255,255,.85);background-clip:padding-box;border:1px solid rgba(110,117,130,.2);box-shadow:0 .5rem 1rem rgba(0,0,0,.15);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;border-radius:3px}.toast:not(:last-child){margin-bottom:.75rem}.toast.showing{opacity:1}.toast.show{display:block;opacity:1}.toast.hide{display:none}.toast-header{display:flex;align-items:center;padding:.25rem .75rem;color:#6e7582;background-color:rgba(255,255,255,.85);background-clip:padding-box;border-bottom:1px solid rgba(0,0,0,.05)}.toast-body{padding:.75rem}.modal-open{overflow:hidden}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal{position:fixed;top:0;left:0;z-index:1050;display:none;width:100%;height:100%;overflow:hidden;outline:0}.modal-dialog{position:relative;width:auto;margin:.5rem;pointer-events:none}.modal.fade .modal-dialog{transition:transform .3s ease-out;transform:translate(0,-1rem)}@media (prefers-reduced-motion:reduce){.modal.fade .modal-dialog{transition:none}}.modal.show .modal-dialog{transform:none}.modal.modal-static .modal-dialog{transform:scale(1.02)}.modal-dialog-scrollable{max-height:calc(100% - 1rem)}.modal-dialog-scrollable .modal-content{overflow:hidden}.modal-dialog-scrollable .modal-footer,.modal-dialog-scrollable .modal-header{flex-shrink:0}.modal-dialog-scrollable .modal-body{overflow-y:auto}.modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - 1rem)}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background-color:#fbfbfb;background-clip:padding-box;border:1px solid rgba(110,117,130,.1);border-radius:3px;outline:0}.modal-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#354052}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:.24}.modal-header{display:flex;align-items:flex-start;justify-content:space-between;padding:1.5rem;border-bottom:1px solid rgba(110,117,130,.1);border-top-left-radius:2px;border-top-right-radius:2px}.modal-header .close{padding:1.5rem;margin:-1rem -1rem -1rem auto}.modal-title{margin-bottom:0;line-height:1.7142857}.modal-body{position:relative;flex:1 1 auto;padding:1.5rem}.modal-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;padding:1.125rem;border-top:0 solid rgba(110,117,130,.1);border-bottom-right-radius:2px;border-bottom-left-radius:2px}.modal-footer>*{margin:.375rem}.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media (min-width:33rem){.modal-dialog{max-width:540px;margin:1.75rem auto}.modal-dialog-scrollable{max-height:calc(100% - 3.5rem)}.modal-dialog-centered{min-height:calc(100% - 3.5rem)}.modal-sm{max-width:380px}}@media (min-width:64rem){.modal-lg,.modal-xl{max-width:720px}}@media (min-width:75.25rem){.modal-xl{max-width:1140px}}.tooltip{position:absolute;z-index:1070;display:block;margin:0;font-family:Ubuntu,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-style:normal;font-weight:400;line-height:1.7142857;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.765625rem;word-wrap:break-word;opacity:0}.tooltip.show{opacity:.9}.tooltip .tooltip-arrow{position:absolute;display:block;width:.8rem;height:.4rem}.tooltip .tooltip-arrow::before{position:absolute;content:"";border-color:transparent;border-style:solid}.bs-tooltip-auto[x-placement^=top],.bs-tooltip-top{padding:.4rem 0}.bs-tooltip-auto[x-placement^=top] .tooltip-arrow,.bs-tooltip-top .tooltip-arrow{bottom:0}.bs-tooltip-auto[x-placement^=top] .tooltip-arrow::before,.bs-tooltip-top .tooltip-arrow::before{top:0;border-width:.4rem .4rem 0;border-top-color:#000}.bs-tooltip-auto[x-placement^=right],.bs-tooltip-right{padding:0 .4rem}.bs-tooltip-auto[x-placement^=right] .tooltip-arrow,.bs-tooltip-right .tooltip-arrow{left:0;width:.4rem;height:.8rem}.bs-tooltip-auto[x-placement^=right] .tooltip-arrow::before,.bs-tooltip-right .tooltip-arrow::before{right:0;border-width:.4rem .4rem .4rem 0;border-right-color:#000}.bs-tooltip-auto[x-placement^=bottom],.bs-tooltip-bottom{padding:.4rem 0}.bs-tooltip-auto[x-placement^=bottom] .tooltip-arrow,.bs-tooltip-bottom .tooltip-arrow{top:0}.bs-tooltip-auto[x-placement^=bottom] .tooltip-arrow::before,.bs-tooltip-bottom .tooltip-arrow::before{bottom:0;border-width:0 .4rem .4rem;border-bottom-color:#000}.bs-tooltip-auto[x-placement^=left],.bs-tooltip-left{padding:0 .4rem}.bs-tooltip-auto[x-placement^=left] .tooltip-arrow,.bs-tooltip-left .tooltip-arrow{right:0;width:.4rem;height:.8rem}.bs-tooltip-auto[x-placement^=left] .tooltip-arrow::before,.bs-tooltip-left .tooltip-arrow::before{left:0;border-width:.4rem 0 .4rem .4rem;border-left-color:#000}.tooltip-inner{max-width:200px;padding:.25rem .5rem;color:#fff;text-align:center;background-color:#000;border-radius:3px}.popover{position:absolute;top:0;left:0;z-index:1060;display:block;max-width:276px;font-family:Ubuntu,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-style:normal;font-weight:400;line-height:1.7142857;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.765625rem;word-wrap:break-word;background-color:#fff;background-clip:padding-box;border:1px solid rgba(110,117,130,.2);border-radius:.3rem}.popover .popover-arrow{position:absolute;display:block;width:1rem;height:.5rem;margin:0 .3rem}.popover .popover-arrow::after,.popover .popover-arrow::before{position:absolute;display:block;content:"";border-color:transparent;border-style:solid}.bs-popover-auto[x-placement^=top],.bs-popover-top{margin-bottom:.5rem}.bs-popover-auto[x-placement^=top]>.popover-arrow,.bs-popover-top>.popover-arrow{bottom:calc(-.5rem - 1px)}.bs-popover-auto[x-placement^=top]>.popover-arrow::before,.bs-popover-top>.popover-arrow::before{bottom:0;border-width:.5rem .5rem 0;border-top-color:rgba(110,117,130,.25)}.bs-popover-auto[x-placement^=top]>.popover-arrow::after,.bs-popover-top>.popover-arrow::after{bottom:1px;border-width:.5rem .5rem 0;border-top-color:#fff}.bs-popover-auto[x-placement^=right],.bs-popover-right{margin-left:.5rem}.bs-popover-auto[x-placement^=right]>.popover-arrow,.bs-popover-right>.popover-arrow{left:calc(-.5rem - 1px);width:.5rem;height:1rem;margin:.3rem 0}.bs-popover-auto[x-placement^=right]>.popover-arrow::before,.bs-popover-right>.popover-arrow::before{left:0;border-width:.5rem .5rem .5rem 0;border-right-color:rgba(110,117,130,.25)}.bs-popover-auto[x-placement^=right]>.popover-arrow::after,.bs-popover-right>.popover-arrow::after{left:1px;border-width:.5rem .5rem .5rem 0;border-right-color:#fff}.bs-popover-auto[x-placement^=bottom],.bs-popover-bottom{margin-top:.5rem}.bs-popover-auto[x-placement^=bottom]>.popover-arrow,.bs-popover-bottom>.popover-arrow{top:calc(-.5rem - 1px)}.bs-popover-auto[x-placement^=bottom]>.popover-arrow::before,.bs-popover-bottom>.popover-arrow::before{top:0;border-width:0 .5rem .5rem .5rem;border-bottom-color:rgba(110,117,130,.25)}.bs-popover-auto[x-placement^=bottom]>.popover-arrow::after,.bs-popover-bottom>.popover-arrow::after{top:1px;border-width:0 .5rem .5rem .5rem;border-bottom-color:#fff}.bs-popover-auto[x-placement^=bottom] .popover-header::before,.bs-popover-bottom .popover-header::before{position:absolute;top:0;left:50%;display:block;width:1rem;margin-left:-.5rem;content:"";border-bottom:1px solid #f7f7f7}.bs-popover-auto[x-placement^=left],.bs-popover-left{margin-right:.5rem}.bs-popover-auto[x-placement^=left]>.popover-arrow,.bs-popover-left>.popover-arrow{right:calc(-.5rem - 1px);width:.5rem;height:1rem;margin:.3rem 0}.bs-popover-auto[x-placement^=left]>.popover-arrow::before,.bs-popover-left>.popover-arrow::before{right:0;border-width:.5rem 0 .5rem .5rem;border-left-color:rgba(110,117,130,.25)}.bs-popover-auto[x-placement^=left]>.popover-arrow::after,.bs-popover-left>.popover-arrow::after{right:1px;border-width:.5rem 0 .5rem .5rem;border-left-color:#fff}.popover-header{padding:.5rem .75rem;margin-bottom:0;font-size:.875rem;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px)}.popover-header:empty{display:none}.popover-body{padding:.5rem .75rem;color:#354052}.carousel{position:relative}.carousel.pointer-event{touch-action:pan-y}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner::after{display:block;clear:both;content:""}.carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .6s ease-in-out}@media (prefers-reduced-motion:reduce){.carousel-item{transition:none}}.carousel-item-next,.carousel-item-prev,.carousel-item.active{display:block}.active.carousel-item-right,.carousel-item-next:not(.carousel-item-left){transform:translateX(100%)}.active.carousel-item-left,.carousel-item-prev:not(.carousel-item-right){transform:translateX(-100%)}.carousel-fade .carousel-item{opacity:0;transition-property:opacity;transform:none}.carousel-fade .carousel-item-next.carousel-item-left,.carousel-fade .carousel-item-prev.carousel-item-right,.carousel-fade .carousel-item.active{z-index:1;opacity:1}.carousel-fade .active.carousel-item-left,.carousel-fade .active.carousel-item-right{z-index:0;opacity:0;transition:opacity 0s .6s}@media (prefers-reduced-motion:reduce){.carousel-fade .active.carousel-item-left,.carousel-fade .active.carousel-item-right{transition:none}}.carousel-control-next,.carousel-control-prev{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;color:#fff;text-align:center;opacity:.5;transition:opacity .15s ease}@media (prefers-reduced-motion:reduce){.carousel-control-next,.carousel-control-prev{transition:none}}.carousel-control-next:focus,.carousel-control-next:hover,.carousel-control-prev:focus,.carousel-control-prev:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-next-icon,.carousel-control-prev-icon{display:inline-block;width:1.5rem;height:1.5rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.carousel-control-prev-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='15 18 9 12 15 6'%3e%3c/polyline%3e%3c/svg%3e")}.carousel-control-next-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='9 18 15 12 9 6'%3e%3c/polyline%3e%3c/svg%3e")}.carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding-left:0;margin-right:15%;margin-left:15%;list-style:none}.carousel-indicators li{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#fff;background-clip:padding-box;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}@media (prefers-reduced-motion:reduce){.carousel-indicators li{transition:none}}.carousel-indicators .active{opacity:1}.carousel-caption{position:absolute;right:15%;bottom:1.25rem;left:15%;padding-top:1.25rem;padding-bottom:1.25rem;color:#fff;text-align:center}@-webkit-keyframes spinner-border{to{transform:rotate(360deg)}}@keyframes spinner-border{to{transform:rotate(360deg)}}.spinner-border{display:inline-block;width:1.5rem;height:1.5rem;vertical-align:text-bottom;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;-webkit-animation:spinner-border .75s linear infinite;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:1rem;height:1rem;border-width:1px}@-webkit-keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1}}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1}}.spinner-grow{display:inline-block;width:1.5rem;height:1.5rem;vertical-align:text-bottom;background-color:currentColor;border-radius:50%;opacity:0;-webkit-animation:spinner-grow .75s linear infinite;animation:spinner-grow .75s linear infinite}.spinner-grow-sm{width:1rem;height:1rem}.clearfix::after{display:block;clear:both;content:""}.link-primary{color:#206bc4}.link-primary:focus,.link-primary:hover{color:#154782}.link-secondary{color:#6e7582}.link-secondary:focus,.link-secondary:hover{color:#4b5059}.link-success{color:#5eba00}.link-success:focus,.link-success:hover{color:#376e00}.link-info{color:#45aaf2}.link-info:focus,.link-info:hover{color:#0f86db}.link-warning{color:#fab005}.link-warning:focus,.link-warning:hover{color:#af7b04}.link-danger{color:#cd201f}.link-danger:focus,.link-danger:hover{color:#8b1615}.link-light{color:#f5f7fb}.link-light:focus,.link-light:hover{color:#becbe5}.link-dark{color:#354052}.link-dark:focus,.link-dark:hover{color:#171c24}.embed-responsive{position:relative;width:100%}.embed-responsive::before{display:block;content:""}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.embed-responsive-21by9::before{padding-top:42.8571429%}.embed-responsive-16by9::before{padding-top:56.25%}.embed-responsive-4by3::before{padding-top:75%}.embed-responsive-1by1::before{padding-top:100%}.embed-responsive-2by1::before{padding-top:50%}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}.fixed-bottom{position:fixed;right:0;bottom:0;left:0;z-index:1030}@supports ((position:-webkit-sticky) or (position:sticky)){.sticky-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}@media (min-width:33rem){.sticky-sm-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}@media (min-width:48rem){.sticky-md-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}@media (min-width:64rem){.sticky-lg-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}@media (min-width:75.25rem){.sticky-xl-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}}.sr-only,.sr-only-focusable:not(:focus){position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.stretched-link::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;content:""}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.align-baseline{vertical-align:baseline!important}.align-top{vertical-align:top!important}.align-middle{vertical-align:middle!important}.align-bottom{vertical-align:bottom!important}.align-text-bottom{vertical-align:text-bottom!important}.align-text-top{vertical-align:text-top!important}.float-left{float:left!important}.float-right{float:right!important}.float-none{float:none!important}.overflow-auto{overflow:auto!important}.overflow-hidden{overflow:hidden!important}.d-none{display:none!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.shadow{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}.shadow-sm{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}.shadow-lg{box-shadow:0 1rem 3rem rgba(0,0,0,.175)!important}.shadow-none{box-shadow:none!important}.position-static{position:static!important}.position-relative{position:relative!important}.position-absolute{position:absolute!important}.position-fixed{position:fixed!important}.position-sticky{position:-webkit-sticky!important;position:sticky!important}.border{border:1px solid rgba(110,117,130,.2)!important}.border-wide{border:2px solid rgba(110,117,130,.2)!important}.border-0{border:0!important}.border-top{border-top:1px solid rgba(110,117,130,.2)!important}.border-top-wide{border-top:2px solid rgba(110,117,130,.2)!important}.border-top-0{border-top:0!important}.border-right{border-right:1px solid rgba(110,117,130,.2)!important}.border-right-wide{border-right:2px solid rgba(110,117,130,.2)!important}.border-right-0{border-right:0!important}.border-bottom{border-bottom:1px solid rgba(110,117,130,.2)!important}.border-bottom-wide{border-bottom:2px solid rgba(110,117,130,.2)!important}.border-bottom-0{border-bottom:0!important}.border-left{border-left:1px solid rgba(110,117,130,.2)!important}.border-left-wide{border-left:2px solid rgba(110,117,130,.2)!important}.border-left-0{border-left:0!important}.border-primary{border-color:#206bc4!important}.border-secondary{border-color:#6e7582!important}.border-success{border-color:#5eba00!important}.border-info{border-color:#45aaf2!important}.border-warning{border-color:#fab005!important}.border-danger{border-color:#cd201f!important}.border-light{border-color:#f5f7fb!important}.border-dark{border-color:#354052!important}.border-white{border-color:#fff!important}.w-1{width:1%!important}.w-25{width:25%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.w-auto{width:auto!important}.mw-100{max-width:100%!important}.vw-100{width:100vw!important}.min-vw-100{min-width:100vw!important}.h-1{height:1%!important}.h-25{height:25%!important}.h-50{height:50%!important}.h-75{height:75%!important}.h-100{height:100%!important}.h-auto{height:auto!important}.mh-100{max-height:100%!important}.vh-100{height:100vh!important}.min-vh-100{min-height:100vh!important}.flex-fill{flex:1 1 auto!important}.flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important}.flex-row-reverse{flex-direction:row-reverse!important}.flex-column-reverse{flex-direction:column-reverse!important}.flex-grow-0{flex-grow:0!important}.flex-grow-1{flex-grow:1!important}.flex-shrink-0{flex-shrink:0!important}.flex-shrink-1{flex-shrink:1!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}.flex-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-start{justify-content:flex-start!important}.justify-content-end{justify-content:flex-end!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}.align-items-start{align-items:flex-start!important}.align-items-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.align-items-baseline{align-items:baseline!important}.align-items-stretch{align-items:stretch!important}.align-content-start{align-content:flex-start!important}.align-content-end{align-content:flex-end!important}.align-content-center{align-content:center!important}.align-content-between{align-content:space-between!important}.align-content-around{align-content:space-around!important}.align-content-stretch{align-content:stretch!important}.align-self-auto{-ms-grid-row-align:auto!important;align-self:auto!important}.align-self-start{align-self:flex-start!important}.align-self-end{align-self:flex-end!important}.align-self-center{-ms-grid-row-align:center!important;align-self:center!important}.align-self-baseline{align-self:baseline!important}.align-self-stretch{-ms-grid-row-align:stretch!important;align-self:stretch!important}.order-first{order:-1!important}.order-0{order:0!important}.order-1{order:1!important}.order-2{order:2!important}.order-3{order:3!important}.order-4{order:4!important}.order-5{order:5!important}.order-last{order:6!important}.m-0{margin:0!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}.m-3{margin:1rem!important}.m-4{margin:1.5rem!important}.m-5{margin:3rem!important}.m-6{margin:4.5rem!important}.m-auto{margin:auto!important}.mx-0{margin-right:0!important;margin-left:0!important}.mx-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-3{margin-right:1rem!important;margin-left:1rem!important}.mx-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-5{margin-right:3rem!important;margin-left:3rem!important}.mx-6{margin-right:4.5rem!important;margin-left:4.5rem!important}.mx-auto{margin-right:auto!important;margin-left:auto!important}.my-0{margin-top:0!important;margin-bottom:0!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-6{margin-top:4.5rem!important;margin-bottom:4.5rem!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}.mt-6{margin-top:4.5rem!important}.mt-auto{margin-top:auto!important}.mr-0{margin-right:0!important}.mr-1{margin-right:.25rem!important}.mr-2{margin-right:.5rem!important}.mr-3{margin-right:1rem!important}.mr-4{margin-right:1.5rem!important}.mr-5{margin-right:3rem!important}.mr-6{margin-right:4.5rem!important}.mr-auto{margin-right:auto!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}.mb-6{margin-bottom:4.5rem!important}.mb-auto{margin-bottom:auto!important}.ml-0{margin-left:0!important}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.ml-3{margin-left:1rem!important}.ml-4{margin-left:1.5rem!important}.ml-5{margin-left:3rem!important}.ml-6{margin-left:4.5rem!important}.ml-auto{margin-left:auto!important}.m-n1{margin:-.25rem!important}.m-n2{margin:-.5rem!important}.m-n3{margin:-1rem!important}.m-n4{margin:-1.5rem!important}.m-n5{margin:-3rem!important}.m-n6{margin:-4.5rem!important}.mx-n1{margin-right:-.25rem!important;margin-left:-.25rem!important}.mx-n2{margin-right:-.5rem!important;margin-left:-.5rem!important}.mx-n3{margin-right:-1rem!important;margin-left:-1rem!important}.mx-n4{margin-right:-1.5rem!important;margin-left:-1.5rem!important}.mx-n5{margin-right:-3rem!important;margin-left:-3rem!important}.mx-n6{margin-right:-4.5rem!important;margin-left:-4.5rem!important}.my-n1{margin-top:-.25rem!important;margin-bottom:-.25rem!important}.my-n2{margin-top:-.5rem!important;margin-bottom:-.5rem!important}.my-n3{margin-top:-1rem!important;margin-bottom:-1rem!important}.my-n4{margin-top:-1.5rem!important;margin-bottom:-1.5rem!important}.my-n5{margin-top:-3rem!important;margin-bottom:-3rem!important}.my-n6{margin-top:-4.5rem!important;margin-bottom:-4.5rem!important}.mt-n1{margin-top:-.25rem!important}.mt-n2{margin-top:-.5rem!important}.mt-n3{margin-top:-1rem!important}.mt-n4{margin-top:-1.5rem!important}.mt-n5{margin-top:-3rem!important}.mt-n6{margin-top:-4.5rem!important}.mr-n1{margin-right:-.25rem!important}.mr-n2{margin-right:-.5rem!important}.mr-n3{margin-right:-1rem!important}.mr-n4{margin-right:-1.5rem!important}.mr-n5{margin-right:-3rem!important}.mr-n6{margin-right:-4.5rem!important}.mb-n1{margin-bottom:-.25rem!important}.mb-n2{margin-bottom:-.5rem!important}.mb-n3{margin-bottom:-1rem!important}.mb-n4{margin-bottom:-1.5rem!important}.mb-n5{margin-bottom:-3rem!important}.mb-n6{margin-bottom:-4.5rem!important}.ml-n1{margin-left:-.25rem!important}.ml-n2{margin-left:-.5rem!important}.ml-n3{margin-left:-1rem!important}.ml-n4{margin-left:-1.5rem!important}.ml-n5{margin-left:-3rem!important}.ml-n6{margin-left:-4.5rem!important}.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.p-5{padding:3rem!important}.p-6{padding:4.5rem!important}.px-0{padding-right:0!important;padding-left:0!important}.px-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-3{padding-right:1rem!important;padding-left:1rem!important}.px-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-5{padding-right:3rem!important;padding-left:3rem!important}.px-6{padding-right:4.5rem!important;padding-left:4.5rem!important}.py-0{padding-top:0!important;padding-bottom:0!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}.py-6{padding-top:4.5rem!important;padding-bottom:4.5rem!important}.pt-0{padding-top:0!important}.pt-1{padding-top:.25rem!important}.pt-2{padding-top:.5rem!important}.pt-3{padding-top:1rem!important}.pt-4{padding-top:1.5rem!important}.pt-5{padding-top:3rem!important}.pt-6{padding-top:4.5rem!important}.pr-0{padding-right:0!important}.pr-1{padding-right:.25rem!important}.pr-2{padding-right:.5rem!important}.pr-3{padding-right:1rem!important}.pr-4{padding-right:1.5rem!important}.pr-5{padding-right:3rem!important}.pr-6{padding-right:4.5rem!important}.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:.25rem!important}.pb-2{padding-bottom:.5rem!important}.pb-3{padding-bottom:1rem!important}.pb-4{padding-bottom:1.5rem!important}.pb-5{padding-bottom:3rem!important}.pb-6{padding-bottom:4.5rem!important}.pl-0{padding-left:0!important}.pl-1{padding-left:.25rem!important}.pl-2{padding-left:.5rem!important}.pl-3{padding-left:1rem!important}.pl-4{padding-left:1.5rem!important}.pl-5{padding-left:3rem!important}.pl-6{padding-left:4.5rem!important}.font-weight-light{font-weight:300!important}.font-weight-normal{font-weight:400!important}.font-weight-medium{font-weight:500!important}.font-weight-semibold{font-weight:600!important}.font-weight-bold{font-weight:700!important}.font-weight-extrabold{font-weight:800!important}.font-weight-black{font-weight:900!important}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-primary{color:#206bc4!important}.text-secondary{color:#6e7582!important}.text-success{color:#5eba00!important}.text-info{color:#45aaf2!important}.text-warning{color:#fab005!important}.text-danger{color:#cd201f!important}.text-light{color:#f5f7fb!important}.text-dark{color:#354052!important}.text-white{color:#fff!important}.text-body{color:#354052!important}.text-muted{color:#6e7582!important}.text-black-50{color:rgba(0,0,0,.5)!important}.text-white-50{color:rgba(255,255,255,.5)!important}.text-reset{color:inherit!important}.lh-1{line-height:1!important}.lh-sm{line-height:1.3333334!important}.lh-base{line-height:1.7142857!important}.lh-lg{line-height:2.1333334!important}.bg-primary{background-color:#206bc4!important}.bg-secondary{background-color:#6e7582!important}.bg-success{background-color:#5eba00!important}.bg-info{background-color:#45aaf2!important}.bg-warning{background-color:#fab005!important}.bg-danger{background-color:#cd201f!important}.bg-light{background-color:#f5f7fb!important}.bg-dark{background-color:#354052!important}.bg-body{background-color:#f5f7fb!important}.bg-white{background-color:#fff!important}.bg-transparent{background-color:transparent!important}.text-wrap{white-space:normal!important}.text-nowrap{white-space:nowrap!important}.text-decoration-none{text-decoration:none!important}.text-decoration-underline{text-decoration:underline!important}.text-decoration-line-through{text-decoration:line-through!important}.font-italic{font-style:italic!important}.font-normal{font-style:normal!important}.text-break{word-wrap:break-word!important}.font-monospace{font-family:Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace!important}.user-select-all{-webkit-user-select:all!important;-moz-user-select:all!important;-ms-user-select:all!important;user-select:all!important}.user-select-auto{-webkit-user-select:auto!important;-moz-user-select:auto!important;-ms-user-select:auto!important;user-select:auto!important}.user-select-none{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.pe-none{pointer-events:none!important}.pe-auto{pointer-events:auto!important}.rounded{border-radius:3px!important}.rounded-sm{border-radius:.2rem!important}.rounded-lg{border-radius:.3rem!important}.rounded-circle{border-radius:50%!important}.rounded-pill{border-radius:50rem!important}.rounded-0{border-radius:0!important}.rounded-top{border-top-left-radius:3px!important;border-top-right-radius:3px!important}.rounded-right{border-top-right-radius:3px!important;border-bottom-right-radius:3px!important}.rounded-bottom{border-bottom-right-radius:3px!important;border-bottom-left-radius:3px!important}.rounded-left{border-bottom-left-radius:3px!important;border-top-left-radius:3px!important}.visible{visibility:visible!important}.invisible{visibility:hidden!important}.object-contain{-o-object-fit:contain!important;object-fit:contain!important}.object-cover{-o-object-fit:cover!important;object-fit:cover!important}.object-fill{-o-object-fit:fill!important;object-fit:fill!important}.object-scale-down{-o-object-fit:scale-down!important;object-fit:scale-down!important}.object-none{-o-object-fit:none!important;object-fit:none!important}.tracking-tight{letter-spacing:-.05em!important}.tracking-normal{letter-spacing:0!important}.tracking-wide{letter-spacing:.05em!important}.cursor-auto{cursor:auto!important}.cursor-pointer{cursor:pointer!important}.cursor-move{cursor:move!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-zoom-in{cursor:zoom-in!important}.cursor-zoom-out{cursor:zoom-out!important}.text-h1{font-size:1.75rem!important}.text-h2{font-size:1.375rem!important}.text-h3{font-size:1.125rem!important}.text-h4{font-size:.875rem!important}.text-h5{font-size:.75rem!important}.text-h6{font-size:.625rem!important}.leading-0{line-height:0!important}.leading-1{line-height:.25rem!important}.leading-2{line-height:.5rem!important}.leading-3{line-height:1rem!important}.leading-4{line-height:1.5rem!important}.leading-5{line-height:3rem!important}.leading-6{line-height:4.5rem!important}@media (min-width:33rem){.float-sm-left{float:left!important}.float-sm-right{float:right!important}.float-sm-none{float:none!important}.d-sm-none{display:none!important}.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:flex!important}.d-sm-inline-flex{display:inline-flex!important}.flex-sm-fill{flex:1 1 auto!important}.flex-sm-row{flex-direction:row!important}.flex-sm-column{flex-direction:column!important}.flex-sm-row-reverse{flex-direction:row-reverse!important}.flex-sm-column-reverse{flex-direction:column-reverse!important}.flex-sm-grow-0{flex-grow:0!important}.flex-sm-grow-1{flex-grow:1!important}.flex-sm-shrink-0{flex-shrink:0!important}.flex-sm-shrink-1{flex-shrink:1!important}.flex-sm-wrap{flex-wrap:wrap!important}.flex-sm-nowrap{flex-wrap:nowrap!important}.flex-sm-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-sm-start{justify-content:flex-start!important}.justify-content-sm-end{justify-content:flex-end!important}.justify-content-sm-center{justify-content:center!important}.justify-content-sm-between{justify-content:space-between!important}.justify-content-sm-around{justify-content:space-around!important}.align-items-sm-start{align-items:flex-start!important}.align-items-sm-end{align-items:flex-end!important}.align-items-sm-center{align-items:center!important}.align-items-sm-baseline{align-items:baseline!important}.align-items-sm-stretch{align-items:stretch!important}.align-content-sm-start{align-content:flex-start!important}.align-content-sm-end{align-content:flex-end!important}.align-content-sm-center{align-content:center!important}.align-content-sm-between{align-content:space-between!important}.align-content-sm-around{align-content:space-around!important}.align-content-sm-stretch{align-content:stretch!important}.align-self-sm-auto{-ms-grid-row-align:auto!important;align-self:auto!important}.align-self-sm-start{align-self:flex-start!important}.align-self-sm-end{align-self:flex-end!important}.align-self-sm-center{-ms-grid-row-align:center!important;align-self:center!important}.align-self-sm-baseline{align-self:baseline!important}.align-self-sm-stretch{-ms-grid-row-align:stretch!important;align-self:stretch!important}.order-sm-first{order:-1!important}.order-sm-0{order:0!important}.order-sm-1{order:1!important}.order-sm-2{order:2!important}.order-sm-3{order:3!important}.order-sm-4{order:4!important}.order-sm-5{order:5!important}.order-sm-last{order:6!important}.m-sm-0{margin:0!important}.m-sm-1{margin:.25rem!important}.m-sm-2{margin:.5rem!important}.m-sm-3{margin:1rem!important}.m-sm-4{margin:1.5rem!important}.m-sm-5{margin:3rem!important}.m-sm-6{margin:4.5rem!important}.m-sm-auto{margin:auto!important}.mx-sm-0{margin-right:0!important;margin-left:0!important}.mx-sm-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-sm-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-sm-3{margin-right:1rem!important;margin-left:1rem!important}.mx-sm-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-sm-5{margin-right:3rem!important;margin-left:3rem!important}.mx-sm-6{margin-right:4.5rem!important;margin-left:4.5rem!important}.mx-sm-auto{margin-right:auto!important;margin-left:auto!important}.my-sm-0{margin-top:0!important;margin-bottom:0!important}.my-sm-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-sm-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-sm-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-sm-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-sm-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-sm-6{margin-top:4.5rem!important;margin-bottom:4.5rem!important}.my-sm-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-sm-0{margin-top:0!important}.mt-sm-1{margin-top:.25rem!important}.mt-sm-2{margin-top:.5rem!important}.mt-sm-3{margin-top:1rem!important}.mt-sm-4{margin-top:1.5rem!important}.mt-sm-5{margin-top:3rem!important}.mt-sm-6{margin-top:4.5rem!important}.mt-sm-auto{margin-top:auto!important}.mr-sm-0{margin-right:0!important}.mr-sm-1{margin-right:.25rem!important}.mr-sm-2{margin-right:.5rem!important}.mr-sm-3{margin-right:1rem!important}.mr-sm-4{margin-right:1.5rem!important}.mr-sm-5{margin-right:3rem!important}.mr-sm-6{margin-right:4.5rem!important}.mr-sm-auto{margin-right:auto!important}.mb-sm-0{margin-bottom:0!important}.mb-sm-1{margin-bottom:.25rem!important}.mb-sm-2{margin-bottom:.5rem!important}.mb-sm-3{margin-bottom:1rem!important}.mb-sm-4{margin-bottom:1.5rem!important}.mb-sm-5{margin-bottom:3rem!important}.mb-sm-6{margin-bottom:4.5rem!important}.mb-sm-auto{margin-bottom:auto!important}.ml-sm-0{margin-left:0!important}.ml-sm-1{margin-left:.25rem!important}.ml-sm-2{margin-left:.5rem!important}.ml-sm-3{margin-left:1rem!important}.ml-sm-4{margin-left:1.5rem!important}.ml-sm-5{margin-left:3rem!important}.ml-sm-6{margin-left:4.5rem!important}.ml-sm-auto{margin-left:auto!important}.m-sm-n1{margin:-.25rem!important}.m-sm-n2{margin:-.5rem!important}.m-sm-n3{margin:-1rem!important}.m-sm-n4{margin:-1.5rem!important}.m-sm-n5{margin:-3rem!important}.m-sm-n6{margin:-4.5rem!important}.mx-sm-n1{margin-right:-.25rem!important;margin-left:-.25rem!important}.mx-sm-n2{margin-right:-.5rem!important;margin-left:-.5rem!important}.mx-sm-n3{margin-right:-1rem!important;margin-left:-1rem!important}.mx-sm-n4{margin-right:-1.5rem!important;margin-left:-1.5rem!important}.mx-sm-n5{margin-right:-3rem!important;margin-left:-3rem!important}.mx-sm-n6{margin-right:-4.5rem!important;margin-left:-4.5rem!important}.my-sm-n1{margin-top:-.25rem!important;margin-bottom:-.25rem!important}.my-sm-n2{margin-top:-.5rem!important;margin-bottom:-.5rem!important}.my-sm-n3{margin-top:-1rem!important;margin-bottom:-1rem!important}.my-sm-n4{margin-top:-1.5rem!important;margin-bottom:-1.5rem!important}.my-sm-n5{margin-top:-3rem!important;margin-bottom:-3rem!important}.my-sm-n6{margin-top:-4.5rem!important;margin-bottom:-4.5rem!important}.mt-sm-n1{margin-top:-.25rem!important}.mt-sm-n2{margin-top:-.5rem!important}.mt-sm-n3{margin-top:-1rem!important}.mt-sm-n4{margin-top:-1.5rem!important}.mt-sm-n5{margin-top:-3rem!important}.mt-sm-n6{margin-top:-4.5rem!important}.mr-sm-n1{margin-right:-.25rem!important}.mr-sm-n2{margin-right:-.5rem!important}.mr-sm-n3{margin-right:-1rem!important}.mr-sm-n4{margin-right:-1.5rem!important}.mr-sm-n5{margin-right:-3rem!important}.mr-sm-n6{margin-right:-4.5rem!important}.mb-sm-n1{margin-bottom:-.25rem!important}.mb-sm-n2{margin-bottom:-.5rem!important}.mb-sm-n3{margin-bottom:-1rem!important}.mb-sm-n4{margin-bottom:-1.5rem!important}.mb-sm-n5{margin-bottom:-3rem!important}.mb-sm-n6{margin-bottom:-4.5rem!important}.ml-sm-n1{margin-left:-.25rem!important}.ml-sm-n2{margin-left:-.5rem!important}.ml-sm-n3{margin-left:-1rem!important}.ml-sm-n4{margin-left:-1.5rem!important}.ml-sm-n5{margin-left:-3rem!important}.ml-sm-n6{margin-left:-4.5rem!important}.p-sm-0{padding:0!important}.p-sm-1{padding:.25rem!important}.p-sm-2{padding:.5rem!important}.p-sm-3{padding:1rem!important}.p-sm-4{padding:1.5rem!important}.p-sm-5{padding:3rem!important}.p-sm-6{padding:4.5rem!important}.px-sm-0{padding-right:0!important;padding-left:0!important}.px-sm-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-sm-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-sm-3{padding-right:1rem!important;padding-left:1rem!important}.px-sm-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-sm-5{padding-right:3rem!important;padding-left:3rem!important}.px-sm-6{padding-right:4.5rem!important;padding-left:4.5rem!important}.py-sm-0{padding-top:0!important;padding-bottom:0!important}.py-sm-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-sm-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-sm-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-sm-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-sm-5{padding-top:3rem!important;padding-bottom:3rem!important}.py-sm-6{padding-top:4.5rem!important;padding-bottom:4.5rem!important}.pt-sm-0{padding-top:0!important}.pt-sm-1{padding-top:.25rem!important}.pt-sm-2{padding-top:.5rem!important}.pt-sm-3{padding-top:1rem!important}.pt-sm-4{padding-top:1.5rem!important}.pt-sm-5{padding-top:3rem!important}.pt-sm-6{padding-top:4.5rem!important}.pr-sm-0{padding-right:0!important}.pr-sm-1{padding-right:.25rem!important}.pr-sm-2{padding-right:.5rem!important}.pr-sm-3{padding-right:1rem!important}.pr-sm-4{padding-right:1.5rem!important}.pr-sm-5{padding-right:3rem!important}.pr-sm-6{padding-right:4.5rem!important}.pb-sm-0{padding-bottom:0!important}.pb-sm-1{padding-bottom:.25rem!important}.pb-sm-2{padding-bottom:.5rem!important}.pb-sm-3{padding-bottom:1rem!important}.pb-sm-4{padding-bottom:1.5rem!important}.pb-sm-5{padding-bottom:3rem!important}.pb-sm-6{padding-bottom:4.5rem!important}.pl-sm-0{padding-left:0!important}.pl-sm-1{padding-left:.25rem!important}.pl-sm-2{padding-left:.5rem!important}.pl-sm-3{padding-left:1rem!important}.pl-sm-4{padding-left:1.5rem!important}.pl-sm-5{padding-left:3rem!important}.pl-sm-6{padding-left:4.5rem!important}.text-sm-left{text-align:left!important}.text-sm-right{text-align:right!important}.text-sm-center{text-align:center!important}}@media (min-width:48rem){.float-md-left{float:left!important}.float-md-right{float:right!important}.float-md-none{float:none!important}.d-md-none{display:none!important}.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:flex!important}.d-md-inline-flex{display:inline-flex!important}.flex-md-fill{flex:1 1 auto!important}.flex-md-row{flex-direction:row!important}.flex-md-column{flex-direction:column!important}.flex-md-row-reverse{flex-direction:row-reverse!important}.flex-md-column-reverse{flex-direction:column-reverse!important}.flex-md-grow-0{flex-grow:0!important}.flex-md-grow-1{flex-grow:1!important}.flex-md-shrink-0{flex-shrink:0!important}.flex-md-shrink-1{flex-shrink:1!important}.flex-md-wrap{flex-wrap:wrap!important}.flex-md-nowrap{flex-wrap:nowrap!important}.flex-md-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-md-start{justify-content:flex-start!important}.justify-content-md-end{justify-content:flex-end!important}.justify-content-md-center{justify-content:center!important}.justify-content-md-between{justify-content:space-between!important}.justify-content-md-around{justify-content:space-around!important}.align-items-md-start{align-items:flex-start!important}.align-items-md-end{align-items:flex-end!important}.align-items-md-center{align-items:center!important}.align-items-md-baseline{align-items:baseline!important}.align-items-md-stretch{align-items:stretch!important}.align-content-md-start{align-content:flex-start!important}.align-content-md-end{align-content:flex-end!important}.align-content-md-center{align-content:center!important}.align-content-md-between{align-content:space-between!important}.align-content-md-around{align-content:space-around!important}.align-content-md-stretch{align-content:stretch!important}.align-self-md-auto{-ms-grid-row-align:auto!important;align-self:auto!important}.align-self-md-start{align-self:flex-start!important}.align-self-md-end{align-self:flex-end!important}.align-self-md-center{-ms-grid-row-align:center!important;align-self:center!important}.align-self-md-baseline{align-self:baseline!important}.align-self-md-stretch{-ms-grid-row-align:stretch!important;align-self:stretch!important}.order-md-first{order:-1!important}.order-md-0{order:0!important}.order-md-1{order:1!important}.order-md-2{order:2!important}.order-md-3{order:3!important}.order-md-4{order:4!important}.order-md-5{order:5!important}.order-md-last{order:6!important}.m-md-0{margin:0!important}.m-md-1{margin:.25rem!important}.m-md-2{margin:.5rem!important}.m-md-3{margin:1rem!important}.m-md-4{margin:1.5rem!important}.m-md-5{margin:3rem!important}.m-md-6{margin:4.5rem!important}.m-md-auto{margin:auto!important}.mx-md-0{margin-right:0!important;margin-left:0!important}.mx-md-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-md-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-md-3{margin-right:1rem!important;margin-left:1rem!important}.mx-md-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-md-5{margin-right:3rem!important;margin-left:3rem!important}.mx-md-6{margin-right:4.5rem!important;margin-left:4.5rem!important}.mx-md-auto{margin-right:auto!important;margin-left:auto!important}.my-md-0{margin-top:0!important;margin-bottom:0!important}.my-md-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-md-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-md-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-md-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-md-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-md-6{margin-top:4.5rem!important;margin-bottom:4.5rem!important}.my-md-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-md-0{margin-top:0!important}.mt-md-1{margin-top:.25rem!important}.mt-md-2{margin-top:.5rem!important}.mt-md-3{margin-top:1rem!important}.mt-md-4{margin-top:1.5rem!important}.mt-md-5{margin-top:3rem!important}.mt-md-6{margin-top:4.5rem!important}.mt-md-auto{margin-top:auto!important}.mr-md-0{margin-right:0!important}.mr-md-1{margin-right:.25rem!important}.mr-md-2{margin-right:.5rem!important}.mr-md-3{margin-right:1rem!important}.mr-md-4{margin-right:1.5rem!important}.mr-md-5{margin-right:3rem!important}.mr-md-6{margin-right:4.5rem!important}.mr-md-auto{margin-right:auto!important}.mb-md-0{margin-bottom:0!important}.mb-md-1{margin-bottom:.25rem!important}.mb-md-2{margin-bottom:.5rem!important}.mb-md-3{margin-bottom:1rem!important}.mb-md-4{margin-bottom:1.5rem!important}.mb-md-5{margin-bottom:3rem!important}.mb-md-6{margin-bottom:4.5rem!important}.mb-md-auto{margin-bottom:auto!important}.ml-md-0{margin-left:0!important}.ml-md-1{margin-left:.25rem!important}.ml-md-2{margin-left:.5rem!important}.ml-md-3{margin-left:1rem!important}.ml-md-4{margin-left:1.5rem!important}.ml-md-5{margin-left:3rem!important}.ml-md-6{margin-left:4.5rem!important}.ml-md-auto{margin-left:auto!important}.m-md-n1{margin:-.25rem!important}.m-md-n2{margin:-.5rem!important}.m-md-n3{margin:-1rem!important}.m-md-n4{margin:-1.5rem!important}.m-md-n5{margin:-3rem!important}.m-md-n6{margin:-4.5rem!important}.mx-md-n1{margin-right:-.25rem!important;margin-left:-.25rem!important}.mx-md-n2{margin-right:-.5rem!important;margin-left:-.5rem!important}.mx-md-n3{margin-right:-1rem!important;margin-left:-1rem!important}.mx-md-n4{margin-right:-1.5rem!important;margin-left:-1.5rem!important}.mx-md-n5{margin-right:-3rem!important;margin-left:-3rem!important}.mx-md-n6{margin-right:-4.5rem!important;margin-left:-4.5rem!important}.my-md-n1{margin-top:-.25rem!important;margin-bottom:-.25rem!important}.my-md-n2{margin-top:-.5rem!important;margin-bottom:-.5rem!important}.my-md-n3{margin-top:-1rem!important;margin-bottom:-1rem!important}.my-md-n4{margin-top:-1.5rem!important;margin-bottom:-1.5rem!important}.my-md-n5{margin-top:-3rem!important;margin-bottom:-3rem!important}.my-md-n6{margin-top:-4.5rem!important;margin-bottom:-4.5rem!important}.mt-md-n1{margin-top:-.25rem!important}.mt-md-n2{margin-top:-.5rem!important}.mt-md-n3{margin-top:-1rem!important}.mt-md-n4{margin-top:-1.5rem!important}.mt-md-n5{margin-top:-3rem!important}.mt-md-n6{margin-top:-4.5rem!important}.mr-md-n1{margin-right:-.25rem!important}.mr-md-n2{margin-right:-.5rem!important}.mr-md-n3{margin-right:-1rem!important}.mr-md-n4{margin-right:-1.5rem!important}.mr-md-n5{margin-right:-3rem!important}.mr-md-n6{margin-right:-4.5rem!important}.mb-md-n1{margin-bottom:-.25rem!important}.mb-md-n2{margin-bottom:-.5rem!important}.mb-md-n3{margin-bottom:-1rem!important}.mb-md-n4{margin-bottom:-1.5rem!important}.mb-md-n5{margin-bottom:-3rem!important}.mb-md-n6{margin-bottom:-4.5rem!important}.ml-md-n1{margin-left:-.25rem!important}.ml-md-n2{margin-left:-.5rem!important}.ml-md-n3{margin-left:-1rem!important}.ml-md-n4{margin-left:-1.5rem!important}.ml-md-n5{margin-left:-3rem!important}.ml-md-n6{margin-left:-4.5rem!important}.p-md-0{padding:0!important}.p-md-1{padding:.25rem!important}.p-md-2{padding:.5rem!important}.p-md-3{padding:1rem!important}.p-md-4{padding:1.5rem!important}.p-md-5{padding:3rem!important}.p-md-6{padding:4.5rem!important}.px-md-0{padding-right:0!important;padding-left:0!important}.px-md-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-md-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-md-3{padding-right:1rem!important;padding-left:1rem!important}.px-md-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-md-5{padding-right:3rem!important;padding-left:3rem!important}.px-md-6{padding-right:4.5rem!important;padding-left:4.5rem!important}.py-md-0{padding-top:0!important;padding-bottom:0!important}.py-md-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-md-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-md-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-md-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-md-5{padding-top:3rem!important;padding-bottom:3rem!important}.py-md-6{padding-top:4.5rem!important;padding-bottom:4.5rem!important}.pt-md-0{padding-top:0!important}.pt-md-1{padding-top:.25rem!important}.pt-md-2{padding-top:.5rem!important}.pt-md-3{padding-top:1rem!important}.pt-md-4{padding-top:1.5rem!important}.pt-md-5{padding-top:3rem!important}.pt-md-6{padding-top:4.5rem!important}.pr-md-0{padding-right:0!important}.pr-md-1{padding-right:.25rem!important}.pr-md-2{padding-right:.5rem!important}.pr-md-3{padding-right:1rem!important}.pr-md-4{padding-right:1.5rem!important}.pr-md-5{padding-right:3rem!important}.pr-md-6{padding-right:4.5rem!important}.pb-md-0{padding-bottom:0!important}.pb-md-1{padding-bottom:.25rem!important}.pb-md-2{padding-bottom:.5rem!important}.pb-md-3{padding-bottom:1rem!important}.pb-md-4{padding-bottom:1.5rem!important}.pb-md-5{padding-bottom:3rem!important}.pb-md-6{padding-bottom:4.5rem!important}.pl-md-0{padding-left:0!important}.pl-md-1{padding-left:.25rem!important}.pl-md-2{padding-left:.5rem!important}.pl-md-3{padding-left:1rem!important}.pl-md-4{padding-left:1.5rem!important}.pl-md-5{padding-left:3rem!important}.pl-md-6{padding-left:4.5rem!important}.text-md-left{text-align:left!important}.text-md-right{text-align:right!important}.text-md-center{text-align:center!important}}@media (min-width:64rem){.float-lg-left{float:left!important}.float-lg-right{float:right!important}.float-lg-none{float:none!important}.d-lg-none{display:none!important}.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:flex!important}.d-lg-inline-flex{display:inline-flex!important}.flex-lg-fill{flex:1 1 auto!important}.flex-lg-row{flex-direction:row!important}.flex-lg-column{flex-direction:column!important}.flex-lg-row-reverse{flex-direction:row-reverse!important}.flex-lg-column-reverse{flex-direction:column-reverse!important}.flex-lg-grow-0{flex-grow:0!important}.flex-lg-grow-1{flex-grow:1!important}.flex-lg-shrink-0{flex-shrink:0!important}.flex-lg-shrink-1{flex-shrink:1!important}.flex-lg-wrap{flex-wrap:wrap!important}.flex-lg-nowrap{flex-wrap:nowrap!important}.flex-lg-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-lg-start{justify-content:flex-start!important}.justify-content-lg-end{justify-content:flex-end!important}.justify-content-lg-center{justify-content:center!important}.justify-content-lg-between{justify-content:space-between!important}.justify-content-lg-around{justify-content:space-around!important}.align-items-lg-start{align-items:flex-start!important}.align-items-lg-end{align-items:flex-end!important}.align-items-lg-center{align-items:center!important}.align-items-lg-baseline{align-items:baseline!important}.align-items-lg-stretch{align-items:stretch!important}.align-content-lg-start{align-content:flex-start!important}.align-content-lg-end{align-content:flex-end!important}.align-content-lg-center{align-content:center!important}.align-content-lg-between{align-content:space-between!important}.align-content-lg-around{align-content:space-around!important}.align-content-lg-stretch{align-content:stretch!important}.align-self-lg-auto{-ms-grid-row-align:auto!important;align-self:auto!important}.align-self-lg-start{align-self:flex-start!important}.align-self-lg-end{align-self:flex-end!important}.align-self-lg-center{-ms-grid-row-align:center!important;align-self:center!important}.align-self-lg-baseline{align-self:baseline!important}.align-self-lg-stretch{-ms-grid-row-align:stretch!important;align-self:stretch!important}.order-lg-first{order:-1!important}.order-lg-0{order:0!important}.order-lg-1{order:1!important}.order-lg-2{order:2!important}.order-lg-3{order:3!important}.order-lg-4{order:4!important}.order-lg-5{order:5!important}.order-lg-last{order:6!important}.m-lg-0{margin:0!important}.m-lg-1{margin:.25rem!important}.m-lg-2{margin:.5rem!important}.m-lg-3{margin:1rem!important}.m-lg-4{margin:1.5rem!important}.m-lg-5{margin:3rem!important}.m-lg-6{margin:4.5rem!important}.m-lg-auto{margin:auto!important}.mx-lg-0{margin-right:0!important;margin-left:0!important}.mx-lg-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-lg-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-lg-3{margin-right:1rem!important;margin-left:1rem!important}.mx-lg-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-lg-5{margin-right:3rem!important;margin-left:3rem!important}.mx-lg-6{margin-right:4.5rem!important;margin-left:4.5rem!important}.mx-lg-auto{margin-right:auto!important;margin-left:auto!important}.my-lg-0{margin-top:0!important;margin-bottom:0!important}.my-lg-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-lg-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-lg-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-lg-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-lg-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-lg-6{margin-top:4.5rem!important;margin-bottom:4.5rem!important}.my-lg-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-lg-0{margin-top:0!important}.mt-lg-1{margin-top:.25rem!important}.mt-lg-2{margin-top:.5rem!important}.mt-lg-3{margin-top:1rem!important}.mt-lg-4{margin-top:1.5rem!important}.mt-lg-5{margin-top:3rem!important}.mt-lg-6{margin-top:4.5rem!important}.mt-lg-auto{margin-top:auto!important}.mr-lg-0{margin-right:0!important}.mr-lg-1{margin-right:.25rem!important}.mr-lg-2{margin-right:.5rem!important}.mr-lg-3{margin-right:1rem!important}.mr-lg-4{margin-right:1.5rem!important}.mr-lg-5{margin-right:3rem!important}.mr-lg-6{margin-right:4.5rem!important}.mr-lg-auto{margin-right:auto!important}.mb-lg-0{margin-bottom:0!important}.mb-lg-1{margin-bottom:.25rem!important}.mb-lg-2{margin-bottom:.5rem!important}.mb-lg-3{margin-bottom:1rem!important}.mb-lg-4{margin-bottom:1.5rem!important}.mb-lg-5{margin-bottom:3rem!important}.mb-lg-6{margin-bottom:4.5rem!important}.mb-lg-auto{margin-bottom:auto!important}.ml-lg-0{margin-left:0!important}.ml-lg-1{margin-left:.25rem!important}.ml-lg-2{margin-left:.5rem!important}.ml-lg-3{margin-left:1rem!important}.ml-lg-4{margin-left:1.5rem!important}.ml-lg-5{margin-left:3rem!important}.ml-lg-6{margin-left:4.5rem!important}.ml-lg-auto{margin-left:auto!important}.m-lg-n1{margin:-.25rem!important}.m-lg-n2{margin:-.5rem!important}.m-lg-n3{margin:-1rem!important}.m-lg-n4{margin:-1.5rem!important}.m-lg-n5{margin:-3rem!important}.m-lg-n6{margin:-4.5rem!important}.mx-lg-n1{margin-right:-.25rem!important;margin-left:-.25rem!important}.mx-lg-n2{margin-right:-.5rem!important;margin-left:-.5rem!important}.mx-lg-n3{margin-right:-1rem!important;margin-left:-1rem!important}.mx-lg-n4{margin-right:-1.5rem!important;margin-left:-1.5rem!important}.mx-lg-n5{margin-right:-3rem!important;margin-left:-3rem!important}.mx-lg-n6{margin-right:-4.5rem!important;margin-left:-4.5rem!important}.my-lg-n1{margin-top:-.25rem!important;margin-bottom:-.25rem!important}.my-lg-n2{margin-top:-.5rem!important;margin-bottom:-.5rem!important}.my-lg-n3{margin-top:-1rem!important;margin-bottom:-1rem!important}.my-lg-n4{margin-top:-1.5rem!important;margin-bottom:-1.5rem!important}.my-lg-n5{margin-top:-3rem!important;margin-bottom:-3rem!important}.my-lg-n6{margin-top:-4.5rem!important;margin-bottom:-4.5rem!important}.mt-lg-n1{margin-top:-.25rem!important}.mt-lg-n2{margin-top:-.5rem!important}.mt-lg-n3{margin-top:-1rem!important}.mt-lg-n4{margin-top:-1.5rem!important}.mt-lg-n5{margin-top:-3rem!important}.mt-lg-n6{margin-top:-4.5rem!important}.mr-lg-n1{margin-right:-.25rem!important}.mr-lg-n2{margin-right:-.5rem!important}.mr-lg-n3{margin-right:-1rem!important}.mr-lg-n4{margin-right:-1.5rem!important}.mr-lg-n5{margin-right:-3rem!important}.mr-lg-n6{margin-right:-4.5rem!important}.mb-lg-n1{margin-bottom:-.25rem!important}.mb-lg-n2{margin-bottom:-.5rem!important}.mb-lg-n3{margin-bottom:-1rem!important}.mb-lg-n4{margin-bottom:-1.5rem!important}.mb-lg-n5{margin-bottom:-3rem!important}.mb-lg-n6{margin-bottom:-4.5rem!important}.ml-lg-n1{margin-left:-.25rem!important}.ml-lg-n2{margin-left:-.5rem!important}.ml-lg-n3{margin-left:-1rem!important}.ml-lg-n4{margin-left:-1.5rem!important}.ml-lg-n5{margin-left:-3rem!important}.ml-lg-n6{margin-left:-4.5rem!important}.p-lg-0{padding:0!important}.p-lg-1{padding:.25rem!important}.p-lg-2{padding:.5rem!important}.p-lg-3{padding:1rem!important}.p-lg-4{padding:1.5rem!important}.p-lg-5{padding:3rem!important}.p-lg-6{padding:4.5rem!important}.px-lg-0{padding-right:0!important;padding-left:0!important}.px-lg-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-lg-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-lg-3{padding-right:1rem!important;padding-left:1rem!important}.px-lg-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-lg-5{padding-right:3rem!important;padding-left:3rem!important}.px-lg-6{padding-right:4.5rem!important;padding-left:4.5rem!important}.py-lg-0{padding-top:0!important;padding-bottom:0!important}.py-lg-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-lg-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-lg-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-lg-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-lg-5{padding-top:3rem!important;padding-bottom:3rem!important}.py-lg-6{padding-top:4.5rem!important;padding-bottom:4.5rem!important}.pt-lg-0{padding-top:0!important}.pt-lg-1{padding-top:.25rem!important}.pt-lg-2{padding-top:.5rem!important}.pt-lg-3{padding-top:1rem!important}.pt-lg-4{padding-top:1.5rem!important}.pt-lg-5{padding-top:3rem!important}.pt-lg-6{padding-top:4.5rem!important}.pr-lg-0{padding-right:0!important}.pr-lg-1{padding-right:.25rem!important}.pr-lg-2{padding-right:.5rem!important}.pr-lg-3{padding-right:1rem!important}.pr-lg-4{padding-right:1.5rem!important}.pr-lg-5{padding-right:3rem!important}.pr-lg-6{padding-right:4.5rem!important}.pb-lg-0{padding-bottom:0!important}.pb-lg-1{padding-bottom:.25rem!important}.pb-lg-2{padding-bottom:.5rem!important}.pb-lg-3{padding-bottom:1rem!important}.pb-lg-4{padding-bottom:1.5rem!important}.pb-lg-5{padding-bottom:3rem!important}.pb-lg-6{padding-bottom:4.5rem!important}.pl-lg-0{padding-left:0!important}.pl-lg-1{padding-left:.25rem!important}.pl-lg-2{padding-left:.5rem!important}.pl-lg-3{padding-left:1rem!important}.pl-lg-4{padding-left:1.5rem!important}.pl-lg-5{padding-left:3rem!important}.pl-lg-6{padding-left:4.5rem!important}.text-lg-left{text-align:left!important}.text-lg-right{text-align:right!important}.text-lg-center{text-align:center!important}}@media (min-width:75.25rem){.float-xl-left{float:left!important}.float-xl-right{float:right!important}.float-xl-none{float:none!important}.d-xl-none{display:none!important}.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:flex!important}.d-xl-inline-flex{display:inline-flex!important}.flex-xl-fill{flex:1 1 auto!important}.flex-xl-row{flex-direction:row!important}.flex-xl-column{flex-direction:column!important}.flex-xl-row-reverse{flex-direction:row-reverse!important}.flex-xl-column-reverse{flex-direction:column-reverse!important}.flex-xl-grow-0{flex-grow:0!important}.flex-xl-grow-1{flex-grow:1!important}.flex-xl-shrink-0{flex-shrink:0!important}.flex-xl-shrink-1{flex-shrink:1!important}.flex-xl-wrap{flex-wrap:wrap!important}.flex-xl-nowrap{flex-wrap:nowrap!important}.flex-xl-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-xl-start{justify-content:flex-start!important}.justify-content-xl-end{justify-content:flex-end!important}.justify-content-xl-center{justify-content:center!important}.justify-content-xl-between{justify-content:space-between!important}.justify-content-xl-around{justify-content:space-around!important}.align-items-xl-start{align-items:flex-start!important}.align-items-xl-end{align-items:flex-end!important}.align-items-xl-center{align-items:center!important}.align-items-xl-baseline{align-items:baseline!important}.align-items-xl-stretch{align-items:stretch!important}.align-content-xl-start{align-content:flex-start!important}.align-content-xl-end{align-content:flex-end!important}.align-content-xl-center{align-content:center!important}.align-content-xl-between{align-content:space-between!important}.align-content-xl-around{align-content:space-around!important}.align-content-xl-stretch{align-content:stretch!important}.align-self-xl-auto{-ms-grid-row-align:auto!important;align-self:auto!important}.align-self-xl-start{align-self:flex-start!important}.align-self-xl-end{align-self:flex-end!important}.align-self-xl-center{-ms-grid-row-align:center!important;align-self:center!important}.align-self-xl-baseline{align-self:baseline!important}.align-self-xl-stretch{-ms-grid-row-align:stretch!important;align-self:stretch!important}.order-xl-first{order:-1!important}.order-xl-0{order:0!important}.order-xl-1{order:1!important}.order-xl-2{order:2!important}.order-xl-3{order:3!important}.order-xl-4{order:4!important}.order-xl-5{order:5!important}.order-xl-last{order:6!important}.m-xl-0{margin:0!important}.m-xl-1{margin:.25rem!important}.m-xl-2{margin:.5rem!important}.m-xl-3{margin:1rem!important}.m-xl-4{margin:1.5rem!important}.m-xl-5{margin:3rem!important}.m-xl-6{margin:4.5rem!important}.m-xl-auto{margin:auto!important}.mx-xl-0{margin-right:0!important;margin-left:0!important}.mx-xl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xl-6{margin-right:4.5rem!important;margin-left:4.5rem!important}.mx-xl-auto{margin-right:auto!important;margin-left:auto!important}.my-xl-0{margin-top:0!important;margin-bottom:0!important}.my-xl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xl-6{margin-top:4.5rem!important;margin-bottom:4.5rem!important}.my-xl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xl-0{margin-top:0!important}.mt-xl-1{margin-top:.25rem!important}.mt-xl-2{margin-top:.5rem!important}.mt-xl-3{margin-top:1rem!important}.mt-xl-4{margin-top:1.5rem!important}.mt-xl-5{margin-top:3rem!important}.mt-xl-6{margin-top:4.5rem!important}.mt-xl-auto{margin-top:auto!important}.mr-xl-0{margin-right:0!important}.mr-xl-1{margin-right:.25rem!important}.mr-xl-2{margin-right:.5rem!important}.mr-xl-3{margin-right:1rem!important}.mr-xl-4{margin-right:1.5rem!important}.mr-xl-5{margin-right:3rem!important}.mr-xl-6{margin-right:4.5rem!important}.mr-xl-auto{margin-right:auto!important}.mb-xl-0{margin-bottom:0!important}.mb-xl-1{margin-bottom:.25rem!important}.mb-xl-2{margin-bottom:.5rem!important}.mb-xl-3{margin-bottom:1rem!important}.mb-xl-4{margin-bottom:1.5rem!important}.mb-xl-5{margin-bottom:3rem!important}.mb-xl-6{margin-bottom:4.5rem!important}.mb-xl-auto{margin-bottom:auto!important}.ml-xl-0{margin-left:0!important}.ml-xl-1{margin-left:.25rem!important}.ml-xl-2{margin-left:.5rem!important}.ml-xl-3{margin-left:1rem!important}.ml-xl-4{margin-left:1.5rem!important}.ml-xl-5{margin-left:3rem!important}.ml-xl-6{margin-left:4.5rem!important}.ml-xl-auto{margin-left:auto!important}.m-xl-n1{margin:-.25rem!important}.m-xl-n2{margin:-.5rem!important}.m-xl-n3{margin:-1rem!important}.m-xl-n4{margin:-1.5rem!important}.m-xl-n5{margin:-3rem!important}.m-xl-n6{margin:-4.5rem!important}.mx-xl-n1{margin-right:-.25rem!important;margin-left:-.25rem!important}.mx-xl-n2{margin-right:-.5rem!important;margin-left:-.5rem!important}.mx-xl-n3{margin-right:-1rem!important;margin-left:-1rem!important}.mx-xl-n4{margin-right:-1.5rem!important;margin-left:-1.5rem!important}.mx-xl-n5{margin-right:-3rem!important;margin-left:-3rem!important}.mx-xl-n6{margin-right:-4.5rem!important;margin-left:-4.5rem!important}.my-xl-n1{margin-top:-.25rem!important;margin-bottom:-.25rem!important}.my-xl-n2{margin-top:-.5rem!important;margin-bottom:-.5rem!important}.my-xl-n3{margin-top:-1rem!important;margin-bottom:-1rem!important}.my-xl-n4{margin-top:-1.5rem!important;margin-bottom:-1.5rem!important}.my-xl-n5{margin-top:-3rem!important;margin-bottom:-3rem!important}.my-xl-n6{margin-top:-4.5rem!important;margin-bottom:-4.5rem!important}.mt-xl-n1{margin-top:-.25rem!important}.mt-xl-n2{margin-top:-.5rem!important}.mt-xl-n3{margin-top:-1rem!important}.mt-xl-n4{margin-top:-1.5rem!important}.mt-xl-n5{margin-top:-3rem!important}.mt-xl-n6{margin-top:-4.5rem!important}.mr-xl-n1{margin-right:-.25rem!important}.mr-xl-n2{margin-right:-.5rem!important}.mr-xl-n3{margin-right:-1rem!important}.mr-xl-n4{margin-right:-1.5rem!important}.mr-xl-n5{margin-right:-3rem!important}.mr-xl-n6{margin-right:-4.5rem!important}.mb-xl-n1{margin-bottom:-.25rem!important}.mb-xl-n2{margin-bottom:-.5rem!important}.mb-xl-n3{margin-bottom:-1rem!important}.mb-xl-n4{margin-bottom:-1.5rem!important}.mb-xl-n5{margin-bottom:-3rem!important}.mb-xl-n6{margin-bottom:-4.5rem!important}.ml-xl-n1{margin-left:-.25rem!important}.ml-xl-n2{margin-left:-.5rem!important}.ml-xl-n3{margin-left:-1rem!important}.ml-xl-n4{margin-left:-1.5rem!important}.ml-xl-n5{margin-left:-3rem!important}.ml-xl-n6{margin-left:-4.5rem!important}.p-xl-0{padding:0!important}.p-xl-1{padding:.25rem!important}.p-xl-2{padding:.5rem!important}.p-xl-3{padding:1rem!important}.p-xl-4{padding:1.5rem!important}.p-xl-5{padding:3rem!important}.p-xl-6{padding:4.5rem!important}.px-xl-0{padding-right:0!important;padding-left:0!important}.px-xl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xl-5{padding-right:3rem!important;padding-left:3rem!important}.px-xl-6{padding-right:4.5rem!important;padding-left:4.5rem!important}.py-xl-0{padding-top:0!important;padding-bottom:0!important}.py-xl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xl-5{padding-top:3rem!important;padding-bottom:3rem!important}.py-xl-6{padding-top:4.5rem!important;padding-bottom:4.5rem!important}.pt-xl-0{padding-top:0!important}.pt-xl-1{padding-top:.25rem!important}.pt-xl-2{padding-top:.5rem!important}.pt-xl-3{padding-top:1rem!important}.pt-xl-4{padding-top:1.5rem!important}.pt-xl-5{padding-top:3rem!important}.pt-xl-6{padding-top:4.5rem!important}.pr-xl-0{padding-right:0!important}.pr-xl-1{padding-right:.25rem!important}.pr-xl-2{padding-right:.5rem!important}.pr-xl-3{padding-right:1rem!important}.pr-xl-4{padding-right:1.5rem!important}.pr-xl-5{padding-right:3rem!important}.pr-xl-6{padding-right:4.5rem!important}.pb-xl-0{padding-bottom:0!important}.pb-xl-1{padding-bottom:.25rem!important}.pb-xl-2{padding-bottom:.5rem!important}.pb-xl-3{padding-bottom:1rem!important}.pb-xl-4{padding-bottom:1.5rem!important}.pb-xl-5{padding-bottom:3rem!important}.pb-xl-6{padding-bottom:4.5rem!important}.pl-xl-0{padding-left:0!important}.pl-xl-1{padding-left:.25rem!important}.pl-xl-2{padding-left:.5rem!important}.pl-xl-3{padding-left:1rem!important}.pl-xl-4{padding-left:1.5rem!important}.pl-xl-5{padding-left:3rem!important}.pl-xl-6{padding-left:4.5rem!important}.text-xl-left{text-align:left!important}.text-xl-right{text-align:right!important}.text-xl-center{text-align:center!important}}@media print{.d-print-none{display:none!important}.d-print-inline{display:inline!important}.d-print-inline-block{display:inline-block!important}.d-print-block{display:block!important}.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}.d-print-flex{display:flex!important}.d-print-inline-flex{display:inline-flex!important}}html{font-size:16px;scroll-behavior:smooth}body{overflow-y:scroll;letter-spacing:-.01em;touch-action:manipulation;text-rendering:optimizeLegibility;font-feature-settings:"liga" 0;position:relative}body .content ::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}body .content ::-webkit-scrollbar-thumb{border-radius:5px;background:#dee1e7}body .content ::-webkit-scrollbar-corner{background:0 0}body .content :hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#cbcfd6}@media print{body{background:0 0}}.navbar{min-height:3.5rem;align-items:stretch;background:0 0;color:rgba(53,64,82,.72)}.navbar::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.navbar::-webkit-scrollbar-thumb{border-radius:5px;background:#dee1e7}.navbar::-webkit-scrollbar-corner{background:0 0}.navbar:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#cbcfd6}.navbar .text-muted{color:rgba(53,64,82,.5184)!important}.navbar .navbar-brand{color:#354052}.navbar .navbar-brand:focus,.navbar .navbar-brand:hover{color:#354052;opacity:.8}.navbar .navbar-nav .nav-link{color:rgba(53,64,82,.72)}.navbar .navbar-nav .nav-link:focus,.navbar .navbar-nav .nav-link:hover{color:#354052}.navbar .navbar-nav .nav-link.disabled{color:rgba(53,64,82,.3)}.navbar .navbar-nav .active>.nav-link,.navbar .navbar-nav .nav-link.active,.navbar .navbar-nav .nav-link.show,.navbar .navbar-nav .show>.nav-link{color:#354052}.navbar .navbar-toggler{color:#354052;border-color:transparent}.navbar .navbar-text{color:rgba(53,64,82,.72)}.navbar .navbar-text a,.navbar .navbar-text a:focus,.navbar .navbar-text a:hover{color:rgba(53,64,82,.72)}@media not print{.theme-dark .navbar{box-shadow:0 0 0 1px rgba(0,0,0,.1);background:#354052;color:rgba(255,255,255,.72)}.theme-dark .navbar::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.theme-dark .navbar::-webkit-scrollbar-thumb{border-radius:5px;background:#dee1e7}.theme-dark .navbar::-webkit-scrollbar-corner{background:0 0}.theme-dark .navbar:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#cbcfd6}.theme-dark .navbar .text-muted{color:rgba(255,255,255,.5184)!important}.theme-dark .navbar .navbar-brand{color:#fff}.theme-dark .navbar .navbar-brand:focus,.theme-dark .navbar .navbar-brand:hover{color:#fff;opacity:.8}.theme-dark .navbar .navbar-nav .nav-link{color:rgba(255,255,255,.72)}.theme-dark .navbar .navbar-nav .nav-link:focus,.theme-dark .navbar .navbar-nav .nav-link:hover{color:#fff}.theme-dark .navbar .navbar-nav .nav-link.disabled{color:rgba(255,255,255,.3)}.theme-dark .navbar .navbar-nav .active>.nav-link,.theme-dark .navbar .navbar-nav .nav-link.active,.theme-dark .navbar .navbar-nav .nav-link.show,.theme-dark .navbar .navbar-nav .show>.nav-link{color:#fff}.theme-dark .navbar .navbar-toggler{color:#fff;border-color:transparent}.theme-dark .navbar .navbar-text{color:rgba(255,255,255,.72)}.theme-dark .navbar .navbar-text a,.theme-dark .navbar .navbar-text a:focus,.theme-dark .navbar .navbar-text a:hover{color:rgba(255,255,255,.72)}.theme-dark .navbar::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.theme-dark .navbar::-webkit-scrollbar-thumb{border-radius:5px;background:0 0}.theme-dark .navbar::-webkit-scrollbar-corner{background:0 0}.theme-dark .navbar:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#5d6675}.theme-dark .navbar .input-icon-addon{color:rgba(245,247,251,.64)}.theme-dark .navbar .form-control{border-color:transparent;background-color:rgba(0,0,0,.1)}.theme-dark .navbar .form-control::-webkit-input-placeholder{color:rgba(245,247,251,.64)}.theme-dark .navbar .form-control::-moz-placeholder{color:rgba(245,247,251,.64)}.theme-dark .navbar .form-control:-ms-input-placeholder{color:rgba(245,247,251,.64)}.theme-dark .navbar .form-control::-ms-input-placeholder{color:rgba(245,247,251,.64)}.theme-dark .navbar .form-control::placeholder{color:rgba(245,247,251,.64)}}@media not print and (prefers-color-scheme:dark){.theme-dark-auto .navbar{box-shadow:0 0 0 1px rgba(0,0,0,.1);background:#354052;color:rgba(255,255,255,.72)}.theme-dark-auto .navbar::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.theme-dark-auto .navbar::-webkit-scrollbar-thumb{border-radius:5px;background:#dee1e7}.theme-dark-auto .navbar::-webkit-scrollbar-corner{background:0 0}.theme-dark-auto .navbar:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#cbcfd6}.theme-dark-auto .navbar .text-muted{color:rgba(255,255,255,.5184)!important}.theme-dark-auto .navbar .navbar-brand{color:#fff}.theme-dark-auto .navbar .navbar-brand:focus,.theme-dark-auto .navbar .navbar-brand:hover{color:#fff;opacity:.8}.theme-dark-auto .navbar .navbar-nav .nav-link{color:rgba(255,255,255,.72)}.theme-dark-auto .navbar .navbar-nav .nav-link:focus,.theme-dark-auto .navbar .navbar-nav .nav-link:hover{color:#fff}.theme-dark-auto .navbar .navbar-nav .nav-link.disabled{color:rgba(255,255,255,.3)}.theme-dark-auto .navbar .navbar-nav .active>.nav-link,.theme-dark-auto .navbar .navbar-nav .nav-link.active,.theme-dark-auto .navbar .navbar-nav .nav-link.show,.theme-dark-auto .navbar .navbar-nav .show>.nav-link{color:#fff}.theme-dark-auto .navbar .navbar-toggler{color:#fff;border-color:transparent}.theme-dark-auto .navbar .navbar-text{color:rgba(255,255,255,.72)}.theme-dark-auto .navbar .navbar-text a,.theme-dark-auto .navbar .navbar-text a:focus,.theme-dark-auto .navbar .navbar-text a:hover{color:rgba(255,255,255,.72)}.theme-dark-auto .navbar::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.theme-dark-auto .navbar::-webkit-scrollbar-thumb{border-radius:5px;background:0 0}.theme-dark-auto .navbar::-webkit-scrollbar-corner{background:0 0}.theme-dark-auto .navbar:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#5d6675}.theme-dark-auto .navbar .input-icon-addon{color:rgba(245,247,251,.64)}.theme-dark-auto .navbar .form-control{border-color:transparent;background-color:rgba(0,0,0,.1)}.theme-dark-auto .navbar .form-control::-webkit-input-placeholder{color:rgba(245,247,251,.64)}.theme-dark-auto .navbar .form-control::-moz-placeholder{color:rgba(245,247,251,.64)}.theme-dark-auto .navbar .form-control:-ms-input-placeholder{color:rgba(245,247,251,.64)}.theme-dark-auto .navbar .form-control::-ms-input-placeholder{color:rgba(245,247,251,.64)}.theme-dark-auto .navbar .form-control::placeholder{color:rgba(245,247,251,.64)}}.navbar .dropdown-menu{position:absolute}.navbar .navbar-nav{min-height:3rem}.navbar .navbar-nav .nav-link{position:relative;min-width:2rem;min-height:2rem;justify-content:center}.navbar .navbar-nav .nav-link .badge{position:absolute;top:.375rem;right:.375rem;transform:translate(50%,-50%)}@media (max-width:32.98rem){.navbar-expand-sm .navbar-collapse{flex-direction:column}.navbar-expand-sm .navbar-collapse [class*=container]{flex-direction:column;align-items:stretch}.navbar-expand-sm .navbar-collapse .navbar-nav{margin-left:-.75rem;margin-right:-.75rem}.navbar-expand-sm .navbar-collapse .navbar-nav .nav-link{padding:.5rem .75rem;justify-content:flex-start}.navbar-expand-sm .navbar-collapse .dropdown-menu{padding:0;background:0 0;position:static;color:inherit;box-shadow:none;border:none;-moz-columns:1;columns:1;min-width:0}.navbar-expand-sm .navbar-collapse .dropdown-menu .dropdown-item{min-width:0;display:flex;width:auto;padding-left:2.25rem}.navbar-expand-sm .navbar-collapse .dropdown-toggle:after{margin-left:auto}.navbar-expand-sm .navbar-collapse .nav-item.active:after{border-bottom-width:0;border-left-width:2px;right:auto;top:0;bottom:0}}@media (min-width:33rem){.navbar-expand-sm .navbar-collapse{width:auto;flex:1 1 auto}.navbar-expand-sm .navbar-dark .nav-item.active .nav-link,.navbar-expand-sm.navbar-dark .nav-item.active .nav-link{background-color:rgba(0,0,0,.1)}.navbar-expand-sm .navbar-light .nav-item.active,.navbar-expand-sm.navbar-light .nav-item.active{position:relative}.navbar-expand-sm .navbar-light .nav-item.active:after,.navbar-expand-sm.navbar-light .nav-item.active:after{content:'';position:absolute;left:0;right:0;bottom:calc(-.25rem - 1px);border:0 solid #206bc4;border-bottom-width:2px}}@media (max-width:47.98rem){.navbar-expand-md .navbar-collapse{flex-direction:column}.navbar-expand-md .navbar-collapse [class*=container]{flex-direction:column;align-items:stretch}.navbar-expand-md .navbar-collapse .navbar-nav{margin-left:-.75rem;margin-right:-.75rem}.navbar-expand-md .navbar-collapse .navbar-nav .nav-link{padding:.5rem .75rem;justify-content:flex-start}.navbar-expand-md .navbar-collapse .dropdown-menu{padding:0;background:0 0;position:static;color:inherit;box-shadow:none;border:none;-moz-columns:1;columns:1;min-width:0}.navbar-expand-md .navbar-collapse .dropdown-menu .dropdown-item{min-width:0;display:flex;width:auto;padding-left:2.25rem}.navbar-expand-md .navbar-collapse .dropdown-toggle:after{margin-left:auto}.navbar-expand-md .navbar-collapse .nav-item.active:after{border-bottom-width:0;border-left-width:2px;right:auto;top:0;bottom:0}}@media (min-width:48rem){.navbar-expand-md .navbar-collapse{width:auto;flex:1 1 auto}.navbar-expand-md .navbar-dark .nav-item.active .nav-link,.navbar-expand-md.navbar-dark .nav-item.active .nav-link{background-color:rgba(0,0,0,.1)}.navbar-expand-md .navbar-light .nav-item.active,.navbar-expand-md.navbar-light .nav-item.active{position:relative}.navbar-expand-md .navbar-light .nav-item.active:after,.navbar-expand-md.navbar-light .nav-item.active:after{content:'';position:absolute;left:0;right:0;bottom:calc(-.25rem - 1px);border:0 solid #206bc4;border-bottom-width:2px}}@media (max-width:63.98rem){.navbar-expand-lg .navbar-collapse{flex-direction:column}.navbar-expand-lg .navbar-collapse [class*=container]{flex-direction:column;align-items:stretch}.navbar-expand-lg .navbar-collapse .navbar-nav{margin-left:-.75rem;margin-right:-.75rem}.navbar-expand-lg .navbar-collapse .navbar-nav .nav-link{padding:.5rem .75rem;justify-content:flex-start}.navbar-expand-lg .navbar-collapse .dropdown-menu{padding:0;background:0 0;position:static;color:inherit;box-shadow:none;border:none;-moz-columns:1;columns:1;min-width:0}.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item{min-width:0;display:flex;width:auto;padding-left:2.25rem}.navbar-expand-lg .navbar-collapse .dropdown-toggle:after{margin-left:auto}.navbar-expand-lg .navbar-collapse .nav-item.active:after{border-bottom-width:0;border-left-width:2px;right:auto;top:0;bottom:0}}@media (min-width:64rem){.navbar-expand-lg .navbar-collapse{width:auto;flex:1 1 auto}.navbar-expand-lg .navbar-dark .nav-item.active .nav-link,.navbar-expand-lg.navbar-dark .nav-item.active .nav-link{background-color:rgba(0,0,0,.1)}.navbar-expand-lg .navbar-light .nav-item.active,.navbar-expand-lg.navbar-light .nav-item.active{position:relative}.navbar-expand-lg .navbar-light .nav-item.active:after,.navbar-expand-lg.navbar-light .nav-item.active:after{content:'';position:absolute;left:0;right:0;bottom:calc(-.25rem - 1px);border:0 solid #206bc4;border-bottom-width:2px}}@media (max-width:75.23rem){.navbar-expand-xl .navbar-collapse{flex-direction:column}.navbar-expand-xl .navbar-collapse [class*=container]{flex-direction:column;align-items:stretch}.navbar-expand-xl .navbar-collapse .navbar-nav{margin-left:-.75rem;margin-right:-.75rem}.navbar-expand-xl .navbar-collapse .navbar-nav .nav-link{padding:.5rem .75rem;justify-content:flex-start}.navbar-expand-xl .navbar-collapse .dropdown-menu{padding:0;background:0 0;position:static;color:inherit;box-shadow:none;border:none;-moz-columns:1;columns:1;min-width:0}.navbar-expand-xl .navbar-collapse .dropdown-menu .dropdown-item{min-width:0;display:flex;width:auto;padding-left:2.25rem}.navbar-expand-xl .navbar-collapse .dropdown-toggle:after{margin-left:auto}.navbar-expand-xl .navbar-collapse .nav-item.active:after{border-bottom-width:0;border-left-width:2px;right:auto;top:0;bottom:0}}@media (min-width:75.25rem){.navbar-expand-xl .navbar-collapse{width:auto;flex:1 1 auto}.navbar-expand-xl .navbar-dark .nav-item.active .nav-link,.navbar-expand-xl.navbar-dark .nav-item.active .nav-link{background-color:rgba(0,0,0,.1)}.navbar-expand-xl .navbar-light .nav-item.active,.navbar-expand-xl.navbar-light .nav-item.active{position:relative}.navbar-expand-xl .navbar-light .nav-item.active:after,.navbar-expand-xl.navbar-light .nav-item.active:after{content:'';position:absolute;left:0;right:0;bottom:calc(-.25rem - 1px);border:0 solid #206bc4;border-bottom-width:2px}}.navbar-expand .navbar-collapse{flex-direction:column}.navbar-expand .navbar-collapse [class*=container]{flex-direction:column;align-items:stretch}.navbar-expand .navbar-collapse .navbar-nav{margin-left:-.75rem;margin-right:-.75rem}.navbar-expand .navbar-collapse .navbar-nav .nav-link{padding:.5rem .75rem;justify-content:flex-start}.navbar-expand .navbar-collapse .dropdown-menu{padding:0;background:0 0;position:static;color:inherit;box-shadow:none;border:none;-moz-columns:1;columns:1;min-width:0}.navbar-expand .navbar-collapse .dropdown-menu .dropdown-item{min-width:0;display:flex;width:auto;padding-left:2.25rem}.navbar-expand .navbar-collapse .dropdown-toggle:after{margin-left:auto}.navbar-expand .navbar-collapse .nav-item.active:after{border-bottom-width:0;border-left-width:2px;right:auto;top:0;bottom:0}.navbar-expand .navbar-collapse{width:auto;flex:1 1 auto}.navbar-expand .navbar-dark .nav-item.active .nav-link,.navbar-expand.navbar-dark .nav-item.active .nav-link{background-color:rgba(0,0,0,.1)}.navbar-expand .navbar-light .nav-item.active,.navbar-expand.navbar-light .nav-item.active{position:relative}.navbar-expand .navbar-light .nav-item.active:after,.navbar-expand.navbar-light .nav-item.active:after{content:'';position:absolute;left:0;right:0;bottom:calc(-.25rem - 1px);border:0 solid #206bc4;border-bottom-width:2px}.navbar-brand{display:inline-flex;align-items:center;font-weight:500}.navbar-brand-image{display:block;height:2rem}.navbar-toggler{border:0;width:2rem;height:2rem;position:relative;display:flex;align-items:center;justify-content:center}.navbar-toggler-icon{height:2px;width:1.25em;background:currentColor;border-radius:10px;transition:.2s .2s top,.2s .2s bottom,.2s transform,0s .2s opacity;position:relative}.navbar-toggler-icon:after,.navbar-toggler-icon:before{content:'';display:block;height:inherit;width:inherit;border-radius:inherit;background:inherit;position:absolute;left:0;transition:inherit}.navbar-toggler-icon:before{top:-.45em}.navbar-toggler-icon:after{bottom:-.45em}.navbar-toggler[aria-expanded=true] .navbar-toggler-icon{transform:rotate(45deg);transition:.3s top,.3s bottom,.3s .3s transform,0s .3s opacity}.navbar-toggler[aria-expanded=true] .navbar-toggler-icon:before{top:0;transform:rotate(-90deg)}.navbar-toggler[aria-expanded=true] .navbar-toggler-icon:after{bottom:0;opacity:0}.navbar-light{box-shadow:0 0 0 1px rgba(110,117,130,.2);background-color:#fff}.navbar-dark{box-shadow:0 0 0 1px rgba(0,0,0,.1);background:#354052;color:rgba(255,255,255,.72)}.navbar-dark::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.navbar-dark::-webkit-scrollbar-thumb{border-radius:5px;background:#dee1e7}.navbar-dark::-webkit-scrollbar-corner{background:0 0}.navbar-dark:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#cbcfd6}.navbar-dark .text-muted{color:rgba(255,255,255,.5184)!important}.navbar-dark .navbar-brand{color:#fff}.navbar-dark .navbar-brand:focus,.navbar-dark .navbar-brand:hover{color:#fff;opacity:.8}.navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,.72)}.navbar-dark .navbar-nav .nav-link:focus,.navbar-dark .navbar-nav .nav-link:hover{color:#fff}.navbar-dark .navbar-nav .nav-link.disabled{color:rgba(255,255,255,.3)}.navbar-dark .navbar-nav .active>.nav-link,.navbar-dark .navbar-nav .nav-link.active,.navbar-dark .navbar-nav .nav-link.show,.navbar-dark .navbar-nav .show>.nav-link{color:#fff}.navbar-dark .navbar-toggler{color:#fff;border-color:transparent}.navbar-dark .navbar-text{color:rgba(255,255,255,.72)}.navbar-dark .navbar-text a,.navbar-dark .navbar-text a:focus,.navbar-dark .navbar-text a:hover{color:rgba(255,255,255,.72)}.navbar-dark::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.navbar-dark::-webkit-scrollbar-thumb{border-radius:5px;background:0 0}.navbar-dark::-webkit-scrollbar-corner{background:0 0}.navbar-dark:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#5d6675}.navbar-dark .input-icon-addon{color:rgba(245,247,251,.64)}.navbar-dark .form-control{border-color:transparent;background-color:rgba(0,0,0,.1)}.navbar-dark .form-control::-webkit-input-placeholder{color:rgba(245,247,251,.64)}.navbar-dark .form-control::-moz-placeholder{color:rgba(245,247,251,.64)}.navbar-dark .form-control:-ms-input-placeholder{color:rgba(245,247,251,.64)}.navbar-dark .form-control::-ms-input-placeholder{color:rgba(245,247,251,.64)}.navbar-dark .form-control::placeholder{color:rgba(245,247,251,.64)}.navbar-nav{align-items:stretch}.navbar-nav .nav-item{display:flex;flex-direction:column;justify-content:center}.navbar-side{margin:0;display:flex;flex-direction:row;align-items:center;justify-content:space-around}@media (min-width:33rem){.navbar-vertical.navbar-expand-sm{width:15rem;position:fixed;top:0;left:0;bottom:0;z-index:1030;align-items:flex-start;transition:.3s transform;overflow-x:auto}.navbar-vertical.navbar-expand-sm.navbar-right{left:auto;right:0}.navbar-vertical.navbar-expand-sm .navbar-brand{padding:.75rem 0;justify-content:center}.navbar-vertical.navbar-expand-sm .navbar-collapse{align-items:stretch}.navbar-vertical.navbar-expand-sm .navbar-nav{flex-direction:column;flex-grow:1;min-height:auto}.navbar-vertical.navbar-expand-sm .navbar-nav .nav-link{padding-top:.5rem;padding-bottom:.5rem}.navbar-vertical.navbar-expand-sm>[class*=container]{flex-direction:column;align-items:stretch;min-height:100%;justify-content:flex-start}.navbar-vertical.navbar-expand-sm~.page{padding-left:15rem}.navbar-vertical.navbar-expand-sm~.page [class*=container]{padding-left:1.5rem;padding-right:1.5rem}.navbar-vertical.navbar-expand-sm.navbar-right~.page{padding-left:0;padding-right:15rem}.navbar-vertical.navbar-expand-sm .navbar-collapse{flex-direction:column}.navbar-vertical.navbar-expand-sm .navbar-collapse [class*=container]{flex-direction:column;align-items:stretch}.navbar-vertical.navbar-expand-sm .navbar-collapse .navbar-nav{margin-left:-.75rem;margin-right:-.75rem}.navbar-vertical.navbar-expand-sm .navbar-collapse .navbar-nav .nav-link{padding:.5rem .75rem;justify-content:flex-start}.navbar-vertical.navbar-expand-sm .navbar-collapse .dropdown-menu{padding:0;background:0 0;position:static;color:inherit;box-shadow:none;border:none;-moz-columns:1;columns:1;min-width:0}.navbar-vertical.navbar-expand-sm .navbar-collapse .dropdown-menu .dropdown-item{min-width:0;display:flex;width:auto;padding-left:2.25rem}.navbar-vertical.navbar-expand-sm .navbar-collapse .dropdown-toggle:after{margin-left:auto}.navbar-vertical.navbar-expand-sm .navbar-collapse .nav-item.active:after{border-bottom-width:0;border-left-width:2px;right:auto;top:0;bottom:0}}@media (min-width:48rem){.navbar-vertical.navbar-expand-md{width:15rem;position:fixed;top:0;left:0;bottom:0;z-index:1030;align-items:flex-start;transition:.3s transform;overflow-x:auto}.navbar-vertical.navbar-expand-md.navbar-right{left:auto;right:0}.navbar-vertical.navbar-expand-md .navbar-brand{padding:.75rem 0;justify-content:center}.navbar-vertical.navbar-expand-md .navbar-collapse{align-items:stretch}.navbar-vertical.navbar-expand-md .navbar-nav{flex-direction:column;flex-grow:1;min-height:auto}.navbar-vertical.navbar-expand-md .navbar-nav .nav-link{padding-top:.5rem;padding-bottom:.5rem}.navbar-vertical.navbar-expand-md>[class*=container]{flex-direction:column;align-items:stretch;min-height:100%;justify-content:flex-start}.navbar-vertical.navbar-expand-md~.page{padding-left:15rem}.navbar-vertical.navbar-expand-md~.page [class*=container]{padding-left:1.5rem;padding-right:1.5rem}.navbar-vertical.navbar-expand-md.navbar-right~.page{padding-left:0;padding-right:15rem}.navbar-vertical.navbar-expand-md .navbar-collapse{flex-direction:column}.navbar-vertical.navbar-expand-md .navbar-collapse [class*=container]{flex-direction:column;align-items:stretch}.navbar-vertical.navbar-expand-md .navbar-collapse .navbar-nav{margin-left:-.75rem;margin-right:-.75rem}.navbar-vertical.navbar-expand-md .navbar-collapse .navbar-nav .nav-link{padding:.5rem .75rem;justify-content:flex-start}.navbar-vertical.navbar-expand-md .navbar-collapse .dropdown-menu{padding:0;background:0 0;position:static;color:inherit;box-shadow:none;border:none;-moz-columns:1;columns:1;min-width:0}.navbar-vertical.navbar-expand-md .navbar-collapse .dropdown-menu .dropdown-item{min-width:0;display:flex;width:auto;padding-left:2.25rem}.navbar-vertical.navbar-expand-md .navbar-collapse .dropdown-toggle:after{margin-left:auto}.navbar-vertical.navbar-expand-md .navbar-collapse .nav-item.active:after{border-bottom-width:0;border-left-width:2px;right:auto;top:0;bottom:0}}@media (min-width:64rem){.navbar-vertical.navbar-expand-lg{width:15rem;position:fixed;top:0;left:0;bottom:0;z-index:1030;align-items:flex-start;transition:.3s transform;overflow-x:auto}.navbar-vertical.navbar-expand-lg.navbar-right{left:auto;right:0}.navbar-vertical.navbar-expand-lg .navbar-brand{padding:.75rem 0;justify-content:center}.navbar-vertical.navbar-expand-lg .navbar-collapse{align-items:stretch}.navbar-vertical.navbar-expand-lg .navbar-nav{flex-direction:column;flex-grow:1;min-height:auto}.navbar-vertical.navbar-expand-lg .navbar-nav .nav-link{padding-top:.5rem;padding-bottom:.5rem}.navbar-vertical.navbar-expand-lg>[class*=container]{flex-direction:column;align-items:stretch;min-height:100%;justify-content:flex-start}.navbar-vertical.navbar-expand-lg~.page{padding-left:15rem}.navbar-vertical.navbar-expand-lg~.page [class*=container]{padding-left:1.5rem;padding-right:1.5rem}.navbar-vertical.navbar-expand-lg.navbar-right~.page{padding-left:0;padding-right:15rem}.navbar-vertical.navbar-expand-lg .navbar-collapse{flex-direction:column}.navbar-vertical.navbar-expand-lg .navbar-collapse [class*=container]{flex-direction:column;align-items:stretch}.navbar-vertical.navbar-expand-lg .navbar-collapse .navbar-nav{margin-left:-.75rem;margin-right:-.75rem}.navbar-vertical.navbar-expand-lg .navbar-collapse .navbar-nav .nav-link{padding:.5rem .75rem;justify-content:flex-start}.navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu{padding:0;background:0 0;position:static;color:inherit;box-shadow:none;border:none;-moz-columns:1;columns:1;min-width:0}.navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item{min-width:0;display:flex;width:auto;padding-left:2.25rem}.navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-toggle:after{margin-left:auto}.navbar-vertical.navbar-expand-lg .navbar-collapse .nav-item.active:after{border-bottom-width:0;border-left-width:2px;right:auto;top:0;bottom:0}}@media (min-width:75.25rem){.navbar-vertical.navbar-expand-xl{width:15rem;position:fixed;top:0;left:0;bottom:0;z-index:1030;align-items:flex-start;transition:.3s transform;overflow-x:auto}.navbar-vertical.navbar-expand-xl.navbar-right{left:auto;right:0}.navbar-vertical.navbar-expand-xl .navbar-brand{padding:.75rem 0;justify-content:center}.navbar-vertical.navbar-expand-xl .navbar-collapse{align-items:stretch}.navbar-vertical.navbar-expand-xl .navbar-nav{flex-direction:column;flex-grow:1;min-height:auto}.navbar-vertical.navbar-expand-xl .navbar-nav .nav-link{padding-top:.5rem;padding-bottom:.5rem}.navbar-vertical.navbar-expand-xl>[class*=container]{flex-direction:column;align-items:stretch;min-height:100%;justify-content:flex-start}.navbar-vertical.navbar-expand-xl~.page{padding-left:15rem}.navbar-vertical.navbar-expand-xl~.page [class*=container]{padding-left:1.5rem;padding-right:1.5rem}.navbar-vertical.navbar-expand-xl.navbar-right~.page{padding-left:0;padding-right:15rem}.navbar-vertical.navbar-expand-xl .navbar-collapse{flex-direction:column}.navbar-vertical.navbar-expand-xl .navbar-collapse [class*=container]{flex-direction:column;align-items:stretch}.navbar-vertical.navbar-expand-xl .navbar-collapse .navbar-nav{margin-left:-.75rem;margin-right:-.75rem}.navbar-vertical.navbar-expand-xl .navbar-collapse .navbar-nav .nav-link{padding:.5rem .75rem;justify-content:flex-start}.navbar-vertical.navbar-expand-xl .navbar-collapse .dropdown-menu{padding:0;background:0 0;position:static;color:inherit;box-shadow:none;border:none;-moz-columns:1;columns:1;min-width:0}.navbar-vertical.navbar-expand-xl .navbar-collapse .dropdown-menu .dropdown-item{min-width:0;display:flex;width:auto;padding-left:2.25rem}.navbar-vertical.navbar-expand-xl .navbar-collapse .dropdown-toggle:after{margin-left:auto}.navbar-vertical.navbar-expand-xl .navbar-collapse .nav-item.active:after{border-bottom-width:0;border-left-width:2px;right:auto;top:0;bottom:0}}.navbar-vertical.navbar-expand{width:15rem;position:fixed;top:0;left:0;bottom:0;z-index:1030;align-items:flex-start;transition:.3s transform;overflow-x:auto}.navbar-vertical.navbar-expand.navbar-right{left:auto;right:0}.navbar-vertical.navbar-expand .navbar-brand{padding:.75rem 0;justify-content:center}.navbar-vertical.navbar-expand .navbar-collapse{align-items:stretch}.navbar-vertical.navbar-expand .navbar-nav{flex-direction:column;flex-grow:1;min-height:auto}.navbar-vertical.navbar-expand .navbar-nav .nav-link{padding-top:.5rem;padding-bottom:.5rem}.navbar-vertical.navbar-expand>[class*=container]{flex-direction:column;align-items:stretch;min-height:100%;justify-content:flex-start}.navbar-vertical.navbar-expand~.page{padding-left:15rem}.navbar-vertical.navbar-expand~.page [class*=container]{padding-left:1.5rem;padding-right:1.5rem}.navbar-vertical.navbar-expand.navbar-right~.page{padding-left:0;padding-right:15rem}.navbar-vertical.navbar-expand .navbar-collapse{flex-direction:column}.navbar-vertical.navbar-expand .navbar-collapse [class*=container]{flex-direction:column;align-items:stretch}.navbar-vertical.navbar-expand .navbar-collapse .navbar-nav{margin-left:-.75rem;margin-right:-.75rem}.navbar-vertical.navbar-expand .navbar-collapse .navbar-nav .nav-link{padding:.5rem .75rem;justify-content:flex-start}.navbar-vertical.navbar-expand .navbar-collapse .dropdown-menu{padding:0;background:0 0;position:static;color:inherit;box-shadow:none;border:none;-moz-columns:1;columns:1;min-width:0}.navbar-vertical.navbar-expand .navbar-collapse .dropdown-menu .dropdown-item{min-width:0;display:flex;width:auto;padding-left:2.25rem}.navbar-vertical.navbar-expand .navbar-collapse .dropdown-toggle:after{margin-left:auto}.navbar-vertical.navbar-expand .navbar-collapse .nav-item.active:after{border-bottom-width:0;border-left-width:2px;right:auto;top:0;bottom:0}.page{display:flex;flex-direction:column;position:relative;min-height:100vh}.content{padding-top:1.25rem;padding-bottom:1.25rem;flex:1;display:flex;flex-direction:column}.content>[class*=container]{flex:1}@media print{.content{margin:0!important}}.page-header{display:flex;align-items:center;min-height:2.25rem;margin:0 0 1.25rem}.page-header>*{flex:1}.page-pretitle{font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:#6e7582}.page-title{margin:0;font-size:1.375rem;font-weight:400;line-height:1;color:inherit}.footer{border-top:1px solid rgba(110,117,130,.2);background-color:#fff;padding:1rem 0;color:#6e7582;margin-bottom:-1.25rem;margin-top:1.25rem}.footer-transparent{margin-top:0;background-color:transparent;border-top:0}.alert-avatar{padding-left:3.75rem}.alert-avatar .avatar{position:absolute;top:.5rem;left:.75rem}.alert a{display:inline-block;height:100%;vertical-align:middle}.alert a .icon{height:100%}.avatar{position:relative;width:2rem;height:2rem;font-size:.75rem;display:inline-flex;align-items:center;justify-content:center;font-weight:400;color:#6e7582;text-align:center;text-transform:uppercase;vertical-align:bottom;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:#f1f3f8 no-repeat center/cover;border-radius:50%}.avatar .icon{font-size:1.25em}.avatar .badge{position:absolute;right:0;bottom:0;border-radius:50%;box-shadow:0 0 0 2px #fff}a.avatar{cursor:pointer}.avatar-sm{width:1.25rem;height:1.25rem;font-size:.625rem;line-height:1.25rem}.avatar-md{width:2.5rem;height:2.5rem;font-size:1.25rem;line-height:2.5rem}.avatar-lg{width:4.5rem;height:4.5rem;font-size:2.25rem;line-height:4.5rem}.avatar-xl{width:6rem;height:6rem;font-size:3rem;line-height:6rem}.avatar-list{display:inline-flex;padding:0;margin:0 0 -.5rem}.avatar-list .avatar{margin-bottom:.5rem}.avatar-list .avatar:not(:last-child){margin-right:.5rem}.avatar-list a.avatar:hover{z-index:1}.avatar-list-stacked .avatar{margin-right:-.5rem!important;box-shadow:0 0 0 2px #fff}.card-footer .avatar-list-stacked .avatar{box-shadow:0 0 0 2px rgba(53,64,82,.024)}.avatar-upload{width:4rem;height:4rem;border:1px dashed rgba(110,117,130,.2);background:#fff;flex-direction:column;transition:.3s color,.3s background-color}.avatar-upload svg{width:1.5rem;height:1.5rem;stroke-width:1}.avatar-upload:hover{border-color:#206bc4;color:#206bc4;text-decoration:none}.avatar-upload-text{font-size:.625rem;line-height:1;margin-top:.25rem}.badge{font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;display:inline-flex;justify-content:center;background:#cbcfd6;overflow:hidden;vertical-align:text-bottom;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}a.badge{color:#fff}.badge:empty{display:inline-block;width:.5rem;height:.5rem;min-width:0;min-height:auto;padding:0;border-radius:50%}.badge-up{position:absolute;top:25%;right:0;min-width:1.75em;min-height:1.75em;padding:0 .25rem;line-height:1rem;background-clip:padding-box;transform:translate(0,-50%)}.badge-outline{background-color:transparent;border:1px solid currentColor}.badge-pill{border-radius:100px;min-width:1.75em}.badge-avatar{box-sizing:content-box;width:1.75em;margin:0 .5em 0 -.5em;color:rgba(245,247,251,.24);background:rgba(53,64,82,.24) no-repeat center/cover;vertical-align:text-bottom}.badge-addon{padding:0 .5rem;margin:0 -.5em 0 .5em;min-width:1.75em;background:rgba(53,64,82,.24);text-align:center;color:#fff;text-decoration:none}.breadcrumb{padding:0;margin:0;background:0 0}.breadcrumb-item.active a{color:inherit;pointer-events:none}.breadcrumb-dots .breadcrumb-item+.breadcrumb-item:before{content:"·"}.breadcrumb-arrows .breadcrumb-item+.breadcrumb-item:before{content:"›"}.breadcrumb-bullets .breadcrumb-item+.breadcrumb-item:before{content:"•"}.breadcrumb-alternate a{color:#6e7582}.breadcrumb-alternate .breadcrumb-item.active{color:inherit}.btn{font-weight:500;display:inline-flex;align-items:center;justify-content:center}.btn:not([class^=btn-outline]):not([class*=" btn-outline"]):not([class^=btn-ghost]):not([class*=" btn-ghost"]):not(.btn-secondary){text-shadow:1px 1px 0 rgba(0,0,0,.02)}.btn:not([class^=btn-outline]):not([class*=" btn-outline"]):not([class^=btn-ghost]):not([class*=" btn-ghost"]):not(:focus):not(.focus){box-shadow:0 1px 3px 0 rgba(0,0,0,.05),inset 0 2px 0 -1px rgba(255,255,255,.1)}.btn:not([class^=btn-outline]):not([class*=" btn-outline"]):not([class^=btn-ghost]):not([class*=" btn-ghost"]) svg.icon{-webkit-filter:drop-shadow(1px 1px 0 rgba(0, 0, 0, .05));filter:drop-shadow(1px 1px 0 rgba(0, 0, 0, .05))}.btn.disabled,.btn:disabled{cursor:not-allowed}.btn .icon{margin:0 .25em 0 -.25em;font-size:1.2em;vertical-align:sub}.btn .avatar{width:1.25rem;height:1.25rem;vertical-align:text-top;margin:0 .5em 0 -.25em}.btn .icon-right{margin:0 -.25em 0 .5em}.btn svg.icon{width:1em;height:1em;stroke-width:1.75}.btn-secondary{color:#354052;background-color:#fff;border-color:rgba(110,117,130,.2);background-image:linear-gradient(-180deg,rgba(53,64,82,0),rgba(53,64,82,.04) 100%);box-shadow:none!important}.btn-secondary:hover{color:#354052;background-color:#ececec;border-color:rgba(87,92,102,.2)}.btn-secondary.focus,.btn-secondary:focus{color:#354052;background-color:#ececec;border-color:rgba(87,92,102,.2);box-shadow:0 0 0 .2rem rgba(75,84,101,.5)}.btn-secondary.active,.btn-secondary:active,.show>.btn-secondary.dropdown-toggle{color:#354052;background-color:#e6e6e6;border-color:rgba(81,86,95,.2)}.btn-secondary.active:focus,.btn-secondary:active:focus,.show>.btn-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(75,84,101,.5)}.btn-secondary.disabled,.btn-secondary:disabled{color:#354052;background-color:#fff;border-color:rgba(110,117,130,.2)}.btn-secondary.active{background:#206bc4;color:#fff;z-index:3!important}.btn-group-lg>.btn svg.icon,.btn-lg svg.icon{stroke-width:2}.btn-pill{padding-right:1.5em;padding-left:1.5em;border-radius:10rem}.btn-pill[class*=btn-icon]{padding:.375rem 15px}.btn-icon{min-width:calc(2.0333333rem + 2px)}.btn-group-sm>.btn-icon.btn,.btn-icon.btn-sm{min-width:calc(1.35rem + 2px)}.btn-icon .icon{margin:0 -1em}.btn-link{box-shadow:none!important}.btn-square{border-radius:0}.btn-list{display:flex;flex-wrap:wrap;margin-bottom:-.5rem!important;margin-right:-.5rem;line-height:1}.btn-list>.btn,.btn-list>.dropdown{margin:0 .5rem .5rem 0}.btn-list>.btn-block{flex:1;white-space:nowrap}.btn-options{display:flex;align-items:center;padding:0;color:#6e7582;cursor:pointer;background:0 0;border:none}.btn-options:focus{outline:0}.btn-options .icon{width:1rem;height:1rem}.btn-floating{position:fixed;z-index:1030;bottom:1.5rem;right:1.5rem;border-radius:50%}.btn-loading{position:relative;color:transparent!important;text-shadow:none!important;pointer-events:none}.btn-loading:after{content:'';display:inline-block;vertical-align:text-bottom;border:1px solid currentColor;border-right-color:transparent;border-radius:50%;color:#fff;position:absolute;width:1rem;height:1rem;left:calc(50% - .5rem);top:calc(50% - .5rem);-webkit-animation:spinner-border .75s linear infinite;animation:spinner-border .75s linear infinite}.calendar{display:block;font-size:.765625rem;border:1px solid rgba(110,117,130,.2);border-radius:3px}.calendar-nav{display:flex;align-items:center}.calendar-title{flex:1;text-align:center}.calendar-body,.calendar-header{display:flex;flex-wrap:wrap;justify-content:flex-start;padding:.5rem 0}.calendar-header{color:#6e7582}.calendar-date{flex:0 0 14.2857143%;max-width:14.2857143%;padding:.2rem;text-align:center;border:0}.calendar-date.next-month,.calendar-date.prev-month{opacity:.25}.calendar-date .date-item{position:relative;display:inline-block;width:1.4rem;height:1.4rem;line-height:1.4rem;color:#66758c;text-align:center;text-decoration:none;white-space:nowrap;vertical-align:middle;cursor:pointer;background:0 0;border:1px solid transparent;border-radius:50%;outline:0;transition:background .3s,border .3s,box-shadow .32s,color .3s}.calendar-date .date-item:hover{color:#206bc4;text-decoration:none;background:#fefeff;border-color:rgba(110,117,130,.2)}.calendar-date .date-today{color:#206bc4;border-color:rgba(110,117,130,.2)}.calendar-range{position:relative}.calendar-range:before{position:absolute;top:50%;right:0;left:0;height:1.4rem;content:"";background:rgba(32,107,196,.1);transform:translateY(-50%)}.calendar-range.range-end .date-item,.calendar-range.range-start .date-item{color:#fff;background:#206bc4;border-color:#206bc4}.calendar-range.range-start:before{left:50%}.calendar-range.range-end:before{right:50%}.card{margin-bottom:1.25rem;box-shadow:rgba(53,64,82,.04) 0 2px 4px 0}@media (max-width:75.23rem){.card{margin-bottom:.75rem}}@media print{.card{border:none;box-shadow:none}}a.card{color:inherit;transition:.3s box-shadow}a.card:hover{text-decoration:none;box-shadow:rgba(53,64,82,.16) 0 2px 16px 0}.card-group{margin-bottom:1.5rem}.card-inactive{pointer-events:none;box-shadow:none}.card-inactive .card-body{opacity:.64}.card-active{position:relative;background-color:rgba(32,107,196,.03)}.card-active:before{position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;content:"";border:1px solid #206bc4;border-radius:inherit}.card-link{color:inherit}.card-link:hover{color:inherit;text-decoration:none;box-shadow:0 1px 6px 0 rgba(0,0,0,.08)}.card-btn{padding:1.25rem 1.25rem;text-align:center;background:rgba(32,107,196,.02);transition:.3s background}.card-btn:hover{text-decoration:none;background:rgba(32,107,196,.06)}.card-stacked{position:relative}.card-stacked:after{position:absolute;top:-5px;right:5px;left:5px;height:5px;content:"";background:#fff;border:1px solid rgba(110,117,130,.2);border-radius:3px 3px 0 0}.card-cover{position:relative;padding:1.25rem 1.25rem;background:#666 no-repeat center/cover}.card-cover:before{position:absolute;top:0;right:0;bottom:0;left:0;content:"";background:rgba(53,64,82,.24)}.card-cover:first-child,.card-cover:first-child:before{border-radius:3px 3px 0 0}.card-cover-blurred:before{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.card-actions{margin-left:auto;font-size:.75rem}.card-actions a{text-decoration:none}.card-header{display:flex;align-items:center;background:0 0}.card-header-tabs{flex:1;margin:-1.25rem -1.25rem}.card-header-pills{flex:1}.card-footer{color:#6e7582}.card-progress{height:.25rem}.card-progress:last-child{border-radius:0 0 2px 2px}.card-progress:first-child{border-radius:2px 2px 0 0}.card-meta{color:#6e7582}.card-title{display:block;margin:0 0 1rem;font-size:1.125rem;font-weight:500;line-height:1.3333333}a.card-title:hover{color:inherit}.card-header .card-title{margin:.125rem 0}.card-subtitle{margin-top:-1.25rem;margin-bottom:.625rem;font-size:87.5%;color:#6e7582}.card-body>:last-child{margin-bottom:0}.card-sm>.card-body{padding:.75rem}@media (min-width:48rem){.card-md>.card-body{padding:1.5rem}}@media (min-width:48rem){.card-lg>.card-body{padding:2rem}}@media (min-width:64rem){.card-lg>.card-body{padding:4rem}}@media print{.card-body{padding:0}}.card-body+.card-body{border-top:1px solid rgba(110,117,130,.2)}.card-body-scrollable{overflow:auto}.card-options{top:1.5rem;right:.75rem;display:flex;margin-left:auto}.card-options-link{display:inline-block;min-width:1rem;margin-left:.25rem;color:#6e7582}.card-drop{line-height:1;color:#6e7582}.card-drop .icon{width:1.5rem;height:1.5rem;stroke-width:1}.card-status-top{position:absolute;top:0;right:0;left:0;height:2px;border-radius:3px 3px 0 0}.card-status-left{position:absolute;right:auto;bottom:0;width:2px;height:100%;border-radius:3px 0 0 3px}.card-status-bottom{position:absolute;top:initial;bottom:0;width:100%;height:2px;border-radius:0 0 3px 3px}.card-table{margin-bottom:0}.card-table tr td:first-child,.card-table tr th:first-child{padding-left:1.25rem}.card-table tr td:last-child,.card-table tr th:last-child{padding-right:1.25rem}.card-table thead tr:first-child td,.card-table thead tr:first-child th{border-top:0}.card-table tbody tr:last-child td,.card-table tbody tr:last-child th{border-bottom:0}.card-body+.card-table{border-top:1px solid rgba(110,117,130,.2)}.card-code{padding:0}.card-code .highlight{margin:0;border:0}.card-code pre{margin:0;color:#fff;text-shadow:none;background:0 0}.card-chart{position:relative;z-index:1;height:3.5rem}.card-avatar{box-shadow:0 0 0 .5rem #fff}.card-body+.card-list-group{border-top:1px solid rgba(110,117,130,.2)}.card-list-group .list-group-item{padding-right:1.25rem;padding-left:1.25rem;border-right:0;border-left:0;border-radius:0}.card-list-group .list-group-item:last-child{border-bottom:0}.card-list-group .list-group-item:first-child{border-top:0}.card-tabs{margin-bottom:1.5rem}.card-tabs .nav-tabs{position:relative;z-index:1000;border-bottom:0}.card-tabs .nav-tabs .nav-link{background:rgba(53,64,82,.024);border:1px solid rgba(110,117,130,.2);border-bottom:0}.card-tabs .nav-tabs .nav-link.active,.card-tabs .nav-tabs .nav-link:active,.card-tabs .nav-tabs .nav-link:hover{border-color:rgba(110,117,130,.2)}.card-tabs .nav-tabs .nav-link.active{background:#fff}.card-tabs .nav-tabs .nav-item:not(:first-child) .nav-link{border-top-left-radius:0}.card-tabs .nav-tabs .nav-item:not(:last-child) .nav-link{border-top-right-radius:0}.card-tabs .nav-tabs .nav-item+.nav-item{margin-left:-1px}.card-tabs .nav-tabs-bottom{margin-bottom:0}.card-tabs .nav-tabs-bottom .nav-item{margin-top:-1px;margin-bottom:0}.card-tabs .nav-tabs-bottom .nav-item .nav-link{border-top-width:0;border-bottom:1px solid rgba(110,117,130,.2);border-top-left-radius:0;border-top-right-radius:0}.card-tabs .card{margin:0;border-top-left-radius:0}.close:focus{outline:0;color:#354052}.dropdown-menu{box-shadow:0 .5rem 1rem rgba(0,0,0,.15);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:0}.dropdown-menu.card{padding:0;min-width:25rem;display:none}.dropdown-menu.card.show{display:flex}.dropdown-item{min-width:14rem;color:inherit;display:flex;align-items:center;margin:0}.dropdown-item-icon{width:1rem!important;font-size:1rem!important;margin-right:.5rem;opacity:.64;text-align:center;stroke-width:2px}.dropdown-header{font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:#6e7582;padding-bottom:.25rem;pointer-events:none}.dropdown-menu-scrollable{height:auto;max-height:12rem;overflow-x:hidden}.dropdown-menu-columns{-moz-columns:2;columns:2;-moz-column-gap:0;column-gap:0}.dropdown-menu-columns .dropdown-item{display:inline-flex;min-width:10rem}.dropdown-menu-columns-2{-moz-columns:2;columns:2}.dropdown-menu-columns-3{-moz-columns:3;columns:3}.dropdown-menu-columns-4{-moz-columns:4;columns:4}.dropdown-menu-arrow{margin-top:.5rem}.dropdown-menu-arrow:before{content:"";position:absolute;top:-4px;left:12px;display:block;background:inherit;width:14px;height:14px;transform:rotate(45deg);transform-origin:center;border:1px solid;border-color:inherit;z-index:-1;clip:rect(0,9px,9px,0)}.dropdown-menu-arrow.dropdown-menu-right:before{right:12px;left:auto}.dropright>.dropdown-menu{margin-top:calc(-.5rem - 1px);margin-left:0}.dropright .dropdown-toggle:after{margin-left:auto}.dropdown-menu-card{padding:0}.dropdown-menu-card>.card{margin:0;border:0;box-shadow:none}.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:1rem;text-align:center}@media (min-width:48rem){.empty{padding:3rem}}.empty .empty-icon{margin:0 0 1rem;font-size:2rem;font-weight:400;line-height:1}.empty .empty-subtitle,.empty .empty-title{margin:0 0 .5rem}.empty .empty-action{margin-top:1.5rem}.empty-bordered{border:1px solid rgba(110,117,130,.2);border-radius:3px}.col-separator{border-left:1px solid rgba(110,117,130,.2)}.container-tight{width:100%;padding-right:.75rem;padding-left:.75rem;margin-right:auto;margin-left:auto;max-width:30rem}.container-narrow{width:100%;padding-right:.75rem;padding-left:.75rem;margin-right:auto;margin-left:auto;max-width:45rem}.row-0{margin-right:0;margin-left:0}.row-0>.col,.row-0>[class*=col-]{padding-right:0;padding-left:0}.row-0 .card{margin-bottom:0}.row-sm{margin-right:-.375rem;margin-left:-.375rem}.row-sm>.col,.row-sm>[class*=col-]{padding-right:.375rem;padding-left:.375rem}.row-sm .card{margin-bottom:.75rem}.row-md{margin-right:-1.5rem;margin-left:-1.5rem}.row-md>.col,.row-md>[class*=col-]{padding-right:1.5rem;padding-left:1.5rem}.row-md .card{margin-bottom:3rem}.row-lg{margin-right:-3rem;margin-left:-3rem}.row-lg>.col,.row-lg>[class*=col-]{padding-right:3rem;padding-left:3rem}.row-lg .card{margin-bottom:6rem}.row-deck>.col,.row-deck>[class*=col-]{display:flex;align-items:stretch}.row-deck>.col .card,.row-deck>[class*=col-] .card{flex:1 1 auto}.row-cards{margin-left:-.625rem;margin-right:-.625rem}.row-cards .row-cards{flex:1}.row-cards>*{padding-left:.625rem;padding-right:.625rem}@media (max-width:75.23rem){.row-cards{margin-left:-.375rem;margin-right:-.375rem}.row-cards>*{padding-left:.375rem;padding-right:.375rem}}.icon{width:1em;height:1em;font-size:1em;vertical-align:-.2em}.icon:hover{text-decoration:none}.icon-filled{fill:currentColor}.icon-thin{stroke-width:1.5}.icon-md{font-size:1.5rem}.icon-lg{font-size:2rem}.icon-xl{font-size:4rem}.icons-list{display:flex;flex-wrap:wrap;padding:0;margin:0 -2px -1px 0;list-style:none}.icons-list>li{flex:1 0 4rem}.icons-list-wrap{overflow:hidden}.icons-list-item{display:flex;align-items:center;justify-content:center;height:4rem;text-align:center;border-right:1px solid rgba(110,117,130,.2);border-bottom:1px solid rgba(110,117,130,.2)}.icons-list-item i{font-size:1.25rem}textarea[cols]{height:auto}.form-label{font-size:.875rem;font-weight:500;display:block;margin-bottom:.5rem}.form-label.required:after{content:"*";margin-left:.25rem;color:#cd201f}.form-label-description{float:right;font-weight:400;color:#6e7582;line-height:1.9591837;font-size:87.5%}.form-hint{display:block;font-size:87.5%;color:#6e7582;line-height:1.3333334}.form-hint:last-child{margin-bottom:0}.form-hint+.form-control{margin-top:.25rem}.form-label+.form-hint{margin-top:-.5rem}.form-control+.form-hint,.form-select+.form-hint{margin-top:.25rem}.form-control:-webkit-autofill{box-shadow:0 0 0 1000px #fff inset}.form-control.disabled,.form-control:disabled{color:#6e7582;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-control[size]{width:auto}.form-control-light{background-color:#f5f7fb;border-color:transparent}.form-control-dark{background-color:rgba(0,0,0,.1);color:#fff;border-color:transparent}.form-control-dark:focus{background-color:rgba(0,0,0,.1);box-shadow:none;border-color:rgba(255,255,255,.24)}.form-control-dark::-webkit-input-placeholder{color:rgba(255,255,255,.6)}.form-control-dark::-moz-placeholder{color:rgba(255,255,255,.6)}.form-control-dark:-ms-input-placeholder{color:rgba(255,255,255,.6)}.form-control-dark::-ms-input-placeholder{color:rgba(255,255,255,.6)}.form-control-dark::placeholder{color:rgba(255,255,255,.6)}.form-control-rounded{border-radius:10rem}.form-control-flush{padding:0;background:0 0!important;border-color:transparent!important;resize:none;box-shadow:none!important;line-height:inherit}.form-footer{margin-top:2rem}.form-fieldset{padding:1rem;margin-bottom:1rem;background:rgba(53,64,82,.024);border:1px solid rgba(110,117,130,.2);border-radius:3px}.form-help{display:inline-flex;font-weight:500;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;font-size:.75rem;color:#6e7582;text-align:center;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:rgba(145,152,163,.1);border-radius:50%;transition:.3s background-color,.3s color}.form-help:hover,.form-help[aria-describedby]{color:#fff;background:#206bc4}.form-check{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-check.form-check-highlight .form-check-input:not(:checked)~.form-check-label{opacity:.64}.form-check-input{margin-top:.25rem}.form-switch .form-check-input{transition:.3s background-color,.3s background-position}.form-check-label{line-height:1.3333334;padding:.125rem 0}.form-check-description{color:#6e7582;font-size:.75rem;line-height:1.3333334}.input-group-link{font-size:.75rem}.input-group-flat:focus-within{box-shadow:0 0 0 .2rem rgba(32,107,196,.25);border-radius:3px}.input-group-flat:focus-within .form-control,.input-group-flat:focus-within .input-group-text{border-color:#7aade9!important}.input-group-flat .form-control:focus{border-color:rgba(110,117,130,.2);box-shadow:none}.input-group-flat .form-control:not(:last-child){border-right:0}.input-group-flat .form-control:not(:first-child){border-left:0}.input-group-flat .input-group-text{background:0 0;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.input-group-flat .input-group-text:first-child{padding-right:0}.input-group-flat .input-group-text:last-child{padding-left:0}.form-file-button{margin-left:0;border-left:0}.input-icon{position:relative}.input-icon .form-control:not(:last-child){padding-right:2.5rem}.input-icon .form-control:not(:first-child){padding-left:2.5rem}.input-icon-addon{position:absolute;top:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;min-width:2.5rem;color:#6e7582;pointer-events:none;font-size:1.2em}.input-icon-addon:last-child{right:0;left:auto}.form-colorinput{position:relative;display:inline-block;margin:0;line-height:1;cursor:pointer}.form-colorinput-input{position:absolute;z-index:-1;opacity:0}.form-colorinput-color{display:block;width:1.5rem;height:1.5rem;color:#fff;border:1px solid rgba(110,117,130,.2);border-radius:3px;box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}.form-colorinput-color:before{position:absolute;top:0;left:0;width:100%;height:100%;content:"";background:no-repeat center center/1rem;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6' transform='scale%28.8%29' transform-origin='50% 50%'/%3e%3c/svg%3e");opacity:0;transition:.3s opacity}.form-colorinput-input:checked~.form-colorinput-color:before{opacity:1}.form-colorinput-input:focus~.form-colorinput-color{border-color:#206bc4;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.form-colorinput-light .form-colorinput-color:before{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23354052' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6' transform='scale%28.8%29' transform-origin='50% 50%'/%3e%3c/svg%3e")}.form-imagecheck{position:relative;margin:0;cursor:pointer}.form-imagecheck-input{position:absolute;z-index:-1;opacity:0}.form-imagecheck-figure{position:relative;display:block;margin:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid rgba(110,117,130,.2);border-radius:3px}.form-imagecheck-input:focus~.form-imagecheck-figure{border-color:#206bc4;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.form-imagecheck-input:checked~.form-imagecheck-figure{border-color:rgba(110,117,130,.2)}.form-imagecheck-figure:before{position:absolute;top:.25rem;left:.25rem;z-index:1;display:block;width:1rem;height:1rem;color:#fff;pointer-events:none;content:"";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:#fff;border:1px solid rgba(110,117,130,.2);border-radius:3px;transition:.3s opacity}.form-imagecheck-input:checked~.form-imagecheck-figure:before{background-color:#206bc4;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6' transform='scale%28.8%29' transform-origin='50% 50%'/%3e%3c/svg%3e");background-repeat:repeat;background-position:center center;background-size:1rem;border-color:rgba(110,117,130,.2)}.form-imagecheck-image{max-width:100%;display:block;opacity:.64;transition:.3s opacity}.form-imagecheck-image:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.form-imagecheck-image:last-child{border-bottom-right-radius:2px;border-bottom-left-radius:2px}.form-imagecheck-input:checked~.form-imagecheck-figure .form-imagecheck-image,.form-imagecheck-input:focus~.form-imagecheck-figure .form-imagecheck-image,.form-imagecheck:hover .form-imagecheck-image{opacity:1}.form-imagecheck-caption{padding:.25rem;font-size:.765625rem;color:#6e7582;text-align:center;transition:.3s color}.form-imagecheck-input:checked~.form-imagecheck-figure .form-imagecheck-caption,.form-imagecheck-input:focus~.form-imagecheck-figure .form-imagecheck-caption,.form-imagecheck:hover .form-imagecheck-caption{color:#354052}.form-selectgroup{display:inline-flex;margin:0 -.5rem -.5rem 0;flex-wrap:wrap}.form-selectgroup .form-selectgroup-item{margin:0 .5rem .5rem 0}.form-selectgroup-vertical{flex-direction:column}.form-selectgroup-item{display:block;position:relative}.form-selectgroup-input{position:absolute;top:0;left:0;z-index:-1;opacity:0}.form-selectgroup-label{position:relative;display:block;min-width:calc(1.4666667em + .75rem + 2px);margin:0;padding:.375rem .75rem;font-size:.875rem;line-height:1.4666667;color:#6e7582;background:#fff;text-align:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid rgba(110,117,130,.2);border-radius:3px;transition:border-color .3s,background .3s,color .3s}.form-selectgroup-label .icon:only-child{margin:0 -.25rem}.form-selectgroup-label:hover{color:#354052}.form-selectgroup-check{display:inline-block;width:1rem;height:1rem;border:1px solid rgba(110,117,130,.2);vertical-align:middle}.form-selectgroup-input[type=checkbox]+.form-selectgroup-label .form-selectgroup-check{border-radius:3px}.form-selectgroup-input[type=radio]+.form-selectgroup-label .form-selectgroup-check{border-radius:50%}.form-selectgroup-input:checked+.form-selectgroup-label .form-selectgroup-check{background-color:#206bc4;background-repeat:repeat;background-position:center center;background-size:1rem;border-color:rgba(110,117,130,.2)}.form-selectgroup-input[type=checkbox]:checked+.form-selectgroup-label .form-selectgroup-check{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6' transform='scale%28.8%29' transform-origin='50% 50%'/%3e%3c/svg%3e")}.form-selectgroup-input[type=radio]:checked+.form-selectgroup-label .form-selectgroup-check{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3' fill='%23ffffff' cx='8' cy='8' /%3e%3c/svg%3e")}.form-selectgroup-input:checked+.form-selectgroup-label{z-index:1;color:#206bc4;background:rgba(32,107,196,.04);border-color:#7aade9;box-shadow:0 1px 1px 0 rgba(32,107,196,.2)}.form-selectgroup-input:focus+.form-selectgroup-label{z-index:2;color:#206bc4;border-color:#7aade9;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.form-selectgroup-label-content{line-height:1.3333334}.form-selectgroup-boxes .form-selectgroup-label{text-align:left;padding:1.25rem 1.25rem;color:inherit}.form-selectgroup-boxes .form-selectgroup-input:checked+.form-selectgroup-label{color:inherit}.form-selectgroup-boxes .form-selectgroup-input:checked+.form-selectgroup-label .form-selectgroup-title{color:#206bc4}.form-selectgroup-boxes .form-selectgroup-input:checked+.form-selectgroup-label .form-selectgroup-label-content{opacity:1}.form-selectgroup-pills{flex-wrap:wrap;align-items:flex-start}.form-selectgroup-pills .form-selectgroup-item{flex-grow:0}.form-selectgroup-pills .form-selectgroup-label{border-radius:50px}.form-control-color::-webkit-color-swatch{border:none}[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.form-control.is-invalid-lite,.form-control.is-valid-lite{border-color:rgba(110,117,130,.2)}.legend{display:inline-block;background:#e9ecf1;width:.75em;height:.75em;border-radius:3px}.list-item{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word}.list-item-actions{margin-left:auto}.list-bordered .list-item,.list-row .list-item{border-top:1px solid rgba(110,117,130,.2);margin-top:-1px}.list-bordered .list-item:first-child,.list-row .list-item:first-child{border-top:none}.list-hoverable .list-item-actions{opacity:0;transition:.3s opacity}.list-hoverable .list-item-actions.show,.list-hoverable .list-item:hover .list-item-actions{opacity:1}.list-row .list-item{flex-direction:row;align-items:center;padding:.5rem .625rem}.list-row .list-item>*{padding-left:.625rem;padding-right:.625rem}.list-timeline{position:relative;padding:0;margin:0;list-style:none}.list-timeline>li{position:relative;margin-bottom:1.5rem}.list-timeline>li:last-child{margin-bottom:0}.list-timeline-time{float:right;margin-left:1rem;color:#6e7582}.list-timeline-icon{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;color:#fff;text-align:center;background:#6e7582;border-radius:50%}.list-timeline-icon .icon{width:1rem;height:1rem}.list-timeline-title{margin:0;font-weight:500}.list-timeline-content{margin-left:3.5rem}@media screen and (min-width:768px){.list-timeline:not(.list-timeline-simple):before{position:absolute;top:0;bottom:0;left:calc(7.5rem + 2px);z-index:1;display:block;width:4px;content:"";background-color:#f5f7fb}.list-timeline:not(.list-timeline-simple)>li{z-index:2;min-height:40px}.list-timeline:not(.list-timeline-simple) .list-timeline-time{position:absolute;top:.5rem;left:0;width:5.5rem;margin:0;text-align:right}.list-timeline:not(.list-timeline-simple) .list-timeline-icon{top:0;left:6.5rem}.list-timeline:not(.list-timeline-simple) .list-timeline-content{padding:.625rem 0 0 10rem;margin:0}}.list-group-transparent{margin:0 -.75rem}.list-group-transparent .list-group-item{background:0 0;border:0;border-radius:3px}.list-group-transparent .list-group-item .icon{color:#6e7582}.list-group-transparent .list-group-item.active{font-weight:500;color:inherit;background:rgba(32,107,196,.06)}.list-group-transparent .list-group-item.active .icon{color:inherit}.list-separated-item{padding:1rem 0}.list-separated-item:first-child{padding-top:0}.list-separated-item:last-child{padding-bottom:0}.list-separated-item+.list-separated-item{border-top:1px solid rgba(110,117,130,.2)}.list-inline-dots .list-inline-item+.list-inline-item:before{content:'· ';margin-right:.5rem}@-webkit-keyframes loader{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes loader{from{transform:rotate(0)}to{transform:rotate(360deg)}}.loader{position:relative;display:block;width:2.5rem;height:2.5rem;color:#206bc4;vertical-align:middle}.loader:after{position:absolute;top:0;left:0;width:100%;height:100%;content:"";border:1px solid;border-color:transparent;border-top-color:currentColor;border-left-color:currentColor;border-radius:50%;-webkit-animation:loader .6s linear;animation:loader .6s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.dimmer{position:relative}.dimmer .loader{position:absolute;top:50%;right:0;left:0;display:none;margin:0 auto;transform:translateY(-50%)}.dimmer.active .loader{display:block}.dimmer.active .dimmer-content{pointer-events:none;opacity:.1}.modal-content .close{position:absolute;top:0;right:0;font-size:1rem;width:3.5rem;height:3.5rem;margin:0;padding:0;z-index:10}.modal-body::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.modal-body::-webkit-scrollbar-thumb{border-radius:5px;background:#dee1e7}.modal-body::-webkit-scrollbar-corner{background:0 0}.modal-body:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#cbcfd6}.modal-body .modal-title{margin-bottom:1rem}.modal-body+.modal-body{border-top:1px solid rgba(110,117,130,.1)}.modal-header{align-items:center;min-height:3.5rem;background:#fff;padding:0 3.5rem 0 1.5rem}.modal-title{font-size:1.125rem;font-weight:500;line-height:1.3333333}.modal-footer{padding-top:0;padding-bottom:.75rem}.modal-blur{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-full-width{max-width:none;margin:0 .5rem}.nav-tabs .icon{color:#6e7582}.nav-tabs .nav-link{padding:.75rem 1.25rem;line-height:20px;color:#6e7582;cursor:pointer;background:0 0;border:none;border-bottom:1px solid transparent;transition:.3s color,.3s border-color}.nav-tabs .nav-link:hover{color:#354052;border-color:transparent}.nav-tabs .nav-link.disabled{color:rgba(110,117,130,.2)}.nav-tabs .nav-link.active{color:#354052;background:inherit;border-color:transparent;border-bottom-color:#206bc4}.nav-tabs-alt .nav-link{font-size:13px;font-weight:500;text-transform:uppercase}.nav-icon{line-height:1;margin-right:.25rem}.nav-icon .icon{display:block;stroke-width:1.5}.nav-link{border-radius:3px;display:flex;transition:.3s color;align-items:center}.nav-link .icon{display:inline-block;font-size:1rem}.nav-link-icon{width:1.25rem;height:1rem;font-size:1rem}.nav-link-icon .icon{display:block}.stars{display:inline-flex;color:#dee1e7;font-size:.75rem}.stars .star:not(:first-child){margin-left:.25rem}.pagination{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.page-link{min-width:1.5rem;border-radius:3px}.page-link:hover{background:0 0}.page-item{text-align:center}.page-item.page-next,.page-item.page-prev{flex:0 0 50%;text-align:left}.page-item.page-next{margin-left:auto;text-align:right}.page-item-subtitle{margin-bottom:2px;font-size:12px;color:#6e7582;text-transform:uppercase}.page-item.disabled .page-item-subtitle{color:rgba(110,117,130,.5)}.page-item-title{font-size:1.125rem;font-weight:400;color:#354052}.page-link:hover .page-item-title{color:#206bc4}.page-item.disabled .page-item-title{color:rgba(110,117,130,.5)}@-webkit-keyframes progress-indeterminate{0%{right:100%;left:-35%}100%,60%{right:-90%;left:100%}}@keyframes progress-indeterminate{0%{right:100%;left:-35%}100%,60%{right:-90%;left:100%}}.progress{position:relative;width:100%;line-height:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress::-webkit-progress-bar{background:#f5f7fb}.progress::-webkit-progress-value{background-color:#206bc4}.progress::-moz-progress-bar{background-color:#206bc4}.progress::-ms-fill{background-color:#206bc4;border:none}.progress-sm{height:.25rem}.progress-bar{height:100%}.progress-bar-indeterminate:after,.progress-bar-indeterminate:before{position:absolute;top:0;bottom:0;left:0;content:"";background-color:inherit;will-change:left,right}.progress-bar-indeterminate:before{-webkit-animation:progress-indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite;animation:progress-indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite}.ribbon{position:absolute;top:.75rem;right:-.25rem;z-index:1;padding:.25rem .75rem;font-size:.625rem;font-weight:500;line-height:1.5rem;color:#fff;text-align:center;text-transform:uppercase;background:#206bc4;border-color:#206bc4}.ribbon:before{position:absolute;right:0;bottom:100%;width:0;height:0;content:"";-webkit-filter:brightness(70%);filter:brightness(70%);border:.125rem solid;border-color:inherit;border-top-color:transparent;border-right-color:transparent}.ribbon.bg-blue{border-color:#206bc4}.ribbon.bg-blue-lt{border-color:#d2e1f3!important}.ribbon.bg-azure{border-color:#45aaf2}.ribbon.bg-azure-lt{border-color:#daeefc!important}.ribbon.bg-indigo{border-color:#6574cd}.ribbon.bg-indigo-lt{border-color:#e0e3f5!important}.ribbon.bg-purple{border-color:#a55eea}.ribbon.bg-purple-lt{border-color:#eddffb!important}.ribbon.bg-pink{border-color:#f66d9b}.ribbon.bg-pink-lt{border-color:#fde2eb!important}.ribbon.bg-red{border-color:#cd201f}.ribbon.bg-red-lt{border-color:#f5d2d2!important}.ribbon.bg-orange{border-color:#ff922b}.ribbon.bg-orange-lt{border-color:#ffe9d5!important}.ribbon.bg-yellow{border-color:#fab005}.ribbon.bg-yellow-lt{border-color:#feefcd!important}.ribbon.bg-lime{border-color:#94d82d}.ribbon.bg-lime-lt{border-color:#eaf7d5!important}.ribbon.bg-green{border-color:#5eba00}.ribbon.bg-green-lt{border-color:#dff1cc!important}.ribbon.bg-teal{border-color:#2bcbba}.ribbon.bg-teal-lt{border-color:#d5f5f1!important}.ribbon.bg-cyan{border-color:#17a2b8}.ribbon.bg-cyan-lt{border-color:#d1ecf1!important}.ribbon.bg-white{border-color:#fff}.ribbon.bg-white-lt{border-color:#fff!important}.ribbon.bg-gray{border-color:#a8aeb7}.ribbon.bg-gray-lt{border-color:#eeeff1!important}.ribbon.bg-gray-dark{border-color:#545d6d}.ribbon.bg-gray-dark-lt{border-color:#dddfe2!important}.ribbon.bg-dark{border-color:#354052}.ribbon.bg-dark-lt{border-color:#d7d9dc!important}.ribbon .icon{width:1rem;height:1rem}.ribbon-top{top:-.25rem;right:.75rem;width:2rem;padding:.25rem 0}.ribbon-top:before{top:0;right:100%;bottom:auto;border-color:inherit;border-top-color:transparent;border-left-color:transparent}.ribbon-top.ribbon-left{right:auto;left:.75rem}.ribbon-top.ribbon-left:before{top:0;right:100%;left:auto}.ribbon-left{right:auto;left:-.25rem}.ribbon-left:before{top:auto;bottom:100%;left:0;border-color:inherit;border-top-color:transparent;border-left-color:transparent}.ribbon-bottom{top:auto;bottom:.75rem}.ribbon-bookmark{padding-left:.25rem}.ribbon-bookmark:after{position:absolute;top:0;right:100%;display:block;width:0;height:0;content:"";border:1rem solid;border-color:inherit;border-right-width:0;border-left-color:transparent;border-left-width:.5rem}.ribbon-bookmark.ribbon-left{padding-right:.5rem;padding-left:.5rem}.ribbon-bookmark.ribbon-left:after{right:auto;left:100%;border-right-color:transparent;border-right-width:.5rem;border-left-width:0}.ribbon-bookmark.ribbon-top{padding-right:0;padding-bottom:.25rem;padding-left:0}.ribbon-bookmark.ribbon-top:after{top:100%;right:0;left:0;border-color:inherit;border-width:1rem;border-top-width:0;border-bottom-color:transparent;border-bottom-width:.5rem}.stamp{display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;height:2.5rem;line-height:2.5rem;padding:0 .25rem;font-size:.875rem;font-weight:500;color:#6e7582;text-align:center;background:#f1f3f8;border-radius:3px}.stamp .icon{font-size:1.25rem;vertical-align:middle}.steps{display:flex;flex-wrap:nowrap;width:100%;padding:0;margin:2rem 0;list-style:none}.steps .step-item{padding-top:calc(.5rem + 4px)}.steps .step-item:after{top:calc(.25rem + 2px);height:2px}.steps .step-item:before{width:.5rem;height:.5rem}.steps .step-item:after,.steps .step-item:before{color:#fff;background:#206bc4}.steps .step-item.active:before{color:inherit;border-color:#206bc4}.steps-blue .step-item:after,.steps-blue .step-item:before{color:#fff;background:#206bc4}.steps-blue .step-item.active:before{color:inherit;border-color:#206bc4}.steps-azure .step-item:after,.steps-azure .step-item:before{color:#fff;background:#45aaf2}.steps-azure .step-item.active:before{color:inherit;border-color:#45aaf2}.steps-indigo .step-item:after,.steps-indigo .step-item:before{color:#fff;background:#6574cd}.steps-indigo .step-item.active:before{color:inherit;border-color:#6574cd}.steps-purple .step-item:after,.steps-purple .step-item:before{color:#fff;background:#a55eea}.steps-purple .step-item.active:before{color:inherit;border-color:#a55eea}.steps-pink .step-item:after,.steps-pink .step-item:before{color:#fff;background:#f66d9b}.steps-pink .step-item.active:before{color:inherit;border-color:#f66d9b}.steps-red .step-item:after,.steps-red .step-item:before{color:#fff;background:#cd201f}.steps-red .step-item.active:before{color:inherit;border-color:#cd201f}.steps-orange .step-item:after,.steps-orange .step-item:before{color:#fff;background:#ff922b}.steps-orange .step-item.active:before{color:inherit;border-color:#ff922b}.steps-yellow .step-item:after,.steps-yellow .step-item:before{color:#fff;background:#fab005}.steps-yellow .step-item.active:before{color:inherit;border-color:#fab005}.steps-lime .step-item:after,.steps-lime .step-item:before{color:#fff;background:#94d82d}.steps-lime .step-item.active:before{color:inherit;border-color:#94d82d}.steps-green .step-item:after,.steps-green .step-item:before{color:#fff;background:#5eba00}.steps-green .step-item.active:before{color:inherit;border-color:#5eba00}.steps-teal .step-item:after,.steps-teal .step-item:before{color:#fff;background:#2bcbba}.steps-teal .step-item.active:before{color:inherit;border-color:#2bcbba}.steps-cyan .step-item:after,.steps-cyan .step-item:before{color:#fff;background:#17a2b8}.steps-cyan .step-item.active:before{color:inherit;border-color:#17a2b8}.steps-white .step-item:after,.steps-white .step-item:before{color:#fff;background:#fff}.steps-white .step-item.active:before{color:inherit;border-color:#fff}.steps-gray .step-item:after,.steps-gray .step-item:before{color:#fff;background:#a8aeb7}.steps-gray .step-item.active:before{color:inherit;border-color:#a8aeb7}.steps-gray-dark .step-item:after,.steps-gray-dark .step-item:before{color:#fff;background:#545d6d}.steps-gray-dark .step-item.active:before{color:inherit;border-color:#545d6d}.steps-dark .step-item:after,.steps-dark .step-item:before{color:#fff;background:#354052}.steps-dark .step-item.active:before{color:inherit;border-color:#354052}.step-item{position:relative;flex:1 1 0;min-height:1rem;margin-top:0;color:inherit;text-align:center;cursor:default}a.step-item{cursor:pointer}a.step-item:hover{color:inherit}.step-item:not(:first-child):after{position:absolute;left:-50%;width:100%;content:"";transform:translateY(-50%)}.step-item:before{position:absolute;top:0;left:50%;z-index:1;box-sizing:content-box;display:block;content:"";border:2px solid #fff;border-radius:50%;transform:translateX(-50%)}.step-item.active{font-weight:500}.step-item.active:before{background:#fff}.step-item.active~.step-item{color:#6e7582}.step-item.active~.step-item:after,.step-item.active~.step-item:before{background:#f3f5f5}.step-item.active~.step-item:before{color:#6e7582!important}.steps-counter{counter-reset:steps}.steps-counter .step-item{padding-top:calc(1.5rem + 4px)}.steps-counter .step-item:after{top:calc(.75rem + 2px);height:2px}.steps-counter .step-item:before{width:1.5rem;height:1.5rem}.steps-counter .step-item{counter-increment:steps}.steps-counter .step-item:before{font-size:1rem;line-height:1.5rem;content:counter(steps)}.steps-counter .step-item.active~.step-item:before{background:#fff}.markdown>table,.table{color:inherit}.markdown>table thead th,.table thead th{background:rgba(53,64,82,.024);border-width:1px;font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:#6e7582;padding-top:.5rem;padding-bottom:.5rem}@media print{.markdown>table thead th,.table thead th{background:0 0}}.markdown>table th,.table th{color:#6e7582}.table-nowrap td,.table-nowrap th{white-space:nowrap}.table-md td,.table-md th{padding:.5rem}.table-vcenter td,.table-vcenter th{vertical-align:middle}.table-center td,.table-center th{text-align:center}.td-truncate{max-width:1px;width:100%}@media (max-width:32.98rem){.table-mobile{display:block}.table-mobile thead{display:none}.table-mobile tbody,.table-mobile tr{display:flex;flex-direction:column}.table-mobile td{display:block;padding:.5rem!important;border:none;color:#354052!important}.table-mobile td[data-label]:before{font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:#6e7582;content:attr(data-label);display:block}.table-mobile tr{border-bottom:1px solid rgba(110,117,130,.2)}.table-mobile .btn{display:block}}@media (max-width:47.98rem){.table-mobile-sm{display:block}.table-mobile-sm thead{display:none}.table-mobile-sm tbody,.table-mobile-sm tr{display:flex;flex-direction:column}.table-mobile-sm td{display:block;padding:.5rem!important;border:none;color:#354052!important}.table-mobile-sm td[data-label]:before{font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:#6e7582;content:attr(data-label);display:block}.table-mobile-sm tr{border-bottom:1px solid rgba(110,117,130,.2)}.table-mobile-sm .btn{display:block}}@media (max-width:63.98rem){.table-mobile-md{display:block}.table-mobile-md thead{display:none}.table-mobile-md tbody,.table-mobile-md tr{display:flex;flex-direction:column}.table-mobile-md td{display:block;padding:.5rem!important;border:none;color:#354052!important}.table-mobile-md td[data-label]:before{font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:#6e7582;content:attr(data-label);display:block}.table-mobile-md tr{border-bottom:1px solid rgba(110,117,130,.2)}.table-mobile-md .btn{display:block}}@media (max-width:75.23rem){.table-mobile-lg{display:block}.table-mobile-lg thead{display:none}.table-mobile-lg tbody,.table-mobile-lg tr{display:flex;flex-direction:column}.table-mobile-lg td{display:block;padding:.5rem!important;border:none;color:#354052!important}.table-mobile-lg td[data-label]:before{font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:#6e7582;content:attr(data-label);display:block}.table-mobile-lg tr{border-bottom:1px solid rgba(110,117,130,.2)}.table-mobile-lg .btn{display:block}}.table-mobile-xl{display:block}.table-mobile-xl thead{display:none}.table-mobile-xl tbody,.table-mobile-xl tr{display:flex;flex-direction:column}.table-mobile-xl td{display:block;padding:.5rem!important;border:none;color:#354052!important}.table-mobile-xl td[data-label]:before{font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:#6e7582;content:attr(data-label);display:block}.table-mobile-xl tr{border-bottom:1px solid rgba(110,117,130,.2)}.table-mobile-xl .btn{display:block}.toast-header{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.toast button[data-dismiss=toast]{outline:0}.toolbar{display:flex;flex-wrap:nowrap;flex-shrink:0;margin:0 -.5rem}.toolbar>*{margin:0 .5rem}.hr-text{display:flex;align-items:center;margin:2rem 0;font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:#6e7582;height:1px}.hr-text:after,.hr-text:before{flex:1 1 auto;height:1px;background-color:currentColor;opacity:.1}.hr-text:before{content:"";margin-right:.5rem}.hr-text:after{content:"";margin-left:.5rem}.hr-text>:first-child{padding-right:.5rem;padding-left:0;color:#6e7582}.hr-text.hr-text-left:before{content:none}.hr-text.hr-text-left>:first-child{padding-right:.5rem;padding-left:.5rem}.hr-text.hr-text-right:before{content:""}.hr-text.hr-text-right:after{content:none}.hr-text.hr-text-right>:first-child{padding-right:0;padding-left:.5rem}.card>.hr-text{margin:0}.hr-text-spaceless{margin:-.5rem 0}.lead{line-height:1.4}a{-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}.h1 a,.h2 a,.h3 a,.h4 a,.h5 a,.h6 a,h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:inherit}.strong,b,strong{font-weight:500}blockquote{padding-left:1rem;color:#6e7582;border-left:2px solid rgba(110,117,130,.2)}blockquote p{margin-bottom:1rem}blockquote cite{display:block;text-align:right}blockquote cite:before{content:"— "}.hr,hr{margin:2rem 0}dl dd:last-child{margin-bottom:0}code{padding:2px 4px;background:rgba(32,107,196,.03);border:1px solid rgba(32,107,196,.064);border-radius:3px}pre{padding:1rem;overflow:auto;font-size:.625rem;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;line-height:1.7142857;-moz-tab-size:3;-o-tab-size:3;tab-size:3;border-radius:3px;white-space:pre-wrap}pre code{padding:0;background:0 0;border:none;border-radius:0}img{max-width:100%}::-moz-selection{color:#fff;background-color:#307fdd}::selection{color:#fff;background-color:#307fdd}[class*=" link-"].disabled,[class^=link-].disabled{color:#a8aeb7;pointer-events:none}.subheader{font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:#6e7582}.markdown>:first-child{margin-top:0}.markdown>:last-child,.markdown>:last-child .highlight{margin-bottom:0}.markdown>.h1,.markdown>.h2,.markdown>.h3,.markdown>.h4,.markdown>.h5,.markdown>.h6,.markdown>h1,.markdown>h2,.markdown>h3,.markdown>h4,.markdown>h5,.markdown>h6{margin-top:2rem}.markdown>.h2,.markdown>h2{margin-bottom:1rem}.markdown>.h2:before,.markdown>h2:before{content:'';padding-top:1em;margin-top:-1em;display:block}@media (min-width:48rem){.markdown>.hr,.markdown>hr{margin-top:3em;margin-bottom:3em}}.chart{display:block;min-height:10rem}.chart text{font-family:inherit}.chart-sm{height:2.5rem}.chart-lg{height:15rem}.chart-square{height:5.75rem}.chart-sparkline{position:relative;width:4rem;height:2.5rem;line-height:1}.chart-sparkline-square{width:2.5rem}.chart-sparkline-wide{width:6rem}.chart-sparkline-label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:.625rem}.chart-sparkline-label .icon{width:1rem;height:1rem}.bg-white-overlay{color:#fff;background-color:rgba(245,247,251,.24)}.bg-dark-overlay{color:#fff;background-color:rgba(53,64,82,.24)}.bg-cover{background-repeat:no-repeat;background-size:cover;background-position:center}.bg-facebook{color:#fff!important;background:#3b5998!important}.text-facebook{color:#3b5998!important}.bg-twitter{color:#fff!important;background:#1da1f2!important}.text-twitter{color:#1da1f2!important}.bg-google{color:#fff!important;background:#dc4e41!important}.text-google{color:#dc4e41!important}.bg-youtube{color:#fff!important;background:red!important}.text-youtube{color:red!important}.bg-vimeo{color:#fff!important;background:#1ab7ea!important}.text-vimeo{color:#1ab7ea!important}.bg-dribbble{color:#fff!important;background:#ea4c89!important}.text-dribbble{color:#ea4c89!important}.bg-github{color:#fff!important;background:#181717!important}.text-github{color:#181717!important}.bg-instagram{color:#fff!important;background:#e4405f!important}.text-instagram{color:#e4405f!important}.bg-pinterest{color:#fff!important;background:#bd081c!important}.text-pinterest{color:#bd081c!important}.bg-vk{color:#fff!important;background:#6383a8!important}.text-vk{color:#6383a8!important}.bg-rss{color:#fff!important;background:orange!important}.text-rss{color:orange!important}.bg-flickr{color:#fff!important;background:#0063dc!important}.text-flickr{color:#0063dc!important}.bg-bitbucket{color:#fff!important;background:#0052cc!important}.text-bitbucket{color:#0052cc!important}.bg-tabler{color:#fff!important;background:#206bc4!important}.text-tabler{color:#206bc4!important}.bg-blue{background:#206bc4}.text-blue{color:#206bc4!important}.bg-blue-lt{color:#206bc4!important;background:#d2e1f3!important}.bg-azure{background:#45aaf2}.text-azure{color:#45aaf2!important}.bg-azure-lt{color:#45aaf2!important;background:#daeefc!important}.bg-indigo{background:#6574cd}.text-indigo{color:#6574cd!important}.bg-indigo-lt{color:#6574cd!important;background:#e0e3f5!important}.bg-purple{background:#a55eea}.text-purple{color:#a55eea!important}.bg-purple-lt{color:#a55eea!important;background:#eddffb!important}.bg-pink{background:#f66d9b}.text-pink{color:#f66d9b!important}.bg-pink-lt{color:#f66d9b!important;background:#fde2eb!important}.bg-red{background:#cd201f}.text-red{color:#cd201f!important}.bg-red-lt{color:#cd201f!important;background:#f5d2d2!important}.bg-orange{background:#ff922b}.text-orange{color:#ff922b!important}.bg-orange-lt{color:#ff922b!important;background:#ffe9d5!important}.bg-yellow{background:#fab005}.text-yellow{color:#fab005!important}.bg-yellow-lt{color:#fab005!important;background:#feefcd!important}.bg-lime{background:#94d82d}.text-lime{color:#94d82d!important}.bg-lime-lt{color:#94d82d!important;background:#eaf7d5!important}.bg-green{background:#5eba00}.text-green{color:#5eba00!important}.bg-green-lt{color:#5eba00!important;background:#dff1cc!important}.bg-teal{background:#2bcbba}.text-teal{color:#2bcbba!important}.bg-teal-lt{color:#2bcbba!important;background:#d5f5f1!important}.bg-cyan{background:#17a2b8}.text-cyan{color:#17a2b8!important}.bg-cyan-lt{color:#17a2b8!important;background:#d1ecf1!important}.bg-white{background:#fff}.text-white{color:#fff!important}.bg-white-lt{color:#fff!important;background:#fff!important}.bg-gray{background:#a8aeb7}.text-gray{color:#a8aeb7!important}.bg-gray-lt{color:#a8aeb7!important;background:#eeeff1!important}.bg-gray-dark{background:#545d6d}.text-gray-dark{color:#545d6d!important}.bg-gray-dark-lt{color:#545d6d!important;background:#dddfe2!important}.bg-dark{background:#354052}.text-dark{color:#354052!important}.bg-dark-lt{color:#354052!important;background:#d7d9dc!important}.scrollable{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.scrollable.hover{overflow-y:hidden}.scrollable.hover>*{margin-top:-1px}.scrollable.hover:active,.scrollable.hover:focus,.scrollable.hover:hover{overflow:visible;overflow-y:auto}.touch .scrollable{overflow-y:auto!important}.scroll-x,.scroll-y{overflow:hidden;-webkit-overflow-scrolling:touch}.scroll-y{overflow-y:auto}.scroll-x{overflow-x:auto}.no-scroll{overflow:hidden}.w-0{width:0!important}.h-0{height:0!important}.w-1{width:.25rem!important}.h-1{height:.25rem!important}.w-2{width:.5rem!important}.h-2{height:.5rem!important}.w-3{width:1rem!important}.h-3{height:1rem!important}.w-4{width:1.5rem!important}.h-4{height:1.5rem!important}.w-5{width:3rem!important}.h-5{height:3rem!important}.w-6{width:4.5rem!important}.h-6{height:4.5rem!important}.w-auto{width:auto!important}.h-auto{height:auto!important}.w-px{width:1px!important}.h-px{height:1px!important}.w-full{width:100%!important}.h-full{height:100%!important}.opacity-0{opacity:0!important}.opacity-5{opacity:.05!important}.opacity-10{opacity:.1!important}.opacity-15{opacity:.15!important}.opacity-20{opacity:.2!important}.opacity-25{opacity:.25!important}.opacity-30{opacity:.3!important}.opacity-35{opacity:.35!important}.opacity-40{opacity:.4!important}.opacity-45{opacity:.45!important}.opacity-50{opacity:.5!important}.opacity-55{opacity:.55!important}.opacity-60{opacity:.6!important}.opacity-65{opacity:.65!important}.opacity-70{opacity:.7!important}.opacity-75{opacity:.75!important}.opacity-80{opacity:.8!important}.opacity-85{opacity:.85!important}.opacity-90{opacity:.9!important}.opacity-95{opacity:.95!important}.opacity-100{opacity:1!important}.hover-shadow-sm:hover{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}.hover-shadow:hover{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}.hover-shadow-lg:hover{box-shadow:0 1rem 3rem rgba(0,0,0,.175)!important}.hover-shadow-none:hover{box-shadow:none!important}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.subpixel-antialiased{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}@media not print{.theme-dark{color:#f5f7fb;background-color:#2f3949}.theme-dark .card,.theme-dark .dropdown-menu,.theme-dark .flatpickr-calendar,.theme-dark .footer,.theme-dark .modal-content,.theme-dark .modal-header{background-color:#354052;color:inherit}.theme-dark .card{border-color:transparent}.theme-dark .btn-secondary,.theme-dark .form-file-button{color:#f5f7fb;background-color:#3b475b;border-color:rgba(110,117,130,.2);background-image:none}.theme-dark .btn-secondary:hover,.theme-dark .form-file-button:hover{color:#f5f7fb;background-color:rgba(53,64,82,0);border-color:rgba(110,117,130,.2)}.theme-dark .btn-secondary.focus,.theme-dark .btn-secondary:focus,.theme-dark .form-file-button.focus,.theme-dark .form-file-button:focus{color:#f5f7fb;background-color:rgba(53,64,82,0);border-color:rgba(110,117,130,.2);box-shadow:0 0 0 .2rem rgba(193,197,204,.5)}.show>.theme-dark .btn-secondary.dropdown-toggle,.show>.theme-dark .form-file-button.dropdown-toggle,.theme-dark .btn-secondary.active,.theme-dark .btn-secondary:active,.theme-dark .form-file-button.active,.theme-dark .form-file-button:active{color:#fff;background-color:#272f3c;border-color:rgba(81,86,95,.2)}.show>.theme-dark .btn-secondary.dropdown-toggle:focus,.show>.theme-dark .form-file-button.dropdown-toggle:focus,.theme-dark .btn-secondary.active:focus,.theme-dark .btn-secondary:active:focus,.theme-dark .form-file-button.active:focus,.theme-dark .form-file-button:active:focus{box-shadow:0 0 0 .2rem rgba(193,197,204,.5)}.theme-dark .btn-secondary.disabled,.theme-dark .btn-secondary:disabled,.theme-dark .form-file-button.disabled,.theme-dark .form-file-button:disabled{color:#f5f7fb;background-color:#3b475b;border-color:rgba(110,117,130,.2)}.theme-dark .flatpickr-input.flatpickr-input,.theme-dark .form-check-input:not(:checked),.theme-dark .form-control,.theme-dark .form-file-text,.theme-dark .form-imagecheck-figure:before,.theme-dark .form-select,.theme-dark .form-selectgroup-check,.theme-dark .form-selectgroup-label{background-color:#2f3949;color:#f5f7fb}.theme-dark .form-control-plaintext{color:#f5f7fb}.theme-dark .input-group-flat .input-group-text{background-color:#2f3949}.theme-dark .highlight{background-color:#2f3949}.theme-dark .avatar{background-color:#3b475b}.theme-dark .avatar-list-stacked .avatar{box-shadow:0 0 0 2px #354052}.theme-dark .close,.theme-dark .markdown,.theme-dark .markdown>*{color:inherit}.theme-dark .apexcharts-text{fill:#f5f7fb}.theme-dark .apexcharts-legend-text{color:inherit!important}.theme-dark .navbar-brand-autodark{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}}@media not print and (prefers-color-scheme:dark){.theme-dark-auto{color:#f5f7fb;background-color:#2f3949}.theme-dark-auto .card,.theme-dark-auto .dropdown-menu,.theme-dark-auto .flatpickr-calendar,.theme-dark-auto .footer,.theme-dark-auto .modal-content,.theme-dark-auto .modal-header{background-color:#354052;color:inherit}.theme-dark-auto .card{border-color:transparent}.theme-dark-auto .btn-secondary,.theme-dark-auto .form-file-button{color:#f5f7fb;background-color:#3b475b;border-color:rgba(110,117,130,.2);background-image:none}.theme-dark-auto .btn-secondary:hover,.theme-dark-auto .form-file-button:hover{color:#f5f7fb;background-color:rgba(53,64,82,0);border-color:rgba(110,117,130,.2)}.theme-dark-auto .btn-secondary.focus,.theme-dark-auto .btn-secondary:focus,.theme-dark-auto .form-file-button.focus,.theme-dark-auto .form-file-button:focus{color:#f5f7fb;background-color:rgba(53,64,82,0);border-color:rgba(110,117,130,.2);box-shadow:0 0 0 .2rem rgba(193,197,204,.5)}.show>.theme-dark-auto .btn-secondary.dropdown-toggle,.show>.theme-dark-auto .form-file-button.dropdown-toggle,.theme-dark-auto .btn-secondary.active,.theme-dark-auto .btn-secondary:active,.theme-dark-auto .form-file-button.active,.theme-dark-auto .form-file-button:active{color:#fff;background-color:#272f3c;border-color:rgba(81,86,95,.2)}.show>.theme-dark-auto .btn-secondary.dropdown-toggle:focus,.show>.theme-dark-auto .form-file-button.dropdown-toggle:focus,.theme-dark-auto .btn-secondary.active:focus,.theme-dark-auto .btn-secondary:active:focus,.theme-dark-auto .form-file-button.active:focus,.theme-dark-auto .form-file-button:active:focus{box-shadow:0 0 0 .2rem rgba(193,197,204,.5)}.theme-dark-auto .btn-secondary.disabled,.theme-dark-auto .btn-secondary:disabled,.theme-dark-auto .form-file-button.disabled,.theme-dark-auto .form-file-button:disabled{color:#f5f7fb;background-color:#3b475b;border-color:rgba(110,117,130,.2)}.theme-dark-auto .flatpickr-input.flatpickr-input,.theme-dark-auto .form-check-input:not(:checked),.theme-dark-auto .form-control,.theme-dark-auto .form-file-text,.theme-dark-auto .form-imagecheck-figure:before,.theme-dark-auto .form-select,.theme-dark-auto .form-selectgroup-check,.theme-dark-auto .form-selectgroup-label{background-color:#2f3949;color:#f5f7fb}.theme-dark-auto .form-control-plaintext{color:#f5f7fb}.theme-dark-auto .input-group-flat .input-group-text{background-color:#2f3949}.theme-dark-auto .highlight{background-color:#2f3949}.theme-dark-auto .avatar{background-color:#3b475b}.theme-dark-auto .avatar-list-stacked .avatar{box-shadow:0 0 0 2px #354052}.theme-dark-auto .close,.theme-dark-auto .markdown,.theme-dark-auto .markdown>*{color:inherit}.theme-dark-auto .apexcharts-text{fill:#f5f7fb}.theme-dark-auto .apexcharts-legend-text{color:inherit!important}.theme-dark-auto .navbar-brand-autodark{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}}.peity{stroke-linejoin:round;stroke-linecap:round}.selectize-control{padding:0;border:0;height:auto}.selectize-control.multi .selectize-input.has-items{padding-left:6px}.selectize-control.multi .selectize-input>div{font-size:.75rem;margin:0 6px 2px 0;padding:2px 8px;border-radius:3px;background-color:rgba(145,152,163,.1);color:inherit}.selectize-control .remove{font-size:inherit!important;font-weight:400!important;border-left:0!important;color:#6e7582!important}.selectize-control.is-valid{padding:0}.selectize-control.is-valid .selectize-input{border-color:#5eba00}.selectize-control.is-valid .selectize-input.focus{box-shadow:0 0 0 .2rem rgba(94,186,0,.25)}.selectize-control.is-valid .selectize-dropdown{background:0 0;background-color:inherit;border-color:rgba(110,117,130,.2);padding-right:0}.selectize-control.is-invalid{padding:0}.selectize-control.is-invalid .selectize-input{border-color:#cd201f}.selectize-control.is-invalid .selectize-input.focus{box-shadow:0 0 0 .2rem rgba(205,32,31,.25)}.selectize-control.is-invalid .selectize-dropdown{background:0 0;background-color:inherit;border-color:rgba(110,117,130,.2);padding-right:0}.selectize-input{display:flex!important;border:1px solid rgba(110,117,130,.2);padding:.375rem .75rem;font-size:.875rem;box-shadow:none;line-height:1.4666667;background-color:inherit!important;color:inherit!important;flex-wrap:wrap}.selectize-input.full{background-color:inherit}.selectize-input.dropdown-active{border-radius:3px}.selectize-control.single .selectize-input{background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28110, 117, 130, 0.44%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right .75rem center/16px 12px}.selectize-input.focus{border-color:#7aade9;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.selectize-input:after{content:none!important}.selectize-dropdown{height:auto;background:#fff;padding:.375rem 0;margin-top:1px}.selectize-dropdown .option,.selectize-dropdown .option-header{padding:.25rem .75rem}.selectize-dropdown .active{background:rgba(110,117,130,.06);color:inherit;cursor:pointer}.jqvmap-zoomin,.jqvmap-zoomout{height:auto;width:auto;left:.5rem;border:1px solid rgba(110,117,130,.2);background:#fff;color:#354052}.jqvmap-zoomin{top:.5rem}.jqvmap-zoomout{top:2rem}.jqvmap-label{font-family:inherit;font-size:.625rem;line-height:1;padding:.25rem;background:#354052}.apexcharts-title-text{font-weight:500!important}.apexcharts-tooltip-title{font-weight:500!important;padding-bottom:.25rem!important}.apexcharts-gridline,.apexcharts-xaxis-tick,.apexcharts-ycrosshairs{stroke:rgba(110,117,130,.2)!important}.apexcharts-tooltip{line-height:1;color:#fff;background:#354052!important;border:0!important;border-radius:3px!important}.apexcharts-tooltip-title{margin:0!important;background:0 0!important;border:0!important}.apexcharts-tooltip-series-group{padding:0 8px!important}.apexcharts-tooltip-marker{width:.5rem;height:.5rem}.apexcharts-gridline,.apexcharts-xaxis-tick,.apexcharts-ycrosshairs{stroke:#e9ecf1}.fc-unthemed .fc-content,.fc-unthemed .fc-divider,.fc-unthemed .fc-list-heading td,.fc-unthemed .fc-list-view,.fc-unthemed .fc-popover,.fc-unthemed .fc-row,.fc-unthemed tbody,.fc-unthemed td,.fc-unthemed th,.fc-unthemed thead{border-color:rgba(110,117,130,.2)}.fc-unthemed .fc-toolbar .h2,.fc-unthemed .fc-toolbar h2{font-size:1.375rem;margin:0}.fc-unthemed .fc-button{color:#6e7582;background-color:#fff;border-color:rgba(110,117,130,.2);padding:.375rem 1rem;font-size:.875rem;border-radius:3px;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.fc-unthemed .fc-button:hover{color:#354052;background-color:#ececec;border-color:rgba(87,92,102,.2)}.fc-unthemed .fc-button.focus,.fc-unthemed .fc-button:focus{color:#354052;background-color:#ececec;border-color:rgba(87,92,102,.2);box-shadow:0 0 0 .2rem rgba(110,117,130,.5)}.fc-unthemed .fc-button.active,.fc-unthemed .fc-button:active,.show>.fc-unthemed .fc-button.dropdown-toggle{color:#354052;background-color:#e6e6e6;border-color:rgba(81,86,95,.2)}.fc-unthemed .fc-button.active:focus,.fc-unthemed .fc-button:active:focus,.show>.fc-unthemed .fc-button.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(110,117,130,.5)}.fc-unthemed .fc-button.disabled,.fc-unthemed .fc-button:disabled{color:#6e7582;background-color:#fff;border-color:rgba(110,117,130,.2)}@media (prefers-reduced-motion:reduce){.fc-unthemed .fc-button{transition:none}}.fc-unthemed .fc-widget-header{border:0}.fc-unthemed .fc-day-header{padding-bottom:.25rem;font-weight:500}.fc-unthemed.card-calendar .fc-day-grid-container{border-bottom:0;border-left:0}.fc-unthemed .fc-time{font-weight:500}.fc-unthemed .fc-event{border-color:rgba(0,0,0,.05);color:#206bc4;background-color:#d2e1f3;padding:0 .25rem}.flatpickr-input.flatpickr-input{background:#fff}.flatpickr-input.flatpickr-input.active{border-color:#7aade9;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.flatpickr-calendar{background:#fff;border:1px solid rgba(110,117,130,.2);border-radius:3px;padding:.5rem;font-size:inherit;box-shadow:0 .5rem 1rem rgba(0,0,0,.15);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-top:-1px}.flatpickr-calendar:after,.flatpickr-calendar:before{content:none}.flatpickr-calendar .dayContainer,.flatpickr-calendar .flatpickr-days,.flatpickr-calendar .flatpickr-innerContainer,.flatpickr-calendar .flatpickr-rContainer{width:100%}.flatpickr-calendar .dayContainer,.flatpickr-calendar .flatpickr-day{max-width:100%;min-width:0}.flatpickr-calendar.inline{width:100%;box-shadow:none;margin:0}.flatpickr-day{color:inherit;border-radius:3px;display:flex;align-items:center;line-height:1}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.nextMonthDay,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.prevMonthDay{color:inherit;opacity:.2}.flatpickr-day.today{border-color:rgba(110,117,130,.2)}.flatpickr-day.selected{background-color:#206bc4}span.flatpickr-weekday{font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:#6e7582}.flatpickr-months{margin-bottom:.5rem}.flatpickr-months .flatpickr-month{color:currentColor;fill:currentColor}.flatpickr-months .flatpickr-current-month{font-weight:400}.flatpickr-months .flatpickr-monthDropdown-months{-webkit-appearance:none;-moz-appearance:none;appearance:none;font-weight:inherit}.flatpickr-months .flatpickr-next-month,.flatpickr-months .flatpickr-prev-month{position:static;color:#6e7582}.flatpickr-months .flatpickr-next-month:hover,.flatpickr-months .flatpickr-prev-month:hover{color:#354052}.flatpickr-months .flatpickr-next-month svg,.flatpickr-months .flatpickr-prev-month svg{display:block;fill:currentColor!important}.flatpickr-months .numInputWrapper .cur-year{font-weight:inherit}.flatpickr-months .numInputWrapper .arrowDown,.flatpickr-months .numInputWrapper .arrowUp{display:none}.flatpickr-day.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day.nextMonthDay:focus,.flatpickr-day.nextMonthDay:hover,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.today.inRange,.flatpickr-day:focus,.flatpickr-day:hover{background:rgba(110,117,130,.06);border-color:transparent}.noUi-target{border:0;box-shadow:none;background:0 0;border-radius:0;color:#206bc4}.noUi-horizontal{height:1.25rem;padding:.5rem 0}.noUi-base{background:rgba(176,181,190,.24);border-radius:1rem}.noUi-handle{width:1rem;height:1rem;border:2px solid #fff;box-shadow:0 .1rem .25rem rgba(0,0,0,.1);border-radius:1rem;background:currentColor;outline:0}.noUi-handle:after,.noUi-handle:before{content:none}.noUi-horizontal .noUi-handle{width:1rem;height:1rem;top:-.5rem;right:-.5rem;margin:1px 1px 0 0}.noUi-handle.noUi-active,.noUi-handle:focus{box-shadow:0 0 0 1px #f5f7fb,0 0 0 .2rem rgba(32,107,196,.25)}.noUi-connect{background:currentColor}
 /*# sourceMappingURL=tabler.min.css.map */
\ No newline at end of file
diff --git a/demo/dist/css/tabler.min.css.map b/demo/dist/css/tabler.min.css.map
index 77a8effb5..f8307641c 100644
Binary files a/demo/dist/css/tabler.min.css.map and b/demo/dist/css/tabler.min.css.map differ
diff --git a/demo/dist/js/tabler.min.js b/demo/dist/js/tabler.min.js
index 10003a732..8390ccf20 100644
--- a/demo/dist/js/tabler.min.js
+++ b/demo/dist/js/tabler.min.js
@@ -1,5 +1,5 @@
 /*!
-  * Tabler v1.0.0-alpha.4 (https://tabler.io)
+  * Tabler v1.0.0-alpha.5 (https://tabler.io)
   * Copyright 2018-2020 codecalm
   * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
   */'use strict';var __assign=window&&window.__assign||function(){return(__assign=Object.assign||function(e){for(var t,r=1,o=arguments.length;r<o;r++)for(var s in t=arguments[r])Object.prototype.hasOwnProperty.call(t,s)&&(e[s]=t[s]);return e}).apply(this,arguments)},CountUp=function(){var d=Math.abs;function e(e,t,n){var r=Math.pow,p=this;this.target=e,this.endVal=t,this.options=n,this.version="2.0.4",this.defaults={startVal:0,decimalPlaces:0,duration:2,useEasing:!0,useGrouping:!0,smartEasingThreshold:999,smartEasingAmount:333,separator:",",decimal:".",prefix:"",suffix:""},this.finalEndVal=null,this.useEasing=!0,this.countDown=!1,this.error="",this.startVal=0,this.paused=!0,this.count=function(e){p.startTime||(p.startTime=e);var t=e-p.startTime;p.remaining=p.duration-t,p.frameVal=p.useEasing?p.countDown?p.startVal-p.easingFn(t,0,p.startVal-p.endVal,p.duration):p.easingFn(t,p.startVal,p.endVal-p.startVal,p.duration):p.countDown?p.startVal-(p.startVal-p.endVal)*(t/p.duration):p.startVal+(p.endVal-p.startVal)*(t/p.duration),p.frameVal=p.countDown?p.frameVal<p.endVal?p.endVal:p.frameVal:p.frameVal>p.endVal?p.endVal:p.frameVal,p.frameVal=Math.round(p.frameVal*p.decimalMult)/p.decimalMult,p.printValue(p.frameVal),t<p.duration?p.rAF=requestAnimationFrame(p.count):null===p.finalEndVal?p.callback&&p.callback():p.update(p.finalEndVal)},this.formatNumber=function(s){var t,u,m,c,g,f=0>s?"-":"";if(t=d(s).toFixed(p.options.decimalPlaces),m=(u=(t+="").split("."))[0],c=1<u.length?p.options.decimal+u[1]:"",p.options.useGrouping){g="";for(var o=0,b=m.length;o<b;++o)0!=o&&0==o%3&&(g=p.options.separator+g),g=m[b-o-1]+g;m=g}return p.options.numerals&&p.options.numerals.length&&(m=m.replace(/[0-9]/g,function(e){return p.options.numerals[+e]}),c=c.replace(/[0-9]/g,function(e){return p.options.numerals[+e]})),f+p.options.prefix+m+c+p.options.suffix},this.easeOutExpo=function(e,t,n,a){return 1024*(n*(1-r(2,-10*e/a)))/1023+t},this.options=__assign({},this.defaults,n),this.formattingFn=this.options.formattingFn?this.options.formattingFn:this.formatNumber,this.easingFn=this.options.easingFn?this.options.easingFn:this.easeOutExpo,this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.endVal=this.validateValue(t),this.options.decimalPlaces=Math.max(this.options.decimalPlaces),this.decimalMult=r(10,this.options.decimalPlaces),this.resetDuration(),this.options.separator=this.options.separator+"",this.useEasing=this.options.useEasing,""===this.options.separator&&(this.options.useGrouping=!1),this.el="string"==typeof e?document.getElementById(e):e,this.el?this.printValue(this.startVal):this.error="[CountUp] target is null or undefined"}return e.prototype.determineDirectionAndSmartEasing=function(){var e=this.finalEndVal?this.finalEndVal:this.endVal;this.countDown=this.startVal>e;var t=e-this.startVal;if(d(t)>this.options.smartEasingThreshold){this.finalEndVal=e;var s=this.countDown?1:-1;this.endVal=e+s*this.options.smartEasingAmount,this.duration/=2}else this.endVal=e,this.finalEndVal=null;this.useEasing=!this.finalEndVal&&this.options.useEasing},e.prototype.start=function(e){this.error||(this.callback=e,0<this.duration?(this.determineDirectionAndSmartEasing(),this.paused=!1,this.rAF=requestAnimationFrame(this.count)):this.printValue(this.endVal))},e.prototype.pauseResume=function(){this.paused?(this.startTime=null,this.duration=this.remaining,this.startVal=this.frameVal,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count)):cancelAnimationFrame(this.rAF),this.paused=!this.paused},e.prototype.reset=function(){cancelAnimationFrame(this.rAF),this.paused=!0,this.resetDuration(),this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.printValue(this.startVal)},e.prototype.update=function(e){cancelAnimationFrame(this.rAF),this.startTime=null,this.endVal=this.validateValue(e),this.endVal!==this.frameVal&&(this.startVal=this.frameVal,this.finalEndVal||this.resetDuration(),this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count))},e.prototype.printValue=function(e){var t=this.formattingFn(e);"INPUT"===this.el.tagName?this.el.value=t:"text"===this.el.tagName||"tspan"===this.el.tagName?this.el.textContent=t:this.el.innerHTML=t},e.prototype.ensureNumber=function(e){return"number"==typeof e&&!isNaN(e)},e.prototype.validateValue=function(e){var t=+e;return this.ensureNumber(t)?t:(this.error="[CountUp] invalid start or end value: "+e,null)},e.prototype.resetDuration=function(){this.startTime=null,this.duration=1e3*+this.options.duration,this.remaining=this.duration},e}();function createCommonjsModule(e,t){return t={exports:{}},e(t,t.exports),t.exports}var nouislider=createCommonjsModule(function(e){var t=Math.max,a=Math.abs,s=Math.round;(function(t){e.exports=t()})(function(){var se=Math.min;function e(e){return"object"==typeof e&&"function"==typeof e.to&&"function"==typeof e.from}function n(e){e.parentElement.removeChild(e)}function r(e){return null!==e&&e!==void 0}function i(t){t.preventDefault()}function o(e){return e.filter(function(e){return!this[e]&&(this[e]=!0)},{})}function l(e,t){return s(e/t)*t}function d(e,t){var a=e.getBoundingClientRect(),s=e.ownerDocument,n=s.documentElement,r=S(s);return /webkit.*Chrome.*Mobile/i.test(navigator.userAgent)&&(r.x=0),t?a.top+r.y-n.clientTop:a.left+r.x-n.clientLeft}function p(e){return"number"==typeof e&&!isNaN(e)&&isFinite(e)}function u(e,t,a){0<a&&(h(e,t),setTimeout(function(){f(e,t)},a))}function m(e){return t(se(e,100),0)}function c(e){return Array.isArray(e)?e:[e]}function g(e){e=e+"";var t=e.split(".");return 1<t.length?t[1].length:0}function h(e,t){e.classList&&!/\s/.test(t)?e.classList.add(t):e.className+=" "+t}function f(e,t){e.classList?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\b)"+t.split(" ").join("|")+"(\\b|$)","gi")," ")}function b(e,t){return e.classList?e.classList.contains(t):new RegExp("\\b"+t+"\\b").test(e.className)}function S(e){var t=window.pageXOffset!==void 0,a="CSS1Compat"===(e.compatMode||""),s=t?window.pageXOffset:a?e.documentElement.scrollLeft:e.body.scrollLeft,n=t?window.pageYOffset:a?e.documentElement.scrollTop:e.body.scrollTop;return{x:s,y:n}}function v(){return window.navigator.pointerEnabled?{start:"pointerdown",move:"pointermove",end:"pointerup"}:window.navigator.msPointerEnabled?{start:"MSPointerDown",move:"MSPointerMove",end:"MSPointerUp"}:{start:"mousedown touchstart",move:"mousemove touchmove",end:"mouseup touchend"}}function V(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("test",null,t)}catch(t){}return e}function y(){return window.CSS&&CSS.supports&&CSS.supports("touch-action","none")}function E(e,t){return 100/(t-e)}function N(e,t){return 100*t/(e[1]-e[0])}function C(e,t){return N(e,0>e[0]?t+a(e[0]):t-e[0])}function A(e,t){return t*(e[1]-e[0])/100+e[0]}function U(e,t){for(var a=1;e>=t[a];)a+=1;return a}function P(e,t,a){if(a>=e.slice(-1)[0])return 100;var s=U(a,e),n=e[s-1],r=e[s],i=t[s-1],o=t[s];return i+C([n,r],a)/E(i,o)}function k(e,t,a){if(100<=a)return e.slice(-1)[0];var s=U(a,t),n=e[s-1],r=e[s],i=t[s-1],o=t[s];return A([n,r],(a-i)*E(i,o))}function D(e,t,s,n){if(100===n)return n;var r=U(n,e),i=e[r-1],a=e[r];return s?n-i>(a-i)/2?a:i:t[r-1]?e[r-1]+l(n-e[r-1],t[r-1]):n}function w(e,t,a){var s;if("number"==typeof t&&(t=[t]),!Array.isArray(t))throw new Error("noUiSlider (14.2.0): 'range' contains invalid value.");if(s="min"===e?0:"max"===e?100:parseFloat(e),!p(s)||!p(t[0]))throw new Error("noUiSlider (14.2.0): 'range' value isn't numeric.");a.xPct.push(s),a.xVal.push(t[0]),s?a.xSteps.push(!isNaN(t[1])&&t[1]):!isNaN(t[1])&&(a.xSteps[0]=t[1]),a.xHighestCompleteStep.push(0)}function F(e,t,a){var s=Math.ceil;if(t){if(a.xVal[e]===a.xVal[e+1])return void(a.xSteps[e]=a.xHighestCompleteStep[e]=a.xVal[e]);a.xSteps[e]=N([a.xVal[e],a.xVal[e+1]],t)/E(a.xPct[e],a.xPct[e+1]);var n=(a.xVal[e+1]-a.xVal[e])/a.xNumSteps[e],r=s(+n.toFixed(3)-1),i=a.xVal[e]+a.xNumSteps[e]*r;a.xHighestCompleteStep[e]=i}}function L(e,t,a){this.xPct=[],this.xVal=[],this.xSteps=[a||!1],this.xNumSteps=[!1],this.xHighestCompleteStep=[],this.snap=t;var s,n=[];for(s in e)e.hasOwnProperty(s)&&n.push([e[s],s]);for(n.length&&"object"==typeof n[0][0]?n.sort(function(e,t){return e[0][0]-t[0][0]}):n.sort(function(e,t){return e[0]-t[0]}),s=0;s<n.length;s++)w(n[s][1],n[s][0],this);for(this.xNumSteps=this.xSteps.slice(0),s=0;s<this.xNumSteps.length;s++)F(s,this.xNumSteps[s],this)}function O(t){if(e(t))return!0;throw new Error("noUiSlider (14.2.0): 'format' requires 'to' and 'from' methods.")}function j(e,t){if(!p(t))throw new Error("noUiSlider (14.2.0): 'step' is not numeric.");e.singleStep=t}function T(e,t){if("object"!=typeof t||Array.isArray(t))throw new Error("noUiSlider (14.2.0): 'range' is not an object.");if(void 0===t.min||void 0===t.max)throw new Error("noUiSlider (14.2.0): Missing 'min' or 'max' in 'range'.");if(t.min===t.max)throw new Error("noUiSlider (14.2.0): 'range' 'min' and 'max' cannot be equal.");e.spectrum=new L(t,e.snap,e.singleStep)}function H(e,t){if(t=c(t),!Array.isArray(t)||!t.length)throw new Error("noUiSlider (14.2.0): 'start' option is incorrect.");e.handles=t.length,e.start=t}function z(e,t){if(e.snap=t,"boolean"!=typeof t)throw new Error("noUiSlider (14.2.0): 'snap' option must be a boolean.")}function M(e,t){if(e.animate=t,"boolean"!=typeof t)throw new Error("noUiSlider (14.2.0): 'animate' option must be a boolean.")}function R(e,t){if(e.animationDuration=t,"number"!=typeof t)throw new Error("noUiSlider (14.2.0): 'animationDuration' option must be a number.")}function q(e,t){var a,s=[!1];if("lower"===t?t=[!0,!1]:"upper"==t&&(t=[!1,!0]),!0===t||!1===t){for(a=1;a<e.handles;a++)s.push(t);s.push(!1)}else if(!Array.isArray(t)||!t.length||t.length!==e.handles+1)throw new Error("noUiSlider (14.2.0): 'connect' option doesn't match handle count.");else s=t;e.connect=s}function B(e,t){switch(t){case"horizontal":e.ort=0;break;case"vertical":e.ort=1;break;default:throw new Error("noUiSlider (14.2.0): 'orientation' option is invalid.");}}function _(e,t){if(!p(t))throw new Error("noUiSlider (14.2.0): 'margin' option must be numeric.");if(0!==t&&(e.margin=e.spectrum.getMargin(t),!e.margin))throw new Error("noUiSlider (14.2.0): 'margin' option is only supported on linear sliders.")}function X(e,t){if(!p(t))throw new Error("noUiSlider (14.2.0): 'limit' option must be numeric.");if(e.limit=e.spectrum.getMargin(t),!e.limit||2>e.handles)throw new Error("noUiSlider (14.2.0): 'limit' option is only supported on linear sliders with 2 or more handles.")}function I(e,t){if(!p(t)&&!Array.isArray(t))throw new Error("noUiSlider (14.2.0): 'padding' option must be numeric or array of exactly 2 numbers.");if(Array.isArray(t)&&!(2===t.length||p(t[0])||p(t[1])))throw new Error("noUiSlider (14.2.0): 'padding' option must be numeric or array of exactly 2 numbers.");if(0!==t){if(Array.isArray(t)||(t=[t,t]),e.padding=[e.spectrum.getMargin(t[0]),e.spectrum.getMargin(t[1])],!1===e.padding[0]||!1===e.padding[1])throw new Error("noUiSlider (14.2.0): 'padding' option is only supported on linear sliders.");if(0>e.padding[0]||0>e.padding[1])throw new Error("noUiSlider (14.2.0): 'padding' option must be a positive number(s).");if(100<e.padding[0]+e.padding[1])throw new Error("noUiSlider (14.2.0): 'padding' option must not exceed 100% of the range.")}}function Y(e,t){switch(t){case"ltr":e.dir=0;break;case"rtl":e.dir=1;break;default:throw new Error("noUiSlider (14.2.0): 'direction' option was not recognized.");}}function G(e,t){if("string"!=typeof t)throw new Error("noUiSlider (14.2.0): 'behaviour' must be a string containing options.");var a=0<=t.indexOf("tap"),s=0<=t.indexOf("drag"),n=0<=t.indexOf("fixed"),r=0<=t.indexOf("snap"),i=0<=t.indexOf("hover"),o=0<=t.indexOf("unconstrained");if(n){if(2!==e.handles)throw new Error("noUiSlider (14.2.0): 'fixed' behaviour must be used with 2 handles");_(e,e.start[1]-e.start[0])}if(o&&(e.margin||e.limit))throw new Error("noUiSlider (14.2.0): 'unconstrained' behaviour cannot be used with margin or limit");e.events={tap:a||r,drag:s,fixed:n,snap:r,hover:i,unconstrained:o}}function W(e,t){if(!1!==t)if(!0===t){e.tooltips=[];for(var a=0;a<e.handles;a++)e.tooltips.push(!0)}else{if(e.tooltips=c(t),e.tooltips.length!==e.handles)throw new Error("noUiSlider (14.2.0): must pass a formatter for all handles.");e.tooltips.forEach(function(e){if("boolean"!=typeof e&&("object"!=typeof e||"function"!=typeof e.to))throw new Error("noUiSlider (14.2.0): 'tooltips' must be passed a formatter or 'false'.")})}}function $(e,t){e.ariaFormat=t,O(t)}function J(e,t){e.format=t,O(t)}function K(e,t){if(e.keyboardSupport=t,"boolean"!=typeof t)throw new Error("noUiSlider (14.2.0): 'keyboardSupport' option must be a boolean.")}function Q(e,t){e.documentElement=t}function Z(e,t){if("string"!=typeof t&&!1!==t)throw new Error("noUiSlider (14.2.0): 'cssPrefix' must be a string or `false`.");e.cssPrefix=t}function ee(e,t){if("object"!=typeof t)throw new Error("noUiSlider (14.2.0): 'cssClasses' must be an object.");if("string"==typeof e.cssPrefix)for(var a in e.cssClasses={},t)t.hasOwnProperty(a)&&(e.cssClasses[a]=e.cssPrefix+t[a]);else e.cssClasses=t}function te(e){var t={margin:0,limit:0,padding:0,animate:!0,animationDuration:300,ariaFormat:ne,format:ne},a={step:{r:!1,t:j},start:{r:!0,t:H},connect:{r:!0,t:q},direction:{r:!0,t:Y},snap:{r:!1,t:z},animate:{r:!1,t:M},animationDuration:{r:!1,t:R},range:{r:!0,t:T},orientation:{r:!1,t:B},margin:{r:!1,t:_},limit:{r:!1,t:X},padding:{r:!1,t:I},behaviour:{r:!0,t:G},ariaFormat:{r:!1,t:$},format:{r:!1,t:J},tooltips:{r:!1,t:W},keyboardSupport:{r:!0,t:K},documentElement:{r:!1,t:Q},cssPrefix:{r:!0,t:Z},cssClasses:{r:!0,t:ee}},s={connect:!1,direction:"ltr",behaviour:"tap",orientation:"horizontal",keyboardSupport:!0,cssPrefix:"noUi-",cssClasses:{target:"target",base:"base",origin:"origin",handle:"handle",handleLower:"handle-lower",handleUpper:"handle-upper",touchArea:"touch-area",horizontal:"horizontal",vertical:"vertical",background:"background",connect:"connect",connects:"connects",ltr:"ltr",rtl:"rtl",textDirectionLtr:"txt-dir-ltr",textDirectionRtl:"txt-dir-rtl",draggable:"draggable",drag:"state-drag",tap:"state-tap",active:"active",tooltip:"tooltip",pips:"pips",pipsHorizontal:"pips-horizontal",pipsVertical:"pips-vertical",marker:"marker",markerHorizontal:"marker-horizontal",markerVertical:"marker-vertical",markerNormal:"marker-normal",markerLarge:"marker-large",markerSub:"marker-sub",value:"value",valueHorizontal:"value-horizontal",valueVertical:"value-vertical",valueNormal:"value-normal",valueLarge:"value-large",valueSub:"value-sub"}};e.format&&!e.ariaFormat&&(e.ariaFormat=e.format),Object.keys(a).forEach(function(n){if(!r(e[n])&&void 0===s[n]){if(a[n].r)throw new Error("noUiSlider (14.2.0): '"+n+"' is required.");return!0}a[n].t(t,r(e[n])?e[n]:s[n])}),t.pips=e.pips;var n=document.createElement("div"),i=void 0!==n.style.msTransform,o=void 0!==n.style.transform;t.transformRule=o?"transform":i?"msTransform":"webkitTransform";return t.style=[["left","top"],["right","bottom"]][t.dir][t.ort],t}function ae(e,r,l){function p(e,t){var a=ke.createElement("div");return t&&h(a,t),e.appendChild(a),a}function g(e,t){var a=p(e,r.cssClasses.origin),s=p(a,r.cssClasses.handle);return p(s,r.cssClasses.touchArea),s.setAttribute("data-handle",t),r.keyboardSupport&&(s.setAttribute("tabindex","0"),s.addEventListener("keydown",function(e){return G(e,t)})),s.setAttribute("role","slider"),s.setAttribute("aria-orientation",r.ort?"vertical":"horizontal"),0===t?h(s,r.cssClasses.handleLower):t==r.handles-1&&h(s,r.cssClasses.handleUpper),a}function x(e,t){return!!t&&p(e,r.cssClasses.connect)}function E(e,t){var a=p(t,r.cssClasses.connects);ge=[],he=[],he.push(x(a,e[0]));for(var s=0;s<r.handles;s++)ge.push(g(t,s)),Ae[s]=s,he.push(x(a,e[s+1]))}function N(e){h(e,r.cssClasses.target),0===r.dir?h(e,r.cssClasses.ltr):h(e,r.cssClasses.rtl),0===r.ort?h(e,r.cssClasses.horizontal):h(e,r.cssClasses.vertical);var t=getComputedStyle(e).direction;return"rtl"===t?h(e,r.cssClasses.textDirectionRtl):h(e,r.cssClasses.textDirectionLtr),p(e,r.cssClasses.base)}function C(e,t){return!!r.tooltips[t]&&p(e.firstChild,r.cssClasses.tooltip)}function A(){return ye.hasAttribute("disabled")}function U(e){var t=ge[e];return t.hasAttribute("disabled")}function P(){be&&(J("update.tooltips"),be.forEach(function(e){e&&n(e)}),be=null)}function k(){P(),be=ge.map(C),$("update.tooltips",function(e,t,a){if(be[t]){var s=e[t];!0!==r.tooltips[t]&&(s=r.tooltips[t].to(a[t])),be[t].innerHTML=s}})}function D(){$("update",function(e,t,a,s,n){Ae.forEach(function(e){var t=ge[e],s=Q(Ce,e,0,!0,!0,!0),i=Q(Ce,e,100,!0,!0,!0),o=n[e],l=r.ariaFormat.to(a[e]);s=Ee.fromStepping(s).toFixed(1),i=Ee.fromStepping(i).toFixed(1),o=Ee.fromStepping(o).toFixed(1),t.children[0].setAttribute("aria-valuemin",s),t.children[0].setAttribute("aria-valuemax",i),t.children[0].setAttribute("aria-valuenow",o),t.children[0].setAttribute("aria-valuetext",l)})})}function w(e,t,a){if("range"===e||"steps"===e)return Ee.xVal;if("count"===e){if(2>t)throw new Error("noUiSlider (14.2.0): 'values' (>= 2) required for mode 'count'.");var s=t-1,n=100/s;for(t=[];s--;)t[s]=s*n;t.push(100),e="positions"}return"positions"===e?t.map(function(e){return Ee.fromStepping(a?Ee.getStep(e):e)}):"values"===e?a?t.map(function(e){return Ee.fromStepping(Ee.getStep(Ee.toStepping(e)))}):t:void 0}function F(e,a,n){function r(e,t){return(e+t).toFixed(7)/1}var l={},d=Ee.xVal[0],p=Ee.xVal[Ee.xVal.length-1],u=!1,m=!1,c=0;return n=o(n.slice().sort(function(e,t){return e-t})),n[0]!==d&&(n.unshift(d),u=!0),n[n.length-1]!==p&&(n.push(p),m=!0),n.forEach(function(o,d){var p,g,h,f,b,x,S,v,V,y,E=o,N=n[d+1],C="steps"===a;if(C&&(p=Ee.xNumSteps[d]),p||(p=N-E),!1!==E&&void 0!==N)for(p=t(p,1e-7),g=E;g<=N;g=r(g,p)){for(f=Ee.toStepping(g),b=f-c,v=b/e,V=s(v),y=b/V,h=1;h<=V;h+=1)x=c+h*y,l[x.toFixed(5)]=[Ee.fromStepping(x),0];S=-1<n.indexOf(g)?1:C?2:0,!d&&u&&g!==N&&(S=0),g===N&&m||(l[f.toFixed(5)]=[g,S]),c=f}}),l}function L(e,t,a){function s(e,t){var s=t===r.cssClasses.value,a=s?d:u,n=s?o:l;return t+" "+a[r.ort]+" "+n[e]}function n(e,n,o){if(o=t?t(n,o):o,-1!==o){var l=p(i,!1);l.className=s(o,r.cssClasses.marker),l.style[r.style]=e+"%",0<o&&(l=p(i,!1),l.className=s(o,r.cssClasses.value),l.setAttribute("data-value",n),l.style[r.style]=e+"%",l.innerHTML=a.to(n))}}var i=ke.createElement("div"),o=[];o[0]=r.cssClasses.valueNormal,o[1]=r.cssClasses.valueLarge,o[2]=r.cssClasses.valueSub;var l=[];l[0]=r.cssClasses.markerNormal,l[1]=r.cssClasses.markerLarge,l[2]=r.cssClasses.markerSub;var d=[r.cssClasses.valueHorizontal,r.cssClasses.valueVertical],u=[r.cssClasses.markerHorizontal,r.cssClasses.markerVertical];return h(i,r.cssClasses.pips),h(i,0===r.ort?r.cssClasses.pipsHorizontal:r.cssClasses.pipsVertical),Object.keys(e).forEach(function(t){n(t,e[t][0],e[t][1])}),i}function O(){fe&&(n(fe),fe=null)}function j(e){O();var t=e.mode,a=e.density||1,n=e.filter||!1,r=e.values||!1,i=e.stepped||!1,o=w(t,r,i),l=F(a,t,o),d=e.format||{to:s};return fe=ye.appendChild(L(l,n,d)),fe}function T(){var e=ce.getBoundingClientRect(),t="offset"+["Width","Height"][r.ort];return 0===r.ort?e.width||ce[t]:e.height||ce[t]}function H(t,a,s,n){var i=function(i){return i=z(i,n.pageOffset,n.target||a),!!i&&(!A()||n.doNotReject)&&(!b(ye,r.cssClasses.tap)||n.doNotReject)&&!(t===Se.start&&void 0!==i.buttons&&1<i.buttons)&&!(n.hover&&i.buttons)&&void(!Ve&&i.preventDefault(),i.calcPoint=i.points[r.ort],s(i,n))},o=[];return t.split(" ").forEach(function(e){a.addEventListener(e,i,!!Ve&&{passive:!0}),o.push([e,i])}),o}function z(t,e,a){var s,n,r=0===t.type.indexOf("touch"),i=0===t.type.indexOf("mouse"),o=0===t.type.indexOf("pointer");if(0===t.type.indexOf("MSPointer")&&(o=!0),r){var l=function(e){return e.target===a||a.contains(e.target)||e.target.shadowRoot&&e.target.shadowRoot.contains(a)};if("touchstart"===t.type){var d=Array.prototype.filter.call(t.touches,l);if(1<d.length)return!1;s=d[0].pageX,n=d[0].pageY}else{var p=Array.prototype.find.call(t.changedTouches,l);if(!p)return!1;s=p.pageX,n=p.pageY}}return e=e||S(ke),(i||o)&&(s=t.clientX+e.x,n=t.clientY+e.y),t.pageOffset=e,t.points=[s,n],t.cursor=i||o,t}function M(e){var t=e-d(ce,r.ort),a=100*t/T();return a=m(a),r.dir?100-a:a}function R(e){var t=100,s=!1;return ge.forEach(function(n,r){if(!U(r)){var i=Ce[r],o=a(i-e),l=100===o&&100===t,d=o<t,p=o<=t&&e>i;(d||p||l)&&(s=r,t=o)}}),s}function q(e,t){"mouseout"===e.type&&"HTML"===e.target.nodeName&&null===e.relatedTarget&&_(e,t)}function B(e,t){if(-1===navigator.appVersion.indexOf("MSIE 9")&&0===e.buttons&&0!==t.buttonsProperty)return _(e,t);var a=(r.dir?-1:1)*(e.calcPoint-t.startCalcPoint),s=100*a/t.baseSize;ee(0<a,s,t.locations,t.handleNumbers)}function _(e,t){t.handle&&(f(t.handle,r.cssClasses.active),Ue-=1),t.listeners.forEach(function(e){De.removeEventListener(e[0],e[1])}),0===Ue&&(f(ye,r.cssClasses.drag),re(),e.cursor&&(we.style.cursor="",we.removeEventListener("selectstart",i))),t.handleNumbers.forEach(function(e){K("change",e),K("set",e),K("end",e)})}function X(e,t){if(t.handleNumbers.some(U))return!1;var a;if(1===t.handleNumbers.length){var s=ge[t.handleNumbers[0]];a=s.children[0],Ue+=1,h(a,r.cssClasses.active)}e.stopPropagation();var n=[],o=H(Se.move,De,B,{target:e.target,handle:a,listeners:n,startCalcPoint:e.calcPoint,baseSize:T(),pageOffset:e.pageOffset,handleNumbers:t.handleNumbers,buttonsProperty:e.buttons,locations:Ce.slice()}),l=H(Se.end,De,_,{target:e.target,handle:a,listeners:n,doNotReject:!0,handleNumbers:t.handleNumbers}),d=H("mouseout",De,q,{target:e.target,handle:a,listeners:n,doNotReject:!0,handleNumbers:t.handleNumbers});n.push.apply(n,o.concat(l,d)),e.cursor&&(we.style.cursor=getComputedStyle(e.target).cursor,1<ge.length&&h(ye,r.cssClasses.drag),we.addEventListener("selectstart",i,!1)),t.handleNumbers.forEach(function(e){K("start",e)})}function I(e){e.stopPropagation();var t=M(e.calcPoint),a=R(t);return!1!==a&&void(!r.events.snap&&u(ye,r.cssClasses.tap,r.animationDuration),ie(a,t,!0,!0),re(),K("slide",a,!0),K("update",a,!0),K("change",a,!0),K("set",a,!0),r.events.snap&&X(e,{handleNumbers:[a]}))}function Y(e){var t=M(e.calcPoint),a=Ee.getStep(t),s=Ee.fromStepping(a);Object.keys(Pe).forEach(function(e){"hover"===e.split(".")[0]&&Pe[e].forEach(function(e){e.call(xe,s)})})}function G(e,a){if(A()||U(a))return!1;var s=["Left","Right"],n=["Down","Up"],i=["PageDown","PageUp"],o=["Home","End"];r.dir&&!r.ort?s.reverse():r.ort&&!r.dir&&(n.reverse(),i.reverse());var l=e.key.replace("Arrow",""),d=l===i[0],p=l===i[1],u=l===n[0]||l===s[0]||d,m=l===n[1]||l===s[1]||p,c=l===o[0],g=l===o[1];if(!u&&!m&&!c&&!g)return!0;e.preventDefault();var h;if(m||u){var f=u?0:1,b=ue(a),x=b[f];if(null===x)return!1;!1===x&&(x=Ee.getDefaultStep(Ce[a],u,10)),(p||d)&&(x*=5),x=t(x,1e-7),x=(u?-1:1)*x,h=Ne[a]+x}else h=g?r.spectrum.xVal[r.spectrum.xVal.length-1]:r.spectrum.xVal[0];return ie(a,Ee.toStepping(h),!0,!0),K("slide",a),K("update",a),K("change",a),K("set",a),!1}function W(e){e.fixed||ge.forEach(function(e,t){H(Se.start,e.children[0],X,{handleNumbers:[t]})}),e.tap&&H(Se.start,ce,I,{}),e.hover&&H(Se.move,ce,Y,{hover:!0}),e.drag&&he.forEach(function(t,a){if(!1!==t&&0!==a&&a!==he.length-1){var s=ge[a-1],n=ge[a],i=[t];h(t,r.cssClasses.draggable),e.fixed&&(i.push(s.children[0]),i.push(n.children[0])),i.forEach(function(e){H(Se.start,e,X,{handles:[s,n],handleNumbers:[a-1,a]})})}})}function $(e,t){Pe[e]=Pe[e]||[],Pe[e].push(t),"update"===e.split(".")[0]&&ge.forEach(function(e,t){K("update",t)})}function J(e){var t=e&&e.split(".")[0],a=t&&e.substring(t.length);Object.keys(Pe).forEach(function(e){var s=e.split(".")[0],n=e.substring(s.length);t&&t!==s||a&&a!==n||delete Pe[e]})}function K(e,t,a){Object.keys(Pe).forEach(function(s){var n=s.split(".")[0];e===n&&Pe[s].forEach(function(e){e.call(xe,Ne.map(r.format.to),t,Ne.slice(),a||!1,Ce.slice(),xe)})})}function Q(e,a,s,n,i,o){return 1<ge.length&&!r.events.unconstrained&&(n&&0<a&&(s=t(s,e[a-1]+r.margin)),i&&a<ge.length-1&&(s=se(s,e[a+1]-r.margin))),1<ge.length&&r.limit&&(n&&0<a&&(s=se(s,e[a-1]+r.limit)),i&&a<ge.length-1&&(s=t(s,e[a+1]-r.limit))),r.padding&&(0===a&&(s=t(s,r.padding[0])),a===ge.length-1&&(s=se(s,100-r.padding[1]))),s=Ee.getStep(s),s=m(s),!!(s!==e[a]||o)&&s}function Z(e,t){var a=r.ort;return(a?t:e)+", "+(a?e:t)}function ee(e,t,a,s){var n=a.slice(),r=[!e,e],i=[e,!e];s=s.slice(),e&&s.reverse(),1<s.length?s.forEach(function(e,a){var s=Q(n,e,n[e]+t,r[a],i[a],!1);!1===s?t=0:(t=s-n[e],n[e]=s)}):r=i=[!0];var l=!1;s.forEach(function(e,s){l=ie(e,a[e]+t,r[s],i[s])||l}),l&&s.forEach(function(e){K("update",e),K("slide",e)})}function ae(e,t){return r.dir?100-e-t:e}function ne(e,t){Ce[e]=t,Ne[e]=Ee.fromStepping(t);var a=10*(ae(t,0)-Fe),s="translate("+Z(a+"%","0")+")";ge[e].style[r.transformRule]=s,oe(e),oe(e+1)}function re(){Ae.forEach(function(e){var t=50<Ce[e]?-1:1,a=3+(ge.length+t*e);ge[e].style.zIndex=a})}function ie(e,t,a,s){return(t=Q(Ce,e,t,a,s,!1),!1!==t)&&(ne(e,t),!0)}function oe(e){if(he[e]){var t=0,a=100;0!==e&&(t=Ce[e-1]),e!==he.length-1&&(a=Ce[e]);var s=a-t,n="translate("+Z(ae(t,s)+"%","0")+")",i="scale("+Z(s/100,"1")+")";he[e].style[r.transformRule]=n+" "+i}}function le(e,t){return null===e||!1===e||void 0===e?Ce[t]:("number"==typeof e&&(e+=""),e=r.format.from(e),e=Ee.toStepping(e),!1===e||isNaN(e)?Ce[t]:e)}function de(e,t){var a=c(e),s=void 0===Ce[0];t=void 0===t||!!t,r.animate&&!s&&u(ye,r.cssClasses.tap,r.animationDuration),Ae.forEach(function(e){ie(e,le(a[e],e),!0,!1)});for(var n=1===Ae.length?0:1;n<Ae.length;++n)Ae.forEach(function(e){ie(e,Ce[e],!0,!0)});re(),Ae.forEach(function(e){K("update",e),null!==a[e]&&t&&K("set",e)})}function pe(){var e=Ne.map(r.format.to);return 1===e.length?e[0]:e}function ue(e){var t=Ce[e],a=Ee.getNearbySteps(t),s=Ne[e],n=a.thisStep.step,i=null;if(r.snap)return[s-a.stepBefore.startValue||null,a.stepAfter.startValue-s||null];!1!==n&&s+n>a.stepAfter.startValue&&(n=a.stepAfter.startValue-s),i=s>a.thisStep.startValue?a.thisStep.step:!1!==a.stepBefore.step&&s-a.stepBefore.highestStep,100===t?n=null:0===t&&(i=null);var o=Ee.countStepDecimals();return null!==n&&!1!==n&&(n=+n.toFixed(o)),null!==i&&!1!==i&&(i=+i.toFixed(o)),[i,n]}function me(){ce=N(ye),E(r.connect,ce),W(r.events),de(r.start),r.pips&&j(r.pips),r.tooltips&&k(),D()}var ce,ge,he,fe,be,xe,Se=v(),ve=y(),Ve=ve&&V(),ye=e,Ee=r.spectrum,Ne=[],Ce=[],Ae=[],Ue=0,Pe={},ke=e.ownerDocument,De=r.documentElement||ke.documentElement,we=ke.body,Fe="rtl"===ke.dir||1===r.ort?0:100;return me(),xe={destroy:function(){for(var e in r.cssClasses)r.cssClasses.hasOwnProperty(e)&&f(ye,r.cssClasses[e]);for(;ye.firstChild;)ye.removeChild(ye.firstChild);delete ye.noUiSlider},steps:function(){return Ae.map(ue)},on:$,off:J,get:pe,set:de,setHandle:function(e,t,a){if(e=+e,!(0<=e&&e<Ae.length))throw new Error("noUiSlider (14.2.0): invalid handle number, got: "+e);ie(e,le(t,e),!0,!0),K("update",e),a&&K("set",e)},reset:function(e){de(r.start,e)},__moveHandles:function(e,t,a){ee(e,t,Ce,a)},options:l,updateOptions:function(e,t){var a=pe(),s=["margin","limit","padding","range","animate","snap","step","format","pips","tooltips"];s.forEach(function(t){void 0!==e[t]&&(l[t]=e[t])});var n=te(l);s.forEach(function(t){void 0!==e[t]&&(r[t]=n[t])}),Ee=n.spectrum,r.margin=n.margin,r.limit=n.limit,r.padding=n.padding,r.pips?j(r.pips):O(),r.tooltips?k():P(),Ce=[],de(e.start||a,t)},target:ye,removePips:O,removeTooltips:P,pips:j},xe}L.prototype.getMargin=function(e){var t=this.xNumSteps[0];if(t&&0!=e/t%1)throw new Error("noUiSlider (14.2.0): 'limit', 'margin' and 'padding' must be divisible by step.");return!(2!==this.xPct.length)&&N(this.xVal,e)},L.prototype.toStepping=function(e){return e=P(this.xVal,this.xPct,e),e},L.prototype.fromStepping=function(e){return k(this.xVal,this.xPct,e)},L.prototype.getStep=function(e){return e=D(this.xPct,this.xSteps,this.snap,e),e},L.prototype.getDefaultStep=function(e,a,s){var n=U(e,this.xPct);return(100===e||a&&e===this.xPct[n-1])&&(n=t(n-1,1)),(this.xVal[n]-this.xVal[n-1])/s},L.prototype.getNearbySteps=function(e){var t=U(e,this.xPct);return{stepBefore:{startValue:this.xVal[t-2],step:this.xNumSteps[t-2],highestStep:this.xHighestCompleteStep[t-2]},thisStep:{startValue:this.xVal[t-1],step:this.xNumSteps[t-1],highestStep:this.xHighestCompleteStep[t-1]},stepAfter:{startValue:this.xVal[t],step:this.xNumSteps[t],highestStep:this.xHighestCompleteStep[t]}}},L.prototype.countStepDecimals=function(){var e=this.xNumSteps.map(g);return t.apply(null,e)},L.prototype.convert=function(e){return this.getStep(this.toStepping(e))};var ne={to:function(e){return e!==void 0&&e.toFixed(2)},from:Number};return{__spectrum:L,version:"14.2.0",create:function(e,t){if(!e||!e.nodeName)throw new Error("noUiSlider (14.2.0): create requires a single element, got: "+e);if(e.noUiSlider)throw new Error("noUiSlider (14.2.0): Slider was already initialized.");var a=te(t),s=ae(e,a,t);return e.noUiSlider=s,s}}})});(function(){var e=[].slice.call(document.querySelectorAll("[data-toggle=\"dropdown\"]"));e.map(function(e){return new bootstrap.Dropdown(e,{})});var t=[].slice.call(document.querySelectorAll("[data-toggle=\"tooltip\"]"));t.map(function(e){return new bootstrap.Tooltip(e,{})});var a=[].slice.call(document.querySelectorAll("[data-toggle=\"popover\"]"));a.map(function(e){return new bootstrap.Popover(e,{autoHide:!0})});var s=[].slice.call(document.querySelectorAll("[data-slider]"));s.map(function(e){var t;e.getAttribute("data-slider")&&(t=JSON.parse(e.getAttribute("data-slider")));var a=nouislider.create(e,t);t["js-name"]&&(window[t["js-name"]]=a)});var n=[].slice.call(document.querySelectorAll("[data-countup]"));n.map(function(e){var t;return""!==e.getAttribute("data-countup")&&(t=JSON.parse(e.getAttribute("data-countup"))),new CountUp(e,parseFloat(e.innerText),t).start()})})();
diff --git a/demo/dist/libs/apexcharts/dist/apexcharts.min.js b/demo/dist/libs/apexcharts/dist/apexcharts.min.js
index 45868ce69..1932863b5 100644
--- a/demo/dist/libs/apexcharts/dist/apexcharts.min.js
+++ b/demo/dist/libs/apexcharts/dist/apexcharts.min.js
@@ -1,9 +1,9 @@
 /*!
- * ApexCharts v3.17.0
+ * ApexCharts v3.18.1
  * (c) 2018-2020 Juned Chhipa
  * Released under the MIT License.
  */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).ApexCharts=e()}(this,(function(){"use strict";function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(e)}function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){for(var i=0;i<e.length;i++){var a=e[i];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,a.key,a)}}function a(t,e,a){return e&&i(t.prototype,e),a&&i(t,a),t}function s(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function r(t,e){var i=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),i.push.apply(i,a)}return i}function n(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{};e%2?r(Object(i),!0).forEach((function(e){s(t,e,i[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):r(Object(i)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))}))}return t}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&h(t,e)}function l(t){return(l=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function h(t,e){return(h=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function c(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function d(t){return function(t){if(Array.isArray(t)){for(var e=0,i=new Array(t.length);e<t.length;e++)i[e]=t[e];return i}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var g=function(){function i(){e(this,i)}return a(i,[{key:"shadeRGBColor",value:function(t,e){var i=e.split(","),a=t<0?0:255,s=t<0?-1*t:t,r=parseInt(i[0].slice(4),10),n=parseInt(i[1],10),o=parseInt(i[2],10);return"rgb("+(Math.round((a-r)*s)+r)+","+(Math.round((a-n)*s)+n)+","+(Math.round((a-o)*s)+o)+")"}},{key:"shadeHexColor",value:function(t,e){var i=parseInt(e.slice(1),16),a=t<0?0:255,s=t<0?-1*t:t,r=i>>16,n=i>>8&255,o=255&i;return"#"+(16777216+65536*(Math.round((a-r)*s)+r)+256*(Math.round((a-n)*s)+n)+(Math.round((a-o)*s)+o)).toString(16).slice(1)}},{key:"shadeColor",value:function(t,e){return e.length>7?this.shadeRGBColor(t,e):this.shadeHexColor(t,e)}}],[{key:"bind",value:function(t,e){return function(){return t.apply(e,arguments)}}},{key:"isObject",value:function(e){return e&&"object"===t(e)&&!Array.isArray(e)&&null!=e}},{key:"listToArray",value:function(t){var e,i=[];for(e=0;e<t.length;e++)i[e]=t[e];return i}},{key:"extend",value:function(t,e){var i=this;"function"!=typeof Object.assign&&(Object.assign=function(t){if(null==t)throw new TypeError("Cannot convert undefined or null to object");for(var e=Object(t),i=1;i<arguments.length;i++){var a=arguments[i];if(null!=a)for(var s in a)a.hasOwnProperty(s)&&(e[s]=a[s])}return e});var a=Object.assign({},t);return this.isObject(t)&&this.isObject(e)&&Object.keys(e).forEach((function(r){i.isObject(e[r])&&r in t?a[r]=i.extend(t[r],e[r]):Object.assign(a,s({},r,e[r]))})),a}},{key:"extendArray",value:function(t,e){var a=[];return t.map((function(t){a.push(i.extend(e,t))})),t=a}},{key:"monthMod",value:function(t){return t%12}},{key:"clone",value:function(e){if("[object Array]"===Object.prototype.toString.call(e)){for(var i=[],a=0;a<e.length;a++)i[a]=this.clone(e[a]);return i}if("object"===t(e)){var s={};for(var r in e)e.hasOwnProperty(r)&&(s[r]=this.clone(e[r]));return s}return e}},{key:"log10",value:function(t){return Math.log(t)/Math.LN10}},{key:"roundToBase10",value:function(t){return Math.pow(10,Math.floor(Math.log10(t)))}},{key:"roundToBase",value:function(t,e){return Math.pow(e,Math.floor(Math.log(t)/Math.log(e)))}},{key:"parseNumber",value:function(t){return null===t?t:parseFloat(t)}},{key:"randomId",value:function(){return(new Date%9e6).toString(16)}},{key:"noExponents",value:function(t){var e=String(t).split(/[eE]/);if(1===e.length)return e[0];var i="",a=t<0?"-":"",s=e[0].replace(".",""),r=Number(e[1])+1;if(r<0){for(i=a+"0.";r++;)i+="0";return i+s.replace(/^-/,"")}for(r-=s.length;r--;)i+="0";return s+i}},{key:"getDimensions",value:function(t){var e=getComputedStyle(t),i=[],a=t.clientHeight,s=t.clientWidth;return a-=parseFloat(e.paddingTop)+parseFloat(e.paddingBottom),s-=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight),i.push(s),i.push(a),i}},{key:"getBoundingClientRect",value:function(t){var e=t.getBoundingClientRect();return{top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:t.clientWidth,height:t.clientHeight,x:e.left,y:e.top}}},{key:"getLargestStringFromArr",value:function(t){return t.reduce((function(t,e){return Array.isArray(e)&&(e=e.reduce((function(t,e){return t.length>e.length?t:e}))),t.length>e.length?t:e}),0)}},{key:"hexToRgba",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"#999999",e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:.6;"#"!==t.substring(0,1)&&(t="#999999");var i=t.replace("#","");i=i.match(new RegExp("(.{"+i.length/3+"})","g"));for(var a=0;a<i.length;a++)i[a]=parseInt(1===i[a].length?i[a]+i[a]:i[a],16);return void 0!==e&&i.push(e),"rgba("+i.join(",")+")"}},{key:"getOpacityFromRGBA",value:function(t){return(t=t.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i))[3]}},{key:"rgb2hex",value:function(t){return(t=t.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i))&&4===t.length?"#"+("0"+parseInt(t[1],10).toString(16)).slice(-2)+("0"+parseInt(t[2],10).toString(16)).slice(-2)+("0"+parseInt(t[3],10).toString(16)).slice(-2):""}},{key:"isColorHex",value:function(t){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(t)}},{key:"polarToCartesian",value:function(t,e,i,a){var s=(a-90)*Math.PI/180;return{x:t+i*Math.cos(s),y:e+i*Math.sin(s)}}},{key:"escapeString",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"x",i=t.toString().slice();return i=i.replace(/[` ~!@#$%^&*()_|+\-=?;:'",.<>{}[\]\\/]/gi,e)}},{key:"negToZero",value:function(t){return t<0?0:t}},{key:"moveIndexInArray",value:function(t,e,i){if(i>=t.length)for(var a=i-t.length+1;a--;)t.push(void 0);return t.splice(i,0,t.splice(e,1)[0]),t}},{key:"extractNumber",value:function(t){return parseFloat(t.replace(/[^\d.]*/g,""))}},{key:"findAncestor",value:function(t,e){for(;(t=t.parentElement)&&!t.classList.contains(e););return t}},{key:"setELstyles",value:function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t.style.key=e[i])}},{key:"isNumber",value:function(t){return!isNaN(t)&&parseFloat(Number(t))===t&&!isNaN(parseInt(t,10))}},{key:"isFloat",value:function(t){return Number(t)===t&&t%1!=0}},{key:"isSafari",value:function(){return/^((?!chrome|android).)*safari/i.test(navigator.userAgent)}},{key:"isFirefox",value:function(){return navigator.userAgent.toLowerCase().indexOf("firefox")>-1}},{key:"isIE11",value:function(){if(-1!==window.navigator.userAgent.indexOf("MSIE")||window.navigator.appVersion.indexOf("Trident/")>-1)return!0}},{key:"isIE",value:function(){var t=window.navigator.userAgent,e=t.indexOf("MSIE ");if(e>0)return parseInt(t.substring(e+5,t.indexOf(".",e)),10);if(t.indexOf("Trident/")>0){var i=t.indexOf("rv:");return parseInt(t.substring(i+3,t.indexOf(".",i)),10)}var a=t.indexOf("Edge/");return a>0&&parseInt(t.substring(a+5,t.indexOf(".",a)),10)}}]),i}(),u=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"getDefaultFilter",value:function(t,e){var i=this.w;t.unfilter(!0),(new window.SVG.Filter).size("120%","180%","-5%","-40%"),"none"!==i.config.states.normal.filter?this.applyFilter(t,e,i.config.states.normal.filter.type,i.config.states.normal.filter.value):i.config.chart.dropShadow.enabled&&this.dropShadow(t,i.config.chart.dropShadow,e)}},{key:"addNormalFilter",value:function(t,e){var i=this.w;i.config.chart.dropShadow.enabled&&!t.node.classList.contains("apexcharts-marker")&&this.dropShadow(t,i.config.chart.dropShadow,e)}},{key:"addLightenFilter",value:function(t,e,i){var a=this,s=this.w,r=i.intensity;if(!g.isFirefox()){t.unfilter(!0);new window.SVG.Filter;t.filter((function(t){var i=s.config.chart.dropShadow;(i.enabled?a.addShadow(t,e,i):t).componentTransfer({rgb:{type:"linear",slope:1.5,intercept:r}})})),t.filterer.node.setAttribute("filterUnits","userSpaceOnUse"),this._scaleFilterSize(t.filterer.node)}}},{key:"addDarkenFilter",value:function(t,e,i){var a=this,s=this.w,r=i.intensity;if(!g.isFirefox()){t.unfilter(!0);new window.SVG.Filter;t.filter((function(t){var i=s.config.chart.dropShadow;(i.enabled?a.addShadow(t,e,i):t).componentTransfer({rgb:{type:"linear",slope:r}})})),t.filterer.node.setAttribute("filterUnits","userSpaceOnUse"),this._scaleFilterSize(t.filterer.node)}}},{key:"applyFilter",value:function(t,e,i){var a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:.5;switch(i){case"none":this.addNormalFilter(t,e);break;case"lighten":this.addLightenFilter(t,e,{intensity:a});break;case"darken":this.addDarkenFilter(t,e,{intensity:a})}}},{key:"addShadow",value:function(t,e,i){var a=i.blur,s=i.top,r=i.left,n=i.color,o=i.opacity,l=t.flood(Array.isArray(n)?n[e]:n,o).composite(t.sourceAlpha,"in").offset(r,s).gaussianBlur(a).merge(t.source);return t.blend(t.source,l)}},{key:"dropShadow",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,a=e.top,s=e.left,r=e.blur,n=e.color,o=e.opacity,l=e.noUserSpaceOnUse,h=this.w;return t.unfilter(!0),g.isIE()&&"radialBar"===h.config.chart.type?t:(n=Array.isArray(n)?n[i]:n,t.filter((function(t){var e=null;e=g.isSafari()||g.isFirefox()||g.isIE()?t.flood(n,o).composite(t.sourceAlpha,"in").offset(s,a).gaussianBlur(r):t.flood(n,o).composite(t.sourceAlpha,"in").offset(s,a).gaussianBlur(r).merge(t.source),t.blend(t.source,e)})),l||t.filterer.node.setAttribute("filterUnits","userSpaceOnUse"),this._scaleFilterSize(t.filterer.node),t)}},{key:"setSelectionFilter",value:function(t,e,i){var a=this.w;if(void 0!==a.globals.selectedDataPoints[e]&&a.globals.selectedDataPoints[e].indexOf(i)>-1){t.node.setAttribute("selected",!0);var s=a.config.states.active.filter;"none"!==s&&this.applyFilter(t,e,s.type,s.value)}}},{key:"_scaleFilterSize",value:function(t){!function(e){for(var i in e)e.hasOwnProperty(i)&&t.setAttribute(i,e[i])}({width:"200%",height:"200%",x:"-50%",y:"-50%"})}}]),t}(),f=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.setEasingFunctions()}return a(t,[{key:"setEasingFunctions",value:function(){var t;if(!this.w.globals.easing){switch(this.w.config.chart.animations.easing){case"linear":t="-";break;case"easein":t="<";break;case"easeout":t=">";break;case"easeinout":t="<>";break;case"swing":t=function(t){var e=1.70158;return(t-=1)*t*((e+1)*t+e)+1};break;case"bounce":t=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375};break;case"elastic":t=function(t){return t===!!t?t:Math.pow(2,-10*t)*Math.sin((t-.075)*(2*Math.PI)/.3)+1};break;default:t="<>"}this.w.globals.easing=t}}},{key:"animateLine",value:function(t,e,i,a){t.attr(e).animate(a).attr(i)}},{key:"animateCircleRadius",value:function(t,e,i,a,s,r){e||(e=0),t.attr({r:e}).animate(a,s).attr({r:i}).afterAll((function(){r()}))}},{key:"animateCircle",value:function(t,e,i,a,s){t.attr({r:e.r,cx:e.cx,cy:e.cy}).animate(a,s).attr({r:i.r,cx:i.cx,cy:i.cy})}},{key:"animateRect",value:function(t,e,i,a,s){t.attr(e).animate(a).attr(i).afterAll((function(){return s()}))}},{key:"animatePathsGradually",value:function(t){var e=t.el,i=t.realIndex,a=t.j,s=t.fill,r=t.pathFrom,n=t.pathTo,o=t.speed,l=t.delay,h=this.w,c=0;h.config.chart.animations.animateGradually.enabled&&(c=h.config.chart.animations.animateGradually.delay),h.config.chart.animations.dynamicAnimation.enabled&&h.globals.dataChanged&&"bar"!==h.config.chart.type&&(c=0),this.morphSVG(e,i,a,"line"!==h.config.chart.type||h.globals.comboCharts?s:"stroke",r,n,o,l*c)}},{key:"showDelayedElements",value:function(){this.w.globals.delayedElements.forEach((function(t){t.el.classList.remove("apexcharts-element-hidden")}))}},{key:"animationCompleted",value:function(t){var e=this.w;e.globals.animationEnded||(e.globals.animationEnded=!0,"function"==typeof e.config.chart.events.animationEnd&&e.config.chart.events.animationEnd(this.ctx,{el:t,w:e}))}},{key:"morphSVG",value:function(t,e,i,a,s,r,n,o){var l=this,h=this.w;s||(s=t.attr("pathFrom")),r||(r=t.attr("pathTo"));var c=function(t){return"radar"===h.config.chart.type&&(n=1),"M 0 ".concat(h.globals.gridHeight)};(!s||s.indexOf("undefined")>-1||s.indexOf("NaN")>-1)&&(s=c()),(r.indexOf("undefined")>-1||r.indexOf("NaN")>-1)&&(r=c()),h.globals.shouldAnimate||(n=1),t.plot(s).animate(1,h.globals.easing,o).plot(s).animate(n,h.globals.easing,o).plot(r).afterAll((function(){g.isNumber(i)?i===h.globals.series[h.globals.maxValsInArrayIndex].length-2&&h.globals.shouldAnimate&&l.animationCompleted(t):"none"!==a&&h.globals.shouldAnimate&&(!h.globals.comboCharts&&e===h.globals.series.length-1||h.globals.comboCharts)&&l.animationCompleted(t),l.showDelayedElements()}))}}]),t}(),p=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"drawLine",value:function(t,e,i,a){var s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"#a8a8a8",r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,n=arguments.length>6&&void 0!==arguments[6]?arguments[6]:null,o=this.w,l=o.globals.dom.Paper.line().attr({x1:t,y1:e,x2:i,y2:a,stroke:s,"stroke-dasharray":r,"stroke-width":n});return l}},{key:"drawRect",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:"#fefefe",n=arguments.length>6&&void 0!==arguments[6]?arguments[6]:1,o=arguments.length>7&&void 0!==arguments[7]?arguments[7]:null,l=arguments.length>8&&void 0!==arguments[8]?arguments[8]:null,h=arguments.length>9&&void 0!==arguments[9]?arguments[9]:0,c=this.w,d=c.globals.dom.Paper.rect();return d.attr({x:t,y:e,width:i>0?i:0,height:a>0?a:0,rx:s,ry:s,fill:r,opacity:n,"stroke-width":null!==o?o:0,stroke:null!==l?l:"none","stroke-dasharray":h}),d}},{key:"drawPolygon",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"#e1e1e1",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"none",a=this.w,s=a.globals.dom.Paper.polygon(t).attr({fill:i,stroke:e});return s}},{key:"drawCircle",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=this.w,a=i.globals.dom.Paper.circle(2*t);return null!==e&&a.attr(e),a}},{key:"drawPath",value:function(t){var e=t.d,i=void 0===e?"":e,a=t.stroke,s=void 0===a?"#a8a8a8":a,r=t.strokeWidth,n=void 0===r?1:r,o=t.fill,l=t.fillOpacity,h=void 0===l?1:l,c=t.strokeOpacity,d=void 0===c?1:c,g=t.classes,u=t.strokeLinecap,f=void 0===u?null:u,p=t.strokeDashArray,x=void 0===p?0:p,b=this.w;return null===f&&(f=b.config.stroke.lineCap),(i.indexOf("undefined")>-1||i.indexOf("NaN")>-1)&&(i="M 0 ".concat(b.globals.gridHeight)),b.globals.dom.Paper.path(i).attr({fill:o,"fill-opacity":h,stroke:s,"stroke-opacity":d,"stroke-linecap":f,"stroke-width":n,"stroke-dasharray":x,class:g})}},{key:"group",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=this.w,i=e.globals.dom.Paper.group();return null!==t&&i.attr(t),i}},{key:"move",value:function(t,e){var i=["M",t,e].join(" ");return i}},{key:"line",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,a=null;return null===i?a=["L",t,e].join(" "):"H"===i?a=["H",t].join(" "):"V"===i&&(a=["V",e].join(" ")),a}},{key:"curve",value:function(t,e,i,a,s,r){var n=["C",t,e,i,a,s,r].join(" ");return n}},{key:"quadraticCurve",value:function(t,e,i,a){return["Q",t,e,i,a].join(" ")}},{key:"arc",value:function(t,e,i,a,s,r,n){var o=arguments.length>7&&void 0!==arguments[7]&&arguments[7],l="A";o&&(l="a");var h=[l,t,e,i,a,s,r,n].join(" ");return h}},{key:"renderPaths",value:function(t){var e,i=t.j,a=t.realIndex,s=t.pathFrom,r=t.pathTo,o=t.stroke,l=t.strokeWidth,h=t.strokeLinecap,c=t.fill,d=t.animationDelay,g=t.initialSpeed,p=t.dataChangeSpeed,x=t.className,b=t.shouldClipToGrid,m=void 0===b||b,v=t.bindEventsOnPaths,y=void 0===v||v,w=t.drawShadow,k=void 0===w||w,A=this.w,S=new u(this.ctx),C=new f(this.ctx),L=this.w.config.chart.animations.enabled,P=L&&this.w.config.chart.animations.dynamicAnimation.enabled,T=!!(L&&!A.globals.resized||P&&A.globals.dataChanged&&A.globals.shouldAnimate);T?e=s:(e=r,A.globals.animationEnded=!0);var z=A.config.stroke.dashArray,I=0;I=Array.isArray(z)?z[a]:A.config.stroke.dashArray;var M=this.drawPath({d:e,stroke:o,strokeWidth:l,fill:c,fillOpacity:1,classes:x,strokeLinecap:h,strokeDashArray:I});if(M.attr("index",a),m&&M.attr({"clip-path":"url(#gridRectMask".concat(A.globals.cuid,")")}),"none"!==A.config.states.normal.filter.type)S.getDefaultFilter(M,a);else if(A.config.chart.dropShadow.enabled&&k&&(!A.config.chart.dropShadow.enabledOnSeries||A.config.chart.dropShadow.enabledOnSeries&&-1!==A.config.chart.dropShadow.enabledOnSeries.indexOf(a))){var X=A.config.chart.dropShadow;S.dropShadow(M,X,a)}y&&(M.node.addEventListener("mouseenter",this.pathMouseEnter.bind(this,M)),M.node.addEventListener("mouseleave",this.pathMouseLeave.bind(this,M)),M.node.addEventListener("mousedown",this.pathMouseDown.bind(this,M))),M.attr({pathTo:r,pathFrom:s});var E={el:M,j:i,realIndex:a,pathFrom:s,pathTo:r,fill:c,strokeWidth:l,delay:d};return!L||A.globals.resized||A.globals.dataChanged?!A.globals.resized&&A.globals.dataChanged||C.showDelayedElements():C.animatePathsGradually(n({},E,{speed:g})),A.globals.dataChanged&&P&&T&&C.animatePathsGradually(n({},E,{speed:p})),M}},{key:"drawPattern",value:function(t,e,i){var a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"#a8a8a8",s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,r=this.w,n=r.globals.dom.Paper.pattern(e,i,(function(r){"horizontalLines"===t?r.line(0,0,i,0).stroke({color:a,width:s+1}):"verticalLines"===t?r.line(0,0,0,e).stroke({color:a,width:s+1}):"slantedLines"===t?r.line(0,0,e,i).stroke({color:a,width:s}):"squares"===t?r.rect(e,i).fill("none").stroke({color:a,width:s}):"circles"===t&&r.circle(e).fill("none").stroke({color:a,width:s})}));return n}},{key:"drawGradient",value:function(t,e,i,a,s){var r,n=arguments.length>5&&void 0!==arguments[5]?arguments[5]:null,o=arguments.length>6&&void 0!==arguments[6]?arguments[6]:null,l=arguments.length>7&&void 0!==arguments[7]?arguments[7]:null,h=arguments.length>8&&void 0!==arguments[8]?arguments[8]:0,c=this.w;e=g.hexToRgba(e,a),i=g.hexToRgba(i,s);var d=0,u=1,f=1,p=null;null!==o&&(d=void 0!==o[0]?o[0]/100:0,u=void 0!==o[1]?o[1]/100:1,f=void 0!==o[2]?o[2]/100:1,p=void 0!==o[3]?o[3]/100:null);var x=!("donut"!==c.config.chart.type&&"pie"!==c.config.chart.type&&"bubble"!==c.config.chart.type);if(r=null===l||0===l.length?c.globals.dom.Paper.gradient(x?"radial":"linear",(function(t){t.at(d,e,a),t.at(u,i,s),t.at(f,i,s),null!==p&&t.at(p,e,a)})):c.globals.dom.Paper.gradient(x?"radial":"linear",(function(t){(Array.isArray(l[h])?l[h]:l).forEach((function(e){t.at(e.offset/100,e.color,e.opacity)}))})),x){var b=c.globals.gridWidth/2,m=c.globals.gridHeight/2;"bubble"!==c.config.chart.type?r.attr({gradientUnits:"userSpaceOnUse",cx:b,cy:m,r:n}):r.attr({cx:.5,cy:.5,r:.8,fx:.2,fy:.2})}else"vertical"===t?r.from(0,0).to(0,1):"diagonal"===t?r.from(0,0).to(1,1):"horizontal"===t?r.from(0,1).to(1,1):"diagonal2"===t&&r.from(1,0).to(0,1);return r}},{key:"drawText",value:function(t){var e,i=t.x,a=t.y,s=t.text,r=t.textAnchor,n=t.fontSize,o=t.fontFamily,l=t.fontWeight,h=t.foreColor,c=t.opacity,d=t.cssClass,g=void 0===d?"":d,u=t.isPlainText,f=void 0===u||u,p=this.w;return void 0===s&&(s=""),r||(r="start"),h&&h.length||(h=p.config.chart.foreColor),o=o||p.config.chart.fontFamily,l=l||"regular",(e=Array.isArray(s)?p.globals.dom.Paper.text((function(t){for(var e=0;e<s.length;e++)0===e?t.tspan(s[e]):t.tspan(s[e]).newLine()})):f?p.globals.dom.Paper.plain(s):p.globals.dom.Paper.text((function(t){return t.tspan(s)}))).attr({x:i,y:a,"text-anchor":r,"dominant-baseline":"auto","font-size":n,"font-family":o,"font-weight":l,fill:h,class:"apexcharts-text "+g}),e.node.style.fontFamily=o,e.node.style.opacity=c,e}},{key:"drawMarker",value:function(t,e,i){t=t||0;var a=i.pSize||0,s=null;if("square"===i.shape){var r=void 0===i.pRadius?a/2:i.pRadius;null!==e&&a||(a=0,r=0);var n=1.2*a+r,o=this.drawRect(n,n,n,n,r);o.attr({x:t-n/2,y:e-n/2,cx:t,cy:e,class:i.class?i.class:"",fill:i.pointFillColor,"fill-opacity":i.pointFillOpacity?i.pointFillOpacity:1,stroke:i.pointStrokeColor,"stroke-width":i.pWidth?i.pWidth:0,"stroke-opacity":i.pointStrokeOpacity?i.pointStrokeOpacity:1}),s=o}else"circle"!==i.shape&&i.shape||(g.isNumber(e)||(a=0,e=0),s=this.drawCircle(a,{cx:t,cy:e,class:i.class?i.class:"",stroke:i.pointStrokeColor,fill:i.pointFillColor,"fill-opacity":i.pointFillOpacity?i.pointFillOpacity:1,"stroke-width":i.pWidth?i.pWidth:0,"stroke-opacity":i.pointStrokeOpacity?i.pointStrokeOpacity:1}));return s}},{key:"pathMouseEnter",value:function(t,e){var i=this.w,a=new u(this.ctx),s=parseInt(t.node.getAttribute("index"),10),r=parseInt(t.node.getAttribute("j"),10);if("function"==typeof i.config.chart.events.dataPointMouseEnter&&i.config.chart.events.dataPointMouseEnter(e,this.ctx,{seriesIndex:s,dataPointIndex:r,w:i}),this.ctx.events.fireEvent("dataPointMouseEnter",[e,this.ctx,{seriesIndex:s,dataPointIndex:r,w:i}]),("none"===i.config.states.active.filter.type||"true"!==t.node.getAttribute("selected"))&&"none"!==i.config.states.hover.filter.type&&"none"!==i.config.states.active.filter.type&&!i.globals.isTouchDevice){var n=i.config.states.hover.filter;a.applyFilter(t,s,n.type,n.value)}}},{key:"pathMouseLeave",value:function(t,e){var i=this.w,a=new u(this.ctx),s=parseInt(t.node.getAttribute("index"),10),r=parseInt(t.node.getAttribute("j"),10);"function"==typeof i.config.chart.events.dataPointMouseLeave&&i.config.chart.events.dataPointMouseLeave(e,this.ctx,{seriesIndex:s,dataPointIndex:r,w:i}),this.ctx.events.fireEvent("dataPointMouseLeave",[e,this.ctx,{seriesIndex:s,dataPointIndex:r,w:i}]),"none"!==i.config.states.active.filter.type&&"true"===t.node.getAttribute("selected")||"none"!==i.config.states.hover.filter.type&&a.getDefaultFilter(t,s)}},{key:"pathMouseDown",value:function(t,e){var i=this.w,a=new u(this.ctx),s=parseInt(t.node.getAttribute("index"),10),r=parseInt(t.node.getAttribute("j"),10),n="false";if("true"===t.node.getAttribute("selected")){if(t.node.setAttribute("selected","false"),i.globals.selectedDataPoints[s].indexOf(r)>-1){var o=i.globals.selectedDataPoints[s].indexOf(r);i.globals.selectedDataPoints[s].splice(o,1)}}else{if(!i.config.states.active.allowMultipleDataPointsSelection&&i.globals.selectedDataPoints.length>0){i.globals.selectedDataPoints=[];var l=i.globals.dom.Paper.select(".apexcharts-series path").members,h=i.globals.dom.Paper.select(".apexcharts-series circle, .apexcharts-series rect").members,c=function(t){Array.prototype.forEach.call(t,(function(t){t.node.setAttribute("selected","false"),a.getDefaultFilter(t,s)}))};c(l),c(h)}t.node.setAttribute("selected","true"),n="true",void 0===i.globals.selectedDataPoints[s]&&(i.globals.selectedDataPoints[s]=[]),i.globals.selectedDataPoints[s].push(r)}if("true"===n){var d=i.config.states.active.filter;"none"!==d&&a.applyFilter(t,s,d.type,d.value)}else"none"!==i.config.states.active.filter.type&&a.getDefaultFilter(t,s);"function"==typeof i.config.chart.events.dataPointSelection&&i.config.chart.events.dataPointSelection(e,this.ctx,{selectedDataPoints:i.globals.selectedDataPoints,seriesIndex:s,dataPointIndex:r,w:i}),e&&this.ctx.events.fireEvent("dataPointSelection",[e,this.ctx,{selectedDataPoints:i.globals.selectedDataPoints,seriesIndex:s,dataPointIndex:r,w:i}])}},{key:"rotateAroundCenter",value:function(t){var e=t.getBBox();return{x:e.x+e.width/2,y:e.y+e.height/2}}},{key:"getTextRects",value:function(t,e,i,a){var s=!(arguments.length>4&&void 0!==arguments[4])||arguments[4],r=this.w,n=this.drawText({x:-200,y:-200,text:t,textAnchor:"start",fontSize:e,fontFamily:i,foreColor:"#fff",opacity:0});a&&n.attr("transform",a),r.globals.dom.Paper.add(n);var o=n.bbox();return s||(o=n.node.getBoundingClientRect()),n.remove(),{width:o.width,height:o.height}}},{key:"placeTextWithEllipsis",value:function(t,e,i){if("function"==typeof t.getComputedTextLength&&(t.textContent=e,e.length>0&&t.getComputedTextLength()>=i/.8)){for(var a=e.length-3;a>0;a-=3)if(t.getSubStringLength(0,a)<=i/.8)return void(t.textContent=e.substring(0,a)+"...");t.textContent="."}}}],[{key:"setAttrs",value:function(t,e){for(var i in e)e.hasOwnProperty(i)&&t.setAttribute(i,e[i])}}]),t}(),x=function(){function t(i){e(this,t),this.w=i.w,this.annoCtx=i}return a(t,[{key:"setOrientations",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=this.w;if("vertical"===t.label.orientation){var a=null!==e?e:0,s=i.globals.dom.baseEl.querySelector(".apexcharts-xaxis-annotations .apexcharts-xaxis-annotation-label[rel='".concat(a,"']"));if(null!==s){var r=s.getBoundingClientRect();s.setAttribute("x",parseFloat(s.getAttribute("x"))-r.height+4),"top"===t.label.position?s.setAttribute("y",parseFloat(s.getAttribute("y"))+r.width):s.setAttribute("y",parseFloat(s.getAttribute("y"))-r.width);var n=this.annoCtx.graphics.rotateAroundCenter(s),o=n.x,l=n.y;s.setAttribute("transform","rotate(-90 ".concat(o," ").concat(l,")"))}}}},{key:"addBackgroundToAnno",value:function(t,e){var i=this.w;if(!e.label.text||e.label.text&&!e.label.text.trim())return null;var a=i.globals.dom.baseEl.querySelector(".apexcharts-grid").getBoundingClientRect(),s=t.getBoundingClientRect(),r=e.label.style.padding.left,n=e.label.style.padding.right,o=e.label.style.padding.top,l=e.label.style.padding.bottom;"vertical"===e.label.orientation&&(o=e.label.style.padding.left,l=e.label.style.padding.right,r=e.label.style.padding.top,n=e.label.style.padding.bottom);var h=s.left-a.left-r,c=s.top-a.top-o,d=this.annoCtx.graphics.drawRect(h,c,s.width+r+n,s.height+o+l,0,e.label.style.background,1,e.label.borderWidth,e.label.borderColor,0);return e.id&&d.node.classList.add(e.id),d}},{key:"annotationsBackground",value:function(){var t=this,e=this.w,i=function(i,a,s){var r=e.globals.dom.baseEl.querySelector(".apexcharts-".concat(s,"-annotations .apexcharts-").concat(s,"-annotation-label[rel='").concat(a,"']"));if(r){var n=r.parentNode,o=t.addBackgroundToAnno(r,i);o&&n.insertBefore(o.node,r)}};e.config.annotations.xaxis.map((function(t,e){i(t,e,"xaxis")})),e.config.annotations.yaxis.map((function(t,e){i(t,e,"yaxis")})),e.config.annotations.points.map((function(t,e){i(t,e,"point")}))}},{key:"makeAnnotationDraggable",value:function(t,e,i){var a=this.w.config.annotations[e][i];t.draggable().on("dragend",(function(t){var e=t.target.getAttribute("x"),i=t.target.getAttribute("y"),s=t.target.getAttribute("cx"),r=t.target.getAttribute("cy");a.x=e,a.y=i,s&&r&&(a.x=s,a.y=r)})),t.node.addEventListener("mousedown",(function(e){e.stopPropagation(),t.selectize({pointSize:8,rotationPoint:!1,pointType:"rect"}),t.resize().on("resizedone",(function(t){var e=t.target.getAttribute("width"),i=t.target.getAttribute("height"),s=t.target.getAttribute("r");a.width=e,a.height=i,s&&(a.radius=s)}))}))}},{key:"getStringX",value:function(t){var e=this.w,i=t;e.config.xaxis.convertedCatToNumeric&&e.globals.categoryLabels.length&&(t=e.globals.categoryLabels.indexOf(t)+1);var a=e.globals.labels.indexOf(t),s=e.globals.dom.baseEl.querySelector(".apexcharts-xaxis-texts-g text:nth-child("+(a+1)+")");return s&&(i=parseFloat(s.getAttribute("x"))),i}}]),t}(),b=function(){function t(i){e(this,t),this.w=i.w,this.annoCtx=i,this.invertAxis=this.annoCtx.invertAxis}return a(t,[{key:"addXaxisAnnotation",value:function(t,e,i){var a=this.w,s=this.invertAxis?a.globals.minY:a.globals.minX,r=this.invertAxis?a.globals.maxY:a.globals.maxX,n=this.invertAxis?a.globals.yRange[0]:a.globals.xRange,o=(t.x-s)/(n/a.globals.gridWidth);this.annoCtx.inversedReversedAxis&&(o=(r-t.x)/(n/a.globals.gridWidth));var l=t.label.text;"category"!==a.config.xaxis.type&&!a.config.xaxis.convertedCatToNumeric||this.invertAxis||a.globals.dataFormatXNumeric||(o=this.annoCtx.helpers.getStringX(t.x));var h=t.strokeDashArray;if(g.isNumber(o)){if(null===t.x2||void 0===t.x2){var c=this.annoCtx.graphics.drawLine(o+t.offsetX,0+t.offsetY,o+t.offsetX,a.globals.gridHeight+t.offsetY,t.borderColor,h,t.borderWidth);e.appendChild(c.node),t.id&&c.node.classList.add(t.id)}else{var d=(t.x2-s)/(n/a.globals.gridWidth);if(this.annoCtx.inversedReversedAxis&&(d=(r-t.x2)/(n/a.globals.gridWidth)),"category"!==a.config.xaxis.type&&!a.config.xaxis.convertedCatToNumeric||this.invertAxis||a.globals.dataFormatXNumeric||(d=this.annoCtx.helpers.getStringX(t.x2)),d<o){var u=o;o=d,d=u}var f=this.annoCtx.graphics.drawRect(o+t.offsetX,0+t.offsetY,d-o,a.globals.gridHeight+t.offsetY,0,t.fillColor,t.opacity,1,t.borderColor,h);f.node.classList.add("apexcharts-annotation-rect"),f.attr("clip-path","url(#gridRectMask".concat(a.globals.cuid,")")),e.appendChild(f.node),t.id&&f.node.classList.add(t.id)}var p="top"===t.label.position?4:a.globals.gridHeight,x=this.annoCtx.graphics.getTextRects(l,parseFloat(t.label.style.fontSize)),b=this.annoCtx.graphics.drawText({x:o+t.label.offsetX,y:p+t.label.offsetY-("vertical"===t.label.orientation?"top"===t.label.position?x.width/2-12:-x.width/2:0),text:l,textAnchor:t.label.textAnchor,fontSize:t.label.style.fontSize,fontFamily:t.label.style.fontFamily,fontWeight:t.label.style.fontWeight,foreColor:t.label.style.color,cssClass:"apexcharts-xaxis-annotation-label ".concat(t.label.style.cssClass," ").concat(t.id?t.id:"")});b.attr({rel:i}),e.appendChild(b.node),this.annoCtx.helpers.setOrientations(t,i)}}},{key:"drawXAxisAnnotations",value:function(){var t=this,e=this.w,i=this.annoCtx.graphics.group({class:"apexcharts-xaxis-annotations"});return e.config.annotations.xaxis.map((function(e,a){t.addXaxisAnnotation(e,i.node,a)})),i}}]),t}(),m=function(){function t(i){e(this,t),this.w=i.w,this.annoCtx=i}return a(t,[{key:"addYaxisAnnotation",value:function(t,e,i){var a,s=this.w,r=t.strokeDashArray,n=this._getY1Y2("y1",t),o=t.label.text;if(null===t.y2||void 0===t.y2){var l=this.annoCtx.graphics.drawLine(0+t.offsetX,n+t.offsetY,s.globals.gridWidth+t.offsetX,n+t.offsetY,t.borderColor,r,t.borderWidth);e.appendChild(l.node),t.id&&l.node.classList.add(t.id)}else{if((a=this._getY1Y2("y2",t))>n){var h=n;n=a,a=h}var c=this.annoCtx.graphics.drawRect(0+t.offsetX,a+t.offsetY,s.globals.gridWidth+t.offsetX,n-a,0,t.fillColor,t.opacity,1,t.borderColor,r);c.node.classList.add("apexcharts-annotation-rect"),c.attr("clip-path","url(#gridRectMask".concat(s.globals.cuid,")")),e.appendChild(c.node),t.id&&c.node.classList.add(t.id)}var d="right"===t.label.position?s.globals.gridWidth:0,g=this.annoCtx.graphics.drawText({x:d+t.label.offsetX,y:(a||n)+t.label.offsetY-3,text:o,textAnchor:t.label.textAnchor,fontSize:t.label.style.fontSize,fontFamily:t.label.style.fontFamily,fontWeight:t.label.style.fontWeight,foreColor:t.label.style.color,cssClass:"apexcharts-yaxis-annotation-label ".concat(t.label.style.cssClass," ").concat(t.id?t.id:"")});g.attr({rel:i}),e.appendChild(g.node)}},{key:"_getY1Y2",value:function(t,e){var i,a="y1"===t?e.y:e.y2,s=this.w;if(this.annoCtx.invertAxis){var r=s.globals.labels.indexOf(a);s.config.xaxis.convertedCatToNumeric&&(r=s.globals.categoryLabels.indexOf(a));var n=s.globals.dom.baseEl.querySelector(".apexcharts-yaxis-texts-g text:nth-child("+(r+1)+")");n&&(i=parseFloat(n.getAttribute("y")))}else i=s.globals.gridHeight-(a-s.globals.minYArr[e.yAxisIndex])/(s.globals.yRange[e.yAxisIndex]/s.globals.gridHeight),s.config.yaxis[e.yAxisIndex]&&s.config.yaxis[e.yAxisIndex].reversed&&(i=(a-s.globals.minYArr[e.yAxisIndex])/(s.globals.yRange[e.yAxisIndex]/s.globals.gridHeight));return i}},{key:"drawYAxisAnnotations",value:function(){var t=this,e=this.w,i=this.annoCtx.graphics.group({class:"apexcharts-yaxis-annotations"});return e.config.annotations.yaxis.map((function(e,a){t.addYaxisAnnotation(e,i.node,a)})),i}}]),t}(),v=function(){function t(i){e(this,t),this.w=i.w,this.annoCtx=i}return a(t,[{key:"addPointAnnotation",value:function(t,e,i){var a=this.w,s=0,r=0,n=0;if(this.annoCtx.invertAxis&&console.warn("Point annotation is not supported in horizontal bar charts."),"string"==typeof t.x){var o=a.globals.labels.indexOf(t.x);a.config.xaxis.convertedCatToNumeric&&(o=a.globals.categoryLabels.indexOf(t.x)),s=this.annoCtx.helpers.getStringX(t.x);var l=t.y;null===t.y&&(l=a.globals.series[t.seriesIndex][o]),r=a.globals.gridHeight-(l-a.globals.minYArr[t.yAxisIndex])/(a.globals.yRange[t.yAxisIndex]/a.globals.gridHeight)-parseFloat(t.label.style.fontSize)-t.marker.size,n=a.globals.gridHeight-(l-a.globals.minYArr[t.yAxisIndex])/(a.globals.yRange[t.yAxisIndex]/a.globals.gridHeight),a.config.yaxis[t.yAxisIndex]&&a.config.yaxis[t.yAxisIndex].reversed&&(r=(l-a.globals.minYArr[t.yAxisIndex])/(a.globals.yRange[t.yAxisIndex]/a.globals.gridHeight)+parseFloat(t.label.style.fontSize)+t.marker.size,n=(l-a.globals.minYArr[t.yAxisIndex])/(a.globals.yRange[t.yAxisIndex]/a.globals.gridHeight))}else s=(t.x-a.globals.minX)/(a.globals.xRange/a.globals.gridWidth),r=a.globals.gridHeight-(parseFloat(t.y)-a.globals.minYArr[t.yAxisIndex])/(a.globals.yRange[t.yAxisIndex]/a.globals.gridHeight)-parseFloat(t.label.style.fontSize)-t.marker.size,n=a.globals.gridHeight-(t.y-a.globals.minYArr[t.yAxisIndex])/(a.globals.yRange[t.yAxisIndex]/a.globals.gridHeight),a.config.yaxis[t.yAxisIndex]&&a.config.yaxis[t.yAxisIndex].reversed&&(r=(parseFloat(t.y)-a.globals.minYArr[t.yAxisIndex])/(a.globals.yRange[t.yAxisIndex]/a.globals.gridHeight)-parseFloat(t.label.style.fontSize)-t.marker.size,n=(t.y-a.globals.minYArr[t.yAxisIndex])/(a.globals.yRange[t.yAxisIndex]/a.globals.gridHeight));if(g.isNumber(s)){var h={pSize:t.marker.size,pWidth:t.marker.strokeWidth,pointFillColor:t.marker.fillColor,pointStrokeColor:t.marker.strokeColor,shape:t.marker.shape,pRadius:t.marker.radius,class:"apexcharts-point-annotation-marker ".concat(t.marker.cssClass," ").concat(t.id?t.id:"")},c=this.annoCtx.graphics.drawMarker(s+t.marker.offsetX,n+t.marker.offsetY,h);e.appendChild(c.node);var d=t.label.text?t.label.text:"",u=this.annoCtx.graphics.drawText({x:s+t.label.offsetX,y:r+t.label.offsetY,text:d,textAnchor:t.label.textAnchor,fontSize:t.label.style.fontSize,fontFamily:t.label.style.fontFamily,fontWeight:t.label.style.fontWeight,foreColor:t.label.style.color,cssClass:"apexcharts-point-annotation-label ".concat(t.label.style.cssClass," ").concat(t.id?t.id:"")});if(u.attr({rel:i}),e.appendChild(u.node),t.customSVG.SVG){var f=this.annoCtx.graphics.group({class:"apexcharts-point-annotations-custom-svg "+t.customSVG.cssClass});f.attr({transform:"translate(".concat(s+t.customSVG.offsetX,", ").concat(r+t.customSVG.offsetY,")")}),f.node.innerHTML=t.customSVG.SVG,e.appendChild(f.node)}if(t.image.path){var p=t.image.width?t.image.width:20,x=t.image.height?t.image.height:20;this.annoCtx.addImage({x:s+t.image.offsetX-p/2,y:r+t.image.offsetY-x/2,width:p,height:x,path:t.image.path,appendTo:e})}}}},{key:"drawPointAnnotations",value:function(){var t=this,e=this.w,i=this.annoCtx.graphics.group({class:"apexcharts-point-annotations"});return e.config.annotations.points.map((function(e,a){t.addPointAnnotation(e,i.node,a)})),i}}]),t}();var y,w,k={name:"en",options:{months:["January","February","March","April","May","June","July","August","September","October","November","December"],shortMonths:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],days:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],shortDays:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],toolbar:{exportToSVG:"Download SVG",exportToPNG:"Download PNG",exportToCSV:"Download CSV",menu:"Menu",selection:"Selection",selectionZoom:"Selection Zoom",zoomIn:"Zoom In",zoomOut:"Zoom Out",pan:"Panning",reset:"Reset Zoom"}}},A=function(){function t(){e(this,t),this.yAxis={show:!0,showAlways:!1,showForNullSeries:!0,seriesName:void 0,opposite:!1,reversed:!1,logarithmic:!1,tickAmount:void 0,forceNiceScale:!1,max:void 0,min:void 0,floating:!1,decimalsInFloat:void 0,labels:{show:!0,minWidth:0,maxWidth:160,offsetX:0,offsetY:0,align:void 0,rotate:0,padding:20,style:{colors:[],fontSize:"11px",fontWeight:400,fontFamily:void 0,cssClass:""},formatter:void 0},axisBorder:{show:!1,color:"#e0e0e0",width:1,offsetX:0,offsetY:0},axisTicks:{show:!1,color:"#e0e0e0",width:6,offsetX:0,offsetY:0},title:{text:void 0,rotate:90,offsetY:0,offsetX:0,style:{color:void 0,fontSize:"11px",fontWeight:900,fontFamily:void 0,cssClass:""}},tooltip:{enabled:!1,offsetX:0},crosshairs:{show:!0,position:"front",stroke:{color:"#b6b6b6",width:1,dashArray:0}}},this.pointAnnotation={x:0,y:null,yAxisIndex:0,seriesIndex:0,marker:{size:4,fillColor:"#fff",strokeWidth:2,strokeColor:"#333",shape:"circle",offsetX:0,offsetY:0,radius:2,cssClass:""},label:{borderColor:"#c2c2c2",borderWidth:1,text:void 0,textAnchor:"middle",offsetX:0,offsetY:-15,style:{background:"#fff",color:void 0,fontSize:"11px",fontFamily:void 0,fontWeight:400,cssClass:"",padding:{left:5,right:5,top:2,bottom:2}}},customSVG:{SVG:void 0,cssClass:void 0,offsetX:0,offsetY:0},image:{path:void 0,width:20,height:20,offsetX:0,offsetY:0}},this.yAxisAnnotation={y:0,y2:null,strokeDashArray:1,fillColor:"#c2c2c2",borderColor:"#c2c2c2",borderWidth:1,opacity:.3,offsetX:0,offsetY:0,yAxisIndex:0,label:{borderColor:"#c2c2c2",borderWidth:1,text:void 0,textAnchor:"end",position:"right",offsetX:0,offsetY:-3,style:{background:"#fff",color:void 0,fontSize:"11px",fontFamily:void 0,fontWeight:400,cssClass:"",padding:{left:5,right:5,top:2,bottom:2}}}},this.xAxisAnnotation={x:0,x2:null,strokeDashArray:1,fillColor:"#c2c2c2",borderColor:"#c2c2c2",borderWidth:1,opacity:.3,offsetX:0,offsetY:0,label:{borderColor:"#c2c2c2",borderWidth:1,text:void 0,textAnchor:"middle",orientation:"vertical",position:"top",offsetX:0,offsetY:0,style:{background:"#fff",color:void 0,fontSize:"11px",fontFamily:void 0,fontWeight:400,cssClass:"",padding:{left:5,right:5,top:2,bottom:2}}}},this.text={x:0,y:0,text:"",textAnchor:"start",foreColor:void 0,fontSize:"13px",fontFamily:void 0,fontWeight:400,appendTo:".apexcharts-annotations",backgroundColor:"transparent",borderColor:"#c2c2c2",borderRadius:0,borderWidth:0,paddingLeft:4,paddingRight:4,paddingTop:2,paddingBottom:2},this.shape={x:0,y:0,type:"rect",width:"100%",height:50,appendTo:".apexcharts-annotations",backgroundColor:"#fff",opacity:1,borderWidth:0,borderRadius:4,borderColor:"#c2c2c2"}}return a(t,[{key:"init",value:function(){return{annotations:{position:"front",yaxis:[this.yAxisAnnotation],xaxis:[this.xAxisAnnotation],points:[this.pointAnnotation],texts:[],images:[],shapes:[]},chart:{animations:{enabled:!0,easing:"easeinout",speed:800,animateGradually:{delay:150,enabled:!0},dynamicAnimation:{enabled:!0,speed:350}},background:"transparent",locales:[k],defaultLocale:"en",dropShadow:{enabled:!1,enabledOnSeries:void 0,top:2,left:2,blur:4,color:"#000",opacity:.35},events:{animationEnd:void 0,beforeMount:void 0,mounted:void 0,updated:void 0,click:void 0,mouseMove:void 0,legendClick:void 0,markerClick:void 0,selection:void 0,dataPointSelection:void 0,dataPointMouseEnter:void 0,dataPointMouseLeave:void 0,beforeZoom:void 0,zoomed:void 0,scrolled:void 0},foreColor:"#373d3f",fontFamily:"Helvetica, Arial, sans-serif",height:"auto",parentHeightOffset:15,redrawOnParentResize:!0,id:void 0,group:void 0,offsetX:0,offsetY:0,selection:{enabled:!1,type:"x",fill:{color:"#24292e",opacity:.1},stroke:{width:1,color:"#24292e",opacity:.4,dashArray:3},xaxis:{min:void 0,max:void 0},yaxis:{min:void 0,max:void 0}},sparkline:{enabled:!1},brush:{enabled:!1,autoScaleYaxis:!0,target:void 0},stacked:!1,stackType:"normal",toolbar:{show:!0,offsetX:0,offsetY:0,tools:{download:!0,selection:!0,zoom:!0,zoomin:!0,zoomout:!0,pan:!0,reset:!0,customIcons:[]},autoSelected:"zoom"},type:"line",width:"100%",zoom:{enabled:!0,type:"x",autoScaleYaxis:!1,zoomedArea:{fill:{color:"#90CAF9",opacity:.4},stroke:{color:"#0D47A1",opacity:.4,width:1}}}},plotOptions:{bar:{horizontal:!1,columnWidth:"70%",barHeight:"70%",distributed:!1,startingShape:"flat",endingShape:"flat",colors:{ranges:[],backgroundBarColors:[],backgroundBarOpacity:1,backgroundBarRadius:0},dataLabels:{position:"top",maxItems:100,hideOverflowingLabels:!0,orientation:"horizontal"}},bubble:{minBubbleRadius:void 0,maxBubbleRadius:void 0},candlestick:{colors:{upward:"#00B746",downward:"#EF403C"},wick:{useFillColor:!0}},heatmap:{radius:2,enableShades:!0,shadeIntensity:.5,reverseNegativeShade:!1,distributed:!1,useFillColorAsStroke:!1,colorScale:{inverse:!1,ranges:[],min:void 0,max:void 0}},radialBar:{inverseOrder:!1,startAngle:0,endAngle:360,offsetX:0,offsetY:0,hollow:{margin:5,size:"50%",background:"transparent",image:void 0,imageWidth:150,imageHeight:150,imageOffsetX:0,imageOffsetY:0,imageClipped:!0,position:"front",dropShadow:{enabled:!1,top:0,left:0,blur:3,color:"#000",opacity:.5}},track:{show:!0,startAngle:void 0,endAngle:void 0,background:"#f2f2f2",strokeWidth:"97%",opacity:1,margin:5,dropShadow:{enabled:!1,top:0,left:0,blur:3,color:"#000",opacity:.5}},dataLabels:{show:!0,name:{show:!0,fontSize:"16px",fontFamily:void 0,fontWeight:600,color:void 0,offsetY:0,formatter:function(t){return t}},value:{show:!0,fontSize:"14px",fontFamily:void 0,fontWeight:400,color:void 0,offsetY:16,formatter:function(t){return t+"%"}},total:{show:!1,label:"Total",fontSize:"16px",fontWeight:600,fontFamily:void 0,color:void 0,formatter:function(t){return t.globals.seriesTotals.reduce((function(t,e){return t+e}),0)/t.globals.series.length+"%"}}}},pie:{customScale:1,offsetX:0,offsetY:0,expandOnClick:!0,dataLabels:{offset:0,minAngleToShowLabel:10},donut:{size:"65%",background:"transparent",labels:{show:!1,name:{show:!0,fontSize:"16px",fontFamily:void 0,fontWeight:600,color:void 0,offsetY:-10,formatter:function(t){return t}},value:{show:!0,fontSize:"20px",fontFamily:void 0,fontWeight:400,color:void 0,offsetY:10,formatter:function(t){return t}},total:{show:!1,showAlways:!1,label:"Total",fontSize:"16px",fontWeight:400,fontFamily:void 0,color:void 0,formatter:function(t){return t.globals.seriesTotals.reduce((function(t,e){return t+e}),0)}}}}},radar:{size:void 0,offsetX:0,offsetY:0,polygons:{strokeColors:"#e8e8e8",connectorColors:"#e8e8e8",fill:{colors:void 0}}}},colors:void 0,dataLabels:{enabled:!0,enabledOnSeries:void 0,formatter:function(t){return null!==t?t:""},textAnchor:"middle",distributed:!1,offsetX:0,offsetY:0,style:{fontSize:"12px",fontFamily:void 0,fontWeight:600,colors:void 0},background:{enabled:!0,foreColor:"#fff",borderRadius:2,padding:4,opacity:.9,borderWidth:1,borderColor:"#fff",dropShadow:{enabled:!1,top:1,left:1,blur:1,color:"#000",opacity:.45}},dropShadow:{enabled:!1,top:1,left:1,blur:1,color:"#000",opacity:.45}},fill:{type:"solid",colors:void 0,opacity:.85,gradient:{shade:"dark",type:"horizontal",shadeIntensity:.5,gradientToColors:void 0,inverseColors:!0,opacityFrom:1,opacityTo:1,stops:[0,50,100],colorStops:[]},image:{src:[],width:void 0,height:void 0},pattern:{style:"squares",width:6,height:6,strokeWidth:2}},grid:{show:!0,borderColor:"#e0e0e0",strokeDashArray:0,position:"back",xaxis:{lines:{show:!1}},yaxis:{lines:{show:!0}},row:{colors:void 0,opacity:.5},column:{colors:void 0,opacity:.5},padding:{top:0,right:10,bottom:0,left:12}},labels:[],legend:{show:!0,showForSingleSeries:!1,showForNullSeries:!0,showForZeroSeries:!0,floating:!1,position:"bottom",horizontalAlign:"center",inverseOrder:!1,fontSize:"12px",fontFamily:void 0,fontWeight:400,width:void 0,height:void 0,formatter:void 0,tooltipHoverFormatter:void 0,offsetX:-20,offsetY:0,labels:{colors:void 0,useSeriesColors:!1},markers:{width:12,height:12,strokeWidth:0,fillColors:void 0,strokeColor:"#fff",radius:12,customHTML:void 0,offsetX:0,offsetY:0,onClick:void 0},itemMargin:{horizontal:5,vertical:0},onItemClick:{toggleDataSeries:!0},onItemHover:{highlightDataSeries:!0}},markers:{discrete:[],size:0,colors:void 0,strokeColors:"#fff",strokeWidth:2,strokeOpacity:.9,strokeDashArray:0,fillOpacity:1,shape:"circle",radius:2,offsetX:0,offsetY:0,onClick:void 0,onDblClick:void 0,showNullDataPoints:!0,hover:{size:void 0,sizeOffset:3}},noData:{text:void 0,align:"center",verticalAlign:"middle",offsetX:0,offsetY:0,style:{color:void 0,fontSize:"14px",fontFamily:void 0}},responsive:[],series:void 0,states:{normal:{filter:{type:"none",value:0}},hover:{filter:{type:"lighten",value:.15}},active:{allowMultipleDataPointsSelection:!1,filter:{type:"darken",value:.65}}},title:{text:void 0,align:"left",margin:5,offsetX:0,offsetY:0,floating:!1,style:{fontSize:"14px",fontWeight:900,fontFamily:void 0,color:void 0}},subtitle:{text:void 0,align:"left",margin:5,offsetX:0,offsetY:30,floating:!1,style:{fontSize:"12px",fontWeight:400,fontFamily:void 0,color:void 0}},stroke:{show:!0,curve:"smooth",lineCap:"butt",width:2,colors:void 0,dashArray:0},tooltip:{enabled:!0,enabledOnSeries:void 0,shared:!0,followCursor:!1,intersect:!1,inverseOrder:!1,custom:void 0,fillSeriesColor:!1,theme:"light",style:{fontSize:"12px",fontFamily:void 0},onDatasetHover:{highlightDataSeries:!1},x:{show:!0,format:"dd MMM",formatter:void 0},y:{formatter:void 0,title:{formatter:function(t){return t}}},z:{formatter:void 0,title:"Size: "},marker:{show:!0,fillColors:void 0},items:{display:"flex"},fixed:{enabled:!1,position:"topRight",offsetX:0,offsetY:0}},xaxis:{type:"category",categories:[],convertedCatToNumeric:!1,offsetX:0,offsetY:0,labels:{show:!0,rotate:-45,rotateAlways:!1,hideOverlappingLabels:!0,trim:!1,minHeight:void 0,maxHeight:120,showDuplicates:!0,style:{colors:[],fontSize:"12px",fontWeight:400,fontFamily:void 0,cssClass:""},offsetX:0,offsetY:0,format:void 0,formatter:void 0,datetimeUTC:!0,datetimeFormatter:{year:"yyyy",month:"MMM 'yy",day:"dd MMM",hour:"HH:mm",minute:"HH:mm:ss"}},axisBorder:{show:!0,color:"#e0e0e0",width:"100%",height:1,offsetX:0,offsetY:0},axisTicks:{show:!0,color:"#e0e0e0",height:6,offsetX:0,offsetY:0},tickAmount:void 0,tickPlacement:"on",min:void 0,max:void 0,range:void 0,floating:!1,position:"bottom",title:{text:void 0,offsetX:0,offsetY:0,style:{color:void 0,fontSize:"12px",fontWeight:900,fontFamily:void 0,cssClass:""}},crosshairs:{show:!0,width:1,position:"back",opacity:.9,stroke:{color:"#b6b6b6",width:1,dashArray:3},fill:{type:"solid",color:"#B1B9C4",gradient:{colorFrom:"#D8E3F0",colorTo:"#BED1E6",stops:[0,100],opacityFrom:.4,opacityTo:.5}},dropShadow:{enabled:!1,left:0,top:0,blur:1,opacity:.4}},tooltip:{enabled:!0,offsetY:0,formatter:void 0,style:{fontSize:"12px",fontFamily:void 0}}},yaxis:this.yAxis,theme:{mode:"light",palette:"palette1",monochrome:{enabled:!1,color:"#008FFB",shadeTo:"light",shadeIntensity:.65}}}}}]),t}(),S=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.graphics=new p(this.ctx),this.w.globals.isBarHorizontal&&(this.invertAxis=!0),this.helpers=new x(this),this.xAxisAnnotations=new b(this),this.yAxisAnnotations=new m(this),this.pointsAnnotations=new v(this),this.w.globals.isBarHorizontal&&this.w.config.yaxis[0].reversed&&(this.inversedReversedAxis=!0),this.xDivision=this.w.globals.gridWidth/this.w.globals.dataPoints}return a(t,[{key:"drawAxesAnnotations",value:function(){var t=this.w;if(t.globals.axisCharts){for(var e=this.yAxisAnnotations.drawYAxisAnnotations(),i=this.xAxisAnnotations.drawXAxisAnnotations(),a=this.pointsAnnotations.drawPointAnnotations(),s=t.config.chart.animations.enabled,r=[e,i,a],n=[i.node,e.node,a.node],o=0;o<3;o++)t.globals.dom.elGraphical.add(r[o]),!s||t.globals.resized||t.globals.dataChanged||"scatter"!==t.config.chart.type&&"bubble"!==t.config.chart.type&&t.globals.dataPoints>1&&n[o].classList.add("apexcharts-element-hidden"),t.globals.delayedElements.push({el:n[o],index:0});this.helpers.annotationsBackground()}}},{key:"drawShapeAnnos",value:function(){var t=this;this.w.config.annotations.shapes.map((function(e,i){t.addShape(e,i)}))}},{key:"drawImageAnnos",value:function(){var t=this;this.w.config.annotations.images.map((function(e,i){t.addImage(e,i)}))}},{key:"drawTextAnnos",value:function(){var t=this;this.w.config.annotations.texts.map((function(e,i){t.addText(e,i)}))}},{key:"addXaxisAnnotation",value:function(t,e,i){this.xAxisAnnotations.addXaxisAnnotation(t,e,i)}},{key:"addYaxisAnnotation",value:function(t,e,i){this.yAxisAnnotations.addYaxisAnnotation(t,e,i)}},{key:"addPointAnnotation",value:function(t,e,i){this.pointsAnnotations.addPointAnnotation(t,e,i)}},{key:"addText",value:function(t,e){var i=t.x,a=t.y,s=t.text,r=t.textAnchor,n=t.foreColor,o=t.fontSize,l=t.fontFamily,h=t.fontWeight,c=t.cssClass,d=t.backgroundColor,g=t.borderWidth,u=t.strokeDashArray,f=t.borderRadius,p=t.borderColor,x=t.appendTo,b=void 0===x?".apexcharts-annotations":x,m=t.paddingLeft,v=void 0===m?4:m,y=t.paddingRight,w=void 0===y?4:y,k=t.paddingBottom,A=void 0===k?2:k,S=t.paddingTop,C=void 0===S?2:S,L=this.w,P=this.graphics.drawText({x:i,y:a,text:s,textAnchor:r||"start",fontSize:o||"12px",fontWeight:h||"regular",fontFamily:l||L.config.chart.fontFamily,foreColor:n||L.config.chart.foreColor,cssClass:c}),T=L.globals.dom.baseEl.querySelector(b);T&&T.appendChild(P.node);var z=P.bbox();if(t.draggable&&this.helpers.makeAnnotationDraggable(P,"texts",e),s){var I=this.graphics.drawRect(z.x-v,z.y-C,z.width+v+w,z.height+A+C,f,d||"transparent",1,g,p,u);T.insertBefore(I.node,P.node)}}},{key:"addShape",value:function(t,e){var i={type:t.type,x:t.x||0,y:t.y||0,width:t.width||"100%",height:t.height||50,circleRadius:t.radius||25,backgroundColor:t.backgroundColor||"#fff",opacity:t.opacity||1,borderWidth:t.borderWidth||0,borderRadius:t.borderRadius||4,borderColor:t.borderColor||"#c2c2c2",appendTo:t.appendTo||".apexcharts-annotations"},a=this.w;String(i.width).indexOf("%")>-1&&(i.width=parseInt(i.width,10)*parseInt(a.globals.svgWidth,10)/100);var s=null;s="circle"===i.type?this.graphics.drawCircle(i.circleRadius,{fill:i.backgroundColor,stroke:i.borderColor,"stroke-width":i.borderWidth,opacity:i.opacity,cx:i.x,cy:i.y}):this.graphics.drawRect(i.x,i.y,i.width,i.height,i.borderRadius,i.backgroundColor,i.opacity,i.borderWidth,i.borderColor);var r=a.globals.dom.baseEl.querySelector(i.appendTo);r&&r.appendChild(s.node),t.draggable&&(this.helpers.makeAnnotationDraggable(s,"shapes",e),s.node.classList.add("apexcharts-resizable-element"))}},{key:"addImage",value:function(t,e){var i=this.w,a=t.path,s=t.x,r=void 0===s?0:s,n=t.y,o=void 0===n?0:n,l=t.width,h=void 0===l?20:l,c=t.height,d=void 0===c?20:c,g=t.appendTo,u=void 0===g?".apexcharts-annotations":g,f=i.globals.dom.Paper.image(a);f.size(h,d).move(r,o);var p=i.globals.dom.baseEl.querySelector(u);p&&p.appendChild(f.node),t.draggable&&(this.helpers.makeAnnotationDraggable(f,"images",e),f.node.classList.add("apexcharts-resizable-element"))}},{key:"addXaxisAnnotationExternal",value:function(t,e,i){return this.addAnnotationExternal({params:t,pushToMemory:e,context:i,type:"xaxis",contextMethod:i.addXaxisAnnotation}),i}},{key:"addYaxisAnnotationExternal",value:function(t,e,i){return this.addAnnotationExternal({params:t,pushToMemory:e,context:i,type:"yaxis",contextMethod:i.addYaxisAnnotation}),i}},{key:"addPointAnnotationExternal",value:function(t,e,i){return void 0===this.invertAxis&&(this.invertAxis=i.w.globals.isBarHorizontal),this.addAnnotationExternal({params:t,pushToMemory:e,context:i,type:"point",contextMethod:i.addPointAnnotation}),i}},{key:"addAnnotationExternal",value:function(t){var e=t.params,i=t.pushToMemory,a=t.context,s=t.type,r=t.contextMethod,n=a,o=n.w,l=o.globals.dom.baseEl.querySelector(".apexcharts-".concat(s,"-annotations")),h=l.childNodes.length+1,c=new A,d=Object.assign({},"xaxis"===s?c.xAxisAnnotation:"yaxis"===s?c.yAxisAnnotation:c.pointAnnotation),u=g.extend(d,e);switch(s){case"xaxis":this.addXaxisAnnotation(u,l,h);break;case"yaxis":this.addYaxisAnnotation(u,l,h);break;case"point":this.addPointAnnotation(u,l,h)}var f=o.globals.dom.baseEl.querySelector(".apexcharts-".concat(s,"-annotations .apexcharts-").concat(s,"-annotation-label[rel='").concat(h,"']")),p=this.helpers.addBackgroundToAnno(f,u);return p&&l.insertBefore(p.node,f),i&&o.globals.memory.methodsToExec.push({context:n,id:u.id?u.id:g.randomId(),method:r,label:"addAnnotation",params:e}),a}},{key:"clearAnnotations",value:function(t){var e=t.w,i=e.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxis-annotations, .apexcharts-xaxis-annotations, .apexcharts-point-annotations");e.globals.memory.methodsToExec.map((function(t,i){"addText"!==t.label&&"addAnnotation"!==t.label||e.globals.memory.methodsToExec.splice(i,1)})),i=g.listToArray(i),Array.prototype.forEach.call(i,(function(t){for(;t.firstChild;)t.removeChild(t.firstChild)}))}},{key:"removeAnnotation",value:function(t,e){var i=t.w,a=i.globals.dom.baseEl.querySelectorAll(".".concat(e));a&&(i.globals.memory.methodsToExec.map((function(t,a){t.id===e&&i.globals.memory.methodsToExec.splice(a,1)})),Array.prototype.forEach.call(a,(function(t){t.parentElement.removeChild(t)})))}}]),t}(),C=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.months31=[1,3,5,7,8,10,12],this.months30=[2,4,6,9,11],this.daysCntOfYear=[0,31,59,90,120,151,181,212,243,273,304,334]}return a(t,[{key:"isValidDate",value:function(t){return!isNaN(this.parseDate(t))}},{key:"getTimeStamp",value:function(t){return Date.parse(t)?this.w.config.xaxis.labels.datetimeUTC?new Date(new Date(t).toISOString().substr(0,25)).getTime():new Date(t).getTime():t}},{key:"getDate",value:function(t){return this.w.config.xaxis.labels.datetimeUTC?new Date(new Date(t).toUTCString()):new Date(t)}},{key:"parseDate",value:function(t){var e=Date.parse(t);if(!isNaN(e))return this.getTimeStamp(t);var i=Date.parse(t.replace(/-/g,"/").replace(/[a-z]+/gi," "));return i=this.getTimeStamp(i)}},{key:"formatDate",value:function(t,e){var i=this.w.globals.locale,a=this.w.config.xaxis.labels.datetimeUTC,s=["\0"].concat(d(i.months)),r=["\x01"].concat(d(i.shortMonths)),n=["\x02"].concat(d(i.days)),o=["\x03"].concat(d(i.shortDays));function l(t,e){var i=t+"";for(e=e||2;i.length<e;)i="0"+i;return i}var h=a?t.getUTCFullYear():t.getFullYear();e=(e=(e=e.replace(/(^|[^\\])yyyy+/g,"$1"+h)).replace(/(^|[^\\])yy/g,"$1"+h.toString().substr(2,2))).replace(/(^|[^\\])y/g,"$1"+h);var c=(a?t.getUTCMonth():t.getMonth())+1;e=(e=(e=(e=e.replace(/(^|[^\\])MMMM+/g,"$1"+s[0])).replace(/(^|[^\\])MMM/g,"$1"+r[0])).replace(/(^|[^\\])MM/g,"$1"+l(c))).replace(/(^|[^\\])M/g,"$1"+c);var g=a?t.getUTCDate():t.getDate();e=(e=(e=(e=e.replace(/(^|[^\\])dddd+/g,"$1"+n[0])).replace(/(^|[^\\])ddd/g,"$1"+o[0])).replace(/(^|[^\\])dd/g,"$1"+l(g))).replace(/(^|[^\\])d/g,"$1"+g);var u=a?t.getUTCHours():t.getHours(),f=u>12?u-12:0===u?12:u;e=(e=(e=(e=e.replace(/(^|[^\\])HH+/g,"$1"+l(u))).replace(/(^|[^\\])H/g,"$1"+u)).replace(/(^|[^\\])hh+/g,"$1"+l(f))).replace(/(^|[^\\])h/g,"$1"+f);var p=a?t.getUTCMinutes():t.getMinutes();e=(e=e.replace(/(^|[^\\])mm+/g,"$1"+l(p))).replace(/(^|[^\\])m/g,"$1"+p);var x=a?t.getUTCSeconds():t.getSeconds();e=(e=e.replace(/(^|[^\\])ss+/g,"$1"+l(x))).replace(/(^|[^\\])s/g,"$1"+x);var b=a?t.getUTCMilliseconds():t.getMilliseconds();e=e.replace(/(^|[^\\])fff+/g,"$1"+l(b,3)),b=Math.round(b/10),e=e.replace(/(^|[^\\])ff/g,"$1"+l(b)),b=Math.round(b/10);var m=u<12?"AM":"PM";e=(e=(e=e.replace(/(^|[^\\])f/g,"$1"+b)).replace(/(^|[^\\])TT+/g,"$1"+m)).replace(/(^|[^\\])T/g,"$1"+m.charAt(0));var v=m.toLowerCase();e=(e=e.replace(/(^|[^\\])tt+/g,"$1"+v)).replace(/(^|[^\\])t/g,"$1"+v.charAt(0));var y=-t.getTimezoneOffset(),w=a||!y?"Z":y>0?"+":"-";if(!a){var k=(y=Math.abs(y))%60;w+=l(Math.floor(y/60))+":"+l(k)}e=e.replace(/(^|[^\\])K/g,"$1"+w);var A=(a?t.getUTCDay():t.getDay())+1;return e=(e=(e=(e=(e=e.replace(new RegExp(n[0],"g"),n[A])).replace(new RegExp(o[0],"g"),o[A])).replace(new RegExp(s[0],"g"),s[c])).replace(new RegExp(r[0],"g"),r[c])).replace(/\\(.)/g,"$1")}},{key:"getTimeUnitsfromTimestamp",value:function(t,e,i){var a=this.w;void 0!==a.config.xaxis.min&&(t=a.config.xaxis.min),void 0!==a.config.xaxis.max&&(e=a.config.xaxis.max);var s=this.getDate(t),r=this.getDate(e),n=this.formatDate(s,"yyyy MM dd HH mm").split(" "),o=this.formatDate(r,"yyyy MM dd HH mm").split(" ");return{minMinute:parseInt(n[4],10),maxMinute:parseInt(o[4],10),minHour:parseInt(n[3],10),maxHour:parseInt(o[3],10),minDate:parseInt(n[2],10),maxDate:parseInt(o[2],10),minMonth:parseInt(n[1],10)-1,maxMonth:parseInt(o[1],10)-1,minYear:parseInt(n[0],10),maxYear:parseInt(o[0],10)}}},{key:"isLeapYear",value:function(t){return t%4==0&&t%100!=0||t%400==0}},{key:"calculcateLastDaysOfMonth",value:function(t,e,i){return this.determineDaysOfMonths(t,e)-i}},{key:"determineDaysOfYear",value:function(t){var e=365;return this.isLeapYear(t)&&(e=366),e}},{key:"determineRemainingDaysOfYear",value:function(t,e,i){var a=this.daysCntOfYear[e]+i;return e>1&&this.isLeapYear()&&a++,a}},{key:"determineDaysOfMonths",value:function(t,e){var i=30;switch(t=g.monthMod(t),!0){case this.months30.indexOf(t)>-1:2===t&&(i=this.isLeapYear(e)?29:28);break;case this.months31.indexOf(t)>-1:default:i=31}return i}}]),t}(),L=function(){function t(i){e(this,t),this.opts=i}return a(t,[{key:"line",value:function(){return{chart:{animations:{easing:"swing"}},dataLabels:{enabled:!1},stroke:{width:5,curve:"straight"},markers:{size:0,hover:{sizeOffset:6}},xaxis:{crosshairs:{width:1}}}}},{key:"sparkline",value:function(t){this.opts.yaxis[0].show=!1,this.opts.yaxis[0].title.text="",this.opts.yaxis[0].axisBorder.show=!1,this.opts.yaxis[0].axisTicks.show=!1,this.opts.yaxis[0].floating=!0;return g.extend(t,{grid:{show:!1,padding:{left:0,right:0,top:0,bottom:0}},legend:{show:!1},xaxis:{labels:{show:!1},tooltip:{enabled:!1},axisBorder:{show:!1},axisTicks:{show:!1}},chart:{toolbar:{show:!1},zoom:{enabled:!1}},dataLabels:{enabled:!1}})}},{key:"bar",value:function(){return{chart:{stacked:!1,animations:{easing:"swing"}},plotOptions:{bar:{dataLabels:{position:"center"}}},dataLabels:{style:{colors:["#fff"]},background:{enabled:!1}},stroke:{width:0,lineCap:"square"},fill:{opacity:.85},legend:{markers:{shape:"square",radius:2,size:8}},tooltip:{shared:!1},xaxis:{tooltip:{enabled:!1},tickPlacement:"between",crosshairs:{width:"barWidth",position:"back",fill:{type:"gradient"},dropShadow:{enabled:!1},stroke:{width:0}}}}}},{key:"candlestick",value:function(){return{stroke:{width:1,colors:["#333"]},fill:{opacity:1},dataLabels:{enabled:!1},tooltip:{shared:!0,custom:function(t){var e=t.seriesIndex,i=t.dataPointIndex,a=t.w;return'<div class="apexcharts-tooltip-candlestick"><div>Open: <span class="value">'+a.globals.seriesCandleO[e][i]+'</span></div><div>High: <span class="value">'+a.globals.seriesCandleH[e][i]+'</span></div><div>Low: <span class="value">'+a.globals.seriesCandleL[e][i]+'</span></div><div>Close: <span class="value">'+a.globals.seriesCandleC[e][i]+"</span></div></div>"}},states:{active:{filter:{type:"none"}}},xaxis:{crosshairs:{width:1}}}}},{key:"rangeBar",value:function(){return{stroke:{width:0,lineCap:"square"},plotOptions:{bar:{dataLabels:{position:"center"}}},dataLabels:{enabled:!1,formatter:function(t,e){e.ctx;var i=e.seriesIndex,a=e.dataPointIndex,s=e.w,r=s.globals.seriesRangeStart[i][a];return s.globals.seriesRangeEnd[i][a]-r},background:{enabled:!1},style:{colors:["#fff"]}},tooltip:{shared:!1,followCursor:!0,custom:function(t){var e=t.ctx,i=t.seriesIndex,a=t.dataPointIndex,s=t.y1,r=t.y2,n=t.w,o=n.globals.seriesRangeStart[i][a],l=n.globals.seriesRangeEnd[i][a],h=n.globals.labels[a],c=n.config.series[i].name,d=n.config.tooltip.y.formatter,g=n.config.tooltip.y.title.formatter,u={w:n,seriesIndex:i,dataPointIndex:a};"function"==typeof g&&(c=g(c,u)),s&&r&&(o=s,l=r,n.config.series[i].data[a].x&&(h=n.config.series[i].data[a].x+":"),"function"==typeof d&&(h=d(h,u)));var f="",p="",x=n.globals.colors[i];if(void 0===n.config.tooltip.x.formatter)if("datetime"===n.config.xaxis.type){var b=new C(e);f=b.formatDate(b.getDate(o),n.config.tooltip.x.format),p=b.formatDate(b.getDate(l),n.config.tooltip.x.format)}else f=o,p=l;else f=n.config.tooltip.x.formatter(o),p=n.config.tooltip.x.formatter(l);return'<div class="apexcharts-tooltip-rangebar"><div> <span class="series-name" style="color: '+x+'">'+(c||"")+'</span></div><div> <span class="category">'+h+' </span> <span class="value start-value">'+f+'</span> <span class="separator">-</span> <span class="value end-value">'+p+"</span></div></div>"}},xaxis:{tickPlacement:"between",tooltip:{enabled:!1},crosshairs:{stroke:{width:0}}}}}},{key:"area",value:function(){return{stroke:{width:4},fill:{type:"gradient",gradient:{inverseColors:!1,shade:"light",type:"vertical",opacityFrom:.65,opacityTo:.5,stops:[0,100,100]}},markers:{size:0,hover:{sizeOffset:6}},tooltip:{followCursor:!1}}}},{key:"brush",value:function(t){return g.extend(t,{chart:{toolbar:{autoSelected:"selection",show:!1},zoom:{enabled:!1}},dataLabels:{enabled:!1},stroke:{width:1},tooltip:{enabled:!1},xaxis:{tooltip:{enabled:!1}}})}},{key:"stacked100",value:function(t){t.dataLabels=t.dataLabels||{},t.dataLabels.formatter=t.dataLabels.formatter||void 0;var e=t.dataLabels.formatter;return t.yaxis.forEach((function(e,i){t.yaxis[i].min=0,t.yaxis[i].max=100})),"bar"===t.chart.type&&(t.dataLabels.formatter=e||function(t){return"number"==typeof t&&t?t.toFixed(0)+"%":t}),t}},{key:"convertCatToNumeric",value:function(t){return t.xaxis.convertedCatToNumeric=!0,t}},{key:"convertCatToNumericXaxis",value:function(t,e,i){t.xaxis.type="numeric",t.xaxis.labels=t.xaxis.labels||{},t.xaxis.labels.formatter=t.xaxis.labels.formatter||function(t){return g.isNumber(t)?Math.floor(t):t};var a=t.xaxis.labels.formatter,s=t.xaxis.categories&&t.xaxis.categories.length?t.xaxis.categories:t.labels;return i&&i.length&&(s=i.map((function(t){return t.toString()}))),s&&s.length&&(t.xaxis.labels.formatter=function(t){return g.isNumber(t)?a(s[Math.floor(t)-1]):a(t)}),t.xaxis.categories=[],t.labels=[],t.xaxis.tickAmount=t.xaxis.tickAmount||"dataPoints",t}},{key:"bubble",value:function(){return{dataLabels:{style:{colors:["#fff"]}},tooltip:{shared:!1,intersect:!0},xaxis:{crosshairs:{width:0}},fill:{type:"solid",gradient:{shade:"light",inverse:!0,shadeIntensity:.55,opacityFrom:.4,opacityTo:.8}}}}},{key:"scatter",value:function(){return{dataLabels:{enabled:!1},tooltip:{shared:!1,intersect:!0},markers:{size:6,strokeWidth:1,hover:{sizeOffset:2}}}}},{key:"heatmap",value:function(){return{chart:{stacked:!1},fill:{opacity:1},dataLabels:{style:{colors:["#fff"]}},stroke:{colors:["#fff"]},tooltip:{followCursor:!0,marker:{show:!1},x:{show:!1}},legend:{position:"top",markers:{shape:"square",size:10,offsetY:2}},grid:{padding:{right:20}}}}},{key:"pie",value:function(){return{chart:{toolbar:{show:!1}},plotOptions:{pie:{donut:{labels:{show:!1}}}},dataLabels:{formatter:function(t){return t.toFixed(1)+"%"},style:{colors:["#fff"]},dropShadow:{enabled:!0}},stroke:{colors:["#fff"]},fill:{opacity:1,gradient:{shade:"dark",shadeIntensity:.35,inverseColors:!1,stops:[0,100,100]}},tooltip:{theme:"dark",fillSeriesColor:!0},legend:{position:"right"}}}},{key:"donut",value:function(){return{chart:{toolbar:{show:!1}},dataLabels:{formatter:function(t){return t.toFixed(1)+"%"},style:{colors:["#fff"]},dropShadow:{enabled:!0}},stroke:{colors:["#fff"]},fill:{opacity:1,gradient:{shade:"dark",shadeIntensity:.4,inverseColors:!1,type:"vertical",opacityFrom:1,opacityTo:1,stops:[70,98,100]}},tooltip:{theme:"dark",fillSeriesColor:!0},legend:{position:"right"}}}},{key:"radar",value:function(){return this.opts.yaxis[0].labels.offsetY=this.opts.yaxis[0].labels.offsetY?this.opts.yaxis[0].labels.offsetY:6,{dataLabels:{enabled:!1,style:{fontSize:"11px"}},stroke:{width:2},markers:{size:3,strokeWidth:1,strokeOpacity:1},fill:{opacity:.2},tooltip:{shared:!1,intersect:!0,followCursor:!0},grid:{show:!1},xaxis:{labels:{formatter:function(t){return t},style:{colors:["#a8a8a8"],fontSize:"11px"}},tooltip:{enabled:!1},crosshairs:{show:!1}}}}},{key:"radialBar",value:function(){return{chart:{animations:{dynamicAnimation:{enabled:!0,speed:800}},toolbar:{show:!1}},fill:{gradient:{shade:"dark",shadeIntensity:.4,inverseColors:!1,type:"diagonal2",opacityFrom:1,opacityTo:1,stops:[70,98,100]}},legend:{show:!1,position:"right"},tooltip:{enabled:!1,fillSeriesColor:!0}}}}]),t}(),P=function(){function i(t){e(this,i),this.opts=t}return a(i,[{key:"init",value:function(e){var i=e.responsiveOverride,a=this.opts,s=new A,r=new L(a);this.chartType=a.chart.type,"histogram"===this.chartType&&(a.chart.type="bar",a=g.extend({plotOptions:{bar:{columnWidth:"99.99%"}}},a)),a=this.extendYAxis(a),a=this.extendAnnotations(a);var n=s.init(),o={};if(a&&"object"===t(a)){var l={};l=-1!==["line","area","bar","candlestick","rangeBar","histogram","bubble","scatter","heatmap","pie","donut","radar","radialBar"].indexOf(a.chart.type)?r[a.chart.type]():r.line(),a.chart.brush&&a.chart.brush.enabled&&(l=r.brush(l)),a.chart.stacked&&"100%"===a.chart.stackType&&(a=r.stacked100(a)),this.checkForDarkTheme(window.Apex),this.checkForDarkTheme(a),a.xaxis=a.xaxis||window.Apex.xaxis||{},i||(a.xaxis.convertedCatToNumeric=!1),((a=this.checkForCatToNumericXAxis(this.chartType,l,a)).chart.sparkline&&a.chart.sparkline.enabled||window.Apex.chart&&window.Apex.chart.sparkline&&window.Apex.chart.sparkline.enabled)&&(l=r.sparkline(l)),o=g.extend(n,l)}var h=g.extend(o,window.Apex);return n=g.extend(h,a),n=this.handleUserInputErrors(n)}},{key:"checkForCatToNumericXAxis",value:function(t,e,i){var a=new L(i),s="bar"===t&&i.plotOptions&&i.plotOptions.bar&&i.plotOptions.bar.horizontal,r="pie"===t||"donut"===t||"radar"===t||"radialBar"===t||"heatmap"===t,n="datetime"!==i.xaxis.type&&"numeric"!==i.xaxis.type,o=i.xaxis.tickPlacement?i.xaxis.tickPlacement:e.xaxis&&e.xaxis.tickPlacement;return s||r||!n||"between"===o||(i=a.convertCatToNumeric(i)),i}},{key:"extendYAxis",value:function(t){var e=new A;(void 0===t.yaxis||!t.yaxis||Array.isArray(t.yaxis)&&0===t.yaxis.length)&&(t.yaxis={}),t.yaxis.constructor!==Array&&window.Apex.yaxis&&window.Apex.yaxis.constructor!==Array&&(t.yaxis=g.extend(t.yaxis,window.Apex.yaxis)),t.yaxis.constructor!==Array?t.yaxis=[g.extend(e.yAxis,t.yaxis)]:t.yaxis=g.extendArray(t.yaxis,e.yAxis);var i=!1;return t.yaxis.forEach((function(t){t.logarithmic&&(i=!0)})),i&&t.series.length!==t.yaxis.length&&t.series.length&&(t.yaxis=t.series.map((function(i,a){if(i.name||(t.series[a].name="series-".concat(a+1)),t.yaxis[a])return t.yaxis[a].seriesName=t.series[a].name,t.yaxis[a];var s=g.extend(e.yAxis,t.yaxis[0]);return s.show=!1,s}))),i&&t.series.length>1&&t.series.length!==t.yaxis.length&&console.warn("A multi-series logarithmic chart should have equal number of series and y-axes. Please make sure to equalize both."),t}},{key:"extendAnnotations",value:function(t){return void 0===t.annotations&&(t.annotations={},t.annotations.yaxis=[],t.annotations.xaxis=[],t.annotations.points=[]),t=this.extendYAxisAnnotations(t),t=this.extendXAxisAnnotations(t),t=this.extendPointAnnotations(t)}},{key:"extendYAxisAnnotations",value:function(t){var e=new A;return t.annotations.yaxis=g.extendArray(void 0!==t.annotations.yaxis?t.annotations.yaxis:[],e.yAxisAnnotation),t}},{key:"extendXAxisAnnotations",value:function(t){var e=new A;return t.annotations.xaxis=g.extendArray(void 0!==t.annotations.xaxis?t.annotations.xaxis:[],e.xAxisAnnotation),t}},{key:"extendPointAnnotations",value:function(t){var e=new A;return t.annotations.points=g.extendArray(void 0!==t.annotations.points?t.annotations.points:[],e.pointAnnotation),t}},{key:"checkForDarkTheme",value:function(t){t.theme&&"dark"===t.theme.mode&&(t.tooltip||(t.tooltip={}),"light"!==t.tooltip.theme&&(t.tooltip.theme="dark"),t.chart.foreColor||(t.chart.foreColor="#f6f7f8"),t.theme.palette||(t.theme.palette="palette4"))}},{key:"handleUserInputErrors",value:function(t){var e=t;if(e.tooltip.shared&&e.tooltip.intersect)throw new Error("tooltip.shared cannot be enabled when tooltip.intersect is true. Turn off any other option by setting it to false.");if(("bar"===e.chart.type||"rangeBar"===e.chart.type)&&e.plotOptions.bar.horizontal){if(e.yaxis.length>1)throw new Error("Multiple Y Axis for bars are not supported. Switch to column chart by setting plotOptions.bar.horizontal=false");e.yaxis[0].reversed&&(e.yaxis[0].opposite=!0),e.xaxis.tooltip.enabled=!1,e.yaxis[0].tooltip.enabled=!1,e.chart.zoom.enabled=!1}return"bar"!==e.chart.type&&"rangeBar"!==e.chart.type||e.tooltip.shared&&("barWidth"===e.xaxis.crosshairs.width&&e.series.length>1&&(console.warn('crosshairs.width = "barWidth" is only supported in single series, not in a multi-series barChart.'),e.xaxis.crosshairs.width="tickWidth"),e.plotOptions.bar.horizontal&&(e.states.hover.type="none",e.tooltip.shared=!1),e.tooltip.followCursor||(console.warn("followCursor option in shared columns cannot be turned off. Please set %ctooltip.followCursor: true","color: blue;"),e.tooltip.followCursor=!0)),"candlestick"===e.chart.type&&e.yaxis[0].reversed&&(console.warn("Reversed y-axis in candlestick chart is not supported."),e.yaxis[0].reversed=!1),e.chart.group&&0===e.yaxis[0].labels.minWidth&&console.warn("It looks like you have multiple charts in synchronization. You must provide yaxis.labels.minWidth which must be EQUAL for all grouped charts to prevent incorrect behaviour."),Array.isArray(e.stroke.width)&&"line"!==e.chart.type&&"area"!==e.chart.type&&(console.warn("stroke.width option accepts array only for line and area charts. Reverted back to Number"),e.stroke.width=e.stroke.width[0]),e}}]),i}(),T=function(){function t(){e(this,t)}return a(t,[{key:"initGlobalVars",value:function(t){t.series=[],t.seriesCandleO=[],t.seriesCandleH=[],t.seriesCandleL=[],t.seriesCandleC=[],t.seriesRangeStart=[],t.seriesRangeEnd=[],t.seriesRangeBarTimeline=[],t.seriesPercent=[],t.seriesX=[],t.seriesZ=[],t.seriesNames=[],t.seriesTotals=[],t.seriesLog=[],t.stackedSeriesTotals=[],t.seriesXvalues=[],t.seriesYvalues=[],t.labels=[],t.categoryLabels=[],t.timescaleLabels=[],t.noLabelsProvided=!1,t.resizeTimer=null,t.selectionResizeTimer=null,t.delayedElements=[],t.pointsArray=[],t.dataLabelsRects=[],t.isXNumeric=!1,t.xaxisLabelsCount=0,t.skipLastTimelinelabel=!1,t.skipFirstTimelinelabel=!1,t.x2SpaceAvailable=0,t.isDataXYZ=!1,t.isMultiLineX=!1,t.isMultipleYAxis=!1,t.maxY=-Number.MAX_VALUE,t.minY=Number.MIN_VALUE,t.minYArr=[],t.maxYArr=[],t.maxX=-Number.MAX_VALUE,t.minX=Number.MAX_VALUE,t.initialMaxX=-Number.MAX_VALUE,t.initialMinX=Number.MAX_VALUE,t.maxDate=0,t.minDate=Number.MAX_VALUE,t.minZ=Number.MAX_VALUE,t.maxZ=-Number.MAX_VALUE,t.minXDiff=Number.MAX_VALUE,t.yAxisScale=[],t.xAxisScale=null,t.xAxisTicksPositions=[],t.yLabelsCoords=[],t.yTitleCoords=[],t.barPadForNumericAxis=0,t.padHorizontal=0,t.xRange=0,t.yRange=[],t.zRange=0,t.dataPoints=0,t.xTickAmount=0}},{key:"globalVars",value:function(t){return{chartID:null,cuid:null,events:{beforeMount:[],mounted:[],updated:[],clicked:[],selection:[],dataPointSelection:[],zoomed:[],scrolled:[]},colors:[],clientX:null,clientY:null,fill:{colors:[]},stroke:{colors:[]},dataLabels:{style:{colors:[]}},radarPolygons:{fill:{colors:[]}},markers:{colors:[],size:t.markers.size,largestSize:0},animationEnded:!1,isTouchDevice:"ontouchstart"in window||navigator.msMaxTouchPoints,isDirty:!1,isExecCalled:!1,initialConfig:null,lastXAxis:[],lastYAxis:[],columnSeries:null,labels:[],timescaleLabels:[],noLabelsProvided:!1,allSeriesCollapsed:!1,collapsedSeries:[],collapsedSeriesIndices:[],ancillaryCollapsedSeries:[],ancillaryCollapsedSeriesIndices:[],risingSeries:[],dataFormatXNumeric:!1,capturedSeriesIndex:-1,capturedDataPointIndex:-1,selectedDataPoints:[],goldenPadding:35,invalidLogScale:!1,ignoreYAxisIndexes:[],yAxisSameScaleIndices:[],maxValsInArrayIndex:0,radialSize:0,zoomEnabled:"zoom"===t.chart.toolbar.autoSelected&&t.chart.toolbar.tools.zoom&&t.chart.zoom.enabled,panEnabled:"pan"===t.chart.toolbar.autoSelected&&t.chart.toolbar.tools.pan,selectionEnabled:"selection"===t.chart.toolbar.autoSelected&&t.chart.toolbar.tools.selection,yaxis:null,mousedown:!1,lastClientPosition:{},visibleXRange:void 0,yValueDecimal:0,total:0,SVGNS:"http://www.w3.org/2000/svg",svgWidth:0,svgHeight:0,noData:!1,locale:{},dom:{},memory:{methodsToExec:[]},shouldAnimate:!0,skipLastTimelinelabel:!1,skipFirstTimelinelabel:!1,delayedElements:[],axisCharts:!0,isDataXYZ:!1,resized:!1,resizeTimer:null,comboCharts:!1,dataChanged:!1,previousPaths:[],allSeriesHasEqualX:!0,pointsArray:[],dataLabelsRects:[],lastDrawnDataLabelsIndexes:[],x2SpaceAvailable:0,hasNullValues:!1,easing:null,zoomed:!1,gridWidth:0,gridHeight:0,rotateXLabels:!1,defaultLabels:!1,xLabelFormatter:void 0,yLabelFormatters:[],xaxisTooltipFormatter:void 0,ttKeyFormatter:void 0,ttVal:void 0,ttZFormatter:void 0,LINE_HEIGHT_RATIO:1.618,xAxisLabelsHeight:0,yAxisLabelsWidth:0,scaleX:1,scaleY:1,translateX:0,translateY:0,translateYAxisX:[],yAxisWidths:[],translateXAxisY:0,translateXAxisX:0,tooltip:null}}},{key:"init",value:function(t){var e=this.globalVars(t);return this.initGlobalVars(e),e.initialConfig=g.extend({},t),e.initialSeries=JSON.parse(JSON.stringify(e.initialConfig.series)),e.lastXAxis=JSON.parse(JSON.stringify(e.initialConfig.xaxis)),e.lastYAxis=JSON.parse(JSON.stringify(e.initialConfig.yaxis)),e}}]),t}(),z=function(){function t(i){e(this,t),this.opts=i}return a(t,[{key:"init",value:function(){var t=new P(this.opts).init({responsiveOverride:!1});return{config:t,globals:(new T).init(t)}}}]),t}(),I=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"getStackedSeriesTotals",value:function(){var t=this.w,e=[];if(0===t.globals.series.length)return e;for(var i=0;i<t.globals.series[t.globals.maxValsInArrayIndex].length;i++){for(var a=0,s=0;s<t.globals.series.length;s++)void 0!==t.globals.series[s][i]&&(a+=t.globals.series[s][i]);e.push(a)}return t.globals.stackedSeriesTotals=e,e}},{key:"getSeriesTotalByIndex",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;return null===t?this.w.config.series.reduce((function(t,e){return t+e}),0):this.w.globals.series[t].reduce((function(t,e){return t+e}),0)}},{key:"isSeriesNull",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;return 0===(null===t?this.w.config.series.filter((function(t){return null!==t})):this.w.globals.series[t].filter((function(t){return null!==t}))).length}},{key:"seriesHaveSameValues",value:function(t){return this.w.globals.series[t].every((function(t,e,i){return t===i[0]}))}},{key:"getCategoryLabels",value:function(t){var e=this.w,i=t.slice();return e.config.xaxis.convertedCatToNumeric&&(i=t.map((function(t){return e.config.xaxis.labels.formatter(t-e.globals.minX+1)}))),i}},{key:"getLargestSeries",value:function(){var t=this.w;t.globals.maxValsInArrayIndex=t.globals.series.map((function(t){return t.length})).indexOf(Math.max.apply(Math,t.globals.series.map((function(t){return t.length}))))}},{key:"getLargestMarkerSize",value:function(){var t=this.w,e=0;return t.globals.markers.size.forEach((function(t){e=Math.max(e,t)})),t.globals.markers.largestSize=e,e}},{key:"getSeriesTotals",value:function(){var t=this.w;t.globals.seriesTotals=t.globals.series.map((function(t,e){var i=0;if(Array.isArray(t))for(var a=0;a<t.length;a++)i+=t[a];else i+=t;return i}))}},{key:"getSeriesTotalsXRange",value:function(t,e){var i=this.w;return i.globals.series.map((function(a,s){for(var r=0,n=0;n<a.length;n++)i.globals.seriesX[s][n]>t&&i.globals.seriesX[s][n]<e&&(r+=a[n]);return r}))}},{key:"getPercentSeries",value:function(){var t=this.w;t.globals.seriesPercent=t.globals.series.map((function(e,i){var a=[];if(Array.isArray(e))for(var s=0;s<e.length;s++){var r=t.globals.stackedSeriesTotals[s],n=0;r&&(n=100*e[s]/r),a.push(n)}else{var o=100*e/t.globals.seriesTotals.reduce((function(t,e){return t+e}),0);a.push(o)}return a}))}},{key:"getCalculatedRatios",value:function(){var t,e,i,a,s=this.w.globals,r=[],n=0,o=[],l=.1,h=0;if(s.yRange=[],s.isMultipleYAxis)for(var c=0;c<s.minYArr.length;c++)s.yRange.push(Math.abs(s.minYArr[c]-s.maxYArr[c])),o.push(0);else s.yRange.push(Math.abs(s.minY-s.maxY));s.xRange=Math.abs(s.maxX-s.minX),s.zRange=Math.abs(s.maxZ-s.minZ);for(var d=0;d<s.yRange.length;d++)r.push(s.yRange[d]/s.gridHeight);if(e=s.xRange/s.gridWidth,i=Math.abs(s.initialMaxX-s.initialMinX)/s.gridWidth,t=s.yRange/s.gridWidth,a=s.xRange/s.gridHeight,(n=s.zRange/s.gridHeight*16)||(n=1),s.minY!==Number.MIN_VALUE&&0!==Math.abs(s.minY)&&(s.hasNegs=!0),s.isMultipleYAxis){o=[];for(var g=0;g<r.length;g++)o.push(-s.minYArr[g]/r[g])}else o.push(-s.minY/r[0]),s.minY!==Number.MIN_VALUE&&0!==Math.abs(s.minY)&&(l=-s.minY/t,h=s.minX/e);return{yRatio:r,invertedYRatio:t,zRatio:n,xRatio:e,initialXRatio:i,invertedXRatio:a,baseLineInvertedY:l,baseLineY:o,baseLineX:h}}},{key:"getLogSeries",value:function(t){var e=this.w;return e.globals.seriesLog=t.map((function(t,i){return e.config.yaxis[i]&&e.config.yaxis[i].logarithmic?t.map((function(t){return null===t?null:(Math.log(t)-Math.log(e.globals.minYArr[i]))/(Math.log(e.globals.maxYArr[i])-Math.log(e.globals.minYArr[i]))})):t})),e.globals.invalidLogScale?t:e.globals.seriesLog}},{key:"getLogYRatios",value:function(t){var e=this,i=this.w,a=this.w.globals;return a.yLogRatio=t.slice(),a.logYRange=a.yRange.map((function(t,s){if(i.config.yaxis[s]&&e.w.config.yaxis[s].logarithmic){var r,n=-Number.MAX_VALUE,o=Number.MIN_VALUE;return a.seriesLog.forEach((function(t,e){t.forEach((function(t){i.config.yaxis[e]&&i.config.yaxis[e].logarithmic&&(n=Math.max(t,n),o=Math.min(t,o))}))})),r=Math.pow(a.yRange[s],Math.abs(o-n)/a.yRange[s]),a.yLogRatio[s]=r/a.gridHeight,r}})),a.invalidLogScale?t.slice():a.yLogRatio}}],[{key:"checkComboSeries",value:function(t){var e=!1,i=0;return t.length&&void 0!==t[0].type&&(e=!0,t.forEach((function(t){"bar"!==t.type&&"column"!==t.type&&"candlestick"!==t.type||i++}))),{comboBarCount:i,comboCharts:e}}},{key:"extendArrayProps",value:function(t,e){return e.yaxis&&(e=t.extendYAxis(e)),e.annotations&&(e.annotations.yaxis&&(e=t.extendYAxisAnnotations(e)),e.annotations.xaxis&&(e=t.extendXAxisAnnotations(e)),e.annotations.points&&(e=t.extendPointAnnotations(e))),e}}]),t}(),M=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.opts=null,this.seriesIndex=0}return a(t,[{key:"clippedImgArea",value:function(t){var e=this.w,i=e.config,a=parseInt(e.globals.gridWidth,10),s=parseInt(e.globals.gridHeight,10),r=a>s?a:s,n=t.image,o=0,l=0;void 0===t.width&&void 0===t.height?void 0!==i.fill.image.width&&void 0!==i.fill.image.height?(o=i.fill.image.width+1,l=i.fill.image.height):(o=r+1,l=r):(o=t.width,l=t.height);var h=document.createElementNS(e.globals.SVGNS,"pattern");p.setAttrs(h,{id:t.patternID,patternUnits:t.patternUnits?t.patternUnits:"userSpaceOnUse",width:o+"px",height:l+"px"});var c=document.createElementNS(e.globals.SVGNS,"image");h.appendChild(c),c.setAttributeNS(window.SVG.xlink,"href",n),p.setAttrs(c,{x:0,y:0,preserveAspectRatio:"none",width:o+"px",height:l+"px"}),c.style.opacity=t.opacity,e.globals.dom.elDefs.node.appendChild(h)}},{key:"getSeriesIndex",value:function(t){var e=this.w;return("bar"===e.config.chart.type||"rangeBar"===e.config.chart.type)&&e.config.plotOptions.bar.distributed||"heatmap"===e.config.chart.type?this.seriesIndex=t.seriesNumber:this.seriesIndex=t.seriesNumber%e.globals.series.length,this.seriesIndex}},{key:"fillPath",value:function(t){var e=this.w;this.opts=t;var i,a,s,r=this.w.config;this.seriesIndex=this.getSeriesIndex(t);var n=this.getFillColors()[this.seriesIndex];"function"==typeof n&&(n=n({seriesIndex:this.seriesIndex,dataPointIndex:t.dataPointIndex,value:t.value,w:e}));var o=this.getFillType(this.seriesIndex),l=Array.isArray(r.fill.opacity)?r.fill.opacity[this.seriesIndex]:r.fill.opacity,h=n;if(t.color&&(n=t.color),-1===n.indexOf("rgb")?h=g.hexToRgba(n,l):n.indexOf("rgba")>-1&&(l="0."+g.getOpacityFromRGBA(n)),t.opacity&&(l=t.opacity),"pattern"===o&&(a=this.handlePatternFill(a,n,l,h)),"gradient"===o&&(s=this.handleGradientFill(s,n,l,this.seriesIndex)),"image"===o){var c=r.fill.image.src,d=t.patternID?t.patternID:"";this.clippedImgArea({opacity:l,image:Array.isArray(c)?t.seriesNumber<c.length?c[t.seriesNumber]:c[0]:c,width:t.width?t.width:void 0,height:t.height?t.height:void 0,patternUnits:t.patternUnits,patternID:"pattern".concat(e.globals.cuid).concat(t.seriesNumber+1).concat(d)}),i="url(#pattern".concat(e.globals.cuid).concat(t.seriesNumber+1).concat(d,")")}else i="gradient"===o?s:"pattern"===o?a:h;return t.solid&&(i=h),i}},{key:"getFillType",value:function(t){var e=this.w;return Array.isArray(e.config.fill.type)?e.config.fill.type[t]:e.config.fill.type}},{key:"getFillColors",value:function(){var t=this.w,e=t.config,i=this.opts,a=[];return t.globals.comboCharts?"line"===t.config.series[this.seriesIndex].type?t.globals.stroke.colors instanceof Array?a=t.globals.stroke.colors:a.push(t.globals.stroke.colors):t.globals.fill.colors instanceof Array?a=t.globals.fill.colors:a.push(t.globals.fill.colors):"line"===e.chart.type?t.globals.stroke.colors instanceof Array?a=t.globals.stroke.colors:a.push(t.globals.stroke.colors):t.globals.fill.colors instanceof Array?a=t.globals.fill.colors:a.push(t.globals.fill.colors),void 0!==i.fillColors&&(a=[],i.fillColors instanceof Array?a=i.fillColors.slice():a.push(i.fillColors)),a}},{key:"handlePatternFill",value:function(t,e,i,a){var s=this.w.config,r=this.opts,n=new p(this.ctx),o=void 0===s.fill.pattern.strokeWidth?Array.isArray(s.stroke.width)?s.stroke.width[this.seriesIndex]:s.stroke.width:Array.isArray(s.fill.pattern.strokeWidth)?s.fill.pattern.strokeWidth[this.seriesIndex]:s.fill.pattern.strokeWidth,l=e;s.fill.pattern.style instanceof Array?t=void 0!==s.fill.pattern.style[r.seriesNumber]?n.drawPattern(s.fill.pattern.style[r.seriesNumber],s.fill.pattern.width,s.fill.pattern.height,l,o,i):a:t=n.drawPattern(s.fill.pattern.style,s.fill.pattern.width,s.fill.pattern.height,l,o,i);return t}},{key:"handleGradientFill",value:function(t,e,i,a){var s,r,n=this.w.config,o=this.opts,l=new p(this.ctx),h=new g,c=n.fill.gradient.type,d=void 0===n.fill.gradient.opacityFrom?i:Array.isArray(n.fill.gradient.opacityFrom)?n.fill.gradient.opacityFrom[a]:n.fill.gradient.opacityFrom,u=void 0===n.fill.gradient.opacityTo?i:Array.isArray(n.fill.gradient.opacityTo)?n.fill.gradient.opacityTo[a]:n.fill.gradient.opacityTo;if(s=e,r=void 0===n.fill.gradient.gradientToColors||0===n.fill.gradient.gradientToColors.length?"dark"===n.fill.gradient.shade?h.shadeColor(-1*parseFloat(n.fill.gradient.shadeIntensity),e):h.shadeColor(parseFloat(n.fill.gradient.shadeIntensity),e):n.fill.gradient.gradientToColors[o.seriesNumber],n.fill.gradient.inverseColors){var f=s;s=r,r=f}return l.drawGradient(c,s,r,d,u,o.size,n.fill.gradient.stops,n.fill.gradient.colorStops,a)}}]),t}(),X=function(){function t(i,a){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"setGlobalMarkerSize",value:function(){var t=this.w;if(t.globals.markers.size=Array.isArray(t.config.markers.size)?t.config.markers.size:[t.config.markers.size],t.globals.markers.size.length>0){if(t.globals.markers.size.length<t.globals.series.length+1)for(var e=0;e<=t.globals.series.length;e++)void 0===t.globals.markers.size[e]&&t.globals.markers.size.push(t.globals.markers.size[0])}else t.globals.markers.size=t.config.series.map((function(e){return t.config.markers.size}))}},{key:"plotChartMarkers",value:function(t,e,i,a){var s,r=arguments.length>4&&void 0!==arguments[4]&&arguments[4],n=this.w,o=e,l=t,h=null,c=new p(this.ctx);if((n.globals.markers.size[e]>0||r)&&(h=c.group({class:r?"":"apexcharts-series-markers"})).attr("clip-path","url(#gridRectMarkerMask".concat(n.globals.cuid,")")),l.x instanceof Array)for(var d=0;d<l.x.length;d++){var f=i;1===i&&0===d&&(f=0),1===i&&1===d&&(f=1);var x="apexcharts-marker";"line"!==n.config.chart.type&&"area"!==n.config.chart.type||n.globals.comboCharts||n.config.tooltip.intersect||(x+=" no-pointer-events");var b=Array.isArray(n.config.markers.size)?n.globals.markers.size[e]>0:n.config.markers.size>0;if(b||r){g.isNumber(l.y[d])?x+=" w".concat(g.randomId()):x="apexcharts-nullpoint";var m=this.getMarkerConfig(x,e,f);n.config.series[o].data[i]&&(n.config.series[o].data[i].fillColor&&(m.pointFillColor=n.config.series[o].data[i].fillColor),n.config.series[o].data[i].strokeColor&&(m.pointStrokeColor=n.config.series[o].data[i].strokeColor)),a&&(m.pSize=a),(s=c.drawMarker(l.x[d],l.y[d],m)).attr("rel",f),s.attr("j",f),s.attr("index",e),s.node.setAttribute("default-marker-size",m.pSize);var v=new u(this.ctx);v.setSelectionFilter(s,e,f),this.addEvents(s),h&&h.add(s)}else void 0===n.globals.pointsArray[e]&&(n.globals.pointsArray[e]=[]),n.globals.pointsArray[e].push([l.x[d],l.y[d]])}return h}},{key:"getMarkerConfig",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,a=this.w,s=this.getMarkerStyle(e),r=a.globals.markers.size[e],n=a.config.markers;return null!==i&&n.discrete.length&&n.discrete.map((function(t){t.seriesIndex===e&&t.dataPointIndex===i&&(s.pointStrokeColor=t.strokeColor,s.pointFillColor=t.fillColor,r=t.size)})),{pSize:r,pRadius:n.radius,pWidth:n.strokeWidth instanceof Array?n.strokeWidth[e]:n.strokeWidth,pointStrokeColor:s.pointStrokeColor,pointFillColor:s.pointFillColor,shape:n.shape instanceof Array?n.shape[e]:n.shape,class:t,pointStrokeOpacity:n.strokeOpacity instanceof Array?n.strokeOpacity[e]:n.strokeOpacity,pointStrokeDashArray:n.strokeDashArray instanceof Array?n.strokeDashArray[e]:n.strokeDashArray,pointFillOpacity:n.fillOpacity instanceof Array?n.fillOpacity[e]:n.fillOpacity,seriesIndex:e}}},{key:"addEvents",value:function(t){var e=this.w,i=new p(this.ctx);t.node.addEventListener("mouseenter",i.pathMouseEnter.bind(this.ctx,t)),t.node.addEventListener("mouseleave",i.pathMouseLeave.bind(this.ctx,t)),t.node.addEventListener("mousedown",i.pathMouseDown.bind(this.ctx,t)),t.node.addEventListener("click",e.config.markers.onClick),t.node.addEventListener("dblclick",e.config.markers.onDblClick),t.node.addEventListener("touchstart",i.pathMouseDown.bind(this.ctx,t),{passive:!0})}},{key:"getMarkerStyle",value:function(t){var e=this.w,i=e.globals.markers.colors,a=e.config.markers.strokeColor||e.config.markers.strokeColors;return{pointStrokeColor:a instanceof Array?a[t]:a,pointFillColor:i instanceof Array?i[t]:i}}}]),t}(),E=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.initialAnim=this.w.config.chart.animations.enabled,this.dynamicAnim=this.initialAnim&&this.w.config.chart.animations.dynamicAnimation.enabled}return a(t,[{key:"draw",value:function(t,e,i){var a=this.w,s=new p(this.ctx),r=i.realIndex,n=i.pointsPos,o=i.zRatio,l=i.elParent,h=s.group({class:"apexcharts-series-markers apexcharts-series-".concat(a.config.chart.type)});if(h.attr("clip-path","url(#gridRectMarkerMask".concat(a.globals.cuid,")")),n.x instanceof Array)for(var c=0;c<n.x.length;c++){var d=e+1,g=!0;0===e&&0===c&&(d=0),0===e&&1===c&&(d=1);var u=0,f=a.globals.markers.size[r];if(o!==1/0){f=a.globals.seriesZ[r][d]/o;var x=a.config.plotOptions.bubble;x.minBubbleRadius&&f<x.minBubbleRadius&&(f=x.minBubbleRadius),x.maxBubbleRadius&&f>x.maxBubbleRadius&&(f=x.maxBubbleRadius)}a.config.chart.animations.enabled||(u=f);var b=n.x[c],m=n.y[c];if(u=u||0,null!==m&&void 0!==a.globals.series[r][d]||(g=!1),g){var v=this.drawPoint(b,m,u,f,r,d,e);h.add(v)}l.add(h)}}},{key:"drawPoint",value:function(t,e,i,a,s,r,n){var o=this.w,l=s,h=new f(this.ctx),c=new u(this.ctx),d=new M(this.ctx),g=new X(this.ctx),x=new p(this.ctx),b=g.getMarkerConfig("apexcharts-marker",l),m=d.fillPath({seriesNumber:s,dataPointIndex:r,patternUnits:"objectBoundingBox",value:o.globals.series[s][n]}),v=x.drawCircle(i);if(o.config.series[l].data[r]&&o.config.series[l].data[r].fillColor&&(m=o.config.series[l].data[r].fillColor),v.attr({cx:t,cy:e,fill:m,stroke:b.pointStrokeColor,"stroke-width":b.pWidth,"stroke-dasharray":b.pointStrokeDashArray,"stroke-opacity":b.pointStrokeOpacity}),o.config.chart.dropShadow.enabled){var y=o.config.chart.dropShadow;c.dropShadow(v,y,s)}if(this.initialAnim&&!o.globals.dataChanged){var w=1;o.globals.resized||(w=o.config.chart.animations.speed),h.animateCircleRadius(v,0,a,w,o.globals.easing,(function(){window.setTimeout((function(){h.animationCompleted(v)}),100)}))}if(o.globals.dataChanged)if(this.dynamicAnim){var k,A,S,C,L=o.config.chart.animations.dynamicAnimation.speed;null!=(C=o.globals.previousPaths[s]&&o.globals.previousPaths[s][n])&&(k=C.x,A=C.y,S=void 0!==C.r?C.r:a);for(var P=0;P<o.globals.collapsedSeries.length;P++)o.globals.collapsedSeries[P].index===s&&(L=1,a=0);0===t&&0===e&&(a=0),h.animateCircle(v,{cx:k,cy:A,r:S},{cx:t,cy:e,r:a},L,o.globals.easing)}else v.attr({r:a});return v.attr({rel:r,j:r,index:s,"default-marker-size":a}),c.setSelectionFilter(v,s,r),g.addEvents(v),v.node.classList.add("apexcharts-marker"),v}},{key:"centerTextInBubble",value:function(t){var e=this.w;return{y:t+=parseInt(e.config.dataLabels.style.fontSize,10)/4}}}]),t}(),Y=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"dataLabelsCorrection",value:function(t,e,i,a,s,r,n){var o=this.w,l=!1,h=new p(this.ctx).getTextRects(i,n),c=h.width,d=h.height;void 0===o.globals.dataLabelsRects[a]&&(o.globals.dataLabelsRects[a]=[]),o.globals.dataLabelsRects[a].push({x:t,y:e,width:c,height:d});var g=o.globals.dataLabelsRects[a].length-2,u=void 0!==o.globals.lastDrawnDataLabelsIndexes[a]?o.globals.lastDrawnDataLabelsIndexes[a][o.globals.lastDrawnDataLabelsIndexes[a].length-1]:0;if(void 0!==o.globals.dataLabelsRects[a][g]){var f=o.globals.dataLabelsRects[a][u];(t>f.x+f.width+2||e>f.y+f.height+2||t+c<f.x)&&(l=!0)}return(0===s||r)&&(l=!0),{x:t,y:e,textRects:h,drawnextLabel:l}}},{key:"drawDataLabel",value:function(t,e,i){var a=this,s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:2,r=this.w,n=new p(this.ctx),o=r.config.dataLabels,l=0,h=0,c=i,d=null;if(!o.enabled||t.x instanceof Array!=!0)return d;d=n.group({class:"apexcharts-data-labels"});for(var g=0;g<t.x.length;g++)if(l=t.x[g]+o.offsetX,h=t.y[g]+o.offsetY+s,!isNaN(l)){1===i&&0===g&&(c=0),1===i&&1===g&&(c=1);var u=r.globals.series[e][c],f="",x=function(t){return r.config.dataLabels.formatter(t,{ctx:a.ctx,seriesIndex:e,dataPointIndex:c,w:r})};if("bubble"===r.config.chart.type){f=x(u=r.globals.seriesZ[e][c]),h=t.y[g];var b=new E(this.ctx),m=b.centerTextInBubble(h,e,c);h=m.y}else void 0!==u&&(f=x(u));this.plotDataLabelsText({x:l,y:h,text:f,i:e,j:c,parent:d,offsetCorrection:!0,dataLabelsConfig:r.config.dataLabels})}return d}},{key:"plotDataLabelsText",value:function(t){var e=this.w,i=new p(this.ctx),a=t.x,s=t.y,r=t.i,n=t.j,o=t.text,l=t.textAnchor,h=t.parent,c=t.dataLabelsConfig,d=t.color,g=t.alwaysDrawDataLabel,f=t.offsetCorrection;if(!(Array.isArray(e.config.dataLabels.enabledOnSeries)&&e.config.dataLabels.enabledOnSeries.indexOf(r)<0)){var x={x:a,y:s,drawnextLabel:!0};f&&(x=this.dataLabelsCorrection(a,s,o,r,n,g,parseInt(c.style.fontSize,10))),e.globals.zoomed||(a=x.x,s=x.y),x.textRects&&(a+x.textRects.width<-20||a>e.globals.gridWidth+20)&&(o="");var b=e.globals.dataLabels.style.colors[r];(("bar"===e.config.chart.type||"rangeBar"===e.config.chart.type)&&e.config.plotOptions.bar.distributed||e.config.dataLabels.distributed)&&(b=e.globals.dataLabels.style.colors[n]),d&&(b=d);var m=c.offsetX,v=c.offsetY;if("bar"!==e.config.chart.type&&"rangeBar"!==e.config.chart.type||(m=0,v=0),x.drawnextLabel){var y=i.drawText({width:100,height:parseInt(c.style.fontSize,10),x:a+m,y:s+v,foreColor:b,textAnchor:l||c.textAnchor,text:o,fontSize:c.style.fontSize,fontFamily:c.style.fontFamily,fontWeight:c.style.fontWeight||"normal"});if(y.attr({class:"apexcharts-datalabel",cx:a,cy:s}),c.dropShadow.enabled){var w=c.dropShadow;new u(this.ctx).dropShadow(y,w)}h.add(y),void 0===e.globals.lastDrawnDataLabelsIndexes[r]&&(e.globals.lastDrawnDataLabelsIndexes[r]=[]),e.globals.lastDrawnDataLabelsIndexes[r].push(n)}}}},{key:"addBackgroundToDataLabel",value:function(t,e){var i=this.w,a=i.config.dataLabels.background,s=a.padding,r=a.padding/2,n=e.width,o=e.height,l=new p(this.ctx).drawRect(e.x-s,e.y-r/2,n+2*s,o+r,a.borderRadius,"transparent"===i.config.chart.background?"#fff":i.config.chart.background,a.opacity,a.borderWidth,a.borderColor);a.dropShadow.enabled&&new u(this.ctx).dropShadow(l,a.dropShadow);return l}},{key:"dataLabelsBackground",value:function(){var t=this.w;if("bubble"!==t.config.chart.type)for(var e=t.globals.dom.baseEl.querySelectorAll(".apexcharts-datalabels text"),i=0;i<e.length;i++){var a=e[i],s=a.getBBox(),r=null;if(s.width&&s.height&&(r=this.addBackgroundToDataLabel(a,s)),r){a.parentNode.insertBefore(r.node,a);var n=a.getAttribute("fill");t.config.chart.animations.enabled&&!t.globals.resized&&!t.globals.dataChanged?r.animate().attr({fill:n}):r.attr({fill:n}),a.setAttribute("fill",t.config.dataLabels.background.foreColor)}}}},{key:"bringForward",value:function(){for(var t=this.w,e=t.globals.dom.baseEl.getElementsByClassName("apexcharts-datalabels"),i=t.globals.dom.baseEl.querySelector(".apexcharts-plot-series:last-child"),a=0;a<e.length;a++)i&&i.insertBefore(e[a],i.nextSibling)}}]),t}(),F=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.legendInactiveClass="legend-mouseover-inactive"}return a(t,[{key:"getAllSeriesEls",value:function(){return this.w.globals.dom.baseEl.getElementsByClassName("apexcharts-series")}},{key:"getSeriesByName",value:function(t){return this.w.globals.dom.baseEl.querySelector("[seriesName='".concat(g.escapeString(t),"']"))}},{key:"isSeriesHidden",value:function(t){var e=this.getSeriesByName(t),i=parseInt(e.getAttribute("data:realIndex"),10);return{isHidden:e.classList.contains("apexcharts-series-collapsed"),realIndex:i}}},{key:"addCollapsedClassToSeries",value:function(t,e){var i=this.w;function a(i){for(var a=0;a<i.length;a++)i[a].index===e&&t.node.classList.add("apexcharts-series-collapsed")}a(i.globals.collapsedSeries),a(i.globals.ancillaryCollapsedSeries)}},{key:"toggleSeries",value:function(t){var e=this.isSeriesHidden(t);return this.ctx.legend.legendHelpers.toggleDataSeries(e.realIndex,e.isHidden),e.isHidden}},{key:"showSeries",value:function(t){var e=this.isSeriesHidden(t);e.isHidden&&this.ctx.legend.legendHelpers.toggleDataSeries(e.realIndex,!0)}},{key:"hideSeries",value:function(t){var e=this.isSeriesHidden(t);e.isHidden||this.ctx.legend.legendHelpers.toggleDataSeries(e.realIndex,!1)}},{key:"resetSeries",value:function(){var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],a=this.w,s=a.globals.initialSeries.slice();a.config.series=s,a.globals.previousPaths=[],i&&(a.globals.collapsedSeries=[],a.globals.ancillaryCollapsedSeries=[],a.globals.collapsedSeriesIndices=[],a.globals.ancillaryCollapsedSeriesIndices=[]),t&&(e&&(a.globals.zoomed=!1,this.ctx.updateHelpers.revertDefaultAxisMinMax()),this.ctx.updateHelpers._updateSeries(s,a.config.chart.animations.dynamicAnimation.enabled))}},{key:"toggleSeriesOnHover",value:function(t,e){var i=this.w,a=i.globals.dom.baseEl.getElementsByClassName("apexcharts-series apexcharts-datalabels");if("mousemove"===t.type){var s=parseInt(e.getAttribute("rel"),10)-1,r=null,n=null;i.globals.axisCharts||"radialBar"===i.config.chart.type?i.globals.axisCharts?(r=i.globals.dom.baseEl.querySelector(".apexcharts-series[data\\:realIndex='".concat(s,"']")),n=i.globals.dom.baseEl.querySelector(".apexcharts-datalabels[data\\:realIndex='".concat(s,"']"))):r=i.globals.dom.baseEl.querySelector(".apexcharts-series[rel='".concat(s+1,"']")):r=i.globals.dom.baseEl.querySelector(".apexcharts-series[rel='".concat(s+1,"'] path"));for(var o=0;o<a.length;o++)a[o].classList.add(this.legendInactiveClass);null!==r&&(i.globals.axisCharts||r.parentNode.classList.remove(this.legendInactiveClass),r.classList.remove(this.legendInactiveClass),null!==n&&n.classList.remove(this.legendInactiveClass))}else if("mouseout"===t.type)for(var l=0;l<a.length;l++)a[l].classList.remove(this.legendInactiveClass)}},{key:"highlightRangeInSeries",value:function(t,e){var i=this,a=this.w,s=a.globals.dom.baseEl.getElementsByClassName("apexcharts-heatmap-rect"),r=function(t){for(var e=0;e<s.length;e++)s[e].classList[t](i.legendInactiveClass)};if("mousemove"===t.type){var n=parseInt(e.getAttribute("rel"),10)-1;r("add"),function(t){for(var e=0;e<s.length;e++){var a=parseInt(s[e].getAttribute("val"),10);a>=t.from&&a<=t.to&&s[e].classList.remove(i.legendInactiveClass)}}(a.config.plotOptions.heatmap.colorScale.ranges[n])}else"mouseout"===t.type&&r("remove")}},{key:"getActiveConfigSeriesIndex",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=this.w,i=0;if(e.config.series.length>1)for(var a=e.config.series.map((function(i,a){var s=!1;return t&&(s="bar"===e.config.series[a].type||"column"===e.config.series[a].type),i.data&&i.data.length>0&&!s?a:-1})),s=0;s<a.length;s++)if(-1!==a[s]){i=a[s];break}return i}},{key:"getPreviousPaths",value:function(){var t=this.w;function e(e,i,a){for(var s=e[i].childNodes,r={type:a,paths:[],realIndex:e[i].getAttribute("data:realIndex")},n=0;n<s.length;n++)if(s[n].hasAttribute("pathTo")){var o=s[n].getAttribute("pathTo");r.paths.push({d:o})}t.globals.previousPaths.push(r)}t.globals.previousPaths=[];["line","area","bar","candlestick","radar"].forEach((function(i){for(var a,s=(a=i,t.globals.dom.baseEl.querySelectorAll(".apexcharts-".concat(a,"-series .apexcharts-series"))),r=0;r<s.length;r++)e(s,r,i)})),this.handlePrevBubbleScatterPaths("bubble"),this.handlePrevBubbleScatterPaths("scatter");var i=t.globals.dom.baseEl.querySelectorAll(".apexcharts-heatmap .apexcharts-series");if(i.length>0)for(var a=0;a<i.length;a++){for(var s=t.globals.dom.baseEl.querySelectorAll(".apexcharts-heatmap .apexcharts-series[data\\:realIndex='".concat(a,"'] rect")),r=[],n=0;n<s.length;n++)r.push({color:s[n].getAttribute("color")});t.globals.previousPaths.push(r)}t.globals.axisCharts||(t.globals.previousPaths=t.globals.series)}},{key:"handlePrevBubbleScatterPaths",value:function(t){var e=this.w,i=e.globals.dom.baseEl.querySelectorAll(".apexcharts-".concat(t,"-series .apexcharts-series"));if(i.length>0)for(var a=0;a<i.length;a++){for(var s=e.globals.dom.baseEl.querySelectorAll(".apexcharts-".concat(t,"-series .apexcharts-series[data\\:realIndex='").concat(a,"'] circle")),r=[],n=0;n<s.length;n++)r.push({x:s[n].getAttribute("cx"),y:s[n].getAttribute("cy"),r:s[n].getAttribute("r")});e.globals.previousPaths.push(r)}}},{key:"clearPreviousPaths",value:function(){var t=this.w;t.globals.previousPaths=[],t.globals.allSeriesCollapsed=!1}},{key:"handleNoData",value:function(){var t=this.w,e=t.config.noData,i=new p(this.ctx),a=t.globals.svgWidth/2,s=t.globals.svgHeight/2,r="middle";if(t.globals.noData=!0,t.globals.animationEnded=!0,"left"===e.align?(a=10,r="start"):"right"===e.align&&(a=t.globals.svgWidth-10,r="end"),"top"===e.verticalAlign?s=50:"bottom"===e.verticalAlign&&(s=t.globals.svgHeight-50),a+=e.offsetX,s=s+parseInt(e.style.fontSize,10)+2+e.offsetY,void 0!==e.text&&""!==e.text){var n=i.drawText({x:a,y:s,text:e.text,textAnchor:r,fontSize:e.style.fontSize,fontFamily:e.style.fontFamily,foreColor:e.style.color,opacity:1,class:"apexcharts-text-nodata"});t.globals.dom.Paper.add(n)}}},{key:"setNullSeriesToZeroValues",value:function(t){for(var e=this.w,i=0;i<t.length;i++)if(0===t[i].length)for(var a=0;a<t[e.globals.maxValsInArrayIndex].length;a++)t[i].push(0);return t}},{key:"hasAllSeriesEqualX",value:function(){for(var t=!0,e=this.w,i=this.filteredSeriesX(),a=0;a<i.length-1;a++)if(i[a][0]!==i[a+1][0]){t=!1;break}return e.globals.allSeriesHasEqualX=t,t}},{key:"filteredSeriesX",value:function(){var t=this.w.globals.seriesX.map((function(t){return t.length>0?t:[]}));return t}}]),t}(),R=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.twoDSeries=[],this.threeDSeries=[],this.twoDSeriesX=[],this.coreUtils=new I(this.ctx)}return a(t,[{key:"isMultiFormat",value:function(){return this.isFormatXY()||this.isFormat2DArray()}},{key:"isFormatXY",value:function(){var t=this.w.config.series.slice(),e=new F(this.ctx);if(this.activeSeriesIndex=e.getActiveConfigSeriesIndex(),void 0!==t[this.activeSeriesIndex].data&&t[this.activeSeriesIndex].data.length>0&&null!==t[this.activeSeriesIndex].data[0]&&void 0!==t[this.activeSeriesIndex].data[0].x&&null!==t[this.activeSeriesIndex].data[0])return!0}},{key:"isFormat2DArray",value:function(){var t=this.w.config.series.slice(),e=new F(this.ctx);if(this.activeSeriesIndex=e.getActiveConfigSeriesIndex(),void 0!==t[this.activeSeriesIndex].data&&t[this.activeSeriesIndex].data.length>0&&void 0!==t[this.activeSeriesIndex].data[0]&&null!==t[this.activeSeriesIndex].data[0]&&t[this.activeSeriesIndex].data[0].constructor===Array)return!0}},{key:"handleFormat2DArray",value:function(t,e){for(var i=this.w.config,a=this.w.globals,s=0;s<t[e].data.length;s++)if(void 0!==t[e].data[s][1]&&(Array.isArray(t[e].data[s][1])&&4===t[e].data[s][1].length?this.twoDSeries.push(g.parseNumber(t[e].data[s][1][3])):5===t[e].data[s].length?this.twoDSeries.push(g.parseNumber(t[e].data[s][4])):this.twoDSeries.push(g.parseNumber(t[e].data[s][1])),a.dataFormatXNumeric=!0),"datetime"===i.xaxis.type){var r=new Date(t[e].data[s][0]);r=new Date(r).getTime(),this.twoDSeriesX.push(r)}else this.twoDSeriesX.push(t[e].data[s][0]);for(var n=0;n<t[e].data.length;n++)void 0!==t[e].data[n][2]&&(this.threeDSeries.push(t[e].data[n][2]),a.isDataXYZ=!0)}},{key:"handleFormatXY",value:function(t,e){var i=this.w.config,a=this.w.globals,s=new C(this.ctx),r=e;a.collapsedSeriesIndices.indexOf(e)>-1&&(r=this.activeSeriesIndex);for(var n=0;n<t[e].data.length;n++)void 0!==t[e].data[n].y&&(Array.isArray(t[e].data[n].y)?this.twoDSeries.push(g.parseNumber(t[e].data[n].y[t[e].data[n].y.length-1])):this.twoDSeries.push(g.parseNumber(t[e].data[n].y)));for(var o=0;o<t[r].data.length;o++){var l="string"==typeof t[r].data[o].x,h=Array.isArray(t[r].data[o].x),c=!h&&!!s.isValidDate(t[r].data[o].x.toString());l||c?l||i.xaxis.convertedCatToNumeric?"datetime"!==i.xaxis.type||a.isRangeData?(this.fallbackToCategory=!0,this.twoDSeriesX.push(t[r].data[o].x)):this.twoDSeriesX.push(s.parseDate(t[r].data[o].x)):"datetime"===i.xaxis.type?this.twoDSeriesX.push(s.parseDate(t[r].data[o].x.toString())):(a.dataFormatXNumeric=!0,a.isXNumeric=!0,this.twoDSeriesX.push(parseFloat(t[r].data[o].x))):h?(this.fallbackToCategory=!0,this.twoDSeriesX.push(t[r].data[o].x)):(a.isXNumeric=!0,a.dataFormatXNumeric=!0,this.twoDSeriesX.push(t[r].data[o].x))}if(t[e].data[0]&&void 0!==t[e].data[0].z){for(var d=0;d<t[e].data.length;d++)this.threeDSeries.push(t[e].data[d].z);a.isDataXYZ=!0}}},{key:"handleRangeData",value:function(t,e){var i=this.w.config,a=this.w.globals,s={};return this.isFormat2DArray()?s=this.handleRangeDataFormat("array",t,e):this.isFormatXY()&&(s=this.handleRangeDataFormat("xy",t,e)),a.seriesRangeStart.push(s.start),a.seriesRangeEnd.push(s.end),"datetime"===i.xaxis.type&&a.seriesRangeBarTimeline.push(s.rangeUniques),a.seriesRangeBarTimeline.forEach((function(t,e){t&&t.forEach((function(t,e){t.y.forEach((function(e,i){for(var a=0;a<t.y.length;a++)if(i!==a){var s=e.y1,r=e.y2,n=t.y[a].y1;s<=t.y[a].y2&&n<=r&&(t.overlaps.indexOf(e.rangeName)<0&&t.overlaps.push(e.rangeName),t.overlaps.indexOf(t.y[a].rangeName)<0&&t.overlaps.push(t.y[a].rangeName))}}))}))})),s}},{key:"handleCandleStickData",value:function(t,e){var i=this.w.globals,a={};return this.isFormat2DArray()?a=this.handleCandleStickDataFormat("array",t,e):this.isFormatXY()&&(a=this.handleCandleStickDataFormat("xy",t,e)),i.seriesCandleO[e]=a.o,i.seriesCandleH[e]=a.h,i.seriesCandleL[e]=a.l,i.seriesCandleC[e]=a.c,a}},{key:"handleRangeDataFormat",value:function(t,e,i){var a=[],s=[],r=e[i].data.filter((function(t,e,i){return e===i.findIndex((function(e){return e.x===t.x}))})).map((function(t,e){return{x:t.x,overlaps:[],y:[]}})),n="Please provide [Start, End] values in valid format. Read more https://apexcharts.com/docs/series/#rangecharts",o=new F(this.ctx).getActiveConfigSeriesIndex();if("array"===t){if(2!==e[o].data[0][1].length)throw new Error(n);for(var l=0;l<e[i].data.length;l++)a.push(e[i].data[l][1][0]),s.push(e[i].data[l][1][1])}else if("xy"===t){if(2!==e[o].data[0].y.length)throw new Error(n);for(var h=function(t){var n=g.randomId(),o=e[i].data[t].x,l={y1:e[i].data[t].y[0],y2:e[i].data[t].y[1],rangeName:n};e[i].data[t].rangeName=n;var h=r.findIndex((function(t){return t.x===o}));r[h].y.push(l),a.push(l.y1),s.push(l.y2)},c=0;c<e[i].data.length;c++)h(c)}return{start:a,end:s,rangeUniques:r}}},{key:"handleCandleStickDataFormat",value:function(t,e,i){var a=[],s=[],r=[],n=[],o="Please provide [Open, High, Low and Close] values in valid format. Read more https://apexcharts.com/docs/series/#candlestick";if("array"===t){if(!Array.isArray(e[i].data[0][1])&&5!==e[i].data[0].length||Array.isArray(e[i].data[0][1])&&4!==e[i].data[0][1].length)throw new Error(o);if(5===e[i].data[0].length)for(var l=0;l<e[i].data.length;l++)a.push(e[i].data[l][1]),s.push(e[i].data[l][2]),r.push(e[i].data[l][3]),n.push(e[i].data[l][4]);else for(var h=0;h<e[i].data.length;h++)a.push(e[i].data[h][1][0]),s.push(e[i].data[h][1][1]),r.push(e[i].data[h][1][2]),n.push(e[i].data[h][1][3])}else if("xy"===t){if(4!==e[i].data[0].y.length)throw new Error(o);for(var c=0;c<e[i].data.length;c++)a.push(e[i].data[c].y[0]),s.push(e[i].data[c].y[1]),r.push(e[i].data[c].y[2]),n.push(e[i].data[c].y[3])}return{o:a,h:s,l:r,c:n}}},{key:"parseDataAxisCharts",value:function(t){for(var e=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.ctx,a=this.w.config,s=this.w.globals,r=new C(i),n=a.labels.length>0?a.labels.slice():a.xaxis.categories.slice(),o=function(){for(var t=0;t<n.length;t++)if("string"==typeof n[t]){if(!r.isValidDate(n[t]))throw new Error("You have provided invalid Date format. Please provide a valid JavaScript Date");e.twoDSeriesX.push(r.parseDate(n[t]))}else{if(13!==String(n[t]).length)throw new Error("Please provide a valid JavaScript timestamp");e.twoDSeriesX.push(n[t])}},l=0;l<t.length;l++){if(this.twoDSeries=[],this.twoDSeriesX=[],this.threeDSeries=[],void 0===t[l].data)return void console.error("It is a possibility that you may have not included 'data' property in series.");if("rangeBar"!==a.chart.type&&"rangeArea"!==a.chart.type&&"rangeBar"!==t[l].type&&"rangeArea"!==t[l].type||(s.isRangeData=!0,this.handleRangeData(t,l)),this.isMultiFormat())this.isFormat2DArray()?this.handleFormat2DArray(t,l):this.isFormatXY()&&this.handleFormatXY(t,l),"candlestick"!==a.chart.type&&"candlestick"!==t[l].type||this.handleCandleStickData(t,l),s.series.push(this.twoDSeries),s.labels.push(this.twoDSeriesX),s.seriesX.push(this.twoDSeriesX),l!==this.activeSeriesIndex||this.fallbackToCategory||(s.isXNumeric=!0);else{"datetime"===a.xaxis.type?(s.isXNumeric=!0,o(),s.seriesX.push(this.twoDSeriesX)):"numeric"===a.xaxis.type&&(s.isXNumeric=!0,n.length>0&&(this.twoDSeriesX=n,s.seriesX.push(this.twoDSeriesX))),s.labels.push(this.twoDSeriesX);var h=t[l].data.map((function(t){return g.parseNumber(t)}));s.series.push(h)}s.seriesZ.push(this.threeDSeries),void 0!==t[l].name?s.seriesNames.push(t[l].name):s.seriesNames.push("series-"+parseInt(l+1,10))}return this.w}},{key:"parseDataNonAxisCharts",value:function(t){var e=this.w.globals,i=this.w.config;e.series=t.slice(),e.seriesNames=i.labels.slice();for(var a=0;a<e.series.length;a++)void 0===e.seriesNames[a]&&e.seriesNames.push("series-"+(a+1));return this.w}},{key:"handleExternalLabelsData",value:function(t){var e=this.w.config,i=this.w.globals;if(e.xaxis.categories.length>0)i.labels=e.xaxis.categories;else if(e.labels.length>0)i.labels=e.labels.slice();else if(this.fallbackToCategory){if(i.labels=i.labels[0],i.seriesRangeBarTimeline.length&&(i.seriesRangeBarTimeline.map((function(t){t.forEach((function(t){i.labels.indexOf(t.x)<0&&t.x&&i.labels.push(t.x)}))})),i.labels=i.labels.filter((function(t,e,i){return i.indexOf(t)===e}))),e.xaxis.convertedCatToNumeric)new L(e).convertCatToNumericXaxis(e,this.ctx,i.seriesX[0]),this._generateExternalLabels(t)}else this._generateExternalLabels(t)}},{key:"_generateExternalLabels",value:function(t){var e=this.w.globals,i=this.w.config,a=[];if(e.axisCharts){if(e.series.length>0)for(var s=0;s<e.series[e.maxValsInArrayIndex].length;s++)a.push(s+1);e.seriesX=[];for(var r=0;r<t.length;r++)e.seriesX.push(a);e.isXNumeric=!0}if(0===a.length){a=e.axisCharts?[]:e.series.map((function(t,e){return e+1}));for(var n=0;n<t.length;n++)e.seriesX.push(a)}e.labels=a,i.xaxis.convertedCatToNumeric&&(e.categoryLabels=a.map((function(t){return i.xaxis.labels.formatter(t)}))),e.noLabelsProvided=!0}},{key:"parseData",value:function(t){var e=this.w,i=e.config,a=e.globals;if(this.excludeCollapsedSeriesInYAxis(),this.fallbackToCategory=!1,this.ctx.core.resetGlobals(),this.ctx.core.isMultipleY(),a.axisCharts?this.parseDataAxisCharts(t):this.parseDataNonAxisCharts(t),this.coreUtils.getLargestSeries(),"bar"===i.chart.type&&i.chart.stacked){var s=new F(this.ctx);a.series=s.setNullSeriesToZeroValues(a.series)}this.coreUtils.getSeriesTotals(),a.axisCharts&&this.coreUtils.getStackedSeriesTotals(),this.coreUtils.getPercentSeries(),a.dataFormatXNumeric||a.isXNumeric&&("numeric"!==i.xaxis.type||0!==i.labels.length||0!==i.xaxis.categories.length)||this.handleExternalLabelsData(t);for(var r=this.coreUtils.getCategoryLabels(a.labels),n=0;n<r.length;n++)if(Array.isArray(r[n])){a.isMultiLineX=!0;break}}},{key:"excludeCollapsedSeriesInYAxis",value:function(){var t=this,e=this.w;e.globals.ignoreYAxisIndexes=e.globals.collapsedSeries.map((function(i,a){if(t.w.globals.isMultipleYAxis&&!e.config.chart.stacked)return i.index}))}}]),t}(),D=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.tooltipKeyFormat="dd MMM"}return a(t,[{key:"xLabelFormat",value:function(t,e,i){var a=this.w;if("datetime"===a.config.xaxis.type&&void 0===a.config.xaxis.labels.formatter&&void 0===a.config.tooltip.x.formatter){var s=new C(this.ctx);return s.formatDate(s.getDate(e),a.config.tooltip.x.format)}return t(e,i)}},{key:"defaultGeneralFormatter",value:function(t){return Array.isArray(t)?t.map((function(t){return t})):t}},{key:"defaultYFormatter",value:function(t,e,i){var a=this.w;return g.isNumber(t)&&(t=0!==a.globals.yValueDecimal?t.toFixed(void 0!==e.decimalsInFloat?e.decimalsInFloat:a.globals.yValueDecimal):a.globals.maxYArr[i]-a.globals.minYArr[i]<10?t.toFixed(1):t.toFixed(0)),t}},{key:"setLabelFormatters",value:function(){var t=this,e=this.w;return e.globals.xLabelFormatter=function(e){return t.defaultGeneralFormatter(e)},e.globals.xaxisTooltipFormatter=function(e){return t.defaultGeneralFormatter(e)},e.globals.ttKeyFormatter=function(e){return t.defaultGeneralFormatter(e)},e.globals.ttZFormatter=function(t){return t},e.globals.legendFormatter=function(e){return t.defaultGeneralFormatter(e)},void 0!==e.config.xaxis.labels.formatter?e.globals.xLabelFormatter=e.config.xaxis.labels.formatter:e.globals.xLabelFormatter=function(t){if(g.isNumber(t)){if(!e.config.xaxis.convertedCatToNumeric&&"numeric"===e.config.xaxis.type&&e.globals.dataPoints<50)return t.toFixed(1);if(e.globals.isBarHorizontal)if(e.globals.maxY-e.globals.minYArr<4)return t.toFixed(1);return t.toFixed(0)}return t},"function"==typeof e.config.tooltip.x.formatter?e.globals.ttKeyFormatter=e.config.tooltip.x.formatter:e.globals.ttKeyFormatter=e.globals.xLabelFormatter,"function"==typeof e.config.xaxis.tooltip.formatter&&(e.globals.xaxisTooltipFormatter=e.config.xaxis.tooltip.formatter),Array.isArray(e.config.tooltip.y)?e.globals.ttVal=e.config.tooltip.y:void 0!==e.config.tooltip.y.formatter&&(e.globals.ttVal=e.config.tooltip.y),void 0!==e.config.tooltip.z.formatter&&(e.globals.ttZFormatter=e.config.tooltip.z.formatter),void 0!==e.config.legend.formatter&&(e.globals.legendFormatter=e.config.legend.formatter),e.config.yaxis.forEach((function(i,a){void 0!==i.labels.formatter?e.globals.yLabelFormatters[a]=i.labels.formatter:e.globals.yLabelFormatters[a]=function(s){return e.globals.xyCharts?Array.isArray(s)?s.map((function(e){return t.defaultYFormatter(e,i,a)})):t.defaultYFormatter(s,i,a):s}})),e.globals}},{key:"heatmapLabelFormatters",value:function(){var t=this.w;if("heatmap"===t.config.chart.type){t.globals.yAxisScale[0].result=t.globals.seriesNames.slice();var e=t.globals.seriesNames.reduce((function(t,e){return t.length>e.length?t:e}),0);t.globals.yAxisScale[0].niceMax=e,t.globals.yAxisScale[0].niceMin=e}}}]),t}(),H=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"getLabel",value:function(t,e,i,a){var s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[],r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:"12px",n=this.w,o=void 0===t[a]?"":t[a],l=o,h=n.globals.xLabelFormatter,c=n.config.xaxis.labels.formatter,d=!1,g=new D(this.ctx),u=o;l=g.xLabelFormat(h,o,u),void 0!==c&&(l=c(o,t[a],a));var f=function(t){var i=null;return e.forEach((function(t){"month"===t.unit?i="year":"day"===t.unit?i="month":"hour"===t.unit?i="day":"minute"===t.unit&&(i="hour")})),i===t};e.length>0?(d=f(e[a].unit),i=e[a].position,l=e[a].value):"datetime"===n.config.xaxis.type&&void 0===c&&(l=""),void 0===l&&(l=""),l=Array.isArray(l)?l:l.toString();var x=new p(this.ctx),b={};return b=n.globals.rotateXLabels?x.getTextRects(l,parseInt(r,10),null,"rotate(".concat(n.config.xaxis.labels.rotate," 0 0)"),!1):x.getTextRects(l,parseInt(r,10)),!Array.isArray(l)&&(0===l.indexOf("NaN")||0===l.toLowerCase().indexOf("invalid")||l.toLowerCase().indexOf("infinity")>=0||s.indexOf(l)>=0&&!n.config.xaxis.labels.showDuplicates)&&(l=""),{x:i,text:l,textRect:b,isBold:d}}},{key:"checkForOverflowingLabels",value:function(t,e,i,a,s){var r=this.w;if(0===t&&r.globals.skipFirstTimelinelabel&&(e.text=""),t===i-1&&r.globals.skipLastTimelinelabel&&(e.text=""),r.config.xaxis.labels.hideOverlappingLabels&&a.length>0){var n=s[s.length-1];e.x<n.textRect.width/(r.globals.rotateXLabels?Math.abs(r.config.xaxis.labels.rotate)/12:1.01)+n.x&&(e.text="")}return e}},{key:"checkForReversedLabels",value:function(t,e){var i=this.w;return i.config.yaxis[t]&&i.config.yaxis[t].reversed&&e.reverse(),e}},{key:"isYAxisHidden",value:function(t){var e=this.w,i=new I(this.ctx);return!e.config.yaxis[t].show||!e.config.yaxis[t].showForNullSeries&&i.isSeriesNull(t)&&-1===e.globals.collapsedSeriesIndices.indexOf(t)}},{key:"drawYAxisTicks",value:function(t,e,i,a,s,r,n){var o=this.w,l=new p(this.ctx),h=o.globals.translateY;if(a.show&&e>0){!0===o.config.yaxis[s].opposite&&(t+=a.width);for(var c=e;c>=0;c--){var d=h+e/10+o.config.yaxis[s].labels.offsetY-1;o.globals.isBarHorizontal&&(d=r*c),"heatmap"===o.config.chart.type&&(d+=r/2);var g=l.drawLine(t+i.offsetX-a.width+a.offsetX,d+a.offsetY,t+i.offsetX+a.offsetX,d+a.offsetY,a.color);n.add(g),h+=r}}}}]),t}(),N=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"fixSvgStringForIe11",value:function(t){if(!g.isIE11())return t;var e=0,i=t.replace(/xmlns="http:\/\/www.w3.org\/2000\/svg"/g,(function(t){return 2===++e?'xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"':t}));return i=(i=i.replace(/xmlns:NS\d+=""/g,"")).replace(/NS\d+:(\w+:\w+=")/g,"$1")}},{key:"getSvgString",value:function(){var t=this.w.globals.dom.Paper.svg();return this.fixSvgStringForIe11(t)}},{key:"cleanup",value:function(){var t=this.w,e=t.globals.dom.baseEl.getElementsByClassName("apexcharts-xcrosshairs"),i=t.globals.dom.baseEl.getElementsByClassName("apexcharts-ycrosshairs"),a=t.globals.dom.baseEl.getElementsByClassName("apexcharts-zoom-rect apexcharts-selection-rect");Array.prototype.forEach.call(a,(function(t){t.setAttribute("width",0)})),e&&(e.setAttribute("x",-500),e.setAttribute("x1",-500),e.setAttribute("x2",-500)),i&&(i.setAttribute("y",-100),i.setAttribute("y1",-100),i.setAttribute("y2",-100))}},{key:"svgUrl",value:function(){this.cleanup();var t=this.getSvgString(),e=new Blob([t],{type:"image/svg+xml;charset=utf-8"});return URL.createObjectURL(e)}},{key:"dataURI",value:function(){var t=this;return new Promise((function(e){var i=t.w;t.cleanup();var a=document.createElement("canvas");a.width=i.globals.svgWidth,a.height=parseInt(i.globals.dom.elWrap.style.height,10);var s="transparent"===i.config.chart.background?"#fff":i.config.chart.background,r=a.getContext("2d");r.fillStyle=s,r.fillRect(0,0,a.width,a.height);var n=t.getSvgString();if(window.canvg&&g.isIE11()){var o=window.canvg.Canvg.fromString(r,n,{ignoreClear:!0,ignoreDimensions:!0});o.start();var l=a.msToBlob();o.stop(),e({blob:l})}else{var h="data:image/svg+xml,"+encodeURIComponent(n),c=new Image;c.crossOrigin="anonymous",c.onload=function(){if(r.drawImage(c,0,0),a.msToBlob){var t=a.msToBlob();e({blob:t})}else{var i=a.toDataURL("image/png");e({imgURI:i})}},c.src=h}}))}},{key:"exportToSVG",value:function(){this.triggerDownload(this.svgUrl(),".svg")}},{key:"exportToPng",value:function(){var t=this;this.dataURI().then((function(e){var i=e.imgURI,a=e.blob;a?navigator.msSaveOrOpenBlob(a,t.w.globals.chartID+".png"):t.triggerDownload(i,".png")}))}},{key:"exportToCSV",value:function(t){var e=this,i=t.series,a=t.columnDelimiter,s=void 0===a?",":a,r=t.lineDelimiter,n=void 0===r?"\n":r,o=this.w,l=[],h=[],c="data:text/csv;charset=utf-8,",d=new R(this.ctx),g=new H(this.ctx),u=function(t){var i="";if(o.globals.axisCharts){if("category"===o.config.xaxis.type||o.config.xaxis.convertedCatToNumeric)if(o.globals.isBarHorizontal){var a=o.globals.yLabelFormatters[0],s=new F(e.ctx).getActiveConfigSeriesIndex();i=a(o.globals.labels[t],{seriesIndex:s,dataPointIndex:t,w:o})}else i=g.getLabel(o.globals.labels,o.globals.timescaleLabels,0,t).text;"datetime"===o.config.xaxis.type&&(o.config.xaxis.categories.length?i=o.config.xaxis.categories[t]:o.config.labels.length&&(i=o.config.labels[t]))}else i=o.config.labels[t];return i};l.push("category"),i.map((function(t,e){o.globals.axisCharts&&l.push(t.name?t.name:"series-".concat(e))})),o.globals.axisCharts||(l.push("value"),h.push(l.join(s))),i.map((function(t,e){o.globals.axisCharts?function(t,e){if(l.length&&h.push(l.join(s)),t.data&&t.data.length)for(var a=0;a<t.data.length;a++){l=[];var r=u(a);if(r||(d.isFormatXY()?r=i[e].data[a].x:d.isFormat2DArray()&&(r=i[e].data[a]?i[e].data[a][0]:"")),0===e){l.push(r);for(var n=0;n<o.globals.series.length;n++)l.push(o.globals.series[n][a])}("candlestick"===o.config.chart.type||t.type&&"candlestick"===t.type)&&(l.pop(),l.push(o.globals.seriesCandleO[e][a]),l.push(o.globals.seriesCandleH[e][a]),l.push(o.globals.seriesCandleL[e][a]),l.push(o.globals.seriesCandleC[e][a])),"rangeBar"===o.config.chart.type&&(l.pop(),l.push(o.globals.seriesRangeStart[e][a]),l.push(o.globals.seriesRangeEnd[e][a])),l.length&&h.push(l.join(s))}}(t,e):((l=[]).push(o.globals.labels[e]),l.push(o.globals.series[e]),h.push(l.join(s)))})),c+=h.join(n),this.triggerDownload(encodeURI(c),".csv")}},{key:"triggerDownload",value:function(t,e){var i=document.createElement("a");i.href=t,i.download=this.w.globals.chartID+e,document.body.appendChild(i),i.click(),document.body.removeChild(i)}}]),t}(),O=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w;var a=this.w;this.axesUtils=new H(i),this.xaxisLabels=a.globals.labels.slice(),a.globals.timescaleLabels.length>0&&!a.globals.isBarHorizontal&&(this.xaxisLabels=a.globals.timescaleLabels.slice()),this.drawnLabels=[],this.drawnLabelsRects=[],"top"===a.config.xaxis.position?this.offY=0:this.offY=a.globals.gridHeight+1,this.offY=this.offY+a.config.xaxis.axisBorder.offsetY,this.isCategoryBarHorizontal="bar"===a.config.chart.type&&a.config.plotOptions.bar.horizontal,this.xaxisFontSize=a.config.xaxis.labels.style.fontSize,this.xaxisFontFamily=a.config.xaxis.labels.style.fontFamily,this.xaxisForeColors=a.config.xaxis.labels.style.colors,this.xaxisBorderWidth=a.config.xaxis.axisBorder.width,this.isCategoryBarHorizontal&&(this.xaxisBorderWidth=a.config.yaxis[0].axisBorder.width.toString()),this.xaxisBorderWidth.indexOf("%")>-1?this.xaxisBorderWidth=a.globals.gridWidth*parseInt(this.xaxisBorderWidth,10)/100:this.xaxisBorderWidth=parseInt(this.xaxisBorderWidth,10),this.xaxisBorderHeight=a.config.xaxis.axisBorder.height,this.yaxis=a.config.yaxis[0]}return a(t,[{key:"drawXaxis",value:function(){var t,e=this,i=this.w,a=new p(this.ctx),s=a.group({class:"apexcharts-xaxis",transform:"translate(".concat(i.config.xaxis.offsetX,", ").concat(i.config.xaxis.offsetY,")")}),r=a.group({class:"apexcharts-xaxis-texts-g",transform:"translate(".concat(i.globals.translateXAxisX,", ").concat(i.globals.translateXAxisY,")")});s.add(r);for(var n=i.globals.padHorizontal,o=[],l=0;l<this.xaxisLabels.length;l++)o.push(this.xaxisLabels[l]);var h=o.length;if(i.globals.isXNumeric){var c=h>1?h-1:h;t=i.globals.gridWidth/c,n=n+t/2+i.config.xaxis.labels.offsetX}else t=i.globals.gridWidth/o.length,n=n+t+i.config.xaxis.labels.offsetX;if(i.config.xaxis.labels.show)for(var d=function(s){var l=n-t/2+i.config.xaxis.labels.offsetX;0===s&&1===h&&t/2===n&&1===i.globals.dataPoints&&(l=i.globals.gridWidth/2);var c=e.axesUtils.getLabel(o,i.globals.timescaleLabels,l,s,e.drawnLabels,e.xaxisFontSize),d=28;i.globals.rotateXLabels&&(d=22);(c=e.axesUtils.checkForOverflowingLabels(s,c,h,e.drawnLabels,e.drawnLabelsRects)).text&&i.globals.xaxisLabelsCount++;var g=a.drawText({x:c.x,y:e.offY+i.config.xaxis.labels.offsetY+d-("top"===i.config.xaxis.position?i.globals.xAxisHeight+i.config.xaxis.axisTicks.height-2:0),text:c.text,textAnchor:"middle",fontWeight:c.isBold?600:i.config.xaxis.labels.style.fontWeight,fontSize:e.xaxisFontSize,fontFamily:e.xaxisFontFamily,foreColor:Array.isArray(e.xaxisForeColors)?i.config.xaxis.convertedCatToNumeric?e.xaxisForeColors[i.globals.minX+s-1]:e.xaxisForeColors[s]:e.xaxisForeColors,isPlainText:!1,cssClass:"apexcharts-xaxis-label "+i.config.xaxis.labels.style.cssClass});r.add(g);var u=document.createElementNS(i.globals.SVGNS,"title");u.textContent=c.text,g.node.appendChild(u),""!==c.text&&(e.drawnLabels.push(c.text),e.drawnLabelsRects.push(c)),n+=t},g=0;g<=h-1;g++)d(g);if(void 0!==i.config.xaxis.title.text){var u=a.group({class:"apexcharts-xaxis-title"}),f=a.drawText({x:i.globals.gridWidth/2+i.config.xaxis.title.offsetX,y:this.offY-parseFloat(this.xaxisFontSize)+i.globals.xAxisLabelsHeight+i.config.xaxis.title.offsetY,text:i.config.xaxis.title.text,textAnchor:"middle",fontSize:i.config.xaxis.title.style.fontSize,fontFamily:i.config.xaxis.title.style.fontFamily,fontWeight:i.config.xaxis.title.style.fontWeight,foreColor:i.config.xaxis.title.style.color,cssClass:"apexcharts-xaxis-title-text "+i.config.xaxis.title.style.cssClass});u.add(f),s.add(u)}if(i.config.xaxis.axisBorder.show){var x=0;"bar"===i.config.chart.type&&i.globals.isXNumeric&&(x-=15);var b=a.drawLine(i.globals.padHorizontal+x+i.config.xaxis.axisBorder.offsetX,this.offY,this.xaxisBorderWidth,this.offY,i.config.xaxis.axisBorder.color,0,this.xaxisBorderHeight);s.add(b)}return s}},{key:"drawXaxisInversed",value:function(t){var e,i,a=this.w,s=new p(this.ctx),r=a.config.yaxis[0].opposite?a.globals.translateYAxisX[t]:0,n=s.group({class:"apexcharts-yaxis apexcharts-xaxis-inversed",rel:t}),o=s.group({class:"apexcharts-yaxis-texts-g apexcharts-xaxis-inversed-texts-g",transform:"translate("+r+", 0)"});n.add(o);var l=[];if(a.config.yaxis[t].show)for(var h=0;h<this.xaxisLabels.length;h++)l.push(this.xaxisLabels[h]);i=-(e=a.globals.gridHeight/l.length)/2.2;var c=a.globals.yLabelFormatters[0],d=a.config.yaxis[0].labels;if(d.show)for(var g=0;g<=l.length-1;g++){var u=void 0===l[g]?"":l[g];u=c(u,{seriesIndex:t,dataPointIndex:g,w:a});var f=0;Array.isArray(u)&&(f=u.length/2*parseInt(d.style.fontSize,10));var x=s.drawText({x:d.offsetX-15,y:i+e+d.offsetY-f,text:u,textAnchor:this.yaxis.opposite?"start":"end",foreColor:Array.isArray(d.style.colors)?d.style.colors[g]:d.style.colors,fontSize:d.style.fontSize,fontFamily:d.style.fontFamily,fontWeight:d.style.fontWeight,isPlainText:!1,cssClass:"apexcharts-yaxis-label "+d.style.cssClass});o.add(x);var b=document.createElementNS(a.globals.SVGNS,"title");if(b.textContent=u.text,x.node.appendChild(b),0!==a.config.yaxis[t].labels.rotate){var m=s.rotateAroundCenter(x.node);x.node.setAttribute("transform","rotate(".concat(a.config.yaxis[t].labels.rotate," 0 ").concat(m.y,")"))}i+=e}if(void 0!==a.config.yaxis[0].title.text){var v=s.group({class:"apexcharts-yaxis-title apexcharts-xaxis-title-inversed",transform:"translate("+r+", 0)"}),y=s.drawText({x:0,y:a.globals.gridHeight/2,text:a.config.yaxis[0].title.text,textAnchor:"middle",foreColor:a.config.yaxis[0].title.style.color,fontSize:a.config.yaxis[0].title.style.fontSize,fontWeight:a.config.yaxis[0].title.style.fontWeight,fontFamily:a.config.yaxis[0].title.style.fontFamily,cssClass:"apexcharts-yaxis-title-text "+a.config.yaxis[0].title.style.cssClass});v.add(y),n.add(v)}var w=0;this.isCategoryBarHorizontal&&a.config.yaxis[0].opposite&&(w=a.globals.gridWidth);var k=a.config.xaxis.axisBorder;if(k.show){var A=s.drawLine(a.globals.padHorizontal+k.offsetX+w,1+k.offsetY,a.globals.padHorizontal+k.offsetX+w,a.globals.gridHeight+k.offsetY,k.color,0);n.add(A)}return a.config.yaxis[0].axisTicks.show&&this.axesUtils.drawYAxisTicks(w,l.length,a.config.yaxis[0].axisBorder,a.config.yaxis[0].axisTicks,0,e,n),n}},{key:"drawXaxisTicks",value:function(t,e){var i=this.w,a=t;if(!(t<0||t-2>i.globals.gridWidth)){var s=this.offY+i.config.xaxis.axisTicks.offsetY,r=s+i.config.xaxis.axisTicks.height;if("top"===i.config.xaxis.position&&(r=s-i.config.xaxis.axisTicks.height),i.config.xaxis.axisTicks.show){var n=new p(this.ctx).drawLine(t+i.config.xaxis.axisTicks.offsetX,s+i.config.xaxis.offsetY,a+i.config.xaxis.axisTicks.offsetX,r+i.config.xaxis.offsetY,i.config.xaxis.axisTicks.color);e.add(n),n.node.classList.add("apexcharts-xaxis-tick")}}}},{key:"getXAxisTicksPositions",value:function(){var t=this.w,e=[],i=this.xaxisLabels.length,a=t.globals.padHorizontal;if(t.globals.timescaleLabels.length>0)for(var s=0;s<i;s++)a=this.xaxisLabels[s].position,e.push(a);else for(var r=i,n=0;n<r;n++){var o=r;t.globals.isXNumeric&&"bar"!==t.config.chart.type&&(o-=1),a+=t.globals.gridWidth/o,e.push(a)}return e}},{key:"xAxisLabelCorrections",value:function(){var t=this.w,e=new p(this.ctx),i=t.globals.dom.baseEl.querySelector(".apexcharts-xaxis-texts-g"),a=t.globals.dom.baseEl.querySelectorAll(".apexcharts-xaxis-texts-g text"),s=t.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxis-inversed text"),r=t.globals.dom.baseEl.querySelectorAll(".apexcharts-xaxis-inversed-texts-g text tspan");if(t.globals.rotateXLabels||t.config.xaxis.labels.rotateAlways)for(var n=0;n<a.length;n++){var o=e.rotateAroundCenter(a[n]);o.y=o.y-1,o.x=o.x+1,a[n].setAttribute("transform","rotate(".concat(t.config.xaxis.labels.rotate," ").concat(o.x," ").concat(o.y,")")),a[n].setAttribute("text-anchor","end");i.setAttribute("transform","translate(0, ".concat(-10,")"));var l=a[n].childNodes;t.config.xaxis.labels.trim&&Array.prototype.forEach.call(l,(function(i){e.placeTextWithEllipsis(i,i.textContent,t.config.xaxis.labels.maxHeight-("bottom"===t.config.legend.position?20:10))}))}else!function(){for(var i=t.globals.gridWidth/(t.globals.labels.length+1),s=0;s<a.length;s++){var r=a[s].childNodes;t.config.xaxis.labels.trim&&"datetime"!==t.config.xaxis.type&&Array.prototype.forEach.call(r,(function(t){e.placeTextWithEllipsis(t,t.textContent,i)}))}}();if(s.length>0){var h=s[s.length-1].getBBox(),c=s[0].getBBox();h.x<-20&&s[s.length-1].parentNode.removeChild(s[s.length-1]),c.x+c.width>t.globals.gridWidth&&!t.globals.isBarHorizontal&&s[0].parentNode.removeChild(s[0]);for(var d=0;d<r.length;d++)e.placeTextWithEllipsis(r[d],r[d].textContent,t.config.yaxis[0].labels.maxWidth-2*parseFloat(t.config.yaxis[0].title.style.fontSize)-20)}}}]),t}(),W=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w;var a=this.w;this.xaxisLabels=a.globals.labels.slice(),this.axesUtils=new H(i),this.isTimelineBar="datetime"===a.config.xaxis.type&&a.globals.seriesRangeBarTimeline.length,a.globals.timescaleLabels.length>0&&(this.xaxisLabels=a.globals.timescaleLabels.slice())}return a(t,[{key:"drawGridArea",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=this.w,i=new p(this.ctx);null===t&&(t=i.group({class:"apexcharts-grid"}));var a=i.drawLine(e.globals.padHorizontal,1,e.globals.padHorizontal,e.globals.gridHeight,"transparent"),s=i.drawLine(e.globals.padHorizontal,e.globals.gridHeight,e.globals.gridWidth,e.globals.gridHeight,"transparent");return t.add(s),t.add(a),t}},{key:"drawGrid",value:function(){var t=null;return this.w.globals.axisCharts&&(t=this.renderGrid(),this.drawGridArea(t.el)),t}},{key:"createGridMask",value:function(){var t=this.w,e=t.globals,i=new p(this.ctx),a=Array.isArray(t.config.stroke.width)?0:t.config.stroke.width;if(Array.isArray(t.config.stroke.width)){var s=0;t.config.stroke.width.forEach((function(t){s=Math.max(s,t)})),a=s}e.dom.elGridRectMask=document.createElementNS(e.SVGNS,"clipPath"),e.dom.elGridRectMask.setAttribute("id","gridRectMask".concat(e.cuid)),e.dom.elGridRectMarkerMask=document.createElementNS(e.SVGNS,"clipPath"),e.dom.elGridRectMarkerMask.setAttribute("id","gridRectMarkerMask".concat(e.cuid));var r=t.config.chart.type,n=0,o=0;("bar"===r||"rangeBar"===r||t.globals.comboBarCount>0)&&t.globals.isXNumeric&&!t.globals.isBarHorizontal&&(n=t.config.grid.padding.left,o=t.config.grid.padding.right,e.barPadForNumericAxis>n&&(n=e.barPadForNumericAxis,o=e.barPadForNumericAxis)),e.dom.elGridRect=i.drawRect(-a/2-n-2,-a/2,e.gridWidth+a+o+n+4,e.gridHeight+a,0,"#fff"),new I(this).getLargestMarkerSize();var l=t.globals.markers.largestSize+1;e.dom.elGridRectMarker=i.drawRect(2*-l,2*-l,e.gridWidth+4*l,e.gridHeight+4*l,0,"#fff"),e.dom.elGridRectMask.appendChild(e.dom.elGridRect.node),e.dom.elGridRectMarkerMask.appendChild(e.dom.elGridRectMarker.node);var h=e.dom.baseEl.querySelector("defs");h.appendChild(e.dom.elGridRectMask),h.appendChild(e.dom.elGridRectMarkerMask)}},{key:"_drawGridLines",value:function(t){var e=t.i,i=t.x1,a=t.y1,s=t.x2,r=t.y2,n=t.xCount,o=t.parent,l=this.w;0===e&&l.globals.skipFirstTimelinelabel||e===n-1&&l.globals.skipLastTimelinelabel||"radar"===l.config.chart.type||(l.config.grid.xaxis.lines.show&&this._drawGridLine({x1:i,y1:a,x2:s,y2:r,parent:o}),new O(this.ctx).drawXaxisTicks(i,this.elg))}},{key:"_drawGridLine",value:function(t){var e=t.x1,i=t.y1,a=t.x2,s=t.y2,r=t.parent,n=this.w,o=n.config.grid.strokeDashArray,l=new p(this).drawLine(e,i,a,s,n.config.grid.borderColor,o);l.node.classList.add("apexcharts-gridline"),r.add(l)}},{key:"_drawGridBandRect",value:function(t){var e=t.c,i=t.x1,a=t.y1,s=t.x2,r=t.y2,n=t.type,o=this.w,l=new p(this.ctx);if("column"!==n||"datetime"!==o.config.xaxis.type){var h=o.config.grid[n].colors[e],c=l.drawRect(i,a,s,r,0,h,o.config.grid[n].opacity);this.elg.add(c),c.attr("clip-path","url(#gridRectMask".concat(o.globals.cuid,")")),c.node.classList.add("apexcharts-grid-".concat(n))}}},{key:"_drawXYLines",value:function(t){var e=this,i=t.xCount,a=t.tickAmount,s=this.w;if(s.config.grid.xaxis.lines.show||s.config.xaxis.axisTicks.show){var r=s.globals.padHorizontal,n=s.globals.gridHeight;s.globals.timescaleLabels.length?function(t){for(var a=t.xC,s=t.x1,r=t.y1,n=t.x2,o=t.y2,l=0;l<a;l++)s=e.xaxisLabels[l].position,n=e.xaxisLabels[l].position,e._drawGridLines({i:l,x1:s,y1:r,x2:n,y2:o,xCount:i,parent:e.elgridLinesV})}({xC:i,x1:r,y1:0,x2:void 0,y2:n}):(s.globals.isXNumeric&&(i=s.globals.xAxisScale.result.length),s.config.xaxis.convertedCatToNumeric&&(i=s.globals.xaxisLabelsCount),function(t){for(var a=t.xC,r=t.x1,n=t.y1,o=t.x2,l=t.y2,h=0;h<a+(s.globals.isXNumeric?0:1);h++)0===h&&1===a&&1===s.globals.dataPoints&&(o=r=s.globals.gridWidth/2),e._drawGridLines({i:h,x1:r,y1:n,x2:o,y2:l,xCount:i,parent:e.elgridLinesV}),o=r+=s.globals.gridWidth/(s.globals.isXNumeric?a-1:a)}({xC:i,x1:r,y1:0,x2:void 0,y2:n}))}if(s.config.grid.yaxis.lines.show){var o=0,l=0,h=s.globals.gridWidth,c=a+1;this.isTimelineBar&&(c=s.globals.labels.length);for(var d=0;d<c+(this.isTimelineBar?1:0);d++)this._drawGridLine({x1:0,y1:o,x2:h,y2:l,parent:this.elgridLinesH}),l=o+=s.globals.gridHeight/(this.isTimelineBar?c:a)}}},{key:"_drawInvertedXYLines",value:function(t){var e=t.xCount,i=this.w;if(i.config.grid.xaxis.lines.show||i.config.xaxis.axisTicks.show)for(var a,s=i.globals.padHorizontal,r=i.globals.gridHeight,n=0;n<e+1;n++){i.config.grid.xaxis.lines.show&&this._drawGridLine({x1:s,y1:0,x2:a,y2:r,parent:this.elgridLinesV}),new O(this.ctx).drawXaxisTicks(s,this.elg),a=s=s+i.globals.gridWidth/e+.3}if(i.config.grid.yaxis.lines.show)for(var o=0,l=0,h=i.globals.gridWidth,c=0;c<i.globals.dataPoints+1;c++)this._drawGridLine({x1:0,y1:o,x2:h,y2:l,parent:this.elgridLinesH}),l=o+=i.globals.gridHeight/i.globals.dataPoints}},{key:"renderGrid",value:function(){var t=this.w,e=new p(this.ctx);this.elg=e.group({class:"apexcharts-grid"}),this.elgridLinesH=e.group({class:"apexcharts-gridlines-horizontal"}),this.elgridLinesV=e.group({class:"apexcharts-gridlines-vertical"}),this.elg.add(this.elgridLinesH),this.elg.add(this.elgridLinesV),t.config.grid.show||(this.elgridLinesV.hide(),this.elgridLinesH.hide());for(var i,a=t.globals.yAxisScale.length?t.globals.yAxisScale[0].result.length-1:5,s=0;s<t.globals.series.length&&(void 0!==t.globals.yAxisScale[s]&&(a=t.globals.yAxisScale[s].result.length-1),!(a>2));s++);return!t.globals.isBarHorizontal||this.isTimelineBar?(i=this.xaxisLabels.length,this.isTimelineBar&&(a=t.globals.labels.length),this._drawXYLines({xCount:i,tickAmount:a})):(i=a,a=t.globals.xTickAmount,this._drawInvertedXYLines({xCount:i,tickAmount:a})),this.drawGridBands(i,a),{el:this.elg,xAxisTickWidth:t.globals.gridWidth/i}}},{key:"drawGridBands",value:function(t,e){var i=this.w;if(void 0!==i.config.grid.row.colors&&i.config.grid.row.colors.length>0)for(var a=0,s=i.globals.gridHeight/e,r=i.globals.gridWidth,n=0,o=0;n<e;n++,o++)o>=i.config.grid.row.colors.length&&(o=0),this._drawGridBandRect({c:o,x1:0,y1:a,x2:r,y2:s,type:"row"}),a+=i.globals.gridHeight/e;if(void 0!==i.config.grid.column.colors&&i.config.grid.column.colors.length>0)for(var l=i.globals.isBarHorizontal||"category"!==i.config.xaxis.type&&!i.config.xaxis.convertedCatToNumeric?t:t-1,h=i.globals.padHorizontal,c=i.globals.padHorizontal+i.globals.gridWidth/l,d=i.globals.gridHeight,g=0,u=0;g<t;g++,u++)u>=i.config.grid.column.colors.length&&(u=0),this._drawGridBandRect({c:u,x1:h,y1:0,x2:c,y2:d,type:"column"}),h+=i.globals.gridWidth/l}}]),t}(),B=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"niceScale",value:function(t,e,i){var a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:10,r=arguments.length>5?arguments[5]:void 0,n=this.w;if("dataPoints"===s&&(s=n.globals.dataPoints-1),t===Number.MIN_VALUE&&0===e||!g.isNumber(t)&&!g.isNumber(e)||t===Number.MIN_VALUE&&e===-Number.MAX_VALUE){t=0,e=s;var o=this.linearScale(t,e,s);return o}t>e?(console.warn("axis.min cannot be greater than axis.max"),e=t+.1):t===e&&(t=0===t?0:t-.5,e=0===e?2:e+.5);var l=[],h=Math.abs(e-t);h<1&&r&&("candlestick"===n.config.chart.type||"candlestick"===n.config.series[a].type||n.globals.isRangeData)&&(e*=1.01);var c=s+1;c<2?c=2:c>2&&(c-=2);var d=h/c,u=Math.floor(g.log10(d)),f=Math.pow(10,u),p=Math.round(d/f);p<1&&(p=1);var x=p*f,b=x*Math.floor(t/x),m=x*Math.ceil(e/x),v=b;if(r&&h>2){for(;l.push(v),!((v+=x)>m););return{result:l,niceMin:l[0],niceMax:l[l.length-1]}}var y=t;(l=[]).push(y);for(var w=Math.abs(e-t)/s,k=0;k<=s;k++)y+=w,l.push(y);return l[l.length-2]>=e&&l.pop(),{result:l,niceMin:l[0],niceMax:l[l.length-1]}}},{key:"linearScale",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:10,a=Math.abs(e-t),s=a/i;i===Number.MAX_VALUE&&(i=10,s=1);for(var r=[],n=t;i>=0;)r.push(n),n+=s,i-=1;return{result:r,niceMin:r[0],niceMax:r[r.length-1]}}},{key:"logarithmicScale",value:function(t,e,i,a){(e<0||e===Number.MIN_VALUE)&&(e=.01);for(var s=Math.log(e)/Math.log(10),r=Math.log(i)/Math.log(10),n=Math.abs(i-e)/a,o=[],l=e;a>=0;)o.push(l),l+=n,a-=1;var h=o.map((function(t,a){t<=0&&(t=.01);var n=(r-s)/(i-e),o=Math.pow(10,s+n*(t-s));return Math.round(o/g.roundToBase(o,10))*g.roundToBase(o,10)}));return 0===h[0]&&(h[0]=1),{result:h,niceMin:h[0],niceMax:h[h.length-1]}}},{key:"setYScaleForIndex",value:function(t,e,i){var a=this.w.globals,s=this.w.config,r=a.isBarHorizontal?s.xaxis:s.yaxis[t];void 0===a.yAxisScale[t]&&(a.yAxisScale[t]=[]);var n=Math.abs(i-e);if(r.logarithmic&&n<=5&&(a.invalidLogScale=!0),r.logarithmic&&n>5)a.allSeriesCollapsed=!1,a.yAxisScale[t]=this.logarithmicScale(t,e,i,r.tickAmount?r.tickAmount:Math.floor(Math.log10(i)));else if(i!==-Number.MAX_VALUE&&g.isNumber(i))if(a.allSeriesCollapsed=!1,void 0===r.min&&void 0===r.max||r.forceNiceScale){var o=void 0===s.yaxis[t].max&&void 0===s.yaxis[t].min||s.yaxis[t].forceNiceScale;a.yAxisScale[t]=this.niceScale(e,i,n,t,r.tickAmount?r.tickAmount:n<5&&n>1?n+1:5,o)}else a.yAxisScale[t]=this.linearScale(e,i,r.tickAmount);else a.yAxisScale[t]=this.linearScale(0,5,5)}},{key:"setXScale",value:function(t,e){var i=this.w,a=i.globals,s=i.config.xaxis,r=Math.abs(e-t);return e!==-Number.MAX_VALUE&&g.isNumber(e)?a.xAxisScale=this.niceScale(t,e,r,0,s.tickAmount?s.tickAmount:r<5&&r>1?r+1:5):a.xAxisScale=this.linearScale(0,5,5),a.xAxisScale}},{key:"setMultipleYScales",value:function(){var t=this,e=this.w.globals,i=this.w.config,a=e.minYArr.concat([]),s=e.maxYArr.concat([]),r=[];i.yaxis.forEach((function(e,n){var o=n;i.series.forEach((function(t,i){t.name===e.seriesName&&(o=i,n!==i?r.push({index:i,similarIndex:n,alreadyExists:!0}):r.push({index:i}))}));var l=a[o],h=s[o];t.setYScaleForIndex(n,l,h)})),this.sameScaleInMultipleAxes(a,s,r)}},{key:"sameScaleInMultipleAxes",value:function(t,e,i){var a=this,s=this.w.config,r=this.w.globals,n=[];i.forEach((function(t){t.alreadyExists&&(void 0===n[t.index]&&(n[t.index]=[]),n[t.index].push(t.index),n[t.index].push(t.similarIndex))})),r.yAxisSameScaleIndices=n,n.forEach((function(t,e){n.forEach((function(i,a){var s,r;e!==a&&(s=t,r=i,s.filter((function(t){return-1!==r.indexOf(t)}))).length>0&&(n[e]=n[e].concat(n[a]))}))}));var o=n.map((function(t){return t.filter((function(e,i){return t.indexOf(e)===i}))})).map((function(t){return t.sort()}));n=n.filter((function(t){return!!t}));var l=o.slice(),h=l.map((function(t){return JSON.stringify(t)}));l=l.filter((function(t,e){return h.indexOf(JSON.stringify(t))===e}));var c=[],d=[];t.forEach((function(t,i){l.forEach((function(a,s){a.indexOf(i)>-1&&(void 0===c[s]&&(c[s]=[],d[s]=[]),c[s].push({key:i,value:t}),d[s].push({key:i,value:e[i]}))}))}));var g=Array.apply(null,Array(l.length)).map(Number.prototype.valueOf,Number.MIN_VALUE),u=Array.apply(null,Array(l.length)).map(Number.prototype.valueOf,-Number.MAX_VALUE);c.forEach((function(t,e){t.forEach((function(t,i){g[e]=Math.min(t.value,g[e])}))})),d.forEach((function(t,e){t.forEach((function(t,i){u[e]=Math.max(t.value,u[e])}))})),t.forEach((function(t,e){d.forEach((function(t,i){var n=g[i],o=u[i];s.chart.stacked&&(o=0,t.forEach((function(t,e){t.value!==-Number.MAX_VALUE&&(o+=t.value),n!==Number.MIN_VALUE&&(n+=c[i][e].value)}))),t.forEach((function(i,l){t[l].key===e&&(void 0!==s.yaxis[e].min&&(n="function"==typeof s.yaxis[e].min?s.yaxis[e].min(r.minY):s.yaxis[e].min),void 0!==s.yaxis[e].max&&(o="function"==typeof s.yaxis[e].max?s.yaxis[e].max(r.maxY):s.yaxis[e].max),a.setYScaleForIndex(e,n,o))}))}))}))}},{key:"autoScaleY",value:function(t,e,i){t||(t=this);var a=t.w;if(a.globals.isMultipleYAxis||a.globals.collapsedSeries.length)return console.warn("autoScaleYaxis is not supported in a multi-yaxis chart."),e;var s=a.globals.seriesX[0],r=a.config.chart.stacked;return e.forEach((function(t,n){for(var o=0,l=0;l<s.length;l++)if(s[l]>=i.xaxis.min){o=l;break}var h,c,d=a.globals.minYArr[n],g=a.globals.maxYArr[n],u=a.globals.stackedSeriesTotals;a.globals.series.forEach((function(n,l){var f=n[o];r?(f=u[o],h=c=f,u.forEach((function(t,e){s[e]<=i.xaxis.max&&s[e]>=i.xaxis.min&&(t>c&&null!==t&&(c=t),n[e]<h&&null!==n[e]&&(h=n[e]))}))):(h=c=f,n.forEach((function(t,e){if(s[e]<=i.xaxis.max&&s[e]>=i.xaxis.min){var r=t,n=t;a.globals.series.forEach((function(i,a){null!==t&&(r=Math.min(i[e],r),n=Math.max(i[e],n))})),n>c&&null!==n&&(c=n),r<h&&null!==r&&(h=r)}}))),void 0===h&&void 0===c&&(h=d,c=g),(c*=c<0?.9:1.1)<0&&c<g&&(c=g),(h*=h<0?1.1:.9)<0&&h>d&&(h=d),e.length>1?(e[l].min=void 0===t.min?h:t.min,e[l].max=void 0===t.max?c:t.max):(e[0].min=void 0===t.min?h:t.min,e[0].max=void 0===t.max?c:t.max)}))})),e}}]),t}(),V=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.scales=new B(i)}return a(t,[{key:"init",value:function(){this.setYRange(),this.setXRange(),this.setZRange()}},{key:"getMinYMaxY",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:Number.MAX_VALUE,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:-Number.MAX_VALUE,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,s=this.w.config,r=this.w.globals,n=-Number.MAX_VALUE,o=Number.MIN_VALUE;null===a&&(a=t+1);var l=r.series,h=l,c=l;"candlestick"===s.chart.type?(h=r.seriesCandleL,c=r.seriesCandleH):r.isRangeData&&(h=r.seriesRangeStart,c=r.seriesRangeEnd);for(var d=t;d<a;d++){r.dataPoints=Math.max(r.dataPoints,l[d].length);for(var u=0;u<r.series[d].length;u++){var f=l[d][u];null!==f&&g.isNumber(f)?(n=Math.max(n,c[d][u]),e=Math.min(e,h[d][u]),i=Math.max(i,h[d][u]),"candlestick"===this.w.config.chart.type&&(n=Math.max(n,r.seriesCandleO[d][u]),n=Math.max(n,r.seriesCandleH[d][u]),n=Math.max(n,r.seriesCandleL[d][u]),i=n=Math.max(n,r.seriesCandleC[d][u])),g.isFloat(f)&&(f=g.noExponents(f),r.yValueDecimal=Math.max(r.yValueDecimal,f.toString().split(".")[1].length)),o>h[d][u]&&h[d][u]<0&&(o=h[d][u])):r.hasNullValues=!0}}return"rangeBar"===s.chart.type&&r.seriesRangeStart.length&&"datetime"===s.xaxis.type&&(o=e),"bar"===s.chart.type&&(o<0&&n<0&&(n=0),o===Number.MIN_VALUE&&(o=0)),{minY:o,maxY:n,lowestY:e,highestY:i}}},{key:"setYRange",value:function(){var t=this.w.globals,e=this.w.config;t.maxY=-Number.MAX_VALUE,t.minY=Number.MIN_VALUE;var i=Number.MAX_VALUE;if(t.isMultipleYAxis)for(var a=0;a<t.series.length;a++){var s=this.getMinYMaxY(a,i,null,a+1);t.minYArr.push(s.minY),t.maxYArr.push(s.maxY),i=s.lowestY}var r=this.getMinYMaxY(0,i,null,t.series.length);if(t.minY=r.minY,t.maxY=r.maxY,i=r.lowestY,e.chart.stacked&&this._setStackedMinMax(),("line"===e.chart.type||"area"===e.chart.type||"candlestick"===e.chart.type)&&t.minY===Number.MIN_VALUE&&i!==-Number.MAX_VALUE&&i!==t.maxY){var n=t.maxY-i;i>=0&&i<=10&&(n=0),t.minY=i-5*n/100,i>0&&t.minY<0&&(t.minY=0),t.maxY=t.maxY+5*n/100}if(e.yaxis.forEach((function(e,i){void 0!==e.max&&("number"==typeof e.max?t.maxYArr[i]=e.max:"function"==typeof e.max&&(t.maxYArr[i]=e.max(t.maxY)),t.maxY=t.maxYArr[i]),void 0!==e.min&&("number"==typeof e.min?t.minYArr[i]=e.min:"function"==typeof e.min&&(t.minYArr[i]=e.min(t.minY)),t.minY=t.minYArr[i])})),t.isBarHorizontal){["min","max"].forEach((function(i){void 0!==e.xaxis[i]&&"number"==typeof e.xaxis[i]&&("min"===i?t.minY=e.xaxis[i]:t.maxY=e.xaxis[i])}))}return t.isMultipleYAxis?(this.scales.setMultipleYScales(),t.minY=i,t.yAxisScale.forEach((function(e,i){t.minYArr[i]=e.niceMin,t.maxYArr[i]=e.niceMax}))):(this.scales.setYScaleForIndex(0,t.minY,t.maxY),t.minY=t.yAxisScale[0].niceMin,t.maxY=t.yAxisScale[0].niceMax,t.minYArr[0]=t.yAxisScale[0].niceMin,t.maxYArr[0]=t.yAxisScale[0].niceMax),{minY:t.minY,maxY:t.maxY,minYArr:t.minYArr,maxYArr:t.maxYArr}}},{key:"setXRange",value:function(){var t=this.w.globals,e=this.w.config,i="numeric"===e.xaxis.type||"datetime"===e.xaxis.type||"category"===e.xaxis.type&&!t.noLabelsProvided||t.noLabelsProvided||t.isXNumeric;if(t.isXNumeric&&function(){for(var e=0;e<t.series.length;e++)if(t.labels[e])for(var i=0;i<t.labels[e].length;i++)null!==t.labels[e][i]&&g.isNumber(t.labels[e][i])&&(t.maxX=Math.max(t.maxX,t.labels[e][i]),t.initialMaxX=Math.max(t.maxX,t.labels[e][i]),t.minX=Math.min(t.minX,t.labels[e][i]),t.initialMinX=Math.min(t.minX,t.labels[e][i]))}(),t.noLabelsProvided&&0===e.xaxis.categories.length&&(t.maxX=t.labels[t.labels.length-1],t.initialMaxX=t.labels[t.labels.length-1],t.minX=1,t.initialMinX=1),t.isXNumeric||t.noLabelsProvided||t.dataFormatXNumeric){var a;if(void 0===e.xaxis.tickAmount?(a=Math.round(t.svgWidth/150),"numeric"===e.xaxis.type&&t.dataPoints<30&&(a=t.dataPoints-1),a>t.dataPoints&&0!==t.dataPoints&&(a=t.dataPoints-1)):"dataPoints"===e.xaxis.tickAmount?(t.series.length>1&&(a=t.series[t.maxValsInArrayIndex].length-1),t.isXNumeric&&(a=t.maxX-t.minX-1)):a=e.xaxis.tickAmount,t.xTickAmount=a,void 0!==e.xaxis.max&&"number"==typeof e.xaxis.max&&(t.maxX=e.xaxis.max),void 0!==e.xaxis.min&&"number"==typeof e.xaxis.min&&(t.minX=e.xaxis.min),void 0!==e.xaxis.range&&(t.minX=t.maxX-e.xaxis.range),t.minX!==Number.MAX_VALUE&&t.maxX!==-Number.MAX_VALUE)if(e.xaxis.convertedCatToNumeric&&!t.dataFormatXNumeric){for(var s=[],r=t.minX-1;r<t.maxX;r++)s.push(r+1);t.xAxisScale={result:s,niceMin:s[0],niceMax:s[s.length-1]}}else t.xAxisScale=this.scales.setXScale(t.minX,t.maxX);else t.xAxisScale=this.scales.linearScale(1,a,a),t.noLabelsProvided&&t.labels.length>0&&(t.xAxisScale=this.scales.linearScale(1,t.labels.length,a-1),t.seriesX=t.labels.slice());i&&(t.labels=t.xAxisScale.result.slice())}return t.isBarHorizontal&&t.labels.length&&(t.xTickAmount=t.labels.length),this._handleSingleDataPoint(),this._getMinXDiff(),{minX:t.minX,maxX:t.maxX}}},{key:"setZRange",value:function(){var t=this.w.globals;if(t.isDataXYZ)for(var e=0;e<t.series.length;e++)if(void 0!==t.seriesZ[e])for(var i=0;i<t.seriesZ[e].length;i++)null!==t.seriesZ[e][i]&&g.isNumber(t.seriesZ[e][i])&&(t.maxZ=Math.max(t.maxZ,t.seriesZ[e][i]),t.minZ=Math.min(t.minZ,t.seriesZ[e][i]))}},{key:"_handleSingleDataPoint",value:function(){var t=this.w.globals,e=this.w.config;if(t.minX===t.maxX){var i=new C(this.ctx);if("datetime"===e.xaxis.type){var a=i.getDate(t.minX);a.setUTCDate(a.getDate()-2),t.minX=new Date(a).getTime();var s=i.getDate(t.maxX);s.setUTCDate(s.getDate()+2),t.maxX=new Date(s).getTime()}else("numeric"===e.xaxis.type||"category"===e.xaxis.type&&!t.noLabelsProvided)&&(t.minX=t.minX-2,t.initialMinX=t.minX,t.maxX=t.maxX+2,t.initialMaxX=t.maxX)}}},{key:"_getMinXDiff",value:function(){var t=this.w.globals;t.isXNumeric&&t.seriesX.forEach((function(e,i){1===e.length&&e.push(t.seriesX[t.maxValsInArrayIndex][t.seriesX[t.maxValsInArrayIndex].length-1]);var a=e.slice();a.sort((function(t,e){return t-e})),a.forEach((function(e,a){if(a>0){var s=e-t.seriesX[i][a-1];s>0&&(t.minXDiff=Math.min(s,t.minXDiff))}})),1===t.dataPoints&&t.minXDiff===Number.MAX_VALUE&&(t.minXDiff=.5)}))}},{key:"_setStackedMinMax",value:function(){var t=this.w.globals,e=[],i=[];if(t.series.length)for(var a=0;a<t.series[t.maxValsInArrayIndex].length;a++)for(var s=0,r=0,n=0;n<t.series.length;n++)null!==t.series[n][a]&&g.isNumber(t.series[n][a])&&(t.series[n][a]>0?s=s+parseFloat(t.series[n][a])+1e-4:r+=parseFloat(t.series[n][a])),n===t.series.length-1&&(e.push(s),i.push(r));for(var o=0;o<e.length;o++)t.maxY=Math.max(t.maxY,e[o]),t.minY=Math.min(t.minY,i[o])}}]),t}(),G=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w;var a=this.w;this.xaxisFontSize=a.config.xaxis.labels.style.fontSize,this.axisFontFamily=a.config.xaxis.labels.style.fontFamily,this.xaxisForeColors=a.config.xaxis.labels.style.colors,this.isCategoryBarHorizontal="bar"===a.config.chart.type&&a.config.plotOptions.bar.horizontal,this.xAxisoffX=0,"bottom"===a.config.xaxis.position&&(this.xAxisoffX=a.globals.gridHeight),this.drawnLabels=[],this.axesUtils=new H(i)}return a(t,[{key:"drawYaxis",value:function(t){var e=this.w,i=new p(this.ctx),a=e.config.yaxis[t].labels.style,s=a.fontSize,r=a.fontFamily,n=a.fontWeight,o=i.group({class:"apexcharts-yaxis",rel:t,transform:"translate("+e.globals.translateYAxisX[t]+", 0)"});if(this.axesUtils.isYAxisHidden(t))return o;var l=i.group({class:"apexcharts-yaxis-texts-g"});o.add(l);var h=e.globals.yAxisScale[t].result.length-1,c=e.globals.gridHeight/h,d=e.globals.translateY,g=e.globals.yLabelFormatters[t],u=e.globals.yAxisScale[t].result.slice();u=this.axesUtils.checkForReversedLabels(t,u);var f="";if(e.config.yaxis[t].labels.show)for(var x=function(o){var p=u[o];p=g(p,o);var x=e.config.yaxis[t].labels.padding;e.config.yaxis[t].opposite&&0!==e.config.yaxis.length&&(x*=-1);var b=i.drawText({x:x,y:d+h/10+e.config.yaxis[t].labels.offsetY+1,text:p,textAnchor:e.config.yaxis[t].opposite?"start":"end",fontSize:s,fontFamily:r,fontWeight:n,foreColor:Array.isArray(a.colors)?a.colors[o]:a.colors,isPlainText:!1,cssClass:"apexcharts-yaxis-label "+a.cssClass});if(o===h&&(f=b),l.add(b),0!==e.config.yaxis[t].labels.rotate){var m=i.rotateAroundCenter(f.node),v=i.rotateAroundCenter(b.node);b.node.setAttribute("transform","rotate(".concat(e.config.yaxis[t].labels.rotate," ").concat(m.x," ").concat(v.y,")"))}d+=c},b=h;b>=0;b--)x(b);if(void 0!==e.config.yaxis[t].title.text){var m=i.group({class:"apexcharts-yaxis-title"}),v=0;e.config.yaxis[t].opposite&&(v=e.globals.translateYAxisX[t]);var y=i.drawText({x:v,y:e.globals.gridHeight/2+e.globals.translateY+e.config.yaxis[t].title.offsetY,text:e.config.yaxis[t].title.text,textAnchor:"end",foreColor:e.config.yaxis[t].title.style.color,fontSize:e.config.yaxis[t].title.style.fontSize,fontWeight:e.config.yaxis[t].title.style.fontWeight,fontFamily:e.config.yaxis[t].title.style.fontFamily,cssClass:"apexcharts-yaxis-title-text "+e.config.yaxis[t].title.style.cssClass});m.add(y),o.add(m)}var w=e.config.yaxis[t].axisBorder,k=31+w.offsetX;if(e.config.yaxis[t].opposite&&(k=-31-w.offsetX),w.show){var A=i.drawLine(k,e.globals.translateY+w.offsetY-2,k,e.globals.gridHeight+e.globals.translateY+w.offsetY+2,w.color,0,w.width);o.add(A)}return e.config.yaxis[t].axisTicks.show&&this.axesUtils.drawYAxisTicks(k,h,w,e.config.yaxis[t].axisTicks,t,c,o),o}},{key:"drawYaxisInversed",value:function(t){var e=this.w,i=new p(this.ctx),a=i.group({class:"apexcharts-xaxis apexcharts-yaxis-inversed"}),s=i.group({class:"apexcharts-xaxis-texts-g",transform:"translate(".concat(e.globals.translateXAxisX,", ").concat(e.globals.translateXAxisY,")")});a.add(s);var r=e.globals.yAxisScale[t].result.length-1,n=e.globals.gridWidth/r+.1,o=n+e.config.xaxis.labels.offsetX,l=e.globals.xLabelFormatter,h=e.globals.yAxisScale[t].result.slice(),c=e.globals.timescaleLabels;c.length>0&&(this.xaxisLabels=c.slice(),r=(h=c.slice()).length),h=this.axesUtils.checkForReversedLabels(t,h);var d=c.length;if(e.config.xaxis.labels.show)for(var g=d?0:r;d?g<d:g>=0;d?g++:g--){var u=h[g];u=l(u,g);var f=e.globals.gridWidth+e.globals.padHorizontal-(o-n+e.config.xaxis.labels.offsetX);if(c.length){var x=this.axesUtils.getLabel(h,c,f,g,this.drawnLabels,this.xaxisFontSize);f=x.x,u=x.text,this.drawnLabels.push(x.text),0===g&&e.globals.skipFirstTimelinelabel&&(u=""),g===h.length-1&&e.globals.skipLastTimelinelabel&&(u="")}var b=i.drawText({x:f,y:this.xAxisoffX+e.config.xaxis.labels.offsetY+30-("top"===e.config.xaxis.position?e.globals.xAxisHeight+e.config.xaxis.axisTicks.height-2:0),text:u,textAnchor:"middle",foreColor:Array.isArray(this.xaxisForeColors)?this.xaxisForeColors[t]:this.xaxisForeColors,fontSize:this.xaxisFontSize,fontFamily:this.xaxisFontFamily,fontWeight:e.config.xaxis.labels.style.fontWeight,isPlainText:!1,cssClass:"apexcharts-xaxis-label "+e.config.xaxis.labels.style.cssClass});s.add(b),b.tspan(u);var m=document.createElementNS(e.globals.SVGNS,"title");m.textContent=u,b.node.appendChild(m),o+=n}return this.inversedYAxisTitleText(a),this.inversedYAxisBorder(a),a}},{key:"inversedYAxisBorder",value:function(t){var e=this.w,i=new p(this.ctx),a=e.config.xaxis.axisBorder;if(a.show){var s=0;"bar"===e.config.chart.type&&e.globals.isXNumeric&&(s-=15);var r=i.drawLine(e.globals.padHorizontal+s+a.offsetX,this.xAxisoffX,e.globals.gridWidth,this.xAxisoffX,a.color,0,a.height);t.add(r)}}},{key:"inversedYAxisTitleText",value:function(t){var e=this.w,i=new p(this.ctx);if(void 0!==e.config.xaxis.title.text){var a=i.group({class:"apexcharts-xaxis-title apexcharts-yaxis-title-inversed"}),s=i.drawText({x:e.globals.gridWidth/2+e.config.xaxis.title.offsetX,y:this.xAxisoffX+parseFloat(this.xaxisFontSize)+parseFloat(e.config.xaxis.title.style.fontSize)+e.config.xaxis.title.offsetY+20,text:e.config.xaxis.title.text,textAnchor:"middle",fontSize:e.config.xaxis.title.style.fontSize,fontFamily:e.config.xaxis.title.style.fontFamily,fontWeight:e.config.xaxis.title.style.fontWeight,cssClass:"apexcharts-xaxis-title-text "+e.config.xaxis.title.style.cssClass});a.add(s),t.add(a)}}},{key:"yAxisTitleRotate",value:function(t,e){var i=this.w,a=new p(this.ctx),s={width:0,height:0},r={width:0,height:0},n=i.globals.dom.baseEl.querySelector(" .apexcharts-yaxis[rel='".concat(t,"'] .apexcharts-yaxis-texts-g"));null!==n&&(s=n.getBoundingClientRect());var o=i.globals.dom.baseEl.querySelector(".apexcharts-yaxis[rel='".concat(t,"'] .apexcharts-yaxis-title text"));if(null!==o&&(r=o.getBoundingClientRect()),null!==o){var l=this.xPaddingForYAxisTitle(t,s,r,e);o.setAttribute("x",l.xPos-(e?10:0))}if(null!==o){var h=a.rotateAroundCenter(o);o.setAttribute("transform","rotate(".concat(e?"":"-").concat(i.config.yaxis[t].title.rotate," ").concat(h.x," ").concat(h.y,")"))}}},{key:"xPaddingForYAxisTitle",value:function(t,e,i,a){var s=this.w,r=0,n=0,o=10;return void 0===s.config.yaxis[t].title.text||t<0?{xPos:n,padd:0}:(a?(n=e.width+s.config.yaxis[t].title.offsetX+i.width/2+o/2,0===(r+=1)&&(n-=o/2)):(n=-1*e.width+s.config.yaxis[t].title.offsetX+o/2+i.width/2,s.globals.isBarHorizontal&&(o=25,n=-1*e.width-s.config.yaxis[t].title.offsetX-o)),{xPos:n,padd:o})}},{key:"setYAxisXPosition",value:function(t,e){var i=this.w,a=0,s=0,r=18,n=1;i.config.yaxis.length>1&&(this.multipleYs=!0),i.config.yaxis.map((function(o,l){var h=i.globals.ignoreYAxisIndexes.indexOf(l)>-1||!o.show||o.floating||0===t[l].width,c=t[l].width+e[l].width;o.opposite?i.globals.isBarHorizontal?(s=i.globals.gridWidth+i.globals.translateX-1,i.globals.translateYAxisX[l]=s-o.labels.offsetX):(s=i.globals.gridWidth+i.globals.translateX+n,h||(n=n+c+20),i.globals.translateYAxisX[l]=s-o.labels.offsetX+20):(a=i.globals.translateX-r,h||(r=r+c+20),i.globals.translateYAxisX[l]=a+o.labels.offsetX)}))}},{key:"setYAxisTextAlignments",value:function(){var t=this.w,e=t.globals.dom.baseEl.getElementsByClassName("apexcharts-yaxis");(e=g.listToArray(e)).forEach((function(e,i){var a=t.config.yaxis[i];if(void 0!==a.labels.align){var s=t.globals.dom.baseEl.querySelector(".apexcharts-yaxis[rel='".concat(i,"'] .apexcharts-yaxis-texts-g")),r=t.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxis[rel='".concat(i,"'] .apexcharts-yaxis-label"));r=g.listToArray(r);var n=s.getBoundingClientRect();"left"===a.labels.align?(r.forEach((function(t,e){t.setAttribute("text-anchor","start")})),a.opposite||s.setAttribute("transform","translate(-".concat(n.width,", 0)"))):"center"===a.labels.align?(r.forEach((function(t,e){t.setAttribute("text-anchor","middle")})),s.setAttribute("transform","translate(".concat(n.width/2*(a.opposite?1:-1),", 0)"))):"right"===a.labels.align&&(r.forEach((function(t,e){t.setAttribute("text-anchor","end")})),a.opposite&&s.setAttribute("transform","translate(".concat(n.width,", 0)")))}}))}}]),t}(),_=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.documentEvent=g.bind(this.documentEvent,this)}return a(t,[{key:"addEventListener",value:function(t,e){var i=this.w;i.globals.events.hasOwnProperty(t)?i.globals.events[t].push(e):i.globals.events[t]=[e]}},{key:"removeEventListener",value:function(t,e){var i=this.w;if(i.globals.events.hasOwnProperty(t)){var a=i.globals.events[t].indexOf(e);-1!==a&&i.globals.events[t].splice(a,1)}}},{key:"fireEvent",value:function(t,e){var i=this.w;if(i.globals.events.hasOwnProperty(t)){e&&e.length||(e=[]);for(var a=i.globals.events[t],s=a.length,r=0;r<s;r++)a[r].apply(null,e)}}},{key:"setupEventHandlers",value:function(){var t=this,e=this.w,i=this.ctx,a=e.globals.dom.baseEl.querySelector(e.globals.chartClass);this.ctx.eventList.forEach((function(t){a.addEventListener(t,(function(t){var a=Object.assign({},e,{seriesIndex:e.globals.capturedSeriesIndex,dataPointIndex:e.globals.capturedDataPointIndex});"mousemove"===t.type||"touchmove"===t.type?"function"==typeof e.config.chart.events.mouseMove&&e.config.chart.events.mouseMove(t,i,a):("mouseup"===t.type&&1===t.which||"touchend"===t.type)&&("function"==typeof e.config.chart.events.click&&e.config.chart.events.click(t,i,a),i.ctx.events.fireEvent("click",[t,i,a]))}),{capture:!1,passive:!0})})),this.ctx.eventList.forEach((function(e){document.addEventListener(e,t.documentEvent)})),this.ctx.core.setupBrushHandler()}},{key:"documentEvent",value:function(t){var e=this.w,i=t.target.className;if("click"===t.type){var a=e.globals.dom.baseEl.querySelector(".apexcharts-menu");a&&a.classList.contains("apexcharts-menu-open")&&"apexcharts-menu-icon"!==i&&a.classList.remove("apexcharts-menu-open")}if("mousedown"===t.type){var s=e.globals.dom.Paper.select(".apexcharts-resizable-element").members;Array.prototype.forEach.call(s,(function(e){t.target.classList.contains("apexcharts-resizable-element")||t.target.classList.contains("svg_select_points")||e.selectize(!1)}))}e.globals.clientX="touchmove"===t.type?t.touches[0].clientX:t.clientX,e.globals.clientY="touchmove"===t.type?t.touches[0].clientY:t.clientY}}]),t}(),j=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"setCurrentLocaleValues",value:function(t){var e=this.w.config.chart.locales;window.Apex.chart&&window.Apex.chart.locales&&window.Apex.chart.locales.length>0&&(e=this.w.config.chart.locales.concat(window.Apex.chart.locales));var i=e.filter((function(e){return e.name===t}))[0];if(!i)throw new Error("Wrong locale name provided. Please make sure you set the correct locale name in options");var a=g.extend(k,i);this.w.globals.locale=a.options}}]),t}(),U=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"drawAxis",value:function(t,e){var i,a,s=this.w.globals,r=this.w.config,n=new O(this.ctx),o=new G(this.ctx);s.axisCharts&&"radar"!==t&&(s.isBarHorizontal?(a=o.drawYaxisInversed(0),i=n.drawXaxisInversed(0),s.dom.elGraphical.add(i),s.dom.elGraphical.add(a)):(i=n.drawXaxis(),s.dom.elGraphical.add(i),r.yaxis.map((function(t,e){-1===s.ignoreYAxisIndexes.indexOf(e)&&(a=o.drawYaxis(e),s.dom.Paper.add(a))}))));r.yaxis.map((function(t,e){-1===s.ignoreYAxisIndexes.indexOf(e)&&o.yAxisTitleRotate(e,t.opposite)}))}}]),t}(),q=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"drawXCrosshairs",value:function(){var t=this.w,e=new p(this.ctx),i=new u(this.ctx),a=t.config.xaxis.crosshairs.fill.gradient,s=t.config.xaxis.crosshairs.dropShadow,r=t.config.xaxis.crosshairs.fill.type,n=a.colorFrom,o=a.colorTo,l=a.opacityFrom,h=a.opacityTo,c=a.stops,d=s.enabled,f=s.left,x=s.top,b=s.blur,m=s.color,v=s.opacity,y=t.config.xaxis.crosshairs.fill.color;if(t.config.xaxis.crosshairs.show){"gradient"===r&&(y=e.drawGradient("vertical",n,o,l,h,null,c,null));var w=e.drawRect();1===t.config.xaxis.crosshairs.width&&(w=e.drawLine()),w.attr({class:"apexcharts-xcrosshairs",x:0,y:0,y2:t.globals.gridHeight,width:g.isNumber(t.config.xaxis.crosshairs.width)?t.config.xaxis.crosshairs.width:0,height:t.globals.gridHeight,fill:y,filter:"none","fill-opacity":t.config.xaxis.crosshairs.opacity,stroke:t.config.xaxis.crosshairs.stroke.color,"stroke-width":t.config.xaxis.crosshairs.stroke.width,"stroke-dasharray":t.config.xaxis.crosshairs.stroke.dashArray}),d&&(w=i.dropShadow(w,{left:f,top:x,blur:b,color:m,opacity:v})),t.globals.dom.elGraphical.add(w)}}},{key:"drawYCrosshairs",value:function(){var t=this.w,e=new p(this.ctx),i=t.config.yaxis[0].crosshairs;if(t.config.yaxis[0].crosshairs.show){var a=e.drawLine(0,0,t.globals.gridWidth,0,i.stroke.color,i.stroke.dashArray,i.stroke.width);a.attr({class:"apexcharts-ycrosshairs"}),t.globals.dom.elGraphical.add(a)}var s=e.drawLine(0,0,t.globals.gridWidth,0,i.stroke.color,0,0);s.attr({class:"apexcharts-ycrosshairs-hidden"}),t.globals.dom.elGraphical.add(s)}}]),t}(),Z=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"checkResponsiveConfig",value:function(t){var e=this,i=this.w,a=i.config;if(0!==a.responsive.length){var s=a.responsive.slice();s.sort((function(t,e){return t.breakpoint>e.breakpoint?1:e.breakpoint>t.breakpoint?-1:0})).reverse();var r=new P({}),n=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},a=s[0].breakpoint,n=window.innerWidth>0?window.innerWidth:screen.width;if(n>a){var o=I.extendArrayProps(r,i.globals.initialConfig);t=g.extend(o,t),t=g.extend(i.config,t),e.overrideResponsiveOptions(t)}else for(var l=0;l<s.length;l++)n<s[l].breakpoint&&(t=I.extendArrayProps(r,s[l].options),t=g.extend(i.config,t),e.overrideResponsiveOptions(t))};if(t){var o=I.extendArrayProps(r,t);o=g.extend(i.config,o),n(o=g.extend(o,t))}else n({})}}},{key:"overrideResponsiveOptions",value:function(t){var e=new P(t).init({responsiveOverride:!0});this.w.config=e}}]),t}(),$=function(){function t(i){e(this,t),this.ctx=i,this.colors=[],this.w=i.w;var a=this.w;this.isColorFn=!1,this.isBarDistributed=a.config.plotOptions.bar.distributed&&("bar"===a.config.chart.type||"rangeBar"===a.config.chart.type)}return a(t,[{key:"init",value:function(){this.setDefaultColors()}},{key:"setDefaultColors",value:function(){var t=this,e=this.w,i=new g;if(e.globals.dom.elWrap.classList.add("apexcharts-theme-".concat(e.config.theme.mode)),void 0===e.config.colors?e.globals.colors=this.predefined():(e.globals.colors=e.config.colors,e.globals.axisCharts&&"bar"!==e.config.chart.type&&Array.isArray(e.config.colors)&&e.config.colors.length>0&&e.config.colors.length===e.config.series.length&&(e.globals.colors=e.config.colors.map((function(i,a){return"function"==typeof i?(t.isColorFn=!0,i({value:e.globals.axisCharts?e.globals.series[a][0]?e.globals.series[a][0]:0:e.globals.series[a],seriesIndex:a,dataPointIndex:a,w:e})):i})))),e.config.theme.monochrome.enabled){var a=[],s=e.globals.series.length;this.isBarDistributed&&(s=e.globals.series[0].length*e.globals.series.length);for(var r=e.config.theme.monochrome.color,n=1/(s/e.config.theme.monochrome.shadeIntensity),o=e.config.theme.monochrome.shadeTo,l=0,h=0;h<s;h++){var c=void 0;"dark"===o?(c=i.shadeColor(-1*l,r),l+=n):(c=i.shadeColor(l,r),l+=n),a.push(c)}e.globals.colors=a.slice()}var d=e.globals.colors.slice();this.pushExtraColors(e.globals.colors);["fill","stroke"].forEach((function(i){void 0===e.config[i].colors?e.globals[i].colors=t.isColorFn?e.config.colors:d:e.globals[i].colors=e.config[i].colors.slice(),t.pushExtraColors(e.globals[i].colors)})),void 0===e.config.dataLabels.style.colors?e.globals.dataLabels.style.colors=d:e.globals.dataLabels.style.colors=e.config.dataLabels.style.colors.slice(),this.pushExtraColors(e.globals.dataLabels.style.colors,50),void 0===e.config.plotOptions.radar.polygons.fill.colors?e.globals.radarPolygons.fill.colors=["dark"===e.config.theme.mode?"#202D48":"#fff"]:e.globals.radarPolygons.fill.colors=e.config.plotOptions.radar.polygons.fill.colors.slice(),this.pushExtraColors(e.globals.radarPolygons.fill.colors,20),void 0===e.config.markers.colors?e.globals.markers.colors=d:e.globals.markers.colors=e.config.markers.colors.slice(),this.pushExtraColors(e.globals.markers.colors)}},{key:"pushExtraColors",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,a=this.w,s=e||a.globals.series.length;if(null===i&&(i=this.isBarDistributed||"heatmap"===a.config.chart.type&&a.config.plotOptions.heatmap.colorScale.inverse),i&&(s=a.globals.series[0].length*a.globals.series.length),t.length<s)for(var r=s-t.length,n=0;n<r;n++)t.push(t[n])}},{key:"updateThemeOptions",value:function(t){t.chart=t.chart||{},t.tooltip=t.tooltip||{};var e=t.theme.mode||"light",i=t.theme.palette?t.theme.palette:"dark"===e?"palette4":"palette1",a=t.chart.foreColor?t.chart.foreColor:"dark"===e?"#f6f7f8":"#373d3f";return t.tooltip.theme=e,t.chart.foreColor=a,t.theme.palette=i,t}},{key:"predefined",value:function(){switch(this.w.config.theme.palette){case"palette1":this.colors=["#008FFB","#00E396","#FEB019","#FF4560","#775DD0"];break;case"palette2":this.colors=["#3f51b5","#03a9f4","#4caf50","#f9ce1d","#FF9800"];break;case"palette3":this.colors=["#33b2df","#546E7A","#d4526e","#13d8aa","#A5978B"];break;case"palette4":this.colors=["#4ecdc4","#c7f464","#81D4FA","#fd6a6a","#546E7A"];break;case"palette5":this.colors=["#2b908f","#f9a3a4","#90ee7e","#fa4443","#69d2e7"];break;case"palette6":this.colors=["#449DD1","#F86624","#EA3546","#662E9B","#C5D86D"];break;case"palette7":this.colors=["#D7263D","#1B998B","#2E294E","#F46036","#E2C044"];break;case"palette8":this.colors=["#662E9B","#F86624","#F9C80E","#EA3546","#43BCCD"];break;case"palette9":this.colors=["#5C4742","#A5978B","#8D5B4C","#5A2A27","#C4BBAF"];break;case"palette10":this.colors=["#A300D6","#7D02EB","#5653FE","#2983FF","#00B1F2"];break;default:this.colors=["#008FFB","#00E396","#FEB019","#FF4560","#775DD0"]}return this.colors}}]),t}(),J=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"draw",value:function(){this.drawTitleSubtitle("title"),this.drawTitleSubtitle("subtitle")}},{key:"drawTitleSubtitle",value:function(t){var e=this.w,i="title"===t?e.config.title:e.config.subtitle,a=e.globals.svgWidth/2,s=i.offsetY,r="middle";if("left"===i.align?(a=10,r="start"):"right"===i.align&&(a=e.globals.svgWidth-10,r="end"),a+=i.offsetX,s=s+parseInt(i.style.fontSize,10)+i.margin/2,void 0!==i.text){var n=new p(this.ctx).drawText({x:a,y:s,text:i.text,textAnchor:r,fontSize:i.style.fontSize,fontFamily:i.style.fontFamily,fontWeight:i.style.fontWeight,foreColor:i.style.color,opacity:1});n.node.setAttribute("class","apexcharts-".concat(t,"-text")),e.globals.dom.Paper.add(n)}}}]),t}(),Q=function(){function t(i){e(this,t),this.w=i.w,this.dCtx=i}return a(t,[{key:"getTitleSubtitleCoords",value:function(t){var e=this.w,i=0,a=0,s="title"===t?e.config.title.floating:e.config.subtitle.floating,r=e.globals.dom.baseEl.querySelector(".apexcharts-".concat(t,"-text"));if(null!==r&&!s){var n=r.getBoundingClientRect();i=n.width,a=e.globals.axisCharts?n.height+5:n.height}return{width:i,height:a}}},{key:"getLegendsRect",value:function(){var t=this.w,e=t.globals.dom.baseEl.querySelector(".apexcharts-legend"),i=Object.assign({},g.getBoundingClientRect(e));return null!==e&&!t.config.legend.floating&&t.config.legend.show?this.dCtx.lgRect={x:i.x,y:i.y,height:i.height,width:0===i.height?0:i.width}:this.dCtx.lgRect={x:0,y:0,height:0,width:0},"left"!==t.config.legend.position&&"right"!==t.config.legend.position||1.5*this.dCtx.lgRect.width>t.globals.svgWidth&&(this.dCtx.lgRect.width=t.globals.svgWidth/1.5),this.dCtx.lgRect}},{key:"getLargestStringFromMultiArr",value:function(t,e){var i=t;if(this.w.globals.isMultiLineX){var a=e.map((function(t,e){return Array.isArray(t)?t.length:1})),s=Math.max.apply(Math,d(a));i=e[a.indexOf(s)]}return i}}]),t}(),K=function(){function t(i){e(this,t),this.w=i.w,this.dCtx=i}return a(t,[{key:"getxAxisLabelsCoords",value:function(){var t,e=this.w,i=e.globals.labels.slice();if(e.config.xaxis.convertedCatToNumeric&&0===i.length&&(i=e.globals.categoryLabels),e.globals.timescaleLabels.length>0){var a=this.getxAxisTimeScaleLabelsCoords();t={width:a.width,height:a.height},e.globals.rotateXLabels=!1}else{this.dCtx.lgWidthForSideLegends="left"!==e.config.legend.position&&"right"!==e.config.legend.position||e.config.legend.floating?0:this.dCtx.lgRect.width;var s=e.globals.xLabelFormatter,r=g.getLargestStringFromArr(i),n=this.dCtx.dimHelpers.getLargestStringFromMultiArr(r,i);e.globals.isBarHorizontal&&(n=r=e.globals.yAxisScale[0].result.reduce((function(t,e){return t.length>e.length?t:e}),0));var o=new D(this.dCtx.ctx),l=r;r=o.xLabelFormat(s,r,l),n=o.xLabelFormat(s,n,l),(e.config.xaxis.convertedCatToNumeric&&void 0===r||""===String(r).trim())&&(n=r="1");var h=new p(this.dCtx.ctx),c=h.getTextRects(r,e.config.xaxis.labels.style.fontSize),d=c;if(r!==n&&(d=h.getTextRects(n,e.config.xaxis.labels.style.fontSize)),(t={width:c.width>=d.width?c.width:d.width,height:c.height>=d.height?c.height:d.height}).width*i.length>e.globals.svgWidth-this.dCtx.lgWidthForSideLegends-this.dCtx.yAxisWidth-this.dCtx.gridPad.left-this.dCtx.gridPad.right&&0!==e.config.xaxis.labels.rotate||e.config.xaxis.labels.rotateAlways){if(!e.globals.isBarHorizontal){e.globals.rotateXLabels=!0;var u=function(t){return h.getTextRects(t,e.config.xaxis.labels.style.fontSize,e.config.xaxis.labels.style.fontFamily,"rotate(".concat(e.config.xaxis.labels.rotate," 0 0)"),!1)};c=u(r),r!==n&&(d=u(n)),t.height=(c.height>d.height?c.height:d.height)/1.5,t.width=c.width>d.width?c.width:d.width}}else e.globals.rotateXLabels=!1}return e.config.xaxis.labels.show||(t={width:0,height:0}),{width:t.width,height:t.height}}},{key:"getxAxisTitleCoords",value:function(){var t=this.w,e=0,i=0;if(void 0!==t.config.xaxis.title.text){var a=new p(this.dCtx.ctx).getTextRects(t.config.xaxis.title.text,t.config.xaxis.title.style.fontSize);e=a.width,i=a.height}return{width:e,height:i}}},{key:"getxAxisTimeScaleLabelsCoords",value:function(){var t,e=this.w;this.dCtx.timescaleLabels=e.globals.timescaleLabels.slice();var i=this.dCtx.timescaleLabels.map((function(t){return t.value})),a=i.reduce((function(t,e){return void 0===t?(console.error("You have possibly supplied invalid Date format. Please supply a valid JavaScript Date"),0):t.length>e.length?t:e}),0);return 1.05*(t=new p(this.dCtx.ctx).getTextRects(a,e.config.xaxis.labels.style.fontSize)).width*i.length>e.globals.gridWidth&&0!==e.config.xaxis.labels.rotate&&(e.globals.overlappingXLabels=!0),t}},{key:"additionalPaddingXLabels",value:function(t){var e=this,i=this.w,a=i.globals,s=i.config,r=s.xaxis.type,n=t.width;a.skipLastTimelinelabel=!1,a.skipFirstTimelinelabel=!1;var o=i.config.yaxis[0].opposite&&i.globals.isBarHorizontal,l=function(t,o){(function(t){return-1!==a.collapsedSeriesIndices.indexOf(t)})(o)||("datetime"!==r&&e.dCtx.gridPad.left<n/2-e.dCtx.yAxisWidthLeft&&!a.rotateXLabels&&!s.xaxis.labels.trim&&(e.dCtx.xPadLeft=n/2+1),function(t){if(e.dCtx.timescaleLabels&&e.dCtx.timescaleLabels.length){var s=e.dCtx.timescaleLabels[0],o=e.dCtx.timescaleLabels[e.dCtx.timescaleLabels.length-1].position+n/1.75-e.dCtx.yAxisWidthRight,l=s.position-n/1.75+e.dCtx.yAxisWidthLeft;o>a.gridWidth&&(a.skipLastTimelinelabel=!0),l<0&&(a.skipFirstTimelinelabel=!0)}else"datetime"===r?e.dCtx.gridPad.right<n&&!a.rotateXLabels&&(a.skipLastTimelinelabel=!0):"datetime"!==r&&e.dCtx.gridPad.right<n/2-e.dCtx.yAxisWidthRight&&!a.rotateXLabels&&("between"!==i.config.xaxis.tickPlacement||i.globals.isBarHorizontal)&&(e.dCtx.xPadRight=n/2+1)}())};s.yaxis.forEach((function(t,i){o?(e.dCtx.gridPad.left<n&&(e.dCtx.xPadLeft=n/2+1),e.dCtx.xPadRight=n/2+1):l(0,i)}))}}]),t}(),tt=function(){function t(i){e(this,t),this.w=i.w,this.dCtx=i}return a(t,[{key:"getyAxisLabelsCoords",value:function(){var t=this,e=this.w,i=[],a=10,s=new H(this.dCtx.ctx);return e.config.yaxis.map((function(r,n){if(!s.isYAxisHidden(n)&&r.labels.show&&e.globals.yAxisScale[n].result.length){var o=e.globals.yLabelFormatters[n],l=o(e.globals.yAxisScale[n].niceMax,{seriesIndex:n,dataPointIndex:-1,w:e}),h=l;if(void 0!==l&&0!==l.length||(l=e.globals.yAxisScale[n].niceMax),e.globals.isBarHorizontal){a=0;var c=e.globals.labels.slice();l=o(l=g.getLargestStringFromArr(c),{seriesIndex:n,dataPointIndex:-1,w:e}),h=t.dCtx.dimHelpers.getLargestStringFromMultiArr(l,c)}var d=new p(t.dCtx.ctx),u=d.getTextRects(l,r.labels.style.fontSize),f=u;l!==h&&(f=d.getTextRects(h,r.labels.style.fontSize)),i.push({width:(f.width>u.width?f.width:u.width)+a,height:f.height>u.height?f.height:u.height})}else i.push({width:0,height:0})})),i}},{key:"getyAxisTitleCoords",value:function(){var t=this,e=this.w,i=[];return e.config.yaxis.map((function(e,a){if(e.show&&void 0!==e.title.text){var s=new p(t.dCtx.ctx).getTextRects(e.title.text,e.title.style.fontSize,e.title.style.fontFamily,"rotate(-90 0 0)",!1);i.push({width:s.width,height:s.height})}else i.push({width:0,height:0})})),i}},{key:"getTotalYAxisWidth",value:function(){var t=this.w,e=0,i=0,a=0,s=t.globals.yAxisScale.length>1?10:0,r=new H(this.dCtx.ctx),n=function(n,o){var l=t.config.yaxis[o].floating,h=0;n.width>0&&!l?(h=n.width+s,function(e){return t.globals.ignoreYAxisIndexes.indexOf(e)>-1}(o)&&(h=h-n.width-s)):h=l||r.isYAxisHidden(o)?0:5,t.config.yaxis[o].opposite?a+=h:i+=h,e+=h};return t.globals.yLabelsCoords.map((function(t,e){n(t,e)})),t.globals.yTitleCoords.map((function(t,e){n(t,e)})),t.globals.isBarHorizontal&&(e=t.globals.yLabelsCoords[0].width+t.globals.yTitleCoords[0].width+15),this.dCtx.yAxisWidthLeft=i,this.dCtx.yAxisWidthRight=a,e}}]),t}(),et=function(){function t(i){e(this,t),this.w=i.w,this.dCtx=i}return a(t,[{key:"gridPadForColumnsInNumericAxis",value:function(t){var e=this.w;if(e.globals.noData||e.globals.allSeriesCollapsed)return 0;var i=e.config.chart.type,a=0,s="bar"===i||"rangeBar"===i?e.config.series.length:1;if(e.globals.comboBarCount>0&&(s=e.globals.comboBarCount),e.globals.collapsedSeries.forEach((function(t){"bar"!==t.type&&"rangeBar"!==t.type||(s-=1)})),e.config.chart.stacked&&(s=1),("bar"===i||"rangeBar"===i||e.globals.comboBarCount>0)&&e.globals.isXNumeric&&!e.globals.isBarHorizontal&&s>0){var r,n,o=Math.abs(e.globals.initialMaxX-e.globals.initialMinX);o<=3&&(o=e.globals.dataPoints),r=o/t,e.globals.minXDiff&&e.globals.minXDiff/r>0&&(n=e.globals.minXDiff/r),(a=n/s*parseInt(e.config.plotOptions.bar.columnWidth,10)/100)<1&&(a=1),a=a/(s>1?1:1.5)+5,e.globals.barPadForNumericAxis=a}return a}},{key:"gridPadFortitleSubtitle",value:function(){var t=this,e=this.w,i=e.globals,a=this.dCtx.isSparkline||!e.globals.axisCharts?0:10;["title","subtitle"].forEach((function(i){void 0!==e.config[i].text?a+=e.config[i].margin:a+=t.dCtx.isSparkline||!e.globals.axisCharts?0:5}));var s=e.config.series.length>1||!e.globals.axisCharts||e.config.legend.showForSingleSeries;e.config.legend.show&&"bottom"===e.config.legend.position&&!e.config.legend.floating&&s&&(a+=10);var r=this.dCtx.dimHelpers.getTitleSubtitleCoords("title"),n=this.dCtx.dimHelpers.getTitleSubtitleCoords("subtitle");i.gridHeight=i.gridHeight-r.height-n.height-a,i.translateY=i.translateY+r.height+n.height+a}},{key:"setGridXPosForDualYAxis",value:function(t,e){var i=this.w,a=new H(this.dCtx.ctx);i.config.yaxis.map((function(s,r){-1!==i.globals.ignoreYAxisIndexes.indexOf(r)||s.floating||a.isYAxisHidden(r)||s.opposite&&(i.globals.translateX=i.globals.translateX-(e[r].width+t[r].width)-parseInt(i.config.yaxis[r].labels.style.fontSize,10)/1.2-12)}))}}]),t}(),it=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.lgRect={},this.yAxisWidth=0,this.yAxisWidthLeft=0,this.yAxisWidthRight=0,this.xAxisHeight=0,this.isSparkline=this.w.config.chart.sparkline.enabled,this.dimHelpers=new Q(this),this.dimYAxis=new tt(this),this.dimXAxis=new K(this),this.dimGrid=new et(this),this.lgWidthForSideLegends=0,this.gridPad=this.w.config.grid.padding,this.xPadRight=0,this.xPadLeft=0}return a(t,[{key:"plotCoords",value:function(){var t=this.w.globals;this.lgRect=this.dimHelpers.getLegendsRect(),t.axisCharts?this.setDimensionsForAxisCharts():this.setDimensionsForNonAxisCharts(),this.dimGrid.gridPadFortitleSubtitle(),t.gridHeight=t.gridHeight-this.gridPad.top-this.gridPad.bottom,t.gridWidth=t.gridWidth-this.gridPad.left-this.gridPad.right-this.xPadRight-this.xPadLeft;var e=this.dimGrid.gridPadForColumnsInNumericAxis(t.gridWidth);t.gridWidth=t.gridWidth-2*e,t.translateX=t.translateX+this.gridPad.left+this.xPadLeft+(e>0?e+4:0),t.translateY=t.translateY+this.gridPad.top}},{key:"setDimensionsForAxisCharts",value:function(){var t=this,e=this.w,i=e.globals,a=this.dimYAxis.getyAxisLabelsCoords(),s=this.dimYAxis.getyAxisTitleCoords();e.globals.yLabelsCoords=[],e.globals.yTitleCoords=[],e.config.yaxis.map((function(t,i){e.globals.yLabelsCoords.push({width:a[i].width,index:i}),e.globals.yTitleCoords.push({width:s[i].width,index:i})})),this.yAxisWidth=this.dimYAxis.getTotalYAxisWidth();var r=this.dimXAxis.getxAxisLabelsCoords(),n=this.dimXAxis.getxAxisTitleCoords();this.conditionalChecksForAxisCoords(r,n),i.translateXAxisY=e.globals.rotateXLabels?this.xAxisHeight/8:-4,i.translateXAxisX=e.globals.rotateXLabels&&e.globals.isXNumeric&&e.config.xaxis.labels.rotate<=-45?-this.xAxisWidth/4:0,e.globals.isBarHorizontal&&(i.rotateXLabels=!1,i.translateXAxisY=parseInt(e.config.xaxis.labels.style.fontSize,10)/1.5*-1),i.translateXAxisY=i.translateXAxisY+e.config.xaxis.labels.offsetY,i.translateXAxisX=i.translateXAxisX+e.config.xaxis.labels.offsetX;var o=this.yAxisWidth,l=this.xAxisHeight;i.xAxisLabelsHeight=this.xAxisHeight,i.xAxisHeight=this.xAxisHeight;var h=10;("radar"===e.config.chart.type||this.isSparkline)&&(o=0,l=i.goldenPadding),this.isSparkline&&(this.lgRect={height:0,width:0},l=0,o=0,h=0),this.dimXAxis.additionalPaddingXLabels(r);var c=function(){i.translateX=o,i.gridHeight=i.svgHeight-t.lgRect.height-l-(t.isSparkline?0:e.globals.rotateXLabels?10:15),i.gridWidth=i.svgWidth-o};switch("top"===e.config.xaxis.position&&(h=i.xAxisHeight-e.config.xaxis.axisTicks.height-5),e.config.legend.position){case"bottom":i.translateY=h,c();break;case"top":i.translateY=this.lgRect.height+h,c();break;case"left":i.translateY=h,i.translateX=this.lgRect.width+o,i.gridHeight=i.svgHeight-l-12,i.gridWidth=i.svgWidth-this.lgRect.width-o;break;case"right":i.translateY=h,i.translateX=o,i.gridHeight=i.svgHeight-l-12,i.gridWidth=i.svgWidth-this.lgRect.width-o-5;break;default:throw new Error("Legend position not supported")}this.dimGrid.setGridXPosForDualYAxis(s,a),new G(this.ctx).setYAxisXPosition(a,s)}},{key:"setDimensionsForNonAxisCharts",value:function(){var t=this.w,e=t.globals,i=t.config,a=0;t.config.legend.show&&!t.config.legend.floating&&(a=20);var s="pie"===i.chart.type||"donut"===i.chart.type?"pie":"radialBar",r=i.plotOptions[s].offsetY,n=i.plotOptions[s].offsetX;if(!i.legend.show||i.legend.floating)return e.gridHeight=e.svgHeight-i.grid.padding.left+i.grid.padding.right,e.gridWidth=e.gridHeight,e.translateY=r,void(e.translateX=n+(e.svgWidth-e.gridWidth)/2);switch(i.legend.position){case"bottom":e.gridHeight=e.svgHeight-this.lgRect.height-e.goldenPadding,e.gridWidth=e.gridHeight,e.translateY=r-10,e.translateX=n+(e.svgWidth-e.gridWidth)/2;break;case"top":e.gridHeight=e.svgHeight-this.lgRect.height-e.goldenPadding,e.gridWidth=e.gridHeight,e.translateY=this.lgRect.height+r+10,e.translateX=n+(e.svgWidth-e.gridWidth)/2;break;case"left":e.gridWidth=e.svgWidth-this.lgRect.width-a,e.gridHeight="auto"!==i.chart.height?e.svgHeight:e.gridWidth,e.translateY=r,e.translateX=n+this.lgRect.width+a;break;case"right":e.gridWidth=e.svgWidth-this.lgRect.width-a-5,e.gridHeight="auto"!==i.chart.height?e.svgHeight:e.gridWidth,e.translateY=r,e.translateX=n+10;break;default:throw new Error("Legend position not supported")}}},{key:"conditionalChecksForAxisCoords",value:function(t,e){var i=this.w;this.xAxisHeight=(t.height+e.height)*(i.globals.isMultiLineX?1.2:i.globals.LINE_HEIGHT_RATIO)+(i.globals.rotateXLabels?22:10),this.xAxisWidth=t.width,this.xAxisHeight-e.height>i.config.xaxis.labels.maxHeight&&(this.xAxisHeight=i.config.xaxis.labels.maxHeight),i.config.xaxis.labels.minHeight&&this.xAxisHeight<i.config.xaxis.labels.minHeight&&(this.xAxisHeight=i.config.xaxis.labels.minHeight),i.config.xaxis.floating&&(this.xAxisHeight=0);var a=0,s=0;i.config.yaxis.forEach((function(t){a+=t.labels.minWidth,s+=t.labels.maxWidth})),this.yAxisWidth<a&&(this.yAxisWidth=a),this.yAxisWidth>s&&(this.yAxisWidth=s)}}]),t}(),at=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.chartType=this.w.config.chart.type,this.initialAnim=this.w.config.chart.animations.enabled,this.dynamicAnim=this.initialAnim&&this.w.config.chart.animations.dynamicAnimation.enabled,this.animBeginArr=[0],this.animDur=0,this.donutDataLabels=this.w.config.plotOptions.pie.donut.labels;var a=this.w;this.lineColorArr=void 0!==a.globals.stroke.colors?a.globals.stroke.colors:a.globals.colors,this.defaultSize=a.globals.svgHeight<a.globals.svgWidth?a.globals.gridHeight:a.globals.gridWidth,this.centerY=this.defaultSize/2,this.centerX=a.globals.gridWidth/2,this.fullAngle=360,a.globals.radialSize=this.defaultSize/2.05-a.config.stroke.width-(a.config.chart.sparkline.enabled?0:a.config.chart.dropShadow.blur),this.donutSize=a.globals.radialSize*parseInt(a.config.plotOptions.pie.donut.size,10)/100,this.sliceLabels=[],this.prevSectorAngleArr=[]}return a(t,[{key:"draw",value:function(t){var e=this.w,i=new p(this.ctx),a=i.group({class:"apexcharts-pie"});if(e.globals.noData)return a;for(var s=0,r=0;r<t.length;r++)s+=g.negToZero(t[r]);var n=[],o=i.group();0===s&&(s=1e-5);for(var l=0;l<t.length;l++){var h=this.fullAngle*g.negToZero(t[l])/s;n.push(h)}if(e.globals.dataChanged){for(var c,d=0,u=0;u<e.globals.previousPaths.length;u++)d+=g.negToZero(e.globals.previousPaths[u]);for(var f=0;f<e.globals.previousPaths.length;f++)c=this.fullAngle*g.negToZero(e.globals.previousPaths[f])/d,this.prevSectorAngleArr.push(c)}this.donutSize<0&&(this.donutSize=0);var x=e.config.plotOptions.pie.customScale,b=e.globals.gridWidth/2,m=e.globals.gridHeight/2,v=b-e.globals.gridWidth/2*x,y=m-e.globals.gridHeight/2*x;if("donut"===e.config.chart.type){var w=i.drawCircle(this.donutSize);w.attr({cx:this.centerX,cy:this.centerY,fill:e.config.plotOptions.pie.donut.background?e.config.plotOptions.pie.donut.background:"transparent"}),o.add(w)}var k=this.drawArcs(n,t);if(this.sliceLabels.forEach((function(t){k.add(t)})),o.attr({transform:"translate(".concat(v,", ").concat(y,") scale(").concat(x,")")}),o.add(k),a.add(o),this.donutDataLabels.show){var A=this.renderInnerDataLabels(this.donutDataLabels,{hollowSize:this.donutSize,centerX:this.centerX,centerY:this.centerY,opacity:this.donutDataLabels.show,translateX:v,translateY:y});a.add(A)}return a}},{key:"drawArcs",value:function(t,e){var i=this.w,a=new u(this.ctx),s=new p(this.ctx),r=new M(this.ctx),n=s.group({class:"apexcharts-slices"}),o=0,l=0,h=0,c=0;this.strokeWidth=i.config.stroke.show?i.config.stroke.width:0;for(var d=0;d<t.length;d++){var f=s.group({class:"apexcharts-series apexcharts-pie-series",seriesName:g.escapeString(i.globals.seriesNames[d]),rel:d+1,"data:realIndex":d});n.add(f),l=c,h=(o=h)+t[d],c=l+this.prevSectorAngleArr[d];var x=h-o,b=r.fillPath({seriesNumber:d,size:i.globals.radialSize,value:e[d]}),m=this.getChangedPath(l,c),v=s.drawPath({d:m,stroke:this.lineColorArr instanceof Array?this.lineColorArr[d]:this.lineColorArr,strokeWidth:0,fill:b,fillOpacity:i.config.fill.opacity,classes:"apexcharts-pie-area apexcharts-".concat(i.config.chart.type,"-slice-").concat(d)});if(v.attr({index:0,j:d}),i.config.chart.dropShadow.enabled){var y=i.config.chart.dropShadow;a.dropShadow(v,y,d)}this.addListeners(v,this.donutDataLabels),p.setAttrs(v.node,{"data:angle":x,"data:startAngle":o,"data:strokeWidth":this.strokeWidth,"data:value":e[d]});var w={x:0,y:0};"pie"===i.config.chart.type?w=g.polarToCartesian(this.centerX,this.centerY,i.globals.radialSize/1.25+i.config.plotOptions.pie.dataLabels.offset,o+(h-o)/2):"donut"===i.config.chart.type&&(w=g.polarToCartesian(this.centerX,this.centerY,(i.globals.radialSize+this.donutSize)/2+i.config.plotOptions.pie.dataLabels.offset,o+(h-o)/2)),f.add(v);var k=0;if(!this.initialAnim||i.globals.resized||i.globals.dataChanged?this.animBeginArr.push(0):(0===(k=(h-o)/this.fullAngle*i.config.chart.animations.speed)&&(k=1),this.animDur=k+this.animDur,this.animBeginArr.push(this.animDur)),this.dynamicAnim&&i.globals.dataChanged?this.animatePaths(v,{size:i.globals.radialSize,endAngle:h,startAngle:o,prevStartAngle:l,prevEndAngle:c,animateStartingPos:!0,i:d,animBeginArr:this.animBeginArr,shouldSetPrevPaths:!0,dur:i.config.chart.animations.dynamicAnimation.speed}):this.animatePaths(v,{size:i.globals.radialSize,endAngle:h,startAngle:o,i:d,totalItems:t.length-1,animBeginArr:this.animBeginArr,dur:k}),i.config.plotOptions.pie.expandOnClick&&v.click(this.pieClicked.bind(this,d)),i.config.dataLabels.enabled){var A=w.x,S=w.y,C=100*(h-o)/360+"%";if(0!==x&&i.config.plotOptions.pie.dataLabels.minAngleToShowLabel<t[d]){var L=i.config.dataLabels.formatter;void 0!==L&&(C=L(i.globals.seriesPercent[d][0],{seriesIndex:d,w:i}));var P=i.globals.dataLabels.style.colors[d],T=s.drawText({x:A,y:S,text:C,textAnchor:"middle",fontSize:i.config.dataLabels.style.fontSize,fontFamily:i.config.dataLabels.style.fontFamily,fontWeight:i.config.dataLabels.style.fontWeight,foreColor:P});if(i.config.dataLabels.dropShadow.enabled){var z=i.config.dataLabels.dropShadow;a.dropShadow(T,z)}T.node.classList.add("apexcharts-pie-label"),i.config.chart.animations.animate&&!1===i.globals.resized&&(T.node.classList.add("apexcharts-pie-label-delay"),T.node.style.animationDelay=i.config.chart.animations.speed/940+"s"),this.sliceLabels.push(T)}}}return n}},{key:"addListeners",value:function(t,e){var i=new p(this.ctx);t.node.addEventListener("mouseenter",i.pathMouseEnter.bind(this,t)),t.node.addEventListener("mouseleave",i.pathMouseLeave.bind(this,t)),t.node.addEventListener("mouseleave",this.revertDataLabelsInner.bind(this,t.node,e)),t.node.addEventListener("mousedown",i.pathMouseDown.bind(this,t)),this.donutDataLabels.total.showAlways||(t.node.addEventListener("mouseenter",this.printDataLabelsInner.bind(this,t.node,e)),t.node.addEventListener("mousedown",this.printDataLabelsInner.bind(this,t.node,e)))}},{key:"animatePaths",value:function(t,e){var i=this.w,a=e.endAngle-e.startAngle,s=a,r=e.startAngle,n=e.startAngle;void 0!==e.prevStartAngle&&void 0!==e.prevEndAngle&&(r=e.prevEndAngle,s=e.prevEndAngle-e.prevStartAngle),e.i===i.config.series.length-1&&(a+n>this.fullAngle?e.endAngle=e.endAngle-(a+n):a+n<this.fullAngle&&(e.endAngle=e.endAngle+(this.fullAngle-(a+n)))),a===this.fullAngle&&(a=this.fullAngle-.01),this.animateArc(t,r,n,a,s,e)}},{key:"animateArc",value:function(t,e,i,a,s,r){var n,o=this,l=this.w,h=new f(this.ctx),c=r.size;(isNaN(e)||isNaN(s))&&(e=i,s=a,r.dur=0);var d=a,g=i,u=e-i;l.globals.dataChanged&&r.shouldSetPrevPaths&&r.prevEndAngle&&(n=o.getPiePath({me:o,startAngle:r.prevStartAngle,angle:r.prevEndAngle-r.prevStartAngle,size:c}),t.attr({d:n})),0!==r.dur?t.animate(r.dur,l.globals.easing,r.animBeginArr[r.i]).afterAll((function(){"pie"!==l.config.chart.type&&"donut"!==l.config.chart.type||this.animate(l.config.chart.animations.dynamicAnimation.speed).attr({"stroke-width":o.strokeWidth}),r.i===l.config.series.length-1&&h.animationCompleted(t)})).during((function(l){d=u+(a-u)*l,r.animateStartingPos&&(d=s+(a-s)*l,g=e-s+(i-(e-s))*l),n=o.getPiePath({me:o,startAngle:g,angle:d,size:c}),t.node.setAttribute("data:pathOrig",n),t.attr({d:n})})):(n=o.getPiePath({me:o,startAngle:g,angle:a,size:c}),r.isTrack||(l.globals.animationEnded=!0),t.node.setAttribute("data:pathOrig",n),t.attr({d:n,"stroke-width":o.strokeWidth}))}},{key:"pieClicked",value:function(t){var e,i=this.w,a=this.w.globals.radialSize+(i.config.plotOptions.pie.expandOnClick?4:0),s=i.globals.dom.Paper.select(".apexcharts-".concat(i.config.chart.type.toLowerCase(),"-slice-").concat(t)).members[0];if("true"!==s.attr("data:pieClicked")){var r=i.globals.dom.baseEl.getElementsByClassName("apexcharts-pie-area");Array.prototype.forEach.call(r,(function(t){t.setAttribute("data:pieClicked","false");var e=t.getAttribute("data:pathOrig");t.setAttribute("d",e)})),s.attr("data:pieClicked","true");var n=parseInt(s.attr("data:startAngle"),10),o=parseInt(s.attr("data:angle"),10);e=this.getPiePath({me:this,startAngle:n,angle:o,size:a}),360!==o&&s.plot(e)}else{s.attr({"data:pieClicked":"false"}),this.revertDataLabelsInner(s.node,this.donutDataLabels);var l=s.attr("data:pathOrig");s.attr({d:l})}}},{key:"getChangedPath",value:function(t,e){var i="";return this.dynamicAnim&&this.w.globals.dataChanged&&(i=this.getPiePath({me:this,startAngle:t,angle:e-t,size:this.size})),i}},{key:"getPiePath",value:function(t){var e=t.me,i=t.startAngle,a=t.angle,s=t.size,r=this.w,n=i,o=Math.PI*(n-90)/180,l=a+i;Math.ceil(l)>=360&&(l=359.99);var h=Math.PI*(l-90)/180,c=e.centerX+s*Math.cos(o),d=e.centerY+s*Math.sin(o),u=e.centerX+s*Math.cos(h),f=e.centerY+s*Math.sin(h),p=g.polarToCartesian(e.centerX,e.centerY,e.donutSize,l),x=g.polarToCartesian(e.centerX,e.centerY,e.donutSize,n),b=a>180?1:0,m=["M",c,d,"A",s,s,0,b,1,u,f];return"donut"===r.config.chart.type?[].concat(m,["L",p.x,p.y,"A",e.donutSize,e.donutSize,0,b,0,x.x,x.y,"L",c,d,"z"]).join(" "):"pie"===r.config.chart.type?[].concat(m,["L",e.centerX,e.centerY,"L",c,d]).join(" "):[].concat(m).join(" ")}},{key:"renderInnerDataLabels",value:function(t,e){var i=this.w,a=new p(this.ctx),s=a.group({class:"apexcharts-datalabels-group",transform:"translate(".concat(e.translateX?e.translateX:0,", ").concat(e.translateY?e.translateY:0,") scale(").concat(i.config.plotOptions.pie.customScale,")")}),r=t.total.show;s.node.style.opacity=e.opacity;var n,o,l=e.centerX,h=e.centerY;n=void 0===t.name.color?i.globals.colors[0]:t.name.color;var c=t.name.fontSize,d=t.name.fontFamily,g=t.value.fontWeight;o=void 0===t.value.color?i.config.chart.foreColor:t.value.color;var u=t.value.formatter,f="",x="";if(r?(n=t.total.color,c=t.total.fontSize,d=t.total.fontFamily,g=t.total.fontWeight,x=t.total.label,f=t.total.formatter(i)):1===i.globals.series.length&&(f=u(i.globals.series[0],i),x=i.globals.seriesNames[0]),x&&(x=t.name.formatter(x,t.total.show,i)),t.name.show){var b=a.drawText({x:l,y:h+parseFloat(t.name.offsetY),text:x,textAnchor:"middle",foreColor:n,fontSize:c,fontWeight:g,fontFamily:d});b.node.classList.add("apexcharts-datalabel-label"),s.add(b)}if(t.value.show){var m=t.name.show?parseFloat(t.value.offsetY)+16:t.value.offsetY,v=a.drawText({x:l,y:h+m,text:f,textAnchor:"middle",foreColor:o,fontWeight:t.value.fontWeight,fontSize:t.value.fontSize,fontFamily:t.value.fontFamily});v.node.classList.add("apexcharts-datalabel-value"),s.add(v)}return s}},{key:"printInnerLabels",value:function(t,e,i,a){var s,r=this.w;a?s=void 0===t.name.color?r.globals.colors[parseInt(a.parentNode.getAttribute("rel"),10)-1]:t.name.color:r.globals.series.length>1&&t.total.show&&(s=t.total.color);var n=r.globals.dom.baseEl.querySelector(".apexcharts-datalabel-label"),o=r.globals.dom.baseEl.querySelector(".apexcharts-datalabel-value");i=(0,t.value.formatter)(i,r),a||"function"!=typeof t.total.formatter||(i=t.total.formatter(r));var l=e===t.total.label;e=t.name.formatter(e,l,r),null!==n&&(n.textContent=e),null!==o&&(o.textContent=i),null!==n&&(n.style.fill=s)}},{key:"printDataLabelsInner",value:function(t,e){var i=this.w,a=t.getAttribute("data:value"),s=i.globals.seriesNames[parseInt(t.parentNode.getAttribute("rel"),10)-1];i.globals.series.length>1&&this.printInnerLabels(e,s,a,t);var r=i.globals.dom.baseEl.querySelector(".apexcharts-datalabels-group");null!==r&&(r.style.opacity=1)}},{key:"revertDataLabelsInner",value:function(t,e,i){var a=this,s=this.w,r=s.globals.dom.baseEl.querySelector(".apexcharts-datalabels-group"),n=!1,o=s.globals.dom.baseEl.getElementsByClassName("apexcharts-pie-area"),l=function(t){var i=t.makeSliceOut,s=t.printLabel;Array.prototype.forEach.call(o,(function(t){"true"===t.getAttribute("data:pieClicked")&&(i&&(n=!0),s&&a.printDataLabelsInner(t,e))}))};if(l({makeSliceOut:!0,printLabel:!1}),e.total.show&&s.globals.series.length>1)n&&!e.total.showAlways?l({makeSliceOut:!1,printLabel:!0}):this.printInnerLabels(e,e.total.label,e.total.formatter(s));else if(l({makeSliceOut:!1,printLabel:!0}),!n)if(s.globals.selectedDataPoints.length&&s.globals.series.length>1)if(s.globals.selectedDataPoints[0].length>0){var h=s.globals.selectedDataPoints[0],c=s.globals.dom.baseEl.querySelector(".apexcharts-".concat(s.config.chart.type.toLowerCase(),"-slice-").concat(h));this.printDataLabelsInner(c,e)}else r&&s.globals.selectedDataPoints.length&&0===s.globals.selectedDataPoints[0].length&&(r.style.opacity=0);else r&&s.globals.series.length>1&&(r.style.opacity=0)}}]),t}(),st=function(){function t(i){e(this,t),this.w=i.w,this.lgCtx=i}return a(t,[{key:"getLegendStyles",value:function(){var t=document.createElement("style");t.setAttribute("type","text/css");var e=document.createTextNode("\t\n    \t\n      .apexcharts-legend {\t\n        display: flex;\t\n        overflow: auto;\t\n        padding: 0 10px;\t\n      }\t\n      .apexcharts-legend.position-bottom, .apexcharts-legend.position-top {\t\n        flex-wrap: wrap\t\n      }\t\n      .apexcharts-legend.position-right, .apexcharts-legend.position-left {\t\n        flex-direction: column;\t\n        bottom: 0;\t\n      }\t\n      .apexcharts-legend.position-bottom.apexcharts-align-left, .apexcharts-legend.position-top.apexcharts-align-left, .apexcharts-legend.position-right, .apexcharts-legend.position-left {\t\n        justify-content: flex-start;\t\n      }\t\n      .apexcharts-legend.position-bottom.apexcharts-align-center, .apexcharts-legend.position-top.apexcharts-align-center {\t\n        justify-content: center;  \t\n      }\t\n      .apexcharts-legend.position-bottom.apexcharts-align-right, .apexcharts-legend.position-top.apexcharts-align-right {\t\n        justify-content: flex-end;\t\n      }\t\n      .apexcharts-legend-series {\t\n        cursor: pointer;\t\n        line-height: normal;\t\n      }\t\n      .apexcharts-legend.position-bottom .apexcharts-legend-series, .apexcharts-legend.position-top .apexcharts-legend-series{\t\n        display: flex;\t\n        align-items: center;\t\n      }\t\n      .apexcharts-legend-text {\t\n        position: relative;\t\n        font-size: 14px;\t\n      }\t\n      .apexcharts-legend-text *, .apexcharts-legend-marker * {\t\n        pointer-events: none;\t\n      }\t\n      .apexcharts-legend-marker {\t\n        position: relative;\t\n        display: inline-block;\t\n        cursor: pointer;\t\n        margin-right: 3px;\t\n        border-style: solid;\n      }\t\n      \t\n      .apexcharts-legend.apexcharts-align-right .apexcharts-legend-series, .apexcharts-legend.apexcharts-align-left .apexcharts-legend-series{\t\n        display: inline-block;\t\n      }\t\n      .apexcharts-legend-series.apexcharts-no-click {\t\n        cursor: auto;\t\n      }\t\n      .apexcharts-legend .apexcharts-hidden-zero-series, .apexcharts-legend .apexcharts-hidden-null-series {\t\n        display: none !important;\t\n      }\t\n      .apexcharts-inactive-legend {\t\n        opacity: 0.45;\t\n      }");return t.appendChild(e),t}},{key:"getLegendBBox",value:function(){var t=this.w.globals.dom.baseEl.querySelector(".apexcharts-legend").getBoundingClientRect(),e=t.width;return{clwh:t.height,clww:e}}},{key:"appendToForeignObject",value:function(){var t=this.w.globals;t.dom.elLegendForeign=document.createElementNS(t.SVGNS,"foreignObject");var e=t.dom.elLegendForeign;e.setAttribute("x",0),e.setAttribute("y",0),e.setAttribute("width",t.svgWidth),e.setAttribute("height",t.svgHeight),t.dom.elLegendWrap.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),e.appendChild(t.dom.elLegendWrap),e.appendChild(this.getLegendStyles()),t.dom.Paper.node.insertBefore(e,t.dom.elGraphical.node)}},{key:"toggleDataSeries",value:function(t,e){var i=this,a=this.w;if(a.globals.axisCharts||"radialBar"===a.config.chart.type){a.globals.resized=!0;var s=null,r=null;if(a.globals.risingSeries=[],a.globals.axisCharts?(s=a.globals.dom.baseEl.querySelector(".apexcharts-series[data\\:realIndex='".concat(t,"']")),r=parseInt(s.getAttribute("data:realIndex"),10)):(s=a.globals.dom.baseEl.querySelector(".apexcharts-series[rel='".concat(t+1,"']")),r=parseInt(s.getAttribute("rel"),10)-1),e)[{cs:a.globals.collapsedSeries,csi:a.globals.collapsedSeriesIndices},{cs:a.globals.ancillaryCollapsedSeries,csi:a.globals.ancillaryCollapsedSeriesIndices}].forEach((function(t){i.riseCollapsedSeries(t.cs,t.csi,r)}));else this.hideSeries({seriesEl:s,realIndex:r})}else{var n=a.globals.dom.Paper.select(" .apexcharts-series[rel='".concat(t+1,"'] path")),o=a.config.chart.type;if("pie"===o||"donut"===o){var l=a.config.plotOptions.pie.donut.labels,h=new p(this.lgCtx.ctx),c=new at(this.lgCtx.ctx);h.pathMouseDown(n.members[0],null),c.printDataLabelsInner(n.members[0].node,l)}n.fire("click")}}},{key:"hideSeries",value:function(t){var e=t.seriesEl,i=t.realIndex,a=this.w;if(a.globals.axisCharts){var s=!1;if(a.config.yaxis[i]&&a.config.yaxis[i].show&&a.config.yaxis[i].showAlways&&(s=!0,a.globals.ancillaryCollapsedSeriesIndices.indexOf(i)<0&&(a.globals.ancillaryCollapsedSeries.push({index:i,data:a.config.series[i].data.slice(),type:e.parentNode.className.baseVal.split("-")[1]}),a.globals.ancillaryCollapsedSeriesIndices.push(i))),!s){a.globals.collapsedSeries.push({index:i,data:a.config.series[i].data.slice(),type:e.parentNode.className.baseVal.split("-")[1]}),a.globals.collapsedSeriesIndices.push(i);var r=a.globals.risingSeries.indexOf(i);a.globals.risingSeries.splice(r,1)}a.config.series[i].data=[]}else a.globals.collapsedSeries.push({index:i,data:a.config.series[i]}),a.globals.collapsedSeriesIndices.push(i),a.config.series[i]=0;for(var n=e.childNodes,o=0;o<n.length;o++)n[o].classList.contains("apexcharts-series-markers-wrap")&&(n[o].classList.contains("apexcharts-hide")?n[o].classList.remove("apexcharts-hide"):n[o].classList.add("apexcharts-hide"));a.globals.allSeriesCollapsed=a.globals.collapsedSeries.length===a.config.series.length,this.lgCtx.ctx.updateHelpers._updateSeries(a.config.series,a.config.chart.animations.dynamicAnimation.enabled)}},{key:"riseCollapsedSeries",value:function(t,e,i){var a=this.w;if(t.length>0)for(var s=0;s<t.length;s++)t[s].index===i&&(a.globals.axisCharts?(a.config.series[i].data=t[s].data.slice(),t.splice(s,1),e.splice(s,1),a.globals.risingSeries.push(i)):(a.config.series[i]=t[s].data,t.splice(s,1),e.splice(s,1),a.globals.risingSeries.push(i)),this.lgCtx.ctx.updateHelpers._updateSeries(a.config.series,a.config.chart.animations.dynamicAnimation.enabled))}}]),t}(),rt=function(){function t(i,a){e(this,t),this.ctx=i,this.w=i.w,this.onLegendClick=this.onLegendClick.bind(this),this.onLegendHovered=this.onLegendHovered.bind(this),this.isBarsDistributed="bar"===this.w.config.chart.type&&this.w.config.plotOptions.bar.distributed&&1===this.w.config.series.length,this.legendHelpers=new st(this)}return a(t,[{key:"init",value:function(){var t=this.w,e=t.globals,i=t.config;if((i.legend.showForSingleSeries&&1===e.series.length||this.isBarsDistributed||e.series.length>1||!e.axisCharts)&&i.legend.show){for(;e.dom.elLegendWrap.firstChild;)e.dom.elLegendWrap.removeChild(e.dom.elLegendWrap.firstChild);this.drawLegends(),g.isIE11()?document.getElementsByTagName("head")[0].appendChild(this.legendHelpers.getLegendStyles()):this.legendHelpers.appendToForeignObject(),"bottom"===i.legend.position||"top"===i.legend.position?this.legendAlignHorizontal():"right"!==i.legend.position&&"left"!==i.legend.position||this.legendAlignVertical()}}},{key:"drawLegends",value:function(){var t=this.w,e=t.config.legend.fontFamily,i=t.globals.seriesNames,a=t.globals.colors.slice();if("heatmap"===t.config.chart.type){var s=t.config.plotOptions.heatmap.colorScale.ranges;i=s.map((function(t){return t.name?t.name:t.from+" - "+t.to})),a=s.map((function(t){return t.color}))}else this.isBarsDistributed&&(i=t.globals.labels.slice());for(var r=t.globals.legendFormatter,n=t.config.legend.inverseOrder,o=n?i.length-1:0;n?o>=0:o<=i.length-1;n?o--:o++){var l=r(i[o],{seriesIndex:o,w:t}),h=!1,c=!1;if(t.globals.collapsedSeries.length>0)for(var d=0;d<t.globals.collapsedSeries.length;d++)t.globals.collapsedSeries[d].index===o&&(h=!0);if(t.globals.ancillaryCollapsedSeriesIndices.length>0)for(var g=0;g<t.globals.ancillaryCollapsedSeriesIndices.length;g++)t.globals.ancillaryCollapsedSeriesIndices[g]===o&&(c=!0);var u=document.createElement("span");u.classList.add("apexcharts-legend-marker");var f=t.config.legend.markers.offsetX,x=t.config.legend.markers.offsetY,b=t.config.legend.markers.height,m=t.config.legend.markers.width,v=t.config.legend.markers.strokeWidth,y=t.config.legend.markers.strokeColor,w=t.config.legend.markers.radius,k=u.style;k.background=a[o],k.color=a[o],t.config.legend.markers.fillColors&&t.config.legend.markers.fillColors[o]&&(k.background=t.config.legend.markers.fillColors[o]),k.height=Array.isArray(b)?parseFloat(b[o])+"px":parseFloat(b)+"px",k.width=Array.isArray(m)?parseFloat(m[o])+"px":parseFloat(m)+"px",k.left=Array.isArray(f)?f[o]:f,k.top=Array.isArray(x)?x[o]:x,k.borderWidth=Array.isArray(v)?v[o]:v,k.borderColor=Array.isArray(y)?y[o]:y,k.borderRadius=Array.isArray(w)?parseFloat(w[o])+"px":parseFloat(w)+"px",t.config.legend.markers.customHTML&&(Array.isArray(t.config.legend.markers.customHTML)?u.innerHTML=t.config.legend.markers.customHTML[o]():u.innerHTML=t.config.legend.markers.customHTML()),p.setAttrs(u,{rel:o+1,"data:collapsed":h||c}),(h||c)&&u.classList.add("apexcharts-inactive-legend");var A=document.createElement("div"),S=document.createElement("span");S.classList.add("apexcharts-legend-text"),S.innerHTML=Array.isArray(l)?l.join(" "):l;var C=t.config.legend.labels.useSeriesColors?t.globals.colors[o]:t.config.legend.labels.colors;C||(C=t.config.chart.foreColor),S.style.color=C,S.style.fontSize=parseFloat(t.config.legend.fontSize)+"px",S.style.fontWeight=t.config.legend.fontWeight,S.style.fontFamily=e||t.config.chart.fontFamily,p.setAttrs(S,{rel:o+1,i:o,"data:default-text":encodeURIComponent(l),"data:collapsed":h||c}),A.appendChild(u),A.appendChild(S);var L=new I(this.ctx);if(!t.config.legend.showForZeroSeries)0===L.getSeriesTotalByIndex(o)&&L.seriesHaveSameValues(o)&&!L.isSeriesNull(o)&&-1===t.globals.collapsedSeriesIndices.indexOf(o)&&-1===t.globals.ancillaryCollapsedSeriesIndices.indexOf(o)&&A.classList.add("apexcharts-hidden-zero-series");t.config.legend.showForNullSeries||L.isSeriesNull(o)&&-1===t.globals.collapsedSeriesIndices.indexOf(o)&&-1===t.globals.ancillaryCollapsedSeriesIndices.indexOf(o)&&A.classList.add("apexcharts-hidden-null-series"),t.globals.dom.elLegendWrap.appendChild(A),t.globals.dom.elLegendWrap.classList.add("apexcharts-align-".concat(t.config.legend.horizontalAlign)),t.globals.dom.elLegendWrap.classList.add("position-"+t.config.legend.position),A.classList.add("apexcharts-legend-series"),A.style.margin="".concat(t.config.legend.itemMargin.vertical,"px ").concat(t.config.legend.itemMargin.horizontal,"px"),t.globals.dom.elLegendWrap.style.width=t.config.legend.width?t.config.legend.width+"px":"",t.globals.dom.elLegendWrap.style.height=t.config.legend.height?t.config.legend.height+"px":"",p.setAttrs(A,{rel:o+1,"data:collapsed":h||c}),(h||c)&&A.classList.add("apexcharts-inactive-legend"),t.config.legend.onItemClick.toggleDataSeries||A.classList.add("apexcharts-no-click")}"heatmap"!==t.config.chart.type&&!this.isBarsDistributed&&t.config.legend.onItemClick.toggleDataSeries&&t.globals.dom.elWrap.addEventListener("click",this.onLegendClick,!0),t.config.legend.onItemHover.highlightDataSeries&&(t.globals.dom.elWrap.addEventListener("mousemove",this.onLegendHovered,!0),t.globals.dom.elWrap.addEventListener("mouseout",this.onLegendHovered,!0))}},{key:"setLegendWrapXY",value:function(t,e){var i=this.w,a=i.globals.dom.baseEl.querySelector(".apexcharts-legend"),s=a.getBoundingClientRect(),r=0,n=0;if("bottom"===i.config.legend.position)n+=i.globals.svgHeight-s.height/2;else if("top"===i.config.legend.position){var o=new it(this.ctx),l=o.dimHelpers.getTitleSubtitleCoords("title").height,h=o.dimHelpers.getTitleSubtitleCoords("subtitle").height;n=n+(l>0?l-10:0)+(h>0?h-10:0)}a.style.position="absolute",r=r+t+i.config.legend.offsetX,n=n+e+i.config.legend.offsetY,a.style.left=r+"px",a.style.top=n+"px","bottom"===i.config.legend.position?(a.style.top="auto",a.style.bottom=5-i.config.legend.offsetY+"px"):"right"===i.config.legend.position&&(a.style.left="auto",a.style.right=25+i.config.legend.offsetX+"px");["width","height"].forEach((function(t){a.style[t]&&(a.style[t]=parseInt(i.config.legend[t],10)+"px")}))}},{key:"legendAlignHorizontal",value:function(){var t=this.w;t.globals.dom.baseEl.querySelector(".apexcharts-legend").style.right=0;var e=this.legendHelpers.getLegendBBox(),i=new it(this.ctx),a=i.dimHelpers.getTitleSubtitleCoords("title"),s=i.dimHelpers.getTitleSubtitleCoords("subtitle"),r=0;"bottom"===t.config.legend.position?r=-e.clwh/1.8:"top"===t.config.legend.position&&(r=a.height+s.height+t.config.title.margin+t.config.subtitle.margin-10),this.setLegendWrapXY(20,r)}},{key:"legendAlignVertical",value:function(){var t=this.w,e=this.legendHelpers.getLegendBBox(),i=0;"left"===t.config.legend.position&&(i=20),"right"===t.config.legend.position&&(i=t.globals.svgWidth-e.clww-10),this.setLegendWrapXY(i,20)}},{key:"onLegendHovered",value:function(t){var e=this.w,i=t.target.classList.contains("apexcharts-legend-text")||t.target.classList.contains("apexcharts-legend-marker");if("heatmap"===e.config.chart.type||this.isBarsDistributed){if(i){var a=parseInt(t.target.getAttribute("rel"),10)-1;this.ctx.events.fireEvent("legendHover",[this.ctx,a,this.w]),new F(this.ctx).highlightRangeInSeries(t,t.target)}}else!t.target.classList.contains("apexcharts-inactive-legend")&&i&&new F(this.ctx).toggleSeriesOnHover(t,t.target)}},{key:"onLegendClick",value:function(t){if(t.target.classList.contains("apexcharts-legend-text")||t.target.classList.contains("apexcharts-legend-marker")){var e=parseInt(t.target.getAttribute("rel"),10)-1,i="true"===t.target.getAttribute("data:collapsed"),a=this.w.config.chart.events.legendClick;"function"==typeof a&&a(this.ctx,e,this.w),this.ctx.events.fireEvent("legendClick",[this.ctx,e,this.w]);var s=this.w.config.legend.markers.onClick;"function"==typeof s&&t.target.classList.contains("apexcharts-legend-marker")&&(s(this.ctx,e,this.w),this.ctx.events.fireEvent("legendMarkerClick",[this.ctx,e,this.w])),this.legendHelpers.toggleDataSeries(e,i)}}}]),t}(),nt=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.ev=this.w.config.chart.events,this.selectedClass="apexcharts-selected",this.localeValues=this.w.globals.locale.toolbar}return a(t,[{key:"createToolbar",value:function(){var t=this,e=this.w,i=function(){return document.createElement("div")},a=i();if(a.setAttribute("class","apexcharts-toolbar"),a.style.top=e.config.chart.toolbar.offsetY+"px",a.style.right=3-e.config.chart.toolbar.offsetX+"px",e.globals.dom.elWrap.appendChild(a),this.elZoom=i(),this.elZoomIn=i(),this.elZoomOut=i(),this.elPan=i(),this.elSelection=i(),this.elZoomReset=i(),this.elMenuIcon=i(),this.elMenu=i(),this.elCustomIcons=[],this.t=e.config.chart.toolbar.tools,Array.isArray(this.t.customIcons))for(var s=0;s<this.t.customIcons.length;s++)this.elCustomIcons.push(i());var r=[],n=function(i,a,s){var n=i.toLowerCase();t.t[n]&&e.config.chart.zoom.enabled&&r.push({el:a,icon:"string"==typeof t.t[n]?t.t[n]:s,title:t.localeValues[i],class:"apexcharts-".concat(n,"-icon")})};n("zoomIn",this.elZoomIn,'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">\n    <path d="M0 0h24v24H0z" fill="none"/>\n    <path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>\n</svg>\n'),n("zoomOut",this.elZoomOut,'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">\n    <path d="M0 0h24v24H0z" fill="none"/>\n    <path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>\n</svg>\n');var o=function(i){t.t[i]&&e.config.chart[i].enabled&&r.push({el:"zoom"===i?t.elZoom:t.elSelection,icon:"string"==typeof t.t[i]?t.t[i]:"zoom"===i?'<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="24" viewBox="0 0 24 24" width="24">\n    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>\n    <path d="M0 0h24v24H0V0z" fill="none"/>\n    <path d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"/>\n</svg>':'<svg fill="#6E8192" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n    <path d="M0 0h24v24H0z" fill="none"/>\n    <path d="M3 5h2V3c-1.1 0-2 .9-2 2zm0 8h2v-2H3v2zm4 8h2v-2H7v2zM3 9h2V7H3v2zm10-6h-2v2h2V3zm6 0v2h2c0-1.1-.9-2-2-2zM5 21v-2H3c0 1.1.9 2 2 2zm-2-4h2v-2H3v2zM9 3H7v2h2V3zm2 18h2v-2h-2v2zm8-8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2zm0-12h2V7h-2v2zm0 8h2v-2h-2v2zm-4 4h2v-2h-2v2zm0-16h2V3h-2v2z"/>\n</svg>',title:t.localeValues["zoom"===i?"selectionZoom":"selection"],class:e.globals.isTouchDevice?"apexcharts-element-hidden":"apexcharts-".concat(i,"-icon")})};o("zoom"),o("selection"),this.t.pan&&e.config.chart.zoom.enabled&&r.push({el:this.elPan,icon:"string"==typeof this.t.pan?this.t.pan:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" height="24" viewBox="0 0 24 24" width="24">\n    <defs>\n        <path d="M0 0h24v24H0z" id="a"/>\n    </defs>\n    <clipPath id="b">\n        <use overflow="visible" xlink:href="#a"/>\n    </clipPath>\n    <path clip-path="url(#b)" d="M23 5.5V20c0 2.2-1.8 4-4 4h-7.3c-1.08 0-2.1-.43-2.85-1.19L1 14.83s1.26-1.23 1.3-1.25c.22-.19.49-.29.79-.29.22 0 .42.06.6.16.04.01 4.31 2.46 4.31 2.46V4c0-.83.67-1.5 1.5-1.5S11 3.17 11 4v7h1V1.5c0-.83.67-1.5 1.5-1.5S15 .67 15 1.5V11h1V2.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5V11h1V5.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5z"/>\n</svg>',title:this.localeValues.pan,class:e.globals.isTouchDevice?"apexcharts-element-hidden":"apexcharts-pan-icon"}),n("reset",this.elZoomReset,'<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>\n    <path d="M0 0h24v24H0z" fill="none"/>\n</svg>'),this.t.download&&r.push({el:this.elMenuIcon,icon:"string"==typeof this.t.download?this.t.download:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>',title:this.localeValues.menu,class:"apexcharts-menu-icon"});for(var l=0;l<this.elCustomIcons.length;l++)r.push({el:this.elCustomIcons[l],icon:this.t.customIcons[l].icon,title:this.t.customIcons[l].title,index:this.t.customIcons[l].index,class:"apexcharts-toolbar-custom-icon "+this.t.customIcons[l].class});r.forEach((function(t,e){t.index&&g.moveIndexInArray(r,e,t.index)}));for(var h=0;h<r.length;h++)p.setAttrs(r[h].el,{class:r[h].class,title:r[h].title}),r[h].el.innerHTML=r[h].icon,a.appendChild(r[h].el);this._createHamburgerMenu(a),e.globals.zoomEnabled?this.elZoom.classList.add(this.selectedClass):e.globals.panEnabled?this.elPan.classList.add(this.selectedClass):e.globals.selectionEnabled&&this.elSelection.classList.add(this.selectedClass),this.addToolbarEventListeners()}},{key:"_createHamburgerMenu",value:function(t){this.elMenuItems=[],t.appendChild(this.elMenu),p.setAttrs(this.elMenu,{class:"apexcharts-menu"});var e=[{name:"exportSVG",title:this.localeValues.exportToSVG},{name:"exportPNG",title:this.localeValues.exportToPNG},{name:"exportCSV",title:this.localeValues.exportToCSV}];this.w.globals.allSeriesHasEqualX||e.splice(2,1);for(var i=0;i<e.length;i++)this.elMenuItems.push(document.createElement("div")),this.elMenuItems[i].innerHTML=e[i].title,p.setAttrs(this.elMenuItems[i],{class:"apexcharts-menu-item ".concat(e[i].name),title:e[i].title}),this.elMenu.appendChild(this.elMenuItems[i])}},{key:"addToolbarEventListeners",value:function(){var t=this;this.elZoomReset.addEventListener("click",this.handleZoomReset.bind(this)),this.elSelection.addEventListener("click",this.toggleZoomSelection.bind(this,"selection")),this.elZoom.addEventListener("click",this.toggleZoomSelection.bind(this,"zoom")),this.elZoomIn.addEventListener("click",this.handleZoomIn.bind(this)),this.elZoomOut.addEventListener("click",this.handleZoomOut.bind(this)),this.elPan.addEventListener("click",this.togglePanning.bind(this)),this.elMenuIcon.addEventListener("click",this.toggleMenu.bind(this)),this.elMenuItems.forEach((function(e){e.classList.contains("exportSVG")?e.addEventListener("click",t.handleDownload.bind(t,"svg")):e.classList.contains("exportPNG")?e.addEventListener("click",t.handleDownload.bind(t,"png")):e.classList.contains("exportCSV")&&e.addEventListener("click",t.handleDownload.bind(t,"csv"))}));for(var e=0;e<this.t.customIcons.length;e++)this.elCustomIcons[e].addEventListener("click",this.t.customIcons[e].click.bind(this,this.ctx,this.ctx.w))}},{key:"toggleZoomSelection",value:function(t){this.toggleOtherControls();var e="selection"===t?this.elSelection:this.elZoom,i="selection"===t?"selectionEnabled":"zoomEnabled";this.w.globals[i]=!this.w.globals[i],e.classList.contains(this.selectedClass)?e.classList.remove(this.selectedClass):e.classList.add(this.selectedClass)}},{key:"getToolbarIconsReference",value:function(){var t=this.w;this.elZoom||(this.elZoom=t.globals.dom.baseEl.querySelector(".apexcharts-zoom-icon")),this.elPan||(this.elPan=t.globals.dom.baseEl.querySelector(".apexcharts-pan-icon")),this.elSelection||(this.elSelection=t.globals.dom.baseEl.querySelector(".apexcharts-selection-icon"))}},{key:"enableZoomPanFromToolbar",value:function(t){this.toggleOtherControls(),"pan"===t?this.w.globals.panEnabled=!0:this.w.globals.zoomEnabled=!0;var e="pan"===t?this.elPan:this.elZoom,i="pan"===t?this.elZoom:this.elPan;e&&e.classList.add(this.selectedClass),i&&i.classList.remove(this.selectedClass)}},{key:"togglePanning",value:function(){this.toggleOtherControls(),this.w.globals.panEnabled=!this.w.globals.panEnabled,this.elPan.classList.contains(this.selectedClass)?this.elPan.classList.remove(this.selectedClass):this.elPan.classList.add(this.selectedClass)}},{key:"toggleOtherControls",value:function(){var t=this,e=this.w;e.globals.panEnabled=!1,e.globals.zoomEnabled=!1,e.globals.selectionEnabled=!1,this.getToolbarIconsReference(),[this.elPan,this.elSelection,this.elZoom].forEach((function(e){e&&e.classList.remove(t.selectedClass)}))}},{key:"handleZoomIn",value:function(){var t=this.w,e=(t.globals.minX+t.globals.maxX)/2,i=(t.globals.minX+e)/2,a=(t.globals.maxX+e)/2,s=this._getNewMinXMaxX(i,a);t.globals.disableZoomIn||this.zoomUpdateOptions(s.minX,s.maxX)}},{key:"handleZoomOut",value:function(){var t=this.w;if(!("datetime"===t.config.xaxis.type&&new Date(t.globals.minX).getUTCFullYear()<1e3)){var e=(t.globals.minX+t.globals.maxX)/2,i=t.globals.minX-(e-t.globals.minX),a=t.globals.maxX-(e-t.globals.maxX),s=this._getNewMinXMaxX(i,a);t.globals.disableZoomOut||this.zoomUpdateOptions(s.minX,s.maxX)}}},{key:"_getNewMinXMaxX",value:function(t,e){var i=this.w.config.xaxis.convertedCatToNumeric;return{minX:i?Math.floor(t):t,maxX:i?Math.floor(e):e}}},{key:"zoomUpdateOptions",value:function(t,e){var i=this.w;if(!(i.config.xaxis.convertedCatToNumeric&&(t<1&&(t=1,e=i.globals.dataPoints),e-t<2))){var a={min:t,max:e},s=this.getBeforeZoomRange(a);s&&(a=s.xaxis);var r={xaxis:a},n=g.clone(i.globals.initialConfig.yaxis);if(i.config.chart.zoom.autoScaleYaxis)n=new B(this.ctx).autoScaleY(this.ctx,n,{xaxis:a});i.config.chart.group||(r.yaxis=n),this.w.globals.zoomed=!0,this.ctx.updateHelpers._updateOptions(r,!1,this.w.config.chart.animations.dynamicAnimation.enabled),this.zoomCallback(a,n)}}},{key:"zoomCallback",value:function(t,e){"function"==typeof this.ev.zoomed&&this.ev.zoomed(this.ctx,{xaxis:t,yaxis:e})}},{key:"getBeforeZoomRange",value:function(t,e){var i=null;return"function"==typeof this.ev.beforeZoom&&(i=this.ev.beforeZoom(this,{xaxis:t,yaxis:e})),i}},{key:"toggleMenu",value:function(){var t=this;window.setTimeout((function(){t.elMenu.classList.contains("apexcharts-menu-open")?t.elMenu.classList.remove("apexcharts-menu-open"):t.elMenu.classList.add("apexcharts-menu-open")}),0)}},{key:"handleDownload",value:function(t){var e=this.w,i=new N(this.ctx);switch(t){case"svg":i.exportToSVG(this.ctx);break;case"png":i.exportToPng(this.ctx);break;case"csv":i.exportToCSV({series:e.config.series})}}},{key:"handleZoomReset",value:function(t){var e=this;this.ctx.getSyncedCharts().forEach((function(t){var i=t.w;i.globals.minX===i.globals.initialMinX&&i.globals.maxX===i.globals.initialMaxX||(t.updateHelpers.revertDefaultAxisMinMax(),"function"==typeof i.config.chart.events.zoomed&&e.zoomCallback({min:i.config.xaxis.min,max:i.config.xaxis.max}),i.globals.zoomed=!1,t.updateHelpers._updateSeries(i.globals.initialSeries,i.config.chart.animations.dynamicAnimation.enabled))}))}},{key:"destroy",value:function(){this.elZoom=null,this.elZoomIn=null,this.elZoomOut=null,this.elPan=null,this.elSelection=null,this.elZoomReset=null,this.elMenuIcon=null}}]),t}(),ot=function(t){function i(t){var a;return e(this,i),(a=c(this,l(i).call(this,t))).ctx=t,a.w=t.w,a.dragged=!1,a.graphics=new p(a.ctx),a.eventList=["mousedown","mouseleave","mousemove","touchstart","touchmove","mouseup","touchend"],a.clientX=0,a.clientY=0,a.startX=0,a.endX=0,a.dragX=0,a.startY=0,a.endY=0,a.dragY=0,a.moveDirection="none",a}return o(i,t),a(i,[{key:"init",value:function(t){var e=this,i=t.xyRatios,a=this.w,s=this;this.xyRatios=i,this.zoomRect=this.graphics.drawRect(0,0,0,0),this.selectionRect=this.graphics.drawRect(0,0,0,0),this.gridRect=a.globals.dom.baseEl.querySelector(".apexcharts-grid"),this.zoomRect.node.classList.add("apexcharts-zoom-rect"),this.selectionRect.node.classList.add("apexcharts-selection-rect"),a.globals.dom.elGraphical.add(this.zoomRect),a.globals.dom.elGraphical.add(this.selectionRect),"x"===a.config.chart.selection.type?this.slDraggableRect=this.selectionRect.draggable({minX:0,minY:0,maxX:a.globals.gridWidth,maxY:a.globals.gridHeight}).on("dragmove",this.selectionDragging.bind(this,"dragging")):"y"===a.config.chart.selection.type?this.slDraggableRect=this.selectionRect.draggable({minX:0,maxX:a.globals.gridWidth}).on("dragmove",this.selectionDragging.bind(this,"dragging")):this.slDraggableRect=this.selectionRect.draggable().on("dragmove",this.selectionDragging.bind(this,"dragging")),this.preselectedSelection(),this.hoverArea=a.globals.dom.baseEl.querySelector(a.globals.chartClass),this.hoverArea.classList.add("apexcharts-zoomable"),this.eventList.forEach((function(t){e.hoverArea.addEventListener(t,s.svgMouseEvents.bind(s,i),{capture:!1,passive:!0})}))}},{key:"destroy",value:function(){this.slDraggableRect&&(this.slDraggableRect.draggable(!1),this.slDraggableRect.off(),this.selectionRect.off()),this.selectionRect=null,this.zoomRect=null,this.gridRect=null}},{key:"svgMouseEvents",value:function(t,e){var i=this.w,a=this,s=this.ctx.toolbar,r=i.globals.zoomEnabled?i.config.chart.zoom.type:i.config.chart.selection.type;if(e.shiftKey?(this.shiftWasPressed=!0,s.enableZoomPanFromToolbar("pan")):this.shiftWasPressed&&(s.enableZoomPanFromToolbar("zoom"),this.shiftWasPressed=!1),!(e.target.classList.contains("apexcharts-selection-rect")||e.target.parentNode.classList.contains("apexcharts-toolbar"))){if(a.clientX="touchmove"===e.type||"touchstart"===e.type?e.touches[0].clientX:"touchend"===e.type?e.changedTouches[0].clientX:e.clientX,a.clientY="touchmove"===e.type||"touchstart"===e.type?e.touches[0].clientY:"touchend"===e.type?e.changedTouches[0].clientY:e.clientY,"mousedown"===e.type&&1===e.which){var n=a.gridRect.getBoundingClientRect();a.startX=a.clientX-n.left,a.startY=a.clientY-n.top,a.dragged=!1,a.w.globals.mousedown=!0}if(("mousemove"===e.type&&1===e.which||"touchmove"===e.type)&&(a.dragged=!0,i.globals.panEnabled?(i.globals.selection=null,a.w.globals.mousedown&&a.panDragging({context:a,zoomtype:r,xyRatios:t})):(a.w.globals.mousedown&&i.globals.zoomEnabled||a.w.globals.mousedown&&i.globals.selectionEnabled)&&(a.selection=a.selectionDrawing({context:a,zoomtype:r}))),"mouseup"===e.type||"touchend"===e.type||"mouseleave"===e.type){var o=a.gridRect.getBoundingClientRect();a.w.globals.mousedown&&(a.endX=a.clientX-o.left,a.endY=a.clientY-o.top,a.dragX=Math.abs(a.endX-a.startX),a.dragY=Math.abs(a.endY-a.startY),(i.globals.zoomEnabled||i.globals.selectionEnabled)&&a.selectionDrawn({context:a,zoomtype:r}),i.globals.panEnabled&&i.config.xaxis.convertedCatToNumeric&&a.delayedPanScrolled()),i.globals.zoomEnabled&&a.hideSelectionRect(this.selectionRect),a.dragged=!1,a.w.globals.mousedown=!1}this.makeSelectionRectDraggable()}}},{key:"makeSelectionRectDraggable",value:function(){var t=this.w;if(this.selectionRect){var e=this.selectionRect.node.getBoundingClientRect();e.width>0&&e.height>0&&this.slDraggableRect.selectize({points:"l, r",pointSize:8,pointType:"rect"}).resize({constraint:{minX:0,minY:0,maxX:t.globals.gridWidth,maxY:t.globals.gridHeight}}).on("resizing",this.selectionDragging.bind(this,"resizing"))}}},{key:"preselectedSelection",value:function(){var t=this.w,e=this.xyRatios;if(!t.globals.zoomEnabled)if(void 0!==t.globals.selection&&null!==t.globals.selection)this.drawSelectionRect(t.globals.selection);else if(void 0!==t.config.chart.selection.xaxis.min&&void 0!==t.config.chart.selection.xaxis.max){var i=(t.config.chart.selection.xaxis.min-t.globals.minX)/e.xRatio,a={x:i,y:0,width:t.globals.gridWidth-(t.globals.maxX-t.config.chart.selection.xaxis.max)/e.xRatio-i,height:t.globals.gridHeight,translateX:0,translateY:0,selectionEnabled:!0};this.drawSelectionRect(a),this.makeSelectionRectDraggable(),"function"==typeof t.config.chart.events.selection&&t.config.chart.events.selection(this.ctx,{xaxis:{min:t.config.chart.selection.xaxis.min,max:t.config.chart.selection.xaxis.max},yaxis:{}})}}},{key:"drawSelectionRect",value:function(t){var e=t.x,i=t.y,a=t.width,s=t.height,r=t.translateX,n=t.translateY,o=this.w,l=this.zoomRect,h=this.selectionRect;if(this.dragged||null!==o.globals.selection){var c={transform:"translate("+r+", "+n+")"};o.globals.zoomEnabled&&this.dragged&&(a<0&&(a=1),l.attr({x:e,y:i,width:a,height:s,fill:o.config.chart.zoom.zoomedArea.fill.color,"fill-opacity":o.config.chart.zoom.zoomedArea.fill.opacity,stroke:o.config.chart.zoom.zoomedArea.stroke.color,"stroke-width":o.config.chart.zoom.zoomedArea.stroke.width,"stroke-opacity":o.config.chart.zoom.zoomedArea.stroke.opacity}),p.setAttrs(l.node,c)),o.globals.selectionEnabled&&(h.attr({x:e,y:i,width:a>0?a:0,height:s>0?s:0,fill:o.config.chart.selection.fill.color,"fill-opacity":o.config.chart.selection.fill.opacity,stroke:o.config.chart.selection.stroke.color,"stroke-width":o.config.chart.selection.stroke.width,"stroke-dasharray":o.config.chart.selection.stroke.dashArray,"stroke-opacity":o.config.chart.selection.stroke.opacity}),p.setAttrs(h.node,c))}}},{key:"hideSelectionRect",value:function(t){t&&t.attr({x:0,y:0,width:0,height:0})}},{key:"selectionDrawing",value:function(t){var e=t.context,i=t.zoomtype,a=this.w,s=e,r=this.gridRect.getBoundingClientRect(),n=s.startX-1,o=s.startY,l=s.clientX-r.left-n,h=s.clientY-r.top-o,c=0,d=0,g={};return Math.abs(l+n)>a.globals.gridWidth?l=a.globals.gridWidth-n:s.clientX-r.left<0&&(l=n),n>s.clientX-r.left&&(c=-(l=Math.abs(l))),o>s.clientY-r.top&&(d=-(h=Math.abs(h))),g="x"===i?{x:n,y:0,width:l,height:a.globals.gridHeight,translateX:c,translateY:0}:"y"===i?{x:0,y:o,width:a.globals.gridWidth,height:h,translateX:0,translateY:d}:{x:n,y:o,width:l,height:h,translateX:c,translateY:d},s.drawSelectionRect(g),s.selectionDragging("resizing"),g}},{key:"selectionDragging",value:function(t,e){var i=this,a=this.w,s=this.xyRatios,r=this.selectionRect,n=0;"resizing"===t&&(n=30),"function"==typeof a.config.chart.events.selection&&a.globals.selectionEnabled&&(clearTimeout(this.w.globals.selectionResizeTimer),this.w.globals.selectionResizeTimer=window.setTimeout((function(){var t=i.gridRect.getBoundingClientRect(),e=r.node.getBoundingClientRect(),n=a.globals.xAxisScale.niceMin+(e.left-t.left)*s.xRatio,o=a.globals.xAxisScale.niceMin+(e.right-t.left)*s.xRatio,l=a.globals.yAxisScale[0].niceMin+(t.bottom-e.bottom)*s.yRatio[0],h=a.globals.yAxisScale[0].niceMax-(e.top-t.top)*s.yRatio[0];a.config.chart.events.selection(i.ctx,{xaxis:{min:n,max:o},yaxis:{min:l,max:h}})}),n))}},{key:"selectionDrawn",value:function(t){var e=t.context,i=t.zoomtype,a=this.w,s=e,r=this.xyRatios,n=this.ctx.toolbar;if(s.startX>s.endX){var o=s.startX;s.startX=s.endX,s.endX=o}if(s.startY>s.endY){var l=s.startY;s.startY=s.endY,s.endY=l}var h=a.globals.xAxisScale.niceMin+s.startX*r.xRatio,c=a.globals.xAxisScale.niceMin+s.endX*r.xRatio,d=[],u=[];if(a.config.yaxis.forEach((function(t,e){d.push(a.globals.yAxisScale[e].niceMax-r.yRatio[e]*s.startY),u.push(a.globals.yAxisScale[e].niceMax-r.yRatio[e]*s.endY)})),s.dragged&&(s.dragX>10||s.dragY>10)&&h!==c)if(a.globals.zoomEnabled){var f=g.clone(a.globals.initialConfig.yaxis);a.globals.zoomed=!0,a.globals.zoomed||(a.globals.lastXAxis=g.clone(a.config.xaxis),a.globals.lastYAxis=g.clone(a.config.yaxis)),a.config.xaxis.convertedCatToNumeric&&(h=Math.floor(h),c=Math.floor(c),h<1&&(h=1,c=a.globals.dataPoints),c-h<2&&(c=h+1));var p={min:h,max:c};if("xy"!==i&&"y"!==i||f.forEach((function(t,e){f[e].min=u[e],f[e].max=d[e]})),a.config.chart.zoom.autoScaleYaxis){var x=new B(s.ctx);f=x.autoScaleY(s.ctx,f,{xaxis:p})}if(n){var b=n.getBeforeZoomRange(p,f);b&&(p=b.xaxis?b.xaxis:p,f=b.yaxis?b.yaxe:f)}var m={xaxis:p};a.config.chart.group||(m.yaxis=f),s.ctx.updateHelpers._updateOptions(m,!1,s.w.config.chart.animations.dynamicAnimation.enabled),"function"==typeof a.config.chart.events.zoomed&&n.zoomCallback(p,f)}else if(a.globals.selectionEnabled){var v,y=null;v={min:h,max:c},"xy"!==i&&"y"!==i||(y=g.clone(a.config.yaxis)).forEach((function(t,e){y[e].min=u[e],y[e].max=d[e]})),a.globals.selection=s.selection,"function"==typeof a.config.chart.events.selection&&a.config.chart.events.selection(s.ctx,{xaxis:v,yaxis:y})}}},{key:"panDragging",value:function(t){var e=t.context,i=this.w,a=e;if(void 0!==i.globals.lastClientPosition.x){var s=i.globals.lastClientPosition.x-a.clientX,r=i.globals.lastClientPosition.y-a.clientY;Math.abs(s)>Math.abs(r)&&s>0?this.moveDirection="left":Math.abs(s)>Math.abs(r)&&s<0?this.moveDirection="right":Math.abs(r)>Math.abs(s)&&r>0?this.moveDirection="up":Math.abs(r)>Math.abs(s)&&r<0&&(this.moveDirection="down")}i.globals.lastClientPosition={x:a.clientX,y:a.clientY};var n=i.globals.minX,o=i.globals.maxX;i.config.xaxis.convertedCatToNumeric||a.panScrolled(n,o)}},{key:"delayedPanScrolled",value:function(){var t=this.w,e=t.globals.minX,i=t.globals.maxX,a=(t.globals.maxX-t.globals.minX)/2;"left"===this.moveDirection?(e=t.globals.minX+a,i=t.globals.maxX+a):"right"===this.moveDirection&&(e=t.globals.minX-a,i=t.globals.maxX-a),e=Math.floor(e),i=Math.floor(i),this.updateScrolledChart({xaxis:{min:e,max:i}},e,i)}},{key:"panScrolled",value:function(t,e){var i=this.w,a=this.xyRatios,s=g.clone(i.globals.initialConfig.yaxis);"left"===this.moveDirection?(t=i.globals.minX+i.globals.gridWidth/15*a.xRatio,e=i.globals.maxX+i.globals.gridWidth/15*a.xRatio):"right"===this.moveDirection&&(t=i.globals.minX-i.globals.gridWidth/15*a.xRatio,e=i.globals.maxX-i.globals.gridWidth/15*a.xRatio),(t<i.globals.initialMinX||e>i.globals.initialMaxX)&&(t=i.globals.minX,e=i.globals.maxX);var r={min:t,max:e};i.config.chart.zoom.autoScaleYaxis&&(s=new B(this.ctx).autoScaleY(this.ctx,s,{xaxis:r}));var n={xaxis:{min:t,max:e}};i.config.chart.group||(n.yaxis=s),this.updateScrolledChart(n,t,e)}},{key:"updateScrolledChart",value:function(t,e,i){var a=this.w;this.ctx.updateHelpers._updateOptions(t,!1,!1),"function"==typeof a.config.chart.events.scrolled&&a.config.chart.events.scrolled(this.ctx,{xaxis:{min:e,max:i}})}}]),i}(nt),lt=function(){function t(i){e(this,t),this.w=i.w,this.ttCtx=i,this.ctx=i.ctx}return a(t,[{key:"getNearestValues",value:function(t){var e=t.hoverArea,i=t.elGrid,a=t.clientX,s=t.clientY,r=this.w,n=r.globals.gridWidth,o=n/(r.globals.dataPoints-1),l=i.getBoundingClientRect(),h=this.hasBars();(r.globals.comboCharts||h)&&(o=n/r.globals.dataPoints);var c=a-l.left,d=s-l.top;c<0||d<0||c>r.globals.gridWidth||d>r.globals.gridHeight?(e.classList.remove("hovering-zoom"),e.classList.remove("hovering-pan")):r.globals.zoomEnabled?(e.classList.remove("hovering-pan"),e.classList.add("hovering-zoom")):r.globals.panEnabled&&(e.classList.remove("hovering-zoom"),e.classList.add("hovering-pan"));var u=Math.round(c/o);h&&(u=Math.ceil(c/o),u-=1);for(var f,p=null,x=null,b=[],m=0;m<r.globals.seriesXvalues.length;m++)b.push([r.globals.seriesXvalues[m][0]-1e-6].concat(r.globals.seriesXvalues[m]));return b=b.map((function(t){return t.filter((function(t){return t}))})),f=r.globals.seriesYvalues.map((function(t){return t.filter((function(t){return g.isNumber(t)}))})),r.globals.isXNumeric&&(p=(x=this.closestInMultiArray(c,d,b,f)).index,u=x.j,null!==p&&(b=r.globals.seriesXvalues[p],u=(x=this.closestInArray(c,b)).index)),r.globals.capturedSeriesIndex=null===p?-1:p,(!u||u<1)&&(u=0),r.globals.capturedDataPointIndex=u,{capturedSeries:p,j:u,hoverX:c,hoverY:d}}},{key:"closestInMultiArray",value:function(t,e,i,a){var s=this.w,r=0,n=null,o=-1;s.globals.series.length>1?r=this.getFirstActiveXArray(i):n=0;var l=a[r][0],h=i[r][0],c=Math.abs(t-h),d=Math.abs(e-l),g=d+c;return a.map((function(s,r){s.map((function(s,l){var h=Math.abs(e-a[r][l]),u=Math.abs(t-i[r][l]),f=u+h;f<g&&(g=f,c=u,d=h,n=r,o=l)}))})),{index:n,j:o}}},{key:"getFirstActiveXArray",value:function(t){for(var e=0,i=new I(this.ctx),a=t.map((function(t,e){return t.length>0?e:-1})),s=0;s<a.length;s++){var r=i.getSeriesTotalByIndex(s);if(-1!==a[s]&&0!==r&&!i.seriesHaveSameValues(s)){e=a[s];break}}return e}},{key:"closestInArray",value:function(t,e){for(var i=e[0],a=null,s=Math.abs(t-i),r=0;r<e.length;r++){var n=Math.abs(t-e[r]);n<s&&(s=n,a=r)}return{index:a}}},{key:"isXoverlap",value:function(t){var e=[],i=this.w.globals.seriesX.filter((function(t){return void 0!==t[0]}));if(i.length>0)for(var a=0;a<i.length-1;a++)void 0!==i[a][t]&&void 0!==i[a+1][t]&&i[a][t]!==i[a+1][t]&&e.push("unEqual");return 0===e.length}},{key:"isInitialSeriesSameLen",value:function(){for(var t=!0,e=this.w.globals.initialSeries,i=0;i<e.length-1;i++)if(e[i].data.length!==e[i+1].data.length){t=!1;break}return t}},{key:"getBarsHeight",value:function(t){return d(t).reduce((function(t,e){return t+e.getBBox().height}),0)}},{key:"getElMarkers",value:function(){return this.w.globals.dom.baseEl.querySelectorAll(" .apexcharts-series-markers")}},{key:"getAllMarkers",value:function(){var t=this.w.globals.dom.baseEl.querySelectorAll(".apexcharts-series-markers-wrap");(t=d(t)).sort((function(t,e){return Number(e.getAttribute("data:realIndex"))<Number(t.getAttribute("data:realIndex"))?0:-1}));var e=[];return t.forEach((function(t){e.push(t.querySelector(".apexcharts-marker"))})),e}},{key:"hasMarkers",value:function(){return this.getElMarkers().length>0}},{key:"getElBars",value:function(){return this.w.globals.dom.baseEl.querySelectorAll(".apexcharts-bar-series,  .apexcharts-candlestick-series, .apexcharts-rangebar-series")}},{key:"hasBars",value:function(){return this.getElBars().length>0}},{key:"getHoverMarkerSize",value:function(t){var e=this.w,i=e.config.markers.hover.size;return void 0===i&&(i=e.globals.markers.size[t]+e.config.markers.hover.sizeOffset),i}},{key:"toggleAllTooltipSeriesGroups",value:function(t){var e=this.w,i=this.ttCtx;0===i.allTooltipSeriesGroups.length&&(i.allTooltipSeriesGroups=e.globals.dom.baseEl.querySelectorAll(".apexcharts-tooltip-series-group"));for(var a=i.allTooltipSeriesGroups,s=0;s<a.length;s++)"enable"===t?(a[s].classList.add("apexcharts-active"),a[s].style.display=e.config.tooltip.items.display):(a[s].classList.remove("apexcharts-active"),a[s].style.display="none")}}]),t}(),ht=function(){function t(i){e(this,t),this.w=i.w,this.ctx=i.ctx,this.ttCtx=i,this.tooltipUtil=new lt(i)}return a(t,[{key:"drawSeriesTexts",value:function(t){var e=t.shared,i=void 0===e||e,a=t.ttItems,s=t.i,r=void 0===s?0:s,n=t.j,o=void 0===n?null:n,l=t.y1,h=t.y2,c=this.w;void 0!==c.config.tooltip.custom?this.handleCustomTooltip({i:r,j:o,y1:l,y2:h,w:c}):this.toggleActiveInactiveSeries(i);var d=this.getValuesToPrint({i:r,j:o});this.printLabels({i:r,j:o,values:d,ttItems:a,shared:i});var g=this.ttCtx.getElTooltip();this.ttCtx.tooltipRect.ttWidth=g.getBoundingClientRect().width,this.ttCtx.tooltipRect.ttHeight=g.getBoundingClientRect().height}},{key:"printLabels",value:function(t){var e,i=this,a=t.i,s=t.j,r=t.values,n=t.ttItems,o=t.shared,l=this.w,h=r.xVal,c=r.zVal,d=r.xAxisTTVal,g="",u=l.globals.colors[a];null!==s&&l.config.plotOptions.bar.distributed&&(u=l.globals.colors[s]);for(var f=function(t,r){var f=i.getFormatters(a);g=i.getSeriesName({fn:f.yLbTitleFormatter,index:a,seriesIndex:a,j:s});var p=l.config.tooltip.inverseOrder?r:t;if(l.globals.axisCharts){var x=function(t){return f.yLbFormatter(l.globals.series[t][s],{series:l.globals.series,seriesIndex:t,dataPointIndex:s,w:l})};o?(f=i.getFormatters(p),g=i.getSeriesName({fn:f.yLbTitleFormatter,index:p,seriesIndex:a,j:s}),u=l.globals.colors[p],e=x(p)):e=x(a)}null===s&&(e=f.yLbFormatter(l.globals.series[a],l)),i.DOMHandling({i:a,t:p,j:s,ttItems:n,values:{val:e,xVal:h,xAxisTTVal:d,zVal:c},seriesName:g,shared:o,pColor:u})},p=0,x=l.globals.series.length-1;p<l.globals.series.length;p++,x--)f(p,x)}},{key:"getFormatters",value:function(t){var e,i=this.w,a=i.globals.yLabelFormatters[t];return void 0!==i.globals.ttVal?Array.isArray(i.globals.ttVal)?(a=i.globals.ttVal[t]&&i.globals.ttVal[t].formatter,e=i.globals.ttVal[t]&&i.globals.ttVal[t].title&&i.globals.ttVal[t].title.formatter):(a=i.globals.ttVal.formatter,"function"==typeof i.globals.ttVal.title.formatter&&(e=i.globals.ttVal.title.formatter)):e=i.config.tooltip.y.title.formatter,"function"!=typeof a&&(a=i.globals.yLabelFormatters[0]?i.globals.yLabelFormatters[0]:function(t){return t}),"function"!=typeof e&&(e=function(t){return t}),{yLbFormatter:a,yLbTitleFormatter:e}}},{key:"getSeriesName",value:function(t){var e=t.fn,i=t.index,a=t.seriesIndex,s=t.j,r=this.w;return e(String(r.globals.seriesNames[i]),{series:r.globals.series,seriesIndex:a,dataPointIndex:s,w:r})}},{key:"DOMHandling",value:function(t){var e=t.i,i=t.t,a=(t.j,t.ttItems),s=t.values,r=t.seriesName,n=t.shared,o=t.pColor,l=this.w,h=this.ttCtx,c=s.val,d=s.xVal,g=s.xAxisTTVal,u=s.zVal,f=null;f=a[i].children,l.config.tooltip.fillSeriesColor&&(a[i].style.backgroundColor=o,f[0].style.display="none"),h.showTooltipTitle&&(null===h.tooltipTitle&&(h.tooltipTitle=l.globals.dom.baseEl.querySelector(".apexcharts-tooltip-title")),h.tooltipTitle.innerHTML=d),h.blxaxisTooltip&&(h.xaxisTooltipText.innerHTML=""!==g?g:d);var p=a[i].querySelector(".apexcharts-tooltip-text-label");p&&(p.innerHTML=r?r+": ":"");var x=a[i].querySelector(".apexcharts-tooltip-text-value");(x&&(x.innerHTML=void 0!==c?c:""),f[0]&&f[0].classList.contains("apexcharts-tooltip-marker")&&(l.config.tooltip.marker.fillColors&&Array.isArray(l.config.tooltip.marker.fillColors)&&(o=l.config.tooltip.marker.fillColors[e]),f[0].style.backgroundColor=o),l.config.tooltip.marker.show||(f[0].style.display="none"),null!==u)&&(a[i].querySelector(".apexcharts-tooltip-text-z-label").innerHTML=l.config.tooltip.z.title,a[i].querySelector(".apexcharts-tooltip-text-z-value").innerHTML=void 0!==u?u:"");n&&f[0]&&(null==c||l.globals.collapsedSeriesIndices.indexOf(i)>-1?f[0].parentNode.style.display="none":f[0].parentNode.style.display=l.config.tooltip.items.display)}},{key:"toggleActiveInactiveSeries",value:function(t){var e=this.w;if(t)this.tooltipUtil.toggleAllTooltipSeriesGroups("enable");else{this.tooltipUtil.toggleAllTooltipSeriesGroups("disable");var i=e.globals.dom.baseEl.querySelector(".apexcharts-tooltip-series-group");i&&(i.classList.add("apexcharts-active"),i.style.display=e.config.tooltip.items.display)}}},{key:"getValuesToPrint",value:function(t){var e=t.i,i=t.j,a=this.w,s=this.ctx.series.filteredSeriesX(),r="",n="",o=null,l=null,h={series:a.globals.series,seriesIndex:e,dataPointIndex:i,w:a},c=a.globals.ttZFormatter;null===i?l=a.globals.series[e]:a.globals.isXNumeric?(r=s[e][i],0===s[e].length&&(r=s[this.tooltipUtil.getFirstActiveXArray(s)][i])):r=void 0!==a.globals.labels[i]?a.globals.labels[i]:"";var d=r;a.globals.isXNumeric&&"datetime"===a.config.xaxis.type?r=new D(this.ctx).xLabelFormat(a.globals.ttKeyFormatter,d,d):a.globals.isBarHorizontal||(r=a.globals.xLabelFormatter(d,h));return void 0!==a.config.tooltip.x.formatter&&(r=a.globals.ttKeyFormatter(d,h)),a.globals.seriesZ.length>0&&a.globals.seriesZ[0].length>0&&(o=c(a.globals.seriesZ[e][i],a)),n="function"==typeof a.config.xaxis.tooltip.formatter?a.globals.xaxisTooltipFormatter(d,h):r,{val:Array.isArray(l)?l.join(" "):l,xVal:Array.isArray(r)?r.join(" "):r,xAxisTTVal:Array.isArray(n)?n.join(" "):n,zVal:o}}},{key:"handleCustomTooltip",value:function(t){var e=t.i,i=t.j,a=t.y1,s=t.y2,r=t.w,n=this.ttCtx.getElTooltip(),o=r.config.tooltip.custom;Array.isArray(o)&&o[e]&&(o=o[e]),n.innerHTML=o({ctx:this.ctx,series:r.globals.series,seriesIndex:e,dataPointIndex:i,y1:a,y2:s,w:r})}}]),t}(),ct=function(){function t(i){e(this,t),this.ttCtx=i,this.ctx=i.ctx,this.w=i.w}return a(t,[{key:"moveXCrosshairs",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=this.ttCtx,a=this.w,s=i.getElXCrosshairs(),r=t-i.xcrosshairsWidth/2,n=a.globals.labels.slice().length;if(null!==e&&(r=a.globals.gridWidth/n*e),null!==s&&(s.setAttribute("x",r),s.setAttribute("x1",r),s.setAttribute("x2",r),s.setAttribute("y2",a.globals.gridHeight),s.classList.add("apexcharts-active")),r<0&&(r=0),r>a.globals.gridWidth&&(r=a.globals.gridWidth),i.blxaxisTooltip){var o=r;"tickWidth"!==a.config.xaxis.crosshairs.width&&"barWidth"!==a.config.xaxis.crosshairs.width||(o=r+i.xcrosshairsWidth/2),this.moveXAxisTooltip(o)}}},{key:"moveYCrosshairs",value:function(t){var e=this.ttCtx;null!==e.ycrosshairs&&(p.setAttrs(e.ycrosshairs,{y1:t,y2:t}),p.setAttrs(e.ycrosshairsHidden,{y1:t,y2:t}))}},{key:"moveXAxisTooltip",value:function(t){var e=this.w,i=this.ttCtx;if(null!==i.xaxisTooltip){i.xaxisTooltip.classList.add("apexcharts-active");var a=i.xaxisOffY+e.config.xaxis.tooltip.offsetY+e.globals.translateY+1+e.config.xaxis.offsetY;if(t-=i.xaxisTooltip.getBoundingClientRect().width/2,!isNaN(t)){t+=e.globals.translateX;var s;s=new p(this.ctx).getTextRects(i.xaxisTooltipText.innerHTML),i.xaxisTooltipText.style.minWidth=s.width+"px",i.xaxisTooltip.style.left=t+"px",i.xaxisTooltip.style.top=a+"px"}}}},{key:"moveYAxisTooltip",value:function(t){var e=this.w,i=this.ttCtx;null===i.yaxisTTEls&&(i.yaxisTTEls=e.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxistooltip"));var a=parseInt(i.ycrosshairsHidden.getAttribute("y1"),10),s=e.globals.translateY+a,r=i.yaxisTTEls[t].getBoundingClientRect().height,n=e.globals.translateYAxisX[t]-2;e.config.yaxis[t].opposite&&(n-=26),s-=r/2,-1===e.globals.ignoreYAxisIndexes.indexOf(t)?(i.yaxisTTEls[t].classList.add("apexcharts-active"),i.yaxisTTEls[t].style.top=s+"px",i.yaxisTTEls[t].style.left=n+e.config.yaxis[t].tooltip.offsetX+"px"):i.yaxisTTEls[t].classList.remove("apexcharts-active")}},{key:"moveTooltip",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,a=this.w,s=this.ttCtx,r=s.getElTooltip(),n=s.tooltipRect,o=null!==i?parseFloat(i):1,l=parseFloat(t)+o+5,h=parseFloat(e)+o/2;if(l>a.globals.gridWidth/2&&(l=l-n.ttWidth-o-15),l>a.globals.gridWidth-n.ttWidth-10&&(l=a.globals.gridWidth-n.ttWidth),l<-20&&(l=-20),a.config.tooltip.followCursor){var c=s.getElGrid(),d=c.getBoundingClientRect();h=s.e.clientY+a.globals.translateY-d.top-n.ttHeight/2}if(!a.config.tooltip.followCursor){var g=this.positionChecks(n,l,h);l=g.x,h=g.y}isNaN(l)||(l+=a.globals.translateX,r.style.left=l+"px",r.style.top=h+"px")}},{key:"positionChecks",value:function(t,e,i){var a=this.w;return t.ttHeight/2+i>a.globals.gridHeight&&(i=a.globals.gridHeight-t.ttHeight+a.globals.translateY),i<0&&(i=0),{x:e,y:i}}},{key:"moveMarkers",value:function(t,e){var i=this.w,a=this.ttCtx;if(i.globals.markers.size[t]>0)for(var s=i.globals.dom.baseEl.querySelectorAll(" .apexcharts-series[data\\:realIndex='".concat(t,"'] .apexcharts-marker")),r=0;r<s.length;r++)parseInt(s[r].getAttribute("rel"),10)===e&&(a.marker.resetPointsSize(),a.marker.enlargeCurrentPoint(e,s[r]));else a.marker.resetPointsSize(),this.moveDynamicPointOnHover(e,t)}},{key:"moveDynamicPointOnHover",value:function(t,e){var i,a,s=this.w,r=this.ttCtx,n=s.globals.pointsArray,o=r.tooltipUtil.getHoverMarkerSize(e),l=s.config.series[e].type;if(!l||"column"!==l&&"candlestick"!==l){i=n[e][t][0],a=n[e][t][1]?n[e][t][1]:0;var h=s.globals.dom.baseEl.querySelector(".apexcharts-series[data\\:realIndex='".concat(e,"'] .apexcharts-series-markers circle"));h&&(h.setAttribute("r",o),h.setAttribute("cx",i),h.setAttribute("cy",a)),this.moveXCrosshairs(i),r.fixedTooltip||this.moveTooltip(i,a,o)}}},{key:"moveDynamicPointsOnHover",value:function(t){var e,i=this.ttCtx,a=i.w,s=0,r=0,n=a.globals.pointsArray;e=new F(this.ctx).getActiveConfigSeriesIndex(!0);var o=i.tooltipUtil.getHoverMarkerSize(e);n[e]&&(s=n[e][t][0],r=n[e][t][1]);var l=i.tooltipUtil.getAllMarkers();if(null!==l)for(var h=0;h<a.globals.series.length;h++){var c=n[h];if(a.globals.comboCharts&&void 0===c&&l.splice(h,0,null),c&&c.length){var d=n[h][t][1];l[h].setAttribute("cx",s),null===d||isNaN(d)?l[h]&&l[h].setAttribute("r",0):(l[h]&&l[h].setAttribute("r",o),l[h]&&l[h].setAttribute("cy",d))}}if(this.moveXCrosshairs(s),!i.fixedTooltip){var g=r||a.globals.gridHeight;this.moveTooltip(s,g,o)}}},{key:"moveStickyTooltipOverBars",value:function(t){var e,i=this.w,a=this.ttCtx,s=i.globals.columnSeries?i.globals.columnSeries.length:i.globals.series.length,r=s>=2&&s%2==0?Math.floor(s/2):Math.floor(s/2)+1,n=i.globals.dom.baseEl.querySelector(".apexcharts-bar-series .apexcharts-series[rel='".concat(r,"'] path[j='").concat(t,"'], .apexcharts-candlestick-series .apexcharts-series[rel='").concat(r,"'] path[j='").concat(t,"'], .apexcharts-rangebar-series .apexcharts-series[rel='").concat(r,"'] path[j='").concat(t,"']")),o=n?parseFloat(n.getAttribute("cx")):0,l=n?parseFloat(n.getAttribute("barWidth")):0;i.globals.isXNumeric?o-=s%2!=0?l/2:0:(o=a.xAxisTicksPositions[t-1]+a.dataPointsDividedWidth/2,isNaN(o)&&(o=a.xAxisTicksPositions[t]-a.dataPointsDividedWidth/2));var h=a.getElGrid().getBoundingClientRect();if(e=a.e.clientY-h.top-a.tooltipRect.ttHeight/2,this.moveXCrosshairs(o),!a.fixedTooltip){var c=e||i.globals.gridHeight;this.moveTooltip(o,c)}}}]),t}(),dt=function(){function t(i){e(this,t),this.w=i.w,this.ttCtx=i,this.ctx=i.ctx,this.tooltipPosition=new ct(i)}return a(t,[{key:"drawDynamicPoints",value:function(){var t=this.w,e=new p(this.ctx),i=new X(this.ctx),a=t.globals.dom.baseEl.querySelectorAll(".apexcharts-series");(a=d(a)).sort((function(t,e){return Number(e.getAttribute("data:realIndex"))<Number(t.getAttribute("data:realIndex"))?0:-1}));for(var s=0;s<a.length;s++){var r=a[s].querySelector(".apexcharts-series-markers-wrap");if(null!==r){var n=void 0,o="apexcharts-marker w".concat((Math.random()+1).toString(36).substring(4));"line"!==t.config.chart.type&&"area"!==t.config.chart.type||t.globals.comboCharts||t.config.tooltip.intersect||(o+=" no-pointer-events");var l=i.getMarkerConfig(o,s);(n=e.drawMarker(0,0,l)).node.setAttribute("default-marker-size",0);var h=document.createElementNS(t.globals.SVGNS,"g");h.classList.add("apexcharts-series-markers"),h.appendChild(n.node),r.appendChild(h)}}}},{key:"enlargeCurrentPoint",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,s=this.w;"bubble"!==s.config.chart.type&&this.newPointSize(t,e);var r=e.getAttribute("cx"),n=e.getAttribute("cy");if(null!==i&&null!==a&&(r=i,n=a),this.tooltipPosition.moveXCrosshairs(r),!this.fixedTooltip){if("radar"===s.config.chart.type){var o=this.ttCtx.getElGrid(),l=o.getBoundingClientRect();r=this.ttCtx.e.clientX-l.left}this.tooltipPosition.moveTooltip(r,n,s.config.markers.hover.size)}}},{key:"enlargePoints",value:function(t){for(var e=this.w,i=this.ttCtx,a=t,s=e.globals.dom.baseEl.querySelectorAll(".apexcharts-series:not(.apexcharts-series-collapsed) .apexcharts-marker"),r=e.config.markers.hover.size,n=0;n<s.length;n++){var o=s[n].getAttribute("rel"),l=s[n].getAttribute("index");if(void 0===r&&(r=e.globals.markers.size[l]+e.config.markers.hover.sizeOffset),a===parseInt(o,10)){this.newPointSize(a,s[n]);var h=s[n].getAttribute("cx"),c=s[n].getAttribute("cy");this.tooltipPosition.moveXCrosshairs(h),i.fixedTooltip||this.tooltipPosition.moveTooltip(h,c,r)}else this.oldPointSize(s[n])}}},{key:"newPointSize",value:function(t,e){var i=this.w,a=i.config.markers.hover.size,s=0===t?e.parentNode.firstChild:e.parentNode.lastChild;if("0"!==s.getAttribute("default-marker-size")){var r=parseInt(s.getAttribute("index"),10);void 0===a&&(a=i.globals.markers.size[r]+i.config.markers.hover.sizeOffset),s.setAttribute("r",a)}}},{key:"oldPointSize",value:function(t){var e=parseFloat(t.getAttribute("default-marker-size"));t.setAttribute("r",e)}},{key:"resetPointsSize",value:function(){for(var t=this.w.globals.dom.baseEl.querySelectorAll(".apexcharts-series:not(.apexcharts-series-collapsed) .apexcharts-marker"),e=0;e<t.length;e++){var i=parseFloat(t[e].getAttribute("default-marker-size"));g.isNumber(i)?t[e].setAttribute("r",i):t[e].setAttribute("r",0)}}}]),t}(),gt=function(){function t(i){e(this,t),this.w=i.w,this.ttCtx=i}return a(t,[{key:"getAttr",value:function(t,e){return parseFloat(t.target.getAttribute(e))}},{key:"handleHeatTooltip",value:function(t){var e=t.e,i=t.opt,a=t.x,s=t.y,r=this.ttCtx,n=this.w;if(e.target.classList.contains("apexcharts-heatmap-rect")){var o=this.getAttr(e,"i"),l=this.getAttr(e,"j"),h=this.getAttr(e,"cx"),c=this.getAttr(e,"cy"),d=this.getAttr(e,"width"),g=this.getAttr(e,"height");if(r.tooltipLabels.drawSeriesTexts({ttItems:i.ttItems,i:o,j:l,shared:!1}),n.globals.capturedSeriesIndex=o,n.globals.capturedDataPointIndex=l,a=h+r.tooltipRect.ttWidth/2+d,s=c+r.tooltipRect.ttHeight/2-g/2,r.tooltipPosition.moveXCrosshairs(h+d/2),a>n.globals.gridWidth/2&&(a=h-r.tooltipRect.ttWidth/2+d),r.w.config.tooltip.followCursor){var u=r.getElGrid().getBoundingClientRect();s=r.e.clientY-u.top+n.globals.translateY/2-10}}return{x:a,y:s}}},{key:"handleMarkerTooltip",value:function(t){var e,i,a=t.e,s=t.opt,r=t.x,n=t.y,o=this.w,l=this.ttCtx;if(a.target.classList.contains("apexcharts-marker")){var h=parseInt(s.paths.getAttribute("cx"),10),c=parseInt(s.paths.getAttribute("cy"),10),d=parseFloat(s.paths.getAttribute("val"));if(i=parseInt(s.paths.getAttribute("rel"),10),e=parseInt(s.paths.parentNode.parentNode.parentNode.getAttribute("rel"),10)-1,l.intersect){var u=g.findAncestor(s.paths,"apexcharts-series");u&&(e=parseInt(u.getAttribute("data:realIndex"),10))}if(l.tooltipLabels.drawSeriesTexts({ttItems:s.ttItems,i:e,j:i,shared:!l.showOnIntersect&&o.config.tooltip.shared}),"mouseup"===a.type&&l.markerClick(a,e,i),o.globals.capturedSeriesIndex=e,o.globals.capturedDataPointIndex=i,r=h,n=c+o.globals.translateY-1.4*l.tooltipRect.ttHeight,l.w.config.tooltip.followCursor){var f=l.getElGrid().getBoundingClientRect();n=l.e.clientY+o.globals.translateY-f.top}d<0&&(n=c),l.marker.enlargeCurrentPoint(i,s.paths,r,n)}return{x:r,y:n}}},{key:"handleBarTooltip",value:function(t){var e,i,a=t.e,s=t.opt,r=this.w,n=this.ttCtx,o=n.getElTooltip(),l=0,h=0,c=0,d=this.getBarTooltipXY({e:a,opt:s});e=d.i;var g=d.barHeight,u=d.j;if(r.globals.capturedSeriesIndex=e,r.globals.capturedDataPointIndex=u,r.globals.isBarHorizontal&&n.tooltipUtil.hasBars()||!r.config.tooltip.shared?(h=d.x,c=d.y,i=Array.isArray(r.config.stroke.width)?r.config.stroke.width[e]:r.config.stroke.width,l=h):r.globals.comboCharts||r.config.tooltip.shared||(l/=2),isNaN(c)?c=r.globals.svgHeight-n.tooltipRect.ttHeight:c<0&&(c=0),h+n.tooltipRect.ttWidth>r.globals.gridWidth?h-=n.tooltipRect.ttWidth:h<0&&(h=0),n.w.config.tooltip.followCursor){var f=n.getElGrid().getBoundingClientRect();c=n.e.clientY-f.top}if(null===n.tooltip&&(n.tooltip=r.globals.dom.baseEl.querySelector(".apexcharts-tooltip")),r.config.tooltip.shared||(r.globals.comboBarCount>0?n.tooltipPosition.moveXCrosshairs(l+i/2):n.tooltipPosition.moveXCrosshairs(l)),!n.fixedTooltip&&(!r.config.tooltip.shared||r.globals.isBarHorizontal&&n.tooltipUtil.hasBars())){var p=r.globals.isMultipleYAxis?r.config.yaxis[x]&&r.config.yaxis[x].reversed:r.config.yaxis[0].reversed;p&&(h-=n.tooltipRect.ttWidth)<0&&(h=0),o.style.left=h+r.globals.translateX+"px";var x=parseInt(s.paths.parentNode.getAttribute("data:realIndex"),10);!p||r.globals.isBarHorizontal&&n.tooltipUtil.hasBars()||(c=c+g-2*(r.globals.series[e][u]<0?g:0)),n.tooltipRect.ttHeight+c>r.globals.gridHeight?(c=r.globals.gridHeight-n.tooltipRect.ttHeight+r.globals.translateY,o.style.top=c+"px"):o.style.top=c+r.globals.translateY-n.tooltipRect.ttHeight/2+"px"}}},{key:"getBarTooltipXY",value:function(t){var e=t.e,i=t.opt,a=this.w,s=null,r=this.ttCtx,n=0,o=0,l=0,h=0,c=0,d=e.target.classList;if(d.contains("apexcharts-bar-area")||d.contains("apexcharts-candlestick-area")||d.contains("apexcharts-rangebar-area")){var g=e.target,u=g.getBoundingClientRect(),f=i.elGrid.getBoundingClientRect(),p=u.height;c=u.height;var x=u.width,b=parseInt(g.getAttribute("cx"),10),m=parseInt(g.getAttribute("cy"),10);h=parseFloat(g.getAttribute("barWidth"));var v="touchmove"===e.type?e.touches[0].clientX:e.clientX;s=parseInt(g.getAttribute("j"),10),n=parseInt(g.parentNode.getAttribute("rel"),10)-1;var y=g.getAttribute("data-range-y1"),w=g.getAttribute("data-range-y2");a.globals.comboCharts&&(n=parseInt(g.parentNode.getAttribute("data:realIndex"),10)),r.tooltipLabels.drawSeriesTexts({ttItems:i.ttItems,i:n,j:s,y1:y?parseInt(y,10):null,y2:w?parseInt(w,10):null,shared:!r.showOnIntersect&&a.config.tooltip.shared}),a.config.tooltip.followCursor?a.globals.isBarHorizontal?(o=v-f.left+15,l=m-r.dataPointsDividedHeight+p/2-r.tooltipRect.ttHeight/2):(o=a.globals.isXNumeric?b-x/2:b-r.dataPointsDividedWidth+x/2,l=e.clientY-f.top-r.tooltipRect.ttHeight/2-15):a.globals.isBarHorizontal?((o=b)<r.xyRatios.baseLineInvertedY&&(o=b-r.tooltipRect.ttWidth),l=m-r.dataPointsDividedHeight+p/2-r.tooltipRect.ttHeight/2):(o=a.globals.isXNumeric?b-x/2:b-r.dataPointsDividedWidth+x/2,l=m)}return{x:o,y:l,barHeight:c,barWidth:h,i:n,j:s}}}]),t}(),ut=function(){function t(i){e(this,t),this.w=i.w,this.ttCtx=i}return a(t,[{key:"drawXaxisTooltip",value:function(){var t=this.w,e=this.ttCtx,i="bottom"===t.config.xaxis.position;e.xaxisOffY=i?t.globals.gridHeight+1:-t.globals.xAxisHeight-t.config.xaxis.axisTicks.height+3;var a=i?"apexcharts-xaxistooltip apexcharts-xaxistooltip-bottom":"apexcharts-xaxistooltip apexcharts-xaxistooltip-top",s=t.globals.dom.elWrap;e.blxaxisTooltip&&(null===t.globals.dom.baseEl.querySelector(".apexcharts-xaxistooltip")&&(e.xaxisTooltip=document.createElement("div"),e.xaxisTooltip.setAttribute("class",a+" apexcharts-theme-"+t.config.tooltip.theme),s.appendChild(e.xaxisTooltip),e.xaxisTooltipText=document.createElement("div"),e.xaxisTooltipText.classList.add("apexcharts-xaxistooltip-text"),e.xaxisTooltipText.style.fontFamily=t.config.xaxis.tooltip.style.fontFamily||t.config.chart.fontFamily,e.xaxisTooltipText.style.fontSize=t.config.xaxis.tooltip.style.fontSize,e.xaxisTooltip.appendChild(e.xaxisTooltipText)))}},{key:"drawYaxisTooltip",value:function(){for(var t=this.w,e=this.ttCtx,i=function(i){var a=t.config.yaxis[i].opposite||t.config.yaxis[i].crosshairs.opposite;e.yaxisOffX=a?t.globals.gridWidth+1:1;var s="apexcharts-yaxistooltip apexcharts-yaxistooltip-".concat(i,a?" apexcharts-yaxistooltip-right":" apexcharts-yaxistooltip-left");t.globals.yAxisSameScaleIndices.map((function(e,a){e.map((function(e,a){a===i&&(s+=t.config.yaxis[a].show?" ":" apexcharts-yaxistooltip-hidden")}))}));var r=t.globals.dom.elWrap;e.blyaxisTooltip&&(null===t.globals.dom.baseEl.querySelector(".apexcharts-yaxistooltip apexcharts-yaxistooltip-".concat(i))&&(e.yaxisTooltip=document.createElement("div"),e.yaxisTooltip.setAttribute("class",s+" apexcharts-theme-"+t.config.tooltip.theme),r.appendChild(e.yaxisTooltip),0===i&&(e.yaxisTooltipText=[]),e.yaxisTooltipText.push(document.createElement("div")),e.yaxisTooltipText[i].classList.add("apexcharts-yaxistooltip-text"),e.yaxisTooltip.appendChild(e.yaxisTooltipText[i])))},a=0;a<t.config.yaxis.length;a++)i(a)}},{key:"setXCrosshairWidth",value:function(){var t=this.w,e=this.ttCtx,i=e.getElXCrosshairs();if(e.xcrosshairsWidth=parseInt(t.config.xaxis.crosshairs.width,10),t.globals.comboCharts){var a=t.globals.dom.baseEl.querySelector(".apexcharts-bar-area");if(null!==a&&"barWidth"===t.config.xaxis.crosshairs.width){var s=parseFloat(a.getAttribute("barWidth"));e.xcrosshairsWidth=s}else if("tickWidth"===t.config.xaxis.crosshairs.width){var r=t.globals.labels.length;e.xcrosshairsWidth=t.globals.gridWidth/r}}else if("tickWidth"===t.config.xaxis.crosshairs.width){var n=t.globals.labels.length;e.xcrosshairsWidth=t.globals.gridWidth/n}else if("barWidth"===t.config.xaxis.crosshairs.width){var o=t.globals.dom.baseEl.querySelector(".apexcharts-bar-area");if(null!==o){var l=parseFloat(o.getAttribute("barWidth"));e.xcrosshairsWidth=l}else e.xcrosshairsWidth=1}t.globals.isBarHorizontal&&(e.xcrosshairsWidth=0),null!==i&&e.xcrosshairsWidth>0&&i.setAttribute("width",e.xcrosshairsWidth)}},{key:"handleYCrosshair",value:function(){var t=this.w,e=this.ttCtx;e.ycrosshairs=t.globals.dom.baseEl.querySelector(".apexcharts-ycrosshairs"),e.ycrosshairsHidden=t.globals.dom.baseEl.querySelector(".apexcharts-ycrosshairs-hidden")}},{key:"drawYaxisTooltipText",value:function(t,e,i){var a=this.ttCtx,s=this.w,r=s.globals.yLabelFormatters[t];if(a.blyaxisTooltip){var n=a.getElGrid().getBoundingClientRect(),o=(e-n.top)*i.yRatio[t],l=s.globals.maxYArr[t]-s.globals.minYArr[t],h=s.globals.minYArr[t]+(l-o);a.tooltipPosition.moveYCrosshairs(e-n.top),a.yaxisTooltipText[t].innerHTML=r(h),a.tooltipPosition.moveYAxisTooltip(t)}}}]),t}(),ft=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w;var a=this.w;this.tConfig=a.config.tooltip,this.tooltipUtil=new lt(this),this.tooltipLabels=new ht(this),this.tooltipPosition=new ct(this),this.marker=new dt(this),this.intersect=new gt(this),this.axesTooltip=new ut(this),this.showOnIntersect=this.tConfig.intersect,this.showTooltipTitle=this.tConfig.x.show,this.fixedTooltip=this.tConfig.fixed.enabled,this.xaxisTooltip=null,this.yaxisTTEls=null,this.isBarShared=!a.globals.isBarHorizontal&&this.tConfig.shared}return a(t,[{key:"getElTooltip",value:function(t){return t||(t=this),t.w.globals.dom.baseEl.querySelector(".apexcharts-tooltip")}},{key:"getElXCrosshairs",value:function(){return this.w.globals.dom.baseEl.querySelector(".apexcharts-xcrosshairs")}},{key:"getElGrid",value:function(){return this.w.globals.dom.baseEl.querySelector(".apexcharts-grid")}},{key:"drawTooltip",value:function(t){var e=this.w;this.xyRatios=t,this.blxaxisTooltip=e.config.xaxis.tooltip.enabled&&e.globals.axisCharts,this.blyaxisTooltip=e.config.yaxis[0].tooltip.enabled&&e.globals.axisCharts,this.allTooltipSeriesGroups=[],e.globals.axisCharts||(this.showTooltipTitle=!1);var i=document.createElement("div");if(i.classList.add("apexcharts-tooltip"),i.classList.add("apexcharts-theme-".concat(this.tConfig.theme)),e.globals.dom.elWrap.appendChild(i),e.globals.axisCharts){this.axesTooltip.drawXaxisTooltip(),this.axesTooltip.drawYaxisTooltip(),this.axesTooltip.setXCrosshairWidth(),this.axesTooltip.handleYCrosshair();var a=new O(this.ctx);this.xAxisTicksPositions=a.getXAxisTicksPositions()}if(!e.globals.comboCharts&&!this.tConfig.intersect&&"bar"!==e.config.chart.type&&"rangeBar"!==e.config.chart.type||this.tConfig.shared||(this.showOnIntersect=!0),0!==e.config.markers.size&&0!==e.globals.markers.largestSize||this.marker.drawDynamicPoints(this),e.globals.collapsedSeries.length!==e.globals.series.length){this.dataPointsDividedHeight=e.globals.gridHeight/e.globals.dataPoints,this.dataPointsDividedWidth=e.globals.gridWidth/e.globals.dataPoints,this.showTooltipTitle&&(this.tooltipTitle=document.createElement("div"),this.tooltipTitle.classList.add("apexcharts-tooltip-title"),this.tooltipTitle.style.fontFamily=this.tConfig.style.fontFamily||e.config.chart.fontFamily,this.tooltipTitle.style.fontSize=this.tConfig.style.fontSize,i.appendChild(this.tooltipTitle));var s=e.globals.series.length;(e.globals.xyCharts||e.globals.comboCharts)&&this.tConfig.shared&&(s=this.showOnIntersect?1:e.globals.series.length),this.legendLabels=e.globals.dom.baseEl.querySelectorAll(".apexcharts-legend-text"),this.ttItems=this.createTTElements(s),this.addSVGEvents()}}},{key:"createTTElements",value:function(t){for(var e=this.w,i=[],a=this.getElTooltip(),s=0;s<t;s++){var r=document.createElement("div");r.classList.add("apexcharts-tooltip-series-group"),this.tConfig.shared&&this.tConfig.enabledOnSeries&&Array.isArray(this.tConfig.enabledOnSeries)&&this.tConfig.enabledOnSeries.indexOf(s)<0&&r.classList.add("apexcharts-tooltip-series-group-hidden");var n=document.createElement("span");n.classList.add("apexcharts-tooltip-marker"),n.style.backgroundColor=e.globals.colors[s],r.appendChild(n);var o=document.createElement("div");o.classList.add("apexcharts-tooltip-text"),o.style.fontFamily=this.tConfig.style.fontFamily||e.config.chart.fontFamily,o.style.fontSize=this.tConfig.style.fontSize;var l=document.createElement("div");l.classList.add("apexcharts-tooltip-y-group");var h=document.createElement("span");h.classList.add("apexcharts-tooltip-text-label"),l.appendChild(h);var c=document.createElement("span");c.classList.add("apexcharts-tooltip-text-value"),l.appendChild(c);var d=document.createElement("div");d.classList.add("apexcharts-tooltip-z-group");var g=document.createElement("span");g.classList.add("apexcharts-tooltip-text-z-label"),d.appendChild(g);var u=document.createElement("span");u.classList.add("apexcharts-tooltip-text-z-value"),d.appendChild(u),o.appendChild(l),o.appendChild(d),r.appendChild(o),a.appendChild(r),i.push(r)}return i}},{key:"addSVGEvents",value:function(){var t=this.w,e=t.config.chart.type,i=this.getElTooltip(),a=!("bar"!==e&&"candlestick"!==e&&"rangeBar"!==e),s="area"===e||"line"===e||"scatter"===e||"bubble"===e||"radar"===e,r=t.globals.dom.Paper.node,n=this.getElGrid();n&&(this.seriesBound=n.getBoundingClientRect());var o,l=[],h=[],c={hoverArea:r,elGrid:n,tooltipEl:i,tooltipY:l,tooltipX:h,ttItems:this.ttItems};if(t.globals.axisCharts&&(s?o=t.globals.dom.baseEl.querySelectorAll(".apexcharts-series[data\\:longestSeries='true'] .apexcharts-marker"):a?o=t.globals.dom.baseEl.querySelectorAll(".apexcharts-series .apexcharts-bar-area, .apexcharts-series .apexcharts-candlestick-area, .apexcharts-series .apexcharts-rangebar-area"):"heatmap"===e&&(o=t.globals.dom.baseEl.querySelectorAll(".apexcharts-series .apexcharts-heatmap")),o&&o.length))for(var d=0;d<o.length;d++)l.push(o[d].getAttribute("cy")),h.push(o[d].getAttribute("cx"));if(t.globals.xyCharts&&!this.showOnIntersect||t.globals.comboCharts&&!this.showOnIntersect||a&&this.tooltipUtil.hasBars()&&this.tConfig.shared)this.addPathsEventListeners([r],c);else if(a&&!t.globals.comboCharts||s&&this.showOnIntersect)this.addDatapointEventsListeners(c);else if(!t.globals.axisCharts||"heatmap"===e){var g=t.globals.dom.baseEl.querySelectorAll(".apexcharts-series");this.addPathsEventListeners(g,c)}if(this.showOnIntersect){var u=t.globals.dom.baseEl.querySelectorAll(".apexcharts-line-series .apexcharts-marker, .apexcharts-area-series .apexcharts-marker");u.length>0&&this.addPathsEventListeners(u,c),this.tooltipUtil.hasBars()&&!this.tConfig.shared&&this.addDatapointEventsListeners(c)}}},{key:"drawFixedTooltipRect",value:function(){var t=this.w,e=this.getElTooltip(),i=e.getBoundingClientRect(),a=i.width+10,s=i.height+10,r=this.tConfig.fixed.offsetX,n=this.tConfig.fixed.offsetY,o=this.tConfig.fixed.position.toLowerCase();return o.indexOf("right")>-1&&(r=r+t.globals.svgWidth-a+10),o.indexOf("bottom")>-1&&(n=n+t.globals.svgHeight-s-10),e.style.left=r+"px",e.style.top=n+"px",{x:r,y:n,ttWidth:a,ttHeight:s}}},{key:"addDatapointEventsListeners",value:function(t){var e=this.w.globals.dom.baseEl.querySelectorAll(".apexcharts-series-markers .apexcharts-marker, .apexcharts-bar-area, .apexcharts-candlestick-area, .apexcharts-rangebar-area");this.addPathsEventListeners(e,t)}},{key:"addPathsEventListeners",value:function(t,e){for(var i=this,a=function(a){var s={paths:t[a],tooltipEl:e.tooltipEl,tooltipY:e.tooltipY,tooltipX:e.tooltipX,elGrid:e.elGrid,hoverArea:e.hoverArea,ttItems:e.ttItems};["mousemove","mouseup","touchmove","mouseout","touchend"].map((function(e){return t[a].addEventListener(e,i.seriesHover.bind(i,s),{capture:!1,passive:!0})}))},s=0;s<t.length;s++)a(s)}},{key:"seriesHover",value:function(t,e){var i=this,a=[],s=this.w;s.config.chart.group&&(a=this.ctx.getGroupedCharts()),s.globals.axisCharts&&(s.globals.minX===-1/0&&s.globals.maxX===1/0||0===s.globals.dataPoints)||(a.length?a.forEach((function(a){var s=i.getElTooltip(a),r={paths:t.paths,tooltipEl:s,tooltipY:t.tooltipY,tooltipX:t.tooltipX,elGrid:t.elGrid,hoverArea:t.hoverArea,ttItems:a.w.globals.tooltip.ttItems};a.w.globals.minX===i.w.globals.minX&&a.w.globals.maxX===i.w.globals.maxX&&a.w.globals.tooltip.seriesHoverByContext({chartCtx:a,ttCtx:a.w.globals.tooltip,opt:r,e:e})})):this.seriesHoverByContext({chartCtx:this.ctx,ttCtx:this.w.globals.tooltip,opt:t,e:e}))}},{key:"seriesHoverByContext",value:function(t){var e=t.chartCtx,i=t.ttCtx,a=t.opt,s=t.e,r=e.w,n=this.getElTooltip();(i.tooltipRect={x:0,y:0,ttWidth:n.getBoundingClientRect().width,ttHeight:n.getBoundingClientRect().height},i.e=s,!i.tooltipUtil.hasBars()||r.globals.comboCharts||i.isBarShared)||this.tConfig.onDatasetHover.highlightDataSeries&&new F(e).toggleSeriesOnHover(s,s.target.parentNode);i.fixedTooltip&&i.drawFixedTooltipRect(),r.globals.axisCharts?i.axisChartsTooltips({e:s,opt:a,tooltipRect:i.tooltipRect}):i.nonAxisChartsTooltips({e:s,opt:a,tooltipRect:i.tooltipRect})}},{key:"axisChartsTooltips",value:function(t){var e,i,a=t.e,s=t.opt,r=this.w,n=s.elGrid.getBoundingClientRect(),o="touchmove"===a.type?a.touches[0].clientX:a.clientX,l="touchmove"===a.type?a.touches[0].clientY:a.clientY;if(this.clientY=l,this.clientX=o,r.globals.capturedSeriesIndex=-1,r.globals.capturedDataPointIndex=-1,l<n.top||l>n.top+n.height)this.handleMouseOut(s);else{if(Array.isArray(this.tConfig.enabledOnSeries)&&!r.config.tooltip.shared){var h=parseInt(s.paths.getAttribute("index"),10);if(this.tConfig.enabledOnSeries.indexOf(h)<0)return void this.handleMouseOut(s)}var c=this.getElTooltip(),d=this.getElXCrosshairs(),g=r.globals.xyCharts||"bar"===r.config.chart.type&&!r.globals.isBarHorizontal&&this.tooltipUtil.hasBars()&&this.tConfig.shared||r.globals.comboCharts&&this.tooltipUtil.hasBars();if(r.globals.isBarHorizontal&&this.tooltipUtil.hasBars()&&(g=!1),"mousemove"===a.type||"touchmove"===a.type||"mouseup"===a.type){if(null!==d&&d.classList.add("apexcharts-active"),null!==this.ycrosshairs&&this.blyaxisTooltip&&this.ycrosshairs.classList.add("apexcharts-active"),g&&!this.showOnIntersect)this.handleStickyTooltip(a,o,l,s);else if("heatmap"===r.config.chart.type){var u=this.intersect.handleHeatTooltip({e:a,opt:s,x:e,y:i});e=u.x,i=u.y,c.style.left=e+"px",c.style.top=i+"px"}else this.tooltipUtil.hasBars()&&this.intersect.handleBarTooltip({e:a,opt:s}),this.tooltipUtil.hasMarkers()&&this.intersect.handleMarkerTooltip({e:a,opt:s,x:e,y:i});if(this.blyaxisTooltip)for(var f=0;f<r.config.yaxis.length;f++)this.axesTooltip.drawYaxisTooltipText(f,l,this.xyRatios);s.tooltipEl.classList.add("apexcharts-active")}else"mouseout"!==a.type&&"touchend"!==a.type||this.handleMouseOut(s)}}},{key:"nonAxisChartsTooltips",value:function(t){var e=t.e,i=t.opt,a=t.tooltipRect,s=this.w,r=i.paths.getAttribute("rel"),n=this.getElTooltip(),o=s.globals.dom.elWrap.getBoundingClientRect();if("mousemove"===e.type||"touchmove"===e.type){n.classList.add("apexcharts-active"),this.tooltipLabels.drawSeriesTexts({ttItems:i.ttItems,i:parseInt(r,10)-1,shared:!1});var l=s.globals.clientX-o.left-a.ttWidth/2,h=s.globals.clientY-o.top-a.ttHeight-10;n.style.left=l+"px",n.style.top=h+"px"}else"mouseout"!==e.type&&"touchend"!==e.type||n.classList.remove("apexcharts-active")}},{key:"handleStickyTooltip",value:function(t,e,i,a){var s=this.w,r=this.tooltipUtil.getNearestValues({context:this,hoverArea:a.hoverArea,elGrid:a.elGrid,clientX:e,clientY:i}),n=r.j,o=r.capturedSeries;r.hoverX<0||r.hoverX>s.globals.gridWidth?this.handleMouseOut(a):null!==o?this.handleStickyCapturedSeries(t,o,a,n):this.tooltipUtil.isXoverlap(n)&&this.create(t,this,0,n,a.ttItems)}},{key:"handleStickyCapturedSeries",value:function(t,e,i,a){var s=this.w;null===s.globals.series[e][a]?this.handleMouseOut(i):void 0!==s.globals.series[e][a]?this.tConfig.shared&&this.tooltipUtil.isXoverlap(a)&&this.tooltipUtil.isInitialSeriesSameLen()?this.create(t,this,e,a,i.ttItems):this.create(t,this,e,a,i.ttItems,!1):this.tooltipUtil.isXoverlap(a)&&this.create(t,this,0,a,i.ttItems)}},{key:"deactivateHoverFilter",value:function(){for(var t=this.w,e=new p(this.ctx),i=t.globals.dom.Paper.select(".apexcharts-bar-area"),a=0;a<i.length;a++)e.pathMouseLeave(i[a])}},{key:"handleMouseOut",value:function(t){var e=this.w,i=this.getElXCrosshairs();if(t.tooltipEl.classList.remove("apexcharts-active"),this.deactivateHoverFilter(),"bubble"!==e.config.chart.type&&this.marker.resetPointsSize(),null!==i&&i.classList.remove("apexcharts-active"),null!==this.ycrosshairs&&this.ycrosshairs.classList.remove("apexcharts-active"),this.blxaxisTooltip&&this.xaxisTooltip.classList.remove("apexcharts-active"),this.blyaxisTooltip){null===this.yaxisTTEls&&(this.yaxisTTEls=e.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxistooltip"));for(var a=0;a<this.yaxisTTEls.length;a++)this.yaxisTTEls[a].classList.remove("apexcharts-active")}e.config.legend.tooltipHoverFormatter&&this.legendLabels.forEach((function(t){var e=t.getAttribute("data:default-text");t.innerHTML=decodeURIComponent(e)}))}},{key:"markerClick",value:function(t,e,i){var a=this.w;"function"==typeof a.config.chart.events.markerClick&&a.config.chart.events.markerClick(t,this.ctx,{seriesIndex:e,dataPointIndex:i,w:a}),this.ctx.events.fireEvent("markerClick",[t,this.ctx,{seriesIndex:e,dataPointIndex:i,w:a}])}},{key:"create",value:function(t,e,i,a,s){var r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:null,n=this.w,o=e;"mouseup"===t.type&&this.markerClick(t,i,a),null===r&&(r=this.tConfig.shared);var l=this.tooltipUtil.hasMarkers(),h=this.tooltipUtil.getElBars();if(n.config.legend.tooltipHoverFormatter){var c=n.config.legend.tooltipHoverFormatter,d=Array.from(this.legendLabels);d.forEach((function(t){var e=t.getAttribute("data:default-text");t.innerHTML=decodeURIComponent(e)}));for(var g=0;g<d.length;g++){var u=d[g],f=parseInt(u.getAttribute("i"),10),x=decodeURIComponent(u.getAttribute("data:default-text")),b=c(x,{seriesIndex:r?f:i,dataPointIndex:a,w:n});if(r)u.innerHTML=n.globals.collapsedSeriesIndices.indexOf(f)<0?b:x;else if(u.innerHTML=f===i?b:x,i===f)break}}if(r){if(o.tooltipLabels.drawSeriesTexts({ttItems:s,i:i,j:a,shared:!this.showOnIntersect&&this.tConfig.shared}),l&&(n.globals.markers.largestSize>0?o.marker.enlargePoints(a):o.tooltipPosition.moveDynamicPointsOnHover(a)),this.tooltipUtil.hasBars()&&(this.barSeriesHeight=this.tooltipUtil.getBarsHeight(h),this.barSeriesHeight>0)){var m=new p(this.ctx),v=n.globals.dom.Paper.select(".apexcharts-bar-area[j='".concat(a,"']"));this.deactivateHoverFilter(),this.tooltipPosition.moveStickyTooltipOverBars(a);for(var y=0;y<v.length;y++)m.pathMouseEnter(v[y])}}else o.tooltipLabels.drawSeriesTexts({shared:!1,ttItems:s,i:i,j:a}),this.tooltipUtil.hasBars()&&o.tooltipPosition.moveStickyTooltipOverBars(a),l&&o.tooltipPosition.moveMarkers(i,a)}}]),t}(),pt=function(){function t(i){e(this,t),this.w=i.w,this.barCtx=i}return a(t,[{key:"handleBarDataLabels",value:function(t){var e=t.x,i=t.y,a=t.y1,s=t.y2,r=t.i,n=t.j,o=t.realIndex,l=t.series,h=t.barHeight,c=t.barWidth,d=t.barYPosition,g=t.visibleSeries,u=t.renderedPath,f=this.w,x=new p(this.barCtx.ctx),b=Array.isArray(this.barCtx.strokeWidth)?this.barCtx.strokeWidth[o]:this.barCtx.strokeWidth,m=e+parseFloat(c*g),v=i+parseFloat(h*g);f.globals.isXNumeric&&!f.globals.isBarHorizontal&&(m=e+parseFloat(c*(g+1)),v=i+parseFloat(h*(g+1))-b);var y=e,w=i,k={},A=f.config.dataLabels,S=this.barCtx.barOptions.dataLabels;void 0!==d&&this.barCtx.isTimelineBar&&(v=d,w=d);var C=A.offsetX,L=A.offsetY,P={width:0,height:0};f.config.dataLabels.enabled&&(P=x.getTextRects(f.globals.yLabelFormatters[0](f.globals.maxY),parseFloat(A.style.fontSize)));var T={x:e,y:i,i:r,j:n,renderedPath:u,bcx:m,bcy:v,barHeight:h,barWidth:c,textRects:P,strokeWidth:b,dataLabelsX:y,dataLabelsY:w,barDataLabelsConfig:S,offX:C,offY:L};return k=this.barCtx.isHorizontal?this.calculateBarsDataLabelsPosition(T):this.calculateColumnsDataLabelsPosition(T),u.attr({cy:k.bcy,cx:k.bcx,j:n,val:l[r][n],barHeight:h,barWidth:c}),this.drawCalculatedDataLabels({x:k.dataLabelsX,y:k.dataLabelsY,val:this.barCtx.isTimelineBar?[a,s]:l[r][n],i:o,j:n,barWidth:c,barHeight:h,textRects:P,dataLabelsConfig:A})}},{key:"calculateColumnsDataLabelsPosition",value:function(t){var e,i=this.w,a=t.i,s=t.j,r=t.y,n=t.bcx,o=t.barWidth,l=t.barHeight,h=t.textRects,c=t.dataLabelsY,d=t.barDataLabelsConfig,g=t.strokeWidth,u=t.offX,f=t.offY;l=Math.abs(l);var p="vertical"===i.config.plotOptions.bar.dataLabels.orientation;n-=g/2;var x=i.globals.gridWidth/i.globals.dataPoints;if(e=i.globals.isXNumeric?n-o/2+u:n-x+o/2+u,p){e=e+h.height/2-g/2-2}var b=this.barCtx.series[a][s]<0;switch(this.barCtx.isReversed&&(r-=l),d.position){case"center":c=p?b?r+l/2+f:r+l/2-f:b?r+l/2+h.height/2+f:r+l/2+h.height/2-f;break;case"bottom":c=p?b?r+l+f:r+l-f:b?r+l+h.height+g+f:r+l-h.height/2+g-f;break;case"top":c=p?b?r+f:r-f:b?r-h.height/2-f:r+h.height+f}return i.config.chart.stacked||(c<0?c=0+g:c+h.height/3>i.globals.gridHeight&&(c=i.globals.gridHeight-g)),{bcx:n,bcy:r,dataLabelsX:e,dataLabelsY:c}}},{key:"calculateBarsDataLabelsPosition",value:function(t){var e=this.w,i=t.x,a=t.i,s=t.j,r=t.bcy,n=t.barHeight,o=t.barWidth,l=t.textRects,h=t.dataLabelsX,c=t.strokeWidth,d=t.barDataLabelsConfig,g=t.offX,u=t.offY,f=e.globals.gridHeight/e.globals.dataPoints;o=Math.abs(o);var p=r-(this.barCtx.isTimelineBar?0:f)+n/2+l.height/2+u-3,x=this.barCtx.series[a][s]<0,b=i;switch(this.barCtx.isReversed&&(b=i+o,i=e.globals.gridWidth-o),d.position){case"center":h=x?b-o/2-g:b-o/2+g;break;case"bottom":h=x?b+o-c-Math.round(l.width/2)-g:b-o+c+Math.round(l.width/2)+g;break;case"top":h=x?b-c+Math.round(l.width/2)-g:b-c-Math.round(l.width/2)+g}return e.config.chart.stacked||(h<0?h=h+l.width+c:h+l.width/2>e.globals.gridWidth&&(h=e.globals.gridWidth-l.width-c)),{bcx:i,bcy:r,dataLabelsX:h,dataLabelsY:p}}},{key:"drawCalculatedDataLabels",value:function(t){var e=t.x,i=t.y,a=t.val,s=t.i,r=t.j,o=t.textRects,l=t.barHeight,h=t.barWidth,c=t.dataLabelsConfig,d=this.w,g="rotate(0)";"vertical"===d.config.plotOptions.bar.dataLabels.orientation&&(g="rotate(-90, ".concat(e,", ").concat(i,")"));var u=new Y(this.barCtx.ctx),f=new p(this.barCtx.ctx),x=c.formatter,b=null,m=d.globals.collapsedSeriesIndices.indexOf(s)>-1;if(c.enabled&&!m){b=f.group({class:"apexcharts-data-labels",transform:g});var v="";void 0!==a&&(v=x(a,{seriesIndex:s,dataPointIndex:r,w:d})),0===a&&d.config.chart.stacked&&(v="");var y=d.globals.series[s][r]<=0,w=d.config.plotOptions.bar.dataLabels.position;if("vertical"===d.config.plotOptions.bar.dataLabels.orientation&&("top"===w&&(c.textAnchor=y?"end":"start"),"center"===w&&(c.textAnchor="middle"),"bottom"===w&&(c.textAnchor=y?"end":"start")),this.barCtx.isTimelineBar&&this.barCtx.barOptions.dataLabels.hideOverflowingLabels)h<f.getTextRects(v,parseFloat(c.style.fontSize)).width&&(v="");d.config.chart.stacked&&this.barCtx.barOptions.dataLabels.hideOverflowingLabels&&(this.barCtx.isHorizontal?((h=Math.abs(d.globals.series[s][r])/this.barCtx.invertedYRatio[this.barCtx.yaxisIndex])>0&&o.width/1.6>h||h<0&&o.width/1.6<h)&&(v=""):(l=Math.abs(d.globals.series[s][r])/this.barCtx.yRatio[this.barCtx.yaxisIndex],o.height/1.6>l&&(v="")));var k=n({},c);this.barCtx.isHorizontal&&a<0&&("start"===c.textAnchor?k.textAnchor="end":"end"===c.textAnchor&&(k.textAnchor="start")),u.plotDataLabelsText({x:e,y:i,text:v,i:s,j:r,parent:b,dataLabelsConfig:k,alwaysDrawDataLabel:!0,offsetCorrection:!0})}return b}}]),t}(),xt=function(){function t(i){e(this,t),this.w=i.w,this.barCtx=i}return a(t,[{key:"initVariables",value:function(t){var e=this.w;this.barCtx.series=t,this.barCtx.totalItems=0,this.barCtx.seriesLen=0,this.barCtx.visibleI=-1,this.barCtx.visibleItems=1;for(var i=0;i<t.length;i++)if(t[i].length>0&&(this.barCtx.seriesLen=this.barCtx.seriesLen+1,this.barCtx.totalItems+=t[i].length),e.globals.isXNumeric)for(var a=0;a<t[i].length;a++)e.globals.seriesX[i][a]>e.globals.minX&&e.globals.seriesX[i][a]<e.globals.maxX&&this.barCtx.visibleItems++;else this.barCtx.visibleItems=e.globals.dataPoints;0===this.barCtx.seriesLen&&(this.barCtx.seriesLen=1)}},{key:"initialPositions",value:function(){var t,e,i,a,s,r,n,o,l=this.w,h=l.globals.dataPoints;if(this.barCtx.isTimelineBar&&(h=l.globals.labels.length),this.barCtx.isHorizontal)s=(i=l.globals.gridHeight/h)/this.barCtx.seriesLen,l.globals.isXNumeric&&(s=(i=l.globals.gridHeight/this.barCtx.totalItems)/this.barCtx.seriesLen),s=s*parseInt(this.barCtx.barOptions.barHeight,10)/100,o=this.barCtx.baseLineInvertedY+l.globals.padHorizontal+(this.barCtx.isReversed?l.globals.gridWidth:0)-(this.barCtx.isReversed?2*this.barCtx.baseLineInvertedY:0),e=(i-s*this.barCtx.seriesLen)/2;else{if(a=l.globals.gridWidth/this.barCtx.visibleItems,l.config.xaxis.convertedCatToNumeric&&(a=l.globals.gridWidth/l.globals.dataPoints),r=a/this.barCtx.seriesLen*parseInt(this.barCtx.barOptions.columnWidth,10)/100,l.globals.isXNumeric){var c=this.barCtx.xRatio;l.config.xaxis.convertedCatToNumeric&&(c=this.barCtx.initialXRatio),l.globals.minXDiff&&l.globals.minXDiff/c>0&&(a=l.globals.minXDiff/c),(r=a/this.barCtx.seriesLen*parseInt(this.barCtx.barOptions.columnWidth,10)/100)<1&&(r=1)}n=l.globals.gridHeight-this.barCtx.baseLineY[this.barCtx.yaxisIndex]-(this.barCtx.isReversed?l.globals.gridHeight:0)+(this.barCtx.isReversed?2*this.barCtx.baseLineY[this.barCtx.yaxisIndex]:0),t=l.globals.padHorizontal+(a-r*this.barCtx.seriesLen)/2}return{x:t,y:e,yDivision:i,xDivision:a,barHeight:s,barWidth:r,zeroH:n,zeroW:o}}},{key:"getPathFillColor",value:function(t,e,i,a){var s=this.w,r=new M(this.barCtx.ctx),n=null,o=this.barCtx.barOptions.distributed?i:e;this.barCtx.barOptions.colors.ranges.length>0&&this.barCtx.barOptions.colors.ranges.map((function(a){t[e][i]>=a.from&&t[e][i]<=a.to&&(n=a.color)}));return s.config.series[e].data[i]&&s.config.series[e].data[i].fillColor&&(n=s.config.series[e].data[i].fillColor),r.fillPath({seriesNumber:this.barCtx.barOptions.distributed?o:a,dataPointIndex:i,color:n,value:t[e][i]})}},{key:"getStrokeWidth",value:function(t,e,i){var a=0,s=this.w;return void 0===this.barCtx.series[t][e]||null===this.barCtx.series[t][e]?this.barCtx.isNullValue=!0:this.barCtx.isNullValue=!1,s.config.stroke.show&&(this.barCtx.isNullValue||(a=Array.isArray(this.barCtx.strokeWidth)?this.barCtx.strokeWidth[i]:this.barCtx.strokeWidth)),a}},{key:"barBackground",value:function(t){var e=t.bc,i=t.i,a=t.x1,s=t.x2,r=t.y1,n=t.y2,o=t.elSeries,l=this.w,h=new p(this.barCtx.ctx),c=new F(this.barCtx.ctx).getActiveConfigSeriesIndex();if(this.barCtx.barOptions.colors.backgroundBarColors.length>0&&c===i){e>=this.barCtx.barOptions.colors.backgroundBarColors.length&&(e=0);var d=this.barCtx.barOptions.colors.backgroundBarColors[e],g=h.drawRect(void 0!==a?a:0,void 0!==r?r:0,void 0!==s?s:l.globals.gridWidth,void 0!==n?n:l.globals.gridHeight,this.barCtx.barOptions.colors.backgroundBarRadius,d,this.barCtx.barOptions.colors.backgroundBarOpacity);o.add(g),g.node.classList.add("apexcharts-backgroundBar")}}},{key:"getColumnPaths",value:function(t){var e=t.barWidth,i=t.barXPosition,a=t.yRatio,s=t.y1,r=t.y2,n=t.strokeWidth,o=t.series,l=t.i,h=t.j,c=t.w,d=new p(this.barCtx.ctx);(n=Array.isArray(n)?n[l]:n)||(n=0);var g={barWidth:e,strokeWidth:n,yRatio:a,barXPosition:i,y1:s,y2:r},u=this.getRoundedBars(c,g,o,l,h),f=i,x=i+e,b=d.move(f,u.y1),m=d.move(f,u.y1);return c.globals.previousPaths.length>0&&(m=this.barCtx.getPreviousPath(l,h,!1)),{pathTo:b=b+d.line(f,u.y2)+u.endingPath+d.line(x-n,u.y2)+d.line(x-n,u.y1)+u.startingPath+"z",pathFrom:m=m+d.line(f,s)+d.line(x-n,s)+d.line(x-n,s)+d.line(x-n,s)+d.line(f,s)}}},{key:"getBarpaths",value:function(t){var e=t.barYPosition,i=t.barHeight,a=t.x1,s=t.x2,r=t.strokeWidth,n=t.series,o=t.i,l=t.j,h=t.w,c=new p(this.barCtx.ctx);(r=Array.isArray(r)?r[o]:r)||(r=0);var d={barHeight:i,strokeWidth:r,barYPosition:e,x2:s,x1:a},g=this.getRoundedBars(h,d,n,o,l),u=c.move(g.x1,e),f=c.move(g.x1,e);h.globals.previousPaths.length>0&&(f=this.barCtx.getPreviousPath(o,l,!1));var x=e,b=e+i;return{pathTo:u=u+c.line(g.x2,x)+g.endingPath+c.line(g.x2,b-r)+c.line(g.x1,b-r)+g.startingPath+"z",pathFrom:f=f+c.line(a,x)+c.line(a,b-r)+c.line(a,b-r)+c.line(a,b-r)+c.line(a,x)}}},{key:"getRoundedBars",value:function(t,e,i,a,s){var r=new p(this.barCtx.ctx),n=Array.isArray(e.strokeWidth)?e.strokeWidth[a]:e.strokeWidth;if(n||(n=0),this.barCtx.isHorizontal){var o=null,l="",h=e.x2,c=e.x1;if(void 0!==i[a][s]||null!==i[a][s]){var d=i[a][s]<0,g=e.barHeight/2-n;switch(d&&(g=-e.barHeight/2-n),g>Math.abs(h-c)&&(g=Math.abs(h-c)),"rounded"===this.barCtx.barOptions.endingShape&&(h=e.x2-g/2),"rounded"===this.barCtx.barOptions.startingShape&&(c=e.x1+g/2),this.barCtx.barOptions.endingShape){case"flat":o=r.line(h,e.barYPosition+e.barHeight-n);break;case"rounded":o=r.quadraticCurve(h+g,e.barYPosition+(e.barHeight-n)/2,h,e.barYPosition+e.barHeight-n)}switch(this.barCtx.barOptions.startingShape){case"flat":l=r.line(c,e.barYPosition+e.barHeight-n);break;case"rounded":l=r.quadraticCurve(c-g,e.barYPosition+e.barHeight/2,c,e.barYPosition)}}return{endingPath:o,startingPath:l,x2:h,x1:c}}var u=null,f="",x=e.y2,b=e.y1;if(void 0!==i[a][s]||null!==i[a][s]){var m=i[a][s]<0,v=e.barWidth/2-n;switch(m&&(v=-e.barWidth/2-n),v>Math.abs(x-b)&&(v=Math.abs(x-b)),"rounded"===this.barCtx.barOptions.endingShape&&(x+=v/2),"rounded"===this.barCtx.barOptions.startingShape&&(b-=v/2),this.barCtx.barOptions.endingShape){case"flat":u=r.line(e.barXPosition+e.barWidth-n,x);break;case"rounded":u=r.quadraticCurve(e.barXPosition+(e.barWidth-n)/2,x-v,e.barXPosition+e.barWidth-n,x)}switch(this.barCtx.barOptions.startingShape){case"flat":f=r.line(e.barXPosition+e.barWidth-n,b);break;case"rounded":f=r.quadraticCurve(e.barXPosition+(e.barWidth-n)/2,b+v,e.barXPosition,b)}}return{endingPath:u,startingPath:f,y2:x,y1:b}}}]),t}(),bt=function(){function t(i,a){e(this,t),this.ctx=i,this.w=i.w;var s=this.w;this.barOptions=s.config.plotOptions.bar,this.isHorizontal=this.barOptions.horizontal,this.strokeWidth=s.config.stroke.width,this.isNullValue=!1,this.isTimelineBar="datetime"===s.config.xaxis.type&&s.globals.seriesRangeBarTimeline.length,this.xyRatios=a,null!==this.xyRatios&&(this.xRatio=a.xRatio,this.initialXRatio=a.initialXRatio,this.yRatio=a.yRatio,this.invertedXRatio=a.invertedXRatio,this.invertedYRatio=a.invertedYRatio,this.baseLineY=a.baseLineY,this.baseLineInvertedY=a.baseLineInvertedY),this.yaxisIndex=0,this.seriesLen=0,this.barHelpers=new xt(this)}return a(t,[{key:"draw",value:function(t,e){var i=this.w,a=new p(this.ctx),s=new I(this.ctx,i);t=s.getLogSeries(t),this.series=t,this.yRatio=s.getLogYRatios(this.yRatio),this.barHelpers.initVariables(t);var r=a.group({class:"apexcharts-bar-series apexcharts-plot-series"});i.config.dataLabels.enabled&&this.totalItems>this.barOptions.dataLabels.maxItems&&console.warn("WARNING: DataLabels are enabled but there are too many to display. This may cause performance issue when rendering.");for(var o=0,l=0;o<t.length;o++,l++){var h,c,d,u,f=void 0,x=void 0,b=[],m=[],v=i.globals.comboCharts?e[o]:o,y=a.group({class:"apexcharts-series",rel:o+1,seriesName:g.escapeString(i.globals.seriesNames[v]),"data:realIndex":v});this.ctx.series.addCollapsedClassToSeries(y,v),t[o].length>0&&(this.visibleI=this.visibleI+1);var w=0,k=0;this.yRatio.length>1&&(this.yaxisIndex=v),this.isReversed=i.config.yaxis[this.yaxisIndex]&&i.config.yaxis[this.yaxisIndex].reversed;var A=this.barHelpers.initialPositions();x=A.y,w=A.barHeight,c=A.yDivision,u=A.zeroW,f=A.x,k=A.barWidth,h=A.xDivision,d=A.zeroH,this.horizontal||m.push(f+k/2);for(var S=a.group({class:"apexcharts-datalabels","data:realIndex":v}),C=0;C<i.globals.dataPoints;C++){var L=this.barHelpers.getStrokeWidth(o,C,v),P=null,T={indexes:{i:o,j:C,realIndex:v,bc:l},x:f,y:x,strokeWidth:L,elSeries:y};this.isHorizontal?(P=this.drawBarPaths(n({},T,{barHeight:w,zeroW:u,yDivision:c})),k=this.series[o][C]/this.invertedYRatio):(P=this.drawColumnPaths(n({},T,{xDivision:h,barWidth:k,zeroH:d})),w=this.series[o][C]/this.yRatio[this.yaxisIndex]),x=P.y,f=P.x,C>0&&m.push(f+k/2),b.push(x);var z=this.barHelpers.getPathFillColor(t,o,C,v);this.renderSeries({realIndex:v,pathFill:z,j:C,i:o,pathFrom:P.pathFrom,pathTo:P.pathTo,strokeWidth:L,elSeries:y,x:f,y:x,series:t,barHeight:w,barWidth:k,elDataLabelsWrap:S,visibleSeries:this.visibleI,type:"bar"})}i.globals.seriesXvalues[v]=m,i.globals.seriesYvalues[v]=b,r.add(y)}return r}},{key:"renderSeries",value:function(t){var e=t.realIndex,i=t.pathFill,a=t.lineFill,s=t.j,r=t.i,n=t.pathFrom,o=t.pathTo,l=t.strokeWidth,h=t.elSeries,c=t.x,d=t.y,g=t.y1,f=t.y2,x=t.series,b=t.barHeight,m=t.barWidth,v=t.barYPosition,y=t.elDataLabelsWrap,w=t.visibleSeries,k=t.type,A=this.w,S=new p(this.ctx);a||(a=this.barOptions.distributed?A.globals.stroke.colors[s]:A.globals.stroke.colors[e]),A.config.series[r].data[s]&&A.config.series[r].data[s].strokeColor&&(a=A.config.series[r].data[s].strokeColor),this.isNullValue&&(i="none");var C=s/A.config.chart.animations.animateGradually.delay*(A.config.chart.animations.speed/A.globals.dataPoints)/2.4,L=S.renderPaths({i:r,j:s,realIndex:e,pathFrom:n,pathTo:o,stroke:a,strokeWidth:l,strokeLineCap:A.config.stroke.lineCap,fill:i,animationDelay:C,initialSpeed:A.config.chart.animations.speed,dataChangeSpeed:A.config.chart.animations.dynamicAnimation.speed,className:"apexcharts-".concat(k,"-area")});L.attr("clip-path","url(#gridRectMask".concat(A.globals.cuid,")")),void 0!==g&&void 0!==f&&(L.attr("data-range-y1",g),L.attr("data-range-y2",f)),new u(this.ctx).setSelectionFilter(L,e,s),h.add(L);var P=new pt(this).handleBarDataLabels({x:c,y:d,y1:g,y2:f,i:r,j:s,series:x,realIndex:e,barHeight:b,barWidth:m,barYPosition:v,renderedPath:L,visibleSeries:w});return null!==P&&y.add(P),h.add(y),h}},{key:"drawBarPaths",value:function(t){var e=t.indexes,i=t.barHeight,a=t.strokeWidth,s=t.zeroW,r=t.x,n=t.y,o=t.yDivision,l=t.elSeries,h=this.w,c=e.i,d=e.j,g=e.bc;h.globals.isXNumeric&&(n=(h.globals.seriesX[c][d]-h.globals.minX)/this.invertedXRatio-i);var u=n+i*this.visibleI;r=void 0===this.series[c][d]||null===this.series[c][d]?s:s+this.series[c][d]/this.invertedYRatio-2*(this.isReversed?this.series[c][d]/this.invertedYRatio:0);var f=this.barHelpers.getBarpaths({barYPosition:u,barHeight:i,x1:s,x2:r,strokeWidth:a,series:this.series,i:c,j:d,w:h});return h.globals.isXNumeric||(n+=o),this.barHelpers.barBackground({bc:g,i:c,y1:u-i*this.visibleI,y2:i*this.seriesLen,elSeries:l}),{pathTo:f.pathTo,pathFrom:f.pathFrom,x:r,y:n,barYPosition:u}}},{key:"drawColumnPaths",value:function(t){var e=t.indexes,i=t.x,a=t.y,s=t.xDivision,r=t.barWidth,n=t.zeroH,o=t.strokeWidth,l=t.elSeries,h=this.w,c=e.i,d=e.j,g=e.bc;if(h.globals.isXNumeric){var u=c;h.globals.seriesX[c].length||(u=h.globals.maxValsInArrayIndex),i=(h.globals.seriesX[u][d]-h.globals.minX)/this.xRatio-r*this.seriesLen/2}var f=i+r*this.visibleI;a=void 0===this.series[c][d]||null===this.series[c][d]?n:n-this.series[c][d]/this.yRatio[this.yaxisIndex]+2*(this.isReversed?this.series[c][d]/this.yRatio[this.yaxisIndex]:0);var p=this.barHelpers.getColumnPaths({barXPosition:f,barWidth:r,y1:n,y2:a,strokeWidth:o,series:this.series,i:c,j:d,w:h});return h.globals.isXNumeric||(i+=s),this.barHelpers.barBackground({bc:g,i:c,x1:f-o/2-r*this.visibleI,x2:r*this.seriesLen+o/2,elSeries:l}),{pathTo:p.pathTo,pathFrom:p.pathFrom,x:i,y:a,barXPosition:f}}},{key:"getPreviousPath",value:function(t,e){for(var i,a=this.w,s=0;s<a.globals.previousPaths.length;s++){var r=a.globals.previousPaths[s];r.paths&&r.paths.length>0&&parseInt(r.realIndex,10)===parseInt(t,10)&&void 0!==a.globals.previousPaths[s].paths[e]&&(i=a.globals.previousPaths[s].paths[e].d)}return i}}]),t}(),mt=function(t){function i(){return e(this,i),c(this,l(i).apply(this,arguments))}return o(i,t),a(i,[{key:"draw",value:function(t,e){var i=this,a=this.w;this.graphics=new p(this.ctx),this.bar=new bt(this.ctx,this.xyRatios);var s=new I(this.ctx,a);t=s.getLogSeries(t),this.yRatio=s.getLogYRatios(this.yRatio),this.barHelpers.initVariables(t),"100%"===a.config.chart.stackType&&(t=a.globals.seriesPercent.slice()),this.series=t,this.totalItems=0,this.prevY=[],this.prevX=[],this.prevYF=[],this.prevXF=[],this.prevYVal=[],this.prevXVal=[],this.xArrj=[],this.xArrjF=[],this.xArrjVal=[],this.yArrj=[],this.yArrjF=[],this.yArrjVal=[];for(var r=0;r<t.length;r++)t[r].length>0&&(this.totalItems+=t[r].length);for(var o=this.graphics.group({class:"apexcharts-bar-series apexcharts-plot-series"}),l=0,h=0,c=function(s,r){var c=void 0,d=void 0,u=void 0,f=void 0,p=[],x=[],b=a.globals.comboCharts?e[s]:s;i.yRatio.length>1&&(i.yaxisIndex=b),i.isReversed=a.config.yaxis[i.yaxisIndex]&&a.config.yaxis[i.yaxisIndex].reversed;var m=i.graphics.group({class:"apexcharts-series",seriesName:g.escapeString(a.globals.seriesNames[b]),rel:s+1,"data:realIndex":b}),v=i.graphics.group({class:"apexcharts-datalabels","data:realIndex":b}),y=0,w=0,k=i.initialPositions(l,h,c,d,u,f);h=k.y,y=k.barHeight,d=k.yDivision,f=k.zeroW,l=k.x,w=k.barWidth,c=k.xDivision,u=k.zeroH,i.yArrj=[],i.yArrjF=[],i.yArrjVal=[],i.xArrj=[],i.xArrjF=[],i.xArrjVal=[],1===i.prevY.length&&i.prevY[0].every((function(t){return isNaN(t)}))&&(i.prevY[0]=i.prevY[0].map((function(t){return u})),i.prevYF[0]=i.prevYF[0].map((function(t){return 0})));for(var A=0;A<a.globals.dataPoints;A++){var S=i.barHelpers.getStrokeWidth(s,A,b),C={indexes:{i:s,j:A,realIndex:b,bc:r},strokeWidth:S,x:l,y:h,elSeries:m},L=null;i.isHorizontal?(L=i.drawStackedBarPaths(n({},C,{zeroW:f,barHeight:y,yDivision:d})),w=i.series[s][A]/i.invertedYRatio):(L=i.drawStackedColumnPaths(n({},C,{xDivision:c,barWidth:w,zeroH:u})),y=i.series[s][A]/i.yRatio[i.yaxisIndex]),h=L.y,l=L.x,p.push(l),x.push(h);var P=i.barHelpers.getPathFillColor(t,s,A,b);m=i.renderSeries({realIndex:b,pathFill:P,j:A,i:s,pathFrom:L.pathFrom,pathTo:L.pathTo,strokeWidth:S,elSeries:m,x:l,y:h,series:t,barHeight:y,barWidth:w,elDataLabelsWrap:v,type:"bar",visibleSeries:0})}a.globals.seriesXvalues[b]=p,a.globals.seriesYvalues[b]=x,i.prevY.push(i.yArrj),i.prevYF.push(i.yArrjF),i.prevYVal.push(i.yArrjVal),i.prevX.push(i.xArrj),i.prevXF.push(i.xArrjF),i.prevXVal.push(i.xArrjVal),o.add(m)},d=0,u=0;d<t.length;d++,u++)c(d,u);return o}},{key:"initialPositions",value:function(t,e,i,a,s,r){var n,o,l=this.w;return this.isHorizontal?(n=(n=a=l.globals.gridHeight/l.globals.dataPoints)*parseInt(l.config.plotOptions.bar.barHeight,10)/100,r=this.baseLineInvertedY+l.globals.padHorizontal+(this.isReversed?l.globals.gridWidth:0)-(this.isReversed?2*this.baseLineInvertedY:0),e=(a-n)/2):(o=i=l.globals.gridWidth/l.globals.dataPoints,o=l.globals.isXNumeric?(i=l.globals.minXDiff/this.xRatio)*parseInt(this.barOptions.columnWidth,10)/100:o*parseInt(l.config.plotOptions.bar.columnWidth,10)/100,s=this.baseLineY[this.yaxisIndex]+(this.isReversed?l.globals.gridHeight:0)-(this.isReversed?2*this.baseLineY[this.yaxisIndex]:0),t=l.globals.padHorizontal+(i-o)/2),{x:t,y:e,yDivision:a,xDivision:i,barHeight:n,barWidth:o,zeroH:s,zeroW:r}}},{key:"drawStackedBarPaths",value:function(t){for(var e,i=t.indexes,a=t.barHeight,s=t.strokeWidth,r=t.zeroW,n=t.x,o=t.y,l=t.yDivision,h=t.elSeries,c=this.w,d=o,g=i.i,u=i.j,f=i.bc,p=0,x=0;x<this.prevXF.length;x++)p+=this.prevXF[x][u];if(g>0){var b=r;this.prevXVal[g-1][u]<0?b=this.series[g][u]>=0?this.prevX[g-1][u]+p-2*(this.isReversed?p:0):this.prevX[g-1][u]:this.prevXVal[g-1][u]>=0&&(b=this.series[g][u]>=0?this.prevX[g-1][u]:this.prevX[g-1][u]-p+2*(this.isReversed?p:0)),e=b}else e=r;n=null===this.series[g][u]?e:e+this.series[g][u]/this.invertedYRatio-2*(this.isReversed?this.series[g][u]/this.invertedYRatio:0),this.xArrj.push(n),this.xArrjF.push(Math.abs(e-n)),this.xArrjVal.push(this.series[g][u]);var m=this.barHelpers.getBarpaths({barYPosition:d,barHeight:a,x1:e,x2:n,strokeWidth:s,series:this.series,i:g,j:u,w:c});return this.barHelpers.barBackground({bc:f,i:g,y1:d,y2:a,elSeries:h}),o+=l,{pathTo:m.pathTo,pathFrom:m.pathFrom,x:n,y:o}}},{key:"drawStackedColumnPaths",value:function(t){var e=t.indexes,i=t.x,a=t.y,s=t.xDivision,r=t.barWidth,n=t.zeroH,o=(t.strokeWidth,t.elSeries),l=this.w,h=e.i,c=e.j,d=e.bc;if(l.globals.isXNumeric){var g=l.globals.seriesX[h][c];g||(g=0),i=(g-l.globals.minX)/this.xRatio-r/2}for(var u,f=i,p=0,x=0;x<this.prevYF.length;x++)p+=isNaN(this.prevYF[x][c])?0:this.prevYF[x][c];if(h>0&&!l.globals.isXNumeric||h>0&&l.globals.isXNumeric&&l.globals.seriesX[h-1][c]===l.globals.seriesX[h][c]){var b,m,v=Math.min(this.yRatio.length+1,h+1);if(void 0!==this.prevY[h-1])for(var y=1;y<v;y++)if(!isNaN(this.prevY[h-y][c])){m=this.prevY[h-y][c];break}for(var w=1;w<v;w++){if(this.prevYVal[h-w][c]<0){b=this.series[h][c]>=0?m-p+2*(this.isReversed?p:0):m;break}if(this.prevYVal[h-w][c]>=0){b=this.series[h][c]>=0?m:m+p-2*(this.isReversed?p:0);break}}void 0===b&&(b=l.globals.gridHeight),u=this.prevYF[0].every((function(t){return 0===t}))&&this.prevYF.slice(1,h).every((function(t){return t.every((function(t){return isNaN(t)}))}))?l.globals.gridHeight-n:b}else u=l.globals.gridHeight-n;a=u-this.series[h][c]/this.yRatio[this.yaxisIndex]+2*(this.isReversed?this.series[h][c]/this.yRatio[this.yaxisIndex]:0),this.yArrj.push(a),this.yArrjF.push(Math.abs(u-a)),this.yArrjVal.push(this.series[h][c]);var k=this.barHelpers.getColumnPaths({barXPosition:f,barWidth:r,y1:u,y2:a,yRatio:this.yRatio[this.yaxisIndex],strokeWidth:this.strokeWidth,series:this.series,i:h,j:c,w:l});return this.barHelpers.barBackground({bc:d,i:h,x1:f,x2:r,elSeries:o}),i+=s,{pathTo:k.pathTo,pathFrom:k.pathFrom,x:l.globals.isXNumeric?i-s:i,y:a}}}]),i}(bt),vt=function(t){function i(){return e(this,i),c(this,l(i).apply(this,arguments))}return o(i,t),a(i,[{key:"draw",value:function(t,e){var i=this.w,a=new p(this.ctx),s=new M(this.ctx);this.candlestickOptions=this.w.config.plotOptions.candlestick;var r=new I(this.ctx,i);t=r.getLogSeries(t),this.series=t,this.yRatio=r.getLogYRatios(this.yRatio),this.barHelpers.initVariables(t);for(var n=a.group({class:"apexcharts-candlestick-series apexcharts-plot-series"}),o=0;o<t.length;o++){var l,h,c=void 0,d=void 0,u=[],f=[],x=i.globals.comboCharts?e[o]:o,b=a.group({class:"apexcharts-series",seriesName:g.escapeString(i.globals.seriesNames[x]),rel:o+1,"data:realIndex":x});t[o].length>0&&(this.visibleI=this.visibleI+1);var m,v;this.yRatio.length>1&&(this.yaxisIndex=x);var y=this.barHelpers.initialPositions();d=y.y,m=y.barHeight,c=y.x,v=y.barWidth,l=y.xDivision,h=y.zeroH,f.push(c+v/2);for(var w=a.group({class:"apexcharts-datalabels","data:realIndex":x}),k=0;k<i.globals.dataPoints;k++){var A,S=this.barHelpers.getStrokeWidth(o,k,x),C=this.drawCandleStickPaths({indexes:{i:o,j:k,realIndex:x},x:c,y:d,xDivision:l,barWidth:v,zeroH:h,strokeWidth:S,elSeries:b});d=C.y,c=C.x,A=C.color,k>0&&f.push(c+v/2),u.push(d);var L=s.fillPath({seriesNumber:x,dataPointIndex:k,color:A,value:t[o][k]}),P=this.candlestickOptions.wick.useFillColor?A:void 0;this.renderSeries({realIndex:x,pathFill:L,lineFill:P,j:k,i:o,pathFrom:C.pathFrom,pathTo:C.pathTo,strokeWidth:S,elSeries:b,x:c,y:d,series:t,barHeight:m,barWidth:v,elDataLabelsWrap:w,visibleSeries:this.visibleI,type:"candlestick"})}i.globals.seriesXvalues[x]=f,i.globals.seriesYvalues[x]=u,n.add(b)}return n}},{key:"drawCandleStickPaths",value:function(t){var e=t.indexes,i=t.x,a=(t.y,t.xDivision),s=t.barWidth,r=t.zeroH,n=t.strokeWidth,o=this.w,l=new p(this.ctx),h=e.i,c=e.j,d=!0,g=o.config.plotOptions.candlestick.colors.upward,u=o.config.plotOptions.candlestick.colors.downward,f=this.yRatio[this.yaxisIndex],x=e.realIndex,b=this.getOHLCValue(x,c),m=r,v=r;b.o>b.c&&(d=!1);var y=Math.min(b.o,b.c),w=Math.max(b.o,b.c);o.globals.isXNumeric&&(i=(o.globals.seriesX[x][c]-o.globals.minX)/this.xRatio-s/2);var k=i+s*this.visibleI;void 0===this.series[h][c]||null===this.series[h][c]?y=r:(y=r-y/f,w=r-w/f,m=r-b.h/f,v=r-b.l/f);var A=l.move(k,r),S=l.move(k,y);return o.globals.previousPaths.length>0&&(S=this.getPreviousPath(x,c,!0)),A=l.move(k,w)+l.line(k+s/2,w)+l.line(k+s/2,m)+l.line(k+s/2,w)+l.line(k+s,w)+l.line(k+s,y)+l.line(k+s/2,y)+l.line(k+s/2,v)+l.line(k+s/2,y)+l.line(k,y)+l.line(k,w-n/2),S+=l.move(k,y),o.globals.isXNumeric||(i+=a),{pathTo:A,pathFrom:S,x:i,y:w,barXPosition:k,color:d?g:u}}},{key:"getOHLCValue",value:function(t,e){var i=this.w;return{o:i.globals.seriesCandleO[t][e],h:i.globals.seriesCandleH[t][e],l:i.globals.seriesCandleL[t][e],c:i.globals.seriesCandleC[t][e]}}}]),i}(bt),yt=function(){function t(i,a){e(this,t),this.ctx=i,this.w=i.w,this.xRatio=a.xRatio,this.yRatio=a.yRatio,this.negRange=!1,this.dynamicAnim=this.w.config.chart.animations.dynamicAnimation,this.rectRadius=this.w.config.plotOptions.heatmap.radius,this.strokeWidth=this.w.config.stroke.show?this.w.config.stroke.width:0}return a(t,[{key:"draw",value:function(t){var e=this.w,i=new p(this.ctx),a=i.group({class:"apexcharts-heatmap"});a.attr("clip-path","url(#gridRectMask".concat(e.globals.cuid,")"));var s=e.globals.gridWidth/e.globals.dataPoints,r=e.globals.gridHeight/e.globals.series.length,n=0,o=!1;this.checkColorRange();var l=t.slice();e.config.yaxis[0].reversed&&(o=!0,l.reverse());for(var h=o?0:l.length-1;o?h<l.length:h>=0;o?h++:h--){var c=i.group({class:"apexcharts-series apexcharts-heatmap-series",seriesName:g.escapeString(e.globals.seriesNames[h]),rel:h+1,"data:realIndex":h});if(e.config.chart.dropShadow.enabled){var d=e.config.chart.dropShadow;new u(this.ctx).dropShadow(c,d,h)}for(var f=0,x=0;x<l[h].length;x++){var b=1,m=e.config.plotOptions.heatmap.shadeIntensity,v=this.determineHeatColor(h,x);b=e.globals.hasNegs||this.negRange?e.config.plotOptions.heatmap.reverseNegativeShade?v.percent<0?v.percent/100*(1.25*m):(1-v.percent/100)*(1.25*m):v.percent<=0?1-(1+v.percent/100)*m:(1-v.percent/100)*m:1-v.percent/100;var y=v.color,w=new g;if(e.config.plotOptions.heatmap.enableShades&&(b<0&&(b=0),y=g.hexToRgba(w.shadeColor(b,v.color),e.config.fill.opacity)),"image"===e.config.fill.type)y=new M(this.ctx).fillPath({seriesNumber:h,dataPointIndex:x,opacity:e.globals.hasNegs?v.percent<0?1-(1+v.percent/100):m+v.percent/100:v.percent/100,patternID:g.randomId(),width:e.config.fill.image.width?e.config.fill.image.width:s,height:e.config.fill.image.height?e.config.fill.image.height:r});var k=this.rectRadius,A=i.drawRect(f,n,s,r,k);if(A.attr({cx:f,cy:n}),A.node.classList.add("apexcharts-heatmap-rect"),c.add(A),A.attr({fill:y,i:h,index:h,j:x,val:l[h][x],"stroke-width":this.strokeWidth,stroke:e.config.plotOptions.heatmap.useFillColorAsStroke?y:e.globals.stroke.colors[0],color:y}),A.node.addEventListener("mouseenter",i.pathMouseEnter.bind(this,A)),A.node.addEventListener("mouseleave",i.pathMouseLeave.bind(this,A)),A.node.addEventListener("mousedown",i.pathMouseDown.bind(this,A)),e.config.chart.animations.enabled&&!e.globals.dataChanged){var S=1;e.globals.resized||(S=e.config.chart.animations.speed),this.animateHeatMap(A,f,n,s,r,S)}if(e.globals.dataChanged){var C=1;if(this.dynamicAnim.enabled&&e.globals.shouldAnimate){C=this.dynamicAnim.speed;var L=e.globals.previousPaths[h]&&e.globals.previousPaths[h][x]&&e.globals.previousPaths[h][x].color;L||(L="rgba(255, 255, 255, 0)"),this.animateHeatColor(A,g.isColorHex(L)?L:g.rgb2hex(L),g.isColorHex(y)?y:g.rgb2hex(y),C)}}var P=this.calculateHeatmapDataLabels({x:f,y:n,i:h,j:x,heatColorProps:v,series:l,rectHeight:r,rectWidth:s});null!==P&&c.add(P),f+=s}n+=r,a.add(c)}var T=e.globals.yAxisScale[0].result.slice();e.config.yaxis[0].reversed?T.unshift(""):T.push(""),e.globals.yAxisScale[0].result=T;var z=e.globals.gridHeight/e.globals.series.length;return e.config.yaxis[0].labels.offsetY=-z/2,a}},{key:"checkColorRange",value:function(){var t=this,e=this.w.config.plotOptions.heatmap;e.colorScale.ranges.length>0&&e.colorScale.ranges.map((function(e,i){e.from<=0&&(t.negRange=!0)}))}},{key:"determineHeatColor",value:function(t,e){var i=this.w,a=i.globals.series[t][e],s=i.config.plotOptions.heatmap,r=s.colorScale.inverse?e:t,n=i.globals.colors[r],o=null,l=Math.min.apply(Math,d(i.globals.series[t])),h=Math.max.apply(Math,d(i.globals.series[t]));s.distributed||(l=i.globals.minY,h=i.globals.maxY),void 0!==s.colorScale.min&&(l=s.colorScale.min<i.globals.minY?s.colorScale.min:i.globals.minY,h=s.colorScale.max>i.globals.maxY?s.colorScale.max:i.globals.maxY);var c=Math.abs(h)+Math.abs(l),g=100*a/(0===c?c-1e-6:c);s.colorScale.ranges.length>0&&s.colorScale.ranges.map((function(t,e){if(a>=t.from&&a<=t.to){n=t.color,o=t.foreColor?t.foreColor:null,l=t.from,h=t.to;var i=Math.abs(h)+Math.abs(l);g=100*a/(0===i?i-1e-6:i)}}));return{color:n,foreColor:o,percent:g}}},{key:"calculateHeatmapDataLabels",value:function(t){var e=t.x,i=t.y,a=t.i,s=t.j,r=t.heatColorProps,n=(t.series,t.rectHeight),o=t.rectWidth,l=this.w,h=l.config.dataLabels,c=new p(this.ctx),d=new Y(this.ctx),g=h.formatter,u=null;if(h.enabled){u=c.group({class:"apexcharts-data-labels"});var f=h.offsetX,x=h.offsetY,b=e+o/2+f,m=i+n/2+parseFloat(h.style.fontSize)/3+x,v=g(l.globals.series[a][s],{seriesIndex:a,dataPointIndex:s,w:l});d.plotDataLabelsText({x:b,y:m,text:v,i:a,j:s,color:r.foreColor,parent:u,dataLabelsConfig:h})}return u}},{key:"animateHeatMap",value:function(t,e,i,a,s,r){var n=new f(this.ctx);n.animateRect(t,{x:e+a/2,y:i+s/2,width:0,height:0},{x:e,y:i,width:a,height:s},r,(function(){n.animationCompleted(t)}))}},{key:"animateHeatColor",value:function(t,e,i,a){t.attr({fill:e}).animate(a).attr({fill:i})}}]),t}(),wt=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.chartType=this.w.config.chart.type,this.initialAnim=this.w.config.chart.animations.enabled,this.dynamicAnim=this.initialAnim&&this.w.config.chart.animations.dynamicAnimation.enabled,this.animDur=0;var a=this.w;this.graphics=new p(this.ctx),this.lineColorArr=void 0!==a.globals.stroke.colors?a.globals.stroke.colors:a.globals.colors,this.defaultSize=a.globals.svgHeight<a.globals.svgWidth?a.globals.gridHeight+1.5*a.globals.goldenPadding:a.globals.gridWidth,this.maxValue=this.w.globals.maxY,this.minValue=this.w.globals.minY,this.polygons=a.config.plotOptions.radar.polygons;var s=a.globals.labels.slice().sort((function(t,e){return e.length-t.length}))[0],r=this.graphics.getTextRects(s,a.config.xaxis.labels.style.fontSize);this.strokeWidth=a.config.stroke.show?a.config.stroke.width:0,this.size=this.defaultSize/2.1-this.strokeWidth-a.config.chart.dropShadow.blur,a.config.xaxis.labels.show&&(this.size=this.size-r.width/1.75),void 0!==a.config.plotOptions.radar.size&&(this.size=a.config.plotOptions.radar.size),this.dataRadiusOfPercent=[],this.dataRadius=[],this.angleArr=[],this.yaxisLabelsTextsPos=[]}return a(t,[{key:"draw",value:function(t){var e=this,i=this.w,a=new M(this.ctx),s=[],r=new Y(this.ctx);t.length&&(this.dataPointsLen=t[i.globals.maxValsInArrayIndex].length),this.disAngle=2*Math.PI/this.dataPointsLen;var o=i.globals.gridWidth/2,l=i.globals.gridHeight/2,h=o+i.config.plotOptions.radar.offsetX,c=l+i.config.plotOptions.radar.offsetY,d=this.graphics.group({class:"apexcharts-radar-series apexcharts-plot-series",transform:"translate(".concat(h||0,", ").concat(c||0,")")}),f=[],p=null,x=null;if(this.yaxisLabels=this.graphics.group({class:"apexcharts-yaxis"}),t.forEach((function(t,o){var l=t.length===i.globals.dataPoints,h=e.graphics.group().attr({class:"apexcharts-series","data:longestSeries":l,seriesName:g.escapeString(i.globals.seriesNames[o]),rel:o+1,"data:realIndex":o});e.dataRadiusOfPercent[o]=[],e.dataRadius[o]=[],e.angleArr[o]=[],t.forEach((function(t,i){var a=Math.abs(e.maxValue-e.minValue);t+=Math.abs(e.minValue),e.dataRadiusOfPercent[o][i]=t/a,e.dataRadius[o][i]=e.dataRadiusOfPercent[o][i]*e.size,e.angleArr[o][i]=i*e.disAngle})),f=e.getDataPointsPos(e.dataRadius[o],e.angleArr[o]);var c=e.createPaths(f,{x:0,y:0});p=e.graphics.group({class:"apexcharts-series-markers-wrap apexcharts-element-hidden"}),x=e.graphics.group({class:"apexcharts-datalabels","data:realIndex":o}),i.globals.delayedElements.push({el:p.node,index:o});var d={i:o,realIndex:o,animationDelay:o,initialSpeed:i.config.chart.animations.speed,dataChangeSpeed:i.config.chart.animations.dynamicAnimation.speed,className:"apexcharts-radar",shouldClipToGrid:!1,bindEventsOnPaths:!1,stroke:i.globals.stroke.colors[o],strokeLineCap:i.config.stroke.lineCap},b=null;i.globals.previousPaths.length>0&&(b=e.getPreviousPath(o));for(var m=0;m<c.linePathsTo.length;m++){var v=e.graphics.renderPaths(n({},d,{pathFrom:null===b?c.linePathsFrom[m]:b,pathTo:c.linePathsTo[m],strokeWidth:Array.isArray(e.strokeWidth)?e.strokeWidth[o]:e.strokeWidth,fill:"none",drawShadow:!1}));h.add(v);var y=a.fillPath({seriesNumber:o}),w=e.graphics.renderPaths(n({},d,{pathFrom:null===b?c.areaPathsFrom[m]:b,pathTo:c.areaPathsTo[m],strokeWidth:0,fill:y,drawShadow:!1}));if(i.config.chart.dropShadow.enabled){var k=new u(e.ctx),A=i.config.chart.dropShadow;k.dropShadow(w,Object.assign({},A,{noUserSpaceOnUse:!0}),o)}h.add(w)}t.forEach((function(t,a){var s=new X(e.ctx).getMarkerConfig("apexcharts-marker",o,a),l=e.graphics.drawMarker(f[a].x,f[a].y,s);l.attr("rel",a),l.attr("j",a),l.attr("index",o),l.node.setAttribute("default-marker-size",s.pSize);var c=e.graphics.group({class:"apexcharts-series-markers"});if(c&&c.add(l),p.add(c),h.add(p),i.config.dataLabels.enabled){var d=i.config.dataLabels;r.plotDataLabelsText({x:f[a].x,y:f[a].y,text:i.globals.series[o][a],textAnchor:"middle",i:o,j:o,parent:x,offsetCorrection:!1,dataLabelsConfig:n({},d)})}h.add(x)})),s.push(h)})),this.drawPolygons({parent:d}),i.config.xaxis.labels.show){var b=this.drawXAxisTexts();d.add(b)}return d.add(this.yaxisLabels),s.forEach((function(t){d.add(t)})),d}},{key:"drawPolygons",value:function(t){for(var e=this,i=this.w,a=t.parent,s=i.globals.yAxisScale[0].result.reverse(),r=s.length,n=[],o=this.size/(r-1),l=0;l<r;l++)n[l]=o*l;n.reverse();var h=[],c=[];n.forEach((function(t,i){var a=e.getPolygonPos(t),s="";a.forEach((function(t,a){if(0===i){var r=e.graphics.drawLine(t.x,t.y,0,0,Array.isArray(e.polygons.connectorColors)?e.polygons.connectorColors[a]:e.polygons.connectorColors);c.push(r)}0===a&&e.yaxisLabelsTextsPos.push({x:t.x,y:t.y}),s+=t.x+","+t.y+" "})),h.push(s)})),h.forEach((function(t,s){var r=e.polygons.strokeColors,n=e.graphics.drawPolygon(t,Array.isArray(r)?r[s]:r,i.globals.radarPolygons.fill.colors[s]);a.add(n)})),c.forEach((function(t){a.add(t)})),i.config.yaxis[0].show&&this.yaxisLabelsTextsPos.forEach((function(t,i){var a=e.drawYAxisTexts(t.x,t.y,i,s[i]);e.yaxisLabels.add(a)}))}},{key:"drawYAxisTexts",value:function(t,e,i,a){var s=this.w,r=s.config.yaxis[0],n=s.globals.yLabelFormatters[0];return this.graphics.drawText({x:t+r.labels.offsetX,y:e+r.labels.offsetY,text:n(a,i),textAnchor:"middle",fontSize:r.labels.style.fontSize,fontFamily:r.labels.style.fontFamily,foreColor:r.labels.style.color})}},{key:"drawXAxisTexts",value:function(){var t=this,e=this.w,i=e.config.xaxis.labels,a=this.graphics.group({class:"apexcharts-xaxis"}),s=this.getPolygonPos(this.size);return e.globals.labels.forEach((function(r,o){var l=e.config.xaxis.labels.formatter,h=new Y(t.ctx);if(s[o]){var c=t.getTextPos(s[o],t.size),d=l(r,{seriesIndex:-1,dataPointIndex:o,w:e});h.plotDataLabelsText({x:c.newX,y:c.newY,text:d,textAnchor:c.textAnchor,i:o,j:o,parent:a,color:i.style.colors[o]?i.style.colors[o]:"#a8a8a8",dataLabelsConfig:n({textAnchor:c.textAnchor,dropShadow:{enabled:!1}},i),offsetCorrection:!1})}})),a}},{key:"createPaths",value:function(t,e){var i=this,a=[],s=[],r=[],n=[];if(t.length){s=[this.graphics.move(e.x,e.y)],n=[this.graphics.move(e.x,e.y)];var o=this.graphics.move(t[0].x,t[0].y),l=this.graphics.move(t[0].x,t[0].y);t.forEach((function(e,a){o+=i.graphics.line(e.x,e.y),l+=i.graphics.line(e.x,e.y),a===t.length-1&&(o+="Z",l+="Z")})),a.push(o),r.push(l)}return{linePathsFrom:s,linePathsTo:a,areaPathsFrom:n,areaPathsTo:r}}},{key:"getTextPos",value:function(t,e){var i="middle",a=t.x,s=t.y;return Math.abs(t.x)>=10?t.x>0?(i="start",a+=10):t.x<0&&(i="end",a-=10):i="middle",Math.abs(t.y)>=e-10&&(t.y<0?s-=10:t.y>0&&(s+=10)),{textAnchor:i,newX:a,newY:s}}},{key:"getPreviousPath",value:function(t){for(var e=this.w,i=null,a=0;a<e.globals.previousPaths.length;a++){var s=e.globals.previousPaths[a];s.paths.length>0&&parseInt(s.realIndex,10)===parseInt(t,10)&&void 0!==e.globals.previousPaths[a].paths[0]&&(i=e.globals.previousPaths[a].paths[0].d)}return i}},{key:"getDataPointsPos",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.dataPointsLen;t=t||[],e=e||[];for(var a=[],s=0;s<i;s++){var r={};r.x=t[s]*Math.sin(e[s]),r.y=-t[s]*Math.cos(e[s]),a.push(r)}return a}},{key:"getPolygonPos",value:function(t){for(var e=[],i=2*Math.PI/this.dataPointsLen,a=0;a<this.dataPointsLen;a++){var s={};s.x=t*Math.sin(a*i),s.y=-t*Math.cos(a*i),e.push(s)}return e}}]),t}(),kt=function(t){function i(t){var a;e(this,i),(a=c(this,l(i).call(this,t))).ctx=t,a.w=t.w,a.animBeginArr=[0],a.animDur=0;var s=a.w;return a.startAngle=s.config.plotOptions.radialBar.startAngle,a.endAngle=s.config.plotOptions.radialBar.endAngle,a.totalAngle=Math.abs(s.config.plotOptions.radialBar.endAngle-s.config.plotOptions.radialBar.startAngle),a.trackStartAngle=s.config.plotOptions.radialBar.track.startAngle,a.trackEndAngle=s.config.plotOptions.radialBar.track.endAngle,a.radialDataLabels=s.config.plotOptions.radialBar.dataLabels,a.trackStartAngle||(a.trackStartAngle=a.startAngle),a.trackEndAngle||(a.trackEndAngle=a.endAngle),360===a.endAngle&&(a.endAngle=359.99),a.fullAngle=360-s.config.plotOptions.radialBar.endAngle-s.config.plotOptions.radialBar.startAngle,a.margin=parseInt(s.config.plotOptions.radialBar.track.margin,10),a}return o(i,t),a(i,[{key:"draw",value:function(t){var e=this.w,i=new p(this.ctx),a=i.group({class:"apexcharts-radialbar"});if(e.globals.noData)return a;var s=i.group(),r=this.defaultSize/2,n=e.globals.gridWidth/2,o=this.defaultSize/2.05;e.config.chart.sparkline.enabled||(o=o-e.config.stroke.width-e.config.chart.dropShadow.blur);var l=e.globals.fill.colors;if(e.config.plotOptions.radialBar.track.show){var h=this.drawTracks({size:o,centerX:n,centerY:r,colorArr:l,series:t});s.add(h)}var c=this.drawArcs({size:o,centerX:n,centerY:r,colorArr:l,series:t}),d=360;e.config.plotOptions.radialBar.startAngle<0&&(d=this.totalAngle);var g=(360-d)/360;if(e.globals.radialSize=o-o*g,this.radialDataLabels.value.show){var u=Math.max(this.radialDataLabels.value.offsetY,this.radialDataLabels.name.offsetY);e.globals.radialSize+=u*g}return s.add(c.g),"front"===e.config.plotOptions.radialBar.hollow.position&&(c.g.add(c.elHollow),c.dataLabels&&c.g.add(c.dataLabels)),a.add(s),a}},{key:"drawTracks",value:function(t){var e=this.w,i=new p(this.ctx),a=i.group({class:"apexcharts-tracks"}),s=new u(this.ctx),r=new M(this.ctx),n=this.getStrokeWidth(t);t.size=t.size-n/2;for(var o=0;o<t.series.length;o++){var l=i.group({class:"apexcharts-radialbar-track apexcharts-track"});a.add(l),l.attr({rel:o+1}),t.size=t.size-n-this.margin;var h=e.config.plotOptions.radialBar.track,c=r.fillPath({seriesNumber:0,size:t.size,fillColors:Array.isArray(h.background)?h.background[o]:h.background,solid:!0}),d=this.trackStartAngle,g=this.trackEndAngle;Math.abs(g)+Math.abs(d)>=360&&(g=360-Math.abs(this.startAngle)-.1);var f=i.drawPath({d:"",stroke:c,strokeWidth:n*parseInt(h.strokeWidth,10)/100,fill:"none",strokeOpacity:h.opacity,classes:"apexcharts-radialbar-area"});if(h.dropShadow.enabled){var x=h.dropShadow;s.dropShadow(f,x)}l.add(f),f.attr("id","apexcharts-radialbarTrack-"+o),this.animatePaths(f,{centerX:t.centerX,centerY:t.centerY,endAngle:g,startAngle:d,size:t.size,i:o,totalItems:2,animBeginArr:0,dur:0,isTrack:!0,easing:e.globals.easing})}return a}},{key:"drawArcs",value:function(t){var e=this.w,i=new p(this.ctx),a=new M(this.ctx),s=new u(this.ctx),r=i.group(),n=this.getStrokeWidth(t);t.size=t.size-n/2;var o=e.config.plotOptions.radialBar.hollow.background,l=t.size-n*t.series.length-this.margin*t.series.length-n*parseInt(e.config.plotOptions.radialBar.track.strokeWidth,10)/100/2,h=l-e.config.plotOptions.radialBar.hollow.margin;void 0!==e.config.plotOptions.radialBar.hollow.image&&(o=this.drawHollowImage(t,r,l,o));var c=this.drawHollow({size:h,centerX:t.centerX,centerY:t.centerY,fill:o||"transparent"});if(e.config.plotOptions.radialBar.hollow.dropShadow.enabled){var d=e.config.plotOptions.radialBar.hollow.dropShadow;s.dropShadow(c,d)}var f=1;!this.radialDataLabels.total.show&&e.globals.series.length>1&&(f=0);var x=null;this.radialDataLabels.show&&(x=this.renderInnerDataLabels(this.radialDataLabels,{hollowSize:l,centerX:t.centerX,centerY:t.centerY,opacity:f})),"back"===e.config.plotOptions.radialBar.hollow.position&&(r.add(c),x&&r.add(x));var b=!1;e.config.plotOptions.radialBar.inverseOrder&&(b=!0);for(var m=b?t.series.length-1:0;b?m>=0:m<t.series.length;b?m--:m++){var v=i.group({class:"apexcharts-series apexcharts-radial-series",seriesName:g.escapeString(e.globals.seriesNames[m])});r.add(v),v.attr({rel:m+1,"data:realIndex":m}),this.ctx.series.addCollapsedClassToSeries(v,m),t.size=t.size-n-this.margin;var y=a.fillPath({seriesNumber:m,size:t.size,value:t.series[m]}),w=this.startAngle,k=void 0,A=g.negToZero(t.series[m]>100?100:t.series[m])/100,S=Math.round(this.totalAngle*A)+this.startAngle,C=void 0;e.globals.dataChanged&&(k=this.startAngle,C=Math.round(this.totalAngle*g.negToZero(e.globals.previousPaths[m])/100)+k),Math.abs(S)+Math.abs(w)>=360&&(S-=.01),Math.abs(C)+Math.abs(k)>=360&&(C-=.01);var L=S-w,P=Array.isArray(e.config.stroke.dashArray)?e.config.stroke.dashArray[m]:e.config.stroke.dashArray,T=i.drawPath({d:"",stroke:y,strokeWidth:n,fill:"none",fillOpacity:e.config.fill.opacity,classes:"apexcharts-radialbar-area apexcharts-radialbar-slice-"+m,strokeDashArray:P});if(p.setAttrs(T.node,{"data:angle":L,"data:value":t.series[m]}),e.config.chart.dropShadow.enabled){var z=e.config.chart.dropShadow;s.dropShadow(T,z,m)}this.addListeners(T,this.radialDataLabels),v.add(T),T.attr({index:0,j:m});var I=0;!this.initialAnim||e.globals.resized||e.globals.dataChanged||(I=(S-w)/360*e.config.chart.animations.speed,this.animDur=I/(1.2*t.series.length)+this.animDur,this.animBeginArr.push(this.animDur)),e.globals.dataChanged&&(I=(S-w)/360*e.config.chart.animations.dynamicAnimation.speed,this.animDur=I/(1.2*t.series.length)+this.animDur,this.animBeginArr.push(this.animDur)),this.animatePaths(T,{centerX:t.centerX,centerY:t.centerY,endAngle:S,startAngle:w,prevEndAngle:C,prevStartAngle:k,size:t.size,i:m,totalItems:2,animBeginArr:this.animBeginArr,dur:I,shouldSetPrevPaths:!0,easing:e.globals.easing})}return{g:r,elHollow:c,dataLabels:x}}},{key:"drawHollow",value:function(t){var e=new p(this.ctx).drawCircle(2*t.size);return e.attr({class:"apexcharts-radialbar-hollow",cx:t.centerX,cy:t.centerY,r:t.size,fill:t.fill}),e}},{key:"drawHollowImage",value:function(t,e,i,a){var s=this.w,r=new M(this.ctx),n=g.randomId(),o=s.config.plotOptions.radialBar.hollow.image;if(s.config.plotOptions.radialBar.hollow.imageClipped)r.clippedImgArea({width:i,height:i,image:o,patternID:"pattern".concat(s.globals.cuid).concat(n)}),a="url(#pattern".concat(s.globals.cuid).concat(n,")");else{var l=s.config.plotOptions.radialBar.hollow.imageWidth,h=s.config.plotOptions.radialBar.hollow.imageHeight;if(void 0===l&&void 0===h){var c=s.globals.dom.Paper.image(o).loaded((function(e){this.move(t.centerX-e.width/2+s.config.plotOptions.radialBar.hollow.imageOffsetX,t.centerY-e.height/2+s.config.plotOptions.radialBar.hollow.imageOffsetY)}));e.add(c)}else{var d=s.globals.dom.Paper.image(o).loaded((function(e){this.move(t.centerX-l/2+s.config.plotOptions.radialBar.hollow.imageOffsetX,t.centerY-h/2+s.config.plotOptions.radialBar.hollow.imageOffsetY),this.size(l,h)}));e.add(d)}}return a}},{key:"getStrokeWidth",value:function(t){var e=this.w;return t.size*(100-parseInt(e.config.plotOptions.radialBar.hollow.size,10))/100/(t.series.length+1)-this.margin}}]),i}(at),At=function(t){function i(){return e(this,i),c(this,l(i).apply(this,arguments))}return o(i,t),a(i,[{key:"draw",value:function(t,e){var i=this.w,a=new p(this.ctx);this.rangeBarOptions=this.w.config.plotOptions.rangeBar,this.series=t,this.seriesRangeStart=i.globals.seriesRangeStart,this.seriesRangeEnd=i.globals.seriesRangeEnd,this.barHelpers.initVariables(t);for(var s=a.group({class:"apexcharts-rangebar-series apexcharts-plot-series"}),r=0;r<t.length;r++){var o,l,h,c=void 0,d=void 0,u=void 0,f=i.globals.comboCharts?e[r]:r,x=a.group({class:"apexcharts-series",seriesName:g.escapeString(i.globals.seriesNames[f]),rel:r+1,"data:realIndex":f});t[r].length>0&&(this.visibleI=this.visibleI+1);var b=0,m=0;this.yRatio.length>1&&(this.yaxisIndex=f);var v=this.barHelpers.initialPositions();d=v.y,h=v.zeroW,c=v.x,m=v.barWidth,o=v.xDivision,l=v.zeroH;for(var y=a.group({class:"apexcharts-datalabels","data:realIndex":f}),w=0;w<i.globals.dataPoints;w++){var k=this.barHelpers.getStrokeWidth(r,w,f),A=this.seriesRangeStart[r][w],S=this.seriesRangeEnd[r][w],C=null,L=null,P={x:c,y:d,strokeWidth:k,elSeries:x};if(u=v.yDivision,b=v.barHeight,this.isHorizontal){L=d+b*this.visibleI;var T=(u-b*this.seriesLen)/2;if(void 0===i.config.series[r].data[w])break;if(this.isTimelineBar&&i.config.series[r].data[w].x){var z=this.detectOverlappingBars({i:r,j:w,barYPosition:L,srty:T,barHeight:b,yDivision:u,initPositions:v});b=z.barHeight,L=z.barYPosition}m=(C=this.drawRangeBarPaths(n({indexes:{i:r,j:w,realIndex:f},barHeight:b,barYPosition:L,zeroW:h,yDivision:u,y1:A,y2:S},P))).barWidth}else b=(C=this.drawRangeColumnPaths(n({indexes:{i:r,j:w,realIndex:f},zeroH:l,barWidth:m,xDivision:o},P))).barHeight;d=C.y,c=C.x;var I=this.barHelpers.getPathFillColor(t,r,w,f),M=i.globals.stroke.colors[f];this.renderSeries({realIndex:f,pathFill:I,lineFill:M,j:w,i:r,x:c,y:d,y1:A,y2:S,pathFrom:C.pathFrom,pathTo:C.pathTo,strokeWidth:k,elSeries:x,series:t,barHeight:b,barYPosition:L,barWidth:m,elDataLabelsWrap:y,visibleSeries:this.visibleI,type:"rangebar"})}s.add(x)}return s}},{key:"detectOverlappingBars",value:function(t){var e=t.i,i=t.j,a=t.barYPosition,s=t.srty,r=t.barHeight,n=t.yDivision,o=t.initPositions,l=this.w,h=[],c=l.config.series[e].data[i].rangeName,d=l.config.series[e].data[i].x,g=l.globals.labels.indexOf(d),u=l.globals.seriesRangeBarTimeline[e].findIndex((function(t){return t.x===d&&t.overlaps.length>0}));return a=s+r*this.visibleI+n*g,u>-1&&(h=l.globals.seriesRangeBarTimeline[e][u].overlaps).indexOf(c)>-1&&(a=(r=o.barHeight/h.length)*this.visibleI+n*(100-parseInt(this.barOptions.barHeight,10))/100/2+r*(this.visibleI+h.indexOf(c))+n*g),{barYPosition:a,barHeight:r}}},{key:"drawRangeColumnPaths",value:function(t){var e=t.indexes,i=t.x,a=(t.strokeWidth,t.xDivision),s=t.barWidth,r=t.zeroH,n=this.w,o=e.i,l=e.j,h=this.yRatio[this.yaxisIndex],c=e.realIndex,d=this.getRangeValue(c,l),g=Math.min(d.start,d.end),u=Math.max(d.start,d.end);n.globals.isXNumeric&&(i=(n.globals.seriesX[o][l]-n.globals.minX)/this.xRatio-s/2);var f=i+s*this.visibleI;void 0===this.series[o][l]||null===this.series[o][l]?g=r:(g=r-g/h,u=r-u/h);var p=Math.abs(u-g),x=this.barHelpers.getColumnPaths({barXPosition:f,barWidth:s,y1:g,y2:u,strokeWidth:this.strokeWidth,series:this.seriesRangeEnd,i:c,j:l,w:n});return n.globals.isXNumeric||(i+=a),{pathTo:x.pathTo,pathFrom:x.pathFrom,barHeight:p,x:i,y:u,barXPosition:f}}},{key:"drawRangeBarPaths",value:function(t){var e=t.indexes,i=t.y,a=t.y1,s=t.y2,r=t.yDivision,n=t.barHeight,o=t.barYPosition,l=t.zeroW,h=this.w,c=l+a/this.invertedYRatio,d=l+s/this.invertedYRatio,g=Math.abs(d-c),u=this.barHelpers.getBarpaths({barYPosition:o,barHeight:n,x1:c,x2:d,strokeWidth:this.strokeWidth,series:this.seriesRangeEnd,i:e.realIndex,j:e.j,w:h});return h.globals.isXNumeric||(i+=r),{pathTo:u.pathTo,pathFrom:u.pathFrom,barWidth:g,x:d,y:i}}},{key:"getRangeValue",value:function(t,e){var i=this.w;return{start:i.globals.seriesRangeStart[t][e],end:i.globals.seriesRangeEnd[t][e]}}}]),i}(bt),St=function(){function t(i){e(this,t),this.w=i.w,this.lineCtx=i}return a(t,[{key:"sameValueSeriesFix",value:function(t,e){var i=this.w;if("line"===i.config.chart.type&&("gradient"===i.config.fill.type||"gradient"===i.config.fill.type[t])&&new I(this.lineCtx.ctx,i).seriesHaveSameValues(t)){var a=e[t].slice();a[a.length-1]=a[a.length-1]+1e-6,e[t]=a}return e}},{key:"calculatePoints",value:function(t){var e=t.series,i=t.realIndex,a=t.x,s=t.y,r=t.i,n=t.j,o=t.prevY,l=this.w,h=[],c=[];if(0===n){var d=this.lineCtx.categoryAxisCorrection+l.config.markers.offsetX;l.globals.isXNumeric&&(d=(l.globals.seriesX[i][0]-l.globals.minX)/this.lineCtx.xRatio+l.config.markers.offsetX),h.push(d),c.push(g.isNumber(e[r][0])?o+l.config.markers.offsetY:null),h.push(a+l.config.markers.offsetX),c.push(g.isNumber(e[r][n+1])?s+l.config.markers.offsetY:null)}else h.push(a+l.config.markers.offsetX),c.push(g.isNumber(e[r][n+1])?s+l.config.markers.offsetY:null);return{x:h,y:c}}},{key:"checkPreviousPaths",value:function(t){for(var e=t.pathFromLine,i=t.pathFromArea,a=t.realIndex,s=this.w,r=0;r<s.globals.previousPaths.length;r++){var n=s.globals.previousPaths[r];("line"===n.type||"area"===n.type)&&n.paths.length>0&&parseInt(n.realIndex,10)===parseInt(a,10)&&("line"===n.type?(this.lineCtx.appendPathFrom=!1,e=s.globals.previousPaths[r].paths[0].d):"area"===n.type&&(this.lineCtx.appendPathFrom=!1,i=s.globals.previousPaths[r].paths[0].d,s.config.stroke.show&&s.globals.previousPaths[r].paths[1]&&(e=s.globals.previousPaths[r].paths[1].d)))}return{pathFromLine:e,pathFromArea:i}}},{key:"determineFirstPrevY",value:function(t){var e=t.i,i=t.series,a=t.prevY,s=t.lineYPosition,r=this.w;if(void 0!==i[e][0])a=(s=r.config.chart.stacked&&e>0?this.lineCtx.prevSeriesY[e-1][0]:this.lineCtx.zeroY)-i[e][0]/this.lineCtx.yRatio[this.lineCtx.yaxisIndex]+2*(this.lineCtx.isReversed?i[e][0]/this.lineCtx.yRatio[this.lineCtx.yaxisIndex]:0);else if(r.config.chart.stacked&&e>0&&void 0===i[e][0])for(var n=e-1;n>=0;n--)if(null!==i[n][0]&&void 0!==i[n][0]){a=s=this.lineCtx.prevSeriesY[n][0];break}return{prevY:a,lineYPosition:s}}}]),t}(),Ct=function(){function t(i,a,s){e(this,t),this.ctx=i,this.w=i.w,this.xyRatios=a,this.pointsChart=!("bubble"!==this.w.config.chart.type&&"scatter"!==this.w.config.chart.type)||s,this.scatter=new E(this.ctx),this.noNegatives=this.w.globals.minX===Number.MAX_VALUE,this.lineHelpers=new St(this),this.markers=new X(this.ctx),this.prevSeriesY=[],this.categoryAxisCorrection=0,this.yaxisIndex=0}return a(t,[{key:"draw",value:function(t,e,i){var a=this.w,s=new p(this.ctx),r=a.globals.comboCharts?e:a.config.chart.type,n=s.group({class:"apexcharts-".concat(r,"-series apexcharts-plot-series")}),o=new I(this.ctx,a);this.yRatio=this.xyRatios.yRatio,this.zRatio=this.xyRatios.zRatio,this.xRatio=this.xyRatios.xRatio,this.baseLineY=this.xyRatios.baseLineY,t=o.getLogSeries(t),this.yRatio=o.getLogYRatios(this.yRatio);for(var l=[],h=0;h<t.length;h++){t=this.lineHelpers.sameValueSeriesFix(h,t);var c=a.globals.comboCharts?i[h]:h;this._initSerieVariables(t,h,c);var d=[],g=[],u=a.globals.padHorizontal+this.categoryAxisCorrection;this.ctx.series.addCollapsedClassToSeries(this.elSeries,c),a.globals.isXNumeric&&a.globals.seriesX.length>0&&(u=(a.globals.seriesX[c][0]-a.globals.minX)/this.xRatio),g.push(u);var f,x=u,b=x,m=this.zeroY;m=this.lineHelpers.determineFirstPrevY({i:h,series:t,prevY:m,lineYPosition:0}).prevY,d.push(m),f=m;var v=this._calculatePathsFrom({series:t,i:h,realIndex:c,prevX:b,prevY:m}),y=this._iterateOverDataPoints({series:t,realIndex:c,i:h,x:u,y:1,pX:x,pY:f,pathsFrom:v,linePaths:[],areaPaths:[],seriesIndex:i,lineYPosition:0,xArrj:g,yArrj:d});this._handlePaths({type:r,realIndex:c,i:h,paths:y}),this.elSeries.add(this.elPointsMain),this.elSeries.add(this.elDataLabelsWrap),l.push(this.elSeries)}for(var w=l.length;w>0;w--)n.add(l[w-1]);return n}},{key:"_initSerieVariables",value:function(t,e,i){var a=this.w,s=new p(this.ctx);this.xDivision=a.globals.gridWidth/(a.globals.dataPoints-("on"===a.config.xaxis.tickPlacement?1:0)),this.strokeWidth=Array.isArray(a.config.stroke.width)?a.config.stroke.width[i]:a.config.stroke.width,this.yRatio.length>1&&(this.yaxisIndex=i),this.isReversed=a.config.yaxis[this.yaxisIndex]&&a.config.yaxis[this.yaxisIndex].reversed,this.zeroY=a.globals.gridHeight-this.baseLineY[this.yaxisIndex]-(this.isReversed?a.globals.gridHeight:0)+(this.isReversed?2*this.baseLineY[this.yaxisIndex]:0),this.areaBottomY=this.zeroY,this.zeroY>a.globals.gridHeight&&(this.areaBottomY=a.globals.gridHeight),this.categoryAxisCorrection=this.xDivision/2,this.elSeries=s.group({class:"apexcharts-series",seriesName:g.escapeString(a.globals.seriesNames[i])}),this.elPointsMain=s.group({class:"apexcharts-series-markers-wrap","data:realIndex":i}),this.elDataLabelsWrap=s.group({class:"apexcharts-datalabels","data:realIndex":i});var r=t[e].length===a.globals.dataPoints;this.elSeries.attr({"data:longestSeries":r,rel:e+1,"data:realIndex":i}),this.appendPathFrom=!0}},{key:"_calculatePathsFrom",value:function(t){var e,i,a,s,r=t.series,n=t.i,o=t.realIndex,l=t.prevX,h=t.prevY,c=this.w,d=new p(this.ctx);if(null===r[n][0]){for(var g=0;g<r[n].length;g++)if(null!==r[n][g]){l=this.xDivision*g,h=this.zeroY-r[n][g]/this.yRatio[this.yaxisIndex],e=d.move(l,h),i=d.move(l,this.areaBottomY);break}}else e=d.move(l,h),i=d.move(l,this.areaBottomY)+d.line(l,h);if(a=d.move(-1,this.zeroY)+d.line(-1,this.zeroY),s=d.move(-1,this.zeroY)+d.line(-1,this.zeroY),c.globals.previousPaths.length>0){var u=this.lineHelpers.checkPreviousPaths({pathFromLine:a,pathFromArea:s,realIndex:o});a=u.pathFromLine,s=u.pathFromArea}return{prevX:l,prevY:h,linePath:e,areaPath:i,pathFromLine:a,pathFromArea:s}}},{key:"_handlePaths",value:function(t){var e=t.type,i=t.realIndex,a=t.i,s=t.paths,r=this.w,o=new p(this.ctx),l=new M(this.ctx);this.prevSeriesY.push(s.yArrj),r.globals.seriesXvalues[i]=s.xArrj,r.globals.seriesYvalues[i]=s.yArrj,this.pointsChart||r.globals.delayedElements.push({el:this.elPointsMain.node,index:i});var h={i:a,realIndex:i,animationDelay:a,initialSpeed:r.config.chart.animations.speed,dataChangeSpeed:r.config.chart.animations.dynamicAnimation.speed,className:"apexcharts-".concat(e)};if("area"===e)for(var c=l.fillPath({seriesNumber:i}),d=0;d<s.areaPaths.length;d++){var g=o.renderPaths(n({},h,{pathFrom:s.pathFromArea,pathTo:s.areaPaths[d],stroke:"none",strokeWidth:0,strokeLineCap:null,fill:c}));this.elSeries.add(g)}if(r.config.stroke.show&&!this.pointsChart){var u=null;u="line"===e?l.fillPath({seriesNumber:i,i:a}):r.globals.stroke.colors[i];for(var f=0;f<s.linePaths.length;f++){var x=o.renderPaths(n({},h,{pathFrom:s.pathFromLine,pathTo:s.linePaths[f],stroke:u,strokeWidth:this.strokeWidth,strokeLineCap:r.config.stroke.lineCap,fill:"none"}));this.elSeries.add(x)}}}},{key:"_iterateOverDataPoints",value:function(t){for(var e=t.series,i=t.realIndex,a=t.i,s=t.x,r=t.y,n=t.pX,o=t.pY,l=t.pathsFrom,h=t.linePaths,c=t.areaPaths,d=t.seriesIndex,u=t.lineYPosition,f=t.xArrj,x=t.yArrj,b=this.w,m=new p(this.ctx),v=this.yRatio,y=l.prevY,w=l.linePath,k=l.areaPath,A=l.pathFromLine,S=l.pathFromArea,C=g.isNumber(b.globals.minYArr[i])?b.globals.minYArr[i]:b.globals.minY,L=b.globals.dataPoints>1?b.globals.dataPoints-1:b.globals.dataPoints,P=0;P<L;P++){var T=void 0===e[a][P+1]||null===e[a][P+1];if(b.globals.isXNumeric){var z=b.globals.seriesX[i][P+1];void 0===b.globals.seriesX[i][P+1]&&(z=b.globals.seriesX[i][L-1]),s=(z-b.globals.minX)/this.xRatio}else s+=this.xDivision;u=b.config.chart.stacked&&a>0&&b.globals.collapsedSeries.length<b.config.series.length-1?this.prevSeriesY[a-1][P+1]:this.zeroY,r=T?u-C/v[this.yaxisIndex]+2*(this.isReversed?C/v[this.yaxisIndex]:0):u-e[a][P+1]/v[this.yaxisIndex]+2*(this.isReversed?e[a][P+1]/v[this.yaxisIndex]:0),f.push(s),x.push(r);var I=this.lineHelpers.calculatePoints({series:e,x:s,y:r,realIndex:i,i:a,j:P,prevY:y}),M=this._createPaths({series:e,i:a,realIndex:i,j:P,x:s,y:r,pX:n,pY:o,linePath:w,areaPath:k,linePaths:h,areaPaths:c,seriesIndex:d});c=M.areaPaths,h=M.linePaths,n=M.pX,o=M.pY,k=M.areaPath,w=M.linePath,this.appendPathFrom&&(A+=m.line(s,this.zeroY),S+=m.line(s,this.zeroY)),this.handleNullDataPoints(e,I,a,P,i),this._handleMarkersAndLabels({pointsPos:I,series:e,x:s,y:r,prevY:y,i:a,j:P,realIndex:i})}return{yArrj:x,xArrj:f,pathFromArea:S,areaPaths:c,pathFromLine:A,linePaths:h}}},{key:"_handleMarkersAndLabels",value:function(t){var e=t.pointsPos,i=(t.series,t.x,t.y,t.prevY,t.i),a=t.j,s=t.realIndex,r=this.w,n=new Y(this.ctx);if(this.pointsChart)this.scatter.draw(this.elSeries,a,{realIndex:s,pointsPos:e,zRatio:this.zRatio,elParent:this.elPointsMain});else{r.globals.series[i].length>1&&this.elPointsMain.node.classList.add("apexcharts-element-hidden");var o=this.markers.plotChartMarkers(e,s,a+1);null!==o&&this.elPointsMain.add(o)}var l=n.drawDataLabel(e,s,a+1,null);null!==l&&this.elDataLabelsWrap.add(l)}},{key:"_createPaths",value:function(t){var e=t.series,i=t.i,a=t.realIndex,s=t.j,r=t.x,n=t.y,o=t.pX,l=t.pY,h=t.linePath,c=t.areaPath,d=t.linePaths,g=t.areaPaths,u=t.seriesIndex,f=this.w,x=new p(this.ctx),b=f.config.stroke.curve,m=this.areaBottomY;if(Array.isArray(f.config.stroke.curve)&&(b=Array.isArray(u)?f.config.stroke.curve[u[i]]:f.config.stroke.curve[i]),"smooth"===b){var v=.35*(r-o);f.globals.hasNullValues?(null!==e[i][s]&&(null!==e[i][s+1]?(h=x.move(o,l)+x.curve(o+v,l,r-v,n,r+1,n),c=x.move(o+1,l)+x.curve(o+v,l,r-v,n,r+1,n)+x.line(r,m)+x.line(o,m)+"z"):(h=x.move(o,l),c=x.move(o,l)+"z")),d.push(h),g.push(c)):(h+=x.curve(o+v,l,r-v,n,r,n),c+=x.curve(o+v,l,r-v,n,r,n)),o=r,l=n,s===e[i].length-2&&(c=c+x.curve(o,l,r,n,r,m)+x.move(r,n)+"z",f.globals.hasNullValues||(d.push(h),g.push(c)))}else{if(null===e[i][s+1]){h+=x.move(r,n);var y=f.globals.isXNumeric?(f.globals.seriesX[a][s]-f.globals.minX)/this.xRatio:r-this.xDivision;c=c+x.line(y,m)+x.move(r,n)+"z"}null===e[i][s]&&(h+=x.move(r,n),c+=x.move(r,m)),"stepline"===b?(h=h+x.line(r,null,"H")+x.line(null,n,"V"),c=c+x.line(r,null,"H")+x.line(null,n,"V")):"straight"===b&&(h+=x.line(r,n),c+=x.line(r,n)),s===e[i].length-2&&(c=c+x.line(r,m)+x.move(r,n)+"z",d.push(h),g.push(c))}return{linePaths:d,areaPaths:g,pX:o,pY:l,linePath:h,areaPath:c}}},{key:"handleNullDataPoints",value:function(t,e,i,a,s){var r=this.w;if(null===t[i][a]&&r.config.markers.showNullDataPoints||1===t[i].length){var n=this.markers.plotChartMarkers(e,s,a+1,this.strokeWidth-r.config.markers.strokeWidth/2,!0);null!==n&&this.elPointsMain.add(n)}}}]),t}(),Lt=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.timeScaleArray=[],this.utc=this.w.config.xaxis.labels.datetimeUTC}return a(t,[{key:"calculateTimeScaleTicks",value:function(t,e){var i=this,a=this.w;if(a.globals.allSeriesCollapsed)return a.globals.labels=[],a.globals.timescaleLabels=[],[];var s=new C(this.ctx),r=(e-t)/864e5;this.determineInterval(r),a.globals.disableZoomIn=!1,a.globals.disableZoomOut=!1,r<.005?a.globals.disableZoomIn=!0:r>5e4&&(a.globals.disableZoomOut=!0);var o=s.getTimeUnitsfromTimestamp(t,e,this.utc),l=a.globals.gridWidth/r,h=l/24,c=h/60,d=Math.floor(24*r),g=Math.floor(24*r*60),u=Math.floor(r),f=Math.floor(r/30),p=Math.floor(r/365),x={minMinute:o.minMinute,minHour:o.minHour,minDate:o.minDate,minMonth:o.minMonth,minYear:o.minYear},b={firstVal:x,currentMinute:x.minMinute,currentHour:x.minHour,currentMonthDate:x.minDate,currentDate:x.minDate,currentMonth:x.minMonth,currentYear:x.minYear,daysWidthOnXAxis:l,hoursWidthOnXAxis:h,minutesWidthOnXAxis:c,numberOfMinutes:g,numberOfHours:d,numberOfDays:u,numberOfMonths:f,numberOfYears:p};switch(this.tickInterval){case"years":this.generateYearScale(b);break;case"months":case"half_year":this.generateMonthScale(b);break;case"months_days":case"months_fortnight":case"days":case"week_days":this.generateDayScale(b);break;case"hours":this.generateHourScale(b);break;case"minutes":this.generateMinuteScale(b)}var m=this.timeScaleArray.map((function(t){var e={position:t.position,unit:t.unit,year:t.year,day:t.day?t.day:1,hour:t.hour?t.hour:0,month:t.month+1};return"month"===t.unit?n({},e,{day:1,value:t.value+1}):"day"===t.unit||"hour"===t.unit?n({},e,{value:t.value}):"minute"===t.unit?n({},e,{value:t.value,minute:t.value}):t}));return m.filter((function(t){var e=1,s=Math.ceil(a.globals.gridWidth/120),r=t.value;void 0!==a.config.xaxis.tickAmount&&(s=a.config.xaxis.tickAmount),m.length>s&&(e=Math.floor(m.length/s));var n=!1,o=!1;switch(i.tickInterval){case"years":"year"===t.unit&&(n=!0);break;case"half_year":e=7,"year"===t.unit&&(n=!0);break;case"months":e=1,"year"===t.unit&&(n=!0);break;case"months_fortnight":e=15,"year"!==t.unit&&"month"!==t.unit||(n=!0),30===r&&(o=!0);break;case"months_days":e=10,"month"===t.unit&&(n=!0),30===r&&(o=!0);break;case"week_days":e=8,"month"===t.unit&&(n=!0);break;case"days":e=1,"month"===t.unit&&(n=!0);break;case"hours":"day"===t.unit&&(n=!0);break;case"minutes":r%5!=0&&(o=!0)}if("minutes"===i.tickInterval||"hours"===i.tickInterval){if(!o)return!0}else if((r%e==0||n)&&!o)return!0}))}},{key:"recalcDimensionsBasedOnFormat",value:function(t,e){var i=this.w,a=this.formatDates(t),s=this.removeOverlappingTS(a);i.globals.timescaleLabels=s.slice(),new it(this.ctx).plotCoords()}},{key:"determineInterval",value:function(t){switch(!0){case t>1825:this.tickInterval="years";break;case t>800&&t<=1825:this.tickInterval="half_year";break;case t>180&&t<=800:this.tickInterval="months";break;case t>90&&t<=180:this.tickInterval="months_fortnight";break;case t>60&&t<=90:this.tickInterval="months_days";break;case t>30&&t<=60:this.tickInterval="week_days";break;case t>2&&t<=30:this.tickInterval="days";break;case t>.1&&t<=2:this.tickInterval="hours";break;case t<.1:this.tickInterval="minutes";break;default:this.tickInterval="days"}}},{key:"generateYearScale",value:function(t){var e=t.firstVal,i=t.currentMonth,a=t.currentYear,s=t.daysWidthOnXAxis,r=t.numberOfYears,n=e.minYear,o=0,l=new C(this.ctx);if(e.minDate>1&&e.minMonth>0){var h=l.determineRemainingDaysOfYear(e.minYear,e.minMonth,e.minDate);o=(l.determineDaysOfYear(e.minYear)-h+1)*s,n=e.minYear+1,this.timeScaleArray.push({position:o,value:n,unit:"year",year:n,month:g.monthMod(i+1)})}else 1===e.minDate&&0===e.minMonth&&this.timeScaleArray.push({position:o,value:n,unit:"year",year:a,month:g.monthMod(i+1)});for(var c=n,d=o,u=0;u<r;u++)c++,d=l.determineDaysOfYear(c-1)*s+d,this.timeScaleArray.push({position:d,value:c,unit:"year",year:c,month:1})}},{key:"generateMonthScale",value:function(t){var e=t.firstVal,i=t.currentMonthDate,a=t.currentMonth,s=t.currentYear,r=t.daysWidthOnXAxis,n=t.numberOfMonths,o=a,l=0,h=new C(this.ctx),c="month",d=0;if(e.minDate>1){l=(h.determineDaysOfMonths(a+1,e.minYear)-i+1)*r,o=g.monthMod(a+1);var u=s+d,f=g.monthMod(o),p=o;0===o&&(c="year",p=u,f=1,u+=d+=1),this.timeScaleArray.push({position:l,value:p,unit:c,year:u,month:f})}else this.timeScaleArray.push({position:l,value:o,unit:c,year:s,month:g.monthMod(a)});for(var x=o+1,b=l,m=0,v=1;m<n;m++,v++){0===(x=g.monthMod(x))?(c="year",d+=1):c="month";var y=this._getYear(s,x,d);b=h.determineDaysOfMonths(x,y)*r+b;var w=0===x?y:x;this.timeScaleArray.push({position:b,value:w,unit:c,year:y,month:0===x?1:x}),x++}}},{key:"generateDayScale",value:function(t){var e=t.firstVal,i=t.currentMonth,a=t.currentYear,s=t.hoursWidthOnXAxis,r=t.numberOfDays,n=new C(this.ctx),o="day",l=e.minDate+1,h=l,c=function(t,e,i){return t>n.determineDaysOfMonths(e+1,i)?(h=1,o="month",u=e+=1,e):e},d=(24-e.minHour)*s,u=l,f=c(h,i,a);0===e.minHour&&1===e.minDate&&(d=0,u=g.monthMod(e.minMonth),o="month",h=e.minDate,r++),this.timeScaleArray.push({position:d,value:u,unit:o,year:this._getYear(a,f,0),month:g.monthMod(f),day:h});for(var p=d,x=0;x<r;x++){o="day",f=c(h+=1,f,this._getYear(a,f,0));var b=this._getYear(a,f,0);p=24*s+p;var m=1===h?g.monthMod(f):h;this.timeScaleArray.push({position:p,value:m,unit:o,year:b,month:g.monthMod(f),day:m})}}},{key:"generateHourScale",value:function(t){var e=t.firstVal,i=t.currentDate,a=t.currentMonth,s=t.currentYear,r=t.minutesWidthOnXAxis,n=t.numberOfHours,o=new C(this.ctx),l="hour",h=function(t,e){return t>o.determineDaysOfMonths(e+1,s)&&(x=1,e+=1),{month:e,date:x}},c=function(t,e){return t>o.determineDaysOfMonths(e+1,s)?e+=1:e},d=60-e.minMinute,u=d*r,f=e.minHour+1,p=f+1;60===d&&(u=0,p=(f=e.minHour)+1);var x=i,b=c(x,a);this.timeScaleArray.push({position:u,value:f,unit:l,day:x,hour:p,year:s,month:g.monthMod(b)});for(var m=u,v=0;v<n;v++){if(l="hour",p>=24)p=0,l="day",b=h(x+=1,b).month,b=c(x,b);var y=this._getYear(s,b,0);m=0===p&&0===v?d*r:60*r+m;var w=0===p?x:p;this.timeScaleArray.push({position:m,value:w,unit:l,hour:p,day:x,year:y,month:g.monthMod(b)}),p++}}},{key:"generateMinuteScale",value:function(t){var e=t.firstVal,i=t.currentMinute,a=t.currentHour,s=t.currentDate,r=t.currentMonth,n=t.currentYear,o=t.minutesWidthOnXAxis,l=t.numberOfMinutes,h=o-(i-e.minMinute),c=e.minMinute+1,d=c+1,u=s,f=r,p=n,x=a;this.timeScaleArray.push({position:h,value:c,unit:"minute",day:u,hour:x,minute:d,year:p,month:g.monthMod(f)});for(var b=h,m=0;m<l;m++)d>=60&&(d=0,24===(x+=1)&&(x=0)),b=o+b,this.timeScaleArray.push({position:b,value:d,unit:"minute",hour:x,minute:d,day:u,year:this._getYear(n,f,0),month:g.monthMod(f)}),d++}},{key:"createRawDateString",value:function(t,e){var i=t.year;return i+="-"+("0"+t.month.toString()).slice(-2),"day"===t.unit?i+="day"===t.unit?"-"+("0"+e).slice(-2):"-01":i+="-"+("0"+(t.day?t.day:"1")).slice(-2),"hour"===t.unit?i+="hour"===t.unit?"T"+("0"+e).slice(-2):"T00":i+="T"+("0"+(t.hour?t.hour:"0")).slice(-2),i+="minute"===t.unit?":"+("0"+e).slice(-2)+":00":":00:00",this.utc&&(i+=".000Z"),i}},{key:"formatDates",value:function(t){var e=this,i=this.w;return t.map((function(t){var a=t.value.toString(),s=new C(e.ctx),r=e.createRawDateString(t,a),n=s.getDate(r);if(void 0===i.config.xaxis.labels.format){var o="dd MMM",l=i.config.xaxis.labels.datetimeFormatter;"year"===t.unit&&(o=l.year),"month"===t.unit&&(o=l.month),"day"===t.unit&&(o=l.day),"hour"===t.unit&&(o=l.hour),"minute"===t.unit&&(o=l.minute),a=s.formatDate(n,o)}else a=s.formatDate(n,i.config.xaxis.labels.format);return{dateString:r,position:t.position,value:a,unit:t.unit,year:t.year,month:t.month}}))}},{key:"removeOverlappingTS",value:function(t){var e,i=this,a=new p(this.ctx),s=!1;t.length>0&&t[0].value&&t.every((function(e){return e.value.length===t[0].value.length}))&&(s=!0,e=a.getTextRects(t[0].value).width);var r=0,n=t.map((function(n,o){if(o>0&&i.w.config.xaxis.labels.hideOverlappingLabels){var l=s?e:a.getTextRects(t[r].value).width,h=t[r].position;return n.position>h+l+10?(r=o,n):null}return n}));return n=n.filter((function(t){return null!==t}))}},{key:"_getYear",value:function(t,e,i){return t+Math.floor(e/12)+i}}]),t}(),Pt=function(){function t(i,a){e(this,t),this.ctx=a,this.w=a.w,this.el=i}return a(t,[{key:"setupElements",value:function(){var t=this.w.globals,e=this.w.config,i=e.chart.type;t.axisCharts=["line","area","bar","rangeBar","candlestick","scatter","bubble","radar","heatmap"].indexOf(i)>-1,t.xyCharts=["line","area","bar","rangeBar","candlestick","scatter","bubble"].indexOf(i)>-1,t.isBarHorizontal=("bar"===e.chart.type||"rangeBar"===e.chart.type)&&e.plotOptions.bar.horizontal,t.chartClass=".apexcharts"+t.cuid,t.dom.baseEl=this.el,t.dom.elWrap=document.createElement("div"),p.setAttrs(t.dom.elWrap,{id:t.chartClass.substring(1),class:"apexcharts-canvas "+t.chartClass.substring(1)}),this.el.appendChild(t.dom.elWrap),t.dom.Paper=new window.SVG.Doc(t.dom.elWrap),t.dom.Paper.attr({class:"apexcharts-svg","xmlns:data":"ApexChartsNS",transform:"translate(".concat(e.chart.offsetX,", ").concat(e.chart.offsetY,")")}),t.dom.Paper.node.style.background=e.chart.background,this.setSVGDimensions(),t.dom.elGraphical=t.dom.Paper.group().attr({class:"apexcharts-inner apexcharts-graphical"}),t.dom.elAnnotations=t.dom.Paper.group().attr({class:"apexcharts-annotations"}),t.dom.elDefs=t.dom.Paper.defs(),t.dom.elLegendWrap=document.createElement("div"),t.dom.elLegendWrap.classList.add("apexcharts-legend"),t.dom.elWrap.appendChild(t.dom.elLegendWrap),t.dom.Paper.add(t.dom.elGraphical),t.dom.elGraphical.add(t.dom.elDefs)}},{key:"plotChartType",value:function(t,e){var i=this.w,a=i.config,s=i.globals,r={series:[],i:[]},n={series:[],i:[]},o={series:[],i:[]},l={series:[],i:[]},h={series:[],i:[]},c={series:[],i:[]};s.series.map((function(e,d){void 0!==t[d].type?("column"===t[d].type||"bar"===t[d].type?(s.series.length>1&&a.plotOptions.bar.horizontal&&console.warn("Horizontal bars are not supported in a mixed/combo chart. Please turn off `plotOptions.bar.horizontal`"),h.series.push(e),h.i.push(d),i.globals.columnSeries=h.series):"area"===t[d].type?(n.series.push(e),n.i.push(d)):"line"===t[d].type?(r.series.push(e),r.i.push(d)):"scatter"===t[d].type?(o.series.push(e),o.i.push(d)):"bubble"===t[d].type?(l.series.push(e),l.i.push(d)):"candlestick"===t[d].type?(c.series.push(e),c.i.push(d)):console.warn("You have specified an unrecognized chart type. Available types for this propery are line/area/column/bar/scatter/bubble"),s.comboCharts=!0):(r.series.push(e),r.i.push(d))}));var d=new Ct(this.ctx,e),g=new vt(this.ctx,e),u=new at(this.ctx),f=new kt(this.ctx),p=new At(this.ctx,e),x=new wt(this.ctx),b=[];if(s.comboCharts){if(n.series.length>0&&b.push(d.draw(n.series,"area",n.i)),h.series.length>0)if(i.config.chart.stacked){var m=new mt(this.ctx,e);b.push(m.draw(h.series,h.i))}else{var v=new bt(this.ctx,e);b.push(v.draw(h.series,h.i))}if(r.series.length>0&&b.push(d.draw(r.series,"line",r.i)),c.series.length>0&&b.push(g.draw(c.series,c.i)),o.series.length>0){var y=new Ct(this.ctx,e,!0);b.push(y.draw(o.series,"scatter",o.i))}if(l.series.length>0){var w=new Ct(this.ctx,e,!0);b.push(w.draw(l.series,"bubble",l.i))}}else switch(a.chart.type){case"line":b=d.draw(s.series,"line");break;case"area":b=d.draw(s.series,"area");break;case"bar":if(a.chart.stacked)b=new mt(this.ctx,e).draw(s.series);else b=new bt(this.ctx,e).draw(s.series);break;case"candlestick":b=new vt(this.ctx,e).draw(s.series);break;case"rangeBar":b=p.draw(s.series);break;case"heatmap":b=new yt(this.ctx,e).draw(s.series);break;case"pie":case"donut":b=u.draw(s.series);break;case"radialBar":b=f.draw(s.series);break;case"radar":b=x.draw(s.series);break;default:b=d.draw(s.series)}return b}},{key:"setSVGDimensions",value:function(){var t=this.w.globals,e=this.w.config;t.svgWidth=e.chart.width,t.svgHeight=e.chart.height;var i=g.getDimensions(this.el),a=e.chart.width.toString().split(/[0-9]+/g).pop();if("%"===a?g.isNumber(i[0])&&(0===i[0].width&&(i=g.getDimensions(this.el.parentNode)),t.svgWidth=i[0]*parseInt(e.chart.width,10)/100):"px"!==a&&""!==a||(t.svgWidth=parseInt(e.chart.width,10)),"auto"!==t.svgHeight&&""!==t.svgHeight)if("%"===e.chart.height.toString().split(/[0-9]+/g).pop()){var s=g.getDimensions(this.el.parentNode);t.svgHeight=s[1]*parseInt(e.chart.height,10)/100}else t.svgHeight=parseInt(e.chart.height,10);else t.axisCharts?t.svgHeight=t.svgWidth/1.61:t.svgHeight=t.svgWidth/1.2;t.svgWidth<0&&(t.svgWidth=0),t.svgHeight<0&&(t.svgHeight=0),p.setAttrs(t.dom.Paper.node,{width:t.svgWidth,height:t.svgHeight});var r=e.chart.sparkline.enabled?0:t.axisCharts?e.chart.parentHeightOffset:0;t.dom.Paper.node.parentNode.parentNode.style.minHeight=t.svgHeight+r+"px",t.dom.elWrap.style.width=t.svgWidth+"px",t.dom.elWrap.style.height=t.svgHeight+"px"}},{key:"shiftGraphPosition",value:function(){var t=this.w.globals,e=t.translateY,i={transform:"translate("+t.translateX+", "+e+")"};p.setAttrs(t.dom.elGraphical.node,i),t.x2SpaceAvailable=t.svgWidth-t.dom.elGraphical.x()-t.gridWidth}},{key:"resizeNonAxisCharts",value:function(){var t=this.w,e=t.globals,i=0,a=t.config.chart.sparkline.enabled?1:15;a+=t.config.grid.padding.bottom,"top"!==t.config.legend.position&&"bottom"!==t.config.legend.position||!t.config.legend.show||t.config.legend.floating||(i=new rt(this.ctx).legendHelpers.getLegendBBox().clwh+10);var s=t.globals.dom.baseEl.querySelector(".apexcharts-radialbar"),r=2.05*t.globals.radialSize;if(s&&!t.config.chart.sparkline.enabled){var n=g.getBoundingClientRect(s);r=n.bottom;var o=n.bottom-n.top;r=Math.max(2.05*t.globals.radialSize,o)}var l=r+e.translateY+i+a;e.dom.elLegendForeign&&e.dom.elLegendForeign.setAttribute("height",l),e.dom.elWrap.style.height=l+"px",p.setAttrs(e.dom.Paper.node,{height:l}),e.dom.Paper.node.parentNode.parentNode.style.minHeight=l+"px"}},{key:"coreCalculations",value:function(){new V(this.ctx).init()}},{key:"resetGlobals",value:function(){var t=this,e=function(){return t.w.config.series.map((function(t){return[]}))},i=new T,a=this.w.globals;i.initGlobalVars(a),a.seriesXvalues=e(),a.seriesYvalues=e()}},{key:"isMultipleY",value:function(){if(this.w.config.yaxis.constructor===Array&&this.w.config.yaxis.length>1)return this.w.globals.isMultipleYAxis=!0,!0}},{key:"xySettings",value:function(){var t=null,e=this.w;if(e.globals.axisCharts){if("back"===e.config.xaxis.crosshairs.position)new q(this.ctx).drawXCrosshairs();if("back"===e.config.yaxis[0].crosshairs.position)new q(this.ctx).drawYCrosshairs();if("datetime"===e.config.xaxis.type&&void 0===e.config.xaxis.labels.formatter){var i=new Lt(this.ctx),a=[];isFinite(e.globals.minX)&&isFinite(e.globals.maxX)&&!e.globals.isBarHorizontal?a=i.calculateTimeScaleTicks(e.globals.minX,e.globals.maxX):e.globals.isBarHorizontal&&(a=i.calculateTimeScaleTicks(e.globals.minY,e.globals.maxY)),i.recalcDimensionsBasedOnFormat(a)}t=new I(this.ctx).getCalculatedRatios()}return t}},{key:"setupBrushHandler",value:function(){var t=this,e=this.w;if(e.config.chart.brush.enabled&&"function"!=typeof e.config.chart.events.selection){var i=e.config.chart.brush.targets||[e.config.chart.brush.target];i.forEach((function(e){var i=ApexCharts.getChartByID(e);i.w.globals.brushSource=t.ctx;var a=function(){t.ctx.updateHelpers._updateOptions({chart:{selection:{xaxis:{min:i.w.globals.minX,max:i.w.globals.maxX}}}},!1,!1)};"function"!=typeof i.w.config.chart.events.zoomed&&(i.w.config.chart.events.zoomed=function(){a()}),"function"!=typeof i.w.config.chart.events.scrolled&&(i.w.config.chart.events.scrolled=function(){a()})})),e.config.chart.events.selection=function(t,a){i.forEach((function(t){var i=ApexCharts.getChartByID(t),s=g.clone(e.config.yaxis);e.config.chart.brush.autoScaleYaxis&&1===i.w.globals.series.length&&(s=new B(i).autoScaleY(i,s,a));i.ctx.updateHelpers._updateOptions({xaxis:{min:a.xaxis.min,max:a.xaxis.max},yaxis:n({},i.w.config.yaxis[0],{min:s[0].min,max:s[0].max})},!1,!1,!1,!1)}))}}}}]),t}(),Tt=function(){function i(t){e(this,i),this.ctx=t,this.w=t.w}return a(i,[{key:"_updateOptions",value:function(e){var i=this,a=arguments.length>1&&void 0!==arguments[1]&&arguments[1],s=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],r=!(arguments.length>3&&void 0!==arguments[3])||arguments[3],n=arguments.length>4&&void 0!==arguments[4]&&arguments[4],o=[this.ctx];r&&(o=this.ctx.getSyncedCharts()),this.ctx.w.globals.isExecCalled&&(o=[this.ctx],this.ctx.w.globals.isExecCalled=!1),o.forEach((function(r){var o=r.w;return o.globals.shouldAnimate=s,a||(o.globals.resized=!0,o.globals.dataChanged=!0,s&&r.series.getPreviousPaths()),e&&"object"===t(e)&&(r.config=new P(e),e=I.extendArrayProps(r.config,e),r.w.globals.chartID!==i.ctx.w.globals.chartID&&delete e.series,o.config=g.extend(o.config,e),n&&(o.globals.lastXAxis=[],o.globals.lastYAxis=[],o.globals.initialConfig=g.extend({},o.config),o.globals.initialSeries=JSON.parse(JSON.stringify(o.config.series)))),r.update(e)}))}},{key:"_updateSeries",value:function(t,e){var i,a=this,s=arguments.length>2&&void 0!==arguments[2]&&arguments[2],r=this.w;return r.globals.shouldAnimate=e,r.globals.dataChanged=!0,e&&this.ctx.series.getPreviousPaths(),r.globals.axisCharts?(0===(i=t.map((function(t,e){return a._extendSeries(t,e)}))).length&&(i=[{data:[]}]),r.config.series=i):r.config.series=t.slice(),s&&(r.globals.initialConfig.series=JSON.parse(JSON.stringify(r.config.series)),r.globals.initialSeries=JSON.parse(JSON.stringify(r.config.series))),this.ctx.update()}},{key:"_extendSeries",value:function(t,e){var i=this.w;return n({},i.config.series[e],{name:t.name?t.name:i.config.series[e]&&i.config.series[e].name,type:t.type?t.type:i.config.series[e]&&i.config.series[e].type,data:t.data?t.data:i.config.series[e]&&i.config.series[e].data})}},{key:"toggleDataPointSelection",value:function(t,e){var i=this.w,a=null,s=".apexcharts-series[data\\:realIndex='".concat(t,"']");i.globals.axisCharts?a=i.globals.dom.Paper.select("".concat(s," path[j='").concat(e,"'], ").concat(s," circle[j='").concat(e,"'], ").concat(s," rect[j='").concat(e,"']")).members[0]:void 0===e&&(a=i.globals.dom.Paper.select("".concat(s," path[j='").concat(t,"']")).members[0],("pie"===i.config.chart.type||"donut"===i.config.chart.type)&&new at(this.ctx).pieClicked(t));return a?(new p(this.ctx).pathMouseDown(a,null),a.node?a.node:null):(console.warn("toggleDataPointSelection: Element not found"),null)}},{key:"forceXAxisUpdate",value:function(t){var e=this.w;if(["min","max"].forEach((function(i){void 0!==t.xaxis[i]&&(e.config.xaxis[i]=t.xaxis[i],e.globals.lastXAxis[i]=t.xaxis[i])})),t.xaxis.categories&&t.xaxis.categories.length&&(e.config.xaxis.categories=t.xaxis.categories),e.config.xaxis.convertedCatToNumeric){var i=new L(t);t=i.convertCatToNumericXaxis(t,this.ctx)}return t}},{key:"forceYAxisUpdate",value:function(t){var e=this.w;return e.config.chart.stacked&&"100%"===e.config.chart.stackType&&(Array.isArray(t.yaxis)?t.yaxis.forEach((function(e,i){t.yaxis[i].min=0,t.yaxis[i].max=100})):(t.yaxis.min=0,t.yaxis.max=100)),t}},{key:"revertDefaultAxisMinMax",value:function(){var t=this,e=this.w;e.config.xaxis.min=e.globals.lastXAxis.min,e.config.xaxis.max=e.globals.lastXAxis.max,e.config.yaxis.map((function(i,a){e.globals.zoomed?void 0!==e.globals.lastYAxis[a]&&(i.min=e.globals.lastYAxis[a].min,i.max=e.globals.lastYAxis[a].max):void 0!==t.ctx.opts.yaxis[a]&&(i.min=t.ctx.opts.yaxis[a].min,i.max=t.ctx.opts.yaxis[a].max)}))}}]),i}();y="undefined"!=typeof window?window:void 0,w=function(e,i){var a=(void 0!==this?this:e).SVG=function(t){if(a.supported)return t=new a.Doc(t),a.parser.draw||a.prepare(),t};if(a.ns="http://www.w3.org/2000/svg",a.xmlns="http://www.w3.org/2000/xmlns/",a.xlink="http://www.w3.org/1999/xlink",a.svgjs="http://svgjs.com/svgjs",a.supported=!0,!a.supported)return!1;a.did=1e3,a.eid=function(t){return"Svgjs"+d(t)+a.did++},a.create=function(t){var e=i.createElementNS(this.ns,t);return e.setAttribute("id",this.eid(t)),e},a.extend=function(){var t,e;e=(t=[].slice.call(arguments)).pop();for(var i=t.length-1;i>=0;i--)if(t[i])for(var s in e)t[i].prototype[s]=e[s];a.Set&&a.Set.inherit&&a.Set.inherit()},a.invent=function(t){var e="function"==typeof t.create?t.create:function(){this.constructor.call(this,a.create(t.create))};return t.inherit&&(e.prototype=new t.inherit),t.extend&&a.extend(e,t.extend),t.construct&&a.extend(t.parent||a.Container,t.construct),e},a.adopt=function(t){return t?t.instance?t.instance:((i="svg"==t.nodeName?t.parentNode instanceof e.SVGElement?new a.Nested:new a.Doc:"linearGradient"==t.nodeName?new a.Gradient("linear"):"radialGradient"==t.nodeName?new a.Gradient("radial"):a[d(t.nodeName)]?new(a[d(t.nodeName)]):new a.Element(t)).type=t.nodeName,i.node=t,t.instance=i,i instanceof a.Doc&&i.namespace().defs(),i.setData(JSON.parse(t.getAttribute("svgjs:data"))||{}),i):null;var i},a.prepare=function(){var t=i.getElementsByTagName("body")[0],e=(t?new a.Doc(t):a.adopt(i.documentElement).nested()).size(2,0);a.parser={body:t||i.documentElement,draw:e.style("opacity:0;position:absolute;left:-100%;top:-100%;overflow:hidden").node,poly:e.polyline().node,path:e.path().node,native:a.create("svg")}},a.parser={native:a.create("svg")},i.addEventListener("DOMContentLoaded",(function(){a.parser.draw||a.prepare()}),!1),a.regex={numberAndUnit:/^([+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?)([a-z%]*)$/i,hex:/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i,rgb:/rgb\((\d+),(\d+),(\d+)\)/,reference:/#([a-z0-9\-_]+)/i,transforms:/\)\s*,?\s*/,whitespace:/\s/g,isHex:/^#[a-f0-9]{3,6}$/i,isRgb:/^rgb\(/,isCss:/[^:]+:[^;]+;?/,isBlank:/^(\s+)?$/,isNumber:/^[+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?$/i,isPercent:/^-?[\d\.]+%$/,isImage:/\.(jpg|jpeg|png|gif|svg)(\?[^=]+.*)?/i,delimiter:/[\s,]+/,hyphen:/([^e])\-/gi,pathLetters:/[MLHVCSQTAZ]/gi,isPathLetter:/[MLHVCSQTAZ]/i,numbersWithDots:/((\d?\.\d+(?:e[+-]?\d+)?)((?:\.\d+(?:e[+-]?\d+)?)+))+/gi,dots:/\./g},a.utils={map:function(t,e){for(var i=t.length,a=[],s=0;s<i;s++)a.push(e(t[s]));return a},filter:function(t,e){for(var i=t.length,a=[],s=0;s<i;s++)e(t[s])&&a.push(t[s]);return a},filterSVGElements:function(t){return this.filter(t,(function(t){return t instanceof e.SVGElement}))}},a.defaults={attrs:{"fill-opacity":1,"stroke-opacity":1,"stroke-width":0,"stroke-linejoin":"miter","stroke-linecap":"butt",fill:"#000000",stroke:"#000000",opacity:1,x:0,y:0,cx:0,cy:0,width:0,height:0,r:0,rx:0,ry:0,offset:0,"stop-opacity":1,"stop-color":"#000000","font-size":16,"font-family":"Helvetica, Arial, sans-serif","text-anchor":"start"}},a.Color=function(e){var i,s;this.r=0,this.g=0,this.b=0,e&&("string"==typeof e?a.regex.isRgb.test(e)?(i=a.regex.rgb.exec(e.replace(a.regex.whitespace,"")),this.r=parseInt(i[1]),this.g=parseInt(i[2]),this.b=parseInt(i[3])):a.regex.isHex.test(e)&&(i=a.regex.hex.exec(4==(s=e).length?["#",s.substring(1,2),s.substring(1,2),s.substring(2,3),s.substring(2,3),s.substring(3,4),s.substring(3,4)].join(""):s),this.r=parseInt(i[1],16),this.g=parseInt(i[2],16),this.b=parseInt(i[3],16)):"object"===t(e)&&(this.r=e.r,this.g=e.g,this.b=e.b))},a.extend(a.Color,{toString:function(){return this.toHex()},toHex:function(){return"#"+g(this.r)+g(this.g)+g(this.b)},toRgb:function(){return"rgb("+[this.r,this.g,this.b].join()+")"},brightness:function(){return this.r/255*.3+this.g/255*.59+this.b/255*.11},morph:function(t){return this.destination=new a.Color(t),this},at:function(t){return this.destination?(t=t<0?0:t>1?1:t,new a.Color({r:~~(this.r+(this.destination.r-this.r)*t),g:~~(this.g+(this.destination.g-this.g)*t),b:~~(this.b+(this.destination.b-this.b)*t)})):this}}),a.Color.test=function(t){return t+="",a.regex.isHex.test(t)||a.regex.isRgb.test(t)},a.Color.isRgb=function(t){return t&&"number"==typeof t.r&&"number"==typeof t.g&&"number"==typeof t.b},a.Color.isColor=function(t){return a.Color.isRgb(t)||a.Color.test(t)},a.Array=function(t,e){0==(t=(t||[]).valueOf()).length&&e&&(t=e.valueOf()),this.value=this.parse(t)},a.extend(a.Array,{toString:function(){return this.value.join(" ")},valueOf:function(){return this.value},parse:function(t){return t=t.valueOf(),Array.isArray(t)?t:this.split(t)}}),a.PointArray=function(t,e){a.Array.call(this,t,e||[[0,0]])},a.PointArray.prototype=new a.Array,a.PointArray.prototype.constructor=a.PointArray;for(var s={M:function(t,e,i){return e.x=i.x=t[0],e.y=i.y=t[1],["M",e.x,e.y]},L:function(t,e){return e.x=t[0],e.y=t[1],["L",t[0],t[1]]},H:function(t,e){return e.x=t[0],["H",t[0]]},V:function(t,e){return e.y=t[0],["V",t[0]]},C:function(t,e){return e.x=t[4],e.y=t[5],["C",t[0],t[1],t[2],t[3],t[4],t[5]]},Q:function(t,e){return e.x=t[2],e.y=t[3],["Q",t[0],t[1],t[2],t[3]]},Z:function(t,e,i){return e.x=i.x,e.y=i.y,["Z"]}},r="mlhvqtcsaz".split(""),n=0,o=r.length;n<o;++n)s[r[n]]=function(t){return function(e,i,a){if("H"==t)e[0]=e[0]+i.x;else if("V"==t)e[0]=e[0]+i.y;else if("A"==t)e[5]=e[5]+i.x,e[6]=e[6]+i.y;else for(var r=0,n=e.length;r<n;++r)e[r]=e[r]+(r%2?i.y:i.x);return s[t](e,i,a)}}(r[n].toUpperCase());a.PathArray=function(t,e){a.Array.call(this,t,e||[["M",0,0]])},a.PathArray.prototype=new a.Array,a.PathArray.prototype.constructor=a.PathArray,a.extend(a.PathArray,{toString:function(){return function(t){for(var e=0,i=t.length,a="";e<i;e++)a+=t[e][0],null!=t[e][1]&&(a+=t[e][1],null!=t[e][2]&&(a+=" ",a+=t[e][2],null!=t[e][3]&&(a+=" ",a+=t[e][3],a+=" ",a+=t[e][4],null!=t[e][5]&&(a+=" ",a+=t[e][5],a+=" ",a+=t[e][6],null!=t[e][7]&&(a+=" ",a+=t[e][7])))));return a+" "}(this.value)},move:function(t,e){var i=this.bbox();return i.x,i.y,this},at:function(t){if(!this.destination)return this;for(var e=this.value,i=this.destination.value,s=[],r=new a.PathArray,n=0,o=e.length;n<o;n++){s[n]=[e[n][0]];for(var l=1,h=e[n].length;l<h;l++)s[n][l]=e[n][l]+(i[n][l]-e[n][l])*t;"A"===s[n][0]&&(s[n][4]=+(0!=s[n][4]),s[n][5]=+(0!=s[n][5]))}return r.value=s,r},parse:function(t){if(t instanceof a.PathArray)return t.valueOf();var e,i={M:2,L:2,H:1,V:1,C:6,S:4,Q:4,T:2,A:7,Z:0};t="string"==typeof t?t.replace(a.regex.numbersWithDots,h).replace(a.regex.pathLetters," $& ").replace(a.regex.hyphen,"$1 -").trim().split(a.regex.delimiter):t.reduce((function(t,e){return[].concat.call(t,e)}),[]);var r=[],n=new a.Point,o=new a.Point,l=0,c=t.length;do{a.regex.isPathLetter.test(t[l])?(e=t[l],++l):"M"==e?e="L":"m"==e&&(e="l"),r.push(s[e].call(null,t.slice(l,l+=i[e.toUpperCase()]).map(parseFloat),n,o))}while(c>l);return r},bbox:function(){return a.parser.draw||a.prepare(),a.parser.path.setAttribute("d",this.toString()),a.parser.path.getBBox()}}),a.Number=a.invent({create:function(t,e){this.value=0,this.unit=e||"","number"==typeof t?this.value=isNaN(t)?0:isFinite(t)?t:t<0?-34e37:34e37:"string"==typeof t?(e=t.match(a.regex.numberAndUnit))&&(this.value=parseFloat(e[1]),"%"==e[5]?this.value/=100:"s"==e[5]&&(this.value*=1e3),this.unit=e[5]):t instanceof a.Number&&(this.value=t.valueOf(),this.unit=t.unit)},extend:{toString:function(){return("%"==this.unit?~~(1e8*this.value)/1e6:"s"==this.unit?this.value/1e3:this.value)+this.unit},toJSON:function(){return this.toString()},valueOf:function(){return this.value},plus:function(t){return t=new a.Number(t),new a.Number(this+t,this.unit||t.unit)},minus:function(t){return t=new a.Number(t),new a.Number(this-t,this.unit||t.unit)},times:function(t){return t=new a.Number(t),new a.Number(this*t,this.unit||t.unit)},divide:function(t){return t=new a.Number(t),new a.Number(this/t,this.unit||t.unit)},to:function(t){var e=new a.Number(this);return"string"==typeof t&&(e.unit=t),e},morph:function(t){return this.destination=new a.Number(t),t.relative&&(this.destination.value+=this.value),this},at:function(t){return this.destination?new a.Number(this.destination).minus(this).times(t).plus(this):this}}}),a.Element=a.invent({create:function(t){this._stroke=a.defaults.attrs.stroke,this._event=null,this.dom={},(this.node=t)&&(this.type=t.nodeName,this.node.instance=this,this._stroke=t.getAttribute("stroke")||this._stroke)},extend:{x:function(t){return this.attr("x",t)},y:function(t){return this.attr("y",t)},cx:function(t){return null==t?this.x()+this.width()/2:this.x(t-this.width()/2)},cy:function(t){return null==t?this.y()+this.height()/2:this.y(t-this.height()/2)},move:function(t,e){return this.x(t).y(e)},center:function(t,e){return this.cx(t).cy(e)},width:function(t){return this.attr("width",t)},height:function(t){return this.attr("height",t)},size:function(t,e){var i=u(this,t,e);return this.width(new a.Number(i.width)).height(new a.Number(i.height))},clone:function(t){this.writeDataToDom();var e=x(this.node.cloneNode(!0));return t?t.add(e):this.after(e),e},remove:function(){return this.parent()&&this.parent().removeElement(this),this},replace:function(t){return this.after(t).remove(),t},addTo:function(t){return t.put(this)},putIn:function(t){return t.add(this)},id:function(t){return this.attr("id",t)},show:function(){return this.style("display","")},hide:function(){return this.style("display","none")},visible:function(){return"none"!=this.style("display")},toString:function(){return this.attr("id")},classes:function(){var t=this.attr("class");return null==t?[]:t.trim().split(a.regex.delimiter)},hasClass:function(t){return-1!=this.classes().indexOf(t)},addClass:function(t){if(!this.hasClass(t)){var e=this.classes();e.push(t),this.attr("class",e.join(" "))}return this},removeClass:function(t){return this.hasClass(t)&&this.attr("class",this.classes().filter((function(e){return e!=t})).join(" ")),this},toggleClass:function(t){return this.hasClass(t)?this.removeClass(t):this.addClass(t)},reference:function(t){return a.get(this.attr(t))},parent:function(t){var i=this;if(!i.node.parentNode)return null;if(i=a.adopt(i.node.parentNode),!t)return i;for(;i&&i.node instanceof e.SVGElement;){if("string"==typeof t?i.matches(t):i instanceof t)return i;if(!i.node.parentNode||"#document"==i.node.parentNode.nodeName)return null;i=a.adopt(i.node.parentNode)}},doc:function(){return this instanceof a.Doc?this:this.parent(a.Doc)},parents:function(t){var e=[],i=this;do{if(!(i=i.parent(t))||!i.node)break;e.push(i)}while(i.parent);return e},matches:function(t){return function(t,e){return(t.matches||t.matchesSelector||t.msMatchesSelector||t.mozMatchesSelector||t.webkitMatchesSelector||t.oMatchesSelector).call(t,e)}(this.node,t)},native:function(){return this.node},svg:function(t){var e=i.createElement("svg");if(!(t&&this instanceof a.Parent))return e.appendChild(t=i.createElement("svg")),this.writeDataToDom(),t.appendChild(this.node.cloneNode(!0)),e.innerHTML.replace(/^<svg>/,"").replace(/<\/svg>$/,"");e.innerHTML="<svg>"+t.replace(/\n/,"").replace(/<([\w:-]+)([^<]+?)\/>/g,"<$1$2></$1>")+"</svg>";for(var s=0,r=e.firstChild.childNodes.length;s<r;s++)this.node.appendChild(e.firstChild.firstChild);return this},writeDataToDom:function(){return(this.each||this.lines)&&(this.each?this:this.lines()).each((function(){this.writeDataToDom()})),this.node.removeAttribute("svgjs:data"),Object.keys(this.dom).length&&this.node.setAttribute("svgjs:data",JSON.stringify(this.dom)),this},setData:function(t){return this.dom=t,this},is:function(t){return function(t,e){return t instanceof e}(this,t)}}}),a.easing={"-":function(t){return t},"<>":function(t){return-Math.cos(t*Math.PI)/2+.5},">":function(t){return Math.sin(t*Math.PI/2)},"<":function(t){return 1-Math.cos(t*Math.PI/2)}},a.morph=function(t){return function(e,i){return new a.MorphObj(e,i).at(t)}},a.Situation=a.invent({create:function(t){this.init=!1,this.reversed=!1,this.reversing=!1,this.duration=new a.Number(t.duration).valueOf(),this.delay=new a.Number(t.delay).valueOf(),this.start=+new Date+this.delay,this.finish=this.start+this.duration,this.ease=t.ease,this.loop=0,this.loops=!1,this.animations={},this.attrs={},this.styles={},this.transforms=[],this.once={}}}),a.FX=a.invent({create:function(t){this._target=t,this.situations=[],this.active=!1,this.situation=null,this.paused=!1,this.lastPos=0,this.pos=0,this.absPos=0,this._speed=1},extend:{animate:function(e,i,s){"object"===t(e)&&(i=e.ease,s=e.delay,e=e.duration);var r=new a.Situation({duration:e||1e3,delay:s||0,ease:a.easing[i||"-"]||i});return this.queue(r),this},target:function(t){return t&&t instanceof a.Element?(this._target=t,this):this._target},timeToAbsPos:function(t){return(t-this.situation.start)/(this.situation.duration/this._speed)},absPosToTime:function(t){return this.situation.duration/this._speed*t+this.situation.start},startAnimFrame:function(){this.stopAnimFrame(),this.animationFrame=e.requestAnimationFrame(function(){this.step()}.bind(this))},stopAnimFrame:function(){e.cancelAnimationFrame(this.animationFrame)},start:function(){return!this.active&&this.situation&&(this.active=!0,this.startCurrent()),this},startCurrent:function(){return this.situation.start=+new Date+this.situation.delay/this._speed,this.situation.finish=this.situation.start+this.situation.duration/this._speed,this.initAnimations().step()},queue:function(t){return("function"==typeof t||t instanceof a.Situation)&&this.situations.push(t),this.situation||(this.situation=this.situations.shift()),this},dequeue:function(){return this.stop(),this.situation=this.situations.shift(),this.situation&&(this.situation instanceof a.Situation?this.start():this.situation.call(this)),this},initAnimations:function(){var t,e=this.situation;if(e.init)return this;for(var i in e.animations){t=this.target()[i](),Array.isArray(t)||(t=[t]),Array.isArray(e.animations[i])||(e.animations[i]=[e.animations[i]]);for(var s=t.length;s--;)e.animations[i][s]instanceof a.Number&&(t[s]=new a.Number(t[s])),e.animations[i][s]=t[s].morph(e.animations[i][s])}for(var i in e.attrs)e.attrs[i]=new a.MorphObj(this.target().attr(i),e.attrs[i]);for(var i in e.styles)e.styles[i]=new a.MorphObj(this.target().style(i),e.styles[i]);return e.initialTransformation=this.target().matrixify(),e.init=!0,this},clearQueue:function(){return this.situations=[],this},clearCurrent:function(){return this.situation=null,this},stop:function(t,e){var i=this.active;return this.active=!1,e&&this.clearQueue(),t&&this.situation&&(!i&&this.startCurrent(),this.atEnd()),this.stopAnimFrame(),this.clearCurrent()},after:function(t){var e=this.last();return this.target().on("finished.fx",(function i(a){a.detail.situation==e&&(t.call(this,e),this.off("finished.fx",i))})),this._callStart()},during:function(t){var e=this.last(),i=function(i){i.detail.situation==e&&t.call(this,i.detail.pos,a.morph(i.detail.pos),i.detail.eased,e)};return this.target().off("during.fx",i).on("during.fx",i),this.after((function(){this.off("during.fx",i)})),this._callStart()},afterAll:function(t){var e=function e(i){t.call(this),this.off("allfinished.fx",e)};return this.target().off("allfinished.fx",e).on("allfinished.fx",e),this._callStart()},last:function(){return this.situations.length?this.situations[this.situations.length-1]:this.situation},add:function(t,e,i){return this.last()[i||"animations"][t]=e,this._callStart()},step:function(t){var e,i,a;t||(this.absPos=this.timeToAbsPos(+new Date)),!1!==this.situation.loops?(e=Math.max(this.absPos,0),i=Math.floor(e),!0===this.situation.loops||i<this.situation.loops?(this.pos=e-i,a=this.situation.loop,this.situation.loop=i):(this.absPos=this.situation.loops,this.pos=1,a=this.situation.loop-1,this.situation.loop=this.situation.loops),this.situation.reversing&&(this.situation.reversed=this.situation.reversed!=Boolean((this.situation.loop-a)%2))):(this.absPos=Math.min(this.absPos,1),this.pos=this.absPos),this.pos<0&&(this.pos=0),this.situation.reversed&&(this.pos=1-this.pos);var s=this.situation.ease(this.pos);for(var r in this.situation.once)r>this.lastPos&&r<=s&&(this.situation.once[r].call(this.target(),this.pos,s),delete this.situation.once[r]);return this.active&&this.target().fire("during",{pos:this.pos,eased:s,fx:this,situation:this.situation}),this.situation?(this.eachAt(),1==this.pos&&!this.situation.reversed||this.situation.reversed&&0==this.pos?(this.stopAnimFrame(),this.target().fire("finished",{fx:this,situation:this.situation}),this.situations.length||(this.target().fire("allfinished"),this.situations.length||(this.target().off(".fx"),this.active=!1)),this.active?this.dequeue():this.clearCurrent()):!this.paused&&this.active&&this.startAnimFrame(),this.lastPos=s,this):this},eachAt:function(){var t,e=this,i=this.target(),s=this.situation;for(var r in s.animations)t=[].concat(s.animations[r]).map((function(t){return"string"!=typeof t&&t.at?t.at(s.ease(e.pos),e.pos):t})),i[r].apply(i,t);for(var r in s.attrs)t=[r].concat(s.attrs[r]).map((function(t){return"string"!=typeof t&&t.at?t.at(s.ease(e.pos),e.pos):t})),i.attr.apply(i,t);for(var r in s.styles)t=[r].concat(s.styles[r]).map((function(t){return"string"!=typeof t&&t.at?t.at(s.ease(e.pos),e.pos):t})),i.style.apply(i,t);if(s.transforms.length){t=s.initialTransformation,r=0;for(var n=s.transforms.length;r<n;r++){var o=s.transforms[r];o instanceof a.Matrix?t=o.relative?t.multiply((new a.Matrix).morph(o).at(s.ease(this.pos))):t.morph(o).at(s.ease(this.pos)):(o.relative||o.undo(t.extract()),t=t.multiply(o.at(s.ease(this.pos))))}i.matrix(t)}return this},once:function(t,e,i){var a=this.last();return i||(t=a.ease(t)),a.once[t]=e,this},_callStart:function(){return setTimeout(function(){this.start()}.bind(this),0),this}},parent:a.Element,construct:{animate:function(t,e,i){return(this.fx||(this.fx=new a.FX(this))).animate(t,e,i)},delay:function(t){return(this.fx||(this.fx=new a.FX(this))).delay(t)},stop:function(t,e){return this.fx&&this.fx.stop(t,e),this},finish:function(){return this.fx&&this.fx.finish(),this}}}),a.MorphObj=a.invent({create:function(t,e){return a.Color.isColor(e)?new a.Color(t).morph(e):a.regex.delimiter.test(t)?a.regex.pathLetters.test(t)?new a.PathArray(t).morph(e):new a.Array(t).morph(e):a.regex.numberAndUnit.test(e)?new a.Number(t).morph(e):(this.value=t,void(this.destination=e))},extend:{at:function(t,e){return e<1?this.value:this.destination},valueOf:function(){return this.value}}}),a.extend(a.FX,{attr:function(e,i,a){if("object"===t(e))for(var s in e)this.attr(s,e[s]);else this.add(e,i,"attrs");return this},plot:function(t,e,i,a){return 4==arguments.length?this.plot([t,e,i,a]):this.add("plot",new(this.target().morphArray)(t))}}),a.Box=a.invent({create:function(e,i,s,r){if(!("object"!==t(e)||e instanceof a.Element))return a.Box.call(this,null!=e.left?e.left:e.x,null!=e.top?e.top:e.y,e.width,e.height);4==arguments.length&&(this.x=e,this.y=i,this.width=s,this.height=r),b(this)}}),a.BBox=a.invent({create:function(t){if(a.Box.apply(this,[].slice.call(arguments)),t instanceof a.Element){var e;try{if(!i.documentElement.contains){for(var s=t.node;s.parentNode;)s=s.parentNode;if(s!=i)throw new Error("Element not in the dom")}e=t.node.getBBox()}catch(i){if(t instanceof a.Shape){a.parser.draw||a.prepare();var r=t.clone(a.parser.draw.instance).show();e=r.node.getBBox(),r.remove()}else e={x:t.node.clientLeft,y:t.node.clientTop,width:t.node.clientWidth,height:t.node.clientHeight}}a.Box.call(this,e)}},inherit:a.Box,parent:a.Element,construct:{bbox:function(){return new a.BBox(this)}}}),a.BBox.prototype.constructor=a.BBox,a.Matrix=a.invent({create:function(e){var i=p([1,0,0,1,0,0]);e=e instanceof a.Element?e.matrixify():"string"==typeof e?p(e.split(a.regex.delimiter).map(parseFloat)):6==arguments.length?p([].slice.call(arguments)):Array.isArray(e)?p(e):"object"===t(e)?e:i;for(var s=v.length-1;s>=0;--s)this[v[s]]=null!=e[v[s]]?e[v[s]]:i[v[s]]},extend:{extract:function(){var t=f(this,0,1),e=(f(this,1,0),180/Math.PI*Math.atan2(t.y,t.x)-90);return{x:this.e,y:this.f,transformedX:(this.e*Math.cos(e*Math.PI/180)+this.f*Math.sin(e*Math.PI/180))/Math.sqrt(this.a*this.a+this.b*this.b),transformedY:(this.f*Math.cos(e*Math.PI/180)+this.e*Math.sin(-e*Math.PI/180))/Math.sqrt(this.c*this.c+this.d*this.d),rotation:e,a:this.a,b:this.b,c:this.c,d:this.d,e:this.e,f:this.f,matrix:new a.Matrix(this)}},clone:function(){return new a.Matrix(this)},morph:function(t){return this.destination=new a.Matrix(t),this},multiply:function(t){return new a.Matrix(this.native().multiply(function(t){return t instanceof a.Matrix||(t=new a.Matrix(t)),t}(t).native()))},inverse:function(){return new a.Matrix(this.native().inverse())},translate:function(t,e){return new a.Matrix(this.native().translate(t||0,e||0))},native:function(){for(var t=a.parser.native.createSVGMatrix(),e=v.length-1;e>=0;e--)t[v[e]]=this[v[e]];return t},toString:function(){return"matrix("+m(this.a)+","+m(this.b)+","+m(this.c)+","+m(this.d)+","+m(this.e)+","+m(this.f)+")"}},parent:a.Element,construct:{ctm:function(){return new a.Matrix(this.node.getCTM())},screenCTM:function(){if(this instanceof a.Nested){var t=this.rect(1,1),e=t.node.getScreenCTM();return t.remove(),new a.Matrix(e)}return new a.Matrix(this.node.getScreenCTM())}}}),a.Point=a.invent({create:function(e,i){var a;a=Array.isArray(e)?{x:e[0],y:e[1]}:"object"===t(e)?{x:e.x,y:e.y}:null!=e?{x:e,y:null!=i?i:e}:{x:0,y:0},this.x=a.x,this.y=a.y},extend:{clone:function(){return new a.Point(this)},morph:function(t,e){return this.destination=new a.Point(t,e),this}}}),a.extend(a.Element,{point:function(t,e){return new a.Point(t,e).transform(this.screenCTM().inverse())}}),a.extend(a.Element,{attr:function(e,i,s){if(null==e){for(e={},s=(i=this.node.attributes).length-1;s>=0;s--)e[i[s].nodeName]=a.regex.isNumber.test(i[s].nodeValue)?parseFloat(i[s].nodeValue):i[s].nodeValue;return e}if("object"===t(e))for(var r in e)this.attr(r,e[r]);else if(null===i)this.node.removeAttribute(e);else{if(null==i)return null==(i=this.node.getAttribute(e))?a.defaults.attrs[e]:a.regex.isNumber.test(i)?parseFloat(i):i;"stroke-width"==e?this.attr("stroke",parseFloat(i)>0?this._stroke:null):"stroke"==e&&(this._stroke=i),"fill"!=e&&"stroke"!=e||(a.regex.isImage.test(i)&&(i=this.doc().defs().image(i,0,0)),i instanceof a.Image&&(i=this.doc().defs().pattern(0,0,(function(){this.add(i)})))),"number"==typeof i?i=new a.Number(i):a.Color.isColor(i)?i=new a.Color(i):Array.isArray(i)&&(i=new a.Array(i)),"leading"==e?this.leading&&this.leading(i):"string"==typeof s?this.node.setAttributeNS(s,e,i.toString()):this.node.setAttribute(e,i.toString()),!this.rebuild||"font-size"!=e&&"x"!=e||this.rebuild(e,i)}return this}}),a.extend(a.Element,{transform:function(e,i){var s;return"object"!==t(e)?(s=new a.Matrix(this).extract(),"string"==typeof e?s[e]:s):(s=new a.Matrix(this),i=!!i||!!e.relative,null!=e.a&&(s=i?s.multiply(new a.Matrix(e)):new a.Matrix(e)),this.attr("transform",s))}}),a.extend(a.Element,{untransform:function(){return this.attr("transform",null)},matrixify:function(){return(this.attr("transform")||"").split(a.regex.transforms).slice(0,-1).map((function(t){var e=t.trim().split("(");return[e[0],e[1].split(a.regex.delimiter).map((function(t){return parseFloat(t)}))]})).reduce((function(t,e){return"matrix"==e[0]?t.multiply(p(e[1])):t[e[0]].apply(t,e[1])}),new a.Matrix)},toParent:function(t){if(this==t)return this;var e=this.screenCTM(),i=t.screenCTM().inverse();return this.addTo(t).untransform().transform(i.multiply(e)),this},toDoc:function(){return this.toParent(this.doc())}}),a.Transformation=a.invent({create:function(e,i){if(arguments.length>1&&"boolean"!=typeof i)return this.constructor.call(this,[].slice.call(arguments));if(Array.isArray(e))for(var a=0,s=this.arguments.length;a<s;++a)this[this.arguments[a]]=e[a];else if("object"===t(e))for(a=0,s=this.arguments.length;a<s;++a)this[this.arguments[a]]=e[this.arguments[a]];this.inversed=!1,!0===i&&(this.inversed=!0)}}),a.Translate=a.invent({parent:a.Matrix,inherit:a.Transformation,create:function(t,e){this.constructor.apply(this,[].slice.call(arguments))},extend:{arguments:["transformedX","transformedY"],method:"translate"}}),a.extend(a.Element,{style:function(e,i){if(0==arguments.length)return this.node.style.cssText||"";if(arguments.length<2)if("object"===t(e))for(var s in e)this.style(s,e[s]);else{if(!a.regex.isCss.test(e))return this.node.style[c(e)];for(e=e.split(/\s*;\s*/).filter((function(t){return!!t})).map((function(t){return t.split(/\s*:\s*/)}));i=e.pop();)this.style(i[0],i[1])}else this.node.style[c(e)]=null===i||a.regex.isBlank.test(i)?"":i;return this}}),a.Parent=a.invent({create:function(t){this.constructor.call(this,t)},inherit:a.Element,extend:{children:function(){return a.utils.map(a.utils.filterSVGElements(this.node.childNodes),(function(t){return a.adopt(t)}))},add:function(t,e){return null==e?this.node.appendChild(t.node):t.node!=this.node.childNodes[e]&&this.node.insertBefore(t.node,this.node.childNodes[e]),this},put:function(t,e){return this.add(t,e),t},has:function(t){return this.index(t)>=0},index:function(t){return[].slice.call(this.node.childNodes).indexOf(t.node)},get:function(t){return a.adopt(this.node.childNodes[t])},first:function(){return this.get(0)},last:function(){return this.get(this.node.childNodes.length-1)},each:function(t,e){for(var i=this.children(),s=0,r=i.length;s<r;s++)i[s]instanceof a.Element&&t.apply(i[s],[s,i]),e&&i[s]instanceof a.Container&&i[s].each(t,e);return this},removeElement:function(t){return this.node.removeChild(t.node),this},clear:function(){for(;this.node.hasChildNodes();)this.node.removeChild(this.node.lastChild);return delete this._defs,this},defs:function(){return this.doc().defs()}}}),a.extend(a.Parent,{ungroup:function(t,e){return 0===e||this instanceof a.Defs||this.node==a.parser.draw?this:(t=t||(this instanceof a.Doc?this:this.parent(a.Parent)),e=e||1/0,this.each((function(){return this instanceof a.Defs?this:this instanceof a.Parent?this.ungroup(t,e-1):this.toParent(t)})),this.node.firstChild||this.remove(),this)},flatten:function(t,e){return this.ungroup(t,e)}}),a.Container=a.invent({create:function(t){this.constructor.call(this,t)},inherit:a.Parent}),a.ViewBox=a.invent({parent:a.Container,construct:{}}),["click","dblclick","mousedown","mouseup","mouseover","mouseout","mousemove","touchstart","touchmove","touchleave","touchend","touchcancel"].forEach((function(t){a.Element.prototype[t]=function(e){return a.on(this.node,t,e),this}})),a.listeners=[],a.handlerMap=[],a.listenerId=0,a.on=function(t,e,i,s,r){var n=i.bind(s||t.instance||t),o=(a.handlerMap.indexOf(t)+1||a.handlerMap.push(t))-1,l=e.split(".")[0],h=e.split(".")[1]||"*";a.listeners[o]=a.listeners[o]||{},a.listeners[o][l]=a.listeners[o][l]||{},a.listeners[o][l][h]=a.listeners[o][l][h]||{},i._svgjsListenerId||(i._svgjsListenerId=++a.listenerId),a.listeners[o][l][h][i._svgjsListenerId]=n,t.addEventListener(l,n,r||!1)},a.off=function(t,e,i){var s=a.handlerMap.indexOf(t),r=e&&e.split(".")[0],n=e&&e.split(".")[1],o="";if(-1!=s)if(i){if("function"==typeof i&&(i=i._svgjsListenerId),!i)return;a.listeners[s][r]&&a.listeners[s][r][n||"*"]&&(t.removeEventListener(r,a.listeners[s][r][n||"*"][i],!1),delete a.listeners[s][r][n||"*"][i])}else if(n&&r){if(a.listeners[s][r]&&a.listeners[s][r][n]){for(var l in a.listeners[s][r][n])a.off(t,[r,n].join("."),l);delete a.listeners[s][r][n]}}else if(n)for(var h in a.listeners[s])for(var o in a.listeners[s][h])n===o&&a.off(t,[h,n].join("."));else if(r){if(a.listeners[s][r]){for(var o in a.listeners[s][r])a.off(t,[r,o].join("."));delete a.listeners[s][r]}}else{for(var h in a.listeners[s])a.off(t,h);delete a.listeners[s],delete a.handlerMap[s]}},a.extend(a.Element,{on:function(t,e,i,s){return a.on(this.node,t,e,i,s),this},off:function(t,e){return a.off(this.node,t,e),this},fire:function(t,i){return t instanceof e.Event?this.node.dispatchEvent(t):this.node.dispatchEvent(t=new a.CustomEvent(t,{detail:i,cancelable:!0})),this._event=t,this},event:function(){return this._event}}),a.Defs=a.invent({create:"defs",inherit:a.Container}),a.G=a.invent({create:"g",inherit:a.Container,extend:{x:function(t){return null==t?this.transform("x"):this.transform({x:t-this.x()},!0)}},construct:{group:function(){return this.put(new a.G)}}}),a.Doc=a.invent({create:function(t){t&&("svg"==(t="string"==typeof t?i.getElementById(t):t).nodeName?this.constructor.call(this,t):(this.constructor.call(this,a.create("svg")),t.appendChild(this.node),this.size("100%","100%")),this.namespace().defs())},inherit:a.Container,extend:{namespace:function(){return this.attr({xmlns:a.ns,version:"1.1"}).attr("xmlns:xlink",a.xlink,a.xmlns).attr("xmlns:svgjs",a.svgjs,a.xmlns)},defs:function(){var t;return this._defs||((t=this.node.getElementsByTagName("defs")[0])?this._defs=a.adopt(t):this._defs=new a.Defs,this.node.appendChild(this._defs.node)),this._defs},parent:function(){return this.node.parentNode&&"#document"!=this.node.parentNode.nodeName?this.node.parentNode:null},remove:function(){return this.parent()&&this.parent().removeChild(this.node),this},clear:function(){for(;this.node.hasChildNodes();)this.node.removeChild(this.node.lastChild);return delete this._defs,a.parser.draw&&!a.parser.draw.parentNode&&this.node.appendChild(a.parser.draw),this},clone:function(t){this.writeDataToDom();var e=this.node,i=x(e.cloneNode(!0));return t?(t.node||t).appendChild(i.node):e.parentNode.insertBefore(i.node,e.nextSibling),i}}}),a.extend(a.Element,{}),a.Gradient=a.invent({create:function(t){this.constructor.call(this,a.create(t+"Gradient")),this.type=t},inherit:a.Container,extend:{at:function(t,e,i){return this.put(new a.Stop).update(t,e,i)},update:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this},fill:function(){return"url(#"+this.id()+")"},toString:function(){return this.fill()},attr:function(t,e,i){return"transform"==t&&(t="gradientTransform"),a.Container.prototype.attr.call(this,t,e,i)}},construct:{gradient:function(t,e){return this.defs().gradient(t,e)}}}),a.extend(a.Gradient,a.FX,{from:function(t,e){return"radial"==(this._target||this).type?this.attr({fx:new a.Number(t),fy:new a.Number(e)}):this.attr({x1:new a.Number(t),y1:new a.Number(e)})},to:function(t,e){return"radial"==(this._target||this).type?this.attr({cx:new a.Number(t),cy:new a.Number(e)}):this.attr({x2:new a.Number(t),y2:new a.Number(e)})}}),a.extend(a.Defs,{gradient:function(t,e){return this.put(new a.Gradient(t)).update(e)}}),a.Stop=a.invent({create:"stop",inherit:a.Element,extend:{update:function(t){return("number"==typeof t||t instanceof a.Number)&&(t={offset:arguments[0],color:arguments[1],opacity:arguments[2]}),null!=t.opacity&&this.attr("stop-opacity",t.opacity),null!=t.color&&this.attr("stop-color",t.color),null!=t.offset&&this.attr("offset",new a.Number(t.offset)),this}}}),a.Pattern=a.invent({create:"pattern",inherit:a.Container,extend:{fill:function(){return"url(#"+this.id()+")"},update:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this},toString:function(){return this.fill()},attr:function(t,e,i){return"transform"==t&&(t="patternTransform"),a.Container.prototype.attr.call(this,t,e,i)}},construct:{pattern:function(t,e,i){return this.defs().pattern(t,e,i)}}}),a.extend(a.Defs,{pattern:function(t,e,i){return this.put(new a.Pattern).update(i).attr({x:0,y:0,width:t,height:e,patternUnits:"userSpaceOnUse"})}}),a.Shape=a.invent({create:function(t){this.constructor.call(this,t)},inherit:a.Element}),a.Symbol=a.invent({create:"symbol",inherit:a.Container,construct:{symbol:function(){return this.put(new a.Symbol)}}}),a.Use=a.invent({create:"use",inherit:a.Shape,extend:{element:function(t,e){return this.attr("href",(e||"")+"#"+t,a.xlink)}},construct:{use:function(t,e){return this.put(new a.Use).element(t,e)}}}),a.Rect=a.invent({create:"rect",inherit:a.Shape,construct:{rect:function(t,e){return this.put(new a.Rect).size(t,e)}}}),a.Circle=a.invent({create:"circle",inherit:a.Shape,construct:{circle:function(t){return this.put(new a.Circle).rx(new a.Number(t).divide(2)).move(0,0)}}}),a.extend(a.Circle,a.FX,{rx:function(t){return this.attr("r",t)},ry:function(t){return this.rx(t)}}),a.Ellipse=a.invent({create:"ellipse",inherit:a.Shape,construct:{ellipse:function(t,e){return this.put(new a.Ellipse).size(t,e).move(0,0)}}}),a.extend(a.Ellipse,a.Rect,a.FX,{rx:function(t){return this.attr("rx",t)},ry:function(t){return this.attr("ry",t)}}),a.extend(a.Circle,a.Ellipse,{x:function(t){return null==t?this.cx()-this.rx():this.cx(t+this.rx())},y:function(t){return null==t?this.cy()-this.ry():this.cy(t+this.ry())},cx:function(t){return null==t?this.attr("cx"):this.attr("cx",t)},cy:function(t){return null==t?this.attr("cy"):this.attr("cy",t)},width:function(t){return null==t?2*this.rx():this.rx(new a.Number(t).divide(2))},height:function(t){return null==t?2*this.ry():this.ry(new a.Number(t).divide(2))},size:function(t,e){var i=u(this,t,e);return this.rx(new a.Number(i.width).divide(2)).ry(new a.Number(i.height).divide(2))}}),a.Line=a.invent({create:"line",inherit:a.Shape,extend:{array:function(){return new a.PointArray([[this.attr("x1"),this.attr("y1")],[this.attr("x2"),this.attr("y2")]])},plot:function(t,e,i,s){return null==t?this.array():(t=void 0!==e?{x1:t,y1:e,x2:i,y2:s}:new a.PointArray(t).toLine(),this.attr(t))},move:function(t,e){return this.attr(this.array().move(t,e).toLine())},size:function(t,e){var i=u(this,t,e);return this.attr(this.array().size(i.width,i.height).toLine())}},construct:{line:function(t,e,i,s){return a.Line.prototype.plot.apply(this.put(new a.Line),null!=t?[t,e,i,s]:[0,0,0,0])}}}),a.Polyline=a.invent({create:"polyline",inherit:a.Shape,construct:{polyline:function(t){return this.put(new a.Polyline).plot(t||new a.PointArray)}}}),a.Polygon=a.invent({create:"polygon",inherit:a.Shape,construct:{polygon:function(t){return this.put(new a.Polygon).plot(t||new a.PointArray)}}}),a.extend(a.Polyline,a.Polygon,{array:function(){return this._array||(this._array=new a.PointArray(this.attr("points")))},plot:function(t){return null==t?this.array():this.clear().attr("points","string"==typeof t?t:this._array=new a.PointArray(t))},clear:function(){return delete this._array,this},move:function(t,e){return this.attr("points",this.array().move(t,e))},size:function(t,e){var i=u(this,t,e);return this.attr("points",this.array().size(i.width,i.height))}}),a.extend(a.Line,a.Polyline,a.Polygon,{morphArray:a.PointArray,x:function(t){return null==t?this.bbox().x:this.move(t,this.bbox().y)},y:function(t){return null==t?this.bbox().y:this.move(this.bbox().x,t)},width:function(t){var e=this.bbox();return null==t?e.width:this.size(t,e.height)},height:function(t){var e=this.bbox();return null==t?e.height:this.size(e.width,t)}}),a.Path=a.invent({create:"path",inherit:a.Shape,extend:{morphArray:a.PathArray,array:function(){return this._array||(this._array=new a.PathArray(this.attr("d")))},plot:function(t){return null==t?this.array():this.clear().attr("d","string"==typeof t?t:this._array=new a.PathArray(t))},clear:function(){return delete this._array,this}},construct:{path:function(t){return this.put(new a.Path).plot(t||new a.PathArray)}}}),a.Image=a.invent({create:"image",inherit:a.Shape,extend:{load:function(t){if(!t)return this;var i=this,s=new e.Image;return a.on(s,"load",(function(){a.off(s);var e=i.parent(a.Pattern);null!==e&&(0==i.width()&&0==i.height()&&i.size(s.width,s.height),e&&0==e.width()&&0==e.height()&&e.size(i.width(),i.height()),"function"==typeof i._loaded&&i._loaded.call(i,{width:s.width,height:s.height,ratio:s.width/s.height,url:t}))})),a.on(s,"error",(function(t){a.off(s),"function"==typeof i._error&&i._error.call(i,t)})),this.attr("href",s.src=this.src=t,a.xlink)},loaded:function(t){return this._loaded=t,this},error:function(t){return this._error=t,this}},construct:{image:function(t,e,i){return this.put(new a.Image).load(t).size(e||0,i||e||0)}}}),a.Text=a.invent({create:function(){this.constructor.call(this,a.create("text")),this.dom.leading=new a.Number(1.3),this._rebuild=!0,this._build=!1,this.attr("font-family",a.defaults.attrs["font-family"])},inherit:a.Shape,extend:{x:function(t){return null==t?this.attr("x"):this.attr("x",t)},text:function(t){if(void 0===t){t="";for(var e=this.node.childNodes,i=0,s=e.length;i<s;++i)0!=i&&3!=e[i].nodeType&&1==a.adopt(e[i]).dom.newLined&&(t+="\n"),t+=e[i].textContent;return t}if(this.clear().build(!0),"function"==typeof t)t.call(this,this);else{i=0;for(var r=(t=t.split("\n")).length;i<r;i++)this.tspan(t[i]).newLine()}return this.build(!1).rebuild()},size:function(t){return this.attr("font-size",t).rebuild()},leading:function(t){return null==t?this.dom.leading:(this.dom.leading=new a.Number(t),this.rebuild())},lines:function(){var t=(this.textPath&&this.textPath()||this).node,e=a.utils.map(a.utils.filterSVGElements(t.childNodes),(function(t){return a.adopt(t)}));return new a.Set(e)},rebuild:function(t){if("boolean"==typeof t&&(this._rebuild=t),this._rebuild){var e=this,i=0,s=this.dom.leading*new a.Number(this.attr("font-size"));this.lines().each((function(){this.dom.newLined&&(e.textPath()||this.attr("x",e.attr("x")),"\n"==this.text()?i+=s:(this.attr("dy",s+i),i=0))})),this.fire("rebuild")}return this},build:function(t){return this._build=!!t,this},setData:function(t){return this.dom=t,this.dom.leading=new a.Number(t.leading||1.3),this}},construct:{text:function(t){return this.put(new a.Text).text(t)},plain:function(t){return this.put(new a.Text).plain(t)}}}),a.Tspan=a.invent({create:"tspan",inherit:a.Shape,extend:{text:function(t){return null==t?this.node.textContent+(this.dom.newLined?"\n":""):("function"==typeof t?t.call(this,this):this.plain(t),this)},dx:function(t){return this.attr("dx",t)},dy:function(t){return this.attr("dy",t)},newLine:function(){var t=this.parent(a.Text);return this.dom.newLined=!0,this.dy(t.dom.leading*t.attr("font-size")).attr("x",t.x())}}}),a.extend(a.Text,a.Tspan,{plain:function(t){return!1===this._build&&this.clear(),this.node.appendChild(i.createTextNode(t)),this},tspan:function(t){var e=(this.textPath&&this.textPath()||this).node,i=new a.Tspan;return!1===this._build&&this.clear(),e.appendChild(i.node),i.text(t)},clear:function(){for(var t=(this.textPath&&this.textPath()||this).node;t.hasChildNodes();)t.removeChild(t.lastChild);return this},length:function(){return this.node.getComputedTextLength()}}),a.TextPath=a.invent({create:"textPath",inherit:a.Parent,parent:a.Text,construct:{morphArray:a.PathArray,array:function(){var t=this.track();return t?t.array():null},plot:function(t){var e=this.track(),i=null;return e&&(i=e.plot(t)),null==t?i:this},track:function(){var t=this.textPath();if(t)return t.reference("href")},textPath:function(){if(this.node.firstChild&&"textPath"==this.node.firstChild.nodeName)return a.adopt(this.node.firstChild)}}}),a.Nested=a.invent({create:function(){this.constructor.call(this,a.create("svg")),this.style("overflow","visible")},inherit:a.Container,construct:{nested:function(){return this.put(new a.Nested)}}});var l={stroke:["color","width","opacity","linecap","linejoin","miterlimit","dasharray","dashoffset"],fill:["color","opacity","rule"],prefix:function(t,e){return"color"==e?t:t+"-"+e}};function h(t,e,i,s){return i+s.replace(a.regex.dots," .")}function c(t){return t.toLowerCase().replace(/-(.)/g,(function(t,e){return e.toUpperCase()}))}function d(t){return t.charAt(0).toUpperCase()+t.slice(1)}function g(t){var e=t.toString(16);return 1==e.length?"0"+e:e}function u(t,e,i){if(null==e||null==i){var a=t.bbox();null==e?e=a.width/a.height*i:null==i&&(i=a.height/a.width*e)}return{width:e,height:i}}function f(t,e,i){return{x:e*t.a+i*t.c+0,y:e*t.b+i*t.d+0}}function p(t){return{a:t[0],b:t[1],c:t[2],d:t[3],e:t[4],f:t[5]}}function x(t){for(var i=t.childNodes.length-1;i>=0;i--)t.childNodes[i]instanceof e.SVGElement&&x(t.childNodes[i]);return a.adopt(t).id(a.eid(t.nodeName))}function b(t){return null==t.x&&(t.x=0,t.y=0,t.width=0,t.height=0),t.w=t.width,t.h=t.height,t.x2=t.x+t.width,t.y2=t.y+t.height,t.cx=t.x+t.width/2,t.cy=t.y+t.height/2,t}function m(t){return Math.abs(t)>1e-37?t:0}["fill","stroke"].forEach((function(t){var e={};e[t]=function(e){if(void 0===e)return this;if("string"==typeof e||a.Color.isRgb(e)||e&&"function"==typeof e.fill)this.attr(t,e);else for(var i=l[t].length-1;i>=0;i--)null!=e[l[t][i]]&&this.attr(l.prefix(t,l[t][i]),e[l[t][i]]);return this},a.extend(a.Element,a.FX,e)})),a.extend(a.Element,a.FX,{translate:function(t,e){return this.transform({x:t,y:e})},matrix:function(t){return this.attr("transform",new a.Matrix(6==arguments.length?[].slice.call(arguments):t))},opacity:function(t){return this.attr("opacity",t)},dx:function(t){return this.x(new a.Number(t).plus(this instanceof a.FX?0:this.x()),!0)},dy:function(t){return this.y(new a.Number(t).plus(this instanceof a.FX?0:this.y()),!0)}}),a.extend(a.Path,{length:function(){return this.node.getTotalLength()},pointAt:function(t){return this.node.getPointAtLength(t)}}),a.Set=a.invent({create:function(t){Array.isArray(t)?this.members=t:this.clear()},extend:{add:function(){for(var t=[].slice.call(arguments),e=0,i=t.length;e<i;e++)this.members.push(t[e]);return this},remove:function(t){var e=this.index(t);return e>-1&&this.members.splice(e,1),this},each:function(t){for(var e=0,i=this.members.length;e<i;e++)t.apply(this.members[e],[e,this.members]);return this},clear:function(){return this.members=[],this},length:function(){return this.members.length},has:function(t){return this.index(t)>=0},index:function(t){return this.members.indexOf(t)},get:function(t){return this.members[t]},first:function(){return this.get(0)},last:function(){return this.get(this.members.length-1)},valueOf:function(){return this.members}},construct:{set:function(t){return new a.Set(t)}}}),a.FX.Set=a.invent({create:function(t){this.set=t}}),a.Set.inherit=function(){var t=[];for(var e in a.Shape.prototype)"function"==typeof a.Shape.prototype[e]&&"function"!=typeof a.Set.prototype[e]&&t.push(e);for(var e in t.forEach((function(t){a.Set.prototype[t]=function(){for(var e=0,i=this.members.length;e<i;e++)this.members[e]&&"function"==typeof this.members[e][t]&&this.members[e][t].apply(this.members[e],arguments);return"animate"==t?this.fx||(this.fx=new a.FX.Set(this)):this}})),t=[],a.FX.prototype)"function"==typeof a.FX.prototype[e]&&"function"!=typeof a.FX.Set.prototype[e]&&t.push(e);t.forEach((function(t){a.FX.Set.prototype[t]=function(){for(var e=0,i=this.set.members.length;e<i;e++)this.set.members[e].fx[t].apply(this.set.members[e].fx,arguments);return this}}))},a.extend(a.Element,{}),a.extend(a.Element,{remember:function(e,i){if("object"===t(arguments[0]))for(var a in e)this.remember(a,e[a]);else{if(1==arguments.length)return this.memory()[e];this.memory()[e]=i}return this},forget:function(){if(0==arguments.length)this._memory={};else for(var t=arguments.length-1;t>=0;t--)delete this.memory()[arguments[t]];return this},memory:function(){return this._memory||(this._memory={})}}),a.get=function(t){var e=i.getElementById(function(t){var e=(t||"").toString().match(a.regex.reference);if(e)return e[1]}(t)||t);return a.adopt(e)},a.select=function(t,e){return new a.Set(a.utils.map((e||i).querySelectorAll(t),(function(t){return a.adopt(t)})))},a.extend(a.Parent,{select:function(t){return a.select(t,this.node)}});var v="abcdef".split("");if("function"!=typeof e.CustomEvent){var y=function(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var a=i.createEvent("CustomEvent");return a.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),a};y.prototype=e.Event.prototype,a.CustomEvent=y}else a.CustomEvent=e.CustomEvent;return a},"function"==typeof define&&define.amd?define((function(){return w(y,y.document)})):"object"===("undefined"==typeof exports?"undefined":t(exports))&&"undefined"!=typeof module?module.exports=y.document?w(y,y.document):function(t){return w(t,t.document)}:y.SVG=w(y,y.document),
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).ApexCharts=e()}(this,(function(){"use strict";function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(e)}function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){for(var i=0;i<e.length;i++){var a=e[i];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,a.key,a)}}function a(t,e,a){return e&&i(t.prototype,e),a&&i(t,a),t}function s(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function r(t,e){var i=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),i.push.apply(i,a)}return i}function n(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{};e%2?r(Object(i),!0).forEach((function(e){s(t,e,i[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):r(Object(i)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))}))}return t}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&h(t,e)}function l(t){return(l=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function h(t,e){return(h=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function c(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function d(t){return function(t){if(Array.isArray(t)){for(var e=0,i=new Array(t.length);e<t.length;e++)i[e]=t[e];return i}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var g=function(){function i(){e(this,i)}return a(i,[{key:"shadeRGBColor",value:function(t,e){var i=e.split(","),a=t<0?0:255,s=t<0?-1*t:t,r=parseInt(i[0].slice(4),10),n=parseInt(i[1],10),o=parseInt(i[2],10);return"rgb("+(Math.round((a-r)*s)+r)+","+(Math.round((a-n)*s)+n)+","+(Math.round((a-o)*s)+o)+")"}},{key:"shadeHexColor",value:function(t,e){var i=parseInt(e.slice(1),16),a=t<0?0:255,s=t<0?-1*t:t,r=i>>16,n=i>>8&255,o=255&i;return"#"+(16777216+65536*(Math.round((a-r)*s)+r)+256*(Math.round((a-n)*s)+n)+(Math.round((a-o)*s)+o)).toString(16).slice(1)}},{key:"shadeColor",value:function(t,e){return i.isColorHex(e)?this.shadeHexColor(t,e):this.shadeRGBColor(t,e)}}],[{key:"bind",value:function(t,e){return function(){return t.apply(e,arguments)}}},{key:"isObject",value:function(e){return e&&"object"===t(e)&&!Array.isArray(e)&&null!=e}},{key:"listToArray",value:function(t){var e,i=[];for(e=0;e<t.length;e++)i[e]=t[e];return i}},{key:"extend",value:function(t,e){var i=this;"function"!=typeof Object.assign&&(Object.assign=function(t){if(null==t)throw new TypeError("Cannot convert undefined or null to object");for(var e=Object(t),i=1;i<arguments.length;i++){var a=arguments[i];if(null!=a)for(var s in a)a.hasOwnProperty(s)&&(e[s]=a[s])}return e});var a=Object.assign({},t);return this.isObject(t)&&this.isObject(e)&&Object.keys(e).forEach((function(r){i.isObject(e[r])&&r in t?a[r]=i.extend(t[r],e[r]):Object.assign(a,s({},r,e[r]))})),a}},{key:"extendArray",value:function(t,e){var a=[];return t.map((function(t){a.push(i.extend(e,t))})),t=a}},{key:"monthMod",value:function(t){return t%12}},{key:"clone",value:function(e){if("[object Array]"===Object.prototype.toString.call(e)){for(var i=[],a=0;a<e.length;a++)i[a]=this.clone(e[a]);return i}if("object"===t(e)){var s={};for(var r in e)e.hasOwnProperty(r)&&(s[r]=this.clone(e[r]));return s}return e}},{key:"log10",value:function(t){return Math.log(t)/Math.LN10}},{key:"roundToBase10",value:function(t){return Math.pow(10,Math.floor(Math.log10(t)))}},{key:"roundToBase",value:function(t,e){return Math.pow(e,Math.floor(Math.log(t)/Math.log(e)))}},{key:"parseNumber",value:function(t){return null===t?t:parseFloat(t)}},{key:"randomId",value:function(){return(Math.random()+1).toString(36).substring(4)}},{key:"noExponents",value:function(t){var e=String(t).split(/[eE]/);if(1===e.length)return e[0];var i="",a=t<0?"-":"",s=e[0].replace(".",""),r=Number(e[1])+1;if(r<0){for(i=a+"0.";r++;)i+="0";return i+s.replace(/^-/,"")}for(r-=s.length;r--;)i+="0";return s+i}},{key:"getDimensions",value:function(t){var e=getComputedStyle(t),i=[],a=t.clientHeight,s=t.clientWidth;return a-=parseFloat(e.paddingTop)+parseFloat(e.paddingBottom),s-=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight),i.push(s),i.push(a),i}},{key:"getBoundingClientRect",value:function(t){var e=t.getBoundingClientRect();return{top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:t.clientWidth,height:t.clientHeight,x:e.left,y:e.top}}},{key:"getLargestStringFromArr",value:function(t){return t.reduce((function(t,e){return Array.isArray(e)&&(e=e.reduce((function(t,e){return t.length>e.length?t:e}))),t.length>e.length?t:e}),0)}},{key:"hexToRgba",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"#999999",e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:.6;"#"!==t.substring(0,1)&&(t="#999999");var i=t.replace("#","");i=i.match(new RegExp("(.{"+i.length/3+"})","g"));for(var a=0;a<i.length;a++)i[a]=parseInt(1===i[a].length?i[a]+i[a]:i[a],16);return void 0!==e&&i.push(e),"rgba("+i.join(",")+")"}},{key:"getOpacityFromRGBA",value:function(t){return parseFloat(t.replace(/^.*,(.+)\)/,"$1"))}},{key:"rgb2hex",value:function(t){return(t=t.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i))&&4===t.length?"#"+("0"+parseInt(t[1],10).toString(16)).slice(-2)+("0"+parseInt(t[2],10).toString(16)).slice(-2)+("0"+parseInt(t[3],10).toString(16)).slice(-2):""}},{key:"isColorHex",value:function(t){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)|(^#[0-9A-F]{8}$)/i.test(t)}},{key:"polarToCartesian",value:function(t,e,i,a){var s=(a-90)*Math.PI/180;return{x:t+i*Math.cos(s),y:e+i*Math.sin(s)}}},{key:"escapeString",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"x",i=t.toString().slice();return i=i.replace(/[` ~!@#$%^&*()_|+\-=?;:'",.<>{}[\]\\/]/gi,e)}},{key:"negToZero",value:function(t){return t<0?0:t}},{key:"moveIndexInArray",value:function(t,e,i){if(i>=t.length)for(var a=i-t.length+1;a--;)t.push(void 0);return t.splice(i,0,t.splice(e,1)[0]),t}},{key:"extractNumber",value:function(t){return parseFloat(t.replace(/[^\d.]*/g,""))}},{key:"findAncestor",value:function(t,e){for(;(t=t.parentElement)&&!t.classList.contains(e););return t}},{key:"setELstyles",value:function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t.style.key=e[i])}},{key:"isNumber",value:function(t){return!isNaN(t)&&parseFloat(Number(t))===t&&!isNaN(parseInt(t,10))}},{key:"isFloat",value:function(t){return Number(t)===t&&t%1!=0}},{key:"isSafari",value:function(){return/^((?!chrome|android).)*safari/i.test(navigator.userAgent)}},{key:"isFirefox",value:function(){return navigator.userAgent.toLowerCase().indexOf("firefox")>-1}},{key:"isIE11",value:function(){if(-1!==window.navigator.userAgent.indexOf("MSIE")||window.navigator.appVersion.indexOf("Trident/")>-1)return!0}},{key:"isIE",value:function(){var t=window.navigator.userAgent,e=t.indexOf("MSIE ");if(e>0)return parseInt(t.substring(e+5,t.indexOf(".",e)),10);if(t.indexOf("Trident/")>0){var i=t.indexOf("rv:");return parseInt(t.substring(i+3,t.indexOf(".",i)),10)}var a=t.indexOf("Edge/");return a>0&&parseInt(t.substring(a+5,t.indexOf(".",a)),10)}}]),i}(),u=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"getDefaultFilter",value:function(t,e){var i=this.w;t.unfilter(!0),(new window.SVG.Filter).size("120%","180%","-5%","-40%"),"none"!==i.config.states.normal.filter?this.applyFilter(t,e,i.config.states.normal.filter.type,i.config.states.normal.filter.value):i.config.chart.dropShadow.enabled&&this.dropShadow(t,i.config.chart.dropShadow,e)}},{key:"addNormalFilter",value:function(t,e){var i=this.w;i.config.chart.dropShadow.enabled&&!t.node.classList.contains("apexcharts-marker")&&this.dropShadow(t,i.config.chart.dropShadow,e)}},{key:"addLightenFilter",value:function(t,e,i){var a=this,s=this.w,r=i.intensity;if(!g.isFirefox()){t.unfilter(!0);new window.SVG.Filter;t.filter((function(t){var i=s.config.chart.dropShadow;(i.enabled?a.addShadow(t,e,i):t).componentTransfer({rgb:{type:"linear",slope:1.5,intercept:r}})})),t.filterer.node.setAttribute("filterUnits","userSpaceOnUse"),this._scaleFilterSize(t.filterer.node)}}},{key:"addDarkenFilter",value:function(t,e,i){var a=this,s=this.w,r=i.intensity;if(!g.isFirefox()){t.unfilter(!0);new window.SVG.Filter;t.filter((function(t){var i=s.config.chart.dropShadow;(i.enabled?a.addShadow(t,e,i):t).componentTransfer({rgb:{type:"linear",slope:r}})})),t.filterer.node.setAttribute("filterUnits","userSpaceOnUse"),this._scaleFilterSize(t.filterer.node)}}},{key:"applyFilter",value:function(t,e,i){var a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:.5;switch(i){case"none":this.addNormalFilter(t,e);break;case"lighten":this.addLightenFilter(t,e,{intensity:a});break;case"darken":this.addDarkenFilter(t,e,{intensity:a})}}},{key:"addShadow",value:function(t,e,i){var a=i.blur,s=i.top,r=i.left,n=i.color,o=i.opacity,l=t.flood(Array.isArray(n)?n[e]:n,o).composite(t.sourceAlpha,"in").offset(r,s).gaussianBlur(a).merge(t.source);return t.blend(t.source,l)}},{key:"dropShadow",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,a=e.top,s=e.left,r=e.blur,n=e.color,o=e.opacity,l=e.noUserSpaceOnUse,h=this.w;return t.unfilter(!0),g.isIE()&&"radialBar"===h.config.chart.type?t:(n=Array.isArray(n)?n[i]:n,t.filter((function(t){var e=null;e=g.isSafari()||g.isFirefox()||g.isIE()?t.flood(n,o).composite(t.sourceAlpha,"in").offset(s,a).gaussianBlur(r):t.flood(n,o).composite(t.sourceAlpha,"in").offset(s,a).gaussianBlur(r).merge(t.source),t.blend(t.source,e)})),l||t.filterer.node.setAttribute("filterUnits","userSpaceOnUse"),this._scaleFilterSize(t.filterer.node),t)}},{key:"setSelectionFilter",value:function(t,e,i){var a=this.w;if(void 0!==a.globals.selectedDataPoints[e]&&a.globals.selectedDataPoints[e].indexOf(i)>-1){t.node.setAttribute("selected",!0);var s=a.config.states.active.filter;"none"!==s&&this.applyFilter(t,e,s.type,s.value)}}},{key:"_scaleFilterSize",value:function(t){!function(e){for(var i in e)e.hasOwnProperty(i)&&t.setAttribute(i,e[i])}({width:"200%",height:"200%",x:"-50%",y:"-50%"})}}]),t}(),f=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.setEasingFunctions()}return a(t,[{key:"setEasingFunctions",value:function(){var t;if(!this.w.globals.easing){switch(this.w.config.chart.animations.easing){case"linear":t="-";break;case"easein":t="<";break;case"easeout":t=">";break;case"easeinout":t="<>";break;case"swing":t=function(t){var e=1.70158;return(t-=1)*t*((e+1)*t+e)+1};break;case"bounce":t=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375};break;case"elastic":t=function(t){return t===!!t?t:Math.pow(2,-10*t)*Math.sin((t-.075)*(2*Math.PI)/.3)+1};break;default:t="<>"}this.w.globals.easing=t}}},{key:"animateLine",value:function(t,e,i,a){t.attr(e).animate(a).attr(i)}},{key:"animateCircleRadius",value:function(t,e,i,a,s,r){e||(e=0),t.attr({r:e}).animate(a,s).attr({r:i}).afterAll((function(){r()}))}},{key:"animateCircle",value:function(t,e,i,a,s){t.attr({r:e.r,cx:e.cx,cy:e.cy}).animate(a,s).attr({r:i.r,cx:i.cx,cy:i.cy})}},{key:"animateRect",value:function(t,e,i,a,s){t.attr(e).animate(a).attr(i).afterAll((function(){return s()}))}},{key:"animatePathsGradually",value:function(t){var e=t.el,i=t.realIndex,a=t.j,s=t.fill,r=t.pathFrom,n=t.pathTo,o=t.speed,l=t.delay,h=this.w,c=0;h.config.chart.animations.animateGradually.enabled&&(c=h.config.chart.animations.animateGradually.delay),h.config.chart.animations.dynamicAnimation.enabled&&h.globals.dataChanged&&"bar"!==h.config.chart.type&&(c=0),this.morphSVG(e,i,a,"line"!==h.config.chart.type||h.globals.comboCharts?s:"stroke",r,n,o,l*c)}},{key:"showDelayedElements",value:function(){this.w.globals.delayedElements.forEach((function(t){t.el.classList.remove("apexcharts-element-hidden")}))}},{key:"animationCompleted",value:function(t){var e=this.w;e.globals.animationEnded||(e.globals.animationEnded=!0,this.showDelayedElements(),"function"==typeof e.config.chart.events.animationEnd&&e.config.chart.events.animationEnd(this.ctx,{el:t,w:e}))}},{key:"morphSVG",value:function(t,e,i,a,s,r,n,o){var l=this,h=this.w;s||(s=t.attr("pathFrom")),r||(r=t.attr("pathTo"));var c=function(t){return"radar"===h.config.chart.type&&(n=1),"M 0 ".concat(h.globals.gridHeight)};(!s||s.indexOf("undefined")>-1||s.indexOf("NaN")>-1)&&(s=c()),(r.indexOf("undefined")>-1||r.indexOf("NaN")>-1)&&(r=c()),h.globals.shouldAnimate||(n=1),t.plot(s).animate(1,h.globals.easing,o).plot(s).animate(n,h.globals.easing,o).plot(r).afterAll((function(){g.isNumber(i)?i===h.globals.series[h.globals.maxValsInArrayIndex].length-2&&h.globals.shouldAnimate&&l.animationCompleted(t):"none"!==a&&h.globals.shouldAnimate&&(!h.globals.comboCharts&&e===h.globals.series.length-1||h.globals.comboCharts)&&l.animationCompleted(t),l.showDelayedElements()}))}}]),t}(),p=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"drawLine",value:function(t,e,i,a){var s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"#a8a8a8",r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,n=arguments.length>6&&void 0!==arguments[6]?arguments[6]:null,o=this.w,l=o.globals.dom.Paper.line().attr({x1:t,y1:e,x2:i,y2:a,stroke:s,"stroke-dasharray":r,"stroke-width":n});return l}},{key:"drawRect",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:"#fefefe",n=arguments.length>6&&void 0!==arguments[6]?arguments[6]:1,o=arguments.length>7&&void 0!==arguments[7]?arguments[7]:null,l=arguments.length>8&&void 0!==arguments[8]?arguments[8]:null,h=arguments.length>9&&void 0!==arguments[9]?arguments[9]:0,c=this.w,d=c.globals.dom.Paper.rect();return d.attr({x:t,y:e,width:i>0?i:0,height:a>0?a:0,rx:s,ry:s,opacity:n,"stroke-width":null!==o?o:0,stroke:null!==l?l:"none","stroke-dasharray":h}),d.node.setAttribute("fill",r),d}},{key:"drawPolygon",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"#e1e1e1",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"none",s=this.w,r=s.globals.dom.Paper.polygon(t).attr({fill:a,stroke:e,"stroke-width":i});return r}},{key:"drawCircle",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=this.w,a=i.globals.dom.Paper.circle(2*t);return null!==e&&a.attr(e),a}},{key:"drawPath",value:function(t){var e=t.d,i=void 0===e?"":e,a=t.stroke,s=void 0===a?"#a8a8a8":a,r=t.strokeWidth,n=void 0===r?1:r,o=t.fill,l=t.fillOpacity,h=void 0===l?1:l,c=t.strokeOpacity,d=void 0===c?1:c,g=t.classes,u=t.strokeLinecap,f=void 0===u?null:u,p=t.strokeDashArray,x=void 0===p?0:p,b=this.w;return null===f&&(f=b.config.stroke.lineCap),(i.indexOf("undefined")>-1||i.indexOf("NaN")>-1)&&(i="M 0 ".concat(b.globals.gridHeight)),b.globals.dom.Paper.path(i).attr({fill:o,"fill-opacity":h,stroke:s,"stroke-opacity":d,"stroke-linecap":f,"stroke-width":n,"stroke-dasharray":x,class:g})}},{key:"group",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=this.w,i=e.globals.dom.Paper.group();return null!==t&&i.attr(t),i}},{key:"move",value:function(t,e){var i=["M",t,e].join(" ");return i}},{key:"line",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,a=null;return null===i?a=["L",t,e].join(" "):"H"===i?a=["H",t].join(" "):"V"===i&&(a=["V",e].join(" ")),a}},{key:"curve",value:function(t,e,i,a,s,r){var n=["C",t,e,i,a,s,r].join(" ");return n}},{key:"quadraticCurve",value:function(t,e,i,a){return["Q",t,e,i,a].join(" ")}},{key:"arc",value:function(t,e,i,a,s,r,n){var o=arguments.length>7&&void 0!==arguments[7]&&arguments[7],l="A";o&&(l="a");var h=[l,t,e,i,a,s,r,n].join(" ");return h}},{key:"renderPaths",value:function(t){var e,i=t.j,a=t.realIndex,s=t.pathFrom,r=t.pathTo,o=t.stroke,l=t.strokeWidth,h=t.strokeLinecap,c=t.fill,d=t.animationDelay,g=t.initialSpeed,p=t.dataChangeSpeed,x=t.className,b=t.shouldClipToGrid,m=void 0===b||b,v=t.bindEventsOnPaths,y=void 0===v||v,w=t.drawShadow,k=void 0===w||w,A=this.w,S=new u(this.ctx),C=new f(this.ctx),L=this.w.config.chart.animations.enabled,P=L&&this.w.config.chart.animations.dynamicAnimation.enabled,T=!!(L&&!A.globals.resized||P&&A.globals.dataChanged&&A.globals.shouldAnimate);T?e=s:(e=r,A.globals.animationEnded=!0);var z=A.config.stroke.dashArray,I=0;I=Array.isArray(z)?z[a]:A.config.stroke.dashArray;var M=this.drawPath({d:e,stroke:o,strokeWidth:l,fill:c,fillOpacity:1,classes:x,strokeLinecap:h,strokeDashArray:I});if(M.attr("index",a),m&&M.attr({"clip-path":"url(#gridRectMask".concat(A.globals.cuid,")")}),"none"!==A.config.states.normal.filter.type)S.getDefaultFilter(M,a);else if(A.config.chart.dropShadow.enabled&&k&&(!A.config.chart.dropShadow.enabledOnSeries||A.config.chart.dropShadow.enabledOnSeries&&-1!==A.config.chart.dropShadow.enabledOnSeries.indexOf(a))){var X=A.config.chart.dropShadow;S.dropShadow(M,X,a)}y&&(M.node.addEventListener("mouseenter",this.pathMouseEnter.bind(this,M)),M.node.addEventListener("mouseleave",this.pathMouseLeave.bind(this,M)),M.node.addEventListener("mousedown",this.pathMouseDown.bind(this,M))),M.attr({pathTo:r,pathFrom:s});var E={el:M,j:i,realIndex:a,pathFrom:s,pathTo:r,fill:c,strokeWidth:l,delay:d};return!L||A.globals.resized||A.globals.dataChanged?!A.globals.resized&&A.globals.dataChanged||C.showDelayedElements():C.animatePathsGradually(n({},E,{speed:g})),A.globals.dataChanged&&P&&T&&C.animatePathsGradually(n({},E,{speed:p})),M}},{key:"drawPattern",value:function(t,e,i){var a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"#a8a8a8",s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,r=this.w,n=r.globals.dom.Paper.pattern(e,i,(function(r){"horizontalLines"===t?r.line(0,0,i,0).stroke({color:a,width:s+1}):"verticalLines"===t?r.line(0,0,0,e).stroke({color:a,width:s+1}):"slantedLines"===t?r.line(0,0,e,i).stroke({color:a,width:s}):"squares"===t?r.rect(e,i).fill("none").stroke({color:a,width:s}):"circles"===t&&r.circle(e).fill("none").stroke({color:a,width:s})}));return n}},{key:"drawGradient",value:function(t,e,i,a,s){var r,n=arguments.length>5&&void 0!==arguments[5]?arguments[5]:null,o=arguments.length>6&&void 0!==arguments[6]?arguments[6]:null,l=arguments.length>7&&void 0!==arguments[7]?arguments[7]:null,h=arguments.length>8&&void 0!==arguments[8]?arguments[8]:0,c=this.w;e.length<9&&0===e.indexOf("#")&&(e=g.hexToRgba(e,a)),i.length<9&&0===i.indexOf("#")&&(i=g.hexToRgba(i,s));var d=0,u=1,f=1,p=null;null!==o&&(d=void 0!==o[0]?o[0]/100:0,u=void 0!==o[1]?o[1]/100:1,f=void 0!==o[2]?o[2]/100:1,p=void 0!==o[3]?o[3]/100:null);var x=!("donut"!==c.config.chart.type&&"pie"!==c.config.chart.type&&"polarArea"!==c.config.chart.type&&"bubble"!==c.config.chart.type);if(r=null===l||0===l.length?c.globals.dom.Paper.gradient(x?"radial":"linear",(function(t){t.at(d,e,a),t.at(u,i,s),t.at(f,i,s),null!==p&&t.at(p,e,a)})):c.globals.dom.Paper.gradient(x?"radial":"linear",(function(t){(Array.isArray(l[h])?l[h]:l).forEach((function(e){t.at(e.offset/100,e.color,e.opacity)}))})),x){var b=c.globals.gridWidth/2,m=c.globals.gridHeight/2;"bubble"!==c.config.chart.type?r.attr({gradientUnits:"userSpaceOnUse",cx:b,cy:m,r:n}):r.attr({cx:.5,cy:.5,r:.8,fx:.2,fy:.2})}else"vertical"===t?r.from(0,0).to(0,1):"diagonal"===t?r.from(0,0).to(1,1):"horizontal"===t?r.from(0,1).to(1,1):"diagonal2"===t&&r.from(1,0).to(0,1);return r}},{key:"drawText",value:function(t){var e,i=t.x,a=t.y,s=t.text,r=t.textAnchor,n=t.fontSize,o=t.fontFamily,l=t.fontWeight,h=t.foreColor,c=t.opacity,d=t.cssClass,g=void 0===d?"":d,u=t.isPlainText,f=void 0===u||u,p=this.w;return void 0===s&&(s=""),r||(r="start"),h&&h.length||(h=p.config.chart.foreColor),o=o||p.config.chart.fontFamily,l=l||"regular",(e=Array.isArray(s)?p.globals.dom.Paper.text((function(t){for(var e=0;e<s.length;e++)0===e?t.tspan(s[e]):t.tspan(s[e]).newLine()})):f?p.globals.dom.Paper.plain(s):p.globals.dom.Paper.text((function(t){return t.tspan(s)}))).attr({x:i,y:a,"text-anchor":r,"dominant-baseline":"auto","font-size":n,"font-family":o,"font-weight":l,fill:h,class:"apexcharts-text "+g}),e.node.style.fontFamily=o,e.node.style.opacity=c,e}},{key:"drawMarker",value:function(t,e,i){t=t||0;var a=i.pSize||0,s=null;if("square"===i.shape){var r=void 0===i.pRadius?a/2:i.pRadius;null!==e&&a||(a=0,r=0);var n=1.2*a+r,o=this.drawRect(n,n,n,n,r);o.attr({x:t-n/2,y:e-n/2,cx:t,cy:e,class:i.class?i.class:"",fill:i.pointFillColor,"fill-opacity":i.pointFillOpacity?i.pointFillOpacity:1,stroke:i.pointStrokeColor,"stroke-width":i.pWidth?i.pWidth:0,"stroke-opacity":i.pointStrokeOpacity?i.pointStrokeOpacity:1}),s=o}else"circle"!==i.shape&&i.shape||(g.isNumber(e)||(a=0,e=0),s=this.drawCircle(a,{cx:t,cy:e,class:i.class?i.class:"",stroke:i.pointStrokeColor,fill:i.pointFillColor,"fill-opacity":i.pointFillOpacity?i.pointFillOpacity:1,"stroke-width":i.pWidth?i.pWidth:0,"stroke-opacity":i.pointStrokeOpacity?i.pointStrokeOpacity:1}));return s}},{key:"pathMouseEnter",value:function(t,e){var i=this.w,a=new u(this.ctx),s=parseInt(t.node.getAttribute("index"),10),r=parseInt(t.node.getAttribute("j"),10);if("function"==typeof i.config.chart.events.dataPointMouseEnter&&i.config.chart.events.dataPointMouseEnter(e,this.ctx,{seriesIndex:s,dataPointIndex:r,w:i}),this.ctx.events.fireEvent("dataPointMouseEnter",[e,this.ctx,{seriesIndex:s,dataPointIndex:r,w:i}]),("none"===i.config.states.active.filter.type||"true"!==t.node.getAttribute("selected"))&&"none"!==i.config.states.hover.filter.type&&"none"!==i.config.states.active.filter.type&&!i.globals.isTouchDevice){var n=i.config.states.hover.filter;a.applyFilter(t,s,n.type,n.value)}}},{key:"pathMouseLeave",value:function(t,e){var i=this.w,a=new u(this.ctx),s=parseInt(t.node.getAttribute("index"),10),r=parseInt(t.node.getAttribute("j"),10);"function"==typeof i.config.chart.events.dataPointMouseLeave&&i.config.chart.events.dataPointMouseLeave(e,this.ctx,{seriesIndex:s,dataPointIndex:r,w:i}),this.ctx.events.fireEvent("dataPointMouseLeave",[e,this.ctx,{seriesIndex:s,dataPointIndex:r,w:i}]),"none"!==i.config.states.active.filter.type&&"true"===t.node.getAttribute("selected")||"none"!==i.config.states.hover.filter.type&&a.getDefaultFilter(t,s)}},{key:"pathMouseDown",value:function(t,e){var i=this.w,a=new u(this.ctx),s=parseInt(t.node.getAttribute("index"),10),r=parseInt(t.node.getAttribute("j"),10),n="false";if("true"===t.node.getAttribute("selected")){if(t.node.setAttribute("selected","false"),i.globals.selectedDataPoints[s].indexOf(r)>-1){var o=i.globals.selectedDataPoints[s].indexOf(r);i.globals.selectedDataPoints[s].splice(o,1)}}else{if(!i.config.states.active.allowMultipleDataPointsSelection&&i.globals.selectedDataPoints.length>0){i.globals.selectedDataPoints=[];var l=i.globals.dom.Paper.select(".apexcharts-series path").members,h=i.globals.dom.Paper.select(".apexcharts-series circle, .apexcharts-series rect").members,c=function(t){Array.prototype.forEach.call(t,(function(t){t.node.setAttribute("selected","false"),a.getDefaultFilter(t,s)}))};c(l),c(h)}t.node.setAttribute("selected","true"),n="true",void 0===i.globals.selectedDataPoints[s]&&(i.globals.selectedDataPoints[s]=[]),i.globals.selectedDataPoints[s].push(r)}if("true"===n){var d=i.config.states.active.filter;"none"!==d&&a.applyFilter(t,s,d.type,d.value)}else"none"!==i.config.states.active.filter.type&&a.getDefaultFilter(t,s);"function"==typeof i.config.chart.events.dataPointSelection&&i.config.chart.events.dataPointSelection(e,this.ctx,{selectedDataPoints:i.globals.selectedDataPoints,seriesIndex:s,dataPointIndex:r,w:i}),e&&this.ctx.events.fireEvent("dataPointSelection",[e,this.ctx,{selectedDataPoints:i.globals.selectedDataPoints,seriesIndex:s,dataPointIndex:r,w:i}])}},{key:"rotateAroundCenter",value:function(t){var e=t.getBBox();return{x:e.x+e.width/2,y:e.y+e.height/2}}},{key:"getTextRects",value:function(t,e,i,a){var s=!(arguments.length>4&&void 0!==arguments[4])||arguments[4],r=this.w,n=this.drawText({x:-200,y:-200,text:t,textAnchor:"start",fontSize:e,fontFamily:i,foreColor:"#fff",opacity:0});a&&n.attr("transform",a),r.globals.dom.Paper.add(n);var o=n.bbox();return s||(o=n.node.getBoundingClientRect()),n.remove(),{width:o.width,height:o.height}}},{key:"placeTextWithEllipsis",value:function(t,e,i){if("function"==typeof t.getComputedTextLength&&(t.textContent=e,e.length>0&&t.getComputedTextLength()>=i/.8)){for(var a=e.length-3;a>0;a-=3)if(t.getSubStringLength(0,a)<=i/.8)return void(t.textContent=e.substring(0,a)+"...");t.textContent="."}}}],[{key:"setAttrs",value:function(t,e){for(var i in e)e.hasOwnProperty(i)&&t.setAttribute(i,e[i])}}]),t}(),x=function(){function t(i){e(this,t),this.w=i.w,this.annoCtx=i}return a(t,[{key:"setOrientations",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=this.w;if("vertical"===t.label.orientation){var a=null!==e?e:0,s=i.globals.dom.baseEl.querySelector(".apexcharts-xaxis-annotations .apexcharts-xaxis-annotation-label[rel='".concat(a,"']"));if(null!==s){var r=s.getBoundingClientRect();s.setAttribute("x",parseFloat(s.getAttribute("x"))-r.height+4),"top"===t.label.position?s.setAttribute("y",parseFloat(s.getAttribute("y"))+r.width):s.setAttribute("y",parseFloat(s.getAttribute("y"))-r.width);var n=this.annoCtx.graphics.rotateAroundCenter(s),o=n.x,l=n.y;s.setAttribute("transform","rotate(-90 ".concat(o," ").concat(l,")"))}}}},{key:"addBackgroundToAnno",value:function(t,e){var i=this.w;if(!e.label.text||e.label.text&&!e.label.text.trim())return null;var a=i.globals.dom.baseEl.querySelector(".apexcharts-grid").getBoundingClientRect(),s=t.getBoundingClientRect(),r=e.label.style.padding.left,n=e.label.style.padding.right,o=e.label.style.padding.top,l=e.label.style.padding.bottom;"vertical"===e.label.orientation&&(o=e.label.style.padding.left,l=e.label.style.padding.right,r=e.label.style.padding.top,n=e.label.style.padding.bottom);var h=s.left-a.left-r,c=s.top-a.top-o,d=this.annoCtx.graphics.drawRect(h,c,s.width+r+n,s.height+o+l,0,e.label.style.background,1,e.label.borderWidth,e.label.borderColor,0);return e.id&&d.node.classList.add(e.id),d}},{key:"annotationsBackground",value:function(){var t=this,e=this.w,i=function(i,a,s){var r=e.globals.dom.baseEl.querySelector(".apexcharts-".concat(s,"-annotations .apexcharts-").concat(s,"-annotation-label[rel='").concat(a,"']"));if(r){var n=r.parentNode,o=t.addBackgroundToAnno(r,i);o&&n.insertBefore(o.node,r)}};e.config.annotations.xaxis.map((function(t,e){i(t,e,"xaxis")})),e.config.annotations.yaxis.map((function(t,e){i(t,e,"yaxis")})),e.config.annotations.points.map((function(t,e){i(t,e,"point")}))}},{key:"makeAnnotationDraggable",value:function(t,e,i){var a=this.w.config.annotations[e][i];t.draggable().on("dragend",(function(t){var e=t.target.getAttribute("x"),i=t.target.getAttribute("y"),s=t.target.getAttribute("cx"),r=t.target.getAttribute("cy");a.x=e,a.y=i,s&&r&&(a.x=s,a.y=r)})),t.node.addEventListener("mousedown",(function(e){e.stopPropagation(),t.selectize({pointSize:8,rotationPoint:!1,pointType:"rect"}),t.resize().on("resizedone",(function(t){var e=t.target.getAttribute("width"),i=t.target.getAttribute("height"),s=t.target.getAttribute("r");a.width=e,a.height=i,s&&(a.radius=s)}))}))}},{key:"getStringX",value:function(t){var e=this.w,i=t;e.config.xaxis.convertedCatToNumeric&&e.globals.categoryLabels.length&&(t=e.globals.categoryLabels.indexOf(t)+1);var a=e.globals.labels.indexOf(t),s=e.globals.dom.baseEl.querySelector(".apexcharts-xaxis-texts-g text:nth-child("+(a+1)+")");return s&&(i=parseFloat(s.getAttribute("x"))),i}}]),t}(),b=function(){function t(i){e(this,t),this.w=i.w,this.annoCtx=i,this.invertAxis=this.annoCtx.invertAxis}return a(t,[{key:"addXaxisAnnotation",value:function(t,e,i){var a=this.w,s=this.invertAxis?a.globals.minY:a.globals.minX,r=this.invertAxis?a.globals.maxY:a.globals.maxX,n=this.invertAxis?a.globals.yRange[0]:a.globals.xRange,o=(t.x-s)/(n/a.globals.gridWidth);this.annoCtx.inversedReversedAxis&&(o=(r-t.x)/(n/a.globals.gridWidth));var l=t.label.text;"category"!==a.config.xaxis.type&&!a.config.xaxis.convertedCatToNumeric||this.invertAxis||a.globals.dataFormatXNumeric||(o=this.annoCtx.helpers.getStringX(t.x));var h=t.strokeDashArray;if(g.isNumber(o)){if(null===t.x2||void 0===t.x2){var c=this.annoCtx.graphics.drawLine(o+t.offsetX,0+t.offsetY,o+t.offsetX,a.globals.gridHeight+t.offsetY,t.borderColor,h,t.borderWidth);e.appendChild(c.node),t.id&&c.node.classList.add(t.id)}else{var d=(t.x2-s)/(n/a.globals.gridWidth);if(this.annoCtx.inversedReversedAxis&&(d=(r-t.x2)/(n/a.globals.gridWidth)),"category"!==a.config.xaxis.type&&!a.config.xaxis.convertedCatToNumeric||this.invertAxis||a.globals.dataFormatXNumeric||(d=this.annoCtx.helpers.getStringX(t.x2)),d<o){var u=o;o=d,d=u}var f=this.annoCtx.graphics.drawRect(o+t.offsetX,0+t.offsetY,d-o,a.globals.gridHeight+t.offsetY,0,t.fillColor,t.opacity,1,t.borderColor,h);f.node.classList.add("apexcharts-annotation-rect"),f.attr("clip-path","url(#gridRectMask".concat(a.globals.cuid,")")),e.appendChild(f.node),t.id&&f.node.classList.add(t.id)}var p="top"===t.label.position?4:a.globals.gridHeight,x=this.annoCtx.graphics.getTextRects(l,parseFloat(t.label.style.fontSize)),b=this.annoCtx.graphics.drawText({x:o+t.label.offsetX,y:p+t.label.offsetY-("vertical"===t.label.orientation?"top"===t.label.position?x.width/2-12:-x.width/2:0),text:l,textAnchor:t.label.textAnchor,fontSize:t.label.style.fontSize,fontFamily:t.label.style.fontFamily,fontWeight:t.label.style.fontWeight,foreColor:t.label.style.color,cssClass:"apexcharts-xaxis-annotation-label ".concat(t.label.style.cssClass," ").concat(t.id?t.id:"")});b.attr({rel:i}),e.appendChild(b.node),this.annoCtx.helpers.setOrientations(t,i)}}},{key:"drawXAxisAnnotations",value:function(){var t=this,e=this.w,i=this.annoCtx.graphics.group({class:"apexcharts-xaxis-annotations"});return e.config.annotations.xaxis.map((function(e,a){t.addXaxisAnnotation(e,i.node,a)})),i}}]),t}(),m=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"getStackedSeriesTotals",value:function(){var t=this.w,e=[];if(0===t.globals.series.length)return e;for(var i=0;i<t.globals.series[t.globals.maxValsInArrayIndex].length;i++){for(var a=0,s=0;s<t.globals.series.length;s++)void 0!==t.globals.series[s][i]&&(a+=t.globals.series[s][i]);e.push(a)}return t.globals.stackedSeriesTotals=e,e}},{key:"getSeriesTotalByIndex",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;return null===t?this.w.config.series.reduce((function(t,e){return t+e}),0):this.w.globals.series[t].reduce((function(t,e){return t+e}),0)}},{key:"isSeriesNull",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;return 0===(null===t?this.w.config.series.filter((function(t){return null!==t})):this.w.config.series[t].data.filter((function(t){return null!==t}))).length}},{key:"seriesHaveSameValues",value:function(t){return this.w.globals.series[t].every((function(t,e,i){return t===i[0]}))}},{key:"getCategoryLabels",value:function(t){var e=this.w,i=t.slice();return e.config.xaxis.convertedCatToNumeric&&(i=t.map((function(t){return e.config.xaxis.labels.formatter(t-e.globals.minX+1)}))),i}},{key:"getLargestSeries",value:function(){var t=this.w;t.globals.maxValsInArrayIndex=t.globals.series.map((function(t){return t.length})).indexOf(Math.max.apply(Math,t.globals.series.map((function(t){return t.length}))))}},{key:"getLargestMarkerSize",value:function(){var t=this.w,e=0;return t.globals.markers.size.forEach((function(t){e=Math.max(e,t)})),t.globals.markers.largestSize=e,e}},{key:"getSeriesTotals",value:function(){var t=this.w;t.globals.seriesTotals=t.globals.series.map((function(t,e){var i=0;if(Array.isArray(t))for(var a=0;a<t.length;a++)i+=t[a];else i+=t;return i}))}},{key:"getSeriesTotalsXRange",value:function(t,e){var i=this.w;return i.globals.series.map((function(a,s){for(var r=0,n=0;n<a.length;n++)i.globals.seriesX[s][n]>t&&i.globals.seriesX[s][n]<e&&(r+=a[n]);return r}))}},{key:"getPercentSeries",value:function(){var t=this.w;t.globals.seriesPercent=t.globals.series.map((function(e,i){var a=[];if(Array.isArray(e))for(var s=0;s<e.length;s++){var r=t.globals.stackedSeriesTotals[s],n=0;r&&(n=100*e[s]/r),a.push(n)}else{var o=100*e/t.globals.seriesTotals.reduce((function(t,e){return t+e}),0);a.push(o)}return a}))}},{key:"getCalculatedRatios",value:function(){var t,e,i,a,s=this.w.globals,r=[],n=0,o=[],l=.1,h=0;if(s.yRange=[],s.isMultipleYAxis)for(var c=0;c<s.minYArr.length;c++)s.yRange.push(Math.abs(s.minYArr[c]-s.maxYArr[c])),o.push(0);else s.yRange.push(Math.abs(s.minY-s.maxY));s.xRange=Math.abs(s.maxX-s.minX),s.zRange=Math.abs(s.maxZ-s.minZ);for(var d=0;d<s.yRange.length;d++)r.push(s.yRange[d]/s.gridHeight);if(e=s.xRange/s.gridWidth,i=Math.abs(s.initialMaxX-s.initialMinX)/s.gridWidth,t=s.yRange/s.gridWidth,a=s.xRange/s.gridHeight,(n=s.zRange/s.gridHeight*16)||(n=1),s.minY!==Number.MIN_VALUE&&0!==Math.abs(s.minY)&&(s.hasNegs=!0),s.isMultipleYAxis){o=[];for(var g=0;g<r.length;g++)o.push(-s.minYArr[g]/r[g])}else o.push(-s.minY/r[0]),s.minY!==Number.MIN_VALUE&&0!==Math.abs(s.minY)&&(l=-s.minY/t,h=s.minX/e);return{yRatio:r,invertedYRatio:t,zRatio:n,xRatio:e,initialXRatio:i,invertedXRatio:a,baseLineInvertedY:l,baseLineY:o,baseLineX:h}}},{key:"getLogSeries",value:function(t){var e=this,i=this.w;return i.globals.seriesLog=t.map((function(t,a){return i.config.yaxis[a]&&i.config.yaxis[a].logarithmic?t.map((function(t){return null===t?null:e.getLogVal(t,a)})):t})),i.globals.invalidLogScale?t:i.globals.seriesLog}},{key:"getLogVal",value:function(t,e){var i=this.w;return(Math.log(t)-Math.log(i.globals.minYArr[e]))/(Math.log(i.globals.maxYArr[e])-Math.log(i.globals.minYArr[e]))}},{key:"getLogYRatios",value:function(t){var e=this,i=this.w,a=this.w.globals;return a.yLogRatio=t.slice(),a.logYRange=a.yRange.map((function(t,s){if(i.config.yaxis[s]&&e.w.config.yaxis[s].logarithmic){var r,n=-Number.MAX_VALUE,o=Number.MIN_VALUE;return a.seriesLog.forEach((function(t,e){t.forEach((function(t){i.config.yaxis[e]&&i.config.yaxis[e].logarithmic&&(n=Math.max(t,n),o=Math.min(t,o))}))})),r=Math.pow(a.yRange[s],Math.abs(o-n)/a.yRange[s]),a.yLogRatio[s]=r/a.gridHeight,r}})),a.invalidLogScale?t.slice():a.yLogRatio}}],[{key:"checkComboSeries",value:function(t){var e=!1,i=0;return t.length&&void 0!==t[0].type&&(e=!0,t.forEach((function(t){"bar"!==t.type&&"column"!==t.type&&"candlestick"!==t.type||i++}))),{comboBarCount:i,comboCharts:e}}},{key:"extendArrayProps",value:function(t,e,i){return e.yaxis&&(e=t.extendYAxis(e,i)),e.annotations&&(e.annotations.yaxis&&(e=t.extendYAxisAnnotations(e)),e.annotations.xaxis&&(e=t.extendXAxisAnnotations(e)),e.annotations.points&&(e=t.extendPointAnnotations(e))),e}}]),t}(),v=function(){function t(i){e(this,t),this.w=i.w,this.annoCtx=i}return a(t,[{key:"addYaxisAnnotation",value:function(t,e,i){var a,s=this.w,r=t.strokeDashArray,n=this._getY1Y2("y1",t),o=t.label.text;if(null===t.y2||void 0===t.y2){var l=this.annoCtx.graphics.drawLine(0+t.offsetX,n+t.offsetY,s.globals.gridWidth+t.offsetX,n+t.offsetY,t.borderColor,r,t.borderWidth);e.appendChild(l.node),t.id&&l.node.classList.add(t.id)}else{if((a=this._getY1Y2("y2",t))>n){var h=n;n=a,a=h}var c=this.annoCtx.graphics.drawRect(0+t.offsetX,a+t.offsetY,s.globals.gridWidth+t.offsetX,n-a,0,t.fillColor,t.opacity,1,t.borderColor,r);c.node.classList.add("apexcharts-annotation-rect"),c.attr("clip-path","url(#gridRectMask".concat(s.globals.cuid,")")),e.appendChild(c.node),t.id&&c.node.classList.add(t.id)}var d="right"===t.label.position?s.globals.gridWidth:0,g=this.annoCtx.graphics.drawText({x:d+t.label.offsetX,y:(a||n)+t.label.offsetY-3,text:o,textAnchor:t.label.textAnchor,fontSize:t.label.style.fontSize,fontFamily:t.label.style.fontFamily,fontWeight:t.label.style.fontWeight,foreColor:t.label.style.color,cssClass:"apexcharts-yaxis-annotation-label ".concat(t.label.style.cssClass," ").concat(t.id?t.id:"")});g.attr({rel:i}),e.appendChild(g.node)}},{key:"_getY1Y2",value:function(t,e){var i,a="y1"===t?e.y:e.y2,s=this.w;if(this.annoCtx.invertAxis){var r=s.globals.labels.indexOf(a);s.config.xaxis.convertedCatToNumeric&&(r=s.globals.categoryLabels.indexOf(a));var n=s.globals.dom.baseEl.querySelector(".apexcharts-yaxis-texts-g text:nth-child("+(r+1)+")");n&&(i=parseFloat(n.getAttribute("y")))}else{var o;if(s.config.yaxis[e.yAxisIndex].logarithmic)o=(a=new m(this.annoCtx.ctx).getLogVal(a,e.yAxisIndex))/s.globals.yLogRatio[e.yAxisIndex];else o=(a-s.globals.minYArr[e.yAxisIndex])/(s.globals.yRange[e.yAxisIndex]/s.globals.gridHeight);i=s.globals.gridHeight-o,s.config.yaxis[e.yAxisIndex]&&s.config.yaxis[e.yAxisIndex].reversed&&(i=o)}return i}},{key:"drawYAxisAnnotations",value:function(){var t=this,e=this.w,i=this.annoCtx.graphics.group({class:"apexcharts-yaxis-annotations"});return e.config.annotations.yaxis.map((function(e,a){t.addYaxisAnnotation(e,i.node,a)})),i}}]),t}(),y=function(){function t(i){e(this,t),this.w=i.w,this.annoCtx=i}return a(t,[{key:"addPointAnnotation",value:function(t,e,i){var a=this.w,s=0,r=0,n=0;this.annoCtx.invertAxis&&console.warn("Point annotation is not supported in horizontal bar charts.");var o,l=parseFloat(t.y);if("string"==typeof t.x){var h=a.globals.labels.indexOf(t.x);a.config.xaxis.convertedCatToNumeric&&(h=a.globals.categoryLabels.indexOf(t.x)),s=this.annoCtx.helpers.getStringX(t.x),null===t.y&&(l=a.globals.series[t.seriesIndex][h])}else s=(t.x-a.globals.minX)/(a.globals.xRange/a.globals.gridWidth);a.config.yaxis[t.yAxisIndex].logarithmic?o=(l=new m(this.annoCtx.ctx).getLogVal(l,t.yAxisIndex))/a.globals.yLogRatio[t.yAxisIndex]:o=(l-a.globals.minYArr[t.yAxisIndex])/(a.globals.yRange[t.yAxisIndex]/a.globals.gridHeight);if(r=a.globals.gridHeight-o-parseFloat(t.label.style.fontSize)-t.marker.size,n=a.globals.gridHeight-o,a.config.yaxis[t.yAxisIndex]&&a.config.yaxis[t.yAxisIndex].reversed&&(r=o+parseFloat(t.label.style.fontSize)+t.marker.size,n=o),g.isNumber(s)){var c={pSize:t.marker.size,pWidth:t.marker.strokeWidth,pointFillColor:t.marker.fillColor,pointStrokeColor:t.marker.strokeColor,shape:t.marker.shape,pRadius:t.marker.radius,class:"apexcharts-point-annotation-marker ".concat(t.marker.cssClass," ").concat(t.id?t.id:"")},d=this.annoCtx.graphics.drawMarker(s+t.marker.offsetX,n+t.marker.offsetY,c);e.appendChild(d.node);var u=t.label.text?t.label.text:"",f=this.annoCtx.graphics.drawText({x:s+t.label.offsetX,y:r+t.label.offsetY,text:u,textAnchor:t.label.textAnchor,fontSize:t.label.style.fontSize,fontFamily:t.label.style.fontFamily,fontWeight:t.label.style.fontWeight,foreColor:t.label.style.color,cssClass:"apexcharts-point-annotation-label ".concat(t.label.style.cssClass," ").concat(t.id?t.id:"")});if(f.attr({rel:i}),e.appendChild(f.node),t.customSVG.SVG){var p=this.annoCtx.graphics.group({class:"apexcharts-point-annotations-custom-svg "+t.customSVG.cssClass});p.attr({transform:"translate(".concat(s+t.customSVG.offsetX,", ").concat(r+t.customSVG.offsetY,")")}),p.node.innerHTML=t.customSVG.SVG,e.appendChild(p.node)}if(t.image.path){var x=t.image.width?t.image.width:20,b=t.image.height?t.image.height:20;this.annoCtx.addImage({x:s+t.image.offsetX-x/2,y:r+t.image.offsetY-b/2,width:x,height:b,path:t.image.path,appendTo:".apexcharts-point-annotations"})}}}},{key:"drawPointAnnotations",value:function(){var t=this,e=this.w,i=this.annoCtx.graphics.group({class:"apexcharts-point-annotations"});return e.config.annotations.points.map((function(e,a){t.addPointAnnotation(e,i.node,a)})),i}}]),t}();var w,k,A={name:"en",options:{months:["January","February","March","April","May","June","July","August","September","October","November","December"],shortMonths:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],days:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],shortDays:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],toolbar:{exportToSVG:"Download SVG",exportToPNG:"Download PNG",exportToCSV:"Download CSV",menu:"Menu",selection:"Selection",selectionZoom:"Selection Zoom",zoomIn:"Zoom In",zoomOut:"Zoom Out",pan:"Panning",reset:"Reset Zoom"}}},S=function(){function t(){e(this,t),this.yAxis={show:!0,showAlways:!1,showForNullSeries:!0,seriesName:void 0,opposite:!1,reversed:!1,logarithmic:!1,tickAmount:void 0,forceNiceScale:!1,max:void 0,min:void 0,floating:!1,decimalsInFloat:void 0,labels:{show:!0,minWidth:0,maxWidth:160,offsetX:0,offsetY:0,align:void 0,rotate:0,padding:20,style:{colors:[],fontSize:"11px",fontWeight:400,fontFamily:void 0,cssClass:""},formatter:void 0},axisBorder:{show:!1,color:"#e0e0e0",width:1,offsetX:0,offsetY:0},axisTicks:{show:!1,color:"#e0e0e0",width:6,offsetX:0,offsetY:0},title:{text:void 0,rotate:90,offsetY:0,offsetX:0,style:{color:void 0,fontSize:"11px",fontWeight:900,fontFamily:void 0,cssClass:""}},tooltip:{enabled:!1,offsetX:0},crosshairs:{show:!0,position:"front",stroke:{color:"#b6b6b6",width:1,dashArray:0}}},this.pointAnnotation={x:0,y:null,yAxisIndex:0,seriesIndex:0,marker:{size:4,fillColor:"#fff",strokeWidth:2,strokeColor:"#333",shape:"circle",offsetX:0,offsetY:0,radius:2,cssClass:""},label:{borderColor:"#c2c2c2",borderWidth:1,text:void 0,textAnchor:"middle",offsetX:0,offsetY:0,style:{background:"#fff",color:void 0,fontSize:"11px",fontFamily:void 0,fontWeight:400,cssClass:"",padding:{left:5,right:5,top:2,bottom:2}}},customSVG:{SVG:void 0,cssClass:void 0,offsetX:0,offsetY:0},image:{path:void 0,width:20,height:20,offsetX:0,offsetY:0}},this.yAxisAnnotation={y:0,y2:null,strokeDashArray:1,fillColor:"#c2c2c2",borderColor:"#c2c2c2",borderWidth:1,opacity:.3,offsetX:0,offsetY:0,yAxisIndex:0,label:{borderColor:"#c2c2c2",borderWidth:1,text:void 0,textAnchor:"end",position:"right",offsetX:0,offsetY:-3,style:{background:"#fff",color:void 0,fontSize:"11px",fontFamily:void 0,fontWeight:400,cssClass:"",padding:{left:5,right:5,top:2,bottom:2}}}},this.xAxisAnnotation={x:0,x2:null,strokeDashArray:1,fillColor:"#c2c2c2",borderColor:"#c2c2c2",borderWidth:1,opacity:.3,offsetX:0,offsetY:0,label:{borderColor:"#c2c2c2",borderWidth:1,text:void 0,textAnchor:"middle",orientation:"vertical",position:"top",offsetX:0,offsetY:0,style:{background:"#fff",color:void 0,fontSize:"11px",fontFamily:void 0,fontWeight:400,cssClass:"",padding:{left:5,right:5,top:2,bottom:2}}}},this.text={x:0,y:0,text:"",textAnchor:"start",foreColor:void 0,fontSize:"13px",fontFamily:void 0,fontWeight:400,appendTo:".apexcharts-annotations",backgroundColor:"transparent",borderColor:"#c2c2c2",borderRadius:0,borderWidth:0,paddingLeft:4,paddingRight:4,paddingTop:2,paddingBottom:2},this.shape={x:0,y:0,type:"rect",width:"100%",height:50,appendTo:".apexcharts-annotations",backgroundColor:"#fff",opacity:1,borderWidth:0,borderRadius:4,borderColor:"#c2c2c2"}}return a(t,[{key:"init",value:function(){return{annotations:{position:"front",yaxis:[this.yAxisAnnotation],xaxis:[this.xAxisAnnotation],points:[this.pointAnnotation],texts:[],images:[],shapes:[]},chart:{animations:{enabled:!0,easing:"easeinout",speed:800,animateGradually:{delay:150,enabled:!0},dynamicAnimation:{enabled:!0,speed:350}},background:"transparent",locales:[A],defaultLocale:"en",dropShadow:{enabled:!1,enabledOnSeries:void 0,top:2,left:2,blur:4,color:"#000",opacity:.35},events:{animationEnd:void 0,beforeMount:void 0,mounted:void 0,updated:void 0,click:void 0,mouseMove:void 0,legendClick:void 0,markerClick:void 0,selection:void 0,dataPointSelection:void 0,dataPointMouseEnter:void 0,dataPointMouseLeave:void 0,beforeZoom:void 0,zoomed:void 0,scrolled:void 0},foreColor:"#373d3f",fontFamily:"Helvetica, Arial, sans-serif",height:"auto",parentHeightOffset:15,redrawOnParentResize:!0,id:void 0,group:void 0,offsetX:0,offsetY:0,selection:{enabled:!1,type:"x",fill:{color:"#24292e",opacity:.1},stroke:{width:1,color:"#24292e",opacity:.4,dashArray:3},xaxis:{min:void 0,max:void 0},yaxis:{min:void 0,max:void 0}},sparkline:{enabled:!1},brush:{enabled:!1,autoScaleYaxis:!0,target:void 0},stacked:!1,stackType:"normal",toolbar:{show:!0,offsetX:0,offsetY:0,tools:{download:!0,selection:!0,zoom:!0,zoomin:!0,zoomout:!0,pan:!0,reset:!0,customIcons:[]},autoSelected:"zoom"},type:"line",width:"100%",zoom:{enabled:!0,type:"x",autoScaleYaxis:!1,zoomedArea:{fill:{color:"#90CAF9",opacity:.4},stroke:{color:"#0D47A1",opacity:.4,width:1}}}},plotOptions:{bar:{horizontal:!1,columnWidth:"70%",barHeight:"70%",distributed:!1,startingShape:"flat",endingShape:"flat",rangeBarOverlap:!0,colors:{ranges:[],backgroundBarColors:[],backgroundBarOpacity:1,backgroundBarRadius:0},dataLabels:{position:"top",maxItems:100,hideOverflowingLabels:!0,orientation:"horizontal"}},bubble:{minBubbleRadius:void 0,maxBubbleRadius:void 0},candlestick:{colors:{upward:"#00B746",downward:"#EF403C"},wick:{useFillColor:!0}},heatmap:{radius:2,enableShades:!0,shadeIntensity:.5,reverseNegativeShade:!1,distributed:!1,useFillColorAsStroke:!1,colorScale:{inverse:!1,ranges:[],min:void 0,max:void 0}},radialBar:{inverseOrder:!1,startAngle:0,endAngle:360,offsetX:0,offsetY:0,hollow:{margin:5,size:"50%",background:"transparent",image:void 0,imageWidth:150,imageHeight:150,imageOffsetX:0,imageOffsetY:0,imageClipped:!0,position:"front",dropShadow:{enabled:!1,top:0,left:0,blur:3,color:"#000",opacity:.5}},track:{show:!0,startAngle:void 0,endAngle:void 0,background:"#f2f2f2",strokeWidth:"97%",opacity:1,margin:5,dropShadow:{enabled:!1,top:0,left:0,blur:3,color:"#000",opacity:.5}},dataLabels:{show:!0,name:{show:!0,fontSize:"16px",fontFamily:void 0,fontWeight:600,color:void 0,offsetY:0,formatter:function(t){return t}},value:{show:!0,fontSize:"14px",fontFamily:void 0,fontWeight:400,color:void 0,offsetY:16,formatter:function(t){return t+"%"}},total:{show:!1,label:"Total",fontSize:"16px",fontWeight:600,fontFamily:void 0,color:void 0,formatter:function(t){return t.globals.seriesTotals.reduce((function(t,e){return t+e}),0)/t.globals.series.length+"%"}}}},pie:{customScale:1,offsetX:0,offsetY:0,expandOnClick:!0,dataLabels:{offset:0,minAngleToShowLabel:10},donut:{size:"65%",background:"transparent",labels:{show:!1,name:{show:!0,fontSize:"16px",fontFamily:void 0,fontWeight:600,color:void 0,offsetY:-10,formatter:function(t){return t}},value:{show:!0,fontSize:"20px",fontFamily:void 0,fontWeight:400,color:void 0,offsetY:10,formatter:function(t){return t}},total:{show:!1,showAlways:!1,label:"Total",fontSize:"16px",fontWeight:400,fontFamily:void 0,color:void 0,formatter:function(t){return t.globals.seriesTotals.reduce((function(t,e){return t+e}),0)}}}}},polarArea:{rings:{strokeWidth:1,strokeColor:"#e8e8e8"}},radar:{size:void 0,offsetX:0,offsetY:0,polygons:{strokeWidth:1,strokeColors:"#e8e8e8",connectorColors:"#e8e8e8",fill:{colors:void 0}}}},colors:void 0,dataLabels:{enabled:!0,enabledOnSeries:void 0,formatter:function(t){return null!==t?t:""},textAnchor:"middle",distributed:!1,offsetX:0,offsetY:0,style:{fontSize:"12px",fontFamily:void 0,fontWeight:600,colors:void 0},background:{enabled:!0,foreColor:"#fff",borderRadius:2,padding:4,opacity:.9,borderWidth:1,borderColor:"#fff",dropShadow:{enabled:!1,top:1,left:1,blur:1,color:"#000",opacity:.45}},dropShadow:{enabled:!1,top:1,left:1,blur:1,color:"#000",opacity:.45}},fill:{type:"solid",colors:void 0,opacity:.85,gradient:{shade:"dark",type:"horizontal",shadeIntensity:.5,gradientToColors:void 0,inverseColors:!0,opacityFrom:1,opacityTo:1,stops:[0,50,100],colorStops:[]},image:{src:[],width:void 0,height:void 0},pattern:{style:"squares",width:6,height:6,strokeWidth:2}},grid:{show:!0,borderColor:"#e0e0e0",strokeDashArray:0,position:"back",xaxis:{lines:{show:!1}},yaxis:{lines:{show:!0}},row:{colors:void 0,opacity:.5},column:{colors:void 0,opacity:.5},padding:{top:0,right:10,bottom:0,left:12}},labels:[],legend:{show:!0,showForSingleSeries:!1,showForNullSeries:!0,showForZeroSeries:!0,floating:!1,position:"bottom",horizontalAlign:"center",inverseOrder:!1,fontSize:"12px",fontFamily:void 0,fontWeight:400,width:void 0,height:void 0,formatter:void 0,tooltipHoverFormatter:void 0,offsetX:-20,offsetY:0,labels:{colors:void 0,useSeriesColors:!1},markers:{width:12,height:12,strokeWidth:0,fillColors:void 0,strokeColor:"#fff",radius:12,customHTML:void 0,offsetX:0,offsetY:0,onClick:void 0},itemMargin:{horizontal:5,vertical:0},onItemClick:{toggleDataSeries:!0},onItemHover:{highlightDataSeries:!0}},markers:{discrete:[],size:0,colors:void 0,strokeColors:"#fff",strokeWidth:2,strokeOpacity:.9,strokeDashArray:0,fillOpacity:1,shape:"circle",radius:2,offsetX:0,offsetY:0,onClick:void 0,onDblClick:void 0,showNullDataPoints:!0,hover:{size:void 0,sizeOffset:3}},noData:{text:void 0,align:"center",verticalAlign:"middle",offsetX:0,offsetY:0,style:{color:void 0,fontSize:"14px",fontFamily:void 0}},responsive:[],series:void 0,states:{normal:{filter:{type:"none",value:0}},hover:{filter:{type:"lighten",value:.15}},active:{allowMultipleDataPointsSelection:!1,filter:{type:"darken",value:.65}}},title:{text:void 0,align:"left",margin:5,offsetX:0,offsetY:0,floating:!1,style:{fontSize:"14px",fontWeight:900,fontFamily:void 0,color:void 0}},subtitle:{text:void 0,align:"left",margin:5,offsetX:0,offsetY:30,floating:!1,style:{fontSize:"12px",fontWeight:400,fontFamily:void 0,color:void 0}},stroke:{show:!0,curve:"smooth",lineCap:"butt",width:2,colors:void 0,dashArray:0},tooltip:{enabled:!0,enabledOnSeries:void 0,shared:!0,followCursor:!1,intersect:!1,inverseOrder:!1,custom:void 0,fillSeriesColor:!1,theme:"light",style:{fontSize:"12px",fontFamily:void 0},onDatasetHover:{highlightDataSeries:!1},x:{show:!0,format:"dd MMM",formatter:void 0},y:{formatter:void 0,title:{formatter:function(t){return t}}},z:{formatter:void 0,title:"Size: "},marker:{show:!0,fillColors:void 0},items:{display:"flex"},fixed:{enabled:!1,position:"topRight",offsetX:0,offsetY:0}},xaxis:{type:"category",categories:[],convertedCatToNumeric:!1,sorted:!0,offsetX:0,offsetY:0,labels:{show:!0,rotate:-45,rotateAlways:!1,hideOverlappingLabels:!0,trim:!1,minHeight:void 0,maxHeight:120,showDuplicates:!0,style:{colors:[],fontSize:"12px",fontWeight:400,fontFamily:void 0,cssClass:""},offsetX:0,offsetY:0,format:void 0,formatter:void 0,datetimeUTC:!0,datetimeFormatter:{year:"yyyy",month:"MMM 'yy",day:"dd MMM",hour:"HH:mm",minute:"HH:mm:ss"}},axisBorder:{show:!0,color:"#e0e0e0",width:"100%",height:1,offsetX:0,offsetY:0},axisTicks:{show:!0,color:"#e0e0e0",height:6,offsetX:0,offsetY:0},tickAmount:void 0,tickPlacement:"on",min:void 0,max:void 0,range:void 0,floating:!1,position:"bottom",title:{text:void 0,offsetX:0,offsetY:0,style:{color:void 0,fontSize:"12px",fontWeight:900,fontFamily:void 0,cssClass:""}},crosshairs:{show:!0,width:1,position:"back",opacity:.9,stroke:{color:"#b6b6b6",width:1,dashArray:3},fill:{type:"solid",color:"#B1B9C4",gradient:{colorFrom:"#D8E3F0",colorTo:"#BED1E6",stops:[0,100],opacityFrom:.4,opacityTo:.5}},dropShadow:{enabled:!1,left:0,top:0,blur:1,opacity:.4}},tooltip:{enabled:!0,offsetY:0,formatter:void 0,style:{fontSize:"12px",fontFamily:void 0}}},yaxis:this.yAxis,theme:{mode:"light",palette:"palette1",monochrome:{enabled:!1,color:"#008FFB",shadeTo:"light",shadeIntensity:.65}}}}}]),t}(),C=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.graphics=new p(this.ctx),this.w.globals.isBarHorizontal&&(this.invertAxis=!0),this.helpers=new x(this),this.xAxisAnnotations=new b(this),this.yAxisAnnotations=new v(this),this.pointsAnnotations=new y(this),this.w.globals.isBarHorizontal&&this.w.config.yaxis[0].reversed&&(this.inversedReversedAxis=!0),this.xDivision=this.w.globals.gridWidth/this.w.globals.dataPoints}return a(t,[{key:"drawAxesAnnotations",value:function(){var t=this.w;if(t.globals.axisCharts){for(var e=this.yAxisAnnotations.drawYAxisAnnotations(),i=this.xAxisAnnotations.drawXAxisAnnotations(),a=this.pointsAnnotations.drawPointAnnotations(),s=t.config.chart.animations.enabled,r=[e,i,a],n=[i.node,e.node,a.node],o=0;o<3;o++)t.globals.dom.elGraphical.add(r[o]),!s||t.globals.resized||t.globals.dataChanged||"scatter"!==t.config.chart.type&&"bubble"!==t.config.chart.type&&t.globals.dataPoints>1&&n[o].classList.add("apexcharts-element-hidden"),t.globals.delayedElements.push({el:n[o],index:0});this.helpers.annotationsBackground()}}},{key:"drawShapeAnnos",value:function(){var t=this;this.w.config.annotations.shapes.map((function(e,i){t.addShape(e,i)}))}},{key:"drawImageAnnos",value:function(){var t=this;this.w.config.annotations.images.map((function(e,i){t.addImage(e,i)}))}},{key:"drawTextAnnos",value:function(){var t=this;this.w.config.annotations.texts.map((function(e,i){t.addText(e,i)}))}},{key:"addXaxisAnnotation",value:function(t,e,i){this.xAxisAnnotations.addXaxisAnnotation(t,e,i)}},{key:"addYaxisAnnotation",value:function(t,e,i){this.yAxisAnnotations.addYaxisAnnotation(t,e,i)}},{key:"addPointAnnotation",value:function(t,e,i){this.pointsAnnotations.addPointAnnotation(t,e,i)}},{key:"addText",value:function(t,e){var i=t.x,a=t.y,s=t.text,r=t.textAnchor,n=t.foreColor,o=t.fontSize,l=t.fontFamily,h=t.fontWeight,c=t.cssClass,d=t.backgroundColor,g=t.borderWidth,u=t.strokeDashArray,f=t.borderRadius,p=t.borderColor,x=t.appendTo,b=void 0===x?".apexcharts-annotations":x,m=t.paddingLeft,v=void 0===m?4:m,y=t.paddingRight,w=void 0===y?4:y,k=t.paddingBottom,A=void 0===k?2:k,S=t.paddingTop,C=void 0===S?2:S,L=this.w,P=this.graphics.drawText({x:i,y:a,text:s,textAnchor:r||"start",fontSize:o||"12px",fontWeight:h||"regular",fontFamily:l||L.config.chart.fontFamily,foreColor:n||L.config.chart.foreColor,cssClass:c}),T=L.globals.dom.baseEl.querySelector(b);T&&T.appendChild(P.node);var z=P.bbox();if(t.draggable&&this.helpers.makeAnnotationDraggable(P,"texts",e),s){var I=this.graphics.drawRect(z.x-v,z.y-C,z.width+v+w,z.height+A+C,f,d||"transparent",1,g,p,u);T.insertBefore(I.node,P.node)}}},{key:"addShape",value:function(t,e){var i={type:t.type,x:t.x||0,y:t.y||0,width:t.width||"100%",height:t.height||50,circleRadius:t.radius||25,backgroundColor:t.backgroundColor||"#fff",opacity:t.opacity||1,borderWidth:t.borderWidth||0,borderRadius:t.borderRadius||4,borderColor:t.borderColor||"#c2c2c2",appendTo:t.appendTo||".apexcharts-annotations"},a=this.w;String(i.width).indexOf("%")>-1&&(i.width=parseInt(i.width,10)*parseInt(a.globals.svgWidth,10)/100);var s=null;s="circle"===i.type?this.graphics.drawCircle(i.circleRadius,{fill:i.backgroundColor,stroke:i.borderColor,"stroke-width":i.borderWidth,opacity:i.opacity,cx:i.x,cy:i.y}):this.graphics.drawRect(i.x,i.y,i.width,i.height,i.borderRadius,i.backgroundColor,i.opacity,i.borderWidth,i.borderColor);var r=a.globals.dom.baseEl.querySelector(i.appendTo);r&&r.appendChild(s.node),t.draggable&&(this.helpers.makeAnnotationDraggable(s,"shapes",e),s.node.classList.add("apexcharts-resizable-element"))}},{key:"addImage",value:function(t,e){var i=this.w,a=t.path,s=t.x,r=void 0===s?0:s,n=t.y,o=void 0===n?0:n,l=t.width,h=void 0===l?20:l,c=t.height,d=void 0===c?20:c,g=t.appendTo,u=void 0===g?".apexcharts-annotations":g,f=i.globals.dom.Paper.image(a);f.size(h,d).move(r,o);var p=i.globals.dom.baseEl.querySelector(u);p&&p.appendChild(f.node),t.draggable&&(this.helpers.makeAnnotationDraggable(f,"images",e),f.node.classList.add("apexcharts-resizable-element"))}},{key:"addXaxisAnnotationExternal",value:function(t,e,i){return this.addAnnotationExternal({params:t,pushToMemory:e,context:i,type:"xaxis",contextMethod:i.addXaxisAnnotation}),i}},{key:"addYaxisAnnotationExternal",value:function(t,e,i){return this.addAnnotationExternal({params:t,pushToMemory:e,context:i,type:"yaxis",contextMethod:i.addYaxisAnnotation}),i}},{key:"addPointAnnotationExternal",value:function(t,e,i){return void 0===this.invertAxis&&(this.invertAxis=i.w.globals.isBarHorizontal),this.addAnnotationExternal({params:t,pushToMemory:e,context:i,type:"point",contextMethod:i.addPointAnnotation}),i}},{key:"addAnnotationExternal",value:function(t){var e=t.params,i=t.pushToMemory,a=t.context,s=t.type,r=t.contextMethod,n=a,o=n.w,l=o.globals.dom.baseEl.querySelector(".apexcharts-".concat(s,"-annotations")),h=l.childNodes.length+1,c=new S,d=Object.assign({},"xaxis"===s?c.xAxisAnnotation:"yaxis"===s?c.yAxisAnnotation:c.pointAnnotation),u=g.extend(d,e);switch(s){case"xaxis":this.addXaxisAnnotation(u,l,h);break;case"yaxis":this.addYaxisAnnotation(u,l,h);break;case"point":this.addPointAnnotation(u,l,h)}var f=o.globals.dom.baseEl.querySelector(".apexcharts-".concat(s,"-annotations .apexcharts-").concat(s,"-annotation-label[rel='").concat(h,"']")),p=this.helpers.addBackgroundToAnno(f,u);return p&&l.insertBefore(p.node,f),i&&o.globals.memory.methodsToExec.push({context:n,id:u.id?u.id:g.randomId(),method:r,label:"addAnnotation",params:e}),a}},{key:"clearAnnotations",value:function(t){var e=t.w,i=e.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxis-annotations, .apexcharts-xaxis-annotations, .apexcharts-point-annotations");e.globals.memory.methodsToExec.map((function(t,i){"addText"!==t.label&&"addAnnotation"!==t.label||e.globals.memory.methodsToExec.splice(i,1)})),i=g.listToArray(i),Array.prototype.forEach.call(i,(function(t){for(;t.firstChild;)t.removeChild(t.firstChild)}))}},{key:"removeAnnotation",value:function(t,e){var i=t.w,a=i.globals.dom.baseEl.querySelectorAll(".".concat(e));a&&(i.globals.memory.methodsToExec.map((function(t,a){t.id===e&&i.globals.memory.methodsToExec.splice(a,1)})),Array.prototype.forEach.call(a,(function(t){t.parentElement.removeChild(t)})))}}]),t}(),L=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.opts=null,this.seriesIndex=0}return a(t,[{key:"clippedImgArea",value:function(t){var e=this.w,i=e.config,a=parseInt(e.globals.gridWidth,10),s=parseInt(e.globals.gridHeight,10),r=a>s?a:s,n=t.image,o=0,l=0;void 0===t.width&&void 0===t.height?void 0!==i.fill.image.width&&void 0!==i.fill.image.height?(o=i.fill.image.width+1,l=i.fill.image.height):(o=r+1,l=r):(o=t.width,l=t.height);var h=document.createElementNS(e.globals.SVGNS,"pattern");p.setAttrs(h,{id:t.patternID,patternUnits:t.patternUnits?t.patternUnits:"userSpaceOnUse",width:o+"px",height:l+"px"});var c=document.createElementNS(e.globals.SVGNS,"image");h.appendChild(c),c.setAttributeNS(window.SVG.xlink,"href",n),p.setAttrs(c,{x:0,y:0,preserveAspectRatio:"none",width:o+"px",height:l+"px"}),c.style.opacity=t.opacity,e.globals.dom.elDefs.node.appendChild(h)}},{key:"getSeriesIndex",value:function(t){var e=this.w;return("bar"===e.config.chart.type||"rangeBar"===e.config.chart.type)&&e.config.plotOptions.bar.distributed||"heatmap"===e.config.chart.type?this.seriesIndex=t.seriesNumber:this.seriesIndex=t.seriesNumber%e.globals.series.length,this.seriesIndex}},{key:"fillPath",value:function(t){var e=this.w;this.opts=t;var i,a,s,r=this.w.config;this.seriesIndex=this.getSeriesIndex(t);var n=this.getFillColors()[this.seriesIndex];"function"==typeof n&&(n=n({seriesIndex:this.seriesIndex,dataPointIndex:t.dataPointIndex,value:t.value,w:e}));var o=this.getFillType(this.seriesIndex),l=Array.isArray(r.fill.opacity)?r.fill.opacity[this.seriesIndex]:r.fill.opacity,h=n;if(t.color&&(n=t.color),-1===n.indexOf("rgb")?n.length<9&&(h=g.hexToRgba(n,l)):n.indexOf("rgba")>-1&&(l=g.getOpacityFromRGBA(n)),t.opacity&&(l=t.opacity),"pattern"===o&&(a=this.handlePatternFill(a,n,l,h)),"gradient"===o&&(s=this.handleGradientFill(n,l,this.seriesIndex)),"image"===o){var c=r.fill.image.src,d=t.patternID?t.patternID:"";this.clippedImgArea({opacity:l,image:Array.isArray(c)?t.seriesNumber<c.length?c[t.seriesNumber]:c[0]:c,width:t.width?t.width:void 0,height:t.height?t.height:void 0,patternUnits:t.patternUnits,patternID:"pattern".concat(e.globals.cuid).concat(t.seriesNumber+1).concat(d)}),i="url(#pattern".concat(e.globals.cuid).concat(t.seriesNumber+1).concat(d,")")}else i="gradient"===o?s:"pattern"===o?a:h;return t.solid&&(i=h),i}},{key:"getFillType",value:function(t){var e=this.w;return Array.isArray(e.config.fill.type)?e.config.fill.type[t]:e.config.fill.type}},{key:"getFillColors",value:function(){var t=this.w,e=t.config,i=this.opts,a=[];return t.globals.comboCharts?"line"===t.config.series[this.seriesIndex].type?t.globals.stroke.colors instanceof Array?a=t.globals.stroke.colors:a.push(t.globals.stroke.colors):t.globals.fill.colors instanceof Array?a=t.globals.fill.colors:a.push(t.globals.fill.colors):"line"===e.chart.type?t.globals.stroke.colors instanceof Array?a=t.globals.stroke.colors:a.push(t.globals.stroke.colors):t.globals.fill.colors instanceof Array?a=t.globals.fill.colors:a.push(t.globals.fill.colors),void 0!==i.fillColors&&(a=[],i.fillColors instanceof Array?a=i.fillColors.slice():a.push(i.fillColors)),a}},{key:"handlePatternFill",value:function(t,e,i,a){var s=this.w.config,r=this.opts,n=new p(this.ctx),o=void 0===s.fill.pattern.strokeWidth?Array.isArray(s.stroke.width)?s.stroke.width[this.seriesIndex]:s.stroke.width:Array.isArray(s.fill.pattern.strokeWidth)?s.fill.pattern.strokeWidth[this.seriesIndex]:s.fill.pattern.strokeWidth,l=e;s.fill.pattern.style instanceof Array?t=void 0!==s.fill.pattern.style[r.seriesNumber]?n.drawPattern(s.fill.pattern.style[r.seriesNumber],s.fill.pattern.width,s.fill.pattern.height,l,o,i):a:t=n.drawPattern(s.fill.pattern.style,s.fill.pattern.width,s.fill.pattern.height,l,o,i);return t}},{key:"handleGradientFill",value:function(t,e,i){var a,s=this.w.config,r=this.opts,n=new p(this.ctx),o=new g,l=s.fill.gradient.type,h=t,c=void 0===s.fill.gradient.opacityFrom?e:Array.isArray(s.fill.gradient.opacityFrom)?s.fill.gradient.opacityFrom[i]:s.fill.gradient.opacityFrom;h.indexOf("rgba")>-1&&(c=g.getOpacityFromRGBA(h));var d=void 0===s.fill.gradient.opacityTo?e:Array.isArray(s.fill.gradient.opacityTo)?s.fill.gradient.opacityTo[i]:s.fill.gradient.opacityTo;if(void 0===s.fill.gradient.gradientToColors||0===s.fill.gradient.gradientToColors.length)a="dark"===s.fill.gradient.shade?o.shadeColor(-1*parseFloat(s.fill.gradient.shadeIntensity),t.indexOf("rgb")>-1?g.rgb2hex(t):t):o.shadeColor(parseFloat(s.fill.gradient.shadeIntensity),t.indexOf("rgb")>-1?g.rgb2hex(t):t);else{var u=s.fill.gradient.gradientToColors[r.seriesNumber];a=u,u.indexOf("rgba")>-1&&(d=g.getOpacityFromRGBA(u))}if(s.fill.gradient.inverseColors){var f=h;h=a,a=f}return h.indexOf("rgb")>-1&&(h=g.rgb2hex(h)),a.indexOf("rgb")>-1&&(a=g.rgb2hex(a)),n.drawGradient(l,h,a,c,d,r.size,s.fill.gradient.stops,s.fill.gradient.colorStops,i)}}]),t}(),P=function(){function t(i,a){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"setGlobalMarkerSize",value:function(){var t=this.w;if(t.globals.markers.size=Array.isArray(t.config.markers.size)?t.config.markers.size:[t.config.markers.size],t.globals.markers.size.length>0){if(t.globals.markers.size.length<t.globals.series.length+1)for(var e=0;e<=t.globals.series.length;e++)void 0===t.globals.markers.size[e]&&t.globals.markers.size.push(t.globals.markers.size[0])}else t.globals.markers.size=t.config.series.map((function(e){return t.config.markers.size}))}},{key:"plotChartMarkers",value:function(t,e,i,a){var s,r=arguments.length>4&&void 0!==arguments[4]&&arguments[4],n=this.w,o=e,l=t,h=null,c=new p(this.ctx);if((n.globals.markers.size[e]>0||r)&&(h=c.group({class:r?"":"apexcharts-series-markers"})).attr("clip-path","url(#gridRectMarkerMask".concat(n.globals.cuid,")")),l.x instanceof Array)for(var d=0;d<l.x.length;d++){var f=i;1===i&&0===d&&(f=0),1===i&&1===d&&(f=1);var x="apexcharts-marker";"line"!==n.config.chart.type&&"area"!==n.config.chart.type||n.globals.comboCharts||n.config.tooltip.intersect||(x+=" no-pointer-events");var b=Array.isArray(n.config.markers.size)?n.globals.markers.size[e]>0:n.config.markers.size>0;if(b||r){g.isNumber(l.y[d])?x+=" w".concat(g.randomId()):x="apexcharts-nullpoint";var m=this.getMarkerConfig(x,e,f);n.config.series[o].data[i]&&(n.config.series[o].data[i].fillColor&&(m.pointFillColor=n.config.series[o].data[i].fillColor),n.config.series[o].data[i].strokeColor&&(m.pointStrokeColor=n.config.series[o].data[i].strokeColor)),a&&(m.pSize=a),(s=c.drawMarker(l.x[d],l.y[d],m)).attr("rel",f),s.attr("j",f),s.attr("index",e),s.node.setAttribute("default-marker-size",m.pSize);var v=new u(this.ctx);v.setSelectionFilter(s,e,f),this.addEvents(s),h&&h.add(s)}else void 0===n.globals.pointsArray[e]&&(n.globals.pointsArray[e]=[]),n.globals.pointsArray[e].push([l.x[d],l.y[d]])}return h}},{key:"getMarkerConfig",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,a=this.w,s=this.getMarkerStyle(e),r=a.globals.markers.size[e],n=a.config.markers;return null!==i&&n.discrete.length&&n.discrete.map((function(t){t.seriesIndex===e&&t.dataPointIndex===i&&(s.pointStrokeColor=t.strokeColor,s.pointFillColor=t.fillColor,r=t.size)})),{pSize:r,pRadius:n.radius,pWidth:n.strokeWidth instanceof Array?n.strokeWidth[e]:n.strokeWidth,pointStrokeColor:s.pointStrokeColor,pointFillColor:s.pointFillColor,shape:n.shape instanceof Array?n.shape[e]:n.shape,class:t,pointStrokeOpacity:n.strokeOpacity instanceof Array?n.strokeOpacity[e]:n.strokeOpacity,pointStrokeDashArray:n.strokeDashArray instanceof Array?n.strokeDashArray[e]:n.strokeDashArray,pointFillOpacity:n.fillOpacity instanceof Array?n.fillOpacity[e]:n.fillOpacity,seriesIndex:e}}},{key:"addEvents",value:function(t){var e=this.w,i=new p(this.ctx);t.node.addEventListener("mouseenter",i.pathMouseEnter.bind(this.ctx,t)),t.node.addEventListener("mouseleave",i.pathMouseLeave.bind(this.ctx,t)),t.node.addEventListener("mousedown",i.pathMouseDown.bind(this.ctx,t)),t.node.addEventListener("click",e.config.markers.onClick),t.node.addEventListener("dblclick",e.config.markers.onDblClick),t.node.addEventListener("touchstart",i.pathMouseDown.bind(this.ctx,t),{passive:!0})}},{key:"getMarkerStyle",value:function(t){var e=this.w,i=e.globals.markers.colors,a=e.config.markers.strokeColor||e.config.markers.strokeColors;return{pointStrokeColor:a instanceof Array?a[t]:a,pointFillColor:i instanceof Array?i[t]:i}}}]),t}(),T=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.initialAnim=this.w.config.chart.animations.enabled,this.dynamicAnim=this.initialAnim&&this.w.config.chart.animations.dynamicAnimation.enabled}return a(t,[{key:"draw",value:function(t,e,i){var a=this.w,s=new p(this.ctx),r=i.realIndex,n=i.pointsPos,o=i.zRatio,l=i.elParent,h=s.group({class:"apexcharts-series-markers apexcharts-series-".concat(a.config.chart.type)});if(h.attr("clip-path","url(#gridRectMarkerMask".concat(a.globals.cuid,")")),n.x instanceof Array)for(var c=0;c<n.x.length;c++){var d=e+1,g=!0;0===e&&0===c&&(d=0),0===e&&1===c&&(d=1);var u=0,f=a.globals.markers.size[r];if(o!==1/0){f=a.globals.seriesZ[r][d]/o;var x=a.config.plotOptions.bubble;x.minBubbleRadius&&f<x.minBubbleRadius&&(f=x.minBubbleRadius),x.maxBubbleRadius&&f>x.maxBubbleRadius&&(f=x.maxBubbleRadius)}a.config.chart.animations.enabled||(u=f);var b=n.x[c],m=n.y[c];if(u=u||0,null!==m&&void 0!==a.globals.series[r][d]||(g=!1),g){var v=this.drawPoint(b,m,u,f,r,d,e);h.add(v)}l.add(h)}}},{key:"drawPoint",value:function(t,e,i,a,s,r,n){var o=this.w,l=s,h=new f(this.ctx),c=new u(this.ctx),d=new L(this.ctx),g=new P(this.ctx),x=new p(this.ctx),b=g.getMarkerConfig("apexcharts-marker",l),m=d.fillPath({seriesNumber:s,dataPointIndex:r,patternUnits:"objectBoundingBox",value:o.globals.series[s][n]}),v=x.drawCircle(i);if(o.config.series[l].data[r]&&o.config.series[l].data[r].fillColor&&(m=o.config.series[l].data[r].fillColor),v.attr({cx:t,cy:e,fill:m,stroke:b.pointStrokeColor,"stroke-width":b.pWidth,"stroke-dasharray":b.pointStrokeDashArray,"stroke-opacity":b.pointStrokeOpacity}),o.config.chart.dropShadow.enabled){var y=o.config.chart.dropShadow;c.dropShadow(v,y,s)}if(this.initialAnim&&!o.globals.dataChanged){var w=1;o.globals.resized||(w=o.config.chart.animations.speed),h.animateCircleRadius(v,0,a,w,o.globals.easing,(function(){window.setTimeout((function(){h.animationCompleted(v)}),100)}))}if(o.globals.dataChanged)if(this.dynamicAnim){var k,A,S,C,T=o.config.chart.animations.dynamicAnimation.speed;null!=(C=o.globals.previousPaths[s]&&o.globals.previousPaths[s][n])&&(k=C.x,A=C.y,S=void 0!==C.r?C.r:a);for(var z=0;z<o.globals.collapsedSeries.length;z++)o.globals.collapsedSeries[z].index===s&&(T=1,a=0);0===t&&0===e&&(a=0),h.animateCircle(v,{cx:k,cy:A,r:S},{cx:t,cy:e,r:a},T,o.globals.easing)}else v.attr({r:a});return v.attr({rel:r,j:r,index:s,"default-marker-size":a}),c.setSelectionFilter(v,s,r),g.addEvents(v),v.node.classList.add("apexcharts-marker"),v}},{key:"centerTextInBubble",value:function(t){var e=this.w;return{y:t+=parseInt(e.config.dataLabels.style.fontSize,10)/4}}}]),t}(),z=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"dataLabelsCorrection",value:function(t,e,i,a,s,r,n){var o=this.w,l=!1,h=new p(this.ctx).getTextRects(i,n),c=h.width,d=h.height;void 0===o.globals.dataLabelsRects[a]&&(o.globals.dataLabelsRects[a]=[]),o.globals.dataLabelsRects[a].push({x:t,y:e,width:c,height:d});var g=o.globals.dataLabelsRects[a].length-2,u=void 0!==o.globals.lastDrawnDataLabelsIndexes[a]?o.globals.lastDrawnDataLabelsIndexes[a][o.globals.lastDrawnDataLabelsIndexes[a].length-1]:0;if(void 0!==o.globals.dataLabelsRects[a][g]){var f=o.globals.dataLabelsRects[a][u];(t>f.x+f.width+2||e>f.y+f.height+2||t+c<f.x)&&(l=!0)}return(0===s||r)&&(l=!0),{x:t,y:e,textRects:h,drawnextLabel:l}}},{key:"drawDataLabel",value:function(t,e,i){var a=this,s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:2,r=this.w,n=new p(this.ctx),o=r.config.dataLabels,l=0,h=0,c=i,d=null;if(!o.enabled||t.x instanceof Array!=!0)return d;d=n.group({class:"apexcharts-data-labels"});for(var g=0;g<t.x.length;g++)if(l=t.x[g]+o.offsetX,h=t.y[g]+o.offsetY+s,!isNaN(l)){1===i&&0===g&&(c=0),1===i&&1===g&&(c=1);var u=r.globals.series[e][c],f="",x=function(t){return r.config.dataLabels.formatter(t,{ctx:a.ctx,seriesIndex:e,dataPointIndex:c,w:r})};if("bubble"===r.config.chart.type){f=x(u=r.globals.seriesZ[e][c]),h=t.y[g];var b=new T(this.ctx),m=b.centerTextInBubble(h,e,c);h=m.y}else void 0!==u&&(f=x(u));this.plotDataLabelsText({x:l,y:h,text:f,i:e,j:c,parent:d,offsetCorrection:!0,dataLabelsConfig:r.config.dataLabels})}return d}},{key:"plotDataLabelsText",value:function(t){var e=this.w,i=new p(this.ctx),a=t.x,s=t.y,r=t.i,n=t.j,o=t.text,l=t.textAnchor,h=t.parent,c=t.dataLabelsConfig,d=t.color,g=t.alwaysDrawDataLabel,f=t.offsetCorrection;if(!(Array.isArray(e.config.dataLabels.enabledOnSeries)&&e.config.dataLabels.enabledOnSeries.indexOf(r)<0)){var x={x:a,y:s,drawnextLabel:!0};f&&(x=this.dataLabelsCorrection(a,s,o,r,n,g,parseInt(c.style.fontSize,10))),e.globals.zoomed||(a=x.x,s=x.y),x.textRects&&(a+x.textRects.width<-20||a>e.globals.gridWidth+20)&&(o="");var b=e.globals.dataLabels.style.colors[r];(("bar"===e.config.chart.type||"rangeBar"===e.config.chart.type)&&e.config.plotOptions.bar.distributed||e.config.dataLabels.distributed)&&(b=e.globals.dataLabels.style.colors[n]),d&&(b=d);var m=c.offsetX,v=c.offsetY;if("bar"!==e.config.chart.type&&"rangeBar"!==e.config.chart.type||(m=0,v=0),x.drawnextLabel){var y=i.drawText({width:100,height:parseInt(c.style.fontSize,10),x:a+m,y:s+v,foreColor:b,textAnchor:l||c.textAnchor,text:o,fontSize:c.style.fontSize,fontFamily:c.style.fontFamily,fontWeight:c.style.fontWeight||"normal"});if(y.attr({class:"apexcharts-datalabel",cx:a,cy:s}),c.dropShadow.enabled){var w=c.dropShadow;new u(this.ctx).dropShadow(y,w)}h.add(y),void 0===e.globals.lastDrawnDataLabelsIndexes[r]&&(e.globals.lastDrawnDataLabelsIndexes[r]=[]),e.globals.lastDrawnDataLabelsIndexes[r].push(n)}}}},{key:"addBackgroundToDataLabel",value:function(t,e){var i=this.w,a=i.config.dataLabels.background,s=a.padding,r=a.padding/2,n=e.width,o=e.height,l=new p(this.ctx).drawRect(e.x-s,e.y-r/2,n+2*s,o+r,a.borderRadius,"transparent"===i.config.chart.background?"#fff":i.config.chart.background,a.opacity,a.borderWidth,a.borderColor);a.dropShadow.enabled&&new u(this.ctx).dropShadow(l,a.dropShadow);return l}},{key:"dataLabelsBackground",value:function(){var t=this.w;if("bubble"!==t.config.chart.type)for(var e=t.globals.dom.baseEl.querySelectorAll(".apexcharts-datalabels text"),i=0;i<e.length;i++){var a=e[i],s=a.getBBox(),r=null;if(s.width&&s.height&&(r=this.addBackgroundToDataLabel(a,s)),r){a.parentNode.insertBefore(r.node,a);var n=a.getAttribute("fill");t.config.chart.animations.enabled&&!t.globals.resized&&!t.globals.dataChanged?r.animate().attr({fill:n}):r.attr({fill:n}),a.setAttribute("fill",t.config.dataLabels.background.foreColor)}}}},{key:"bringForward",value:function(){for(var t=this.w,e=t.globals.dom.baseEl.getElementsByClassName("apexcharts-datalabels"),i=t.globals.dom.baseEl.querySelector(".apexcharts-plot-series:last-child"),a=0;a<e.length;a++)i&&i.insertBefore(e[a],i.nextSibling)}}]),t}(),I=function(){function t(i){e(this,t),this.w=i.w,this.barCtx=i}return a(t,[{key:"handleBarDataLabels",value:function(t){var e=t.x,i=t.y,a=t.y1,s=t.y2,r=t.i,n=t.j,o=t.realIndex,l=t.series,h=t.barHeight,c=t.barWidth,d=t.barYPosition,g=t.visibleSeries,u=t.renderedPath,f=this.w,x=new p(this.barCtx.ctx),b=Array.isArray(this.barCtx.strokeWidth)?this.barCtx.strokeWidth[o]:this.barCtx.strokeWidth,m=e+parseFloat(c*g),v=i+parseFloat(h*g);f.globals.isXNumeric&&!f.globals.isBarHorizontal&&(m=e+parseFloat(c*(g+1)),v=i+parseFloat(h*(g+1))-b);var y=e,w=i,k={},A=f.config.dataLabels,S=this.barCtx.barOptions.dataLabels;void 0!==d&&this.barCtx.isTimelineBar&&(v=d,w=d);var C=A.offsetX,L=A.offsetY,P={width:0,height:0};f.config.dataLabels.enabled&&(P=x.getTextRects(f.globals.yLabelFormatters[0](f.globals.maxY),parseFloat(A.style.fontSize)));var T={x:e,y:i,i:r,j:n,renderedPath:u,bcx:m,bcy:v,barHeight:h,barWidth:c,textRects:P,strokeWidth:b,dataLabelsX:y,dataLabelsY:w,barDataLabelsConfig:S,offX:C,offY:L};return k=this.barCtx.isHorizontal?this.calculateBarsDataLabelsPosition(T):this.calculateColumnsDataLabelsPosition(T),u.attr({cy:k.bcy,cx:k.bcx,j:n,val:l[r][n],barHeight:h,barWidth:c}),this.drawCalculatedDataLabels({x:k.dataLabelsX,y:k.dataLabelsY,val:this.barCtx.isTimelineBar?[a,s]:l[r][n],i:o,j:n,barWidth:c,barHeight:h,textRects:P,dataLabelsConfig:A})}},{key:"calculateColumnsDataLabelsPosition",value:function(t){var e,i=this.w,a=t.i,s=t.j,r=t.y,n=t.bcx,o=t.barWidth,l=t.barHeight,h=t.textRects,c=t.dataLabelsY,d=t.barDataLabelsConfig,g=t.strokeWidth,u=t.offX,f=t.offY;l=Math.abs(l);var p="vertical"===i.config.plotOptions.bar.dataLabels.orientation;n-=g/2;var x=i.globals.gridWidth/i.globals.dataPoints;if(e=i.globals.isXNumeric?n-o/2+u:n-x+o/2+u,p){e=e+h.height/2-g/2-2}var b=this.barCtx.series[a][s]<0;switch(this.barCtx.isReversed&&(r-=l),d.position){case"center":c=p?b?r+l/2+f:r+l/2-f:b?r+l/2+h.height/2+f:r+l/2+h.height/2-f;break;case"bottom":c=p?b?r+l+f:r+l-f:b?r+l+h.height+g+f:r+l-h.height/2+g-f;break;case"top":c=p?b?r+f:r-f:b?r-h.height/2-f:r+h.height+f}return i.config.chart.stacked||(c<0?c=0+g:c+h.height/3>i.globals.gridHeight&&(c=i.globals.gridHeight-g)),{bcx:n,bcy:r,dataLabelsX:e,dataLabelsY:c}}},{key:"calculateBarsDataLabelsPosition",value:function(t){var e=this.w,i=t.x,a=t.i,s=t.j,r=t.bcy,n=t.barHeight,o=t.barWidth,l=t.textRects,h=t.dataLabelsX,c=t.strokeWidth,d=t.barDataLabelsConfig,g=t.offX,u=t.offY,f=e.globals.gridHeight/e.globals.dataPoints;o=Math.abs(o);var p=r-(this.barCtx.isTimelineBar?0:f)+n/2+l.height/2+u-3,x=this.barCtx.series[a][s]<0,b=i;switch(this.barCtx.isReversed&&(b=i+o,i=e.globals.gridWidth-o),d.position){case"center":h=x?b-o/2-g:b-o/2+g;break;case"bottom":h=x?b+o-c-Math.round(l.width/2)-g:b-o+c+Math.round(l.width/2)+g;break;case"top":h=x?b-c+Math.round(l.width/2)-g:b-c-Math.round(l.width/2)+g}return e.config.chart.stacked||(h<0?h=h+l.width+c:h+l.width/2>e.globals.gridWidth&&(h=e.globals.gridWidth-l.width-c)),{bcx:i,bcy:r,dataLabelsX:h,dataLabelsY:p}}},{key:"drawCalculatedDataLabels",value:function(t){var e=t.x,i=t.y,a=t.val,s=t.i,r=t.j,o=t.textRects,l=t.barHeight,h=t.barWidth,c=t.dataLabelsConfig,d=this.w,g="rotate(0)";"vertical"===d.config.plotOptions.bar.dataLabels.orientation&&(g="rotate(-90, ".concat(e,", ").concat(i,")"));var u=new z(this.barCtx.ctx),f=new p(this.barCtx.ctx),x=c.formatter,b=null,m=d.globals.collapsedSeriesIndices.indexOf(s)>-1;if(c.enabled&&!m){b=f.group({class:"apexcharts-data-labels",transform:g});var v="";void 0!==a&&(v=x(a,{seriesIndex:s,dataPointIndex:r,w:d})),0===a&&d.config.chart.stacked&&(v="");var y=d.globals.series[s][r]<=0,w=d.config.plotOptions.bar.dataLabels.position;if("vertical"===d.config.plotOptions.bar.dataLabels.orientation&&("top"===w&&(c.textAnchor=y?"end":"start"),"center"===w&&(c.textAnchor="middle"),"bottom"===w&&(c.textAnchor=y?"end":"start")),this.barCtx.isTimelineBar&&this.barCtx.barOptions.dataLabels.hideOverflowingLabels)h<f.getTextRects(v,parseFloat(c.style.fontSize)).width&&(v="");d.config.chart.stacked&&this.barCtx.barOptions.dataLabels.hideOverflowingLabels&&(this.barCtx.isHorizontal?((h=Math.abs(d.globals.series[s][r])/this.barCtx.invertedYRatio[this.barCtx.yaxisIndex])>0&&o.width/1.6>h||h<0&&o.width/1.6<h)&&(v=""):(l=Math.abs(d.globals.series[s][r])/this.barCtx.yRatio[this.barCtx.yaxisIndex],o.height/1.6>l&&(v="")));var k=n({},c);this.barCtx.isHorizontal&&a<0&&("start"===c.textAnchor?k.textAnchor="end":"end"===c.textAnchor&&(k.textAnchor="start")),u.plotDataLabelsText({x:e,y:i,text:v,i:s,j:r,parent:b,dataLabelsConfig:k,alwaysDrawDataLabel:!0,offsetCorrection:!0})}return b}}]),t}(),M=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.legendInactiveClass="legend-mouseover-inactive"}return a(t,[{key:"getAllSeriesEls",value:function(){return this.w.globals.dom.baseEl.getElementsByClassName("apexcharts-series")}},{key:"getSeriesByName",value:function(t){return this.w.globals.dom.baseEl.querySelector("[seriesName='".concat(g.escapeString(t),"']"))}},{key:"isSeriesHidden",value:function(t){var e=this.getSeriesByName(t),i=parseInt(e.getAttribute("data:realIndex"),10);return{isHidden:e.classList.contains("apexcharts-series-collapsed"),realIndex:i}}},{key:"addCollapsedClassToSeries",value:function(t,e){var i=this.w;function a(i){for(var a=0;a<i.length;a++)i[a].index===e&&t.node.classList.add("apexcharts-series-collapsed")}a(i.globals.collapsedSeries),a(i.globals.ancillaryCollapsedSeries)}},{key:"toggleSeries",value:function(t){var e=this.isSeriesHidden(t);return this.ctx.legend.legendHelpers.toggleDataSeries(e.realIndex,e.isHidden),e.isHidden}},{key:"showSeries",value:function(t){var e=this.isSeriesHidden(t);e.isHidden&&this.ctx.legend.legendHelpers.toggleDataSeries(e.realIndex,!0)}},{key:"hideSeries",value:function(t){var e=this.isSeriesHidden(t);e.isHidden||this.ctx.legend.legendHelpers.toggleDataSeries(e.realIndex,!1)}},{key:"resetSeries",value:function(){var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],a=this.w,s=a.globals.initialSeries.slice();a.config.series=s,a.globals.previousPaths=[],i&&(a.globals.collapsedSeries=[],a.globals.ancillaryCollapsedSeries=[],a.globals.collapsedSeriesIndices=[],a.globals.ancillaryCollapsedSeriesIndices=[]),t&&(e&&(a.globals.zoomed=!1,this.ctx.updateHelpers.revertDefaultAxisMinMax()),this.ctx.updateHelpers._updateSeries(s,a.config.chart.animations.dynamicAnimation.enabled))}},{key:"toggleSeriesOnHover",value:function(t,e){var i=this.w,a=i.globals.dom.baseEl.querySelectorAll(".apexcharts-series, .apexcharts-datalabels");if("mousemove"===t.type){var s=parseInt(e.getAttribute("rel"),10)-1,r=null,n=null;i.globals.axisCharts||"radialBar"===i.config.chart.type?i.globals.axisCharts?(r=i.globals.dom.baseEl.querySelector(".apexcharts-series[data\\:realIndex='".concat(s,"']")),n=i.globals.dom.baseEl.querySelector(".apexcharts-datalabels[data\\:realIndex='".concat(s,"']"))):r=i.globals.dom.baseEl.querySelector(".apexcharts-series[rel='".concat(s+1,"']")):r=i.globals.dom.baseEl.querySelector(".apexcharts-series[rel='".concat(s+1,"'] path"));for(var o=0;o<a.length;o++)a[o].classList.add(this.legendInactiveClass);null!==r&&(i.globals.axisCharts||r.parentNode.classList.remove(this.legendInactiveClass),r.classList.remove(this.legendInactiveClass),null!==n&&n.classList.remove(this.legendInactiveClass))}else if("mouseout"===t.type)for(var l=0;l<a.length;l++)a[l].classList.remove(this.legendInactiveClass)}},{key:"highlightRangeInSeries",value:function(t,e){var i=this,a=this.w,s=a.globals.dom.baseEl.getElementsByClassName("apexcharts-heatmap-rect"),r=function(t){for(var e=0;e<s.length;e++)s[e].classList[t](i.legendInactiveClass)};if("mousemove"===t.type){var n=parseInt(e.getAttribute("rel"),10)-1;r("add"),function(t){for(var e=0;e<s.length;e++){var a=parseInt(s[e].getAttribute("val"),10);a>=t.from&&a<=t.to&&s[e].classList.remove(i.legendInactiveClass)}}(a.config.plotOptions.heatmap.colorScale.ranges[n])}else"mouseout"===t.type&&r("remove")}},{key:"getActiveConfigSeriesIndex",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=this.w,i=0;if(e.config.series.length>1)for(var a=e.config.series.map((function(i,a){var s=!1;return t&&(s="bar"===e.config.series[a].type||"column"===e.config.series[a].type),i.data&&i.data.length>0&&!s?a:-1})),s=0;s<a.length;s++)if(-1!==a[s]){i=a[s];break}return i}},{key:"getPreviousPaths",value:function(){var t=this.w;function e(e,i,a){for(var s=e[i].childNodes,r={type:a,paths:[],realIndex:e[i].getAttribute("data:realIndex")},n=0;n<s.length;n++)if(s[n].hasAttribute("pathTo")){var o=s[n].getAttribute("pathTo");r.paths.push({d:o})}t.globals.previousPaths.push(r)}t.globals.previousPaths=[];["line","area","bar","candlestick","radar"].forEach((function(i){for(var a,s=(a=i,t.globals.dom.baseEl.querySelectorAll(".apexcharts-".concat(a,"-series .apexcharts-series"))),r=0;r<s.length;r++)e(s,r,i)})),this.handlePrevBubbleScatterPaths("bubble"),this.handlePrevBubbleScatterPaths("scatter");var i=t.globals.dom.baseEl.querySelectorAll(".apexcharts-heatmap .apexcharts-series");if(i.length>0)for(var a=0;a<i.length;a++){for(var s=t.globals.dom.baseEl.querySelectorAll(".apexcharts-heatmap .apexcharts-series[data\\:realIndex='".concat(a,"'] rect")),r=[],n=0;n<s.length;n++)r.push({color:s[n].getAttribute("color")});t.globals.previousPaths.push(r)}t.globals.axisCharts||(t.globals.previousPaths=t.globals.series)}},{key:"handlePrevBubbleScatterPaths",value:function(t){var e=this.w,i=e.globals.dom.baseEl.querySelectorAll(".apexcharts-".concat(t,"-series .apexcharts-series"));if(i.length>0)for(var a=0;a<i.length;a++){for(var s=e.globals.dom.baseEl.querySelectorAll(".apexcharts-".concat(t,"-series .apexcharts-series[data\\:realIndex='").concat(a,"'] circle")),r=[],n=0;n<s.length;n++)r.push({x:s[n].getAttribute("cx"),y:s[n].getAttribute("cy"),r:s[n].getAttribute("r")});e.globals.previousPaths.push(r)}}},{key:"clearPreviousPaths",value:function(){var t=this.w;t.globals.previousPaths=[],t.globals.allSeriesCollapsed=!1}},{key:"handleNoData",value:function(){var t=this.w,e=t.config.noData,i=new p(this.ctx),a=t.globals.svgWidth/2,s=t.globals.svgHeight/2,r="middle";if(t.globals.noData=!0,t.globals.animationEnded=!0,"left"===e.align?(a=10,r="start"):"right"===e.align&&(a=t.globals.svgWidth-10,r="end"),"top"===e.verticalAlign?s=50:"bottom"===e.verticalAlign&&(s=t.globals.svgHeight-50),a+=e.offsetX,s=s+parseInt(e.style.fontSize,10)+2+e.offsetY,void 0!==e.text&&""!==e.text){var n=i.drawText({x:a,y:s,text:e.text,textAnchor:r,fontSize:e.style.fontSize,fontFamily:e.style.fontFamily,foreColor:e.style.color,opacity:1,class:"apexcharts-text-nodata"});t.globals.dom.Paper.add(n)}}},{key:"setNullSeriesToZeroValues",value:function(t){for(var e=this.w,i=0;i<t.length;i++)if(0===t[i].length)for(var a=0;a<t[e.globals.maxValsInArrayIndex].length;a++)t[i].push(0);return t}},{key:"hasAllSeriesEqualX",value:function(){for(var t=!0,e=this.w,i=this.filteredSeriesX(),a=0;a<i.length-1;a++)if(i[a][0]!==i[a+1][0]){t=!1;break}return e.globals.allSeriesHasEqualX=t,t}},{key:"filteredSeriesX",value:function(){var t=this.w.globals.seriesX.map((function(t){return t.length>0?t:[]}));return t}}]),t}(),X=function(){function t(i){e(this,t),this.w=i.w,this.barCtx=i}return a(t,[{key:"initVariables",value:function(t){var e=this.w;this.barCtx.series=t,this.barCtx.totalItems=0,this.barCtx.seriesLen=0,this.barCtx.visibleI=-1,this.barCtx.visibleItems=1;for(var i=0;i<t.length;i++)if(t[i].length>0&&(this.barCtx.seriesLen=this.barCtx.seriesLen+1,this.barCtx.totalItems+=t[i].length),e.globals.isXNumeric)for(var a=0;a<t[i].length;a++)e.globals.seriesX[i][a]>e.globals.minX&&e.globals.seriesX[i][a]<e.globals.maxX&&this.barCtx.visibleItems++;else this.barCtx.visibleItems=e.globals.dataPoints;0===this.barCtx.seriesLen&&(this.barCtx.seriesLen=1)}},{key:"initialPositions",value:function(){var t,e,i,a,s,r,n,o,l=this.w,h=l.globals.dataPoints;if(this.barCtx.isTimelineBar&&(h=l.globals.labels.length),this.barCtx.isHorizontal)s=(i=l.globals.gridHeight/h)/this.barCtx.seriesLen,l.globals.isXNumeric&&(s=(i=l.globals.gridHeight/this.barCtx.totalItems)/this.barCtx.seriesLen),s=s*parseInt(this.barCtx.barOptions.barHeight,10)/100,o=this.barCtx.baseLineInvertedY+l.globals.padHorizontal+(this.barCtx.isReversed?l.globals.gridWidth:0)-(this.barCtx.isReversed?2*this.barCtx.baseLineInvertedY:0),e=(i-s*this.barCtx.seriesLen)/2;else{if(a=l.globals.gridWidth/this.barCtx.visibleItems,l.config.xaxis.convertedCatToNumeric&&(a=l.globals.gridWidth/l.globals.dataPoints),r=a/this.barCtx.seriesLen*parseInt(this.barCtx.barOptions.columnWidth,10)/100,l.globals.isXNumeric){var c=this.barCtx.xRatio;l.config.xaxis.convertedCatToNumeric&&(c=this.barCtx.initialXRatio),l.globals.minXDiff&&l.globals.minXDiff/c>0&&(a=l.globals.minXDiff/c),(r=a/this.barCtx.seriesLen*parseInt(this.barCtx.barOptions.columnWidth,10)/100)<1&&(r=1)}n=l.globals.gridHeight-this.barCtx.baseLineY[this.barCtx.yaxisIndex]-(this.barCtx.isReversed?l.globals.gridHeight:0)+(this.barCtx.isReversed?2*this.barCtx.baseLineY[this.barCtx.yaxisIndex]:0),t=l.globals.padHorizontal+(a-r*this.barCtx.seriesLen)/2}return{x:t,y:e,yDivision:i,xDivision:a,barHeight:s,barWidth:r,zeroH:n,zeroW:o}}},{key:"getPathFillColor",value:function(t,e,i,a){var s=this.w,r=new L(this.barCtx.ctx),n=null,o=this.barCtx.barOptions.distributed?i:e;this.barCtx.barOptions.colors.ranges.length>0&&this.barCtx.barOptions.colors.ranges.map((function(a){t[e][i]>=a.from&&t[e][i]<=a.to&&(n=a.color)}));return s.config.series[e].data[i]&&s.config.series[e].data[i].fillColor&&(n=s.config.series[e].data[i].fillColor),r.fillPath({seriesNumber:this.barCtx.barOptions.distributed?o:a,dataPointIndex:i,color:n,value:t[e][i]})}},{key:"getStrokeWidth",value:function(t,e,i){var a=0,s=this.w;return void 0===this.barCtx.series[t][e]||null===this.barCtx.series[t][e]?this.barCtx.isNullValue=!0:this.barCtx.isNullValue=!1,s.config.stroke.show&&(this.barCtx.isNullValue||(a=Array.isArray(this.barCtx.strokeWidth)?this.barCtx.strokeWidth[i]:this.barCtx.strokeWidth)),a}},{key:"barBackground",value:function(t){var e=t.bc,i=t.i,a=t.x1,s=t.x2,r=t.y1,n=t.y2,o=t.elSeries,l=this.w,h=new p(this.barCtx.ctx),c=new M(this.barCtx.ctx).getActiveConfigSeriesIndex();if(this.barCtx.barOptions.colors.backgroundBarColors.length>0&&c===i){e>=this.barCtx.barOptions.colors.backgroundBarColors.length&&(e=0);var d=this.barCtx.barOptions.colors.backgroundBarColors[e],g=h.drawRect(void 0!==a?a:0,void 0!==r?r:0,void 0!==s?s:l.globals.gridWidth,void 0!==n?n:l.globals.gridHeight,this.barCtx.barOptions.colors.backgroundBarRadius,d,this.barCtx.barOptions.colors.backgroundBarOpacity);o.add(g),g.node.classList.add("apexcharts-backgroundBar")}}},{key:"getColumnPaths",value:function(t){var e=t.barWidth,i=t.barXPosition,a=t.yRatio,s=t.y1,r=t.y2,n=t.strokeWidth,o=t.series,l=t.realIndex,h=t.i,c=t.j,d=t.w,g=new p(this.barCtx.ctx);(n=Array.isArray(n)?n[l]:n)||(n=0);var u={barWidth:e,strokeWidth:n,yRatio:a,barXPosition:i,y1:s,y2:r},f=this.getRoundedBars(d,u,o,h,c),x=i,b=i+e,m=g.move(x,f.y1),v=g.move(x,f.y1);return d.globals.previousPaths.length>0&&(v=this.barCtx.getPreviousPath(l,c,!1)),{pathTo:m=m+g.line(x,f.y2)+f.endingPath+g.line(b-n,f.y2)+g.line(b-n,f.y1)+f.startingPath+"z",pathFrom:v=v+g.line(x,s)+g.line(b-n,s)+g.line(b-n,s)+g.line(b-n,s)+g.line(x,s)}}},{key:"getBarpaths",value:function(t){var e=t.barYPosition,i=t.barHeight,a=t.x1,s=t.x2,r=t.strokeWidth,n=t.series,o=t.realIndex,l=t.i,h=t.j,c=t.w,d=new p(this.barCtx.ctx);(r=Array.isArray(r)?r[o]:r)||(r=0);var g={barHeight:i,strokeWidth:r,barYPosition:e,x2:s,x1:a},u=this.getRoundedBars(c,g,n,l,h),f=d.move(u.x1,e),x=d.move(u.x1,e);c.globals.previousPaths.length>0&&(x=this.barCtx.getPreviousPath(o,h,!1));var b=e,m=e+i;return{pathTo:f=f+d.line(u.x2,b)+u.endingPath+d.line(u.x2,m-r)+d.line(u.x1,m-r)+u.startingPath+"z",pathFrom:x=x+d.line(a,b)+d.line(a,m-r)+d.line(a,m-r)+d.line(a,m-r)+d.line(a,b)}}},{key:"getRoundedBars",value:function(t,e,i,a,s){var r=new p(this.barCtx.ctx),n=Array.isArray(e.strokeWidth)?e.strokeWidth[a]:e.strokeWidth;if(n||(n=0),this.barCtx.isHorizontal){var o=null,l="",h=e.x2,c=e.x1;if(void 0!==i[a][s]||null!==i[a][s]){var d=i[a][s]<0,g=e.barHeight/2-n;switch(d&&(g=-e.barHeight/2-n),g>Math.abs(h-c)&&(g=Math.abs(h-c)),"rounded"===this.barCtx.barOptions.endingShape&&(h=e.x2-g/2),"rounded"===this.barCtx.barOptions.startingShape&&(c=e.x1+g/2),this.barCtx.barOptions.endingShape){case"flat":o=r.line(h,e.barYPosition+e.barHeight-n);break;case"rounded":o=r.quadraticCurve(h+g,e.barYPosition+(e.barHeight-n)/2,h,e.barYPosition+e.barHeight-n)}switch(this.barCtx.barOptions.startingShape){case"flat":l=r.line(c,e.barYPosition+e.barHeight-n);break;case"rounded":l=r.quadraticCurve(c-g,e.barYPosition+e.barHeight/2,c,e.barYPosition)}}return{endingPath:o,startingPath:l,x2:h,x1:c}}var u=null,f="",x=e.y2,b=e.y1;if(void 0!==i[a][s]||null!==i[a][s]){var m=i[a][s]<0,v=e.barWidth/2-n;switch(m&&(v=-e.barWidth/2-n),v>Math.abs(x-b)&&(v=Math.abs(x-b)),"rounded"===this.barCtx.barOptions.endingShape&&(x+=v/2),"rounded"===this.barCtx.barOptions.startingShape&&(b-=v/2),this.barCtx.barOptions.endingShape){case"flat":u=r.line(e.barXPosition+e.barWidth-n,x);break;case"rounded":u=r.quadraticCurve(e.barXPosition+(e.barWidth-n)/2,x-v,e.barXPosition+e.barWidth-n,x)}switch(this.barCtx.barOptions.startingShape){case"flat":f=r.line(e.barXPosition+e.barWidth-n,b);break;case"rounded":f=r.quadraticCurve(e.barXPosition+(e.barWidth-n)/2,b+v,e.barXPosition,b)}}return{endingPath:u,startingPath:f,y2:x,y1:b}}}]),t}(),E=function(){function t(i,a){e(this,t),this.ctx=i,this.w=i.w;var s=this.w;this.barOptions=s.config.plotOptions.bar,this.isHorizontal=this.barOptions.horizontal,this.strokeWidth=s.config.stroke.width,this.isNullValue=!1,this.isTimelineBar="datetime"===s.config.xaxis.type&&s.globals.seriesRangeBarTimeline.length,this.xyRatios=a,null!==this.xyRatios&&(this.xRatio=a.xRatio,this.initialXRatio=a.initialXRatio,this.yRatio=a.yRatio,this.invertedXRatio=a.invertedXRatio,this.invertedYRatio=a.invertedYRatio,this.baseLineY=a.baseLineY,this.baseLineInvertedY=a.baseLineInvertedY),this.yaxisIndex=0,this.seriesLen=0,this.barHelpers=new X(this)}return a(t,[{key:"draw",value:function(t,e){var i=this.w,a=new p(this.ctx),s=new m(this.ctx,i);t=s.getLogSeries(t),this.series=t,this.yRatio=s.getLogYRatios(this.yRatio),this.barHelpers.initVariables(t);var r=a.group({class:"apexcharts-bar-series apexcharts-plot-series"});i.config.dataLabels.enabled&&this.totalItems>this.barOptions.dataLabels.maxItems&&console.warn("WARNING: DataLabels are enabled but there are too many to display. This may cause performance issue when rendering.");for(var o=0,l=0;o<t.length;o++,l++){var h,c,d,u,f=void 0,x=void 0,b=[],v=[],y=i.globals.comboCharts?e[o]:o,w=a.group({class:"apexcharts-series",rel:o+1,seriesName:g.escapeString(i.globals.seriesNames[y]),"data:realIndex":y});this.ctx.series.addCollapsedClassToSeries(w,y),t[o].length>0&&(this.visibleI=this.visibleI+1);var k=0,A=0;this.yRatio.length>1&&(this.yaxisIndex=y),this.isReversed=i.config.yaxis[this.yaxisIndex]&&i.config.yaxis[this.yaxisIndex].reversed;var S=this.barHelpers.initialPositions();x=S.y,k=S.barHeight,c=S.yDivision,u=S.zeroW,f=S.x,A=S.barWidth,h=S.xDivision,d=S.zeroH,this.horizontal||v.push(f+A/2);for(var C=a.group({class:"apexcharts-datalabels","data:realIndex":y}),L=0;L<i.globals.dataPoints;L++){var P=this.barHelpers.getStrokeWidth(o,L,y),T=null,z={indexes:{i:o,j:L,realIndex:y,bc:l},x:f,y:x,strokeWidth:P,elSeries:w};this.isHorizontal?(T=this.drawBarPaths(n({},z,{barHeight:k,zeroW:u,yDivision:c})),A=this.series[o][L]/this.invertedYRatio):(T=this.drawColumnPaths(n({},z,{xDivision:h,barWidth:A,zeroH:d})),k=this.series[o][L]/this.yRatio[this.yaxisIndex]),x=T.y,f=T.x,L>0&&v.push(f+A/2),b.push(x);var I=this.barHelpers.getPathFillColor(t,o,L,y);this.renderSeries({realIndex:y,pathFill:I,j:L,i:o,pathFrom:T.pathFrom,pathTo:T.pathTo,strokeWidth:P,elSeries:w,x:f,y:x,series:t,barHeight:k,barWidth:A,elDataLabelsWrap:C,visibleSeries:this.visibleI,type:"bar"})}i.globals.seriesXvalues[y]=v,i.globals.seriesYvalues[y]=b,r.add(w)}return r}},{key:"renderSeries",value:function(t){var e=t.realIndex,i=t.pathFill,a=t.lineFill,s=t.j,r=t.i,n=t.pathFrom,o=t.pathTo,l=t.strokeWidth,h=t.elSeries,c=t.x,d=t.y,g=t.y1,f=t.y2,x=t.series,b=t.barHeight,m=t.barWidth,v=t.barYPosition,y=t.elDataLabelsWrap,w=t.visibleSeries,k=t.type,A=this.w,S=new p(this.ctx);a||(a=this.barOptions.distributed?A.globals.stroke.colors[s]:A.globals.stroke.colors[e]),A.config.series[r].data[s]&&A.config.series[r].data[s].strokeColor&&(a=A.config.series[r].data[s].strokeColor),this.isNullValue&&(i="none");var C=s/A.config.chart.animations.animateGradually.delay*(A.config.chart.animations.speed/A.globals.dataPoints)/2.4,L=S.renderPaths({i:r,j:s,realIndex:e,pathFrom:n,pathTo:o,stroke:a,strokeWidth:l,strokeLineCap:A.config.stroke.lineCap,fill:i,animationDelay:C,initialSpeed:A.config.chart.animations.speed,dataChangeSpeed:A.config.chart.animations.dynamicAnimation.speed,className:"apexcharts-".concat(k,"-area")});L.attr("clip-path","url(#gridRectMask".concat(A.globals.cuid,")")),void 0!==g&&void 0!==f&&(L.attr("data-range-y1",g),L.attr("data-range-y2",f)),new u(this.ctx).setSelectionFilter(L,e,s),h.add(L);var P=new I(this).handleBarDataLabels({x:c,y:d,y1:g,y2:f,i:r,j:s,series:x,realIndex:e,barHeight:b,barWidth:m,barYPosition:v,renderedPath:L,visibleSeries:w});return null!==P&&y.add(P),h.add(y),h}},{key:"drawBarPaths",value:function(t){var e=t.indexes,i=t.barHeight,a=t.strokeWidth,s=t.zeroW,r=t.x,n=t.y,o=t.yDivision,l=t.elSeries,h=this.w,c=e.i,d=e.j,g=e.bc;h.globals.isXNumeric&&(n=(h.globals.seriesX[c][d]-h.globals.minX)/this.invertedXRatio-i);var u=n+i*this.visibleI;r=void 0===this.series[c][d]||null===this.series[c][d]?s:s+this.series[c][d]/this.invertedYRatio-2*(this.isReversed?this.series[c][d]/this.invertedYRatio:0);var f=this.barHelpers.getBarpaths({barYPosition:u,barHeight:i,x1:s,x2:r,strokeWidth:a,series:this.series,realIndex:e.realIndex,i:c,j:d,w:h});return h.globals.isXNumeric||(n+=o),this.barHelpers.barBackground({bc:g,i:c,y1:u-i*this.visibleI,y2:i*this.seriesLen,elSeries:l}),{pathTo:f.pathTo,pathFrom:f.pathFrom,x:r,y:n,barYPosition:u}}},{key:"drawColumnPaths",value:function(t){var e=t.indexes,i=t.x,a=t.y,s=t.xDivision,r=t.barWidth,n=t.zeroH,o=t.strokeWidth,l=t.elSeries,h=this.w,c=e.i,d=e.j,g=e.bc;if(h.globals.isXNumeric){var u=c;h.globals.seriesX[c].length||(u=h.globals.maxValsInArrayIndex),i=(h.globals.seriesX[u][d]-h.globals.minX)/this.xRatio-r*this.seriesLen/2}var f=i+r*this.visibleI;a=void 0===this.series[c][d]||null===this.series[c][d]?n:n-this.series[c][d]/this.yRatio[this.yaxisIndex]+2*(this.isReversed?this.series[c][d]/this.yRatio[this.yaxisIndex]:0);var p=this.barHelpers.getColumnPaths({barXPosition:f,barWidth:r,y1:n,y2:a,strokeWidth:o,series:this.series,realIndex:e.realIndex,i:c,j:d,w:h});return h.globals.isXNumeric||(i+=s),this.barHelpers.barBackground({bc:g,i:c,x1:f-o/2-r*this.visibleI,x2:r*this.seriesLen+o/2,elSeries:l}),{pathTo:p.pathTo,pathFrom:p.pathFrom,x:i,y:a,barXPosition:f}}},{key:"getPreviousPath",value:function(t,e){for(var i,a=this.w,s=0;s<a.globals.previousPaths.length;s++){var r=a.globals.previousPaths[s];r.paths&&r.paths.length>0&&parseInt(r.realIndex,10)===parseInt(t,10)&&void 0!==a.globals.previousPaths[s].paths[e]&&(i=a.globals.previousPaths[s].paths[e].d)}return i}}]),t}(),Y=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.months31=[1,3,5,7,8,10,12],this.months30=[2,4,6,9,11],this.daysCntOfYear=[0,31,59,90,120,151,181,212,243,273,304,334]}return a(t,[{key:"isValidDate",value:function(t){return!isNaN(this.parseDate(t))}},{key:"getTimeStamp",value:function(t){return Date.parse(t)?this.w.config.xaxis.labels.datetimeUTC?new Date(new Date(t).toISOString().substr(0,25)).getTime():new Date(t).getTime():t}},{key:"getDate",value:function(t){return this.w.config.xaxis.labels.datetimeUTC?new Date(new Date(t).toUTCString()):new Date(t)}},{key:"parseDate",value:function(t){var e=Date.parse(t);if(!isNaN(e))return this.getTimeStamp(t);var i=Date.parse(t.replace(/-/g,"/").replace(/[a-z]+/gi," "));return i=this.getTimeStamp(i)}},{key:"formatDate",value:function(t,e){var i=this.w.globals.locale,a=this.w.config.xaxis.labels.datetimeUTC,s=["\0"].concat(d(i.months)),r=["\x01"].concat(d(i.shortMonths)),n=["\x02"].concat(d(i.days)),o=["\x03"].concat(d(i.shortDays));function l(t,e){var i=t+"";for(e=e||2;i.length<e;)i="0"+i;return i}var h=a?t.getUTCFullYear():t.getFullYear();e=(e=(e=e.replace(/(^|[^\\])yyyy+/g,"$1"+h)).replace(/(^|[^\\])yy/g,"$1"+h.toString().substr(2,2))).replace(/(^|[^\\])y/g,"$1"+h);var c=(a?t.getUTCMonth():t.getMonth())+1;e=(e=(e=(e=e.replace(/(^|[^\\])MMMM+/g,"$1"+s[0])).replace(/(^|[^\\])MMM/g,"$1"+r[0])).replace(/(^|[^\\])MM/g,"$1"+l(c))).replace(/(^|[^\\])M/g,"$1"+c);var g=a?t.getUTCDate():t.getDate();e=(e=(e=(e=e.replace(/(^|[^\\])dddd+/g,"$1"+n[0])).replace(/(^|[^\\])ddd/g,"$1"+o[0])).replace(/(^|[^\\])dd/g,"$1"+l(g))).replace(/(^|[^\\])d/g,"$1"+g);var u=a?t.getUTCHours():t.getHours(),f=u>12?u-12:0===u?12:u;e=(e=(e=(e=e.replace(/(^|[^\\])HH+/g,"$1"+l(u))).replace(/(^|[^\\])H/g,"$1"+u)).replace(/(^|[^\\])hh+/g,"$1"+l(f))).replace(/(^|[^\\])h/g,"$1"+f);var p=a?t.getUTCMinutes():t.getMinutes();e=(e=e.replace(/(^|[^\\])mm+/g,"$1"+l(p))).replace(/(^|[^\\])m/g,"$1"+p);var x=a?t.getUTCSeconds():t.getSeconds();e=(e=e.replace(/(^|[^\\])ss+/g,"$1"+l(x))).replace(/(^|[^\\])s/g,"$1"+x);var b=a?t.getUTCMilliseconds():t.getMilliseconds();e=e.replace(/(^|[^\\])fff+/g,"$1"+l(b,3)),b=Math.round(b/10),e=e.replace(/(^|[^\\])ff/g,"$1"+l(b)),b=Math.round(b/10);var m=u<12?"AM":"PM";e=(e=(e=e.replace(/(^|[^\\])f/g,"$1"+b)).replace(/(^|[^\\])TT+/g,"$1"+m)).replace(/(^|[^\\])T/g,"$1"+m.charAt(0));var v=m.toLowerCase();e=(e=e.replace(/(^|[^\\])tt+/g,"$1"+v)).replace(/(^|[^\\])t/g,"$1"+v.charAt(0));var y=-t.getTimezoneOffset(),w=a||!y?"Z":y>0?"+":"-";if(!a){var k=(y=Math.abs(y))%60;w+=l(Math.floor(y/60))+":"+l(k)}e=e.replace(/(^|[^\\])K/g,"$1"+w);var A=(a?t.getUTCDay():t.getDay())+1;return e=(e=(e=(e=(e=e.replace(new RegExp(n[0],"g"),n[A])).replace(new RegExp(o[0],"g"),o[A])).replace(new RegExp(s[0],"g"),s[c])).replace(new RegExp(r[0],"g"),r[c])).replace(/\\(.)/g,"$1")}},{key:"getTimeUnitsfromTimestamp",value:function(t,e,i){var a=this.w;void 0!==a.config.xaxis.min&&(t=a.config.xaxis.min),void 0!==a.config.xaxis.max&&(e=a.config.xaxis.max);var s=this.getDate(t),r=this.getDate(e),n=this.formatDate(s,"yyyy MM dd HH mm").split(" "),o=this.formatDate(r,"yyyy MM dd HH mm").split(" ");return{minMinute:parseInt(n[4],10),maxMinute:parseInt(o[4],10),minHour:parseInt(n[3],10),maxHour:parseInt(o[3],10),minDate:parseInt(n[2],10),maxDate:parseInt(o[2],10),minMonth:parseInt(n[1],10)-1,maxMonth:parseInt(o[1],10)-1,minYear:parseInt(n[0],10),maxYear:parseInt(o[0],10)}}},{key:"isLeapYear",value:function(t){return t%4==0&&t%100!=0||t%400==0}},{key:"calculcateLastDaysOfMonth",value:function(t,e,i){return this.determineDaysOfMonths(t,e)-i}},{key:"determineDaysOfYear",value:function(t){var e=365;return this.isLeapYear(t)&&(e=366),e}},{key:"determineRemainingDaysOfYear",value:function(t,e,i){var a=this.daysCntOfYear[e]+i;return e>1&&this.isLeapYear()&&a++,a}},{key:"determineDaysOfMonths",value:function(t,e){var i=30;switch(t=g.monthMod(t),!0){case this.months30.indexOf(t)>-1:2===t&&(i=this.isLeapYear(e)?29:28);break;case this.months31.indexOf(t)>-1:default:i=31}return i}}]),t}(),F=function(t){function i(){return e(this,i),c(this,l(i).apply(this,arguments))}return o(i,t),a(i,[{key:"draw",value:function(t,e){var i=this.w,a=new p(this.ctx);this.rangeBarOptions=this.w.config.plotOptions.rangeBar,this.series=t,this.seriesRangeStart=i.globals.seriesRangeStart,this.seriesRangeEnd=i.globals.seriesRangeEnd,this.barHelpers.initVariables(t);for(var s=a.group({class:"apexcharts-rangebar-series apexcharts-plot-series"}),r=0;r<t.length;r++){var o,l,h,c=void 0,d=void 0,u=void 0,f=i.globals.comboCharts?e[r]:r,x=a.group({class:"apexcharts-series",seriesName:g.escapeString(i.globals.seriesNames[f]),rel:r+1,"data:realIndex":f});t[r].length>0&&(this.visibleI=this.visibleI+1);var b=0,m=0;this.yRatio.length>1&&(this.yaxisIndex=f);var v=this.barHelpers.initialPositions();d=v.y,h=v.zeroW,c=v.x,m=v.barWidth,o=v.xDivision,l=v.zeroH;for(var y=a.group({class:"apexcharts-datalabels","data:realIndex":f}),w=0;w<i.globals.dataPoints;w++){var k=this.barHelpers.getStrokeWidth(r,w,f),A=this.seriesRangeStart[r][w],S=this.seriesRangeEnd[r][w],C=null,L=null,P={x:c,y:d,strokeWidth:k,elSeries:x};if(u=v.yDivision,b=v.barHeight,this.isHorizontal){L=d+b*this.visibleI;var T=(u-b*this.seriesLen)/2;if(void 0===i.config.series[r].data[w])break;if(this.isTimelineBar&&i.config.series[r].data[w].x){var z=this.detectOverlappingBars({i:r,j:w,barYPosition:L,srty:T,barHeight:b,yDivision:u,initPositions:v});b=z.barHeight,L=z.barYPosition}m=(C=this.drawRangeBarPaths(n({indexes:{i:r,j:w,realIndex:f},barHeight:b,barYPosition:L,zeroW:h,yDivision:u,y1:A,y2:S},P))).barWidth}else b=(C=this.drawRangeColumnPaths(n({indexes:{i:r,j:w,realIndex:f},zeroH:l,barWidth:m,xDivision:o},P))).barHeight;d=C.y,c=C.x;var I=this.barHelpers.getPathFillColor(t,r,w,f),M=i.globals.stroke.colors[f];this.renderSeries({realIndex:f,pathFill:I,lineFill:M,j:w,i:r,x:c,y:d,y1:A,y2:S,pathFrom:C.pathFrom,pathTo:C.pathTo,strokeWidth:k,elSeries:x,series:t,barHeight:b,barYPosition:L,barWidth:m,elDataLabelsWrap:y,visibleSeries:this.visibleI,type:"rangebar"})}s.add(x)}return s}},{key:"detectOverlappingBars",value:function(t){var e=t.i,i=t.j,a=t.barYPosition,s=t.srty,r=t.barHeight,n=t.yDivision,o=t.initPositions,l=this.w,h=[],c=l.config.series[e].data[i].rangeName,d=l.config.series[e].data[i].x,g=l.globals.labels.indexOf(d),u=l.globals.seriesRangeBarTimeline[e].findIndex((function(t){return t.x===d&&t.overlaps.length>0}));return a=s+r*this.visibleI+n*g,u>-1&&!l.config.plotOptions.bar.rangeBarOverlap&&(h=l.globals.seriesRangeBarTimeline[e][u].overlaps).indexOf(c)>-1&&(a=(r=o.barHeight/h.length)*this.visibleI+n*(100-parseInt(this.barOptions.barHeight,10))/100/2+r*(this.visibleI+h.indexOf(c))+n*g),{barYPosition:a,barHeight:r}}},{key:"drawRangeColumnPaths",value:function(t){var e=t.indexes,i=t.x,a=(t.strokeWidth,t.xDivision),s=t.barWidth,r=t.zeroH,n=this.w,o=e.i,l=e.j,h=this.yRatio[this.yaxisIndex],c=e.realIndex,d=this.getRangeValue(c,l),g=Math.min(d.start,d.end),u=Math.max(d.start,d.end);n.globals.isXNumeric&&(i=(n.globals.seriesX[o][l]-n.globals.minX)/this.xRatio-s/2);var f=i+s*this.visibleI;void 0===this.series[o][l]||null===this.series[o][l]?g=r:(g=r-g/h,u=r-u/h);var p=Math.abs(u-g),x=this.barHelpers.getColumnPaths({barXPosition:f,barWidth:s,y1:g,y2:u,strokeWidth:this.strokeWidth,series:this.seriesRangeEnd,i:c,j:l,w:n});return n.globals.isXNumeric||(i+=a),{pathTo:x.pathTo,pathFrom:x.pathFrom,barHeight:p,x:i,y:u,barXPosition:f}}},{key:"drawRangeBarPaths",value:function(t){var e=t.indexes,i=t.y,a=t.y1,s=t.y2,r=t.yDivision,n=t.barHeight,o=t.barYPosition,l=t.zeroW,h=this.w,c=l+a/this.invertedYRatio,d=l+s/this.invertedYRatio,g=Math.abs(d-c),u=this.barHelpers.getBarpaths({barYPosition:o,barHeight:n,x1:c,x2:d,strokeWidth:this.strokeWidth,series:this.seriesRangeEnd,i:e.realIndex,j:e.j,w:h});return h.globals.isXNumeric||(i+=r),{pathTo:u.pathTo,pathFrom:u.pathFrom,barWidth:g,x:d,y:i}}},{key:"getRangeValue",value:function(t,e){var i=this.w;return{start:i.globals.seriesRangeStart[t][e],end:i.globals.seriesRangeEnd[t][e]}}},{key:"getTooltipValues",value:function(t){var e=t.ctx,i=t.seriesIndex,a=t.dataPointIndex,s=t.y1,r=t.y2,n=t.w,o=n.globals.seriesRangeStart[i][a],l=n.globals.seriesRangeEnd[i][a],h=n.globals.labels[a],c=n.config.series[i].name,d=n.config.tooltip.y.formatter,g=n.config.tooltip.y.title.formatter,u={w:n,seriesIndex:i,dataPointIndex:a};"function"==typeof g&&(c=g(c,u)),s&&r&&(o=s,l=r,n.config.series[i].data[a].x&&(h=n.config.series[i].data[a].x+":"),"function"==typeof d&&(h=d(h,u)));var f="",p="",x=n.globals.colors[i];if(void 0===n.config.tooltip.x.formatter)if("datetime"===n.config.xaxis.type){var b=new Y(e);f=b.formatDate(b.getDate(o),n.config.tooltip.x.format),p=b.formatDate(b.getDate(l),n.config.tooltip.x.format)}else f=o,p=l;else f=n.config.tooltip.x.formatter(o),p=n.config.tooltip.x.formatter(l);return{start:o,end:l,startVal:f,endVal:p,ylabel:h,color:x,seriesName:c}}},{key:"buildCustomTooltipHTML",value:function(t){var e=t.color,i=t.seriesName;return'<div class="apexcharts-tooltip-rangebar"><div> <span class="series-name" style="color: '+e+'">'+(i||"")+'</span></div><div> <span class="category">'+t.ylabel+' </span> <span class="value start-value">'+t.start+'</span> <span class="separator">-</span> <span class="value end-value">'+t.end+"</span></div></div>"}}]),i}(E),R=function(){function t(i){e(this,t),this.opts=i}return a(t,[{key:"line",value:function(){return{chart:{animations:{easing:"swing"}},dataLabels:{enabled:!1},stroke:{width:5,curve:"straight"},markers:{size:0,hover:{sizeOffset:6}},xaxis:{crosshairs:{width:1}}}}},{key:"sparkline",value:function(t){this.opts.yaxis[0].show=!1,this.opts.yaxis[0].title.text="",this.opts.yaxis[0].axisBorder.show=!1,this.opts.yaxis[0].axisTicks.show=!1,this.opts.yaxis[0].floating=!0;return g.extend(t,{grid:{show:!1,padding:{left:0,right:0,top:0,bottom:0}},legend:{show:!1},xaxis:{labels:{show:!1},tooltip:{enabled:!1},axisBorder:{show:!1},axisTicks:{show:!1}},chart:{toolbar:{show:!1},zoom:{enabled:!1}},dataLabels:{enabled:!1}})}},{key:"bar",value:function(){return{chart:{stacked:!1,animations:{easing:"swing"}},plotOptions:{bar:{dataLabels:{position:"center"}}},dataLabels:{style:{colors:["#fff"]},background:{enabled:!1}},stroke:{width:0,lineCap:"square"},fill:{opacity:.85},legend:{markers:{shape:"square",radius:2,size:8}},tooltip:{shared:!1},xaxis:{tooltip:{enabled:!1},tickPlacement:"between",crosshairs:{width:"barWidth",position:"back",fill:{type:"gradient"},dropShadow:{enabled:!1},stroke:{width:0}}}}}},{key:"candlestick",value:function(){return{stroke:{width:1,colors:["#333"]},fill:{opacity:1},dataLabels:{enabled:!1},tooltip:{shared:!0,custom:function(t){var e=t.seriesIndex,i=t.dataPointIndex,a=t.w;return'<div class="apexcharts-tooltip-candlestick"><div>Open: <span class="value">'+a.globals.seriesCandleO[e][i]+'</span></div><div>High: <span class="value">'+a.globals.seriesCandleH[e][i]+'</span></div><div>Low: <span class="value">'+a.globals.seriesCandleL[e][i]+'</span></div><div>Close: <span class="value">'+a.globals.seriesCandleC[e][i]+"</span></div></div>"}},states:{active:{filter:{type:"none"}}},xaxis:{crosshairs:{width:1}}}}},{key:"rangeBar",value:function(){return{stroke:{width:0,lineCap:"square"},plotOptions:{bar:{dataLabels:{position:"center"}}},dataLabels:{enabled:!1,formatter:function(t,e){e.ctx;var i=e.seriesIndex,a=e.dataPointIndex,s=e.w,r=s.globals.seriesRangeStart[i][a];return s.globals.seriesRangeEnd[i][a]-r},background:{enabled:!1},style:{colors:["#fff"]}},tooltip:{shared:!1,followCursor:!0,custom:function(t){return t.w.config.plotOptions&&t.w.config.plotOptions.bar&&t.w.config.plotOptions.bar.horizontal?function(t){var e=new F(t.ctx,null),i=e.getTooltipValues(t),a=i.color,s=i.seriesName,r=i.ylabel,n=i.startVal,o=i.endVal;return e.buildCustomTooltipHTML({color:a,seriesName:s,ylabel:r,start:n,end:o})}(t):function(t){var e=new F(t.ctx,null),i=e.getTooltipValues(t),a=i.color,s=i.seriesName,r=i.ylabel,n=i.start,o=i.end;return e.buildCustomTooltipHTML({color:a,seriesName:s,ylabel:r,start:n,end:o})}(t)}},xaxis:{tickPlacement:"between",tooltip:{enabled:!1},crosshairs:{stroke:{width:0}}}}}},{key:"area",value:function(){return{stroke:{width:4},fill:{type:"gradient",gradient:{inverseColors:!1,shade:"light",type:"vertical",opacityFrom:.65,opacityTo:.5,stops:[0,100,100]}},markers:{size:0,hover:{sizeOffset:6}},tooltip:{followCursor:!1}}}},{key:"brush",value:function(t){return g.extend(t,{chart:{toolbar:{autoSelected:"selection",show:!1},zoom:{enabled:!1}},dataLabels:{enabled:!1},stroke:{width:1},tooltip:{enabled:!1},xaxis:{tooltip:{enabled:!1}}})}},{key:"stacked100",value:function(t){t.dataLabels=t.dataLabels||{},t.dataLabels.formatter=t.dataLabels.formatter||void 0;var e=t.dataLabels.formatter;return t.yaxis.forEach((function(e,i){t.yaxis[i].min=0,t.yaxis[i].max=100})),"bar"===t.chart.type&&(t.dataLabels.formatter=e||function(t){return"number"==typeof t&&t?t.toFixed(0)+"%":t}),t}},{key:"convertCatToNumeric",value:function(t){return t.xaxis.convertedCatToNumeric=!0,t}},{key:"convertCatToNumericXaxis",value:function(t,e,i){t.xaxis.type="numeric",t.xaxis.labels=t.xaxis.labels||{},t.xaxis.labels.formatter=t.xaxis.labels.formatter||function(t){return g.isNumber(t)?Math.floor(t):t};var a=t.xaxis.labels.formatter,s=t.xaxis.categories&&t.xaxis.categories.length?t.xaxis.categories:t.labels;return i&&i.length&&(s=i.map((function(t){return t.toString()}))),s&&s.length&&(t.xaxis.labels.formatter=function(t){return g.isNumber(t)?a(s[Math.floor(t)-1]):a(t)}),t.xaxis.categories=[],t.labels=[],t.xaxis.tickAmount=t.xaxis.tickAmount||"dataPoints",t}},{key:"bubble",value:function(){return{dataLabels:{style:{colors:["#fff"]}},tooltip:{shared:!1,intersect:!0},xaxis:{crosshairs:{width:0}},fill:{type:"solid",gradient:{shade:"light",inverse:!0,shadeIntensity:.55,opacityFrom:.4,opacityTo:.8}}}}},{key:"scatter",value:function(){return{dataLabels:{enabled:!1},tooltip:{shared:!1,intersect:!0},markers:{size:6,strokeWidth:1,hover:{sizeOffset:2}}}}},{key:"heatmap",value:function(){return{chart:{stacked:!1},fill:{opacity:1},dataLabels:{style:{colors:["#fff"]}},stroke:{colors:["#fff"]},tooltip:{followCursor:!0,marker:{show:!1},x:{show:!1}},legend:{position:"top",markers:{shape:"square",size:10,offsetY:2}},grid:{padding:{right:20}}}}},{key:"pie",value:function(){return{chart:{toolbar:{show:!1}},plotOptions:{pie:{donut:{labels:{show:!1}}}},dataLabels:{formatter:function(t){return t.toFixed(1)+"%"},style:{colors:["#fff"]},dropShadow:{enabled:!0}},stroke:{colors:["#fff"]},fill:{opacity:1,gradient:{shade:"light",stops:[0,100]}},tooltip:{theme:"dark",fillSeriesColor:!0},legend:{position:"right"}}}},{key:"donut",value:function(){return{chart:{toolbar:{show:!1}},dataLabels:{formatter:function(t){return t.toFixed(1)+"%"},style:{colors:["#fff"]},dropShadow:{enabled:!0}},stroke:{colors:["#fff"]},fill:{opacity:1,gradient:{shade:"light",shadeIntensity:.35,stops:[80,100],opacityFrom:1,opacityTo:1}},tooltip:{theme:"dark",fillSeriesColor:!0},legend:{position:"right"}}}},{key:"polarArea",value:function(){return this.opts.yaxis[0].tickAmount=this.opts.yaxis[0].tickAmount?this.opts.yaxis[0].tickAmount:6,{chart:{toolbar:{show:!1}},dataLabels:{formatter:function(t){return t.toFixed(1)+"%"},enabled:!1},stroke:{show:!0,width:2},fill:{opacity:.7},tooltip:{theme:"dark",fillSeriesColor:!0},legend:{position:"right"}}}},{key:"radar",value:function(){return this.opts.yaxis[0].labels.offsetY=this.opts.yaxis[0].labels.offsetY?this.opts.yaxis[0].labels.offsetY:6,{dataLabels:{enabled:!1,style:{fontSize:"11px"}},stroke:{width:2},markers:{size:3,strokeWidth:1,strokeOpacity:1},fill:{opacity:.2},tooltip:{shared:!1,intersect:!0,followCursor:!0},grid:{show:!1},xaxis:{labels:{formatter:function(t){return t},style:{colors:["#a8a8a8"],fontSize:"11px"}},tooltip:{enabled:!1},crosshairs:{show:!1}}}}},{key:"radialBar",value:function(){return{chart:{animations:{dynamicAnimation:{enabled:!0,speed:800}},toolbar:{show:!1}},fill:{gradient:{shade:"dark",shadeIntensity:.4,inverseColors:!1,type:"diagonal2",opacityFrom:1,opacityTo:1,stops:[70,98,100]}},legend:{show:!1,position:"right"},tooltip:{enabled:!1,fillSeriesColor:!0}}}}]),t}(),D=function(){function i(t){e(this,i),this.opts=t}return a(i,[{key:"init",value:function(e){var i=e.responsiveOverride,a=this.opts,s=new S,r=new R(a);this.chartType=a.chart.type,"histogram"===this.chartType&&(a.chart.type="bar",a=g.extend({plotOptions:{bar:{columnWidth:"99.99%"}}},a)),a=this.extendYAxis(a),a=this.extendAnnotations(a);var n=s.init(),o={};if(a&&"object"===t(a)){var l={};l=-1!==["line","area","bar","candlestick","rangeBar","histogram","bubble","scatter","heatmap","pie","polarArea","donut","radar","radialBar"].indexOf(a.chart.type)?r[a.chart.type]():r.line(),a.chart.brush&&a.chart.brush.enabled&&(l=r.brush(l)),a.chart.stacked&&"100%"===a.chart.stackType&&(a=r.stacked100(a)),this.checkForDarkTheme(window.Apex),this.checkForDarkTheme(a),a.xaxis=a.xaxis||window.Apex.xaxis||{},i||(a.xaxis.convertedCatToNumeric=!1),((a=this.checkForCatToNumericXAxis(this.chartType,l,a)).chart.sparkline&&a.chart.sparkline.enabled||window.Apex.chart&&window.Apex.chart.sparkline&&window.Apex.chart.sparkline.enabled)&&(l=r.sparkline(l)),o=g.extend(n,l)}var h=g.extend(o,window.Apex);return n=g.extend(h,a),n=this.handleUserInputErrors(n)}},{key:"checkForCatToNumericXAxis",value:function(t,e,i){var a=new R(i),s="bar"===t&&i.plotOptions&&i.plotOptions.bar&&i.plotOptions.bar.horizontal,r="pie"===t||"polarArea"===t||"donut"===t||"radar"===t||"radialBar"===t||"heatmap"===t,n="datetime"!==i.xaxis.type&&"numeric"!==i.xaxis.type,o=i.xaxis.tickPlacement?i.xaxis.tickPlacement:e.xaxis&&e.xaxis.tickPlacement;return s||r||!n||"between"===o||(i=a.convertCatToNumeric(i)),i}},{key:"extendYAxis",value:function(t,e){var i=new S;(void 0===t.yaxis||!t.yaxis||Array.isArray(t.yaxis)&&0===t.yaxis.length)&&(t.yaxis={}),t.yaxis.constructor!==Array&&window.Apex.yaxis&&window.Apex.yaxis.constructor!==Array&&(t.yaxis=g.extend(t.yaxis,window.Apex.yaxis)),t.yaxis.constructor!==Array?t.yaxis=[g.extend(i.yAxis,t.yaxis)]:t.yaxis=g.extendArray(t.yaxis,i.yAxis);var a=!1;t.yaxis.forEach((function(t){t.logarithmic&&(a=!0)}));var s=t.series;return e&&!s&&(s=e.config.series),a&&s.length!==t.yaxis.length&&s.length&&(t.yaxis=s.map((function(e,a){if(e.name||(s[a].name="series-".concat(a+1)),t.yaxis[a])return t.yaxis[a].seriesName=s[a].name,t.yaxis[a];var r=g.extend(i.yAxis,t.yaxis[0]);return r.show=!1,r}))),a&&s.length>1&&s.length!==t.yaxis.length&&console.warn("A multi-series logarithmic chart should have equal number of series and y-axes. Please make sure to equalize both."),t}},{key:"extendAnnotations",value:function(t){return void 0===t.annotations&&(t.annotations={},t.annotations.yaxis=[],t.annotations.xaxis=[],t.annotations.points=[]),t=this.extendYAxisAnnotations(t),t=this.extendXAxisAnnotations(t),t=this.extendPointAnnotations(t)}},{key:"extendYAxisAnnotations",value:function(t){var e=new S;return t.annotations.yaxis=g.extendArray(void 0!==t.annotations.yaxis?t.annotations.yaxis:[],e.yAxisAnnotation),t}},{key:"extendXAxisAnnotations",value:function(t){var e=new S;return t.annotations.xaxis=g.extendArray(void 0!==t.annotations.xaxis?t.annotations.xaxis:[],e.xAxisAnnotation),t}},{key:"extendPointAnnotations",value:function(t){var e=new S;return t.annotations.points=g.extendArray(void 0!==t.annotations.points?t.annotations.points:[],e.pointAnnotation),t}},{key:"checkForDarkTheme",value:function(t){t.theme&&"dark"===t.theme.mode&&(t.tooltip||(t.tooltip={}),"light"!==t.tooltip.theme&&(t.tooltip.theme="dark"),t.chart.foreColor||(t.chart.foreColor="#f6f7f8"),t.theme.palette||(t.theme.palette="palette4"))}},{key:"handleUserInputErrors",value:function(t){var e=t;if(e.tooltip.shared&&e.tooltip.intersect)throw new Error("tooltip.shared cannot be enabled when tooltip.intersect is true. Turn off any other option by setting it to false.");if(("bar"===e.chart.type||"rangeBar"===e.chart.type)&&e.plotOptions.bar.horizontal){if(e.yaxis.length>1)throw new Error("Multiple Y Axis for bars are not supported. Switch to column chart by setting plotOptions.bar.horizontal=false");e.yaxis[0].reversed&&(e.yaxis[0].opposite=!0),e.xaxis.tooltip.enabled=!1,e.yaxis[0].tooltip.enabled=!1,e.chart.zoom.enabled=!1}return"bar"!==e.chart.type&&"rangeBar"!==e.chart.type||e.tooltip.shared&&("barWidth"===e.xaxis.crosshairs.width&&e.series.length>1&&(console.warn('crosshairs.width = "barWidth" is only supported in single series, not in a multi-series barChart.'),e.xaxis.crosshairs.width="tickWidth"),e.plotOptions.bar.horizontal&&(e.states.hover.type="none",e.tooltip.shared=!1),e.tooltip.followCursor||(console.warn("followCursor option in shared columns cannot be turned off. Please set %ctooltip.followCursor: true","color: blue;"),e.tooltip.followCursor=!0)),"candlestick"===e.chart.type&&e.yaxis[0].reversed&&(console.warn("Reversed y-axis in candlestick chart is not supported."),e.yaxis[0].reversed=!1),e.chart.group&&0===e.yaxis[0].labels.minWidth&&console.warn("It looks like you have multiple charts in synchronization. You must provide yaxis.labels.minWidth which must be EQUAL for all grouped charts to prevent incorrect behaviour."),Array.isArray(e.stroke.width)&&"line"!==e.chart.type&&"area"!==e.chart.type&&(console.warn("stroke.width option accepts array only for line and area charts. Reverted back to Number"),e.stroke.width=e.stroke.width[0]),e}}]),i}(),H=function(){function t(){e(this,t)}return a(t,[{key:"initGlobalVars",value:function(t){t.series=[],t.seriesCandleO=[],t.seriesCandleH=[],t.seriesCandleL=[],t.seriesCandleC=[],t.seriesRangeStart=[],t.seriesRangeEnd=[],t.seriesRangeBarTimeline=[],t.seriesPercent=[],t.seriesX=[],t.seriesZ=[],t.seriesNames=[],t.seriesTotals=[],t.seriesLog=[],t.stackedSeriesTotals=[],t.seriesXvalues=[],t.seriesYvalues=[],t.labels=[],t.categoryLabels=[],t.timescaleLabels=[],t.noLabelsProvided=!1,t.resizeTimer=null,t.selectionResizeTimer=null,t.delayedElements=[],t.pointsArray=[],t.dataLabelsRects=[],t.isXNumeric=!1,t.xaxisLabelsCount=0,t.skipLastTimelinelabel=!1,t.skipFirstTimelinelabel=!1,t.x2SpaceAvailable=0,t.isDataXYZ=!1,t.isMultiLineX=!1,t.isMultipleYAxis=!1,t.maxY=-Number.MAX_VALUE,t.minY=Number.MIN_VALUE,t.minYArr=[],t.maxYArr=[],t.maxX=-Number.MAX_VALUE,t.minX=Number.MAX_VALUE,t.initialMaxX=-Number.MAX_VALUE,t.initialMinX=Number.MAX_VALUE,t.maxDate=0,t.minDate=Number.MAX_VALUE,t.minZ=Number.MAX_VALUE,t.maxZ=-Number.MAX_VALUE,t.minXDiff=Number.MAX_VALUE,t.yAxisScale=[],t.xAxisScale=null,t.xAxisTicksPositions=[],t.yLabelsCoords=[],t.yTitleCoords=[],t.barPadForNumericAxis=0,t.padHorizontal=0,t.xRange=0,t.yRange=[],t.zRange=0,t.dataPoints=0,t.xTickAmount=0}},{key:"globalVars",value:function(t){return{chartID:null,cuid:null,events:{beforeMount:[],mounted:[],updated:[],clicked:[],selection:[],dataPointSelection:[],zoomed:[],scrolled:[]},colors:[],clientX:null,clientY:null,fill:{colors:[]},stroke:{colors:[]},dataLabels:{style:{colors:[]}},radarPolygons:{fill:{colors:[]}},markers:{colors:[],size:t.markers.size,largestSize:0},animationEnded:!1,isTouchDevice:"ontouchstart"in window||navigator.msMaxTouchPoints,isDirty:!1,isExecCalled:!1,initialConfig:null,lastXAxis:[],lastYAxis:[],columnSeries:null,labels:[],timescaleLabels:[],noLabelsProvided:!1,allSeriesCollapsed:!1,collapsedSeries:[],collapsedSeriesIndices:[],ancillaryCollapsedSeries:[],ancillaryCollapsedSeriesIndices:[],risingSeries:[],dataFormatXNumeric:!1,capturedSeriesIndex:-1,capturedDataPointIndex:-1,selectedDataPoints:[],goldenPadding:35,invalidLogScale:!1,ignoreYAxisIndexes:[],yAxisSameScaleIndices:[],maxValsInArrayIndex:0,radialSize:0,zoomEnabled:"zoom"===t.chart.toolbar.autoSelected&&t.chart.toolbar.tools.zoom&&t.chart.zoom.enabled,panEnabled:"pan"===t.chart.toolbar.autoSelected&&t.chart.toolbar.tools.pan,selectionEnabled:"selection"===t.chart.toolbar.autoSelected&&t.chart.toolbar.tools.selection,yaxis:null,mousedown:!1,lastClientPosition:{},visibleXRange:void 0,yValueDecimal:0,total:0,SVGNS:"http://www.w3.org/2000/svg",svgWidth:0,svgHeight:0,noData:!1,locale:{},dom:{},memory:{methodsToExec:[]},shouldAnimate:!0,skipLastTimelinelabel:!1,skipFirstTimelinelabel:!1,delayedElements:[],axisCharts:!0,isDataXYZ:!1,resized:!1,resizeTimer:null,comboCharts:!1,dataChanged:!1,previousPaths:[],allSeriesHasEqualX:!0,pointsArray:[],dataLabelsRects:[],lastDrawnDataLabelsIndexes:[],x2SpaceAvailable:0,hasNullValues:!1,easing:null,zoomed:!1,gridWidth:0,gridHeight:0,rotateXLabels:!1,defaultLabels:!1,xLabelFormatter:void 0,yLabelFormatters:[],xaxisTooltipFormatter:void 0,ttKeyFormatter:void 0,ttVal:void 0,ttZFormatter:void 0,LINE_HEIGHT_RATIO:1.618,xAxisLabelsHeight:0,yAxisLabelsWidth:0,scaleX:1,scaleY:1,translateX:0,translateY:0,translateYAxisX:[],yAxisWidths:[],translateXAxisY:0,translateXAxisX:0,tooltip:null}}},{key:"init",value:function(t){var e=this.globalVars(t);return this.initGlobalVars(e),e.initialConfig=g.extend({},t),e.initialSeries=JSON.parse(JSON.stringify(e.initialConfig.series)),e.lastXAxis=JSON.parse(JSON.stringify(e.initialConfig.xaxis)),e.lastYAxis=JSON.parse(JSON.stringify(e.initialConfig.yaxis)),e}}]),t}(),N=function(){function t(i){e(this,t),this.opts=i}return a(t,[{key:"init",value:function(){var t=new D(this.opts).init({responsiveOverride:!1});return{config:t,globals:(new H).init(t)}}}]),t}(),O=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.twoDSeries=[],this.threeDSeries=[],this.twoDSeriesX=[],this.coreUtils=new m(this.ctx)}return a(t,[{key:"isMultiFormat",value:function(){return this.isFormatXY()||this.isFormat2DArray()}},{key:"isFormatXY",value:function(){var t=this.w.config.series.slice(),e=new M(this.ctx);if(this.activeSeriesIndex=e.getActiveConfigSeriesIndex(),void 0!==t[this.activeSeriesIndex].data&&t[this.activeSeriesIndex].data.length>0&&null!==t[this.activeSeriesIndex].data[0]&&void 0!==t[this.activeSeriesIndex].data[0].x&&null!==t[this.activeSeriesIndex].data[0])return!0}},{key:"isFormat2DArray",value:function(){var t=this.w.config.series.slice(),e=new M(this.ctx);if(this.activeSeriesIndex=e.getActiveConfigSeriesIndex(),void 0!==t[this.activeSeriesIndex].data&&t[this.activeSeriesIndex].data.length>0&&void 0!==t[this.activeSeriesIndex].data[0]&&null!==t[this.activeSeriesIndex].data[0]&&t[this.activeSeriesIndex].data[0].constructor===Array)return!0}},{key:"handleFormat2DArray",value:function(t,e){var i=this.w.config,a=this.w.globals;i.xaxis.sorted&&("datetime"===i.xaxis.type?t[e].data.sort((function(t,e){return new Date(t[0]).getTime()-new Date(e[0]).getTime()})):"numeric"===i.xaxis.type&&t[e].data.sort((function(t,e){return t[0]-e[0]})));for(var s=0;s<t[e].data.length;s++)if(void 0!==t[e].data[s][1]&&(Array.isArray(t[e].data[s][1])&&4===t[e].data[s][1].length?this.twoDSeries.push(g.parseNumber(t[e].data[s][1][3])):5===t[e].data[s].length?this.twoDSeries.push(g.parseNumber(t[e].data[s][4])):this.twoDSeries.push(g.parseNumber(t[e].data[s][1])),a.dataFormatXNumeric=!0),"datetime"===i.xaxis.type){var r=new Date(t[e].data[s][0]);r=new Date(r).getTime(),this.twoDSeriesX.push(r)}else this.twoDSeriesX.push(t[e].data[s][0]);for(var n=0;n<t[e].data.length;n++)void 0!==t[e].data[n][2]&&(this.threeDSeries.push(t[e].data[n][2]),a.isDataXYZ=!0)}},{key:"handleFormatXY",value:function(t,e){var i=this.w.config,a=this.w.globals,s=new Y(this.ctx),r=e;a.collapsedSeriesIndices.indexOf(e)>-1&&(r=this.activeSeriesIndex),i.xaxis.sorted&&("datetime"===i.xaxis.type?t[e].data.sort((function(t,e){return new Date(t.x).getTime()-new Date(e.x).getTime()})):"numeric"===i.xaxis.type&&t[e].data.sort((function(t,e){return t.x-e.x})));for(var n=0;n<t[e].data.length;n++)void 0!==t[e].data[n].y&&(Array.isArray(t[e].data[n].y)?this.twoDSeries.push(g.parseNumber(t[e].data[n].y[t[e].data[n].y.length-1])):this.twoDSeries.push(g.parseNumber(t[e].data[n].y)));for(var o=0;o<t[r].data.length;o++){var l="string"==typeof t[r].data[o].x,h=Array.isArray(t[r].data[o].x),c=!h&&!!s.isValidDate(t[r].data[o].x.toString());if(l||c)if(l||i.xaxis.convertedCatToNumeric){var d=a.isBarHorizontal&&a.isRangeData;"datetime"!==i.xaxis.type||d?(this.fallbackToCategory=!0,this.twoDSeriesX.push(t[r].data[o].x)):this.twoDSeriesX.push(s.parseDate(t[r].data[o].x))}else"datetime"===i.xaxis.type?this.twoDSeriesX.push(s.parseDate(t[r].data[o].x.toString())):(a.dataFormatXNumeric=!0,a.isXNumeric=!0,this.twoDSeriesX.push(parseFloat(t[r].data[o].x)));else h?(this.fallbackToCategory=!0,this.twoDSeriesX.push(t[r].data[o].x)):(a.isXNumeric=!0,a.dataFormatXNumeric=!0,this.twoDSeriesX.push(t[r].data[o].x))}if(t[e].data[0]&&void 0!==t[e].data[0].z){for(var u=0;u<t[e].data.length;u++)this.threeDSeries.push(t[e].data[u].z);a.isDataXYZ=!0}}},{key:"handleRangeData",value:function(t,e){var i=this.w.config,a=this.w.globals,s={};return this.isFormat2DArray()?s=this.handleRangeDataFormat("array",t,e):this.isFormatXY()&&(s=this.handleRangeDataFormat("xy",t,e)),a.seriesRangeStart.push(s.start),a.seriesRangeEnd.push(s.end),"datetime"===i.xaxis.type&&a.seriesRangeBarTimeline.push(s.rangeUniques),a.seriesRangeBarTimeline.forEach((function(t,e){t&&t.forEach((function(t,e){t.y.forEach((function(e,i){for(var a=0;a<t.y.length;a++)if(i!==a){var s=e.y1,r=e.y2,n=t.y[a].y1;s<=t.y[a].y2&&n<=r&&(t.overlaps.indexOf(e.rangeName)<0&&t.overlaps.push(e.rangeName),t.overlaps.indexOf(t.y[a].rangeName)<0&&t.overlaps.push(t.y[a].rangeName))}}))}))})),s}},{key:"handleCandleStickData",value:function(t,e){var i=this.w.globals,a={};return this.isFormat2DArray()?a=this.handleCandleStickDataFormat("array",t,e):this.isFormatXY()&&(a=this.handleCandleStickDataFormat("xy",t,e)),i.seriesCandleO[e]=a.o,i.seriesCandleH[e]=a.h,i.seriesCandleL[e]=a.l,i.seriesCandleC[e]=a.c,a}},{key:"handleRangeDataFormat",value:function(t,e,i){var a=[],s=[],r=e[i].data.filter((function(t,e,i){return e===i.findIndex((function(e){return e.x===t.x}))})).map((function(t,e){return{x:t.x,overlaps:[],y:[]}})),n="Please provide [Start, End] values in valid format. Read more https://apexcharts.com/docs/series/#rangecharts",o=new M(this.ctx).getActiveConfigSeriesIndex();if("array"===t){if(2!==e[o].data[0][1].length)throw new Error(n);for(var l=0;l<e[i].data.length;l++)a.push(e[i].data[l][1][0]),s.push(e[i].data[l][1][1])}else if("xy"===t){if(2!==e[o].data[0].y.length)throw new Error(n);for(var h=function(t){var n=g.randomId(),o=e[i].data[t].x,l={y1:e[i].data[t].y[0],y2:e[i].data[t].y[1],rangeName:n};e[i].data[t].rangeName=n;var h=r.findIndex((function(t){return t.x===o}));r[h].y.push(l),a.push(l.y1),s.push(l.y2)},c=0;c<e[i].data.length;c++)h(c)}return{start:a,end:s,rangeUniques:r}}},{key:"handleCandleStickDataFormat",value:function(t,e,i){var a=[],s=[],r=[],n=[],o="Please provide [Open, High, Low and Close] values in valid format. Read more https://apexcharts.com/docs/series/#candlestick";if("array"===t){if(!Array.isArray(e[i].data[0][1])&&5!==e[i].data[0].length||Array.isArray(e[i].data[0][1])&&4!==e[i].data[0][1].length)throw new Error(o);if(5===e[i].data[0].length)for(var l=0;l<e[i].data.length;l++)a.push(e[i].data[l][1]),s.push(e[i].data[l][2]),r.push(e[i].data[l][3]),n.push(e[i].data[l][4]);else for(var h=0;h<e[i].data.length;h++)a.push(e[i].data[h][1][0]),s.push(e[i].data[h][1][1]),r.push(e[i].data[h][1][2]),n.push(e[i].data[h][1][3])}else if("xy"===t){if(4!==e[i].data[0].y.length)throw new Error(o);for(var c=0;c<e[i].data.length;c++)a.push(e[i].data[c].y[0]),s.push(e[i].data[c].y[1]),r.push(e[i].data[c].y[2]),n.push(e[i].data[c].y[3])}return{o:a,h:s,l:r,c:n}}},{key:"parseDataAxisCharts",value:function(t){for(var e=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.ctx,a=this.w.config,s=this.w.globals,r=new Y(i),n=a.labels.length>0?a.labels.slice():a.xaxis.categories.slice(),o=function(){for(var t=0;t<n.length;t++)if("string"==typeof n[t]){if(!r.isValidDate(n[t]))throw new Error("You have provided invalid Date format. Please provide a valid JavaScript Date");e.twoDSeriesX.push(r.parseDate(n[t]))}else{if(13!==String(n[t]).length)throw new Error("Please provide a valid JavaScript timestamp");e.twoDSeriesX.push(n[t])}},l=0;l<t.length;l++){if(this.twoDSeries=[],this.twoDSeriesX=[],this.threeDSeries=[],void 0===t[l].data)return void console.error("It is a possibility that you may have not included 'data' property in series.");if("rangeBar"!==a.chart.type&&"rangeArea"!==a.chart.type&&"rangeBar"!==t[l].type&&"rangeArea"!==t[l].type||(s.isRangeData=!0,this.handleRangeData(t,l)),this.isMultiFormat())this.isFormat2DArray()?this.handleFormat2DArray(t,l):this.isFormatXY()&&this.handleFormatXY(t,l),"candlestick"!==a.chart.type&&"candlestick"!==t[l].type||this.handleCandleStickData(t,l),s.series.push(this.twoDSeries),s.labels.push(this.twoDSeriesX),s.seriesX.push(this.twoDSeriesX),l!==this.activeSeriesIndex||this.fallbackToCategory||(s.isXNumeric=!0);else{"datetime"===a.xaxis.type?(s.isXNumeric=!0,o(),s.seriesX.push(this.twoDSeriesX)):"numeric"===a.xaxis.type&&(s.isXNumeric=!0,n.length>0&&(this.twoDSeriesX=n,s.seriesX.push(this.twoDSeriesX))),s.labels.push(this.twoDSeriesX);var h=t[l].data.map((function(t){return g.parseNumber(t)}));s.series.push(h)}s.seriesZ.push(this.threeDSeries),void 0!==t[l].name?s.seriesNames.push(t[l].name):s.seriesNames.push("series-"+parseInt(l+1,10))}return this.w}},{key:"parseDataNonAxisCharts",value:function(t){var e=this.w.globals,i=this.w.config;e.series=t.slice(),e.seriesNames=i.labels.slice();for(var a=0;a<e.series.length;a++)void 0===e.seriesNames[a]&&e.seriesNames.push("series-"+(a+1));return this.w}},{key:"handleExternalLabelsData",value:function(t){var e=this.w.config,i=this.w.globals;if(e.xaxis.categories.length>0)i.labels=e.xaxis.categories;else if(e.labels.length>0)i.labels=e.labels.slice();else if(this.fallbackToCategory){if(i.labels=i.labels[0],i.seriesRangeBarTimeline.length&&(i.seriesRangeBarTimeline.map((function(t){t.forEach((function(t){i.labels.indexOf(t.x)<0&&t.x&&i.labels.push(t.x)}))})),i.labels=i.labels.filter((function(t,e,i){return i.indexOf(t)===e}))),e.xaxis.convertedCatToNumeric)new R(e).convertCatToNumericXaxis(e,this.ctx,i.seriesX[0]),this._generateExternalLabels(t)}else this._generateExternalLabels(t)}},{key:"_generateExternalLabels",value:function(t){var e=this.w.globals,i=this.w.config,a=[];if(e.axisCharts){if(e.series.length>0)for(var s=0;s<e.series[e.maxValsInArrayIndex].length;s++)a.push(s+1);e.seriesX=[];for(var r=0;r<t.length;r++)e.seriesX.push(a);e.isXNumeric=!0}if(0===a.length){a=e.axisCharts?[]:e.series.map((function(t,e){return e+1}));for(var n=0;n<t.length;n++)e.seriesX.push(a)}e.labels=a,i.xaxis.convertedCatToNumeric&&(e.categoryLabels=a.map((function(t){return i.xaxis.labels.formatter(t)}))),e.noLabelsProvided=!0}},{key:"parseData",value:function(t){var e=this.w,i=e.config,a=e.globals;if(this.excludeCollapsedSeriesInYAxis(),this.fallbackToCategory=!1,this.ctx.core.resetGlobals(),this.ctx.core.isMultipleY(),a.axisCharts?this.parseDataAxisCharts(t):this.parseDataNonAxisCharts(t),this.coreUtils.getLargestSeries(),"bar"===i.chart.type&&i.chart.stacked){var s=new M(this.ctx);a.series=s.setNullSeriesToZeroValues(a.series)}this.coreUtils.getSeriesTotals(),a.axisCharts&&this.coreUtils.getStackedSeriesTotals(),this.coreUtils.getPercentSeries(),a.dataFormatXNumeric||a.isXNumeric&&("numeric"!==i.xaxis.type||0!==i.labels.length||0!==i.xaxis.categories.length)||this.handleExternalLabelsData(t);for(var r=this.coreUtils.getCategoryLabels(a.labels),n=0;n<r.length;n++)if(Array.isArray(r[n])){a.isMultiLineX=!0;break}}},{key:"excludeCollapsedSeriesInYAxis",value:function(){var t=this,e=this.w;e.globals.ignoreYAxisIndexes=e.globals.collapsedSeries.map((function(i,a){if(t.w.globals.isMultipleYAxis&&!e.config.chart.stacked)return i.index}))}}]),t}(),W=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.tooltipKeyFormat="dd MMM"}return a(t,[{key:"xLabelFormat",value:function(t,e,i){var a=this.w;if("datetime"===a.config.xaxis.type&&void 0===a.config.xaxis.labels.formatter&&void 0===a.config.tooltip.x.formatter){var s=new Y(this.ctx);return s.formatDate(s.getDate(e),a.config.tooltip.x.format)}return t(e,i)}},{key:"defaultGeneralFormatter",value:function(t){return Array.isArray(t)?t.map((function(t){return t})):t}},{key:"defaultYFormatter",value:function(t,e,i){var a=this.w;return g.isNumber(t)&&(t=0!==a.globals.yValueDecimal?t.toFixed(void 0!==e.decimalsInFloat?e.decimalsInFloat:a.globals.yValueDecimal):a.globals.maxYArr[i]-a.globals.minYArr[i]<10?t.toFixed(1):t.toFixed(0)),t}},{key:"setLabelFormatters",value:function(){var t=this,e=this.w;return e.globals.xLabelFormatter=function(e){return t.defaultGeneralFormatter(e)},e.globals.xaxisTooltipFormatter=function(e){return t.defaultGeneralFormatter(e)},e.globals.ttKeyFormatter=function(e){return t.defaultGeneralFormatter(e)},e.globals.ttZFormatter=function(t){return t},e.globals.legendFormatter=function(e){return t.defaultGeneralFormatter(e)},void 0!==e.config.xaxis.labels.formatter?e.globals.xLabelFormatter=e.config.xaxis.labels.formatter:e.globals.xLabelFormatter=function(t){if(g.isNumber(t)){if(!e.config.xaxis.convertedCatToNumeric&&"numeric"===e.config.xaxis.type&&e.globals.dataPoints<50)return t.toFixed(1);if(e.globals.isBarHorizontal)if(e.globals.maxY-e.globals.minYArr<4)return t.toFixed(1);return t.toFixed(0)}return t},"function"==typeof e.config.tooltip.x.formatter?e.globals.ttKeyFormatter=e.config.tooltip.x.formatter:e.globals.ttKeyFormatter=e.globals.xLabelFormatter,"function"==typeof e.config.xaxis.tooltip.formatter&&(e.globals.xaxisTooltipFormatter=e.config.xaxis.tooltip.formatter),Array.isArray(e.config.tooltip.y)?e.globals.ttVal=e.config.tooltip.y:void 0!==e.config.tooltip.y.formatter&&(e.globals.ttVal=e.config.tooltip.y),void 0!==e.config.tooltip.z.formatter&&(e.globals.ttZFormatter=e.config.tooltip.z.formatter),void 0!==e.config.legend.formatter&&(e.globals.legendFormatter=e.config.legend.formatter),e.config.yaxis.forEach((function(i,a){void 0!==i.labels.formatter?e.globals.yLabelFormatters[a]=i.labels.formatter:e.globals.yLabelFormatters[a]=function(s){return e.globals.xyCharts?Array.isArray(s)?s.map((function(e){return t.defaultYFormatter(e,i,a)})):t.defaultYFormatter(s,i,a):s}})),e.globals}},{key:"heatmapLabelFormatters",value:function(){var t=this.w;if("heatmap"===t.config.chart.type){t.globals.yAxisScale[0].result=t.globals.seriesNames.slice();var e=t.globals.seriesNames.reduce((function(t,e){return t.length>e.length?t:e}),0);t.globals.yAxisScale[0].niceMax=e,t.globals.yAxisScale[0].niceMin=e}}}]),t}(),B=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"getLabel",value:function(t,e,i,a){var s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[],r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:"12px",n=this.w,o=void 0===t[a]?"":t[a],l=o,h=n.globals.xLabelFormatter,c=n.config.xaxis.labels.formatter,d=!1,g=new W(this.ctx),u=o;l=g.xLabelFormat(h,o,u),void 0!==c&&(l=c(o,t[a],a));var f=function(t){var i=null;return e.forEach((function(t){"month"===t.unit?i="year":"day"===t.unit?i="month":"hour"===t.unit?i="day":"minute"===t.unit&&(i="hour")})),i===t};e.length>0?(d=f(e[a].unit),i=e[a].position,l=e[a].value):"datetime"===n.config.xaxis.type&&void 0===c&&(l=""),void 0===l&&(l=""),l=Array.isArray(l)?l:l.toString();var x=new p(this.ctx),b={};return b=n.globals.rotateXLabels?x.getTextRects(l,parseInt(r,10),null,"rotate(".concat(n.config.xaxis.labels.rotate," 0 0)"),!1):x.getTextRects(l,parseInt(r,10)),!Array.isArray(l)&&(0===l.indexOf("NaN")||0===l.toLowerCase().indexOf("invalid")||l.toLowerCase().indexOf("infinity")>=0||s.indexOf(l)>=0&&!n.config.xaxis.labels.showDuplicates)&&(l=""),{x:i,text:l,textRect:b,isBold:d}}},{key:"checkForOverflowingLabels",value:function(t,e,i,a,s){var r=this.w;if(0===t&&r.globals.skipFirstTimelinelabel&&(e.text=""),t===i-1&&r.globals.skipLastTimelinelabel&&(e.text=""),r.config.xaxis.labels.hideOverlappingLabels&&a.length>0){var n=s[s.length-1];e.x<n.textRect.width/(r.globals.rotateXLabels?Math.abs(r.config.xaxis.labels.rotate)/12:1.01)+n.x&&(e.text="")}return e}},{key:"checkForReversedLabels",value:function(t,e){var i=this.w;return i.config.yaxis[t]&&i.config.yaxis[t].reversed&&e.reverse(),e}},{key:"isYAxisHidden",value:function(t){var e=this.w,i=new m(this.ctx);return!e.config.yaxis[t].show||!e.config.yaxis[t].showForNullSeries&&i.isSeriesNull(t)&&-1===e.globals.collapsedSeriesIndices.indexOf(t)}},{key:"drawYAxisTicks",value:function(t,e,i,a,s,r,n){var o=this.w,l=new p(this.ctx),h=o.globals.translateY;if(a.show&&e>0){!0===o.config.yaxis[s].opposite&&(t+=a.width);for(var c=e;c>=0;c--){var d=h+e/10+o.config.yaxis[s].labels.offsetY-1;o.globals.isBarHorizontal&&(d=r*c),"heatmap"===o.config.chart.type&&(d+=r/2);var g=l.drawLine(t+i.offsetX-a.width+a.offsetX,d+a.offsetY,t+i.offsetX+a.offsetX,d+a.offsetY,a.color);n.add(g),h+=r}}}}]),t}(),V=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"fixSvgStringForIe11",value:function(t){if(!g.isIE11())return t;var e=0,i=t.replace(/xmlns="http:\/\/www.w3.org\/2000\/svg"/g,(function(t){return 2===++e?'xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"':t}));return i=(i=i.replace(/xmlns:NS\d+=""/g,"")).replace(/NS\d+:(\w+:\w+=")/g,"$1")}},{key:"getSvgString",value:function(){var t=this.w.globals.dom.Paper.svg();return this.fixSvgStringForIe11(t)}},{key:"cleanup",value:function(){var t=this.w,e=t.globals.dom.baseEl.getElementsByClassName("apexcharts-xcrosshairs"),i=t.globals.dom.baseEl.getElementsByClassName("apexcharts-ycrosshairs"),a=t.globals.dom.baseEl.querySelectorAll(".apexcharts-zoom-rect, .apexcharts-selection-rect");Array.prototype.forEach.call(a,(function(t){t.setAttribute("width",0)})),e&&e[0]&&(e[0].setAttribute("x",-500),e[0].setAttribute("x1",-500),e[0].setAttribute("x2",-500)),i&&i[0]&&(i[0].setAttribute("y",-100),i[0].setAttribute("y1",-100),i[0].setAttribute("y2",-100))}},{key:"svgUrl",value:function(){this.cleanup();var t=this.getSvgString(),e=new Blob([t],{type:"image/svg+xml;charset=utf-8"});return URL.createObjectURL(e)}},{key:"dataURI",value:function(){var t=this;return new Promise((function(e){var i=t.w;t.cleanup();var a=document.createElement("canvas");a.width=i.globals.svgWidth,a.height=parseInt(i.globals.dom.elWrap.style.height,10);var s="transparent"===i.config.chart.background?"#fff":i.config.chart.background,r=a.getContext("2d");r.fillStyle=s,r.fillRect(0,0,a.width,a.height);var n=t.getSvgString();if(window.canvg&&g.isIE11()){var o=window.canvg.Canvg.fromString(r,n,{ignoreClear:!0,ignoreDimensions:!0});o.start();var l=a.msToBlob();o.stop(),e({blob:l})}else{var h="data:image/svg+xml,"+encodeURIComponent(n),c=new Image;c.crossOrigin="anonymous",c.onload=function(){if(r.drawImage(c,0,0),a.msToBlob){var t=a.msToBlob();e({blob:t})}else{var i=a.toDataURL("image/png");e({imgURI:i})}},c.src=h}}))}},{key:"exportToSVG",value:function(){this.triggerDownload(this.svgUrl(),".svg")}},{key:"exportToPng",value:function(){var t=this;this.dataURI().then((function(e){var i=e.imgURI,a=e.blob;a?navigator.msSaveOrOpenBlob(a,t.w.globals.chartID+".png"):t.triggerDownload(i,".png")}))}},{key:"exportToCSV",value:function(t){var e=this,i=t.series,a=t.columnDelimiter,s=void 0===a?",":a,r=t.lineDelimiter,n=void 0===r?"\n":r,o=this.w,l=[],h=[],c="data:text/csv;charset=utf-8,",d=new O(this.ctx),g=new B(this.ctx),u=function(t){var i="";if(o.globals.axisCharts){if("category"===o.config.xaxis.type||o.config.xaxis.convertedCatToNumeric)if(o.globals.isBarHorizontal){var a=o.globals.yLabelFormatters[0],s=new M(e.ctx).getActiveConfigSeriesIndex();i=a(o.globals.labels[t],{seriesIndex:s,dataPointIndex:t,w:o})}else i=g.getLabel(o.globals.labels,o.globals.timescaleLabels,0,t).text;"datetime"===o.config.xaxis.type&&(o.config.xaxis.categories.length?i=o.config.xaxis.categories[t]:o.config.labels.length&&(i=o.config.labels[t]))}else i=o.config.labels[t];return i};l.push("category"),i.map((function(t,e){o.globals.axisCharts&&l.push(t.name?t.name:"series-".concat(e))})),o.globals.axisCharts||(l.push("value"),h.push(l.join(s))),i.map((function(t,e){o.globals.axisCharts?function(t,e){if(l.length&&0===e&&h.push(l.join(s)),t.data&&t.data.length)for(var a=0;a<t.data.length;a++){l=[];var r=u(a);if(r||(d.isFormatXY()?r=i[e].data[a].x:d.isFormat2DArray()&&(r=i[e].data[a]?i[e].data[a][0]:"")),0===e){l.push(r);for(var n=0;n<o.globals.series.length;n++)l.push(o.globals.series[n][a])}("candlestick"===o.config.chart.type||t.type&&"candlestick"===t.type)&&(l.pop(),l.push(o.globals.seriesCandleO[e][a]),l.push(o.globals.seriesCandleH[e][a]),l.push(o.globals.seriesCandleL[e][a]),l.push(o.globals.seriesCandleC[e][a])),"rangeBar"===o.config.chart.type&&(l.pop(),l.push(o.globals.seriesRangeStart[e][a]),l.push(o.globals.seriesRangeEnd[e][a])),l.length&&h.push(l.join(s))}}(t,e):((l=[]).push(o.globals.labels[e]),l.push(o.globals.series[e]),h.push(l.join(s)))})),c+=h.join(n),this.triggerDownload(encodeURI(c),".csv")}},{key:"triggerDownload",value:function(t,e){var i=document.createElement("a");i.href=t,i.download=this.w.globals.chartID+e,document.body.appendChild(i),i.click(),document.body.removeChild(i)}}]),t}(),G=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w;var a=this.w;this.axesUtils=new B(i),this.xaxisLabels=a.globals.labels.slice(),a.globals.timescaleLabels.length>0&&!a.globals.isBarHorizontal&&(this.xaxisLabels=a.globals.timescaleLabels.slice()),this.drawnLabels=[],this.drawnLabelsRects=[],"top"===a.config.xaxis.position?this.offY=0:this.offY=a.globals.gridHeight+1,this.offY=this.offY+a.config.xaxis.axisBorder.offsetY,this.isCategoryBarHorizontal="bar"===a.config.chart.type&&a.config.plotOptions.bar.horizontal,this.xaxisFontSize=a.config.xaxis.labels.style.fontSize,this.xaxisFontFamily=a.config.xaxis.labels.style.fontFamily,this.xaxisForeColors=a.config.xaxis.labels.style.colors,this.xaxisBorderWidth=a.config.xaxis.axisBorder.width,this.isCategoryBarHorizontal&&(this.xaxisBorderWidth=a.config.yaxis[0].axisBorder.width.toString()),this.xaxisBorderWidth.indexOf("%")>-1?this.xaxisBorderWidth=a.globals.gridWidth*parseInt(this.xaxisBorderWidth,10)/100:this.xaxisBorderWidth=parseInt(this.xaxisBorderWidth,10),this.xaxisBorderHeight=a.config.xaxis.axisBorder.height,this.yaxis=a.config.yaxis[0]}return a(t,[{key:"drawXaxis",value:function(){var t,e=this,i=this.w,a=new p(this.ctx),s=a.group({class:"apexcharts-xaxis",transform:"translate(".concat(i.config.xaxis.offsetX,", ").concat(i.config.xaxis.offsetY,")")}),r=a.group({class:"apexcharts-xaxis-texts-g",transform:"translate(".concat(i.globals.translateXAxisX,", ").concat(i.globals.translateXAxisY,")")});s.add(r);for(var n=i.globals.padHorizontal,o=[],l=0;l<this.xaxisLabels.length;l++)o.push(this.xaxisLabels[l]);var h=o.length;if(i.globals.isXNumeric){var c=h>1?h-1:h;t=i.globals.gridWidth/c,n=n+t/2+i.config.xaxis.labels.offsetX}else t=i.globals.gridWidth/o.length,n=n+t+i.config.xaxis.labels.offsetX;if(i.config.xaxis.labels.show)for(var d=function(s){var l=n-t/2+i.config.xaxis.labels.offsetX;0===s&&1===h&&t/2===n&&1===i.globals.dataPoints&&(l=i.globals.gridWidth/2);var c=e.axesUtils.getLabel(o,i.globals.timescaleLabels,l,s,e.drawnLabels,e.xaxisFontSize),d=28;i.globals.rotateXLabels&&(d=22);(c=e.axesUtils.checkForOverflowingLabels(s,c,h,e.drawnLabels,e.drawnLabelsRects)).text&&i.globals.xaxisLabelsCount++;var g=a.drawText({x:c.x,y:e.offY+i.config.xaxis.labels.offsetY+d-("top"===i.config.xaxis.position?i.globals.xAxisHeight+i.config.xaxis.axisTicks.height-2:0),text:c.text,textAnchor:"middle",fontWeight:c.isBold?600:i.config.xaxis.labels.style.fontWeight,fontSize:e.xaxisFontSize,fontFamily:e.xaxisFontFamily,foreColor:Array.isArray(e.xaxisForeColors)?i.config.xaxis.convertedCatToNumeric?e.xaxisForeColors[i.globals.minX+s-1]:e.xaxisForeColors[s]:e.xaxisForeColors,isPlainText:!1,cssClass:"apexcharts-xaxis-label "+i.config.xaxis.labels.style.cssClass});r.add(g);var u=document.createElementNS(i.globals.SVGNS,"title");u.textContent=c.text,g.node.appendChild(u),""!==c.text&&(e.drawnLabels.push(c.text),e.drawnLabelsRects.push(c)),n+=t},g=0;g<=h-1;g++)d(g);if(void 0!==i.config.xaxis.title.text){var u=a.group({class:"apexcharts-xaxis-title"}),f=a.drawText({x:i.globals.gridWidth/2+i.config.xaxis.title.offsetX,y:this.offY-parseFloat(this.xaxisFontSize)+i.globals.xAxisLabelsHeight+i.config.xaxis.title.offsetY,text:i.config.xaxis.title.text,textAnchor:"middle",fontSize:i.config.xaxis.title.style.fontSize,fontFamily:i.config.xaxis.title.style.fontFamily,fontWeight:i.config.xaxis.title.style.fontWeight,foreColor:i.config.xaxis.title.style.color,cssClass:"apexcharts-xaxis-title-text "+i.config.xaxis.title.style.cssClass});u.add(f),s.add(u)}if(i.config.xaxis.axisBorder.show){var x=0;"bar"===i.config.chart.type&&i.globals.isXNumeric&&(x-=15);var b=a.drawLine(i.globals.padHorizontal+x+i.config.xaxis.axisBorder.offsetX,this.offY,this.xaxisBorderWidth,this.offY,i.config.xaxis.axisBorder.color,0,this.xaxisBorderHeight);s.add(b)}return s}},{key:"drawXaxisInversed",value:function(t){var e,i,a=this.w,s=new p(this.ctx),r=a.config.yaxis[0].opposite?a.globals.translateYAxisX[t]:0,n=s.group({class:"apexcharts-yaxis apexcharts-xaxis-inversed",rel:t}),o=s.group({class:"apexcharts-yaxis-texts-g apexcharts-xaxis-inversed-texts-g",transform:"translate("+r+", 0)"});n.add(o);var l=[];if(a.config.yaxis[t].show)for(var h=0;h<this.xaxisLabels.length;h++)l.push(this.xaxisLabels[h]);i=-(e=a.globals.gridHeight/l.length)/2.2;var c=a.globals.yLabelFormatters[0],d=a.config.yaxis[0].labels;if(d.show)for(var g=0;g<=l.length-1;g++){var u=void 0===l[g]?"":l[g];u=c(u,{seriesIndex:t,dataPointIndex:g,w:a});var f=0;Array.isArray(u)&&(f=u.length/2*parseInt(d.style.fontSize,10));var x=s.drawText({x:d.offsetX-15,y:i+e+d.offsetY-f,text:u,textAnchor:this.yaxis.opposite?"start":"end",foreColor:Array.isArray(d.style.colors)?d.style.colors[g]:d.style.colors,fontSize:d.style.fontSize,fontFamily:d.style.fontFamily,fontWeight:d.style.fontWeight,isPlainText:!1,cssClass:"apexcharts-yaxis-label "+d.style.cssClass});o.add(x);var b=document.createElementNS(a.globals.SVGNS,"title");if(b.textContent=u.text,x.node.appendChild(b),0!==a.config.yaxis[t].labels.rotate){var m=s.rotateAroundCenter(x.node);x.node.setAttribute("transform","rotate(".concat(a.config.yaxis[t].labels.rotate," 0 ").concat(m.y,")"))}i+=e}if(void 0!==a.config.yaxis[0].title.text){var v=s.group({class:"apexcharts-yaxis-title apexcharts-xaxis-title-inversed",transform:"translate("+r+", 0)"}),y=s.drawText({x:0,y:a.globals.gridHeight/2,text:a.config.yaxis[0].title.text,textAnchor:"middle",foreColor:a.config.yaxis[0].title.style.color,fontSize:a.config.yaxis[0].title.style.fontSize,fontWeight:a.config.yaxis[0].title.style.fontWeight,fontFamily:a.config.yaxis[0].title.style.fontFamily,cssClass:"apexcharts-yaxis-title-text "+a.config.yaxis[0].title.style.cssClass});v.add(y),n.add(v)}var w=0;this.isCategoryBarHorizontal&&a.config.yaxis[0].opposite&&(w=a.globals.gridWidth);var k=a.config.xaxis.axisBorder;if(k.show){var A=s.drawLine(a.globals.padHorizontal+k.offsetX+w,1+k.offsetY,a.globals.padHorizontal+k.offsetX+w,a.globals.gridHeight+k.offsetY,k.color,0);n.add(A)}return a.config.yaxis[0].axisTicks.show&&this.axesUtils.drawYAxisTicks(w,l.length,a.config.yaxis[0].axisBorder,a.config.yaxis[0].axisTicks,0,e,n),n}},{key:"drawXaxisTicks",value:function(t,e){var i=this.w,a=t;if(!(t<0||t-2>i.globals.gridWidth)){var s=this.offY+i.config.xaxis.axisTicks.offsetY,r=s+i.config.xaxis.axisTicks.height;if("top"===i.config.xaxis.position&&(r=s-i.config.xaxis.axisTicks.height),i.config.xaxis.axisTicks.show){var n=new p(this.ctx).drawLine(t+i.config.xaxis.axisTicks.offsetX,s+i.config.xaxis.offsetY,a+i.config.xaxis.axisTicks.offsetX,r+i.config.xaxis.offsetY,i.config.xaxis.axisTicks.color);e.add(n),n.node.classList.add("apexcharts-xaxis-tick")}}}},{key:"getXAxisTicksPositions",value:function(){var t=this.w,e=[],i=this.xaxisLabels.length,a=t.globals.padHorizontal;if(t.globals.timescaleLabels.length>0)for(var s=0;s<i;s++)a=this.xaxisLabels[s].position,e.push(a);else for(var r=i,n=0;n<r;n++){var o=r;t.globals.isXNumeric&&"bar"!==t.config.chart.type&&(o-=1),a+=t.globals.gridWidth/o,e.push(a)}return e}},{key:"xAxisLabelCorrections",value:function(){var t=this.w,e=new p(this.ctx),i=t.globals.dom.baseEl.querySelector(".apexcharts-xaxis-texts-g"),a=t.globals.dom.baseEl.querySelectorAll(".apexcharts-xaxis-texts-g text"),s=t.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxis-inversed text"),r=t.globals.dom.baseEl.querySelectorAll(".apexcharts-xaxis-inversed-texts-g text tspan");if(t.globals.rotateXLabels||t.config.xaxis.labels.rotateAlways)for(var n=0;n<a.length;n++){var o=e.rotateAroundCenter(a[n]);o.y=o.y-1,o.x=o.x+1,a[n].setAttribute("transform","rotate(".concat(t.config.xaxis.labels.rotate," ").concat(o.x," ").concat(o.y,")")),a[n].setAttribute("text-anchor","end");i.setAttribute("transform","translate(0, ".concat(-10,")"));var l=a[n].childNodes;t.config.xaxis.labels.trim&&Array.prototype.forEach.call(l,(function(i){e.placeTextWithEllipsis(i,i.textContent,t.config.xaxis.labels.maxHeight-("bottom"===t.config.legend.position?20:10))}))}else!function(){for(var i=t.globals.gridWidth/(t.globals.labels.length+1),s=0;s<a.length;s++){var r=a[s].childNodes;t.config.xaxis.labels.trim&&"datetime"!==t.config.xaxis.type&&Array.prototype.forEach.call(r,(function(t){e.placeTextWithEllipsis(t,t.textContent,i)}))}}();if(s.length>0){var h=s[s.length-1].getBBox(),c=s[0].getBBox();h.x<-20&&s[s.length-1].parentNode.removeChild(s[s.length-1]),c.x+c.width>t.globals.gridWidth&&!t.globals.isBarHorizontal&&s[0].parentNode.removeChild(s[0]);for(var d=0;d<r.length;d++)e.placeTextWithEllipsis(r[d],r[d].textContent,t.config.yaxis[0].labels.maxWidth-2*parseFloat(t.config.yaxis[0].title.style.fontSize)-20)}}}]),t}(),_=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w;var a=this.w;this.xaxisLabels=a.globals.labels.slice(),this.axesUtils=new B(i),this.isTimelineBar="datetime"===a.config.xaxis.type&&a.globals.seriesRangeBarTimeline.length,a.globals.timescaleLabels.length>0&&(this.xaxisLabels=a.globals.timescaleLabels.slice())}return a(t,[{key:"drawGridArea",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=this.w,i=new p(this.ctx);null===t&&(t=i.group({class:"apexcharts-grid"}));var a=i.drawLine(e.globals.padHorizontal,1,e.globals.padHorizontal,e.globals.gridHeight,"transparent"),s=i.drawLine(e.globals.padHorizontal,e.globals.gridHeight,e.globals.gridWidth,e.globals.gridHeight,"transparent");return t.add(s),t.add(a),t}},{key:"drawGrid",value:function(){var t=null;return this.w.globals.axisCharts&&(t=this.renderGrid(),this.drawGridArea(t.el)),t}},{key:"createGridMask",value:function(){var t=this.w,e=t.globals,i=new p(this.ctx),a=Array.isArray(t.config.stroke.width)?0:t.config.stroke.width;if(Array.isArray(t.config.stroke.width)){var s=0;t.config.stroke.width.forEach((function(t){s=Math.max(s,t)})),a=s}e.dom.elGridRectMask=document.createElementNS(e.SVGNS,"clipPath"),e.dom.elGridRectMask.setAttribute("id","gridRectMask".concat(e.cuid)),e.dom.elGridRectMarkerMask=document.createElementNS(e.SVGNS,"clipPath"),e.dom.elGridRectMarkerMask.setAttribute("id","gridRectMarkerMask".concat(e.cuid));var r=t.config.chart.type,n=0,o=0;("bar"===r||"rangeBar"===r||t.globals.comboBarCount>0)&&t.globals.isXNumeric&&!t.globals.isBarHorizontal&&(n=t.config.grid.padding.left,o=t.config.grid.padding.right,e.barPadForNumericAxis>n&&(n=e.barPadForNumericAxis,o=e.barPadForNumericAxis)),e.dom.elGridRect=i.drawRect(-a/2-n-2,-a/2,e.gridWidth+a+o+n+4,e.gridHeight+a,0,"#fff"),new m(this).getLargestMarkerSize();var l=t.globals.markers.largestSize+1;e.dom.elGridRectMarker=i.drawRect(2*-l,2*-l,e.gridWidth+4*l,e.gridHeight+4*l,0,"#fff"),e.dom.elGridRectMask.appendChild(e.dom.elGridRect.node),e.dom.elGridRectMarkerMask.appendChild(e.dom.elGridRectMarker.node);var h=e.dom.baseEl.querySelector("defs");h.appendChild(e.dom.elGridRectMask),h.appendChild(e.dom.elGridRectMarkerMask)}},{key:"_drawGridLines",value:function(t){var e=t.i,i=t.x1,a=t.y1,s=t.x2,r=t.y2,n=t.xCount,o=t.parent,l=this.w;0===e&&l.globals.skipFirstTimelinelabel||e===n-1&&l.globals.skipLastTimelinelabel||"radar"===l.config.chart.type||(l.config.grid.xaxis.lines.show&&this._drawGridLine({x1:i,y1:a,x2:s,y2:r,parent:o}),new G(this.ctx).drawXaxisTicks(i,this.elg))}},{key:"_drawGridLine",value:function(t){var e=t.x1,i=t.y1,a=t.x2,s=t.y2,r=t.parent,n=this.w,o=n.config.grid.strokeDashArray,l=new p(this).drawLine(e,i,a,s,n.config.grid.borderColor,o);l.node.classList.add("apexcharts-gridline"),r.add(l)}},{key:"_drawGridBandRect",value:function(t){var e=t.c,i=t.x1,a=t.y1,s=t.x2,r=t.y2,n=t.type,o=this.w,l=new p(this.ctx);if("column"!==n||"datetime"!==o.config.xaxis.type){var h=o.config.grid[n].colors[e],c=l.drawRect(i,a,s,r,0,h,o.config.grid[n].opacity);this.elg.add(c),c.attr("clip-path","url(#gridRectMask".concat(o.globals.cuid,")")),c.node.classList.add("apexcharts-grid-".concat(n))}}},{key:"_drawXYLines",value:function(t){var e=this,i=t.xCount,a=t.tickAmount,s=this.w;if(s.config.grid.xaxis.lines.show||s.config.xaxis.axisTicks.show){var r=s.globals.padHorizontal,n=s.globals.gridHeight;s.globals.timescaleLabels.length?function(t){for(var a=t.xC,s=t.x1,r=t.y1,n=t.x2,o=t.y2,l=0;l<a;l++)s=e.xaxisLabels[l].position,n=e.xaxisLabels[l].position,e._drawGridLines({i:l,x1:s,y1:r,x2:n,y2:o,xCount:i,parent:e.elgridLinesV})}({xC:i,x1:r,y1:0,x2:void 0,y2:n}):(s.globals.isXNumeric&&(i=s.globals.xAxisScale.result.length),s.config.xaxis.convertedCatToNumeric&&(i=s.globals.xaxisLabelsCount),function(t){for(var a=t.xC,r=t.x1,n=t.y1,o=t.x2,l=t.y2,h=0;h<a+(s.globals.isXNumeric?0:1);h++)0===h&&1===a&&1===s.globals.dataPoints&&(o=r=s.globals.gridWidth/2),e._drawGridLines({i:h,x1:r,y1:n,x2:o,y2:l,xCount:i,parent:e.elgridLinesV}),o=r+=s.globals.gridWidth/(s.globals.isXNumeric?a-1:a)}({xC:i,x1:r,y1:0,x2:void 0,y2:n}))}if(s.config.grid.yaxis.lines.show){var o=0,l=0,h=s.globals.gridWidth,c=a+1;this.isTimelineBar&&(c=s.globals.labels.length);for(var d=0;d<c+(this.isTimelineBar?1:0);d++)this._drawGridLine({x1:0,y1:o,x2:h,y2:l,parent:this.elgridLinesH}),l=o+=s.globals.gridHeight/(this.isTimelineBar?c:a)}}},{key:"_drawInvertedXYLines",value:function(t){var e=t.xCount,i=this.w;if(i.config.grid.xaxis.lines.show||i.config.xaxis.axisTicks.show)for(var a,s=i.globals.padHorizontal,r=i.globals.gridHeight,n=0;n<e+1;n++){i.config.grid.xaxis.lines.show&&this._drawGridLine({x1:s,y1:0,x2:a,y2:r,parent:this.elgridLinesV}),new G(this.ctx).drawXaxisTicks(s,this.elg),a=s=s+i.globals.gridWidth/e+.3}if(i.config.grid.yaxis.lines.show)for(var o=0,l=0,h=i.globals.gridWidth,c=0;c<i.globals.dataPoints+1;c++)this._drawGridLine({x1:0,y1:o,x2:h,y2:l,parent:this.elgridLinesH}),l=o+=i.globals.gridHeight/i.globals.dataPoints}},{key:"renderGrid",value:function(){var t=this.w,e=new p(this.ctx);this.elg=e.group({class:"apexcharts-grid"}),this.elgridLinesH=e.group({class:"apexcharts-gridlines-horizontal"}),this.elgridLinesV=e.group({class:"apexcharts-gridlines-vertical"}),this.elg.add(this.elgridLinesH),this.elg.add(this.elgridLinesV),t.config.grid.show||(this.elgridLinesV.hide(),this.elgridLinesH.hide());for(var i,a=t.globals.yAxisScale.length?t.globals.yAxisScale[0].result.length-1:5,s=0;s<t.globals.series.length&&(void 0!==t.globals.yAxisScale[s]&&(a=t.globals.yAxisScale[s].result.length-1),!(a>2));s++);return!t.globals.isBarHorizontal||this.isTimelineBar?(i=this.xaxisLabels.length,this.isTimelineBar&&(a=t.globals.labels.length),this._drawXYLines({xCount:i,tickAmount:a})):(i=a,a=t.globals.xTickAmount,this._drawInvertedXYLines({xCount:i,tickAmount:a})),this.drawGridBands(i,a),{el:this.elg,xAxisTickWidth:t.globals.gridWidth/i}}},{key:"drawGridBands",value:function(t,e){var i=this.w;if(void 0!==i.config.grid.row.colors&&i.config.grid.row.colors.length>0)for(var a=0,s=i.globals.gridHeight/e,r=i.globals.gridWidth,n=0,o=0;n<e;n++,o++)o>=i.config.grid.row.colors.length&&(o=0),this._drawGridBandRect({c:o,x1:0,y1:a,x2:r,y2:s,type:"row"}),a+=i.globals.gridHeight/e;if(void 0!==i.config.grid.column.colors&&i.config.grid.column.colors.length>0)for(var l=i.globals.isBarHorizontal||"category"!==i.config.xaxis.type&&!i.config.xaxis.convertedCatToNumeric?t:t-1,h=i.globals.padHorizontal,c=i.globals.padHorizontal+i.globals.gridWidth/l,d=i.globals.gridHeight,g=0,u=0;g<t;g++,u++)u>=i.config.grid.column.colors.length&&(u=0),this._drawGridBandRect({c:u,x1:h,y1:0,x2:c,y2:d,type:"column"}),h+=i.globals.gridWidth/l}}]),t}(),j=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"niceScale",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:10,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,s=arguments.length>4?arguments[4]:void 0,r=this.w;if("dataPoints"===i&&(i=r.globals.dataPoints-1),t===Number.MIN_VALUE&&0===e||!g.isNumber(t)&&!g.isNumber(e)||t===Number.MIN_VALUE&&e===-Number.MAX_VALUE){t=0,e=i;var n=this.linearScale(t,e,i);return n}t>e?(console.warn("axis.min cannot be greater than axis.max"),e=t+.1):t===e&&(t=0===t?0:t-.5,e=0===e?2:e+.5);var o=[],l=Math.abs(e-t);l<1&&s&&("candlestick"===r.config.chart.type||"candlestick"===r.config.series[a].type||r.globals.isRangeData)&&(e*=1.01);var h=i+1;h<2?h=2:h>2&&(h-=2);var c=l/h,d=Math.floor(g.log10(c)),u=Math.pow(10,d),f=Math.round(c/u);f<1&&(f=1);var p=f*u,x=p*Math.floor(t/p),b=p*Math.ceil(e/p),m=x;if(s&&l>2){for(;o.push(m),!((m+=p)>b););return{result:o,niceMin:o[0],niceMax:o[o.length-1]}}var v=t;(o=[]).push(v);for(var y=Math.abs(e-t)/i,w=0;w<=i;w++)v+=y,o.push(v);return o[o.length-2]>=e&&o.pop(),{result:o,niceMin:o[0],niceMax:o[o.length-1]}}},{key:"linearScale",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:10,a=Math.abs(e-t),s=a/i;i===Number.MAX_VALUE&&(i=10,s=1);for(var r=[],n=t;i>=0;)r.push(n),n+=s,i-=1;return{result:r,niceMin:r[0],niceMax:r[r.length-1]}}},{key:"logarithmicScale",value:function(t,e,i,a){(e<0||e===Number.MIN_VALUE)&&(e=.01);for(var s=Math.log(e)/Math.log(10),r=Math.log(i)/Math.log(10),n=Math.abs(i-e)/a,o=[],l=e;a>=0;)o.push(l),l+=n,a-=1;var h=o.map((function(t,a){t<=0&&(t=.01);var n=(r-s)/(i-e),o=Math.pow(10,s+n*(t-s));return Math.round(o/g.roundToBase(o,10))*g.roundToBase(o,10)}));return 0===h[0]&&(h[0]=1),{result:h,niceMin:h[0],niceMax:h[h.length-1]}}},{key:"setYScaleForIndex",value:function(t,e,i){var a=this.w.globals,s=this.w.config,r=a.isBarHorizontal?s.xaxis:s.yaxis[t];void 0===a.yAxisScale[t]&&(a.yAxisScale[t]=[]);var n=Math.abs(i-e);if(r.logarithmic&&n<=5&&(a.invalidLogScale=!0),r.logarithmic&&n>5)a.allSeriesCollapsed=!1,a.yAxisScale[t]=this.logarithmicScale(t,e,i,r.tickAmount?r.tickAmount:Math.floor(Math.log10(i)));else if(i!==-Number.MAX_VALUE&&g.isNumber(i))if(a.allSeriesCollapsed=!1,void 0===r.min&&void 0===r.max||r.forceNiceScale){var o=void 0===s.yaxis[t].max&&void 0===s.yaxis[t].min||s.yaxis[t].forceNiceScale;a.yAxisScale[t]=this.niceScale(e,i,r.tickAmount?r.tickAmount:n<5&&n>1?n+1:5,t,o)}else a.yAxisScale[t]=this.linearScale(e,i,r.tickAmount);else a.yAxisScale[t]=this.linearScale(0,5,5)}},{key:"setXScale",value:function(t,e){var i=this.w,a=i.globals,s=i.config.xaxis,r=Math.abs(e-t);return e!==-Number.MAX_VALUE&&g.isNumber(e)?a.xAxisScale=this.niceScale(t,e,s.tickAmount?s.tickAmount:r<5&&r>1?r+1:5,0):a.xAxisScale=this.linearScale(0,5,5),a.xAxisScale}},{key:"setMultipleYScales",value:function(){var t=this,e=this.w.globals,i=this.w.config,a=e.minYArr.concat([]),s=e.maxYArr.concat([]),r=[];i.yaxis.forEach((function(e,n){var o=n;i.series.forEach((function(t,i){t.name===e.seriesName&&(o=i,n!==i?r.push({index:i,similarIndex:n,alreadyExists:!0}):r.push({index:i}))}));var l=a[o],h=s[o];t.setYScaleForIndex(n,l,h)})),this.sameScaleInMultipleAxes(a,s,r)}},{key:"sameScaleInMultipleAxes",value:function(t,e,i){var a=this,s=this.w.config,r=this.w.globals,n=[];i.forEach((function(t){t.alreadyExists&&(void 0===n[t.index]&&(n[t.index]=[]),n[t.index].push(t.index),n[t.index].push(t.similarIndex))})),r.yAxisSameScaleIndices=n,n.forEach((function(t,e){n.forEach((function(i,a){var s,r;e!==a&&(s=t,r=i,s.filter((function(t){return-1!==r.indexOf(t)}))).length>0&&(n[e]=n[e].concat(n[a]))}))}));var o=n.map((function(t){return t.filter((function(e,i){return t.indexOf(e)===i}))})).map((function(t){return t.sort()}));n=n.filter((function(t){return!!t}));var l=o.slice(),h=l.map((function(t){return JSON.stringify(t)}));l=l.filter((function(t,e){return h.indexOf(JSON.stringify(t))===e}));var c=[],d=[];t.forEach((function(t,i){l.forEach((function(a,s){a.indexOf(i)>-1&&(void 0===c[s]&&(c[s]=[],d[s]=[]),c[s].push({key:i,value:t}),d[s].push({key:i,value:e[i]}))}))}));var g=Array.apply(null,Array(l.length)).map(Number.prototype.valueOf,Number.MIN_VALUE),u=Array.apply(null,Array(l.length)).map(Number.prototype.valueOf,-Number.MAX_VALUE);c.forEach((function(t,e){t.forEach((function(t,i){g[e]=Math.min(t.value,g[e])}))})),d.forEach((function(t,e){t.forEach((function(t,i){u[e]=Math.max(t.value,u[e])}))})),t.forEach((function(t,e){d.forEach((function(t,i){var n=g[i],o=u[i];s.chart.stacked&&(o=0,t.forEach((function(t,e){t.value!==-Number.MAX_VALUE&&(o+=t.value),n!==Number.MIN_VALUE&&(n+=c[i][e].value)}))),t.forEach((function(i,l){t[l].key===e&&(void 0!==s.yaxis[e].min&&(n="function"==typeof s.yaxis[e].min?s.yaxis[e].min(r.minY):s.yaxis[e].min),void 0!==s.yaxis[e].max&&(o="function"==typeof s.yaxis[e].max?s.yaxis[e].max(r.maxY):s.yaxis[e].max),a.setYScaleForIndex(e,n,o))}))}))}))}},{key:"autoScaleY",value:function(t,e,i){t||(t=this);var a=t.w;if(a.globals.isMultipleYAxis||a.globals.collapsedSeries.length)return console.warn("autoScaleYaxis is not supported in a multi-yaxis chart."),e;var s=a.globals.seriesX[0],r=a.config.chart.stacked;return e.forEach((function(t,n){for(var o=0,l=0;l<s.length;l++)if(s[l]>=i.xaxis.min){o=l;break}var h,c,d=a.globals.minYArr[n],g=a.globals.maxYArr[n],u=a.globals.stackedSeriesTotals;a.globals.series.forEach((function(n,l){var f=n[o];r?(f=u[o],h=c=f,u.forEach((function(t,e){s[e]<=i.xaxis.max&&s[e]>=i.xaxis.min&&(t>c&&null!==t&&(c=t),n[e]<h&&null!==n[e]&&(h=n[e]))}))):(h=c=f,n.forEach((function(t,e){if(s[e]<=i.xaxis.max&&s[e]>=i.xaxis.min){var r=t,n=t;a.globals.series.forEach((function(i,a){null!==t&&(r=Math.min(i[e],r),n=Math.max(i[e],n))})),n>c&&null!==n&&(c=n),r<h&&null!==r&&(h=r)}}))),void 0===h&&void 0===c&&(h=d,c=g),(c*=c<0?.9:1.1)<0&&c<g&&(c=g),(h*=h<0?1.1:.9)<0&&h>d&&(h=d),e.length>1?(e[l].min=void 0===t.min?h:t.min,e[l].max=void 0===t.max?c:t.max):(e[0].min=void 0===t.min?h:t.min,e[0].max=void 0===t.max?c:t.max)}))})),e}}]),t}(),U=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.scales=new j(i)}return a(t,[{key:"init",value:function(){this.setYRange(),this.setXRange(),this.setZRange()}},{key:"getMinYMaxY",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:Number.MAX_VALUE,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:-Number.MAX_VALUE,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,s=this.w.config,r=this.w.globals,n=-Number.MAX_VALUE,o=Number.MIN_VALUE;null===a&&(a=t+1);var l=r.series,h=l,c=l;"candlestick"===s.chart.type?(h=r.seriesCandleL,c=r.seriesCandleH):r.isRangeData&&(h=r.seriesRangeStart,c=r.seriesRangeEnd);for(var d=t;d<a;d++){r.dataPoints=Math.max(r.dataPoints,l[d].length);for(var u=0;u<r.series[d].length;u++){var f=l[d][u];null!==f&&g.isNumber(f)?(n=Math.max(n,c[d][u]),e=Math.min(e,h[d][u]),i=Math.max(i,h[d][u]),"candlestick"===this.w.config.chart.type&&(n=Math.max(n,r.seriesCandleO[d][u]),n=Math.max(n,r.seriesCandleH[d][u]),n=Math.max(n,r.seriesCandleL[d][u]),i=n=Math.max(n,r.seriesCandleC[d][u])),g.isFloat(f)&&(f=g.noExponents(f),r.yValueDecimal=Math.max(r.yValueDecimal,f.toString().split(".")[1].length)),o>h[d][u]&&h[d][u]<0&&(o=h[d][u])):r.hasNullValues=!0}}return"rangeBar"===s.chart.type&&r.seriesRangeStart.length&&r.isBarHorizontal&&"datetime"===s.xaxis.type&&(o=e),"bar"===s.chart.type&&(o<0&&n<0&&(n=0),o===Number.MIN_VALUE&&(o=0)),{minY:o,maxY:n,lowestY:e,highestY:i}}},{key:"setYRange",value:function(){var t=this.w.globals,e=this.w.config;t.maxY=-Number.MAX_VALUE,t.minY=Number.MIN_VALUE;var i=Number.MAX_VALUE;if(t.isMultipleYAxis)for(var a=0;a<t.series.length;a++){var s=this.getMinYMaxY(a,i,null,a+1);t.minYArr.push(s.minY),t.maxYArr.push(s.maxY),i=s.lowestY}var r=this.getMinYMaxY(0,i,null,t.series.length);if(t.minY=r.minY,t.maxY=r.maxY,i=r.lowestY,e.chart.stacked&&this._setStackedMinMax(),("line"===e.chart.type||"area"===e.chart.type||"candlestick"===e.chart.type||"rangeBar"===e.chart.type&&!t.isBarHorizontal)&&t.minY===Number.MIN_VALUE&&i!==-Number.MAX_VALUE&&i!==t.maxY){var n=t.maxY-i;i>=0&&i<=10&&(n=0),t.minY=i-5*n/100,i>0&&t.minY<0&&(t.minY=0),t.maxY=t.maxY+5*n/100}if(e.yaxis.forEach((function(e,i){void 0!==e.max&&("number"==typeof e.max?t.maxYArr[i]=e.max:"function"==typeof e.max&&(t.maxYArr[i]=e.max(t.maxY)),t.maxY=t.maxYArr[i]),void 0!==e.min&&("number"==typeof e.min?t.minYArr[i]=e.min:"function"==typeof e.min&&(t.minYArr[i]=e.min(t.minY)),t.minY=t.minYArr[i])})),t.isBarHorizontal){["min","max"].forEach((function(i){void 0!==e.xaxis[i]&&"number"==typeof e.xaxis[i]&&("min"===i?t.minY=e.xaxis[i]:t.maxY=e.xaxis[i])}))}return t.isMultipleYAxis?(this.scales.setMultipleYScales(),t.minY=i,t.yAxisScale.forEach((function(e,i){t.minYArr[i]=e.niceMin,t.maxYArr[i]=e.niceMax}))):(this.scales.setYScaleForIndex(0,t.minY,t.maxY),t.minY=t.yAxisScale[0].niceMin,t.maxY=t.yAxisScale[0].niceMax,t.minYArr[0]=t.yAxisScale[0].niceMin,t.maxYArr[0]=t.yAxisScale[0].niceMax),{minY:t.minY,maxY:t.maxY,minYArr:t.minYArr,maxYArr:t.maxYArr}}},{key:"setXRange",value:function(){var t=this.w.globals,e=this.w.config,i="numeric"===e.xaxis.type||"datetime"===e.xaxis.type||"category"===e.xaxis.type&&!t.noLabelsProvided||t.noLabelsProvided||t.isXNumeric;if(t.isXNumeric&&function(){for(var e=0;e<t.series.length;e++)if(t.labels[e])for(var i=0;i<t.labels[e].length;i++)null!==t.labels[e][i]&&g.isNumber(t.labels[e][i])&&(t.maxX=Math.max(t.maxX,t.labels[e][i]),t.initialMaxX=Math.max(t.maxX,t.labels[e][i]),t.minX=Math.min(t.minX,t.labels[e][i]),t.initialMinX=Math.min(t.minX,t.labels[e][i]))}(),t.noLabelsProvided&&0===e.xaxis.categories.length&&(t.maxX=t.labels[t.labels.length-1],t.initialMaxX=t.labels[t.labels.length-1],t.minX=1,t.initialMinX=1),t.isXNumeric||t.noLabelsProvided||t.dataFormatXNumeric){var a;if(void 0===e.xaxis.tickAmount?(a=Math.round(t.svgWidth/150),"numeric"===e.xaxis.type&&t.dataPoints<30&&(a=t.dataPoints-1),a>t.dataPoints&&0!==t.dataPoints&&(a=t.dataPoints-1)):"dataPoints"===e.xaxis.tickAmount?(t.series.length>1&&(a=t.series[t.maxValsInArrayIndex].length-1),t.isXNumeric&&(a=t.maxX-t.minX-1)):a=e.xaxis.tickAmount,t.xTickAmount=a,void 0!==e.xaxis.max&&"number"==typeof e.xaxis.max&&(t.maxX=e.xaxis.max),void 0!==e.xaxis.min&&"number"==typeof e.xaxis.min&&(t.minX=e.xaxis.min),void 0!==e.xaxis.range&&(t.minX=t.maxX-e.xaxis.range),t.minX!==Number.MAX_VALUE&&t.maxX!==-Number.MAX_VALUE)if(e.xaxis.convertedCatToNumeric&&!t.dataFormatXNumeric){for(var s=[],r=t.minX-1;r<t.maxX;r++)s.push(r+1);t.xAxisScale={result:s,niceMin:s[0],niceMax:s[s.length-1]}}else t.xAxisScale=this.scales.setXScale(t.minX,t.maxX);else t.xAxisScale=this.scales.linearScale(1,a,a),t.noLabelsProvided&&t.labels.length>0&&(t.xAxisScale=this.scales.linearScale(1,t.labels.length,a-1),t.seriesX=t.labels.slice());i&&(t.labels=t.xAxisScale.result.slice())}return t.isBarHorizontal&&t.labels.length&&(t.xTickAmount=t.labels.length),this._handleSingleDataPoint(),this._getMinXDiff(),{minX:t.minX,maxX:t.maxX}}},{key:"setZRange",value:function(){var t=this.w.globals;if(t.isDataXYZ)for(var e=0;e<t.series.length;e++)if(void 0!==t.seriesZ[e])for(var i=0;i<t.seriesZ[e].length;i++)null!==t.seriesZ[e][i]&&g.isNumber(t.seriesZ[e][i])&&(t.maxZ=Math.max(t.maxZ,t.seriesZ[e][i]),t.minZ=Math.min(t.minZ,t.seriesZ[e][i]))}},{key:"_handleSingleDataPoint",value:function(){var t=this.w.globals,e=this.w.config;if(t.minX===t.maxX){var i=new Y(this.ctx);if("datetime"===e.xaxis.type){var a=i.getDate(t.minX);a.setUTCDate(a.getDate()-2),t.minX=new Date(a).getTime();var s=i.getDate(t.maxX);s.setUTCDate(s.getDate()+2),t.maxX=new Date(s).getTime()}else("numeric"===e.xaxis.type||"category"===e.xaxis.type&&!t.noLabelsProvided)&&(t.minX=t.minX-2,t.initialMinX=t.minX,t.maxX=t.maxX+2,t.initialMaxX=t.maxX)}}},{key:"_getMinXDiff",value:function(){var t=this.w.globals;t.isXNumeric&&t.seriesX.forEach((function(e,i){1===e.length&&e.push(t.seriesX[t.maxValsInArrayIndex][t.seriesX[t.maxValsInArrayIndex].length-1]);var a=e.slice();a.sort((function(t,e){return t-e})),a.forEach((function(e,a){if(a>0){var s=e-t.seriesX[i][a-1];s>0&&(t.minXDiff=Math.min(s,t.minXDiff))}})),1===t.dataPoints&&t.minXDiff===Number.MAX_VALUE&&(t.minXDiff=.5)}))}},{key:"_setStackedMinMax",value:function(){var t=this.w.globals,e=[],i=[];if(t.series.length)for(var a=0;a<t.series[t.maxValsInArrayIndex].length;a++)for(var s=0,r=0,n=0;n<t.series.length;n++)null!==t.series[n][a]&&g.isNumber(t.series[n][a])&&(t.series[n][a]>0?s=s+parseFloat(t.series[n][a])+1e-4:r+=parseFloat(t.series[n][a])),n===t.series.length-1&&(e.push(s),i.push(r));for(var o=0;o<e.length;o++)t.maxY=Math.max(t.maxY,e[o]),t.minY=Math.min(t.minY,i[o])}}]),t}(),q=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w;var a=this.w;this.xaxisFontSize=a.config.xaxis.labels.style.fontSize,this.axisFontFamily=a.config.xaxis.labels.style.fontFamily,this.xaxisForeColors=a.config.xaxis.labels.style.colors,this.isCategoryBarHorizontal="bar"===a.config.chart.type&&a.config.plotOptions.bar.horizontal,this.xAxisoffX=0,"bottom"===a.config.xaxis.position&&(this.xAxisoffX=a.globals.gridHeight),this.drawnLabels=[],this.axesUtils=new B(i)}return a(t,[{key:"drawYaxis",value:function(t){var e=this.w,i=new p(this.ctx),a=e.config.yaxis[t].labels.style,s=a.fontSize,r=a.fontFamily,n=a.fontWeight,o=i.group({class:"apexcharts-yaxis",rel:t,transform:"translate("+e.globals.translateYAxisX[t]+", 0)"});if(this.axesUtils.isYAxisHidden(t))return o;var l=i.group({class:"apexcharts-yaxis-texts-g"});o.add(l);var h=e.globals.yAxisScale[t].result.length-1,c=e.globals.gridHeight/h,d=e.globals.translateY,g=e.globals.yLabelFormatters[t],u=e.globals.yAxisScale[t].result.slice();u=this.axesUtils.checkForReversedLabels(t,u);var f="";if(e.config.yaxis[t].labels.show)for(var x=function(o){var p=u[o];p=g(p,o);var x=e.config.yaxis[t].labels.padding;e.config.yaxis[t].opposite&&0!==e.config.yaxis.length&&(x*=-1);var b=i.drawText({x:x,y:d+h/10+e.config.yaxis[t].labels.offsetY+1,text:p,textAnchor:e.config.yaxis[t].opposite?"start":"end",fontSize:s,fontFamily:r,fontWeight:n,foreColor:Array.isArray(a.colors)?a.colors[o]:a.colors,isPlainText:!1,cssClass:"apexcharts-yaxis-label "+a.cssClass});if(o===h&&(f=b),l.add(b),0!==e.config.yaxis[t].labels.rotate){var m=i.rotateAroundCenter(f.node),v=i.rotateAroundCenter(b.node);b.node.setAttribute("transform","rotate(".concat(e.config.yaxis[t].labels.rotate," ").concat(m.x," ").concat(v.y,")"))}d+=c},b=h;b>=0;b--)x(b);if(void 0!==e.config.yaxis[t].title.text){var m=i.group({class:"apexcharts-yaxis-title"}),v=0;e.config.yaxis[t].opposite&&(v=e.globals.translateYAxisX[t]);var y=i.drawText({x:v,y:e.globals.gridHeight/2+e.globals.translateY+e.config.yaxis[t].title.offsetY,text:e.config.yaxis[t].title.text,textAnchor:"end",foreColor:e.config.yaxis[t].title.style.color,fontSize:e.config.yaxis[t].title.style.fontSize,fontWeight:e.config.yaxis[t].title.style.fontWeight,fontFamily:e.config.yaxis[t].title.style.fontFamily,cssClass:"apexcharts-yaxis-title-text "+e.config.yaxis[t].title.style.cssClass});m.add(y),o.add(m)}var w=e.config.yaxis[t].axisBorder,k=31+w.offsetX;if(e.config.yaxis[t].opposite&&(k=-31-w.offsetX),w.show){var A=i.drawLine(k,e.globals.translateY+w.offsetY-2,k,e.globals.gridHeight+e.globals.translateY+w.offsetY+2,w.color,0,w.width);o.add(A)}return e.config.yaxis[t].axisTicks.show&&this.axesUtils.drawYAxisTicks(k,h,w,e.config.yaxis[t].axisTicks,t,c,o),o}},{key:"drawYaxisInversed",value:function(t){var e=this.w,i=new p(this.ctx),a=i.group({class:"apexcharts-xaxis apexcharts-yaxis-inversed"}),s=i.group({class:"apexcharts-xaxis-texts-g",transform:"translate(".concat(e.globals.translateXAxisX,", ").concat(e.globals.translateXAxisY,")")});a.add(s);var r=e.globals.yAxisScale[t].result.length-1,n=e.globals.gridWidth/r+.1,o=n+e.config.xaxis.labels.offsetX,l=e.globals.xLabelFormatter,h=e.globals.yAxisScale[t].result.slice(),c=e.globals.timescaleLabels;c.length>0&&(this.xaxisLabels=c.slice(),r=(h=c.slice()).length),h=this.axesUtils.checkForReversedLabels(t,h);var d=c.length;if(e.config.xaxis.labels.show)for(var g=d?0:r;d?g<d:g>=0;d?g++:g--){var u=h[g];u=l(u,g);var f=e.globals.gridWidth+e.globals.padHorizontal-(o-n+e.config.xaxis.labels.offsetX);if(c.length){var x=this.axesUtils.getLabel(h,c,f,g,this.drawnLabels,this.xaxisFontSize);f=x.x,u=x.text,this.drawnLabels.push(x.text),0===g&&e.globals.skipFirstTimelinelabel&&(u=""),g===h.length-1&&e.globals.skipLastTimelinelabel&&(u="")}var b=i.drawText({x:f,y:this.xAxisoffX+e.config.xaxis.labels.offsetY+30-("top"===e.config.xaxis.position?e.globals.xAxisHeight+e.config.xaxis.axisTicks.height-2:0),text:u,textAnchor:"middle",foreColor:Array.isArray(this.xaxisForeColors)?this.xaxisForeColors[t]:this.xaxisForeColors,fontSize:this.xaxisFontSize,fontFamily:this.xaxisFontFamily,fontWeight:e.config.xaxis.labels.style.fontWeight,isPlainText:!1,cssClass:"apexcharts-xaxis-label "+e.config.xaxis.labels.style.cssClass});s.add(b),b.tspan(u);var m=document.createElementNS(e.globals.SVGNS,"title");m.textContent=u,b.node.appendChild(m),o+=n}return this.inversedYAxisTitleText(a),this.inversedYAxisBorder(a),a}},{key:"inversedYAxisBorder",value:function(t){var e=this.w,i=new p(this.ctx),a=e.config.xaxis.axisBorder;if(a.show){var s=0;"bar"===e.config.chart.type&&e.globals.isXNumeric&&(s-=15);var r=i.drawLine(e.globals.padHorizontal+s+a.offsetX,this.xAxisoffX,e.globals.gridWidth,this.xAxisoffX,a.color,0,a.height);t.add(r)}}},{key:"inversedYAxisTitleText",value:function(t){var e=this.w,i=new p(this.ctx);if(void 0!==e.config.xaxis.title.text){var a=i.group({class:"apexcharts-xaxis-title apexcharts-yaxis-title-inversed"}),s=i.drawText({x:e.globals.gridWidth/2+e.config.xaxis.title.offsetX,y:this.xAxisoffX+parseFloat(this.xaxisFontSize)+parseFloat(e.config.xaxis.title.style.fontSize)+e.config.xaxis.title.offsetY+20,text:e.config.xaxis.title.text,textAnchor:"middle",fontSize:e.config.xaxis.title.style.fontSize,fontFamily:e.config.xaxis.title.style.fontFamily,fontWeight:e.config.xaxis.title.style.fontWeight,cssClass:"apexcharts-xaxis-title-text "+e.config.xaxis.title.style.cssClass});a.add(s),t.add(a)}}},{key:"yAxisTitleRotate",value:function(t,e){var i=this.w,a=new p(this.ctx),s={width:0,height:0},r={width:0,height:0},n=i.globals.dom.baseEl.querySelector(" .apexcharts-yaxis[rel='".concat(t,"'] .apexcharts-yaxis-texts-g"));null!==n&&(s=n.getBoundingClientRect());var o=i.globals.dom.baseEl.querySelector(".apexcharts-yaxis[rel='".concat(t,"'] .apexcharts-yaxis-title text"));if(null!==o&&(r=o.getBoundingClientRect()),null!==o){var l=this.xPaddingForYAxisTitle(t,s,r,e);o.setAttribute("x",l.xPos-(e?10:0))}if(null!==o){var h=a.rotateAroundCenter(o);o.setAttribute("transform","rotate(".concat(e?"":"-").concat(i.config.yaxis[t].title.rotate," ").concat(h.x," ").concat(h.y,")"))}}},{key:"xPaddingForYAxisTitle",value:function(t,e,i,a){var s=this.w,r=0,n=0,o=10;return void 0===s.config.yaxis[t].title.text||t<0?{xPos:n,padd:0}:(a?(n=e.width+s.config.yaxis[t].title.offsetX+i.width/2+o/2,0===(r+=1)&&(n-=o/2)):(n=-1*e.width+s.config.yaxis[t].title.offsetX+o/2+i.width/2,s.globals.isBarHorizontal&&(o=25,n=-1*e.width-s.config.yaxis[t].title.offsetX-o)),{xPos:n,padd:o})}},{key:"setYAxisXPosition",value:function(t,e){var i=this.w,a=0,s=0,r=18,n=1;i.config.yaxis.length>1&&(this.multipleYs=!0),i.config.yaxis.map((function(o,l){var h=i.globals.ignoreYAxisIndexes.indexOf(l)>-1||!o.show||o.floating||0===t[l].width,c=t[l].width+e[l].width;o.opposite?i.globals.isBarHorizontal?(s=i.globals.gridWidth+i.globals.translateX-1,i.globals.translateYAxisX[l]=s-o.labels.offsetX):(s=i.globals.gridWidth+i.globals.translateX+n,h||(n=n+c+20),i.globals.translateYAxisX[l]=s-o.labels.offsetX+20):(a=i.globals.translateX-r,h||(r=r+c+20),i.globals.translateYAxisX[l]=a+o.labels.offsetX)}))}},{key:"setYAxisTextAlignments",value:function(){var t=this.w,e=t.globals.dom.baseEl.getElementsByClassName("apexcharts-yaxis");(e=g.listToArray(e)).forEach((function(e,i){var a=t.config.yaxis[i];if(void 0!==a.labels.align){var s=t.globals.dom.baseEl.querySelector(".apexcharts-yaxis[rel='".concat(i,"'] .apexcharts-yaxis-texts-g")),r=t.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxis[rel='".concat(i,"'] .apexcharts-yaxis-label"));r=g.listToArray(r);var n=s.getBoundingClientRect();"left"===a.labels.align?(r.forEach((function(t,e){t.setAttribute("text-anchor","start")})),a.opposite||s.setAttribute("transform","translate(-".concat(n.width,", 0)"))):"center"===a.labels.align?(r.forEach((function(t,e){t.setAttribute("text-anchor","middle")})),s.setAttribute("transform","translate(".concat(n.width/2*(a.opposite?1:-1),", 0)"))):"right"===a.labels.align&&(r.forEach((function(t,e){t.setAttribute("text-anchor","end")})),a.opposite&&s.setAttribute("transform","translate(".concat(n.width,", 0)")))}}))}}]),t}(),Z=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.documentEvent=g.bind(this.documentEvent,this)}return a(t,[{key:"addEventListener",value:function(t,e){var i=this.w;i.globals.events.hasOwnProperty(t)?i.globals.events[t].push(e):i.globals.events[t]=[e]}},{key:"removeEventListener",value:function(t,e){var i=this.w;if(i.globals.events.hasOwnProperty(t)){var a=i.globals.events[t].indexOf(e);-1!==a&&i.globals.events[t].splice(a,1)}}},{key:"fireEvent",value:function(t,e){var i=this.w;if(i.globals.events.hasOwnProperty(t)){e&&e.length||(e=[]);for(var a=i.globals.events[t],s=a.length,r=0;r<s;r++)a[r].apply(null,e)}}},{key:"setupEventHandlers",value:function(){var t=this,e=this.w,i=this.ctx,a=e.globals.dom.baseEl.querySelector(e.globals.chartClass);this.ctx.eventList.forEach((function(t){a.addEventListener(t,(function(t){var a=Object.assign({},e,{seriesIndex:e.globals.capturedSeriesIndex,dataPointIndex:e.globals.capturedDataPointIndex});"mousemove"===t.type||"touchmove"===t.type?"function"==typeof e.config.chart.events.mouseMove&&e.config.chart.events.mouseMove(t,i,a):("mouseup"===t.type&&1===t.which||"touchend"===t.type)&&("function"==typeof e.config.chart.events.click&&e.config.chart.events.click(t,i,a),i.ctx.events.fireEvent("click",[t,i,a]))}),{capture:!1,passive:!0})})),this.ctx.eventList.forEach((function(e){document.addEventListener(e,t.documentEvent)})),this.ctx.core.setupBrushHandler()}},{key:"documentEvent",value:function(t){var e=this.w,i=t.target.className;if("click"===t.type){var a=e.globals.dom.baseEl.querySelector(".apexcharts-menu");a&&a.classList.contains("apexcharts-menu-open")&&"apexcharts-menu-icon"!==i&&a.classList.remove("apexcharts-menu-open")}if("mousedown"===t.type){var s=e.globals.dom.Paper.select(".apexcharts-resizable-element").members;Array.prototype.forEach.call(s,(function(e){t.target.classList.contains("apexcharts-resizable-element")||t.target.classList.contains("svg_select_points")||e.selectize(!1)}))}e.globals.clientX="touchmove"===t.type?t.touches[0].clientX:t.clientX,e.globals.clientY="touchmove"===t.type?t.touches[0].clientY:t.clientY}}]),t}(),$=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"setCurrentLocaleValues",value:function(t){var e=this.w.config.chart.locales;window.Apex.chart&&window.Apex.chart.locales&&window.Apex.chart.locales.length>0&&(e=this.w.config.chart.locales.concat(window.Apex.chart.locales));var i=e.filter((function(e){return e.name===t}))[0];if(!i)throw new Error("Wrong locale name provided. Please make sure you set the correct locale name in options");var a=g.extend(A,i);this.w.globals.locale=a.options}}]),t}(),J=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"drawAxis",value:function(t,e){var i,a,s=this.w.globals,r=this.w.config,n=new G(this.ctx),o=new q(this.ctx);s.axisCharts&&"radar"!==t&&(s.isBarHorizontal?(a=o.drawYaxisInversed(0),i=n.drawXaxisInversed(0),s.dom.elGraphical.add(i),s.dom.elGraphical.add(a)):(i=n.drawXaxis(),s.dom.elGraphical.add(i),r.yaxis.map((function(t,e){-1===s.ignoreYAxisIndexes.indexOf(e)&&(a=o.drawYaxis(e),s.dom.Paper.add(a))}))));r.yaxis.map((function(t,e){-1===s.ignoreYAxisIndexes.indexOf(e)&&o.yAxisTitleRotate(e,t.opposite)}))}}]),t}(),Q=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"drawXCrosshairs",value:function(){var t=this.w,e=new p(this.ctx),i=new u(this.ctx),a=t.config.xaxis.crosshairs.fill.gradient,s=t.config.xaxis.crosshairs.dropShadow,r=t.config.xaxis.crosshairs.fill.type,n=a.colorFrom,o=a.colorTo,l=a.opacityFrom,h=a.opacityTo,c=a.stops,d=s.enabled,f=s.left,x=s.top,b=s.blur,m=s.color,v=s.opacity,y=t.config.xaxis.crosshairs.fill.color;if(t.config.xaxis.crosshairs.show){"gradient"===r&&(y=e.drawGradient("vertical",n,o,l,h,null,c,null));var w=e.drawRect();1===t.config.xaxis.crosshairs.width&&(w=e.drawLine()),w.attr({class:"apexcharts-xcrosshairs",x:0,y:0,y2:t.globals.gridHeight,width:g.isNumber(t.config.xaxis.crosshairs.width)?t.config.xaxis.crosshairs.width:0,height:t.globals.gridHeight,fill:y,filter:"none","fill-opacity":t.config.xaxis.crosshairs.opacity,stroke:t.config.xaxis.crosshairs.stroke.color,"stroke-width":t.config.xaxis.crosshairs.stroke.width,"stroke-dasharray":t.config.xaxis.crosshairs.stroke.dashArray}),d&&(w=i.dropShadow(w,{left:f,top:x,blur:b,color:m,opacity:v})),t.globals.dom.elGraphical.add(w)}}},{key:"drawYCrosshairs",value:function(){var t=this.w,e=new p(this.ctx),i=t.config.yaxis[0].crosshairs;if(t.config.yaxis[0].crosshairs.show){var a=e.drawLine(0,0,t.globals.gridWidth,0,i.stroke.color,i.stroke.dashArray,i.stroke.width);a.attr({class:"apexcharts-ycrosshairs"}),t.globals.dom.elGraphical.add(a)}var s=e.drawLine(0,0,t.globals.gridWidth,0,i.stroke.color,0,0);s.attr({class:"apexcharts-ycrosshairs-hidden"}),t.globals.dom.elGraphical.add(s)}}]),t}(),K=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"checkResponsiveConfig",value:function(t){var e=this,i=this.w,a=i.config;if(0!==a.responsive.length){var s=a.responsive.slice();s.sort((function(t,e){return t.breakpoint>e.breakpoint?1:e.breakpoint>t.breakpoint?-1:0})).reverse();var r=new D({}),n=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},a=s[0].breakpoint,n=window.innerWidth>0?window.innerWidth:screen.width;if(n>a){var o=m.extendArrayProps(r,i.globals.initialConfig,i);t=g.extend(o,t),t=g.extend(i.config,t),e.overrideResponsiveOptions(t)}else for(var l=0;l<s.length;l++)n<s[l].breakpoint&&(t=m.extendArrayProps(r,s[l].options,i),t=g.extend(i.config,t),e.overrideResponsiveOptions(t))};if(t){var o=m.extendArrayProps(r,t,i);o=g.extend(i.config,o),n(o=g.extend(o,t))}else n({})}}},{key:"overrideResponsiveOptions",value:function(t){var e=new D(t).init({responsiveOverride:!0});this.w.config=e}}]),t}(),tt=function(){function t(i){e(this,t),this.ctx=i,this.colors=[],this.w=i.w;var a=this.w;this.isColorFn=!1,this.isBarDistributed=a.config.plotOptions.bar.distributed&&("bar"===a.config.chart.type||"rangeBar"===a.config.chart.type)}return a(t,[{key:"init",value:function(){this.setDefaultColors()}},{key:"setDefaultColors",value:function(){var t=this,e=this.w,i=new g;if(e.globals.dom.elWrap.classList.add("apexcharts-theme-".concat(e.config.theme.mode)),void 0===e.config.colors?e.globals.colors=this.predefined():(e.globals.colors=e.config.colors,Array.isArray(e.config.colors)&&e.config.colors.length>0&&"function"==typeof e.config.colors[0]&&(e.globals.colors=e.config.series.map((function(i,a){var s=e.config.colors[a];return s||(s=e.config.colors[0]),"function"==typeof s?(t.isColorFn=!0,s({value:e.globals.axisCharts?e.globals.series[a][0]?e.globals.series[a][0]:0:e.globals.series[a],seriesIndex:a,dataPointIndex:a,w:e})):s})))),e.config.theme.monochrome.enabled){var a=[],s=e.globals.series.length;this.isBarDistributed&&(s=e.globals.series[0].length*e.globals.series.length);for(var r=e.config.theme.monochrome.color,n=1/(s/e.config.theme.monochrome.shadeIntensity),o=e.config.theme.monochrome.shadeTo,l=0,h=0;h<s;h++){var c=void 0;"dark"===o?(c=i.shadeColor(-1*l,r),l+=n):(c=i.shadeColor(l,r),l+=n),a.push(c)}e.globals.colors=a.slice()}var d=e.globals.colors.slice();this.pushExtraColors(e.globals.colors);["fill","stroke"].forEach((function(i){void 0===e.config[i].colors?e.globals[i].colors=t.isColorFn?e.config.colors:d:e.globals[i].colors=e.config[i].colors.slice(),t.pushExtraColors(e.globals[i].colors)})),void 0===e.config.dataLabels.style.colors?e.globals.dataLabels.style.colors=d:e.globals.dataLabels.style.colors=e.config.dataLabels.style.colors.slice(),this.pushExtraColors(e.globals.dataLabels.style.colors,50),void 0===e.config.plotOptions.radar.polygons.fill.colors?e.globals.radarPolygons.fill.colors=["dark"===e.config.theme.mode?"#202D48":"#fff"]:e.globals.radarPolygons.fill.colors=e.config.plotOptions.radar.polygons.fill.colors.slice(),this.pushExtraColors(e.globals.radarPolygons.fill.colors,20),void 0===e.config.markers.colors?e.globals.markers.colors=d:e.globals.markers.colors=e.config.markers.colors.slice(),this.pushExtraColors(e.globals.markers.colors)}},{key:"pushExtraColors",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,a=this.w,s=e||a.globals.series.length;if(null===i&&(i=this.isBarDistributed||"heatmap"===a.config.chart.type&&a.config.plotOptions.heatmap.colorScale.inverse),i&&(s=a.globals.series[0].length*a.globals.series.length),t.length<s)for(var r=s-t.length,n=0;n<r;n++)t.push(t[n])}},{key:"updateThemeOptions",value:function(t){t.chart=t.chart||{},t.tooltip=t.tooltip||{};var e=t.theme.mode||"light",i=t.theme.palette?t.theme.palette:"dark"===e?"palette4":"palette1",a=t.chart.foreColor?t.chart.foreColor:"dark"===e?"#f6f7f8":"#373d3f";return t.tooltip.theme=e,t.chart.foreColor=a,t.theme.palette=i,t}},{key:"predefined",value:function(){switch(this.w.config.theme.palette){case"palette1":this.colors=["#008FFB","#00E396","#FEB019","#FF4560","#775DD0"];break;case"palette2":this.colors=["#3f51b5","#03a9f4","#4caf50","#f9ce1d","#FF9800"];break;case"palette3":this.colors=["#33b2df","#546E7A","#d4526e","#13d8aa","#A5978B"];break;case"palette4":this.colors=["#4ecdc4","#c7f464","#81D4FA","#fd6a6a","#546E7A"];break;case"palette5":this.colors=["#2b908f","#f9a3a4","#90ee7e","#fa4443","#69d2e7"];break;case"palette6":this.colors=["#449DD1","#F86624","#EA3546","#662E9B","#C5D86D"];break;case"palette7":this.colors=["#D7263D","#1B998B","#2E294E","#F46036","#E2C044"];break;case"palette8":this.colors=["#662E9B","#F86624","#F9C80E","#EA3546","#43BCCD"];break;case"palette9":this.colors=["#5C4742","#A5978B","#8D5B4C","#5A2A27","#C4BBAF"];break;case"palette10":this.colors=["#A300D6","#7D02EB","#5653FE","#2983FF","#00B1F2"];break;default:this.colors=["#008FFB","#00E396","#FEB019","#FF4560","#775DD0"]}return this.colors}}]),t}(),et=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"draw",value:function(){this.drawTitleSubtitle("title"),this.drawTitleSubtitle("subtitle")}},{key:"drawTitleSubtitle",value:function(t){var e=this.w,i="title"===t?e.config.title:e.config.subtitle,a=e.globals.svgWidth/2,s=i.offsetY,r="middle";if("left"===i.align?(a=10,r="start"):"right"===i.align&&(a=e.globals.svgWidth-10,r="end"),a+=i.offsetX,s=s+parseInt(i.style.fontSize,10)+i.margin/2,void 0!==i.text){var n=new p(this.ctx).drawText({x:a,y:s,text:i.text,textAnchor:r,fontSize:i.style.fontSize,fontFamily:i.style.fontFamily,fontWeight:i.style.fontWeight,foreColor:i.style.color,opacity:1});n.node.setAttribute("class","apexcharts-".concat(t,"-text")),e.globals.dom.Paper.add(n)}}}]),t}(),it=function(){function t(i){e(this,t),this.w=i.w,this.dCtx=i}return a(t,[{key:"getTitleSubtitleCoords",value:function(t){var e=this.w,i=0,a=0,s="title"===t?e.config.title.floating:e.config.subtitle.floating,r=e.globals.dom.baseEl.querySelector(".apexcharts-".concat(t,"-text"));if(null!==r&&!s){var n=r.getBoundingClientRect();i=n.width,a=e.globals.axisCharts?n.height+5:n.height}return{width:i,height:a}}},{key:"getLegendsRect",value:function(){var t=this.w,e=t.globals.dom.baseEl.querySelector(".apexcharts-legend"),i=Object.assign({},g.getBoundingClientRect(e));return null!==e&&!t.config.legend.floating&&t.config.legend.show?this.dCtx.lgRect={x:i.x,y:i.y,height:i.height,width:0===i.height?0:i.width}:this.dCtx.lgRect={x:0,y:0,height:0,width:0},"left"!==t.config.legend.position&&"right"!==t.config.legend.position||1.5*this.dCtx.lgRect.width>t.globals.svgWidth&&(this.dCtx.lgRect.width=t.globals.svgWidth/1.5),this.dCtx.lgRect}},{key:"getLargestStringFromMultiArr",value:function(t,e){var i=t;if(this.w.globals.isMultiLineX){var a=e.map((function(t,e){return Array.isArray(t)?t.length:1})),s=Math.max.apply(Math,d(a));i=e[a.indexOf(s)]}return i}}]),t}(),at=function(){function t(i){e(this,t),this.w=i.w,this.dCtx=i}return a(t,[{key:"getxAxisLabelsCoords",value:function(){var t,e=this.w,i=e.globals.labels.slice();if(e.config.xaxis.convertedCatToNumeric&&0===i.length&&(i=e.globals.categoryLabels),e.globals.timescaleLabels.length>0){var a=this.getxAxisTimeScaleLabelsCoords();t={width:a.width,height:a.height},e.globals.rotateXLabels=!1}else{this.dCtx.lgWidthForSideLegends="left"!==e.config.legend.position&&"right"!==e.config.legend.position||e.config.legend.floating?0:this.dCtx.lgRect.width;var s=e.globals.xLabelFormatter,r=g.getLargestStringFromArr(i),n=this.dCtx.dimHelpers.getLargestStringFromMultiArr(r,i);e.globals.isBarHorizontal&&(n=r=e.globals.yAxisScale[0].result.reduce((function(t,e){return t.length>e.length?t:e}),0));var o=new W(this.dCtx.ctx),l=r;r=o.xLabelFormat(s,r,l),n=o.xLabelFormat(s,n,l),(e.config.xaxis.convertedCatToNumeric&&void 0===r||""===String(r).trim())&&(n=r="1");var h=new p(this.dCtx.ctx),c=h.getTextRects(r,e.config.xaxis.labels.style.fontSize),d=c;if(r!==n&&(d=h.getTextRects(n,e.config.xaxis.labels.style.fontSize)),(t={width:c.width>=d.width?c.width:d.width,height:c.height>=d.height?c.height:d.height}).width*i.length>e.globals.svgWidth-this.dCtx.lgWidthForSideLegends-this.dCtx.yAxisWidth-this.dCtx.gridPad.left-this.dCtx.gridPad.right&&0!==e.config.xaxis.labels.rotate||e.config.xaxis.labels.rotateAlways){if(!e.globals.isBarHorizontal){e.globals.rotateXLabels=!0;var u=function(t){return h.getTextRects(t,e.config.xaxis.labels.style.fontSize,e.config.xaxis.labels.style.fontFamily,"rotate(".concat(e.config.xaxis.labels.rotate," 0 0)"),!1)};c=u(r),r!==n&&(d=u(n)),t.height=(c.height>d.height?c.height:d.height)/1.5,t.width=c.width>d.width?c.width:d.width}}else e.globals.rotateXLabels=!1}return e.config.xaxis.labels.show||(t={width:0,height:0}),{width:t.width,height:t.height}}},{key:"getxAxisTitleCoords",value:function(){var t=this.w,e=0,i=0;if(void 0!==t.config.xaxis.title.text){var a=new p(this.dCtx.ctx).getTextRects(t.config.xaxis.title.text,t.config.xaxis.title.style.fontSize);e=a.width,i=a.height}return{width:e,height:i}}},{key:"getxAxisTimeScaleLabelsCoords",value:function(){var t,e=this.w;this.dCtx.timescaleLabels=e.globals.timescaleLabels.slice();var i=this.dCtx.timescaleLabels.map((function(t){return t.value})),a=i.reduce((function(t,e){return void 0===t?(console.error("You have possibly supplied invalid Date format. Please supply a valid JavaScript Date"),0):t.length>e.length?t:e}),0);return 1.05*(t=new p(this.dCtx.ctx).getTextRects(a,e.config.xaxis.labels.style.fontSize)).width*i.length>e.globals.gridWidth&&0!==e.config.xaxis.labels.rotate&&(e.globals.overlappingXLabels=!0),t}},{key:"additionalPaddingXLabels",value:function(t){var e=this,i=this.w,a=i.globals,s=i.config,r=s.xaxis.type,n=t.width;a.skipLastTimelinelabel=!1,a.skipFirstTimelinelabel=!1;var o=i.config.yaxis[0].opposite&&i.globals.isBarHorizontal,l=function(t,o){(function(t){return-1!==a.collapsedSeriesIndices.indexOf(t)})(o)||("datetime"!==r&&e.dCtx.gridPad.left<n/2-e.dCtx.yAxisWidthLeft&&!a.rotateXLabels&&!s.xaxis.labels.trim&&(e.dCtx.xPadLeft=n/2+1),function(t){if(e.dCtx.timescaleLabels&&e.dCtx.timescaleLabels.length){var s=e.dCtx.timescaleLabels[0],o=e.dCtx.timescaleLabels[e.dCtx.timescaleLabels.length-1].position+n/1.75-e.dCtx.yAxisWidthRight,l=s.position-n/1.75+e.dCtx.yAxisWidthLeft;o>a.gridWidth&&(a.skipLastTimelinelabel=!0),l<0&&(a.skipFirstTimelinelabel=!0)}else"datetime"===r?e.dCtx.gridPad.right<n&&!a.rotateXLabels&&(a.skipLastTimelinelabel=!0):"datetime"!==r&&e.dCtx.gridPad.right<n/2-e.dCtx.yAxisWidthRight&&!a.rotateXLabels&&("between"!==i.config.xaxis.tickPlacement||i.globals.isBarHorizontal)&&(e.dCtx.xPadRight=n/2+1)}())};s.yaxis.forEach((function(t,i){o?(e.dCtx.gridPad.left<n&&(e.dCtx.xPadLeft=n/2+1),e.dCtx.xPadRight=n/2+1):l(0,i)}))}}]),t}(),st=function(){function t(i){e(this,t),this.w=i.w,this.dCtx=i}return a(t,[{key:"getyAxisLabelsCoords",value:function(){var t=this,e=this.w,i=[],a=10,s=new B(this.dCtx.ctx);return e.config.yaxis.map((function(r,n){if(!s.isYAxisHidden(n)&&r.labels.show&&e.globals.yAxisScale[n].result.length){var o=e.globals.yLabelFormatters[n],l=o(e.globals.yAxisScale[n].niceMax,{seriesIndex:n,dataPointIndex:-1,w:e}),h=l;if(void 0!==l&&0!==l.length||(l=e.globals.yAxisScale[n].niceMax),e.globals.isBarHorizontal){a=0;var c=e.globals.labels.slice();l=o(l=g.getLargestStringFromArr(c),{seriesIndex:n,dataPointIndex:-1,w:e}),h=t.dCtx.dimHelpers.getLargestStringFromMultiArr(l,c)}var d=new p(t.dCtx.ctx),u=d.getTextRects(l,r.labels.style.fontSize),f=u;l!==h&&(f=d.getTextRects(h,r.labels.style.fontSize)),i.push({width:(f.width>u.width?f.width:u.width)+a,height:f.height>u.height?f.height:u.height})}else i.push({width:0,height:0})})),i}},{key:"getyAxisTitleCoords",value:function(){var t=this,e=this.w,i=[];return e.config.yaxis.map((function(e,a){if(e.show&&void 0!==e.title.text){var s=new p(t.dCtx.ctx).getTextRects(e.title.text,e.title.style.fontSize,e.title.style.fontFamily,"rotate(-90 0 0)",!1);i.push({width:s.width,height:s.height})}else i.push({width:0,height:0})})),i}},{key:"getTotalYAxisWidth",value:function(){var t=this.w,e=0,i=0,a=0,s=t.globals.yAxisScale.length>1?10:0,r=new B(this.dCtx.ctx),n=function(n,o){var l=t.config.yaxis[o].floating,h=0;n.width>0&&!l?(h=n.width+s,function(e){return t.globals.ignoreYAxisIndexes.indexOf(e)>-1}(o)&&(h=h-n.width-s)):h=l||r.isYAxisHidden(o)?0:5,t.config.yaxis[o].opposite?a+=h:i+=h,e+=h};return t.globals.yLabelsCoords.map((function(t,e){n(t,e)})),t.globals.yTitleCoords.map((function(t,e){n(t,e)})),t.globals.isBarHorizontal&&(e=t.globals.yLabelsCoords[0].width+t.globals.yTitleCoords[0].width+15),this.dCtx.yAxisWidthLeft=i,this.dCtx.yAxisWidthRight=a,e}}]),t}(),rt=function(){function t(i){e(this,t),this.w=i.w,this.dCtx=i}return a(t,[{key:"gridPadForColumnsInNumericAxis",value:function(t){var e=this.w;if(e.globals.noData||e.globals.allSeriesCollapsed)return 0;var i=e.config.chart.type,a=0,s="bar"===i||"rangeBar"===i?e.config.series.length:1;if(e.globals.comboBarCount>0&&(s=e.globals.comboBarCount),e.globals.collapsedSeries.forEach((function(t){"bar"!==t.type&&"rangeBar"!==t.type||(s-=1)})),e.config.chart.stacked&&(s=1),("bar"===i||"rangeBar"===i||e.globals.comboBarCount>0)&&e.globals.isXNumeric&&!e.globals.isBarHorizontal&&s>0){var r,n,o=Math.abs(e.globals.initialMaxX-e.globals.initialMinX);o<=3&&(o=e.globals.dataPoints),r=o/t,e.globals.minXDiff&&e.globals.minXDiff/r>0&&(n=e.globals.minXDiff/r),(a=n/s*parseInt(e.config.plotOptions.bar.columnWidth,10)/100)<1&&(a=1),a=a/(s>1?1:1.5)+5,e.globals.barPadForNumericAxis=a}return a}},{key:"gridPadFortitleSubtitle",value:function(){var t=this,e=this.w,i=e.globals,a=this.dCtx.isSparkline||!e.globals.axisCharts?0:10;["title","subtitle"].forEach((function(i){void 0!==e.config[i].text?a+=e.config[i].margin:a+=t.dCtx.isSparkline||!e.globals.axisCharts?0:5}));var s=e.config.series.length>1||!e.globals.axisCharts||e.config.legend.showForSingleSeries;e.config.legend.show&&"bottom"===e.config.legend.position&&!e.config.legend.floating&&s&&(a+=10);var r=this.dCtx.dimHelpers.getTitleSubtitleCoords("title"),n=this.dCtx.dimHelpers.getTitleSubtitleCoords("subtitle");i.gridHeight=i.gridHeight-r.height-n.height-a,i.translateY=i.translateY+r.height+n.height+a}},{key:"setGridXPosForDualYAxis",value:function(t,e){var i=this.w,a=new B(this.dCtx.ctx);i.config.yaxis.map((function(s,r){-1!==i.globals.ignoreYAxisIndexes.indexOf(r)||s.floating||a.isYAxisHidden(r)||s.opposite&&(i.globals.translateX=i.globals.translateX-(e[r].width+t[r].width)-parseInt(i.config.yaxis[r].labels.style.fontSize,10)/1.2-12)}))}}]),t}(),nt=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.lgRect={},this.yAxisWidth=0,this.yAxisWidthLeft=0,this.yAxisWidthRight=0,this.xAxisHeight=0,this.isSparkline=this.w.config.chart.sparkline.enabled,this.dimHelpers=new it(this),this.dimYAxis=new st(this),this.dimXAxis=new at(this),this.dimGrid=new rt(this),this.lgWidthForSideLegends=0,this.gridPad=this.w.config.grid.padding,this.xPadRight=0,this.xPadLeft=0}return a(t,[{key:"plotCoords",value:function(){var t=this.w.globals;this.lgRect=this.dimHelpers.getLegendsRect(),t.axisCharts?this.setDimensionsForAxisCharts():this.setDimensionsForNonAxisCharts(),this.dimGrid.gridPadFortitleSubtitle(),t.gridHeight=t.gridHeight-this.gridPad.top-this.gridPad.bottom,t.gridWidth=t.gridWidth-this.gridPad.left-this.gridPad.right-this.xPadRight-this.xPadLeft;var e=this.dimGrid.gridPadForColumnsInNumericAxis(t.gridWidth);t.gridWidth=t.gridWidth-2*e,t.translateX=t.translateX+this.gridPad.left+this.xPadLeft+(e>0?e+4:0),t.translateY=t.translateY+this.gridPad.top}},{key:"setDimensionsForAxisCharts",value:function(){var t=this,e=this.w,i=e.globals,a=this.dimYAxis.getyAxisLabelsCoords(),s=this.dimYAxis.getyAxisTitleCoords();e.globals.yLabelsCoords=[],e.globals.yTitleCoords=[],e.config.yaxis.map((function(t,i){e.globals.yLabelsCoords.push({width:a[i].width,index:i}),e.globals.yTitleCoords.push({width:s[i].width,index:i})})),this.yAxisWidth=this.dimYAxis.getTotalYAxisWidth();var r=this.dimXAxis.getxAxisLabelsCoords(),n=this.dimXAxis.getxAxisTitleCoords();this.conditionalChecksForAxisCoords(r,n),i.translateXAxisY=e.globals.rotateXLabels?this.xAxisHeight/8:-4,i.translateXAxisX=e.globals.rotateXLabels&&e.globals.isXNumeric&&e.config.xaxis.labels.rotate<=-45?-this.xAxisWidth/4:0,e.globals.isBarHorizontal&&(i.rotateXLabels=!1,i.translateXAxisY=parseInt(e.config.xaxis.labels.style.fontSize,10)/1.5*-1),i.translateXAxisY=i.translateXAxisY+e.config.xaxis.labels.offsetY,i.translateXAxisX=i.translateXAxisX+e.config.xaxis.labels.offsetX;var o=this.yAxisWidth,l=this.xAxisHeight;i.xAxisLabelsHeight=this.xAxisHeight,i.xAxisHeight=this.xAxisHeight;var h=10;("radar"===e.config.chart.type||this.isSparkline)&&(o=0,l=i.goldenPadding),this.isSparkline&&(this.lgRect={height:0,width:0},l=0,o=0,h=0),this.dimXAxis.additionalPaddingXLabels(r);var c=function(){i.translateX=o,i.gridHeight=i.svgHeight-t.lgRect.height-l-(t.isSparkline?0:e.globals.rotateXLabels?10:15),i.gridWidth=i.svgWidth-o};switch("top"===e.config.xaxis.position&&(h=i.xAxisHeight-e.config.xaxis.axisTicks.height-5),e.config.legend.position){case"bottom":i.translateY=h,c();break;case"top":i.translateY=this.lgRect.height+h,c();break;case"left":i.translateY=h,i.translateX=this.lgRect.width+o,i.gridHeight=i.svgHeight-l-12,i.gridWidth=i.svgWidth-this.lgRect.width-o;break;case"right":i.translateY=h,i.translateX=o,i.gridHeight=i.svgHeight-l-12,i.gridWidth=i.svgWidth-this.lgRect.width-o-5;break;default:throw new Error("Legend position not supported")}this.dimGrid.setGridXPosForDualYAxis(s,a),new q(this.ctx).setYAxisXPosition(a,s)}},{key:"setDimensionsForNonAxisCharts",value:function(){var t=this.w,e=t.globals,i=t.config,a=0;t.config.legend.show&&!t.config.legend.floating&&(a=20);var s="pie"===i.chart.type||"polarArea"===i.chart.type||"donut"===i.chart.type?"pie":"radialBar",r=i.plotOptions[s].offsetY,n=i.plotOptions[s].offsetX;if(!i.legend.show||i.legend.floating)return e.gridHeight=e.svgHeight-i.grid.padding.left+i.grid.padding.right,e.gridWidth=e.gridHeight,e.translateY=r,void(e.translateX=n+(e.svgWidth-e.gridWidth)/2);switch(i.legend.position){case"bottom":e.gridHeight=e.svgHeight-this.lgRect.height-e.goldenPadding,e.gridWidth=e.gridHeight,e.translateY=r-10,e.translateX=n+(e.svgWidth-e.gridWidth)/2;break;case"top":e.gridHeight=e.svgHeight-this.lgRect.height-e.goldenPadding,e.gridWidth=e.gridHeight,e.translateY=this.lgRect.height+r+10,e.translateX=n+(e.svgWidth-e.gridWidth)/2;break;case"left":e.gridWidth=e.svgWidth-this.lgRect.width-a,e.gridHeight="auto"!==i.chart.height?e.svgHeight:e.gridWidth,e.translateY=r,e.translateX=n+this.lgRect.width+a;break;case"right":e.gridWidth=e.svgWidth-this.lgRect.width-a-5,e.gridHeight="auto"!==i.chart.height?e.svgHeight:e.gridWidth,e.translateY=r,e.translateX=n+10;break;default:throw new Error("Legend position not supported")}}},{key:"conditionalChecksForAxisCoords",value:function(t,e){var i=this.w;this.xAxisHeight=(t.height+e.height)*(i.globals.isMultiLineX?1.2:i.globals.LINE_HEIGHT_RATIO)+(i.globals.rotateXLabels?22:10),this.xAxisWidth=t.width,this.xAxisHeight-e.height>i.config.xaxis.labels.maxHeight&&(this.xAxisHeight=i.config.xaxis.labels.maxHeight),i.config.xaxis.labels.minHeight&&this.xAxisHeight<i.config.xaxis.labels.minHeight&&(this.xAxisHeight=i.config.xaxis.labels.minHeight),i.config.xaxis.floating&&(this.xAxisHeight=0);var a=0,s=0;i.config.yaxis.forEach((function(t){a+=t.labels.minWidth,s+=t.labels.maxWidth})),this.yAxisWidth<a&&(this.yAxisWidth=a),this.yAxisWidth>s&&(this.yAxisWidth=s)}}]),t}(),ot=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"drawYAxisTexts",value:function(t,e,i,a){var s=this.w,r=s.config.yaxis[0],n=s.globals.yLabelFormatters[0];return new p(this.ctx).drawText({x:t+r.labels.offsetX,y:e+r.labels.offsetY,text:n(a,i),textAnchor:"middle",fontSize:r.labels.style.fontSize,fontFamily:r.labels.style.fontFamily,foreColor:r.labels.style.color})}}]),t}(),lt=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.chartType=this.w.config.chart.type,this.initialAnim=this.w.config.chart.animations.enabled,this.dynamicAnim=this.initialAnim&&this.w.config.chart.animations.dynamicAnimation.enabled,this.animBeginArr=[0],this.animDur=0,this.donutDataLabels=this.w.config.plotOptions.pie.donut.labels;var a=this.w;this.lineColorArr=void 0!==a.globals.stroke.colors?a.globals.stroke.colors:a.globals.colors,this.defaultSize=a.globals.svgHeight<a.globals.svgWidth?a.globals.gridHeight:a.globals.gridWidth,this.centerY=this.defaultSize/2,this.centerX=a.globals.gridWidth/2,this.fullAngle=360,a.globals.radialSize=this.defaultSize/2.05-a.config.stroke.width-(a.config.chart.sparkline.enabled?0:a.config.chart.dropShadow.blur),this.donutSize=a.globals.radialSize*parseInt(a.config.plotOptions.pie.donut.size,10)/100,this.maxY=0,this.sliceLabels=[],this.sliceSizes=[],this.prevSectorAngleArr=[]}return a(t,[{key:"draw",value:function(t){var e=this,i=this.w,a=new p(this.ctx);if(this.ret=a.group({class:"apexcharts-pie"}),i.globals.noData)return this.ret;for(var s=0,r=0;r<t.length;r++)s+=g.negToZero(t[r]);var n=[],o=a.group();0===s&&(s=1e-5),t.forEach((function(t){e.maxY=Math.max(e.maxY,t)})),"polarArea"===this.chartType&&this.drawPolarElements();for(var l=0;l<t.length;l++){var h=this.fullAngle*g.negToZero(t[l])/s;n.push(h),"polarArea"===this.chartType?(n[l]=this.fullAngle/t.length,this.sliceSizes.push(i.globals.radialSize*t[l]/this.maxY)):this.sliceSizes.push(i.globals.radialSize)}if(i.globals.dataChanged){for(var c,d=0,u=0;u<i.globals.previousPaths.length;u++)d+=g.negToZero(i.globals.previousPaths[u]);for(var f=0;f<i.globals.previousPaths.length;f++)c=this.fullAngle*g.negToZero(i.globals.previousPaths[f])/d,this.prevSectorAngleArr.push(c)}this.donutSize<0&&(this.donutSize=0);var x=i.config.plotOptions.pie.customScale,b=i.globals.gridWidth/2,m=i.globals.gridHeight/2,v=b-i.globals.gridWidth/2*x,y=m-i.globals.gridHeight/2*x;if("donut"===this.chartType){var w=a.drawCircle(this.donutSize);w.attr({cx:this.centerX,cy:this.centerY,fill:i.config.plotOptions.pie.donut.background?i.config.plotOptions.pie.donut.background:"transparent"}),o.add(w)}var k=this.drawArcs(n,t);if(this.sliceLabels.forEach((function(t){k.add(t)})),o.attr({transform:"translate(".concat(v,", ").concat(y,") scale(").concat(x,")")}),o.add(k),this.ret.add(o),this.donutDataLabels.show){var A=this.renderInnerDataLabels(this.donutDataLabels,{hollowSize:this.donutSize,centerX:this.centerX,centerY:this.centerY,opacity:this.donutDataLabels.show,translateX:v,translateY:y});this.ret.add(A)}return this.ret}},{key:"drawArcs",value:function(t,e){var i=this.w,a=new u(this.ctx),s=new p(this.ctx),r=new L(this.ctx),n=s.group({class:"apexcharts-slices"}),o=0,l=0,h=0,c=0;this.strokeWidth=i.config.stroke.show?i.config.stroke.width:0;for(var d=0;d<t.length;d++){var f=s.group({class:"apexcharts-series apexcharts-pie-series",seriesName:g.escapeString(i.globals.seriesNames[d]),rel:d+1,"data:realIndex":d});n.add(f),l=c,h=(o=h)+t[d],c=l+this.prevSectorAngleArr[d];var x=h-o,b=r.fillPath({seriesNumber:d,size:this.sliceSizes[d],value:e[d]}),m=this.getChangedPath(l,c),v=s.drawPath({d:m,stroke:this.lineColorArr instanceof Array?this.lineColorArr[d]:this.lineColorArr,strokeWidth:0,fill:b,fillOpacity:i.config.fill.opacity,classes:"apexcharts-pie-area apexcharts-".concat(this.chartType.toLowerCase(),"-slice-").concat(d)});if(v.attr({index:0,j:d}),i.config.chart.dropShadow.enabled){var y=i.config.chart.dropShadow;a.dropShadow(v,y,d)}this.addListeners(v,this.donutDataLabels),p.setAttrs(v.node,{"data:angle":x,"data:startAngle":o,"data:strokeWidth":this.strokeWidth,"data:value":e[d]});var w={x:0,y:0};"pie"===this.chartType||"polarArea"===this.chartType?w=g.polarToCartesian(this.centerX,this.centerY,i.globals.radialSize/1.25+i.config.plotOptions.pie.dataLabels.offset,o+(h-o)/2):"donut"===this.chartType&&(w=g.polarToCartesian(this.centerX,this.centerY,(i.globals.radialSize+this.donutSize)/2+i.config.plotOptions.pie.dataLabels.offset,o+(h-o)/2)),f.add(v);var k=0;if(!this.initialAnim||i.globals.resized||i.globals.dataChanged?this.animBeginArr.push(0):(0===(k=(h-o)/this.fullAngle*i.config.chart.animations.speed)&&(k=1),this.animDur=k+this.animDur,this.animBeginArr.push(this.animDur)),this.dynamicAnim&&i.globals.dataChanged?this.animatePaths(v,{size:this.sliceSizes[d],endAngle:h,startAngle:o,prevStartAngle:l,prevEndAngle:c,animateStartingPos:!0,i:d,animBeginArr:this.animBeginArr,shouldSetPrevPaths:!0,dur:i.config.chart.animations.dynamicAnimation.speed}):this.animatePaths(v,{size:this.sliceSizes[d],endAngle:h,startAngle:o,i:d,totalItems:t.length-1,animBeginArr:this.animBeginArr,dur:k}),i.config.plotOptions.pie.expandOnClick&&"polarArea"!==this.chartType&&v.click(this.pieClicked.bind(this,d)),i.config.dataLabels.enabled){var A=w.x,S=w.y,C=100*(h-o)/360+"%";if(0!==x&&i.config.plotOptions.pie.dataLabels.minAngleToShowLabel<t[d]){var P=i.config.dataLabels.formatter;void 0!==P&&(C=P(i.globals.seriesPercent[d][0],{seriesIndex:d,w:i}));var T=i.globals.dataLabels.style.colors[d],z=s.drawText({x:A,y:S,text:C,textAnchor:"middle",fontSize:i.config.dataLabels.style.fontSize,fontFamily:i.config.dataLabels.style.fontFamily,fontWeight:i.config.dataLabels.style.fontWeight,foreColor:T});if(i.config.dataLabels.dropShadow.enabled){var I=i.config.dataLabels.dropShadow;a.dropShadow(z,I)}z.node.classList.add("apexcharts-pie-label"),i.config.chart.animations.animate&&!1===i.globals.resized&&(z.node.classList.add("apexcharts-pie-label-delay"),z.node.style.animationDelay=i.config.chart.animations.speed/940+"s"),this.sliceLabels.push(z)}}}return n}},{key:"addListeners",value:function(t,e){var i=new p(this.ctx);t.node.addEventListener("mouseenter",i.pathMouseEnter.bind(this,t)),t.node.addEventListener("mouseleave",i.pathMouseLeave.bind(this,t)),t.node.addEventListener("mouseleave",this.revertDataLabelsInner.bind(this,t.node,e)),t.node.addEventListener("mousedown",i.pathMouseDown.bind(this,t)),this.donutDataLabels.total.showAlways||(t.node.addEventListener("mouseenter",this.printDataLabelsInner.bind(this,t.node,e)),t.node.addEventListener("mousedown",this.printDataLabelsInner.bind(this,t.node,e)))}},{key:"animatePaths",value:function(t,e){var i=this.w,a=e.endAngle-e.startAngle,s=a,r=e.startAngle,n=e.startAngle;void 0!==e.prevStartAngle&&void 0!==e.prevEndAngle&&(r=e.prevEndAngle,s=e.prevEndAngle-e.prevStartAngle),e.i===i.config.series.length-1&&(a+n>this.fullAngle?e.endAngle=e.endAngle-(a+n):a+n<this.fullAngle&&(e.endAngle=e.endAngle+(this.fullAngle-(a+n)))),a===this.fullAngle&&(a=this.fullAngle-.01),this.animateArc(t,r,n,a,s,e)}},{key:"animateArc",value:function(t,e,i,a,s,r){var n,o=this,l=this.w,h=new f(this.ctx),c=r.size;(isNaN(e)||isNaN(s))&&(e=i,s=a,r.dur=0);var d=a,g=i,u=e-i;l.globals.dataChanged&&r.shouldSetPrevPaths&&r.prevEndAngle&&(n=o.getPiePath({me:o,startAngle:r.prevStartAngle,angle:r.prevEndAngle-r.prevStartAngle,size:c}),t.attr({d:n})),0!==r.dur?t.animate(r.dur,l.globals.easing,r.animBeginArr[r.i]).afterAll((function(){"pie"!==o.chartType&&"donut"!==o.chartType&&"polarArea"!==o.chartType||this.animate(l.config.chart.animations.dynamicAnimation.speed).attr({"stroke-width":o.strokeWidth}),r.i===l.config.series.length-1&&h.animationCompleted(t)})).during((function(l){d=u+(a-u)*l,r.animateStartingPos&&(d=s+(a-s)*l,g=e-s+(i-(e-s))*l),n=o.getPiePath({me:o,startAngle:g,angle:d,size:c}),t.node.setAttribute("data:pathOrig",n),t.attr({d:n})})):(n=o.getPiePath({me:o,startAngle:g,angle:a,size:c}),r.isTrack||(l.globals.animationEnded=!0),t.node.setAttribute("data:pathOrig",n),t.attr({d:n,"stroke-width":o.strokeWidth}))}},{key:"pieClicked",value:function(t){var e,i=this.w,a=this.sliceSizes[t]+(i.config.plotOptions.pie.expandOnClick?4:0),s=i.globals.dom.Paper.select(".apexcharts-".concat(this.chartType.toLowerCase(),"-slice-").concat(t)).members[0];if("true"!==s.attr("data:pieClicked")){var r=i.globals.dom.baseEl.getElementsByClassName("apexcharts-pie-area");Array.prototype.forEach.call(r,(function(t){t.setAttribute("data:pieClicked","false");var e=t.getAttribute("data:pathOrig");t.setAttribute("d",e)})),s.attr("data:pieClicked","true");var n=parseInt(s.attr("data:startAngle"),10),o=parseInt(s.attr("data:angle"),10);e=this.getPiePath({me:this,startAngle:n,angle:o,size:a}),360!==o&&s.plot(e)}else{s.attr({"data:pieClicked":"false"}),this.revertDataLabelsInner(s.node,this.donutDataLabels);var l=s.attr("data:pathOrig");s.attr({d:l})}}},{key:"getChangedPath",value:function(t,e){var i="";return this.dynamicAnim&&this.w.globals.dataChanged&&(i=this.getPiePath({me:this,startAngle:t,angle:e-t,size:this.size})),i}},{key:"getPiePath",value:function(t){var e=t.me,i=t.startAngle,a=t.angle,s=t.size,r=i,n=Math.PI*(r-90)/180,o=a+i;Math.ceil(o)>=360&&(o=359.99);var l=Math.PI*(o-90)/180,h=e.centerX+s*Math.cos(n),c=e.centerY+s*Math.sin(n),d=e.centerX+s*Math.cos(l),u=e.centerY+s*Math.sin(l),f=g.polarToCartesian(e.centerX,e.centerY,e.donutSize,o),p=g.polarToCartesian(e.centerX,e.centerY,e.donutSize,r),x=a>180?1:0,b=["M",h,c,"A",s,s,0,x,1,d,u];return"donut"===e.chartType?[].concat(b,["L",f.x,f.y,"A",e.donutSize,e.donutSize,0,x,0,p.x,p.y,"L",h,c,"z"]).join(" "):"pie"===e.chartType||"polarArea"===e.chartType?[].concat(b,["L",e.centerX,e.centerY,"L",h,c]).join(" "):[].concat(b).join(" ")}},{key:"drawPolarElements",value:function(){var t=this.w,e=new j(this.ctx),i=new p(this.ctx),a=new ot(this.ctx),s=i.group(),r=i.group(),n=void 0===t.config.yaxis[0].max&&void 0===t.config.yaxis[0].min,o=e.niceScale(0,Math.ceil(this.maxY),t.config.yaxis[0].tickAmount,0,n),l=o.result.reverse(),h=o.result.length;this.maxY=o.niceMax;for(var c=t.globals.radialSize,d=c/(h-1),g=0;g<h-1;g++){var u=i.drawCircle(c);if(u.attr({cx:this.centerX,cy:this.centerY,fill:"none","stroke-width":t.config.plotOptions.polarArea.rings.strokeWidth,stroke:t.config.plotOptions.polarArea.rings.strokeColor}),t.config.yaxis[0].show){var f=a.drawYAxisTexts(this.centerX,this.centerY-c+parseInt(t.config.yaxis[0].labels.style.fontSize,10)/2,g,l[g]);r.add(f)}s.add(u),c-=d}this.ret.add(s),this.ret.add(r)}},{key:"renderInnerDataLabels",value:function(t,e){var i=this.w,a=new p(this.ctx),s=a.group({class:"apexcharts-datalabels-group",transform:"translate(".concat(e.translateX?e.translateX:0,", ").concat(e.translateY?e.translateY:0,") scale(").concat(i.config.plotOptions.pie.customScale,")")}),r=t.total.show;s.node.style.opacity=e.opacity;var n,o,l=e.centerX,h=e.centerY;n=void 0===t.name.color?i.globals.colors[0]:t.name.color;var c=t.name.fontSize,d=t.name.fontFamily,g=t.value.fontWeight;o=void 0===t.value.color?i.config.chart.foreColor:t.value.color;var u=t.value.formatter,f="",x="";if(r?(n=t.total.color,c=t.total.fontSize,d=t.total.fontFamily,g=t.total.fontWeight,x=t.total.label,f=t.total.formatter(i)):1===i.globals.series.length&&(f=u(i.globals.series[0],i),x=i.globals.seriesNames[0]),x&&(x=t.name.formatter(x,t.total.show,i)),t.name.show){var b=a.drawText({x:l,y:h+parseFloat(t.name.offsetY),text:x,textAnchor:"middle",foreColor:n,fontSize:c,fontWeight:g,fontFamily:d});b.node.classList.add("apexcharts-datalabel-label"),s.add(b)}if(t.value.show){var m=t.name.show?parseFloat(t.value.offsetY)+16:t.value.offsetY,v=a.drawText({x:l,y:h+m,text:f,textAnchor:"middle",foreColor:o,fontWeight:t.value.fontWeight,fontSize:t.value.fontSize,fontFamily:t.value.fontFamily});v.node.classList.add("apexcharts-datalabel-value"),s.add(v)}return s}},{key:"printInnerLabels",value:function(t,e,i,a){var s,r=this.w;a?s=void 0===t.name.color?r.globals.colors[parseInt(a.parentNode.getAttribute("rel"),10)-1]:t.name.color:r.globals.series.length>1&&t.total.show&&(s=t.total.color);var n=r.globals.dom.baseEl.querySelector(".apexcharts-datalabel-label"),o=r.globals.dom.baseEl.querySelector(".apexcharts-datalabel-value");i=(0,t.value.formatter)(i,r),a||"function"!=typeof t.total.formatter||(i=t.total.formatter(r));var l=e===t.total.label;e=t.name.formatter(e,l,r),null!==n&&(n.textContent=e),null!==o&&(o.textContent=i),null!==n&&(n.style.fill=s)}},{key:"printDataLabelsInner",value:function(t,e){var i=this.w,a=t.getAttribute("data:value"),s=i.globals.seriesNames[parseInt(t.parentNode.getAttribute("rel"),10)-1];i.globals.series.length>1&&this.printInnerLabels(e,s,a,t);var r=i.globals.dom.baseEl.querySelector(".apexcharts-datalabels-group");null!==r&&(r.style.opacity=1)}},{key:"revertDataLabelsInner",value:function(t,e,i){var a=this,s=this.w,r=s.globals.dom.baseEl.querySelector(".apexcharts-datalabels-group"),n=!1,o=s.globals.dom.baseEl.getElementsByClassName("apexcharts-pie-area"),l=function(t){var i=t.makeSliceOut,s=t.printLabel;Array.prototype.forEach.call(o,(function(t){"true"===t.getAttribute("data:pieClicked")&&(i&&(n=!0),s&&a.printDataLabelsInner(t,e))}))};if(l({makeSliceOut:!0,printLabel:!1}),e.total.show&&s.globals.series.length>1)n&&!e.total.showAlways?l({makeSliceOut:!1,printLabel:!0}):this.printInnerLabels(e,e.total.label,e.total.formatter(s));else if(l({makeSliceOut:!1,printLabel:!0}),!n)if(s.globals.selectedDataPoints.length&&s.globals.series.length>1)if(s.globals.selectedDataPoints[0].length>0){var h=s.globals.selectedDataPoints[0],c=s.globals.dom.baseEl.querySelector(".apexcharts-".concat(this.chartType.toLowerCase(),"-slice-").concat(h));this.printDataLabelsInner(c,e)}else r&&s.globals.selectedDataPoints.length&&0===s.globals.selectedDataPoints[0].length&&(r.style.opacity=0);else r&&s.globals.series.length>1&&(r.style.opacity=0)}}]),t}(),ht=function(){function t(i){e(this,t),this.w=i.w,this.lgCtx=i}return a(t,[{key:"getLegendStyles",value:function(){var t=document.createElement("style");t.setAttribute("type","text/css");var e=document.createTextNode("\t\n    \t\n      .apexcharts-legend {\t\n        display: flex;\t\n        overflow: auto;\t\n        padding: 0 10px;\t\n      }\t\n      .apexcharts-legend.position-bottom, .apexcharts-legend.position-top {\t\n        flex-wrap: wrap\t\n      }\t\n      .apexcharts-legend.position-right, .apexcharts-legend.position-left {\t\n        flex-direction: column;\t\n        bottom: 0;\t\n      }\t\n      .apexcharts-legend.position-bottom.apexcharts-align-left, .apexcharts-legend.position-top.apexcharts-align-left, .apexcharts-legend.position-right, .apexcharts-legend.position-left {\t\n        justify-content: flex-start;\t\n      }\t\n      .apexcharts-legend.position-bottom.apexcharts-align-center, .apexcharts-legend.position-top.apexcharts-align-center {\t\n        justify-content: center;  \t\n      }\t\n      .apexcharts-legend.position-bottom.apexcharts-align-right, .apexcharts-legend.position-top.apexcharts-align-right {\t\n        justify-content: flex-end;\t\n      }\t\n      .apexcharts-legend-series {\t\n        cursor: pointer;\t\n        line-height: normal;\t\n      }\t\n      .apexcharts-legend.position-bottom .apexcharts-legend-series, .apexcharts-legend.position-top .apexcharts-legend-series{\t\n        display: flex;\t\n        align-items: center;\t\n      }\t\n      .apexcharts-legend-text {\t\n        position: relative;\t\n        font-size: 14px;\t\n      }\t\n      .apexcharts-legend-text *, .apexcharts-legend-marker * {\t\n        pointer-events: none;\t\n      }\t\n      .apexcharts-legend-marker {\t\n        position: relative;\t\n        display: inline-block;\t\n        cursor: pointer;\t\n        margin-right: 3px;\t\n        border-style: solid;\n      }\t\n      \t\n      .apexcharts-legend.apexcharts-align-right .apexcharts-legend-series, .apexcharts-legend.apexcharts-align-left .apexcharts-legend-series{\t\n        display: inline-block;\t\n      }\t\n      .apexcharts-legend-series.apexcharts-no-click {\t\n        cursor: auto;\t\n      }\t\n      .apexcharts-legend .apexcharts-hidden-zero-series, .apexcharts-legend .apexcharts-hidden-null-series {\t\n        display: none !important;\t\n      }\t\n      .apexcharts-inactive-legend {\t\n        opacity: 0.45;\t\n      }");return t.appendChild(e),t}},{key:"getLegendBBox",value:function(){var t=this.w.globals.dom.baseEl.querySelector(".apexcharts-legend").getBoundingClientRect(),e=t.width;return{clwh:t.height,clww:e}}},{key:"appendToForeignObject",value:function(){var t=this.w.globals;t.dom.elLegendForeign=document.createElementNS(t.SVGNS,"foreignObject");var e=t.dom.elLegendForeign;e.setAttribute("x",0),e.setAttribute("y",0),e.setAttribute("width",t.svgWidth),e.setAttribute("height",t.svgHeight),t.dom.elLegendWrap.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),e.appendChild(t.dom.elLegendWrap),e.appendChild(this.getLegendStyles()),t.dom.Paper.node.insertBefore(e,t.dom.elGraphical.node)}},{key:"toggleDataSeries",value:function(t,e){var i=this,a=this.w;if(a.globals.axisCharts||"radialBar"===a.config.chart.type){a.globals.resized=!0;var s=null,r=null;if(a.globals.risingSeries=[],a.globals.axisCharts?(s=a.globals.dom.baseEl.querySelector(".apexcharts-series[data\\:realIndex='".concat(t,"']")),r=parseInt(s.getAttribute("data:realIndex"),10)):(s=a.globals.dom.baseEl.querySelector(".apexcharts-series[rel='".concat(t+1,"']")),r=parseInt(s.getAttribute("rel"),10)-1),e)[{cs:a.globals.collapsedSeries,csi:a.globals.collapsedSeriesIndices},{cs:a.globals.ancillaryCollapsedSeries,csi:a.globals.ancillaryCollapsedSeriesIndices}].forEach((function(t){i.riseCollapsedSeries(t.cs,t.csi,r)}));else this.hideSeries({seriesEl:s,realIndex:r})}else{var n=a.globals.dom.Paper.select(" .apexcharts-series[rel='".concat(t+1,"'] path")),o=a.config.chart.type;if("pie"===o||"polarArea"===o||"donut"===o){var l=a.config.plotOptions.pie.donut.labels,h=new p(this.lgCtx.ctx),c=new lt(this.lgCtx.ctx);h.pathMouseDown(n.members[0],null),c.printDataLabelsInner(n.members[0].node,l)}n.fire("click")}}},{key:"hideSeries",value:function(t){var e=t.seriesEl,i=t.realIndex,a=this.w;if(a.globals.axisCharts){var s=!1;if(a.config.yaxis[i]&&a.config.yaxis[i].show&&a.config.yaxis[i].showAlways&&(s=!0,a.globals.ancillaryCollapsedSeriesIndices.indexOf(i)<0&&(a.globals.ancillaryCollapsedSeries.push({index:i,data:a.config.series[i].data.slice(),type:e.parentNode.className.baseVal.split("-")[1]}),a.globals.ancillaryCollapsedSeriesIndices.push(i))),!s){a.globals.collapsedSeries.push({index:i,data:a.config.series[i].data.slice(),type:e.parentNode.className.baseVal.split("-")[1]}),a.globals.collapsedSeriesIndices.push(i);var r=a.globals.risingSeries.indexOf(i);a.globals.risingSeries.splice(r,1)}a.config.series[i].data=[]}else a.globals.collapsedSeries.push({index:i,data:a.config.series[i]}),a.globals.collapsedSeriesIndices.push(i),a.config.series[i]=0;for(var n=e.childNodes,o=0;o<n.length;o++)n[o].classList.contains("apexcharts-series-markers-wrap")&&(n[o].classList.contains("apexcharts-hide")?n[o].classList.remove("apexcharts-hide"):n[o].classList.add("apexcharts-hide"));a.globals.allSeriesCollapsed=a.globals.collapsedSeries.length===a.config.series.length,this.lgCtx.ctx.updateHelpers._updateSeries(a.config.series,a.config.chart.animations.dynamicAnimation.enabled)}},{key:"riseCollapsedSeries",value:function(t,e,i){var a=this.w;if(t.length>0)for(var s=0;s<t.length;s++)t[s].index===i&&(a.globals.axisCharts?(a.config.series[i].data=t[s].data.slice(),t.splice(s,1),e.splice(s,1),a.globals.risingSeries.push(i)):(a.config.series[i]=t[s].data,t.splice(s,1),e.splice(s,1),a.globals.risingSeries.push(i)),this.lgCtx.ctx.updateHelpers._updateSeries(a.config.series,a.config.chart.animations.dynamicAnimation.enabled))}}]),t}(),ct=function(){function t(i,a){e(this,t),this.ctx=i,this.w=i.w,this.onLegendClick=this.onLegendClick.bind(this),this.onLegendHovered=this.onLegendHovered.bind(this),this.isBarsDistributed="bar"===this.w.config.chart.type&&this.w.config.plotOptions.bar.distributed&&1===this.w.config.series.length,this.legendHelpers=new ht(this)}return a(t,[{key:"init",value:function(){var t=this.w,e=t.globals,i=t.config;if((i.legend.showForSingleSeries&&1===e.series.length||this.isBarsDistributed||e.series.length>1||!e.axisCharts)&&i.legend.show){for(;e.dom.elLegendWrap.firstChild;)e.dom.elLegendWrap.removeChild(e.dom.elLegendWrap.firstChild);this.drawLegends(),g.isIE11()?document.getElementsByTagName("head")[0].appendChild(this.legendHelpers.getLegendStyles()):this.legendHelpers.appendToForeignObject(),"bottom"===i.legend.position||"top"===i.legend.position?this.legendAlignHorizontal():"right"!==i.legend.position&&"left"!==i.legend.position||this.legendAlignVertical()}}},{key:"drawLegends",value:function(){var t=this.w,e=t.config.legend.fontFamily,i=t.globals.seriesNames,a=t.globals.colors.slice();if("heatmap"===t.config.chart.type){var s=t.config.plotOptions.heatmap.colorScale.ranges;i=s.map((function(t){return t.name?t.name:t.from+" - "+t.to})),a=s.map((function(t){return t.color}))}else this.isBarsDistributed&&(i=t.globals.labels.slice());for(var r=t.globals.legendFormatter,n=t.config.legend.inverseOrder,o=n?i.length-1:0;n?o>=0:o<=i.length-1;n?o--:o++){var l=r(i[o],{seriesIndex:o,w:t}),h=!1,c=!1;if(t.globals.collapsedSeries.length>0)for(var d=0;d<t.globals.collapsedSeries.length;d++)t.globals.collapsedSeries[d].index===o&&(h=!0);if(t.globals.ancillaryCollapsedSeriesIndices.length>0)for(var g=0;g<t.globals.ancillaryCollapsedSeriesIndices.length;g++)t.globals.ancillaryCollapsedSeriesIndices[g]===o&&(c=!0);var u=document.createElement("span");u.classList.add("apexcharts-legend-marker");var f=t.config.legend.markers.offsetX,x=t.config.legend.markers.offsetY,b=t.config.legend.markers.height,v=t.config.legend.markers.width,y=t.config.legend.markers.strokeWidth,w=t.config.legend.markers.strokeColor,k=t.config.legend.markers.radius,A=u.style;A.background=a[o],A.color=a[o],t.config.legend.markers.fillColors&&t.config.legend.markers.fillColors[o]&&(A.background=t.config.legend.markers.fillColors[o]),A.height=Array.isArray(b)?parseFloat(b[o])+"px":parseFloat(b)+"px",A.width=Array.isArray(v)?parseFloat(v[o])+"px":parseFloat(v)+"px",A.left=Array.isArray(f)?f[o]:f,A.top=Array.isArray(x)?x[o]:x,A.borderWidth=Array.isArray(y)?y[o]:y,A.borderColor=Array.isArray(w)?w[o]:w,A.borderRadius=Array.isArray(k)?parseFloat(k[o])+"px":parseFloat(k)+"px",t.config.legend.markers.customHTML&&(Array.isArray(t.config.legend.markers.customHTML)?u.innerHTML=t.config.legend.markers.customHTML[o]():u.innerHTML=t.config.legend.markers.customHTML()),p.setAttrs(u,{rel:o+1,"data:collapsed":h||c}),(h||c)&&u.classList.add("apexcharts-inactive-legend");var S=document.createElement("div"),C=document.createElement("span");C.classList.add("apexcharts-legend-text"),C.innerHTML=Array.isArray(l)?l.join(" "):l;var L=t.config.legend.labels.useSeriesColors?t.globals.colors[o]:t.config.legend.labels.colors;L||(L=t.config.chart.foreColor),C.style.color=L,C.style.fontSize=parseFloat(t.config.legend.fontSize)+"px",C.style.fontWeight=t.config.legend.fontWeight,C.style.fontFamily=e||t.config.chart.fontFamily,p.setAttrs(C,{rel:o+1,i:o,"data:default-text":encodeURIComponent(l),"data:collapsed":h||c}),S.appendChild(u),S.appendChild(C);var P=new m(this.ctx);if(!t.config.legend.showForZeroSeries)0===P.getSeriesTotalByIndex(o)&&P.seriesHaveSameValues(o)&&!P.isSeriesNull(o)&&-1===t.globals.collapsedSeriesIndices.indexOf(o)&&-1===t.globals.ancillaryCollapsedSeriesIndices.indexOf(o)&&S.classList.add("apexcharts-hidden-zero-series");t.config.legend.showForNullSeries||P.isSeriesNull(o)&&-1===t.globals.collapsedSeriesIndices.indexOf(o)&&-1===t.globals.ancillaryCollapsedSeriesIndices.indexOf(o)&&S.classList.add("apexcharts-hidden-null-series"),t.globals.dom.elLegendWrap.appendChild(S),t.globals.dom.elLegendWrap.classList.add("apexcharts-align-".concat(t.config.legend.horizontalAlign)),t.globals.dom.elLegendWrap.classList.add("position-"+t.config.legend.position),S.classList.add("apexcharts-legend-series"),S.style.margin="".concat(t.config.legend.itemMargin.vertical,"px ").concat(t.config.legend.itemMargin.horizontal,"px"),t.globals.dom.elLegendWrap.style.width=t.config.legend.width?t.config.legend.width+"px":"",t.globals.dom.elLegendWrap.style.height=t.config.legend.height?t.config.legend.height+"px":"",p.setAttrs(S,{rel:o+1,"data:collapsed":h||c}),(h||c)&&S.classList.add("apexcharts-inactive-legend"),t.config.legend.onItemClick.toggleDataSeries||S.classList.add("apexcharts-no-click")}"heatmap"!==t.config.chart.type&&!this.isBarsDistributed&&t.config.legend.onItemClick.toggleDataSeries&&t.globals.dom.elWrap.addEventListener("click",this.onLegendClick,!0),t.config.legend.onItemHover.highlightDataSeries&&(t.globals.dom.elWrap.addEventListener("mousemove",this.onLegendHovered,!0),t.globals.dom.elWrap.addEventListener("mouseout",this.onLegendHovered,!0))}},{key:"setLegendWrapXY",value:function(t,e){var i=this.w,a=i.globals.dom.baseEl.querySelector(".apexcharts-legend"),s=a.getBoundingClientRect(),r=0,n=0;if("bottom"===i.config.legend.position)n+=i.globals.svgHeight-s.height/2;else if("top"===i.config.legend.position){var o=new nt(this.ctx),l=o.dimHelpers.getTitleSubtitleCoords("title").height,h=o.dimHelpers.getTitleSubtitleCoords("subtitle").height;n=n+(l>0?l-10:0)+(h>0?h-10:0)}a.style.position="absolute",r=r+t+i.config.legend.offsetX,n=n+e+i.config.legend.offsetY,a.style.left=r+"px",a.style.top=n+"px","bottom"===i.config.legend.position?(a.style.top="auto",a.style.bottom=5-i.config.legend.offsetY+"px"):"right"===i.config.legend.position&&(a.style.left="auto",a.style.right=25+i.config.legend.offsetX+"px");["width","height"].forEach((function(t){a.style[t]&&(a.style[t]=parseInt(i.config.legend[t],10)+"px")}))}},{key:"legendAlignHorizontal",value:function(){var t=this.w;t.globals.dom.baseEl.querySelector(".apexcharts-legend").style.right=0;var e=this.legendHelpers.getLegendBBox(),i=new nt(this.ctx),a=i.dimHelpers.getTitleSubtitleCoords("title"),s=i.dimHelpers.getTitleSubtitleCoords("subtitle"),r=0;"bottom"===t.config.legend.position?r=-e.clwh/1.8:"top"===t.config.legend.position&&(r=a.height+s.height+t.config.title.margin+t.config.subtitle.margin-10),this.setLegendWrapXY(20,r)}},{key:"legendAlignVertical",value:function(){var t=this.w,e=this.legendHelpers.getLegendBBox(),i=0;"left"===t.config.legend.position&&(i=20),"right"===t.config.legend.position&&(i=t.globals.svgWidth-e.clww-10),this.setLegendWrapXY(i,20)}},{key:"onLegendHovered",value:function(t){var e=this.w,i=t.target.classList.contains("apexcharts-legend-text")||t.target.classList.contains("apexcharts-legend-marker");if("heatmap"===e.config.chart.type||this.isBarsDistributed){if(i){var a=parseInt(t.target.getAttribute("rel"),10)-1;this.ctx.events.fireEvent("legendHover",[this.ctx,a,this.w]),new M(this.ctx).highlightRangeInSeries(t,t.target)}}else!t.target.classList.contains("apexcharts-inactive-legend")&&i&&new M(this.ctx).toggleSeriesOnHover(t,t.target)}},{key:"onLegendClick",value:function(t){if(t.target.classList.contains("apexcharts-legend-text")||t.target.classList.contains("apexcharts-legend-marker")){var e=parseInt(t.target.getAttribute("rel"),10)-1,i="true"===t.target.getAttribute("data:collapsed"),a=this.w.config.chart.events.legendClick;"function"==typeof a&&a(this.ctx,e,this.w),this.ctx.events.fireEvent("legendClick",[this.ctx,e,this.w]);var s=this.w.config.legend.markers.onClick;"function"==typeof s&&t.target.classList.contains("apexcharts-legend-marker")&&(s(this.ctx,e,this.w),this.ctx.events.fireEvent("legendMarkerClick",[this.ctx,e,this.w])),this.legendHelpers.toggleDataSeries(e,i)}}}]),t}(),dt=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.ev=this.w.config.chart.events,this.selectedClass="apexcharts-selected",this.localeValues=this.w.globals.locale.toolbar}return a(t,[{key:"createToolbar",value:function(){var t=this,e=this.w,i=function(){return document.createElement("div")},a=i();if(a.setAttribute("class","apexcharts-toolbar"),a.style.top=e.config.chart.toolbar.offsetY+"px",a.style.right=3-e.config.chart.toolbar.offsetX+"px",e.globals.dom.elWrap.appendChild(a),this.elZoom=i(),this.elZoomIn=i(),this.elZoomOut=i(),this.elPan=i(),this.elSelection=i(),this.elZoomReset=i(),this.elMenuIcon=i(),this.elMenu=i(),this.elCustomIcons=[],this.t=e.config.chart.toolbar.tools,Array.isArray(this.t.customIcons))for(var s=0;s<this.t.customIcons.length;s++)this.elCustomIcons.push(i());var r=[],n=function(i,a,s){var n=i.toLowerCase();t.t[n]&&e.config.chart.zoom.enabled&&r.push({el:a,icon:"string"==typeof t.t[n]?t.t[n]:s,title:t.localeValues[i],class:"apexcharts-".concat(n,"-icon")})};n("zoomIn",this.elZoomIn,'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">\n    <path d="M0 0h24v24H0z" fill="none"/>\n    <path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>\n</svg>\n'),n("zoomOut",this.elZoomOut,'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">\n    <path d="M0 0h24v24H0z" fill="none"/>\n    <path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>\n</svg>\n');var o=function(i){t.t[i]&&e.config.chart[i].enabled&&r.push({el:"zoom"===i?t.elZoom:t.elSelection,icon:"string"==typeof t.t[i]?t.t[i]:"zoom"===i?'<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="24" viewBox="0 0 24 24" width="24">\n    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>\n    <path d="M0 0h24v24H0V0z" fill="none"/>\n    <path d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"/>\n</svg>':'<svg fill="#6E8192" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n    <path d="M0 0h24v24H0z" fill="none"/>\n    <path d="M3 5h2V3c-1.1 0-2 .9-2 2zm0 8h2v-2H3v2zm4 8h2v-2H7v2zM3 9h2V7H3v2zm10-6h-2v2h2V3zm6 0v2h2c0-1.1-.9-2-2-2zM5 21v-2H3c0 1.1.9 2 2 2zm-2-4h2v-2H3v2zM9 3H7v2h2V3zm2 18h2v-2h-2v2zm8-8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2zm0-12h2V7h-2v2zm0 8h2v-2h-2v2zm-4 4h2v-2h-2v2zm0-16h2V3h-2v2z"/>\n</svg>',title:t.localeValues["zoom"===i?"selectionZoom":"selection"],class:e.globals.isTouchDevice?"apexcharts-element-hidden":"apexcharts-".concat(i,"-icon")})};o("zoom"),o("selection"),this.t.pan&&e.config.chart.zoom.enabled&&r.push({el:this.elPan,icon:"string"==typeof this.t.pan?this.t.pan:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" height="24" viewBox="0 0 24 24" width="24">\n    <defs>\n        <path d="M0 0h24v24H0z" id="a"/>\n    </defs>\n    <clipPath id="b">\n        <use overflow="visible" xlink:href="#a"/>\n    </clipPath>\n    <path clip-path="url(#b)" d="M23 5.5V20c0 2.2-1.8 4-4 4h-7.3c-1.08 0-2.1-.43-2.85-1.19L1 14.83s1.26-1.23 1.3-1.25c.22-.19.49-.29.79-.29.22 0 .42.06.6.16.04.01 4.31 2.46 4.31 2.46V4c0-.83.67-1.5 1.5-1.5S11 3.17 11 4v7h1V1.5c0-.83.67-1.5 1.5-1.5S15 .67 15 1.5V11h1V2.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5V11h1V5.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5z"/>\n</svg>',title:this.localeValues.pan,class:e.globals.isTouchDevice?"apexcharts-element-hidden":"apexcharts-pan-icon"}),n("reset",this.elZoomReset,'<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>\n    <path d="M0 0h24v24H0z" fill="none"/>\n</svg>'),this.t.download&&r.push({el:this.elMenuIcon,icon:"string"==typeof this.t.download?this.t.download:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>',title:this.localeValues.menu,class:"apexcharts-menu-icon"});for(var l=0;l<this.elCustomIcons.length;l++)r.push({el:this.elCustomIcons[l],icon:this.t.customIcons[l].icon,title:this.t.customIcons[l].title,index:this.t.customIcons[l].index,class:"apexcharts-toolbar-custom-icon "+this.t.customIcons[l].class});r.forEach((function(t,e){t.index&&g.moveIndexInArray(r,e,t.index)}));for(var h=0;h<r.length;h++)p.setAttrs(r[h].el,{class:r[h].class,title:r[h].title}),r[h].el.innerHTML=r[h].icon,a.appendChild(r[h].el);this._createHamburgerMenu(a),e.globals.zoomEnabled?this.elZoom.classList.add(this.selectedClass):e.globals.panEnabled?this.elPan.classList.add(this.selectedClass):e.globals.selectionEnabled&&this.elSelection.classList.add(this.selectedClass),this.addToolbarEventListeners()}},{key:"_createHamburgerMenu",value:function(t){this.elMenuItems=[],t.appendChild(this.elMenu),p.setAttrs(this.elMenu,{class:"apexcharts-menu"});var e=[{name:"exportSVG",title:this.localeValues.exportToSVG},{name:"exportPNG",title:this.localeValues.exportToPNG},{name:"exportCSV",title:this.localeValues.exportToCSV}];this.w.globals.allSeriesHasEqualX||e.splice(2,1);for(var i=0;i<e.length;i++)this.elMenuItems.push(document.createElement("div")),this.elMenuItems[i].innerHTML=e[i].title,p.setAttrs(this.elMenuItems[i],{class:"apexcharts-menu-item ".concat(e[i].name),title:e[i].title}),this.elMenu.appendChild(this.elMenuItems[i])}},{key:"addToolbarEventListeners",value:function(){var t=this;this.elZoomReset.addEventListener("click",this.handleZoomReset.bind(this)),this.elSelection.addEventListener("click",this.toggleZoomSelection.bind(this,"selection")),this.elZoom.addEventListener("click",this.toggleZoomSelection.bind(this,"zoom")),this.elZoomIn.addEventListener("click",this.handleZoomIn.bind(this)),this.elZoomOut.addEventListener("click",this.handleZoomOut.bind(this)),this.elPan.addEventListener("click",this.togglePanning.bind(this)),this.elMenuIcon.addEventListener("click",this.toggleMenu.bind(this)),this.elMenuItems.forEach((function(e){e.classList.contains("exportSVG")?e.addEventListener("click",t.handleDownload.bind(t,"svg")):e.classList.contains("exportPNG")?e.addEventListener("click",t.handleDownload.bind(t,"png")):e.classList.contains("exportCSV")&&e.addEventListener("click",t.handleDownload.bind(t,"csv"))}));for(var e=0;e<this.t.customIcons.length;e++)this.elCustomIcons[e].addEventListener("click",this.t.customIcons[e].click.bind(this,this.ctx,this.ctx.w))}},{key:"toggleZoomSelection",value:function(t){this.toggleOtherControls();var e="selection"===t?this.elSelection:this.elZoom,i="selection"===t?"selectionEnabled":"zoomEnabled";this.w.globals[i]=!this.w.globals[i],e.classList.contains(this.selectedClass)?e.classList.remove(this.selectedClass):e.classList.add(this.selectedClass)}},{key:"getToolbarIconsReference",value:function(){var t=this.w;this.elZoom||(this.elZoom=t.globals.dom.baseEl.querySelector(".apexcharts-zoom-icon")),this.elPan||(this.elPan=t.globals.dom.baseEl.querySelector(".apexcharts-pan-icon")),this.elSelection||(this.elSelection=t.globals.dom.baseEl.querySelector(".apexcharts-selection-icon"))}},{key:"enableZoomPanFromToolbar",value:function(t){this.toggleOtherControls(),"pan"===t?this.w.globals.panEnabled=!0:this.w.globals.zoomEnabled=!0;var e="pan"===t?this.elPan:this.elZoom,i="pan"===t?this.elZoom:this.elPan;e&&e.classList.add(this.selectedClass),i&&i.classList.remove(this.selectedClass)}},{key:"togglePanning",value:function(){this.toggleOtherControls(),this.w.globals.panEnabled=!this.w.globals.panEnabled,this.elPan.classList.contains(this.selectedClass)?this.elPan.classList.remove(this.selectedClass):this.elPan.classList.add(this.selectedClass)}},{key:"toggleOtherControls",value:function(){var t=this,e=this.w;e.globals.panEnabled=!1,e.globals.zoomEnabled=!1,e.globals.selectionEnabled=!1,this.getToolbarIconsReference(),[this.elPan,this.elSelection,this.elZoom].forEach((function(e){e&&e.classList.remove(t.selectedClass)}))}},{key:"handleZoomIn",value:function(){var t=this.w,e=(t.globals.minX+t.globals.maxX)/2,i=(t.globals.minX+e)/2,a=(t.globals.maxX+e)/2,s=this._getNewMinXMaxX(i,a);t.globals.disableZoomIn||this.zoomUpdateOptions(s.minX,s.maxX)}},{key:"handleZoomOut",value:function(){var t=this.w;if(!("datetime"===t.config.xaxis.type&&new Date(t.globals.minX).getUTCFullYear()<1e3)){var e=(t.globals.minX+t.globals.maxX)/2,i=t.globals.minX-(e-t.globals.minX),a=t.globals.maxX-(e-t.globals.maxX),s=this._getNewMinXMaxX(i,a);t.globals.disableZoomOut||this.zoomUpdateOptions(s.minX,s.maxX)}}},{key:"_getNewMinXMaxX",value:function(t,e){var i=this.w.config.xaxis.convertedCatToNumeric;return{minX:i?Math.floor(t):t,maxX:i?Math.floor(e):e}}},{key:"zoomUpdateOptions",value:function(t,e){var i=this.w;if(void 0!==t||void 0!==e){if(!(i.config.xaxis.convertedCatToNumeric&&(t<1&&(t=1,e=i.globals.dataPoints),e-t<2))){var a={min:t,max:e},s=this.getBeforeZoomRange(a);s&&(a=s.xaxis);var r={xaxis:a},n=g.clone(i.globals.initialConfig.yaxis);if(i.config.chart.zoom.autoScaleYaxis)n=new j(this.ctx).autoScaleY(this.ctx,n,{xaxis:a});i.config.chart.group||(r.yaxis=n),this.w.globals.zoomed=!0,this.ctx.updateHelpers._updateOptions(r,!1,this.w.config.chart.animations.dynamicAnimation.enabled),this.zoomCallback(a,n)}}else this.handleZoomReset()}},{key:"zoomCallback",value:function(t,e){"function"==typeof this.ev.zoomed&&this.ev.zoomed(this.ctx,{xaxis:t,yaxis:e})}},{key:"getBeforeZoomRange",value:function(t,e){var i=null;return"function"==typeof this.ev.beforeZoom&&(i=this.ev.beforeZoom(this,{xaxis:t,yaxis:e})),i}},{key:"toggleMenu",value:function(){var t=this;window.setTimeout((function(){t.elMenu.classList.contains("apexcharts-menu-open")?t.elMenu.classList.remove("apexcharts-menu-open"):t.elMenu.classList.add("apexcharts-menu-open")}),0)}},{key:"handleDownload",value:function(t){var e=this.w,i=new V(this.ctx);switch(t){case"svg":i.exportToSVG(this.ctx);break;case"png":i.exportToPng(this.ctx);break;case"csv":i.exportToCSV({series:e.config.series})}}},{key:"handleZoomReset",value:function(t){var e=this;this.ctx.getSyncedCharts().forEach((function(t){var i=t.w;i.globals.lastXAxis.min=void 0,i.globals.lastXAxis.max=void 0,t.updateHelpers.revertDefaultAxisMinMax(),"function"==typeof i.config.chart.events.zoomed&&e.zoomCallback({min:i.config.xaxis.min,max:i.config.xaxis.max}),i.globals.zoomed=!1,t.updateHelpers._updateSeries(i.globals.initialSeries,i.config.chart.animations.dynamicAnimation.enabled)}))}},{key:"destroy",value:function(){this.elZoom=null,this.elZoomIn=null,this.elZoomOut=null,this.elPan=null,this.elSelection=null,this.elZoomReset=null,this.elMenuIcon=null}}]),t}(),gt=function(t){function i(t){var a;return e(this,i),(a=c(this,l(i).call(this,t))).ctx=t,a.w=t.w,a.dragged=!1,a.graphics=new p(a.ctx),a.eventList=["mousedown","mouseleave","mousemove","touchstart","touchmove","mouseup","touchend"],a.clientX=0,a.clientY=0,a.startX=0,a.endX=0,a.dragX=0,a.startY=0,a.endY=0,a.dragY=0,a.moveDirection="none",a}return o(i,t),a(i,[{key:"init",value:function(t){var e=this,i=t.xyRatios,a=this.w,s=this;this.xyRatios=i,this.zoomRect=this.graphics.drawRect(0,0,0,0),this.selectionRect=this.graphics.drawRect(0,0,0,0),this.gridRect=a.globals.dom.baseEl.querySelector(".apexcharts-grid"),this.zoomRect.node.classList.add("apexcharts-zoom-rect"),this.selectionRect.node.classList.add("apexcharts-selection-rect"),a.globals.dom.elGraphical.add(this.zoomRect),a.globals.dom.elGraphical.add(this.selectionRect),"x"===a.config.chart.selection.type?this.slDraggableRect=this.selectionRect.draggable({minX:0,minY:0,maxX:a.globals.gridWidth,maxY:a.globals.gridHeight}).on("dragmove",this.selectionDragging.bind(this,"dragging")):"y"===a.config.chart.selection.type?this.slDraggableRect=this.selectionRect.draggable({minX:0,maxX:a.globals.gridWidth}).on("dragmove",this.selectionDragging.bind(this,"dragging")):this.slDraggableRect=this.selectionRect.draggable().on("dragmove",this.selectionDragging.bind(this,"dragging")),this.preselectedSelection(),this.hoverArea=a.globals.dom.baseEl.querySelector(a.globals.chartClass),this.hoverArea.classList.add("apexcharts-zoomable"),this.eventList.forEach((function(t){e.hoverArea.addEventListener(t,s.svgMouseEvents.bind(s,i),{capture:!1,passive:!0})}))}},{key:"destroy",value:function(){this.slDraggableRect&&(this.slDraggableRect.draggable(!1),this.slDraggableRect.off(),this.selectionRect.off()),this.selectionRect=null,this.zoomRect=null,this.gridRect=null}},{key:"svgMouseEvents",value:function(t,e){var i=this.w,a=this,s=this.ctx.toolbar,r=i.globals.zoomEnabled?i.config.chart.zoom.type:i.config.chart.selection.type;if(e.shiftKey?(this.shiftWasPressed=!0,s.enableZoomPanFromToolbar("pan")):this.shiftWasPressed&&(s.enableZoomPanFromToolbar("zoom"),this.shiftWasPressed=!1),!(e.target.classList.contains("apexcharts-selection-rect")||e.target.parentNode.classList.contains("apexcharts-toolbar"))){if(a.clientX="touchmove"===e.type||"touchstart"===e.type?e.touches[0].clientX:"touchend"===e.type?e.changedTouches[0].clientX:e.clientX,a.clientY="touchmove"===e.type||"touchstart"===e.type?e.touches[0].clientY:"touchend"===e.type?e.changedTouches[0].clientY:e.clientY,"mousedown"===e.type&&1===e.which){var n=a.gridRect.getBoundingClientRect();a.startX=a.clientX-n.left,a.startY=a.clientY-n.top,a.dragged=!1,a.w.globals.mousedown=!0}if(("mousemove"===e.type&&1===e.which||"touchmove"===e.type)&&(a.dragged=!0,i.globals.panEnabled?(i.globals.selection=null,a.w.globals.mousedown&&a.panDragging({context:a,zoomtype:r,xyRatios:t})):(a.w.globals.mousedown&&i.globals.zoomEnabled||a.w.globals.mousedown&&i.globals.selectionEnabled)&&(a.selection=a.selectionDrawing({context:a,zoomtype:r}))),"mouseup"===e.type||"touchend"===e.type||"mouseleave"===e.type){var o=a.gridRect.getBoundingClientRect();a.w.globals.mousedown&&(a.endX=a.clientX-o.left,a.endY=a.clientY-o.top,a.dragX=Math.abs(a.endX-a.startX),a.dragY=Math.abs(a.endY-a.startY),(i.globals.zoomEnabled||i.globals.selectionEnabled)&&a.selectionDrawn({context:a,zoomtype:r}),i.globals.panEnabled&&i.config.xaxis.convertedCatToNumeric&&a.delayedPanScrolled()),i.globals.zoomEnabled&&a.hideSelectionRect(this.selectionRect),a.dragged=!1,a.w.globals.mousedown=!1}this.makeSelectionRectDraggable()}}},{key:"makeSelectionRectDraggable",value:function(){var t=this.w;if(this.selectionRect){var e=this.selectionRect.node.getBoundingClientRect();e.width>0&&e.height>0&&this.slDraggableRect.selectize({points:"l, r",pointSize:8,pointType:"rect"}).resize({constraint:{minX:0,minY:0,maxX:t.globals.gridWidth,maxY:t.globals.gridHeight}}).on("resizing",this.selectionDragging.bind(this,"resizing"))}}},{key:"preselectedSelection",value:function(){var t=this.w,e=this.xyRatios;if(!t.globals.zoomEnabled)if(void 0!==t.globals.selection&&null!==t.globals.selection)this.drawSelectionRect(t.globals.selection);else if(void 0!==t.config.chart.selection.xaxis.min&&void 0!==t.config.chart.selection.xaxis.max){var i=(t.config.chart.selection.xaxis.min-t.globals.minX)/e.xRatio,a={x:i,y:0,width:t.globals.gridWidth-(t.globals.maxX-t.config.chart.selection.xaxis.max)/e.xRatio-i,height:t.globals.gridHeight,translateX:0,translateY:0,selectionEnabled:!0};this.drawSelectionRect(a),this.makeSelectionRectDraggable(),"function"==typeof t.config.chart.events.selection&&t.config.chart.events.selection(this.ctx,{xaxis:{min:t.config.chart.selection.xaxis.min,max:t.config.chart.selection.xaxis.max},yaxis:{}})}}},{key:"drawSelectionRect",value:function(t){var e=t.x,i=t.y,a=t.width,s=t.height,r=t.translateX,n=void 0===r?0:r,o=t.translateY,l=void 0===o?0:o,h=this.w,c=this.zoomRect,d=this.selectionRect;if(this.dragged||null!==h.globals.selection){var g={transform:"translate("+n+", "+l+")"};h.globals.zoomEnabled&&this.dragged&&(a<0&&(a=1),c.attr({x:e,y:i,width:a,height:s,fill:h.config.chart.zoom.zoomedArea.fill.color,"fill-opacity":h.config.chart.zoom.zoomedArea.fill.opacity,stroke:h.config.chart.zoom.zoomedArea.stroke.color,"stroke-width":h.config.chart.zoom.zoomedArea.stroke.width,"stroke-opacity":h.config.chart.zoom.zoomedArea.stroke.opacity}),p.setAttrs(c.node,g)),h.globals.selectionEnabled&&(d.attr({x:e,y:i,width:a>0?a:0,height:s>0?s:0,fill:h.config.chart.selection.fill.color,"fill-opacity":h.config.chart.selection.fill.opacity,stroke:h.config.chart.selection.stroke.color,"stroke-width":h.config.chart.selection.stroke.width,"stroke-dasharray":h.config.chart.selection.stroke.dashArray,"stroke-opacity":h.config.chart.selection.stroke.opacity}),p.setAttrs(d.node,g))}}},{key:"hideSelectionRect",value:function(t){t&&t.attr({x:0,y:0,width:0,height:0})}},{key:"selectionDrawing",value:function(t){var e=t.context,i=t.zoomtype,a=this.w,s=e,r=this.gridRect.getBoundingClientRect(),n=s.startX-1,o=s.startY,l=s.clientX-r.left-n,h=s.clientY-r.top-o,c=0,d=0,g={};return Math.abs(l+n)>a.globals.gridWidth?l=a.globals.gridWidth-n:s.clientX-r.left<0&&(l=n),n>s.clientX-r.left&&(c=-(l=Math.abs(l))),o>s.clientY-r.top&&(d=-(h=Math.abs(h))),g="x"===i?{x:n,y:0,width:l,height:a.globals.gridHeight,translateX:c,translateY:0}:"y"===i?{x:0,y:o,width:a.globals.gridWidth,height:h,translateX:0,translateY:d}:{x:n,y:o,width:l,height:h,translateX:c,translateY:d},s.drawSelectionRect(g),s.selectionDragging("resizing"),g}},{key:"selectionDragging",value:function(t,e){var i=this,a=this.w,s=this.xyRatios,r=this.selectionRect,n=0;"resizing"===t&&(n=30);var o=function(t){return parseFloat(r.node.getAttribute(t))},l={x:o("x"),y:o("y"),width:o("width"),height:o("height")};a.globals.selection=l,"function"==typeof a.config.chart.events.selection&&a.globals.selectionEnabled&&(clearTimeout(this.w.globals.selectionResizeTimer),this.w.globals.selectionResizeTimer=window.setTimeout((function(){var t=i.gridRect.getBoundingClientRect(),e=r.node.getBoundingClientRect(),n=a.globals.xAxisScale.niceMin+(e.left-t.left)*s.xRatio,o=a.globals.xAxisScale.niceMin+(e.right-t.left)*s.xRatio,l=a.globals.yAxisScale[0].niceMin+(t.bottom-e.bottom)*s.yRatio[0],h=a.globals.yAxisScale[0].niceMax-(e.top-t.top)*s.yRatio[0];a.config.chart.events.selection(i.ctx,{xaxis:{min:n,max:o},yaxis:{min:l,max:h}})}),n))}},{key:"selectionDrawn",value:function(t){var e=t.context,i=t.zoomtype,a=this.w,s=e,r=this.xyRatios,n=this.ctx.toolbar;if(s.startX>s.endX){var o=s.startX;s.startX=s.endX,s.endX=o}if(s.startY>s.endY){var l=s.startY;s.startY=s.endY,s.endY=l}var h=a.globals.xAxisScale.niceMin+s.startX*r.xRatio,c=a.globals.xAxisScale.niceMin+s.endX*r.xRatio,d=[],u=[];if(a.config.yaxis.forEach((function(t,e){d.push(a.globals.yAxisScale[e].niceMax-r.yRatio[e]*s.startY),u.push(a.globals.yAxisScale[e].niceMax-r.yRatio[e]*s.endY)})),s.dragged&&(s.dragX>10||s.dragY>10)&&h!==c)if(a.globals.zoomEnabled){var f=g.clone(a.globals.initialConfig.yaxis),p=g.clone(a.globals.initialConfig.xaxis);if(a.globals.zoomed=!0,a.globals.zoomed||(a.globals.lastXAxis=g.clone(a.config.xaxis),a.globals.lastYAxis=g.clone(a.config.yaxis)),a.config.xaxis.convertedCatToNumeric&&(h=Math.floor(h),c=Math.floor(c),h<1&&(h=1,c=a.globals.dataPoints),c-h<2&&(c=h+1)),"xy"!==i&&"x"!==i||(p={min:h,max:c}),"xy"!==i&&"y"!==i||f.forEach((function(t,e){f[e].min=u[e],f[e].max=d[e]})),a.config.chart.zoom.autoScaleYaxis){var x=new j(s.ctx);f=x.autoScaleY(s.ctx,f,{xaxis:p})}if(n){var b=n.getBeforeZoomRange(p,f);b&&(p=b.xaxis?b.xaxis:p,f=b.yaxis?b.yaxe:f)}var m={xaxis:p};a.config.chart.group||(m.yaxis=f),s.ctx.updateHelpers._updateOptions(m,!1,s.w.config.chart.animations.dynamicAnimation.enabled),"function"==typeof a.config.chart.events.zoomed&&n.zoomCallback(p,f)}else if(a.globals.selectionEnabled){var v,y=null;v={min:h,max:c},"xy"!==i&&"y"!==i||(y=g.clone(a.config.yaxis)).forEach((function(t,e){y[e].min=u[e],y[e].max=d[e]})),a.globals.selection=s.selection,"function"==typeof a.config.chart.events.selection&&a.config.chart.events.selection(s.ctx,{xaxis:v,yaxis:y})}}},{key:"panDragging",value:function(t){var e=t.context,i=this.w,a=e;if(void 0!==i.globals.lastClientPosition.x){var s=i.globals.lastClientPosition.x-a.clientX,r=i.globals.lastClientPosition.y-a.clientY;Math.abs(s)>Math.abs(r)&&s>0?this.moveDirection="left":Math.abs(s)>Math.abs(r)&&s<0?this.moveDirection="right":Math.abs(r)>Math.abs(s)&&r>0?this.moveDirection="up":Math.abs(r)>Math.abs(s)&&r<0&&(this.moveDirection="down")}i.globals.lastClientPosition={x:a.clientX,y:a.clientY};var n=i.globals.minX,o=i.globals.maxX;i.config.xaxis.convertedCatToNumeric||a.panScrolled(n,o)}},{key:"delayedPanScrolled",value:function(){var t=this.w,e=t.globals.minX,i=t.globals.maxX,a=(t.globals.maxX-t.globals.minX)/2;"left"===this.moveDirection?(e=t.globals.minX+a,i=t.globals.maxX+a):"right"===this.moveDirection&&(e=t.globals.minX-a,i=t.globals.maxX-a),e=Math.floor(e),i=Math.floor(i),this.updateScrolledChart({xaxis:{min:e,max:i}},e,i)}},{key:"panScrolled",value:function(t,e){var i=this.w,a=this.xyRatios,s=g.clone(i.globals.initialConfig.yaxis);"left"===this.moveDirection?(t=i.globals.minX+i.globals.gridWidth/15*a.xRatio,e=i.globals.maxX+i.globals.gridWidth/15*a.xRatio):"right"===this.moveDirection&&(t=i.globals.minX-i.globals.gridWidth/15*a.xRatio,e=i.globals.maxX-i.globals.gridWidth/15*a.xRatio),(t<i.globals.initialMinX||e>i.globals.initialMaxX)&&(t=i.globals.minX,e=i.globals.maxX);var r={min:t,max:e};i.config.chart.zoom.autoScaleYaxis&&(s=new j(this.ctx).autoScaleY(this.ctx,s,{xaxis:r}));var n={xaxis:{min:t,max:e}};i.config.chart.group||(n.yaxis=s),this.updateScrolledChart(n,t,e)}},{key:"updateScrolledChart",value:function(t,e,i){var a=this.w;this.ctx.updateHelpers._updateOptions(t,!1,!1),"function"==typeof a.config.chart.events.scrolled&&a.config.chart.events.scrolled(this.ctx,{xaxis:{min:e,max:i}})}}]),i}(dt),ut=function(){function t(i){e(this,t),this.w=i.w,this.ttCtx=i,this.ctx=i.ctx}return a(t,[{key:"getNearestValues",value:function(t){var e=t.hoverArea,i=t.elGrid,a=t.clientX,s=t.clientY,r=this.w,n=r.globals.gridWidth,o=n/(r.globals.dataPoints-1),l=i.getBoundingClientRect(),h=this.hasBars();(r.globals.comboCharts||h)&&(o=n/r.globals.dataPoints);var c=a-l.left,d=s-l.top;c<0||d<0||c>r.globals.gridWidth||d>r.globals.gridHeight?(e.classList.remove("hovering-zoom"),e.classList.remove("hovering-pan")):r.globals.zoomEnabled?(e.classList.remove("hovering-pan"),e.classList.add("hovering-zoom")):r.globals.panEnabled&&(e.classList.remove("hovering-zoom"),e.classList.add("hovering-pan"));var u=Math.round(c/o);h&&(u=Math.ceil(c/o),u-=1);for(var f,p=null,x=null,b=[],m=0;m<r.globals.seriesXvalues.length;m++)b.push([r.globals.seriesXvalues[m][0]-1e-6].concat(r.globals.seriesXvalues[m]));return b=b.map((function(t){return t.filter((function(t){return t}))})),f=r.globals.seriesYvalues.map((function(t){return t.filter((function(t){return g.isNumber(t)}))})),r.globals.isXNumeric&&(p=(x=this.closestInMultiArray(c,d,b,f)).index,u=x.j,null!==p&&(b=r.globals.seriesXvalues[p],u=(x=this.closestInArray(c,b)).index)),r.globals.capturedSeriesIndex=null===p?-1:p,(!u||u<1)&&(u=0),r.globals.capturedDataPointIndex=u,{capturedSeries:p,j:u,hoverX:c,hoverY:d}}},{key:"closestInMultiArray",value:function(t,e,i,a){var s=this.w,r=0,n=null,o=-1;s.globals.series.length>1?r=this.getFirstActiveXArray(i):n=0;var l=a[r][0],h=i[r][0],c=Math.abs(t-h),d=Math.abs(e-l),g=d+c;return a.map((function(s,r){s.map((function(s,l){var h=Math.abs(e-a[r][l]),u=Math.abs(t-i[r][l]),f=u+h;f<g&&(g=f,c=u,d=h,n=r,o=l)}))})),{index:n,j:o}}},{key:"getFirstActiveXArray",value:function(t){for(var e=0,i=new m(this.ctx),a=t.map((function(t,e){return t.length>0?e:-1})),s=0;s<a.length;s++){var r=i.getSeriesTotalByIndex(s);if(-1!==a[s]&&0!==r&&!i.seriesHaveSameValues(s)){e=a[s];break}}return e}},{key:"closestInArray",value:function(t,e){for(var i=e[0],a=null,s=Math.abs(t-i),r=0;r<e.length;r++){var n=Math.abs(t-e[r]);n<s&&(s=n,a=r)}return{index:a}}},{key:"isXoverlap",value:function(t){var e=[],i=this.w.globals.seriesX.filter((function(t){return void 0!==t[0]}));if(i.length>0)for(var a=0;a<i.length-1;a++)void 0!==i[a][t]&&void 0!==i[a+1][t]&&i[a][t]!==i[a+1][t]&&e.push("unEqual");return 0===e.length}},{key:"isInitialSeriesSameLen",value:function(){for(var t=!0,e=this.w.globals.initialSeries,i=0;i<e.length-1;i++)if(e[i].data.length!==e[i+1].data.length){t=!1;break}return t}},{key:"getBarsHeight",value:function(t){return d(t).reduce((function(t,e){return t+e.getBBox().height}),0)}},{key:"getElMarkers",value:function(){return this.w.globals.dom.baseEl.querySelectorAll(" .apexcharts-series-markers")}},{key:"getAllMarkers",value:function(){var t=this.w.globals.dom.baseEl.querySelectorAll(".apexcharts-series-markers-wrap");(t=d(t)).sort((function(t,e){return Number(e.getAttribute("data:realIndex"))<Number(t.getAttribute("data:realIndex"))?0:-1}));var e=[];return t.forEach((function(t){e.push(t.querySelector(".apexcharts-marker"))})),e}},{key:"hasMarkers",value:function(){return this.getElMarkers().length>0}},{key:"getElBars",value:function(){return this.w.globals.dom.baseEl.querySelectorAll(".apexcharts-bar-series,  .apexcharts-candlestick-series, .apexcharts-rangebar-series")}},{key:"hasBars",value:function(){return this.getElBars().length>0}},{key:"getHoverMarkerSize",value:function(t){var e=this.w,i=e.config.markers.hover.size;return void 0===i&&(i=e.globals.markers.size[t]+e.config.markers.hover.sizeOffset),i}},{key:"toggleAllTooltipSeriesGroups",value:function(t){var e=this.w,i=this.ttCtx;0===i.allTooltipSeriesGroups.length&&(i.allTooltipSeriesGroups=e.globals.dom.baseEl.querySelectorAll(".apexcharts-tooltip-series-group"));for(var a=i.allTooltipSeriesGroups,s=0;s<a.length;s++)"enable"===t?(a[s].classList.add("apexcharts-active"),a[s].style.display=e.config.tooltip.items.display):(a[s].classList.remove("apexcharts-active"),a[s].style.display="none")}}]),t}(),ft=function(){function t(i){e(this,t),this.w=i.w,this.ctx=i.ctx,this.ttCtx=i,this.tooltipUtil=new ut(i)}return a(t,[{key:"drawSeriesTexts",value:function(t){var e=t.shared,i=void 0===e||e,a=t.ttItems,s=t.i,r=void 0===s?0:s,n=t.j,o=void 0===n?null:n,l=t.y1,h=t.y2,c=this.w;void 0!==c.config.tooltip.custom?this.handleCustomTooltip({i:r,j:o,y1:l,y2:h,w:c}):this.toggleActiveInactiveSeries(i);var d=this.getValuesToPrint({i:r,j:o});this.printLabels({i:r,j:o,values:d,ttItems:a,shared:i});var g=this.ttCtx.getElTooltip();this.ttCtx.tooltipRect.ttWidth=g.getBoundingClientRect().width,this.ttCtx.tooltipRect.ttHeight=g.getBoundingClientRect().height}},{key:"printLabels",value:function(t){var e,i=this,a=t.i,s=t.j,r=t.values,n=t.ttItems,o=t.shared,l=this.w,h=r.xVal,c=r.zVal,d=r.xAxisTTVal,g="",u=l.globals.colors[a];null!==s&&l.config.plotOptions.bar.distributed&&(u=l.globals.colors[s]);for(var f=function(t,r){var f=i.getFormatters(a);g=i.getSeriesName({fn:f.yLbTitleFormatter,index:a,seriesIndex:a,j:s});var p=l.config.tooltip.inverseOrder?r:t;if(l.globals.axisCharts){var x=function(t){return f.yLbFormatter(l.globals.series[t][s],{series:l.globals.series,seriesIndex:t,dataPointIndex:s,w:l})};o?(f=i.getFormatters(p),g=i.getSeriesName({fn:f.yLbTitleFormatter,index:p,seriesIndex:a,j:s}),u=l.globals.colors[p],e=x(p)):e=x(a)}null===s&&(e=f.yLbFormatter(l.globals.series[a],l)),i.DOMHandling({i:a,t:p,j:s,ttItems:n,values:{val:e,xVal:h,xAxisTTVal:d,zVal:c},seriesName:g,shared:o,pColor:u})},p=0,x=l.globals.series.length-1;p<l.globals.series.length;p++,x--)f(p,x)}},{key:"getFormatters",value:function(t){var e,i=this.w,a=i.globals.yLabelFormatters[t];return void 0!==i.globals.ttVal?Array.isArray(i.globals.ttVal)?(a=i.globals.ttVal[t]&&i.globals.ttVal[t].formatter,e=i.globals.ttVal[t]&&i.globals.ttVal[t].title&&i.globals.ttVal[t].title.formatter):(a=i.globals.ttVal.formatter,"function"==typeof i.globals.ttVal.title.formatter&&(e=i.globals.ttVal.title.formatter)):e=i.config.tooltip.y.title.formatter,"function"!=typeof a&&(a=i.globals.yLabelFormatters[0]?i.globals.yLabelFormatters[0]:function(t){return t}),"function"!=typeof e&&(e=function(t){return t}),{yLbFormatter:a,yLbTitleFormatter:e}}},{key:"getSeriesName",value:function(t){var e=t.fn,i=t.index,a=t.seriesIndex,s=t.j,r=this.w;return e(String(r.globals.seriesNames[i]),{series:r.globals.series,seriesIndex:a,dataPointIndex:s,w:r})}},{key:"DOMHandling",value:function(t){var e=t.i,i=t.t,a=(t.j,t.ttItems),s=t.values,r=t.seriesName,n=t.shared,o=t.pColor,l=this.w,h=this.ttCtx,c=s.val,d=s.xVal,g=s.xAxisTTVal,u=s.zVal,f=null;f=a[i].children,l.config.tooltip.fillSeriesColor&&(a[i].style.backgroundColor=o,f[0].style.display="none"),h.showTooltipTitle&&(null===h.tooltipTitle&&(h.tooltipTitle=l.globals.dom.baseEl.querySelector(".apexcharts-tooltip-title")),h.tooltipTitle.innerHTML=d),h.blxaxisTooltip&&(h.xaxisTooltipText.innerHTML=""!==g?g:d);var p=a[i].querySelector(".apexcharts-tooltip-text-label");p&&(p.innerHTML=r?r+": ":"");var x=a[i].querySelector(".apexcharts-tooltip-text-value");(x&&(x.innerHTML=void 0!==c?c:""),f[0]&&f[0].classList.contains("apexcharts-tooltip-marker")&&(l.config.tooltip.marker.fillColors&&Array.isArray(l.config.tooltip.marker.fillColors)&&(o=l.config.tooltip.marker.fillColors[e]),f[0].style.backgroundColor=o),l.config.tooltip.marker.show||(f[0].style.display="none"),null!==u)&&(a[i].querySelector(".apexcharts-tooltip-text-z-label").innerHTML=l.config.tooltip.z.title,a[i].querySelector(".apexcharts-tooltip-text-z-value").innerHTML=void 0!==u?u:"");n&&f[0]&&(null==c||l.globals.collapsedSeriesIndices.indexOf(i)>-1?f[0].parentNode.style.display="none":f[0].parentNode.style.display=l.config.tooltip.items.display)}},{key:"toggleActiveInactiveSeries",value:function(t){var e=this.w;if(t)this.tooltipUtil.toggleAllTooltipSeriesGroups("enable");else{this.tooltipUtil.toggleAllTooltipSeriesGroups("disable");var i=e.globals.dom.baseEl.querySelector(".apexcharts-tooltip-series-group");i&&(i.classList.add("apexcharts-active"),i.style.display=e.config.tooltip.items.display)}}},{key:"getValuesToPrint",value:function(t){var e=t.i,i=t.j,a=this.w,s=this.ctx.series.filteredSeriesX(),r="",n="",o=null,l=null,h={series:a.globals.series,seriesIndex:e,dataPointIndex:i,w:a},c=a.globals.ttZFormatter;null===i?l=a.globals.series[e]:a.globals.isXNumeric?(r=s[e][i],0===s[e].length&&(r=s[this.tooltipUtil.getFirstActiveXArray(s)][i])):r=void 0!==a.globals.labels[i]?a.globals.labels[i]:"";var d=r;a.globals.isXNumeric&&"datetime"===a.config.xaxis.type?r=new W(this.ctx).xLabelFormat(a.globals.ttKeyFormatter,d,d):a.globals.isBarHorizontal||(r=a.globals.xLabelFormatter(d,h));return void 0!==a.config.tooltip.x.formatter&&(r=a.globals.ttKeyFormatter(d,h)),a.globals.seriesZ.length>0&&a.globals.seriesZ[0].length>0&&(o=c(a.globals.seriesZ[e][i],a)),n="function"==typeof a.config.xaxis.tooltip.formatter?a.globals.xaxisTooltipFormatter(d,h):r,{val:Array.isArray(l)?l.join(" "):l,xVal:Array.isArray(r)?r.join(" "):r,xAxisTTVal:Array.isArray(n)?n.join(" "):n,zVal:o}}},{key:"handleCustomTooltip",value:function(t){var e=t.i,i=t.j,a=t.y1,s=t.y2,r=t.w,n=this.ttCtx.getElTooltip(),o=r.config.tooltip.custom;Array.isArray(o)&&o[e]&&(o=o[e]),n.innerHTML=o({ctx:this.ctx,series:r.globals.series,seriesIndex:e,dataPointIndex:i,y1:a,y2:s,w:r})}}]),t}(),pt=function(){function t(i){e(this,t),this.ttCtx=i,this.ctx=i.ctx,this.w=i.w}return a(t,[{key:"moveXCrosshairs",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=this.ttCtx,a=this.w,s=i.getElXCrosshairs(),r=t-i.xcrosshairsWidth/2,n=a.globals.labels.slice().length;if(null!==e&&(r=a.globals.gridWidth/n*e),null!==s&&(s.setAttribute("x",r),s.setAttribute("x1",r),s.setAttribute("x2",r),s.setAttribute("y2",a.globals.gridHeight),s.classList.add("apexcharts-active")),r<0&&(r=0),r>a.globals.gridWidth&&(r=a.globals.gridWidth),i.blxaxisTooltip){var o=r;"tickWidth"!==a.config.xaxis.crosshairs.width&&"barWidth"!==a.config.xaxis.crosshairs.width||(o=r+i.xcrosshairsWidth/2),this.moveXAxisTooltip(o)}}},{key:"moveYCrosshairs",value:function(t){var e=this.ttCtx;null!==e.ycrosshairs&&(p.setAttrs(e.ycrosshairs,{y1:t,y2:t}),p.setAttrs(e.ycrosshairsHidden,{y1:t,y2:t}))}},{key:"moveXAxisTooltip",value:function(t){var e=this.w,i=this.ttCtx;if(null!==i.xaxisTooltip){i.xaxisTooltip.classList.add("apexcharts-active");var a=i.xaxisOffY+e.config.xaxis.tooltip.offsetY+e.globals.translateY+1+e.config.xaxis.offsetY;if(t-=i.xaxisTooltip.getBoundingClientRect().width/2,!isNaN(t)){t+=e.globals.translateX;var s;s=new p(this.ctx).getTextRects(i.xaxisTooltipText.innerHTML),i.xaxisTooltipText.style.minWidth=s.width+"px",i.xaxisTooltip.style.left=t+"px",i.xaxisTooltip.style.top=a+"px"}}}},{key:"moveYAxisTooltip",value:function(t){var e=this.w,i=this.ttCtx;null===i.yaxisTTEls&&(i.yaxisTTEls=e.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxistooltip"));var a=parseInt(i.ycrosshairsHidden.getAttribute("y1"),10),s=e.globals.translateY+a,r=i.yaxisTTEls[t].getBoundingClientRect().height,n=e.globals.translateYAxisX[t]-2;e.config.yaxis[t].opposite&&(n-=26),s-=r/2,-1===e.globals.ignoreYAxisIndexes.indexOf(t)?(i.yaxisTTEls[t].classList.add("apexcharts-active"),i.yaxisTTEls[t].style.top=s+"px",i.yaxisTTEls[t].style.left=n+e.config.yaxis[t].tooltip.offsetX+"px"):i.yaxisTTEls[t].classList.remove("apexcharts-active")}},{key:"moveTooltip",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,a=this.w,s=this.ttCtx,r=s.getElTooltip(),n=s.tooltipRect,o=null!==i?parseFloat(i):1,l=parseFloat(t)+o+5,h=parseFloat(e)+o/2;if(l>a.globals.gridWidth/2&&(l=l-n.ttWidth-o-15),l>a.globals.gridWidth-n.ttWidth-10&&(l=a.globals.gridWidth-n.ttWidth),l<-20&&(l=-20),a.config.tooltip.followCursor){var c=s.getElGrid(),d=c.getBoundingClientRect();h=s.e.clientY+a.globals.translateY-d.top-n.ttHeight/2}if(!a.config.tooltip.followCursor){var g=this.positionChecks(n,l,h);l=g.x,h=g.y}isNaN(l)||(l+=a.globals.translateX,r.style.left=l+"px",r.style.top=h+"px")}},{key:"positionChecks",value:function(t,e,i){var a=this.w;return t.ttHeight/2+i>a.globals.gridHeight&&(i=a.globals.gridHeight-t.ttHeight+a.globals.translateY),i<0&&(i=0),{x:e,y:i}}},{key:"moveMarkers",value:function(t,e){var i=this.w,a=this.ttCtx;if(i.globals.markers.size[t]>0)for(var s=i.globals.dom.baseEl.querySelectorAll(" .apexcharts-series[data\\:realIndex='".concat(t,"'] .apexcharts-marker")),r=0;r<s.length;r++)parseInt(s[r].getAttribute("rel"),10)===e&&(a.marker.resetPointsSize(),a.marker.enlargeCurrentPoint(e,s[r]));else a.marker.resetPointsSize(),this.moveDynamicPointOnHover(e,t)}},{key:"moveDynamicPointOnHover",value:function(t,e){var i,a,s=this.w,r=this.ttCtx,n=s.globals.pointsArray,o=r.tooltipUtil.getHoverMarkerSize(e),l=s.config.series[e].type;if(!l||"column"!==l&&"candlestick"!==l){i=n[e][t][0],a=n[e][t][1]?n[e][t][1]:0;var h=s.globals.dom.baseEl.querySelector(".apexcharts-series[data\\:realIndex='".concat(e,"'] .apexcharts-series-markers circle"));h&&(h.setAttribute("r",o),h.setAttribute("cx",i),h.setAttribute("cy",a)),this.moveXCrosshairs(i),r.fixedTooltip||this.moveTooltip(i,a,o)}}},{key:"moveDynamicPointsOnHover",value:function(t){var e,i=this.ttCtx,a=i.w,s=0,r=0,n=a.globals.pointsArray;e=new M(this.ctx).getActiveConfigSeriesIndex(!0);var o=i.tooltipUtil.getHoverMarkerSize(e);n[e]&&(s=n[e][t][0],r=n[e][t][1]);var l=i.tooltipUtil.getAllMarkers();if(null!==l)for(var h=0;h<a.globals.series.length;h++){var c=n[h];if(a.globals.comboCharts&&void 0===c&&l.splice(h,0,null),c&&c.length){var d=n[h][t][1];l[h].setAttribute("cx",s),null===d||isNaN(d)?l[h]&&l[h].setAttribute("r",0):(l[h]&&l[h].setAttribute("r",o),l[h]&&l[h].setAttribute("cy",d))}}if(this.moveXCrosshairs(s),!i.fixedTooltip){var g=r||a.globals.gridHeight;this.moveTooltip(s,g,o)}}},{key:"moveStickyTooltipOverBars",value:function(t){var e,i=this.w,a=this.ttCtx,s=i.globals.columnSeries?i.globals.columnSeries.length:i.globals.series.length,r=s>=2&&s%2==0?Math.floor(s/2):Math.floor(s/2)+1,n=i.globals.dom.baseEl.querySelector(".apexcharts-bar-series .apexcharts-series[rel='".concat(r,"'] path[j='").concat(t,"'], .apexcharts-candlestick-series .apexcharts-series[rel='").concat(r,"'] path[j='").concat(t,"'], .apexcharts-rangebar-series .apexcharts-series[rel='").concat(r,"'] path[j='").concat(t,"']")),o=n?parseFloat(n.getAttribute("cx")):0,l=n?parseFloat(n.getAttribute("barWidth")):0;i.globals.isXNumeric?o-=s%2!=0?l/2:0:(o=a.xAxisTicksPositions[t-1]+a.dataPointsDividedWidth/2,isNaN(o)&&(o=a.xAxisTicksPositions[t]-a.dataPointsDividedWidth/2));var h=a.getElGrid().getBoundingClientRect();if(e=a.e.clientY-h.top-a.tooltipRect.ttHeight/2,this.moveXCrosshairs(o),!a.fixedTooltip){var c=e||i.globals.gridHeight;this.moveTooltip(o,c)}}}]),t}(),xt=function(){function t(i){e(this,t),this.w=i.w,this.ttCtx=i,this.ctx=i.ctx,this.tooltipPosition=new pt(i)}return a(t,[{key:"drawDynamicPoints",value:function(){var t=this.w,e=new p(this.ctx),i=new P(this.ctx),a=t.globals.dom.baseEl.querySelectorAll(".apexcharts-series");(a=d(a)).sort((function(t,e){return Number(e.getAttribute("data:realIndex"))<Number(t.getAttribute("data:realIndex"))?0:-1}));for(var s=0;s<a.length;s++){var r=a[s].querySelector(".apexcharts-series-markers-wrap");if(null!==r){var n=void 0,o="apexcharts-marker w".concat((Math.random()+1).toString(36).substring(4));"line"!==t.config.chart.type&&"area"!==t.config.chart.type||t.globals.comboCharts||t.config.tooltip.intersect||(o+=" no-pointer-events");var l=i.getMarkerConfig(o,s);(n=e.drawMarker(0,0,l)).node.setAttribute("default-marker-size",0);var h=document.createElementNS(t.globals.SVGNS,"g");h.classList.add("apexcharts-series-markers"),h.appendChild(n.node),r.appendChild(h)}}}},{key:"enlargeCurrentPoint",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,s=this.w;"bubble"!==s.config.chart.type&&this.newPointSize(t,e);var r=e.getAttribute("cx"),n=e.getAttribute("cy");if(null!==i&&null!==a&&(r=i,n=a),this.tooltipPosition.moveXCrosshairs(r),!this.fixedTooltip){if("radar"===s.config.chart.type){var o=this.ttCtx.getElGrid(),l=o.getBoundingClientRect();r=this.ttCtx.e.clientX-l.left}this.tooltipPosition.moveTooltip(r,n,s.config.markers.hover.size)}}},{key:"enlargePoints",value:function(t){for(var e=this.w,i=this.ttCtx,a=t,s=e.globals.dom.baseEl.querySelectorAll(".apexcharts-series:not(.apexcharts-series-collapsed) .apexcharts-marker"),r=e.config.markers.hover.size,n=0;n<s.length;n++){var o=s[n].getAttribute("rel"),l=s[n].getAttribute("index");if(void 0===r&&(r=e.globals.markers.size[l]+e.config.markers.hover.sizeOffset),a===parseInt(o,10)){this.newPointSize(a,s[n]);var h=s[n].getAttribute("cx"),c=s[n].getAttribute("cy");this.tooltipPosition.moveXCrosshairs(h),i.fixedTooltip||this.tooltipPosition.moveTooltip(h,c,r)}else this.oldPointSize(s[n])}}},{key:"newPointSize",value:function(t,e){var i=this.w,a=i.config.markers.hover.size,s=0===t?e.parentNode.firstChild:e.parentNode.lastChild;if("0"!==s.getAttribute("default-marker-size")){var r=parseInt(s.getAttribute("index"),10);void 0===a&&(a=i.globals.markers.size[r]+i.config.markers.hover.sizeOffset),s.setAttribute("r",a)}}},{key:"oldPointSize",value:function(t){var e=parseFloat(t.getAttribute("default-marker-size"));t.setAttribute("r",e)}},{key:"resetPointsSize",value:function(){for(var t=this.w.globals.dom.baseEl.querySelectorAll(".apexcharts-series:not(.apexcharts-series-collapsed) .apexcharts-marker"),e=0;e<t.length;e++){var i=parseFloat(t[e].getAttribute("default-marker-size"));g.isNumber(i)?t[e].setAttribute("r",i):t[e].setAttribute("r",0)}}}]),t}(),bt=function(){function t(i){e(this,t),this.w=i.w,this.ttCtx=i}return a(t,[{key:"getAttr",value:function(t,e){return parseFloat(t.target.getAttribute(e))}},{key:"handleHeatTooltip",value:function(t){var e=t.e,i=t.opt,a=t.x,s=t.y,r=this.ttCtx,n=this.w;if(e.target.classList.contains("apexcharts-heatmap-rect")){var o=this.getAttr(e,"i"),l=this.getAttr(e,"j"),h=this.getAttr(e,"cx"),c=this.getAttr(e,"cy"),d=this.getAttr(e,"width"),g=this.getAttr(e,"height");if(r.tooltipLabels.drawSeriesTexts({ttItems:i.ttItems,i:o,j:l,shared:!1}),n.globals.capturedSeriesIndex=o,n.globals.capturedDataPointIndex=l,a=h+r.tooltipRect.ttWidth/2+d,s=c+r.tooltipRect.ttHeight/2-g/2,r.tooltipPosition.moveXCrosshairs(h+d/2),a>n.globals.gridWidth/2&&(a=h-r.tooltipRect.ttWidth/2+d),r.w.config.tooltip.followCursor){var u=r.getElGrid().getBoundingClientRect();s=r.e.clientY-u.top+n.globals.translateY/2-10}}return{x:a,y:s}}},{key:"handleMarkerTooltip",value:function(t){var e,i,a=t.e,s=t.opt,r=t.x,n=t.y,o=this.w,l=this.ttCtx;if(a.target.classList.contains("apexcharts-marker")){var h=parseInt(s.paths.getAttribute("cx"),10),c=parseInt(s.paths.getAttribute("cy"),10),d=parseFloat(s.paths.getAttribute("val"));if(i=parseInt(s.paths.getAttribute("rel"),10),e=parseInt(s.paths.parentNode.parentNode.parentNode.getAttribute("rel"),10)-1,l.intersect){var u=g.findAncestor(s.paths,"apexcharts-series");u&&(e=parseInt(u.getAttribute("data:realIndex"),10))}if(l.tooltipLabels.drawSeriesTexts({ttItems:s.ttItems,i:e,j:i,shared:!l.showOnIntersect&&o.config.tooltip.shared}),"mouseup"===a.type&&l.markerClick(a,e,i),o.globals.capturedSeriesIndex=e,o.globals.capturedDataPointIndex=i,r=h,n=c+o.globals.translateY-1.4*l.tooltipRect.ttHeight,l.w.config.tooltip.followCursor){var f=l.getElGrid().getBoundingClientRect();n=l.e.clientY+o.globals.translateY-f.top}d<0&&(n=c),l.marker.enlargeCurrentPoint(i,s.paths,r,n)}return{x:r,y:n}}},{key:"handleBarTooltip",value:function(t){var e,i,a=t.e,s=t.opt,r=this.w,n=this.ttCtx,o=n.getElTooltip(),l=0,h=0,c=0,d=this.getBarTooltipXY({e:a,opt:s});e=d.i;var g=d.barHeight,u=d.j;if(r.globals.capturedSeriesIndex=e,r.globals.capturedDataPointIndex=u,r.globals.isBarHorizontal&&n.tooltipUtil.hasBars()||!r.config.tooltip.shared?(h=d.x,c=d.y,i=Array.isArray(r.config.stroke.width)?r.config.stroke.width[e]:r.config.stroke.width,l=h):r.globals.comboCharts||r.config.tooltip.shared||(l/=2),isNaN(c)?c=r.globals.svgHeight-n.tooltipRect.ttHeight:c<0&&(c=0),h+n.tooltipRect.ttWidth>r.globals.gridWidth?h-=n.tooltipRect.ttWidth:h<0&&(h=0),n.w.config.tooltip.followCursor){var f=n.getElGrid().getBoundingClientRect();c=n.e.clientY-f.top}if(null===n.tooltip&&(n.tooltip=r.globals.dom.baseEl.querySelector(".apexcharts-tooltip")),r.config.tooltip.shared||(r.globals.comboBarCount>0?n.tooltipPosition.moveXCrosshairs(l+i/2):n.tooltipPosition.moveXCrosshairs(l)),!n.fixedTooltip&&(!r.config.tooltip.shared||r.globals.isBarHorizontal&&n.tooltipUtil.hasBars())){var p=r.globals.isMultipleYAxis?r.config.yaxis[x]&&r.config.yaxis[x].reversed:r.config.yaxis[0].reversed;p&&(h-=n.tooltipRect.ttWidth)<0&&(h=0),o.style.left=h+r.globals.translateX+"px";var x=parseInt(s.paths.parentNode.getAttribute("data:realIndex"),10);!p||r.globals.isBarHorizontal&&n.tooltipUtil.hasBars()||(c=c+g-2*(r.globals.series[e][u]<0?g:0)),n.tooltipRect.ttHeight+c>r.globals.gridHeight?(c=r.globals.gridHeight-n.tooltipRect.ttHeight+r.globals.translateY,o.style.top=c+"px"):o.style.top=c+r.globals.translateY-n.tooltipRect.ttHeight/2+"px"}}},{key:"getBarTooltipXY",value:function(t){var e=t.e,i=t.opt,a=this.w,s=null,r=this.ttCtx,n=0,o=0,l=0,h=0,c=0,d=e.target.classList;if(d.contains("apexcharts-bar-area")||d.contains("apexcharts-candlestick-area")||d.contains("apexcharts-rangebar-area")){var g=e.target,u=g.getBoundingClientRect(),f=i.elGrid.getBoundingClientRect(),p=u.height;c=u.height;var x=u.width,b=parseInt(g.getAttribute("cx"),10),m=parseInt(g.getAttribute("cy"),10);h=parseFloat(g.getAttribute("barWidth"));var v="touchmove"===e.type?e.touches[0].clientX:e.clientX;s=parseInt(g.getAttribute("j"),10),n=parseInt(g.parentNode.getAttribute("rel"),10)-1;var y=g.getAttribute("data-range-y1"),w=g.getAttribute("data-range-y2");a.globals.comboCharts&&(n=parseInt(g.parentNode.getAttribute("data:realIndex"),10)),r.tooltipLabels.drawSeriesTexts({ttItems:i.ttItems,i:n,j:s,y1:y?parseInt(y,10):null,y2:w?parseInt(w,10):null,shared:!r.showOnIntersect&&a.config.tooltip.shared}),a.config.tooltip.followCursor?a.globals.isBarHorizontal?(o=v-f.left+15,l=m-r.dataPointsDividedHeight+p/2-r.tooltipRect.ttHeight/2):(o=a.globals.isXNumeric?b-x/2:b-r.dataPointsDividedWidth+x/2,l=e.clientY-f.top-r.tooltipRect.ttHeight/2-15):a.globals.isBarHorizontal?((o=b)<r.xyRatios.baseLineInvertedY&&(o=b-r.tooltipRect.ttWidth),l=m-r.dataPointsDividedHeight+p/2-r.tooltipRect.ttHeight/2):(o=a.globals.isXNumeric?b-x/2:b-r.dataPointsDividedWidth+x/2,l=m)}return{x:o,y:l,barHeight:c,barWidth:h,i:n,j:s}}}]),t}(),mt=function(){function t(i){e(this,t),this.w=i.w,this.ttCtx=i}return a(t,[{key:"drawXaxisTooltip",value:function(){var t=this.w,e=this.ttCtx,i="bottom"===t.config.xaxis.position;e.xaxisOffY=i?t.globals.gridHeight+1:-t.globals.xAxisHeight-t.config.xaxis.axisTicks.height+3;var a=i?"apexcharts-xaxistooltip apexcharts-xaxistooltip-bottom":"apexcharts-xaxistooltip apexcharts-xaxistooltip-top",s=t.globals.dom.elWrap;e.blxaxisTooltip&&(null===t.globals.dom.baseEl.querySelector(".apexcharts-xaxistooltip")&&(e.xaxisTooltip=document.createElement("div"),e.xaxisTooltip.setAttribute("class",a+" apexcharts-theme-"+t.config.tooltip.theme),s.appendChild(e.xaxisTooltip),e.xaxisTooltipText=document.createElement("div"),e.xaxisTooltipText.classList.add("apexcharts-xaxistooltip-text"),e.xaxisTooltipText.style.fontFamily=t.config.xaxis.tooltip.style.fontFamily||t.config.chart.fontFamily,e.xaxisTooltipText.style.fontSize=t.config.xaxis.tooltip.style.fontSize,e.xaxisTooltip.appendChild(e.xaxisTooltipText)))}},{key:"drawYaxisTooltip",value:function(){for(var t=this.w,e=this.ttCtx,i=function(i){var a=t.config.yaxis[i].opposite||t.config.yaxis[i].crosshairs.opposite;e.yaxisOffX=a?t.globals.gridWidth+1:1;var s="apexcharts-yaxistooltip apexcharts-yaxistooltip-".concat(i,a?" apexcharts-yaxistooltip-right":" apexcharts-yaxistooltip-left");t.globals.yAxisSameScaleIndices.map((function(e,a){e.map((function(e,a){a===i&&(s+=t.config.yaxis[a].show?" ":" apexcharts-yaxistooltip-hidden")}))}));var r=t.globals.dom.elWrap;e.blyaxisTooltip&&(null===t.globals.dom.baseEl.querySelector(".apexcharts-yaxistooltip apexcharts-yaxistooltip-".concat(i))&&(e.yaxisTooltip=document.createElement("div"),e.yaxisTooltip.setAttribute("class",s+" apexcharts-theme-"+t.config.tooltip.theme),r.appendChild(e.yaxisTooltip),0===i&&(e.yaxisTooltipText=[]),e.yaxisTooltipText.push(document.createElement("div")),e.yaxisTooltipText[i].classList.add("apexcharts-yaxistooltip-text"),e.yaxisTooltip.appendChild(e.yaxisTooltipText[i])))},a=0;a<t.config.yaxis.length;a++)i(a)}},{key:"setXCrosshairWidth",value:function(){var t=this.w,e=this.ttCtx,i=e.getElXCrosshairs();if(e.xcrosshairsWidth=parseInt(t.config.xaxis.crosshairs.width,10),t.globals.comboCharts){var a=t.globals.dom.baseEl.querySelector(".apexcharts-bar-area");if(null!==a&&"barWidth"===t.config.xaxis.crosshairs.width){var s=parseFloat(a.getAttribute("barWidth"));e.xcrosshairsWidth=s}else if("tickWidth"===t.config.xaxis.crosshairs.width){var r=t.globals.labels.length;e.xcrosshairsWidth=t.globals.gridWidth/r}}else if("tickWidth"===t.config.xaxis.crosshairs.width){var n=t.globals.labels.length;e.xcrosshairsWidth=t.globals.gridWidth/n}else if("barWidth"===t.config.xaxis.crosshairs.width){var o=t.globals.dom.baseEl.querySelector(".apexcharts-bar-area");if(null!==o){var l=parseFloat(o.getAttribute("barWidth"));e.xcrosshairsWidth=l}else e.xcrosshairsWidth=1}t.globals.isBarHorizontal&&(e.xcrosshairsWidth=0),null!==i&&e.xcrosshairsWidth>0&&i.setAttribute("width",e.xcrosshairsWidth)}},{key:"handleYCrosshair",value:function(){var t=this.w,e=this.ttCtx;e.ycrosshairs=t.globals.dom.baseEl.querySelector(".apexcharts-ycrosshairs"),e.ycrosshairsHidden=t.globals.dom.baseEl.querySelector(".apexcharts-ycrosshairs-hidden")}},{key:"drawYaxisTooltipText",value:function(t,e,i){var a=this.ttCtx,s=this.w,r=s.globals.yLabelFormatters[t];if(a.blyaxisTooltip){var n=a.getElGrid().getBoundingClientRect(),o=(e-n.top)*i.yRatio[t],l=s.globals.maxYArr[t]-s.globals.minYArr[t],h=s.globals.minYArr[t]+(l-o);a.tooltipPosition.moveYCrosshairs(e-n.top),a.yaxisTooltipText[t].innerHTML=r(h),a.tooltipPosition.moveYAxisTooltip(t)}}}]),t}(),vt=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w;var a=this.w;this.tConfig=a.config.tooltip,this.tooltipUtil=new ut(this),this.tooltipLabels=new ft(this),this.tooltipPosition=new pt(this),this.marker=new xt(this),this.intersect=new bt(this),this.axesTooltip=new mt(this),this.showOnIntersect=this.tConfig.intersect,this.showTooltipTitle=this.tConfig.x.show,this.fixedTooltip=this.tConfig.fixed.enabled,this.xaxisTooltip=null,this.yaxisTTEls=null,this.isBarShared=!a.globals.isBarHorizontal&&this.tConfig.shared}return a(t,[{key:"getElTooltip",value:function(t){return t||(t=this),t.w.globals.dom.baseEl.querySelector(".apexcharts-tooltip")}},{key:"getElXCrosshairs",value:function(){return this.w.globals.dom.baseEl.querySelector(".apexcharts-xcrosshairs")}},{key:"getElGrid",value:function(){return this.w.globals.dom.baseEl.querySelector(".apexcharts-grid")}},{key:"drawTooltip",value:function(t){var e=this.w;this.xyRatios=t,this.blxaxisTooltip=e.config.xaxis.tooltip.enabled&&e.globals.axisCharts,this.blyaxisTooltip=e.config.yaxis[0].tooltip.enabled&&e.globals.axisCharts,this.allTooltipSeriesGroups=[],e.globals.axisCharts||(this.showTooltipTitle=!1);var i=document.createElement("div");if(i.classList.add("apexcharts-tooltip"),i.classList.add("apexcharts-theme-".concat(this.tConfig.theme)),e.globals.dom.elWrap.appendChild(i),e.globals.axisCharts){this.axesTooltip.drawXaxisTooltip(),this.axesTooltip.drawYaxisTooltip(),this.axesTooltip.setXCrosshairWidth(),this.axesTooltip.handleYCrosshair();var a=new G(this.ctx);this.xAxisTicksPositions=a.getXAxisTicksPositions()}if(!e.globals.comboCharts&&!this.tConfig.intersect&&"bar"!==e.config.chart.type&&"rangeBar"!==e.config.chart.type||this.tConfig.shared||(this.showOnIntersect=!0),0!==e.config.markers.size&&0!==e.globals.markers.largestSize||this.marker.drawDynamicPoints(this),e.globals.collapsedSeries.length!==e.globals.series.length){this.dataPointsDividedHeight=e.globals.gridHeight/e.globals.dataPoints,this.dataPointsDividedWidth=e.globals.gridWidth/e.globals.dataPoints,this.showTooltipTitle&&(this.tooltipTitle=document.createElement("div"),this.tooltipTitle.classList.add("apexcharts-tooltip-title"),this.tooltipTitle.style.fontFamily=this.tConfig.style.fontFamily||e.config.chart.fontFamily,this.tooltipTitle.style.fontSize=this.tConfig.style.fontSize,i.appendChild(this.tooltipTitle));var s=e.globals.series.length;(e.globals.xyCharts||e.globals.comboCharts)&&this.tConfig.shared&&(s=this.showOnIntersect?1:e.globals.series.length),this.legendLabels=e.globals.dom.baseEl.querySelectorAll(".apexcharts-legend-text"),this.ttItems=this.createTTElements(s),this.addSVGEvents()}}},{key:"createTTElements",value:function(t){for(var e=this.w,i=[],a=this.getElTooltip(),s=0;s<t;s++){var r=document.createElement("div");r.classList.add("apexcharts-tooltip-series-group"),this.tConfig.shared&&this.tConfig.enabledOnSeries&&Array.isArray(this.tConfig.enabledOnSeries)&&this.tConfig.enabledOnSeries.indexOf(s)<0&&r.classList.add("apexcharts-tooltip-series-group-hidden");var n=document.createElement("span");n.classList.add("apexcharts-tooltip-marker"),n.style.backgroundColor=e.globals.colors[s],r.appendChild(n);var o=document.createElement("div");o.classList.add("apexcharts-tooltip-text"),o.style.fontFamily=this.tConfig.style.fontFamily||e.config.chart.fontFamily,o.style.fontSize=this.tConfig.style.fontSize;var l=document.createElement("div");l.classList.add("apexcharts-tooltip-y-group");var h=document.createElement("span");h.classList.add("apexcharts-tooltip-text-label"),l.appendChild(h);var c=document.createElement("span");c.classList.add("apexcharts-tooltip-text-value"),l.appendChild(c);var d=document.createElement("div");d.classList.add("apexcharts-tooltip-z-group");var g=document.createElement("span");g.classList.add("apexcharts-tooltip-text-z-label"),d.appendChild(g);var u=document.createElement("span");u.classList.add("apexcharts-tooltip-text-z-value"),d.appendChild(u),o.appendChild(l),o.appendChild(d),r.appendChild(o),a.appendChild(r),i.push(r)}return i}},{key:"addSVGEvents",value:function(){var t=this.w,e=t.config.chart.type,i=this.getElTooltip(),a=!("bar"!==e&&"candlestick"!==e&&"rangeBar"!==e),s="area"===e||"line"===e||"scatter"===e||"bubble"===e||"radar"===e,r=t.globals.dom.Paper.node,n=this.getElGrid();n&&(this.seriesBound=n.getBoundingClientRect());var o,l=[],h=[],c={hoverArea:r,elGrid:n,tooltipEl:i,tooltipY:l,tooltipX:h,ttItems:this.ttItems};if(t.globals.axisCharts&&(s?o=t.globals.dom.baseEl.querySelectorAll(".apexcharts-series[data\\:longestSeries='true'] .apexcharts-marker"):a?o=t.globals.dom.baseEl.querySelectorAll(".apexcharts-series .apexcharts-bar-area, .apexcharts-series .apexcharts-candlestick-area, .apexcharts-series .apexcharts-rangebar-area"):"heatmap"===e&&(o=t.globals.dom.baseEl.querySelectorAll(".apexcharts-series .apexcharts-heatmap")),o&&o.length))for(var d=0;d<o.length;d++)l.push(o[d].getAttribute("cy")),h.push(o[d].getAttribute("cx"));if(t.globals.xyCharts&&!this.showOnIntersect||t.globals.comboCharts&&!this.showOnIntersect||a&&this.tooltipUtil.hasBars()&&this.tConfig.shared)this.addPathsEventListeners([r],c);else if(a&&!t.globals.comboCharts||s&&this.showOnIntersect)this.addDatapointEventsListeners(c);else if(!t.globals.axisCharts||"heatmap"===e){var g=t.globals.dom.baseEl.querySelectorAll(".apexcharts-series");this.addPathsEventListeners(g,c)}if(this.showOnIntersect){var u=t.globals.dom.baseEl.querySelectorAll(".apexcharts-line-series .apexcharts-marker, .apexcharts-area-series .apexcharts-marker");u.length>0&&this.addPathsEventListeners(u,c),this.tooltipUtil.hasBars()&&!this.tConfig.shared&&this.addDatapointEventsListeners(c)}}},{key:"drawFixedTooltipRect",value:function(){var t=this.w,e=this.getElTooltip(),i=e.getBoundingClientRect(),a=i.width+10,s=i.height+10,r=this.tConfig.fixed.offsetX,n=this.tConfig.fixed.offsetY,o=this.tConfig.fixed.position.toLowerCase();return o.indexOf("right")>-1&&(r=r+t.globals.svgWidth-a+10),o.indexOf("bottom")>-1&&(n=n+t.globals.svgHeight-s-10),e.style.left=r+"px",e.style.top=n+"px",{x:r,y:n,ttWidth:a,ttHeight:s}}},{key:"addDatapointEventsListeners",value:function(t){var e=this.w.globals.dom.baseEl.querySelectorAll(".apexcharts-series-markers .apexcharts-marker, .apexcharts-bar-area, .apexcharts-candlestick-area, .apexcharts-rangebar-area");this.addPathsEventListeners(e,t)}},{key:"addPathsEventListeners",value:function(t,e){for(var i=this,a=function(a){var s={paths:t[a],tooltipEl:e.tooltipEl,tooltipY:e.tooltipY,tooltipX:e.tooltipX,elGrid:e.elGrid,hoverArea:e.hoverArea,ttItems:e.ttItems};["mousemove","mouseup","touchmove","mouseout","touchend"].map((function(e){return t[a].addEventListener(e,i.seriesHover.bind(i,s),{capture:!1,passive:!0})}))},s=0;s<t.length;s++)a(s)}},{key:"seriesHover",value:function(t,e){var i=this,a=[],s=this.w;s.config.chart.group&&(a=this.ctx.getGroupedCharts()),s.globals.axisCharts&&(s.globals.minX===-1/0&&s.globals.maxX===1/0||0===s.globals.dataPoints)||(a.length?a.forEach((function(a){var s=i.getElTooltip(a),r={paths:t.paths,tooltipEl:s,tooltipY:t.tooltipY,tooltipX:t.tooltipX,elGrid:t.elGrid,hoverArea:t.hoverArea,ttItems:a.w.globals.tooltip.ttItems};a.w.globals.minX===i.w.globals.minX&&a.w.globals.maxX===i.w.globals.maxX&&a.w.globals.tooltip.seriesHoverByContext({chartCtx:a,ttCtx:a.w.globals.tooltip,opt:r,e:e})})):this.seriesHoverByContext({chartCtx:this.ctx,ttCtx:this.w.globals.tooltip,opt:t,e:e}))}},{key:"seriesHoverByContext",value:function(t){var e=t.chartCtx,i=t.ttCtx,a=t.opt,s=t.e,r=e.w,n=this.getElTooltip();(i.tooltipRect={x:0,y:0,ttWidth:n.getBoundingClientRect().width,ttHeight:n.getBoundingClientRect().height},i.e=s,!i.tooltipUtil.hasBars()||r.globals.comboCharts||i.isBarShared)||this.tConfig.onDatasetHover.highlightDataSeries&&new M(e).toggleSeriesOnHover(s,s.target.parentNode);i.fixedTooltip&&i.drawFixedTooltipRect(),r.globals.axisCharts?i.axisChartsTooltips({e:s,opt:a,tooltipRect:i.tooltipRect}):i.nonAxisChartsTooltips({e:s,opt:a,tooltipRect:i.tooltipRect})}},{key:"axisChartsTooltips",value:function(t){var e,i,a=t.e,s=t.opt,r=this.w,n=s.elGrid.getBoundingClientRect(),o="touchmove"===a.type?a.touches[0].clientX:a.clientX,l="touchmove"===a.type?a.touches[0].clientY:a.clientY;if(this.clientY=l,this.clientX=o,r.globals.capturedSeriesIndex=-1,r.globals.capturedDataPointIndex=-1,l<n.top||l>n.top+n.height)this.handleMouseOut(s);else{if(Array.isArray(this.tConfig.enabledOnSeries)&&!r.config.tooltip.shared){var h=parseInt(s.paths.getAttribute("index"),10);if(this.tConfig.enabledOnSeries.indexOf(h)<0)return void this.handleMouseOut(s)}var c=this.getElTooltip(),d=this.getElXCrosshairs(),g=r.globals.xyCharts||"bar"===r.config.chart.type&&!r.globals.isBarHorizontal&&this.tooltipUtil.hasBars()&&this.tConfig.shared||r.globals.comboCharts&&this.tooltipUtil.hasBars();if(r.globals.isBarHorizontal&&this.tooltipUtil.hasBars()&&(g=!1),"mousemove"===a.type||"touchmove"===a.type||"mouseup"===a.type){if(null!==d&&d.classList.add("apexcharts-active"),null!==this.ycrosshairs&&this.blyaxisTooltip&&this.ycrosshairs.classList.add("apexcharts-active"),g&&!this.showOnIntersect)this.handleStickyTooltip(a,o,l,s);else if("heatmap"===r.config.chart.type){var u=this.intersect.handleHeatTooltip({e:a,opt:s,x:e,y:i});e=u.x,i=u.y,c.style.left=e+"px",c.style.top=i+"px"}else this.tooltipUtil.hasBars()&&this.intersect.handleBarTooltip({e:a,opt:s}),this.tooltipUtil.hasMarkers()&&this.intersect.handleMarkerTooltip({e:a,opt:s,x:e,y:i});if(this.blyaxisTooltip)for(var f=0;f<r.config.yaxis.length;f++)this.axesTooltip.drawYaxisTooltipText(f,l,this.xyRatios);s.tooltipEl.classList.add("apexcharts-active")}else"mouseout"!==a.type&&"touchend"!==a.type||this.handleMouseOut(s)}}},{key:"nonAxisChartsTooltips",value:function(t){var e=t.e,i=t.opt,a=t.tooltipRect,s=this.w,r=i.paths.getAttribute("rel"),n=this.getElTooltip(),o=s.globals.dom.elWrap.getBoundingClientRect();if("mousemove"===e.type||"touchmove"===e.type){n.classList.add("apexcharts-active"),this.tooltipLabels.drawSeriesTexts({ttItems:i.ttItems,i:parseInt(r,10)-1,shared:!1});var l=s.globals.clientX-o.left-a.ttWidth/2,h=s.globals.clientY-o.top-a.ttHeight-10;n.style.left=l+"px",n.style.top=h+"px"}else"mouseout"!==e.type&&"touchend"!==e.type||n.classList.remove("apexcharts-active")}},{key:"handleStickyTooltip",value:function(t,e,i,a){var s=this.w,r=this.tooltipUtil.getNearestValues({context:this,hoverArea:a.hoverArea,elGrid:a.elGrid,clientX:e,clientY:i}),n=r.j,o=r.capturedSeries;r.hoverX<0||r.hoverX>s.globals.gridWidth?this.handleMouseOut(a):null!==o?this.handleStickyCapturedSeries(t,o,a,n):this.tooltipUtil.isXoverlap(n)&&this.create(t,this,0,n,a.ttItems)}},{key:"handleStickyCapturedSeries",value:function(t,e,i,a){var s=this.w;null===s.globals.series[e][a]?this.handleMouseOut(i):void 0!==s.globals.series[e][a]?this.tConfig.shared&&this.tooltipUtil.isXoverlap(a)&&this.tooltipUtil.isInitialSeriesSameLen()?this.create(t,this,e,a,i.ttItems):this.create(t,this,e,a,i.ttItems,!1):this.tooltipUtil.isXoverlap(a)&&this.create(t,this,0,a,i.ttItems)}},{key:"deactivateHoverFilter",value:function(){for(var t=this.w,e=new p(this.ctx),i=t.globals.dom.Paper.select(".apexcharts-bar-area"),a=0;a<i.length;a++)e.pathMouseLeave(i[a])}},{key:"handleMouseOut",value:function(t){var e=this.w,i=this.getElXCrosshairs();if(t.tooltipEl.classList.remove("apexcharts-active"),this.deactivateHoverFilter(),"bubble"!==e.config.chart.type&&this.marker.resetPointsSize(),null!==i&&i.classList.remove("apexcharts-active"),null!==this.ycrosshairs&&this.ycrosshairs.classList.remove("apexcharts-active"),this.blxaxisTooltip&&this.xaxisTooltip.classList.remove("apexcharts-active"),this.blyaxisTooltip){null===this.yaxisTTEls&&(this.yaxisTTEls=e.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxistooltip"));for(var a=0;a<this.yaxisTTEls.length;a++)this.yaxisTTEls[a].classList.remove("apexcharts-active")}e.config.legend.tooltipHoverFormatter&&this.legendLabels.forEach((function(t){var e=t.getAttribute("data:default-text");t.innerHTML=decodeURIComponent(e)}))}},{key:"markerClick",value:function(t,e,i){var a=this.w;"function"==typeof a.config.chart.events.markerClick&&a.config.chart.events.markerClick(t,this.ctx,{seriesIndex:e,dataPointIndex:i,w:a}),this.ctx.events.fireEvent("markerClick",[t,this.ctx,{seriesIndex:e,dataPointIndex:i,w:a}])}},{key:"create",value:function(t,e,i,a,s){var r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:null,n=this.w,o=e;"mouseup"===t.type&&this.markerClick(t,i,a),null===r&&(r=this.tConfig.shared);var l=this.tooltipUtil.hasMarkers(),h=this.tooltipUtil.getElBars();if(n.config.legend.tooltipHoverFormatter){var c=n.config.legend.tooltipHoverFormatter,d=Array.from(this.legendLabels);d.forEach((function(t){var e=t.getAttribute("data:default-text");t.innerHTML=decodeURIComponent(e)}));for(var g=0;g<d.length;g++){var u=d[g],f=parseInt(u.getAttribute("i"),10),x=decodeURIComponent(u.getAttribute("data:default-text")),b=c(x,{seriesIndex:r?f:i,dataPointIndex:a,w:n});if(r)u.innerHTML=n.globals.collapsedSeriesIndices.indexOf(f)<0?b:x;else if(u.innerHTML=f===i?b:x,i===f)break}}if(r){if(o.tooltipLabels.drawSeriesTexts({ttItems:s,i:i,j:a,shared:!this.showOnIntersect&&this.tConfig.shared}),l&&(n.globals.markers.largestSize>0?o.marker.enlargePoints(a):o.tooltipPosition.moveDynamicPointsOnHover(a)),this.tooltipUtil.hasBars()&&(this.barSeriesHeight=this.tooltipUtil.getBarsHeight(h),this.barSeriesHeight>0)){var m=new p(this.ctx),v=n.globals.dom.Paper.select(".apexcharts-bar-area[j='".concat(a,"']"));this.deactivateHoverFilter(),this.tooltipPosition.moveStickyTooltipOverBars(a);for(var y=0;y<v.length;y++)m.pathMouseEnter(v[y])}}else o.tooltipLabels.drawSeriesTexts({shared:!1,ttItems:s,i:i,j:a}),this.tooltipUtil.hasBars()&&o.tooltipPosition.moveStickyTooltipOverBars(a),l&&o.tooltipPosition.moveMarkers(i,a)}}]),t}(),yt=function(t){function i(){return e(this,i),c(this,l(i).apply(this,arguments))}return o(i,t),a(i,[{key:"draw",value:function(t,e){var i=this,a=this.w;this.graphics=new p(this.ctx),this.bar=new E(this.ctx,this.xyRatios);var s=new m(this.ctx,a);t=s.getLogSeries(t),this.yRatio=s.getLogYRatios(this.yRatio),this.barHelpers.initVariables(t),"100%"===a.config.chart.stackType&&(t=a.globals.seriesPercent.slice()),this.series=t,this.totalItems=0,this.prevY=[],this.prevX=[],this.prevYF=[],this.prevXF=[],this.prevYVal=[],this.prevXVal=[],this.xArrj=[],this.xArrjF=[],this.xArrjVal=[],this.yArrj=[],this.yArrjF=[],this.yArrjVal=[];for(var r=0;r<t.length;r++)t[r].length>0&&(this.totalItems+=t[r].length);for(var o=this.graphics.group({class:"apexcharts-bar-series apexcharts-plot-series"}),l=0,h=0,c=function(s,r){var c=void 0,d=void 0,u=void 0,f=void 0,p=[],x=[],b=a.globals.comboCharts?e[s]:s;i.yRatio.length>1&&(i.yaxisIndex=b),i.isReversed=a.config.yaxis[i.yaxisIndex]&&a.config.yaxis[i.yaxisIndex].reversed;var m=i.graphics.group({class:"apexcharts-series",seriesName:g.escapeString(a.globals.seriesNames[b]),rel:s+1,"data:realIndex":b}),v=i.graphics.group({class:"apexcharts-datalabels","data:realIndex":b}),y=0,w=0,k=i.initialPositions(l,h,c,d,u,f);h=k.y,y=k.barHeight,d=k.yDivision,f=k.zeroW,l=k.x,w=k.barWidth,c=k.xDivision,u=k.zeroH,i.yArrj=[],i.yArrjF=[],i.yArrjVal=[],i.xArrj=[],i.xArrjF=[],i.xArrjVal=[],1===i.prevY.length&&i.prevY[0].every((function(t){return isNaN(t)}))&&(i.prevY[0]=i.prevY[0].map((function(t){return u})),i.prevYF[0]=i.prevYF[0].map((function(t){return 0})));for(var A=0;A<a.globals.dataPoints;A++){var S=i.barHelpers.getStrokeWidth(s,A,b),C={indexes:{i:s,j:A,realIndex:b,bc:r},strokeWidth:S,x:l,y:h,elSeries:m},L=null;i.isHorizontal?(L=i.drawStackedBarPaths(n({},C,{zeroW:f,barHeight:y,yDivision:d})),w=i.series[s][A]/i.invertedYRatio):(L=i.drawStackedColumnPaths(n({},C,{xDivision:c,barWidth:w,zeroH:u})),y=i.series[s][A]/i.yRatio[i.yaxisIndex]),h=L.y,l=L.x,p.push(l),x.push(h);var P=i.barHelpers.getPathFillColor(t,s,A,b);m=i.renderSeries({realIndex:b,pathFill:P,j:A,i:s,pathFrom:L.pathFrom,pathTo:L.pathTo,strokeWidth:S,elSeries:m,x:l,y:h,series:t,barHeight:y,barWidth:w,elDataLabelsWrap:v,type:"bar",visibleSeries:0})}a.globals.seriesXvalues[b]=p,a.globals.seriesYvalues[b]=x,i.prevY.push(i.yArrj),i.prevYF.push(i.yArrjF),i.prevYVal.push(i.yArrjVal),i.prevX.push(i.xArrj),i.prevXF.push(i.xArrjF),i.prevXVal.push(i.xArrjVal),o.add(m)},d=0,u=0;d<t.length;d++,u++)c(d,u);return o}},{key:"initialPositions",value:function(t,e,i,a,s,r){var n,o,l=this.w;return this.isHorizontal?(n=(n=a=l.globals.gridHeight/l.globals.dataPoints)*parseInt(l.config.plotOptions.bar.barHeight,10)/100,r=this.baseLineInvertedY+l.globals.padHorizontal+(this.isReversed?l.globals.gridWidth:0)-(this.isReversed?2*this.baseLineInvertedY:0),e=(a-n)/2):(o=i=l.globals.gridWidth/l.globals.dataPoints,o=l.globals.isXNumeric?(i=l.globals.minXDiff/this.xRatio)*parseInt(this.barOptions.columnWidth,10)/100:o*parseInt(l.config.plotOptions.bar.columnWidth,10)/100,s=this.baseLineY[this.yaxisIndex]+(this.isReversed?l.globals.gridHeight:0)-(this.isReversed?2*this.baseLineY[this.yaxisIndex]:0),t=l.globals.padHorizontal+(i-o)/2),{x:t,y:e,yDivision:a,xDivision:i,barHeight:n,barWidth:o,zeroH:s,zeroW:r}}},{key:"drawStackedBarPaths",value:function(t){for(var e,i=t.indexes,a=t.barHeight,s=t.strokeWidth,r=t.zeroW,n=t.x,o=t.y,l=t.yDivision,h=t.elSeries,c=this.w,d=o,g=i.i,u=i.j,f=i.bc,p=0,x=0;x<this.prevXF.length;x++)p+=this.prevXF[x][u];if(g>0){var b=r;this.prevXVal[g-1][u]<0?b=this.series[g][u]>=0?this.prevX[g-1][u]+p-2*(this.isReversed?p:0):this.prevX[g-1][u]:this.prevXVal[g-1][u]>=0&&(b=this.series[g][u]>=0?this.prevX[g-1][u]:this.prevX[g-1][u]-p+2*(this.isReversed?p:0)),e=b}else e=r;n=null===this.series[g][u]?e:e+this.series[g][u]/this.invertedYRatio-2*(this.isReversed?this.series[g][u]/this.invertedYRatio:0),this.xArrj.push(n),this.xArrjF.push(Math.abs(e-n)),this.xArrjVal.push(this.series[g][u]);var m=this.barHelpers.getBarpaths({barYPosition:d,barHeight:a,x1:e,x2:n,strokeWidth:s,series:this.series,realIndex:i.realIndex,i:g,j:u,w:c});return this.barHelpers.barBackground({bc:f,i:g,y1:d,y2:a,elSeries:h}),o+=l,{pathTo:m.pathTo,pathFrom:m.pathFrom,x:n,y:o}}},{key:"drawStackedColumnPaths",value:function(t){var e=t.indexes,i=t.x,a=t.y,s=t.xDivision,r=t.barWidth,n=t.zeroH,o=(t.strokeWidth,t.elSeries),l=this.w,h=e.i,c=e.j,d=e.bc;if(l.globals.isXNumeric){var g=l.globals.seriesX[h][c];g||(g=0),i=(g-l.globals.minX)/this.xRatio-r/2}for(var u,f=i,p=0,x=0;x<this.prevYF.length;x++)p+=isNaN(this.prevYF[x][c])?0:this.prevYF[x][c];if(h>0&&!l.globals.isXNumeric||h>0&&l.globals.isXNumeric&&l.globals.seriesX[h-1][c]===l.globals.seriesX[h][c]){var b,m,v=Math.min(this.yRatio.length+1,h+1);if(void 0!==this.prevY[h-1])for(var y=1;y<v;y++)if(!isNaN(this.prevY[h-y][c])){m=this.prevY[h-y][c];break}for(var w=1;w<v;w++){if(this.prevYVal[h-w][c]<0){b=this.series[h][c]>=0?m-p+2*(this.isReversed?p:0):m;break}if(this.prevYVal[h-w][c]>=0){b=this.series[h][c]>=0?m:m+p-2*(this.isReversed?p:0);break}}void 0===b&&(b=l.globals.gridHeight),u=this.prevYF[0].every((function(t){return 0===t}))&&this.prevYF.slice(1,h).every((function(t){return t.every((function(t){return isNaN(t)}))}))?l.globals.gridHeight-n:b}else u=l.globals.gridHeight-n;a=u-this.series[h][c]/this.yRatio[this.yaxisIndex]+2*(this.isReversed?this.series[h][c]/this.yRatio[this.yaxisIndex]:0),this.yArrj.push(a),this.yArrjF.push(Math.abs(u-a)),this.yArrjVal.push(this.series[h][c]);var k=this.barHelpers.getColumnPaths({barXPosition:f,barWidth:r,y1:u,y2:a,yRatio:this.yRatio[this.yaxisIndex],strokeWidth:this.strokeWidth,series:this.series,realIndex:e.realIndex,i:h,j:c,w:l});return this.barHelpers.barBackground({bc:d,i:h,x1:f,x2:r,elSeries:o}),i+=s,{pathTo:k.pathTo,pathFrom:k.pathFrom,x:l.globals.isXNumeric?i-s:i,y:a}}}]),i}(E),wt=function(t){function i(){return e(this,i),c(this,l(i).apply(this,arguments))}return o(i,t),a(i,[{key:"draw",value:function(t,e){var i=this.w,a=new p(this.ctx),s=new L(this.ctx);this.candlestickOptions=this.w.config.plotOptions.candlestick;var r=new m(this.ctx,i);t=r.getLogSeries(t),this.series=t,this.yRatio=r.getLogYRatios(this.yRatio),this.barHelpers.initVariables(t);for(var n=a.group({class:"apexcharts-candlestick-series apexcharts-plot-series"}),o=0;o<t.length;o++){var l,h,c=void 0,d=void 0,u=[],f=[],x=i.globals.comboCharts?e[o]:o,b=a.group({class:"apexcharts-series",seriesName:g.escapeString(i.globals.seriesNames[x]),rel:o+1,"data:realIndex":x});t[o].length>0&&(this.visibleI=this.visibleI+1);var v,y;this.yRatio.length>1&&(this.yaxisIndex=x);var w=this.barHelpers.initialPositions();d=w.y,v=w.barHeight,c=w.x,y=w.barWidth,l=w.xDivision,h=w.zeroH,f.push(c+y/2);for(var k=a.group({class:"apexcharts-datalabels","data:realIndex":x}),A=0;A<i.globals.dataPoints;A++){var S,C=this.barHelpers.getStrokeWidth(o,A,x),P=this.drawCandleStickPaths({indexes:{i:o,j:A,realIndex:x},x:c,y:d,xDivision:l,barWidth:y,zeroH:h,strokeWidth:C,elSeries:b});d=P.y,c=P.x,S=P.color,A>0&&f.push(c+y/2),u.push(d);var T=s.fillPath({seriesNumber:x,dataPointIndex:A,color:S,value:t[o][A]}),z=this.candlestickOptions.wick.useFillColor?S:void 0;this.renderSeries({realIndex:x,pathFill:T,lineFill:z,j:A,i:o,pathFrom:P.pathFrom,pathTo:P.pathTo,strokeWidth:C,elSeries:b,x:c,y:d,series:t,barHeight:v,barWidth:y,elDataLabelsWrap:k,visibleSeries:this.visibleI,type:"candlestick"})}i.globals.seriesXvalues[x]=f,i.globals.seriesYvalues[x]=u,n.add(b)}return n}},{key:"drawCandleStickPaths",value:function(t){var e=t.indexes,i=t.x,a=(t.y,t.xDivision),s=t.barWidth,r=t.zeroH,n=t.strokeWidth,o=this.w,l=new p(this.ctx),h=e.i,c=e.j,d=!0,g=o.config.plotOptions.candlestick.colors.upward,u=o.config.plotOptions.candlestick.colors.downward,f=this.yRatio[this.yaxisIndex],x=e.realIndex,b=this.getOHLCValue(x,c),m=r,v=r;b.o>b.c&&(d=!1);var y=Math.min(b.o,b.c),w=Math.max(b.o,b.c);o.globals.isXNumeric&&(i=(o.globals.seriesX[x][c]-o.globals.minX)/this.xRatio-s/2);var k=i+s*this.visibleI;void 0===this.series[h][c]||null===this.series[h][c]?y=r:(y=r-y/f,w=r-w/f,m=r-b.h/f,v=r-b.l/f);var A=l.move(k,r),S=l.move(k,y);return o.globals.previousPaths.length>0&&(S=this.getPreviousPath(x,c,!0)),A=l.move(k,w)+l.line(k+s/2,w)+l.line(k+s/2,m)+l.line(k+s/2,w)+l.line(k+s,w)+l.line(k+s,y)+l.line(k+s/2,y)+l.line(k+s/2,v)+l.line(k+s/2,y)+l.line(k,y)+l.line(k,w-n/2),S+=l.move(k,y),o.globals.isXNumeric||(i+=a),{pathTo:A,pathFrom:S,x:i,y:w,barXPosition:k,color:d?g:u}}},{key:"getOHLCValue",value:function(t,e){var i=this.w;return{o:i.globals.seriesCandleO[t][e],h:i.globals.seriesCandleH[t][e],l:i.globals.seriesCandleL[t][e],c:i.globals.seriesCandleC[t][e]}}}]),i}(E),kt=function(){function t(i,a){e(this,t),this.ctx=i,this.w=i.w,this.xRatio=a.xRatio,this.yRatio=a.yRatio,this.negRange=!1,this.dynamicAnim=this.w.config.chart.animations.dynamicAnimation,this.rectRadius=this.w.config.plotOptions.heatmap.radius,this.strokeWidth=this.w.config.stroke.show?this.w.config.stroke.width:0}return a(t,[{key:"draw",value:function(t){var e=this.w,i=new p(this.ctx),a=i.group({class:"apexcharts-heatmap"});a.attr("clip-path","url(#gridRectMask".concat(e.globals.cuid,")"));var s=e.globals.gridWidth/e.globals.dataPoints,r=e.globals.gridHeight/e.globals.series.length,n=0,o=!1;this.checkColorRange();var l=t.slice();e.config.yaxis[0].reversed&&(o=!0,l.reverse());for(var h=o?0:l.length-1;o?h<l.length:h>=0;o?h++:h--){var c=i.group({class:"apexcharts-series apexcharts-heatmap-series",seriesName:g.escapeString(e.globals.seriesNames[h]),rel:h+1,"data:realIndex":h});if(e.config.chart.dropShadow.enabled){var d=e.config.chart.dropShadow;new u(this.ctx).dropShadow(c,d,h)}for(var f=0,x=0;x<l[h].length;x++){var b=1,m=e.config.plotOptions.heatmap.shadeIntensity,v=this.determineHeatColor(h,x);b=e.globals.hasNegs||this.negRange?e.config.plotOptions.heatmap.reverseNegativeShade?v.percent<0?v.percent/100*(1.25*m):(1-v.percent/100)*(1.25*m):v.percent<=0?1-(1+v.percent/100)*m:(1-v.percent/100)*m:1-v.percent/100;var y=v.color,w=new g;if(e.config.plotOptions.heatmap.enableShades&&(b<0&&(b=0),y=g.hexToRgba(w.shadeColor(b,v.color),e.config.fill.opacity)),"image"===e.config.fill.type)y=new L(this.ctx).fillPath({seriesNumber:h,dataPointIndex:x,opacity:e.globals.hasNegs?v.percent<0?1-(1+v.percent/100):m+v.percent/100:v.percent/100,patternID:g.randomId(),width:e.config.fill.image.width?e.config.fill.image.width:s,height:e.config.fill.image.height?e.config.fill.image.height:r});var k=this.rectRadius,A=i.drawRect(f,n,s,r,k);if(A.attr({cx:f,cy:n}),A.node.classList.add("apexcharts-heatmap-rect"),c.add(A),A.attr({fill:y,i:h,index:h,j:x,val:l[h][x],"stroke-width":this.strokeWidth,stroke:e.config.plotOptions.heatmap.useFillColorAsStroke?y:e.globals.stroke.colors[0],color:y}),A.node.addEventListener("mouseenter",i.pathMouseEnter.bind(this,A)),A.node.addEventListener("mouseleave",i.pathMouseLeave.bind(this,A)),A.node.addEventListener("mousedown",i.pathMouseDown.bind(this,A)),e.config.chart.animations.enabled&&!e.globals.dataChanged){var S=1;e.globals.resized||(S=e.config.chart.animations.speed),this.animateHeatMap(A,f,n,s,r,S)}if(e.globals.dataChanged){var C=1;if(this.dynamicAnim.enabled&&e.globals.shouldAnimate){C=this.dynamicAnim.speed;var P=e.globals.previousPaths[h]&&e.globals.previousPaths[h][x]&&e.globals.previousPaths[h][x].color;P||(P="rgba(255, 255, 255, 0)"),this.animateHeatColor(A,g.isColorHex(P)?P:g.rgb2hex(P),g.isColorHex(y)?y:g.rgb2hex(y),C)}}var T=this.calculateHeatmapDataLabels({x:f,y:n,i:h,j:x,heatColorProps:v,series:l,rectHeight:r,rectWidth:s});null!==T&&c.add(T),f+=s}n+=r,a.add(c)}var z=e.globals.yAxisScale[0].result.slice();e.config.yaxis[0].reversed?z.unshift(""):z.push(""),e.globals.yAxisScale[0].result=z;var I=e.globals.gridHeight/e.globals.series.length;return e.config.yaxis[0].labels.offsetY=-I/2,a}},{key:"checkColorRange",value:function(){var t=this,e=this.w.config.plotOptions.heatmap;e.colorScale.ranges.length>0&&e.colorScale.ranges.map((function(e,i){e.from<=0&&(t.negRange=!0)}))}},{key:"determineHeatColor",value:function(t,e){var i=this.w,a=i.globals.series[t][e],s=i.config.plotOptions.heatmap,r=s.colorScale.inverse?e:t,n=i.globals.colors[r],o=null,l=Math.min.apply(Math,d(i.globals.series[t])),h=Math.max.apply(Math,d(i.globals.series[t]));s.distributed||(l=i.globals.minY,h=i.globals.maxY),void 0!==s.colorScale.min&&(l=s.colorScale.min<i.globals.minY?s.colorScale.min:i.globals.minY,h=s.colorScale.max>i.globals.maxY?s.colorScale.max:i.globals.maxY);var c=Math.abs(h)+Math.abs(l),g=100*a/(0===c?c-1e-6:c);s.colorScale.ranges.length>0&&s.colorScale.ranges.map((function(t,e){if(a>=t.from&&a<=t.to){n=t.color,o=t.foreColor?t.foreColor:null,l=t.from,h=t.to;var i=Math.abs(h)+Math.abs(l);g=100*a/(0===i?i-1e-6:i)}}));return{color:n,foreColor:o,percent:g}}},{key:"calculateHeatmapDataLabels",value:function(t){var e=t.x,i=t.y,a=t.i,s=t.j,r=t.heatColorProps,n=(t.series,t.rectHeight),o=t.rectWidth,l=this.w,h=l.config.dataLabels,c=new p(this.ctx),d=new z(this.ctx),g=h.formatter,u=null;if(h.enabled){u=c.group({class:"apexcharts-data-labels"});var f=h.offsetX,x=h.offsetY,b=e+o/2+f,m=i+n/2+parseFloat(h.style.fontSize)/3+x,v=g(l.globals.series[a][s],{seriesIndex:a,dataPointIndex:s,w:l});d.plotDataLabelsText({x:b,y:m,text:v,i:a,j:s,color:r.foreColor,parent:u,dataLabelsConfig:h})}return u}},{key:"animateHeatMap",value:function(t,e,i,a,s,r){var n=new f(this.ctx);n.animateRect(t,{x:e+a/2,y:i+s/2,width:0,height:0},{x:e,y:i,width:a,height:s},r,(function(){n.animationCompleted(t)}))}},{key:"animateHeatColor",value:function(t,e,i,a){t.attr({fill:e}).animate(a).attr({fill:i})}}]),t}(),At=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.chartType=this.w.config.chart.type,this.initialAnim=this.w.config.chart.animations.enabled,this.dynamicAnim=this.initialAnim&&this.w.config.chart.animations.dynamicAnimation.enabled,this.animDur=0;var a=this.w;this.graphics=new p(this.ctx),this.lineColorArr=void 0!==a.globals.stroke.colors?a.globals.stroke.colors:a.globals.colors,this.defaultSize=a.globals.svgHeight<a.globals.svgWidth?a.globals.gridHeight+1.5*a.globals.goldenPadding:a.globals.gridWidth,this.maxValue=this.w.globals.maxY,this.minValue=this.w.globals.minY,this.polygons=a.config.plotOptions.radar.polygons;var s=a.globals.labels.slice().sort((function(t,e){return e.length-t.length}))[0],r=this.graphics.getTextRects(s,a.config.xaxis.labels.style.fontSize);this.strokeWidth=a.config.stroke.show?a.config.stroke.width:0,this.size=this.defaultSize/2.1-this.strokeWidth-a.config.chart.dropShadow.blur,a.config.xaxis.labels.show&&(this.size=this.size-r.width/1.75),void 0!==a.config.plotOptions.radar.size&&(this.size=a.config.plotOptions.radar.size),this.dataRadiusOfPercent=[],this.dataRadius=[],this.angleArr=[],this.yaxisLabelsTextsPos=[]}return a(t,[{key:"draw",value:function(t){var e=this,i=this.w,a=new L(this.ctx),s=[],r=new z(this.ctx);t.length&&(this.dataPointsLen=t[i.globals.maxValsInArrayIndex].length),this.disAngle=2*Math.PI/this.dataPointsLen;var o=i.globals.gridWidth/2,l=i.globals.gridHeight/2,h=o+i.config.plotOptions.radar.offsetX,c=l+i.config.plotOptions.radar.offsetY,d=this.graphics.group({class:"apexcharts-radar-series apexcharts-plot-series",transform:"translate(".concat(h||0,", ").concat(c||0,")")}),f=[],p=null,x=null;if(this.yaxisLabels=this.graphics.group({class:"apexcharts-yaxis"}),t.forEach((function(t,o){var l=t.length===i.globals.dataPoints,h=e.graphics.group().attr({class:"apexcharts-series","data:longestSeries":l,seriesName:g.escapeString(i.globals.seriesNames[o]),rel:o+1,"data:realIndex":o});e.dataRadiusOfPercent[o]=[],e.dataRadius[o]=[],e.angleArr[o]=[],t.forEach((function(t,i){var a=Math.abs(e.maxValue-e.minValue);t+=Math.abs(e.minValue),e.dataRadiusOfPercent[o][i]=t/a,e.dataRadius[o][i]=e.dataRadiusOfPercent[o][i]*e.size,e.angleArr[o][i]=i*e.disAngle})),f=e.getDataPointsPos(e.dataRadius[o],e.angleArr[o]);var c=e.createPaths(f,{x:0,y:0});p=e.graphics.group({class:"apexcharts-series-markers-wrap apexcharts-element-hidden"}),x=e.graphics.group({class:"apexcharts-datalabels","data:realIndex":o}),i.globals.delayedElements.push({el:p.node,index:o});var d={i:o,realIndex:o,animationDelay:o,initialSpeed:i.config.chart.animations.speed,dataChangeSpeed:i.config.chart.animations.dynamicAnimation.speed,className:"apexcharts-radar",shouldClipToGrid:!1,bindEventsOnPaths:!1,stroke:i.globals.stroke.colors[o],strokeLineCap:i.config.stroke.lineCap},b=null;i.globals.previousPaths.length>0&&(b=e.getPreviousPath(o));for(var m=0;m<c.linePathsTo.length;m++){var v=e.graphics.renderPaths(n({},d,{pathFrom:null===b?c.linePathsFrom[m]:b,pathTo:c.linePathsTo[m],strokeWidth:Array.isArray(e.strokeWidth)?e.strokeWidth[o]:e.strokeWidth,fill:"none",drawShadow:!1}));h.add(v);var y=a.fillPath({seriesNumber:o}),w=e.graphics.renderPaths(n({},d,{pathFrom:null===b?c.areaPathsFrom[m]:b,pathTo:c.areaPathsTo[m],strokeWidth:0,fill:y,drawShadow:!1}));if(i.config.chart.dropShadow.enabled){var k=new u(e.ctx),A=i.config.chart.dropShadow;k.dropShadow(w,Object.assign({},A,{noUserSpaceOnUse:!0}),o)}h.add(w)}t.forEach((function(t,a){var s=new P(e.ctx).getMarkerConfig("apexcharts-marker",o,a),l=e.graphics.drawMarker(f[a].x,f[a].y,s);l.attr("rel",a),l.attr("j",a),l.attr("index",o),l.node.setAttribute("default-marker-size",s.pSize);var c=e.graphics.group({class:"apexcharts-series-markers"});c&&c.add(l),p.add(c),h.add(p);var d=i.config.dataLabels;if(d.enabled){var g=d.formatter(i.globals.series[o][a],{seriesIndex:o,dataPointIndex:a,w:i});r.plotDataLabelsText({x:f[a].x,y:f[a].y,text:g,textAnchor:"middle",i:o,j:o,parent:x,offsetCorrection:!1,dataLabelsConfig:n({},d)})}h.add(x)})),s.push(h)})),this.drawPolygons({parent:d}),i.config.xaxis.labels.show){var b=this.drawXAxisTexts();d.add(b)}return d.add(this.yaxisLabels),s.forEach((function(t){d.add(t)})),d}},{key:"drawPolygons",value:function(t){for(var e=this,i=this.w,a=t.parent,s=new ot(this.ctx),r=i.globals.yAxisScale[0].result.reverse(),n=r.length,o=[],l=this.size/(n-1),h=0;h<n;h++)o[h]=l*h;o.reverse();var c=[],d=[];o.forEach((function(t,i){var a=e.getPolygonPos(t),s="";a.forEach((function(t,a){if(0===i){var r=e.graphics.drawLine(t.x,t.y,0,0,Array.isArray(e.polygons.connectorColors)?e.polygons.connectorColors[a]:e.polygons.connectorColors);d.push(r)}0===a&&e.yaxisLabelsTextsPos.push({x:t.x,y:t.y}),s+=t.x+","+t.y+" "})),c.push(s)})),c.forEach((function(t,s){var r=e.polygons.strokeColors,n=e.polygons.strokeWidth,o=e.graphics.drawPolygon(t,Array.isArray(r)?r[s]:r,Array.isArray(n)?n[s]:n,i.globals.radarPolygons.fill.colors[s]);a.add(o)})),d.forEach((function(t){a.add(t)})),i.config.yaxis[0].show&&this.yaxisLabelsTextsPos.forEach((function(t,i){var a=s.drawYAxisTexts(t.x,t.y,i,r[i]);e.yaxisLabels.add(a)}))}},{key:"drawXAxisTexts",value:function(){var t=this,e=this.w,i=e.config.xaxis.labels,a=this.graphics.group({class:"apexcharts-xaxis"}),s=this.getPolygonPos(this.size);return e.globals.labels.forEach((function(r,o){var l=e.config.xaxis.labels.formatter,h=new z(t.ctx);if(s[o]){var c=t.getTextPos(s[o],t.size),d=l(r,{seriesIndex:-1,dataPointIndex:o,w:e});h.plotDataLabelsText({x:c.newX,y:c.newY,text:d,textAnchor:c.textAnchor,i:o,j:o,parent:a,color:i.style.colors[o]?i.style.colors[o]:"#a8a8a8",dataLabelsConfig:n({textAnchor:c.textAnchor,dropShadow:{enabled:!1}},i),offsetCorrection:!1})}})),a}},{key:"createPaths",value:function(t,e){var i=this,a=[],s=[],r=[],n=[];if(t.length){s=[this.graphics.move(e.x,e.y)],n=[this.graphics.move(e.x,e.y)];var o=this.graphics.move(t[0].x,t[0].y),l=this.graphics.move(t[0].x,t[0].y);t.forEach((function(e,a){o+=i.graphics.line(e.x,e.y),l+=i.graphics.line(e.x,e.y),a===t.length-1&&(o+="Z",l+="Z")})),a.push(o),r.push(l)}return{linePathsFrom:s,linePathsTo:a,areaPathsFrom:n,areaPathsTo:r}}},{key:"getTextPos",value:function(t,e){var i="middle",a=t.x,s=t.y;return Math.abs(t.x)>=10?t.x>0?(i="start",a+=10):t.x<0&&(i="end",a-=10):i="middle",Math.abs(t.y)>=e-10&&(t.y<0?s-=10:t.y>0&&(s+=10)),{textAnchor:i,newX:a,newY:s}}},{key:"getPreviousPath",value:function(t){for(var e=this.w,i=null,a=0;a<e.globals.previousPaths.length;a++){var s=e.globals.previousPaths[a];s.paths.length>0&&parseInt(s.realIndex,10)===parseInt(t,10)&&void 0!==e.globals.previousPaths[a].paths[0]&&(i=e.globals.previousPaths[a].paths[0].d)}return i}},{key:"getDataPointsPos",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.dataPointsLen;t=t||[],e=e||[];for(var a=[],s=0;s<i;s++){var r={};r.x=t[s]*Math.sin(e[s]),r.y=-t[s]*Math.cos(e[s]),a.push(r)}return a}},{key:"getPolygonPos",value:function(t){for(var e=[],i=2*Math.PI/this.dataPointsLen,a=0;a<this.dataPointsLen;a++){var s={};s.x=t*Math.sin(a*i),s.y=-t*Math.cos(a*i),e.push(s)}return e}}]),t}(),St=function(t){function i(t){var a;e(this,i),(a=c(this,l(i).call(this,t))).ctx=t,a.w=t.w,a.animBeginArr=[0],a.animDur=0;var s=a.w;return a.startAngle=s.config.plotOptions.radialBar.startAngle,a.endAngle=s.config.plotOptions.radialBar.endAngle,a.totalAngle=Math.abs(s.config.plotOptions.radialBar.endAngle-s.config.plotOptions.radialBar.startAngle),a.trackStartAngle=s.config.plotOptions.radialBar.track.startAngle,a.trackEndAngle=s.config.plotOptions.radialBar.track.endAngle,a.radialDataLabels=s.config.plotOptions.radialBar.dataLabels,a.trackStartAngle||(a.trackStartAngle=a.startAngle),a.trackEndAngle||(a.trackEndAngle=a.endAngle),360===a.endAngle&&(a.endAngle=359.99),a.fullAngle=360-s.config.plotOptions.radialBar.endAngle-s.config.plotOptions.radialBar.startAngle,a.margin=parseInt(s.config.plotOptions.radialBar.track.margin,10),a}return o(i,t),a(i,[{key:"draw",value:function(t){var e=this.w,i=new p(this.ctx),a=i.group({class:"apexcharts-radialbar"});if(e.globals.noData)return a;var s=i.group(),r=this.defaultSize/2,n=e.globals.gridWidth/2,o=this.defaultSize/2.05;e.config.chart.sparkline.enabled||(o=o-e.config.stroke.width-e.config.chart.dropShadow.blur);var l=e.globals.fill.colors;if(e.config.plotOptions.radialBar.track.show){var h=this.drawTracks({size:o,centerX:n,centerY:r,colorArr:l,series:t});s.add(h)}var c=this.drawArcs({size:o,centerX:n,centerY:r,colorArr:l,series:t}),d=360;e.config.plotOptions.radialBar.startAngle<0&&(d=this.totalAngle);var g=(360-d)/360;if(e.globals.radialSize=o-o*g,this.radialDataLabels.value.show){var u=Math.max(this.radialDataLabels.value.offsetY,this.radialDataLabels.name.offsetY);e.globals.radialSize+=u*g}return s.add(c.g),"front"===e.config.plotOptions.radialBar.hollow.position&&(c.g.add(c.elHollow),c.dataLabels&&c.g.add(c.dataLabels)),a.add(s),a}},{key:"drawTracks",value:function(t){var e=this.w,i=new p(this.ctx),a=i.group({class:"apexcharts-tracks"}),s=new u(this.ctx),r=new L(this.ctx),n=this.getStrokeWidth(t);t.size=t.size-n/2;for(var o=0;o<t.series.length;o++){var l=i.group({class:"apexcharts-radialbar-track apexcharts-track"});a.add(l),l.attr({rel:o+1}),t.size=t.size-n-this.margin;var h=e.config.plotOptions.radialBar.track,c=r.fillPath({seriesNumber:0,size:t.size,fillColors:Array.isArray(h.background)?h.background[o]:h.background,solid:!0}),d=this.trackStartAngle,g=this.trackEndAngle;Math.abs(g)+Math.abs(d)>=360&&(g=360-Math.abs(this.startAngle)-.1);var f=i.drawPath({d:"",stroke:c,strokeWidth:n*parseInt(h.strokeWidth,10)/100,fill:"none",strokeOpacity:h.opacity,classes:"apexcharts-radialbar-area"});if(h.dropShadow.enabled){var x=h.dropShadow;s.dropShadow(f,x)}l.add(f),f.attr("id","apexcharts-radialbarTrack-"+o),this.animatePaths(f,{centerX:t.centerX,centerY:t.centerY,endAngle:g,startAngle:d,size:t.size,i:o,totalItems:2,animBeginArr:0,dur:0,isTrack:!0,easing:e.globals.easing})}return a}},{key:"drawArcs",value:function(t){var e=this.w,i=new p(this.ctx),a=new L(this.ctx),s=new u(this.ctx),r=i.group(),n=this.getStrokeWidth(t);t.size=t.size-n/2;var o=e.config.plotOptions.radialBar.hollow.background,l=t.size-n*t.series.length-this.margin*t.series.length-n*parseInt(e.config.plotOptions.radialBar.track.strokeWidth,10)/100/2,h=l-e.config.plotOptions.radialBar.hollow.margin;void 0!==e.config.plotOptions.radialBar.hollow.image&&(o=this.drawHollowImage(t,r,l,o));var c=this.drawHollow({size:h,centerX:t.centerX,centerY:t.centerY,fill:o||"transparent"});if(e.config.plotOptions.radialBar.hollow.dropShadow.enabled){var d=e.config.plotOptions.radialBar.hollow.dropShadow;s.dropShadow(c,d)}var f=1;!this.radialDataLabels.total.show&&e.globals.series.length>1&&(f=0);var x=null;this.radialDataLabels.show&&(x=this.renderInnerDataLabels(this.radialDataLabels,{hollowSize:l,centerX:t.centerX,centerY:t.centerY,opacity:f})),"back"===e.config.plotOptions.radialBar.hollow.position&&(r.add(c),x&&r.add(x));var b=!1;e.config.plotOptions.radialBar.inverseOrder&&(b=!0);for(var m=b?t.series.length-1:0;b?m>=0:m<t.series.length;b?m--:m++){var v=i.group({class:"apexcharts-series apexcharts-radial-series",seriesName:g.escapeString(e.globals.seriesNames[m])});r.add(v),v.attr({rel:m+1,"data:realIndex":m}),this.ctx.series.addCollapsedClassToSeries(v,m),t.size=t.size-n-this.margin;var y=a.fillPath({seriesNumber:m,size:t.size,value:t.series[m]}),w=this.startAngle,k=void 0,A=g.negToZero(t.series[m]>100?100:t.series[m])/100,S=Math.round(this.totalAngle*A)+this.startAngle,C=void 0;e.globals.dataChanged&&(k=this.startAngle,C=Math.round(this.totalAngle*g.negToZero(e.globals.previousPaths[m])/100)+k),Math.abs(S)+Math.abs(w)>=360&&(S-=.01),Math.abs(C)+Math.abs(k)>=360&&(C-=.01);var P=S-w,T=Array.isArray(e.config.stroke.dashArray)?e.config.stroke.dashArray[m]:e.config.stroke.dashArray,z=i.drawPath({d:"",stroke:y,strokeWidth:n,fill:"none",fillOpacity:e.config.fill.opacity,classes:"apexcharts-radialbar-area apexcharts-radialbar-slice-"+m,strokeDashArray:T});if(p.setAttrs(z.node,{"data:angle":P,"data:value":t.series[m]}),e.config.chart.dropShadow.enabled){var I=e.config.chart.dropShadow;s.dropShadow(z,I,m)}this.addListeners(z,this.radialDataLabels),v.add(z),z.attr({index:0,j:m});var M=0;!this.initialAnim||e.globals.resized||e.globals.dataChanged||(M=(S-w)/360*e.config.chart.animations.speed,this.animDur=M/(1.2*t.series.length)+this.animDur,this.animBeginArr.push(this.animDur)),e.globals.dataChanged&&(M=(S-w)/360*e.config.chart.animations.dynamicAnimation.speed,this.animDur=M/(1.2*t.series.length)+this.animDur,this.animBeginArr.push(this.animDur)),this.animatePaths(z,{centerX:t.centerX,centerY:t.centerY,endAngle:S,startAngle:w,prevEndAngle:C,prevStartAngle:k,size:t.size,i:m,totalItems:2,animBeginArr:this.animBeginArr,dur:M,shouldSetPrevPaths:!0,easing:e.globals.easing})}return{g:r,elHollow:c,dataLabels:x}}},{key:"drawHollow",value:function(t){var e=new p(this.ctx).drawCircle(2*t.size);return e.attr({class:"apexcharts-radialbar-hollow",cx:t.centerX,cy:t.centerY,r:t.size,fill:t.fill}),e}},{key:"drawHollowImage",value:function(t,e,i,a){var s=this.w,r=new L(this.ctx),n=g.randomId(),o=s.config.plotOptions.radialBar.hollow.image;if(s.config.plotOptions.radialBar.hollow.imageClipped)r.clippedImgArea({width:i,height:i,image:o,patternID:"pattern".concat(s.globals.cuid).concat(n)}),a="url(#pattern".concat(s.globals.cuid).concat(n,")");else{var l=s.config.plotOptions.radialBar.hollow.imageWidth,h=s.config.plotOptions.radialBar.hollow.imageHeight;if(void 0===l&&void 0===h){var c=s.globals.dom.Paper.image(o).loaded((function(e){this.move(t.centerX-e.width/2+s.config.plotOptions.radialBar.hollow.imageOffsetX,t.centerY-e.height/2+s.config.plotOptions.radialBar.hollow.imageOffsetY)}));e.add(c)}else{var d=s.globals.dom.Paper.image(o).loaded((function(e){this.move(t.centerX-l/2+s.config.plotOptions.radialBar.hollow.imageOffsetX,t.centerY-h/2+s.config.plotOptions.radialBar.hollow.imageOffsetY),this.size(l,h)}));e.add(d)}}return a}},{key:"getStrokeWidth",value:function(t){var e=this.w;return t.size*(100-parseInt(e.config.plotOptions.radialBar.hollow.size,10))/100/(t.series.length+1)-this.margin}}]),i}(lt),Ct=function(){function t(i){e(this,t),this.w=i.w,this.lineCtx=i}return a(t,[{key:"sameValueSeriesFix",value:function(t,e){var i=this.w;if("line"===i.config.chart.type&&("gradient"===i.config.fill.type||"gradient"===i.config.fill.type[t])&&new m(this.lineCtx.ctx,i).seriesHaveSameValues(t)){var a=e[t].slice();a[a.length-1]=a[a.length-1]+1e-6,e[t]=a}return e}},{key:"calculatePoints",value:function(t){var e=t.series,i=t.realIndex,a=t.x,s=t.y,r=t.i,n=t.j,o=t.prevY,l=this.w,h=[],c=[];if(0===n){var d=this.lineCtx.categoryAxisCorrection+l.config.markers.offsetX;l.globals.isXNumeric&&(d=(l.globals.seriesX[i][0]-l.globals.minX)/this.lineCtx.xRatio+l.config.markers.offsetX),h.push(d),c.push(g.isNumber(e[r][0])?o+l.config.markers.offsetY:null),h.push(a+l.config.markers.offsetX),c.push(g.isNumber(e[r][n+1])?s+l.config.markers.offsetY:null)}else h.push(a+l.config.markers.offsetX),c.push(g.isNumber(e[r][n+1])?s+l.config.markers.offsetY:null);return{x:h,y:c}}},{key:"checkPreviousPaths",value:function(t){for(var e=t.pathFromLine,i=t.pathFromArea,a=t.realIndex,s=this.w,r=0;r<s.globals.previousPaths.length;r++){var n=s.globals.previousPaths[r];("line"===n.type||"area"===n.type)&&n.paths.length>0&&parseInt(n.realIndex,10)===parseInt(a,10)&&("line"===n.type?(this.lineCtx.appendPathFrom=!1,e=s.globals.previousPaths[r].paths[0].d):"area"===n.type&&(this.lineCtx.appendPathFrom=!1,i=s.globals.previousPaths[r].paths[0].d,s.config.stroke.show&&s.globals.previousPaths[r].paths[1]&&(e=s.globals.previousPaths[r].paths[1].d)))}return{pathFromLine:e,pathFromArea:i}}},{key:"determineFirstPrevY",value:function(t){var e=t.i,i=t.series,a=t.prevY,s=t.lineYPosition,r=this.w;if(void 0!==i[e][0])a=(s=r.config.chart.stacked&&e>0?this.lineCtx.prevSeriesY[e-1][0]:this.lineCtx.zeroY)-i[e][0]/this.lineCtx.yRatio[this.lineCtx.yaxisIndex]+2*(this.lineCtx.isReversed?i[e][0]/this.lineCtx.yRatio[this.lineCtx.yaxisIndex]:0);else if(r.config.chart.stacked&&e>0&&void 0===i[e][0])for(var n=e-1;n>=0;n--)if(null!==i[n][0]&&void 0!==i[n][0]){a=s=this.lineCtx.prevSeriesY[n][0];break}return{prevY:a,lineYPosition:s}}}]),t}(),Lt=function(){function t(i,a,s){e(this,t),this.ctx=i,this.w=i.w,this.xyRatios=a,this.pointsChart=!("bubble"!==this.w.config.chart.type&&"scatter"!==this.w.config.chart.type)||s,this.scatter=new T(this.ctx),this.noNegatives=this.w.globals.minX===Number.MAX_VALUE,this.lineHelpers=new Ct(this),this.markers=new P(this.ctx),this.prevSeriesY=[],this.categoryAxisCorrection=0,this.yaxisIndex=0}return a(t,[{key:"draw",value:function(t,e,i){var a=this.w,s=new p(this.ctx),r=a.globals.comboCharts?e:a.config.chart.type,n=s.group({class:"apexcharts-".concat(r,"-series apexcharts-plot-series")}),o=new m(this.ctx,a);this.yRatio=this.xyRatios.yRatio,this.zRatio=this.xyRatios.zRatio,this.xRatio=this.xyRatios.xRatio,this.baseLineY=this.xyRatios.baseLineY,t=o.getLogSeries(t),this.yRatio=o.getLogYRatios(this.yRatio);for(var l=[],h=0;h<t.length;h++){t=this.lineHelpers.sameValueSeriesFix(h,t);var c=a.globals.comboCharts?i[h]:h;this._initSerieVariables(t,h,c);var d=[],g=[],u=a.globals.padHorizontal+this.categoryAxisCorrection;this.ctx.series.addCollapsedClassToSeries(this.elSeries,c),a.globals.isXNumeric&&a.globals.seriesX.length>0&&(u=(a.globals.seriesX[c][0]-a.globals.minX)/this.xRatio),g.push(u);var f,x=u,b=x,v=this.zeroY;v=this.lineHelpers.determineFirstPrevY({i:h,series:t,prevY:v,lineYPosition:0}).prevY,d.push(v),f=v;var y=this._calculatePathsFrom({series:t,i:h,realIndex:c,prevX:b,prevY:v}),w=this._iterateOverDataPoints({series:t,realIndex:c,i:h,x:u,y:1,pX:x,pY:f,pathsFrom:y,linePaths:[],areaPaths:[],seriesIndex:i,lineYPosition:0,xArrj:g,yArrj:d});this._handlePaths({type:r,realIndex:c,i:h,paths:w}),this.elSeries.add(this.elPointsMain),this.elSeries.add(this.elDataLabelsWrap),l.push(this.elSeries)}for(var k=l.length;k>0;k--)n.add(l[k-1]);return n}},{key:"_initSerieVariables",value:function(t,e,i){var a=this.w,s=new p(this.ctx);this.xDivision=a.globals.gridWidth/(a.globals.dataPoints-("on"===a.config.xaxis.tickPlacement?1:0)),this.strokeWidth=Array.isArray(a.config.stroke.width)?a.config.stroke.width[i]:a.config.stroke.width,this.yRatio.length>1&&(this.yaxisIndex=i),this.isReversed=a.config.yaxis[this.yaxisIndex]&&a.config.yaxis[this.yaxisIndex].reversed,this.zeroY=a.globals.gridHeight-this.baseLineY[this.yaxisIndex]-(this.isReversed?a.globals.gridHeight:0)+(this.isReversed?2*this.baseLineY[this.yaxisIndex]:0),this.areaBottomY=this.zeroY,this.zeroY>a.globals.gridHeight&&(this.areaBottomY=a.globals.gridHeight),this.categoryAxisCorrection=this.xDivision/2,this.elSeries=s.group({class:"apexcharts-series",seriesName:g.escapeString(a.globals.seriesNames[i])}),this.elPointsMain=s.group({class:"apexcharts-series-markers-wrap","data:realIndex":i}),this.elDataLabelsWrap=s.group({class:"apexcharts-datalabels","data:realIndex":i});var r=t[e].length===a.globals.dataPoints;this.elSeries.attr({"data:longestSeries":r,rel:e+1,"data:realIndex":i}),this.appendPathFrom=!0}},{key:"_calculatePathsFrom",value:function(t){var e,i,a,s,r=t.series,n=t.i,o=t.realIndex,l=t.prevX,h=t.prevY,c=this.w,d=new p(this.ctx);if(null===r[n][0]){for(var g=0;g<r[n].length;g++)if(null!==r[n][g]){l=this.xDivision*g,h=this.zeroY-r[n][g]/this.yRatio[this.yaxisIndex],e=d.move(l,h),i=d.move(l,this.areaBottomY);break}}else e=d.move(l,h),i=d.move(l,this.areaBottomY)+d.line(l,h);if(a=d.move(-1,this.zeroY)+d.line(-1,this.zeroY),s=d.move(-1,this.zeroY)+d.line(-1,this.zeroY),c.globals.previousPaths.length>0){var u=this.lineHelpers.checkPreviousPaths({pathFromLine:a,pathFromArea:s,realIndex:o});a=u.pathFromLine,s=u.pathFromArea}return{prevX:l,prevY:h,linePath:e,areaPath:i,pathFromLine:a,pathFromArea:s}}},{key:"_handlePaths",value:function(t){var e=t.type,i=t.realIndex,a=t.i,s=t.paths,r=this.w,o=new p(this.ctx),l=new L(this.ctx);this.prevSeriesY.push(s.yArrj),r.globals.seriesXvalues[i]=s.xArrj,r.globals.seriesYvalues[i]=s.yArrj,this.pointsChart||r.globals.delayedElements.push({el:this.elPointsMain.node,index:i});var h={i:a,realIndex:i,animationDelay:a,initialSpeed:r.config.chart.animations.speed,dataChangeSpeed:r.config.chart.animations.dynamicAnimation.speed,className:"apexcharts-".concat(e)};if("area"===e)for(var c=l.fillPath({seriesNumber:i}),d=0;d<s.areaPaths.length;d++){var g=o.renderPaths(n({},h,{pathFrom:s.pathFromArea,pathTo:s.areaPaths[d],stroke:"none",strokeWidth:0,strokeLineCap:null,fill:c}));this.elSeries.add(g)}if(r.config.stroke.show&&!this.pointsChart){var u=null;u="line"===e?l.fillPath({seriesNumber:i,i:a}):r.globals.stroke.colors[i];for(var f=0;f<s.linePaths.length;f++){var x=o.renderPaths(n({},h,{pathFrom:s.pathFromLine,pathTo:s.linePaths[f],stroke:u,strokeWidth:this.strokeWidth,strokeLineCap:r.config.stroke.lineCap,fill:"none"}));this.elSeries.add(x)}}}},{key:"_iterateOverDataPoints",value:function(t){for(var e=t.series,i=t.realIndex,a=t.i,s=t.x,r=t.y,n=t.pX,o=t.pY,l=t.pathsFrom,h=t.linePaths,c=t.areaPaths,d=t.seriesIndex,u=t.lineYPosition,f=t.xArrj,x=t.yArrj,b=this.w,m=new p(this.ctx),v=this.yRatio,y=l.prevY,w=l.linePath,k=l.areaPath,A=l.pathFromLine,S=l.pathFromArea,C=g.isNumber(b.globals.minYArr[i])?b.globals.minYArr[i]:b.globals.minY,L=b.globals.dataPoints>1?b.globals.dataPoints-1:b.globals.dataPoints,P=0;P<L;P++){var T=void 0===e[a][P+1]||null===e[a][P+1];if(b.globals.isXNumeric){var z=b.globals.seriesX[i][P+1];void 0===b.globals.seriesX[i][P+1]&&(z=b.globals.seriesX[i][L-1]),s=(z-b.globals.minX)/this.xRatio}else s+=this.xDivision;if(b.config.chart.stacked)if(a>0&&b.globals.collapsedSeries.length<b.config.series.length-1){u=this.prevSeriesY[function(t){for(var e=t,i=0;i<b.globals.series.length;i++)if(b.globals.collapsedSeriesIndices.indexOf(t)>-1){e--;break}return e>=0?e:0}(a-1)][P+1]}else u=this.zeroY;else u=this.zeroY;r=T?u-C/v[this.yaxisIndex]+2*(this.isReversed?C/v[this.yaxisIndex]:0):u-e[a][P+1]/v[this.yaxisIndex]+2*(this.isReversed?e[a][P+1]/v[this.yaxisIndex]:0),f.push(s),x.push(r);var I=this.lineHelpers.calculatePoints({series:e,x:s,y:r,realIndex:i,i:a,j:P,prevY:y}),M=this._createPaths({series:e,i:a,realIndex:i,j:P,x:s,y:r,pX:n,pY:o,linePath:w,areaPath:k,linePaths:h,areaPaths:c,seriesIndex:d});c=M.areaPaths,h=M.linePaths,n=M.pX,o=M.pY,k=M.areaPath,w=M.linePath,this.appendPathFrom&&(A+=m.line(s,this.zeroY),S+=m.line(s,this.zeroY)),this.handleNullDataPoints(e,I,a,P,i),this._handleMarkersAndLabels({pointsPos:I,series:e,x:s,y:r,prevY:y,i:a,j:P,realIndex:i})}return{yArrj:x,xArrj:f,pathFromArea:S,areaPaths:c,pathFromLine:A,linePaths:h}}},{key:"_handleMarkersAndLabels",value:function(t){var e=t.pointsPos,i=(t.series,t.x,t.y,t.prevY,t.i),a=t.j,s=t.realIndex,r=this.w,n=new z(this.ctx);if(this.pointsChart)this.scatter.draw(this.elSeries,a,{realIndex:s,pointsPos:e,zRatio:this.zRatio,elParent:this.elPointsMain});else{r.globals.series[i].length>1&&this.elPointsMain.node.classList.add("apexcharts-element-hidden");var o=this.markers.plotChartMarkers(e,s,a+1);null!==o&&this.elPointsMain.add(o)}var l=n.drawDataLabel(e,s,a+1,null);null!==l&&this.elDataLabelsWrap.add(l)}},{key:"_createPaths",value:function(t){var e=t.series,i=t.i,a=t.realIndex,s=t.j,r=t.x,n=t.y,o=t.pX,l=t.pY,h=t.linePath,c=t.areaPath,d=t.linePaths,g=t.areaPaths,u=t.seriesIndex,f=this.w,x=new p(this.ctx),b=f.config.stroke.curve,m=this.areaBottomY;if(Array.isArray(f.config.stroke.curve)&&(b=Array.isArray(u)?f.config.stroke.curve[u[i]]:f.config.stroke.curve[i]),"smooth"===b){var v=.35*(r-o);f.globals.hasNullValues?(null!==e[i][s]&&(null!==e[i][s+1]?(h=x.move(o,l)+x.curve(o+v,l,r-v,n,r+1,n),c=x.move(o+1,l)+x.curve(o+v,l,r-v,n,r+1,n)+x.line(r,m)+x.line(o,m)+"z"):(h=x.move(o,l),c=x.move(o,l)+"z")),d.push(h),g.push(c)):(h+=x.curve(o+v,l,r-v,n,r,n),c+=x.curve(o+v,l,r-v,n,r,n)),o=r,l=n,s===e[i].length-2&&(c=c+x.curve(o,l,r,n,r,m)+x.move(r,n)+"z",f.globals.hasNullValues||(d.push(h),g.push(c)))}else{if(null===e[i][s+1]){h+=x.move(r,n);var y=f.globals.isXNumeric?(f.globals.seriesX[a][s]-f.globals.minX)/this.xRatio:r-this.xDivision;c=c+x.line(y,m)+x.move(r,n)+"z"}null===e[i][s]&&(h+=x.move(r,n),c+=x.move(r,m)),"stepline"===b?(h=h+x.line(r,null,"H")+x.line(null,n,"V"),c=c+x.line(r,null,"H")+x.line(null,n,"V")):"straight"===b&&(h+=x.line(r,n),c+=x.line(r,n)),s===e[i].length-2&&(c=c+x.line(r,m)+x.move(r,n)+"z",d.push(h),g.push(c))}return{linePaths:d,areaPaths:g,pX:o,pY:l,linePath:h,areaPath:c}}},{key:"handleNullDataPoints",value:function(t,e,i,a,s){var r=this.w;if(null===t[i][a]&&r.config.markers.showNullDataPoints||1===t[i].length){var n=this.markers.plotChartMarkers(e,s,a+1,this.strokeWidth-r.config.markers.strokeWidth/2,!0);null!==n&&this.elPointsMain.add(n)}}}]),t}(),Pt=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.timeScaleArray=[],this.utc=this.w.config.xaxis.labels.datetimeUTC}return a(t,[{key:"calculateTimeScaleTicks",value:function(t,e){var i=this,a=this.w;if(a.globals.allSeriesCollapsed)return a.globals.labels=[],a.globals.timescaleLabels=[],[];var s=new Y(this.ctx),r=(e-t)/864e5;this.determineInterval(r),a.globals.disableZoomIn=!1,a.globals.disableZoomOut=!1,r<.005?a.globals.disableZoomIn=!0:r>5e4&&(a.globals.disableZoomOut=!0);var o=s.getTimeUnitsfromTimestamp(t,e,this.utc),l=a.globals.gridWidth/r,h=l/24,c=h/60,d=Math.floor(24*r),g=Math.floor(24*r*60),u=Math.floor(r),f=Math.floor(r/30),p=Math.floor(r/365),x={minMinute:o.minMinute,minHour:o.minHour,minDate:o.minDate,minMonth:o.minMonth,minYear:o.minYear},b={firstVal:x,currentMinute:x.minMinute,currentHour:x.minHour,currentMonthDate:x.minDate,currentDate:x.minDate,currentMonth:x.minMonth,currentYear:x.minYear,daysWidthOnXAxis:l,hoursWidthOnXAxis:h,minutesWidthOnXAxis:c,numberOfMinutes:g,numberOfHours:d,numberOfDays:u,numberOfMonths:f,numberOfYears:p};switch(this.tickInterval){case"years":this.generateYearScale(b);break;case"months":case"half_year":this.generateMonthScale(b);break;case"months_days":case"months_fortnight":case"days":case"week_days":this.generateDayScale(b);break;case"hours":this.generateHourScale(b);break;case"minutes":this.generateMinuteScale(b)}var m=this.timeScaleArray.map((function(t){var e={position:t.position,unit:t.unit,year:t.year,day:t.day?t.day:1,hour:t.hour?t.hour:0,month:t.month+1};return"month"===t.unit?n({},e,{day:1,value:t.value+1}):"day"===t.unit||"hour"===t.unit?n({},e,{value:t.value}):"minute"===t.unit?n({},e,{value:t.value,minute:t.value}):t}));return m.filter((function(t){var e=1,s=Math.ceil(a.globals.gridWidth/120),r=t.value;void 0!==a.config.xaxis.tickAmount&&(s=a.config.xaxis.tickAmount),m.length>s&&(e=Math.floor(m.length/s));var n=!1,o=!1;switch(i.tickInterval){case"years":"year"===t.unit&&(n=!0);break;case"half_year":e=7,"year"===t.unit&&(n=!0);break;case"months":e=1,"year"===t.unit&&(n=!0);break;case"months_fortnight":e=15,"year"!==t.unit&&"month"!==t.unit||(n=!0),30===r&&(o=!0);break;case"months_days":e=10,"month"===t.unit&&(n=!0),30===r&&(o=!0);break;case"week_days":e=8,"month"===t.unit&&(n=!0);break;case"days":e=1,"month"===t.unit&&(n=!0);break;case"hours":"day"===t.unit&&(n=!0);break;case"minutes":r%5!=0&&(o=!0)}if("minutes"===i.tickInterval||"hours"===i.tickInterval){if(!o)return!0}else if((r%e==0||n)&&!o)return!0}))}},{key:"recalcDimensionsBasedOnFormat",value:function(t,e){var i=this.w,a=this.formatDates(t),s=this.removeOverlappingTS(a);i.globals.timescaleLabels=s.slice(),new nt(this.ctx).plotCoords()}},{key:"determineInterval",value:function(t){switch(!0){case t>1825:this.tickInterval="years";break;case t>800&&t<=1825:this.tickInterval="half_year";break;case t>180&&t<=800:this.tickInterval="months";break;case t>90&&t<=180:this.tickInterval="months_fortnight";break;case t>60&&t<=90:this.tickInterval="months_days";break;case t>30&&t<=60:this.tickInterval="week_days";break;case t>2&&t<=30:this.tickInterval="days";break;case t>.1&&t<=2:this.tickInterval="hours";break;case t<.1:this.tickInterval="minutes";break;default:this.tickInterval="days"}}},{key:"generateYearScale",value:function(t){var e=t.firstVal,i=t.currentMonth,a=t.currentYear,s=t.daysWidthOnXAxis,r=t.numberOfYears,n=e.minYear,o=0,l=new Y(this.ctx);if(e.minDate>1&&e.minMonth>0){var h=l.determineRemainingDaysOfYear(e.minYear,e.minMonth,e.minDate);o=(l.determineDaysOfYear(e.minYear)-h+1)*s,n=e.minYear+1,this.timeScaleArray.push({position:o,value:n,unit:"year",year:n,month:g.monthMod(i+1)})}else 1===e.minDate&&0===e.minMonth&&this.timeScaleArray.push({position:o,value:n,unit:"year",year:a,month:g.monthMod(i+1)});for(var c=n,d=o,u=0;u<r;u++)c++,d=l.determineDaysOfYear(c-1)*s+d,this.timeScaleArray.push({position:d,value:c,unit:"year",year:c,month:1})}},{key:"generateMonthScale",value:function(t){var e=t.firstVal,i=t.currentMonthDate,a=t.currentMonth,s=t.currentYear,r=t.daysWidthOnXAxis,n=t.numberOfMonths,o=a,l=0,h=new Y(this.ctx),c="month",d=0;if(e.minDate>1){l=(h.determineDaysOfMonths(a+1,e.minYear)-i+1)*r,o=g.monthMod(a+1);var u=s+d,f=g.monthMod(o),p=o;0===o&&(c="year",p=u,f=1,u+=d+=1),this.timeScaleArray.push({position:l,value:p,unit:c,year:u,month:f})}else this.timeScaleArray.push({position:l,value:o,unit:c,year:s,month:g.monthMod(a)});for(var x=o+1,b=l,m=0,v=1;m<n;m++,v++){0===(x=g.monthMod(x))?(c="year",d+=1):c="month";var y=this._getYear(s,x,d);b=h.determineDaysOfMonths(x,y)*r+b;var w=0===x?y:x;this.timeScaleArray.push({position:b,value:w,unit:c,year:y,month:0===x?1:x}),x++}}},{key:"generateDayScale",value:function(t){var e=t.firstVal,i=t.currentMonth,a=t.currentYear,s=t.hoursWidthOnXAxis,r=t.numberOfDays,n=new Y(this.ctx),o="day",l=e.minDate+1,h=l,c=function(t,e,i){return t>n.determineDaysOfMonths(e+1,i)?(h=1,o="month",u=e+=1,e):e},d=(24-e.minHour)*s,u=l,f=c(h,i,a);0===e.minHour&&1===e.minDate&&(d=0,u=g.monthMod(e.minMonth),o="month",h=e.minDate,r++),this.timeScaleArray.push({position:d,value:u,unit:o,year:this._getYear(a,f,0),month:g.monthMod(f),day:h});for(var p=d,x=0;x<r;x++){o="day",f=c(h+=1,f,this._getYear(a,f,0));var b=this._getYear(a,f,0);p=24*s+p;var m=1===h?g.monthMod(f):h;this.timeScaleArray.push({position:p,value:m,unit:o,year:b,month:g.monthMod(f),day:m})}}},{key:"generateHourScale",value:function(t){var e=t.firstVal,i=t.currentDate,a=t.currentMonth,s=t.currentYear,r=t.minutesWidthOnXAxis,n=t.numberOfHours,o=new Y(this.ctx),l="hour",h=function(t,e){return t>o.determineDaysOfMonths(e+1,s)&&(x=1,e+=1),{month:e,date:x}},c=function(t,e){return t>o.determineDaysOfMonths(e+1,s)?e+=1:e},d=60-e.minMinute,u=d*r,f=e.minHour+1,p=f+1;60===d&&(u=0,p=(f=e.minHour)+1);var x=i,b=c(x,a);this.timeScaleArray.push({position:u,value:f,unit:l,day:x,hour:p,year:s,month:g.monthMod(b)});for(var m=u,v=0;v<n;v++){if(l="hour",p>=24)p=0,l="day",b=h(x+=1,b).month,b=c(x,b);var y=this._getYear(s,b,0);m=0===p&&0===v?d*r:60*r+m;var w=0===p?x:p;this.timeScaleArray.push({position:m,value:w,unit:l,hour:p,day:x,year:y,month:g.monthMod(b)}),p++}}},{key:"generateMinuteScale",value:function(t){var e=t.firstVal,i=t.currentMinute,a=t.currentHour,s=t.currentDate,r=t.currentMonth,n=t.currentYear,o=t.minutesWidthOnXAxis,l=t.numberOfMinutes,h=o-(i-e.minMinute),c=e.minMinute+1,d=c+1,u=s,f=r,p=n,x=a;this.timeScaleArray.push({position:h,value:c,unit:"minute",day:u,hour:x,minute:d,year:p,month:g.monthMod(f)});for(var b=h,m=0;m<l;m++)d>=60&&(d=0,24===(x+=1)&&(x=0)),b=o+b,this.timeScaleArray.push({position:b,value:d,unit:"minute",hour:x,minute:d,day:u,year:this._getYear(n,f,0),month:g.monthMod(f)}),d++}},{key:"createRawDateString",value:function(t,e){var i=t.year;return i+="-"+("0"+t.month.toString()).slice(-2),"day"===t.unit?i+="day"===t.unit?"-"+("0"+e).slice(-2):"-01":i+="-"+("0"+(t.day?t.day:"1")).slice(-2),"hour"===t.unit?i+="hour"===t.unit?"T"+("0"+e).slice(-2):"T00":i+="T"+("0"+(t.hour?t.hour:"0")).slice(-2),i+="minute"===t.unit?":"+("0"+e).slice(-2)+":00":":00:00",this.utc&&(i+=".000Z"),i}},{key:"formatDates",value:function(t){var e=this,i=this.w;return t.map((function(t){var a=t.value.toString(),s=new Y(e.ctx),r=e.createRawDateString(t,a),n=s.getDate(r);if(void 0===i.config.xaxis.labels.format){var o="dd MMM",l=i.config.xaxis.labels.datetimeFormatter;"year"===t.unit&&(o=l.year),"month"===t.unit&&(o=l.month),"day"===t.unit&&(o=l.day),"hour"===t.unit&&(o=l.hour),"minute"===t.unit&&(o=l.minute),a=s.formatDate(n,o)}else a=s.formatDate(n,i.config.xaxis.labels.format);return{dateString:r,position:t.position,value:a,unit:t.unit,year:t.year,month:t.month}}))}},{key:"removeOverlappingTS",value:function(t){var e,i=this,a=new p(this.ctx),s=!1;t.length>0&&t[0].value&&t.every((function(e){return e.value.length===t[0].value.length}))&&(s=!0,e=a.getTextRects(t[0].value).width);var r=0,n=t.map((function(n,o){if(o>0&&i.w.config.xaxis.labels.hideOverlappingLabels){var l=s?e:a.getTextRects(t[r].value).width,h=t[r].position;return n.position>h+l+10?(r=o,n):null}return n}));return n=n.filter((function(t){return null!==t}))}},{key:"_getYear",value:function(t,e,i){return t+Math.floor(e/12)+i}}]),t}(),Tt=function(){function t(i,a){e(this,t),this.ctx=a,this.w=a.w,this.el=i}return a(t,[{key:"setupElements",value:function(){var t=this.w.globals,e=this.w.config,i=e.chart.type;t.axisCharts=["line","area","bar","rangeBar","candlestick","scatter","bubble","radar","heatmap"].indexOf(i)>-1,t.xyCharts=["line","area","bar","rangeBar","candlestick","scatter","bubble"].indexOf(i)>-1,t.isBarHorizontal=("bar"===e.chart.type||"rangeBar"===e.chart.type)&&e.plotOptions.bar.horizontal,t.chartClass=".apexcharts"+t.cuid,t.dom.baseEl=this.el,t.dom.elWrap=document.createElement("div"),p.setAttrs(t.dom.elWrap,{id:t.chartClass.substring(1),class:"apexcharts-canvas "+t.chartClass.substring(1)}),this.el.appendChild(t.dom.elWrap),t.dom.Paper=new window.SVG.Doc(t.dom.elWrap),t.dom.Paper.attr({class:"apexcharts-svg","xmlns:data":"ApexChartsNS",transform:"translate(".concat(e.chart.offsetX,", ").concat(e.chart.offsetY,")")}),t.dom.Paper.node.style.background=e.chart.background,this.setSVGDimensions(),t.dom.elGraphical=t.dom.Paper.group().attr({class:"apexcharts-inner apexcharts-graphical"}),t.dom.elAnnotations=t.dom.Paper.group().attr({class:"apexcharts-annotations"}),t.dom.elDefs=t.dom.Paper.defs(),t.dom.elLegendWrap=document.createElement("div"),t.dom.elLegendWrap.classList.add("apexcharts-legend"),t.dom.elWrap.appendChild(t.dom.elLegendWrap),t.dom.Paper.add(t.dom.elGraphical),t.dom.elGraphical.add(t.dom.elDefs)}},{key:"plotChartType",value:function(t,e){var i=this.w,a=i.config,s=i.globals,r={series:[],i:[]},n={series:[],i:[]},o={series:[],i:[]},l={series:[],i:[]},h={series:[],i:[]},c={series:[],i:[]};s.series.map((function(e,d){void 0!==t[d].type?("column"===t[d].type||"bar"===t[d].type?(s.series.length>1&&a.plotOptions.bar.horizontal&&console.warn("Horizontal bars are not supported in a mixed/combo chart. Please turn off `plotOptions.bar.horizontal`"),h.series.push(e),h.i.push(d),i.globals.columnSeries=h.series):"area"===t[d].type?(n.series.push(e),n.i.push(d)):"line"===t[d].type?(r.series.push(e),r.i.push(d)):"scatter"===t[d].type?(o.series.push(e),o.i.push(d)):"bubble"===t[d].type?(l.series.push(e),l.i.push(d)):"candlestick"===t[d].type?(c.series.push(e),c.i.push(d)):console.warn("You have specified an unrecognized chart type. Available types for this propery are line/area/column/bar/scatter/bubble"),s.comboCharts=!0):(r.series.push(e),r.i.push(d))}));var d=new Lt(this.ctx,e),g=new wt(this.ctx,e),u=new lt(this.ctx),f=new St(this.ctx),p=new F(this.ctx,e),x=new At(this.ctx),b=[];if(s.comboCharts){if(n.series.length>0&&b.push(d.draw(n.series,"area",n.i)),h.series.length>0)if(i.config.chart.stacked){var m=new yt(this.ctx,e);b.push(m.draw(h.series,h.i))}else{var v=new E(this.ctx,e);b.push(v.draw(h.series,h.i))}if(r.series.length>0&&b.push(d.draw(r.series,"line",r.i)),c.series.length>0&&b.push(g.draw(c.series,c.i)),o.series.length>0){var y=new Lt(this.ctx,e,!0);b.push(y.draw(o.series,"scatter",o.i))}if(l.series.length>0){var w=new Lt(this.ctx,e,!0);b.push(w.draw(l.series,"bubble",l.i))}}else switch(a.chart.type){case"line":b=d.draw(s.series,"line");break;case"area":b=d.draw(s.series,"area");break;case"bar":if(a.chart.stacked)b=new yt(this.ctx,e).draw(s.series);else b=new E(this.ctx,e).draw(s.series);break;case"candlestick":b=new wt(this.ctx,e).draw(s.series);break;case"rangeBar":b=p.draw(s.series);break;case"heatmap":b=new kt(this.ctx,e).draw(s.series);break;case"pie":case"donut":case"polarArea":b=u.draw(s.series);break;case"radialBar":b=f.draw(s.series);break;case"radar":b=x.draw(s.series);break;default:b=d.draw(s.series)}return b}},{key:"setSVGDimensions",value:function(){var t=this.w.globals,e=this.w.config;t.svgWidth=e.chart.width,t.svgHeight=e.chart.height;var i=g.getDimensions(this.el),a=e.chart.width.toString().split(/[0-9]+/g).pop();if("%"===a?g.isNumber(i[0])&&(0===i[0].width&&(i=g.getDimensions(this.el.parentNode)),t.svgWidth=i[0]*parseInt(e.chart.width,10)/100):"px"!==a&&""!==a||(t.svgWidth=parseInt(e.chart.width,10)),"auto"!==t.svgHeight&&""!==t.svgHeight)if("%"===e.chart.height.toString().split(/[0-9]+/g).pop()){var s=g.getDimensions(this.el.parentNode);t.svgHeight=s[1]*parseInt(e.chart.height,10)/100}else t.svgHeight=parseInt(e.chart.height,10);else t.axisCharts?t.svgHeight=t.svgWidth/1.61:t.svgHeight=t.svgWidth/1.2;t.svgWidth<0&&(t.svgWidth=0),t.svgHeight<0&&(t.svgHeight=0),p.setAttrs(t.dom.Paper.node,{width:t.svgWidth,height:t.svgHeight});var r=e.chart.sparkline.enabled?0:t.axisCharts?e.chart.parentHeightOffset:0;t.dom.Paper.node.parentNode.parentNode.style.minHeight=t.svgHeight+r+"px",t.dom.elWrap.style.width=t.svgWidth+"px",t.dom.elWrap.style.height=t.svgHeight+"px"}},{key:"shiftGraphPosition",value:function(){var t=this.w.globals,e=t.translateY,i={transform:"translate("+t.translateX+", "+e+")"};p.setAttrs(t.dom.elGraphical.node,i),t.x2SpaceAvailable=t.svgWidth-t.dom.elGraphical.x()-t.gridWidth}},{key:"resizeNonAxisCharts",value:function(){var t=this.w,e=t.globals,i=0,a=t.config.chart.sparkline.enabled?1:15;a+=t.config.grid.padding.bottom,"top"!==t.config.legend.position&&"bottom"!==t.config.legend.position||!t.config.legend.show||t.config.legend.floating||(i=new ct(this.ctx).legendHelpers.getLegendBBox().clwh+10);var s=t.globals.dom.baseEl.querySelector(".apexcharts-radialbar"),r=2.05*t.globals.radialSize;if(s&&!t.config.chart.sparkline.enabled){var n=g.getBoundingClientRect(s);r=n.bottom;var o=n.bottom-n.top;r=Math.max(2.05*t.globals.radialSize,o)}var l=r+e.translateY+i+a;e.dom.elLegendForeign&&e.dom.elLegendForeign.setAttribute("height",l),e.dom.elWrap.style.height=l+"px",p.setAttrs(e.dom.Paper.node,{height:l}),e.dom.Paper.node.parentNode.parentNode.style.minHeight=l+"px"}},{key:"coreCalculations",value:function(){new U(this.ctx).init()}},{key:"resetGlobals",value:function(){var t=this,e=function(){return t.w.config.series.map((function(t){return[]}))},i=new H,a=this.w.globals;i.initGlobalVars(a),a.seriesXvalues=e(),a.seriesYvalues=e()}},{key:"isMultipleY",value:function(){if(this.w.config.yaxis.constructor===Array&&this.w.config.yaxis.length>1)return this.w.globals.isMultipleYAxis=!0,!0}},{key:"xySettings",value:function(){var t=null,e=this.w;if(e.globals.axisCharts){if("back"===e.config.xaxis.crosshairs.position)new Q(this.ctx).drawXCrosshairs();if("back"===e.config.yaxis[0].crosshairs.position)new Q(this.ctx).drawYCrosshairs();if("datetime"===e.config.xaxis.type&&void 0===e.config.xaxis.labels.formatter){var i=new Pt(this.ctx),a=[];isFinite(e.globals.minX)&&isFinite(e.globals.maxX)&&!e.globals.isBarHorizontal?a=i.calculateTimeScaleTicks(e.globals.minX,e.globals.maxX):e.globals.isBarHorizontal&&(a=i.calculateTimeScaleTicks(e.globals.minY,e.globals.maxY)),i.recalcDimensionsBasedOnFormat(a)}t=new m(this.ctx).getCalculatedRatios()}return t}},{key:"updateSourceChart",value:function(t){this.ctx.w.globals.selection=void 0,this.ctx.updateHelpers._updateOptions({chart:{selection:{xaxis:{min:t.w.globals.minX,max:t.w.globals.maxX}}}},!1,!1)}},{key:"setupBrushHandler",value:function(){var t=this,e=this.w;if(e.config.chart.brush.enabled&&"function"!=typeof e.config.chart.events.selection){var i=e.config.chart.brush.targets||[e.config.chart.brush.target];i.forEach((function(e){var i=ApexCharts.getChartByID(e);i.w.globals.brushSource=t.ctx,"function"!=typeof i.w.config.chart.events.zoomed&&(i.w.config.chart.events.zoomed=function(){t.updateSourceChart(i)}),"function"!=typeof i.w.config.chart.events.scrolled&&(i.w.config.chart.events.scrolled=function(){t.updateSourceChart(i)})})),e.config.chart.events.selection=function(t,a){i.forEach((function(t){var i=ApexCharts.getChartByID(t),s=g.clone(e.config.yaxis);e.config.chart.brush.autoScaleYaxis&&1===i.w.globals.series.length&&(s=new j(i).autoScaleY(i,s,a));i.ctx.updateHelpers._updateOptions({xaxis:{min:a.xaxis.min,max:a.xaxis.max},yaxis:n({},i.w.config.yaxis[0],{min:s[0].min,max:s[0].max})},!1,!1,!1,!1)}))}}}}]),t}(),zt=function(){function i(t){e(this,i),this.ctx=t,this.w=t.w}return a(i,[{key:"_updateOptions",value:function(e){var i=this,a=arguments.length>1&&void 0!==arguments[1]&&arguments[1],s=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],r=!(arguments.length>3&&void 0!==arguments[3])||arguments[3],n=arguments.length>4&&void 0!==arguments[4]&&arguments[4],o=[this.ctx];r&&(o=this.ctx.getSyncedCharts()),this.ctx.w.globals.isExecCalled&&(o=[this.ctx],this.ctx.w.globals.isExecCalled=!1),o.forEach((function(r){var o=r.w;return o.globals.shouldAnimate=s,a||(o.globals.resized=!0,o.globals.dataChanged=!0,s&&r.series.getPreviousPaths()),e&&"object"===t(e)&&(r.config=new D(e),e=m.extendArrayProps(r.config,e,o),r.w.globals.chartID!==i.ctx.w.globals.chartID&&delete e.series,o.config=g.extend(o.config,e),n&&(o.globals.lastXAxis=[],o.globals.lastYAxis=[],o.globals.initialConfig=g.extend({},o.config),o.globals.initialSeries=JSON.parse(JSON.stringify(o.config.series)))),r.update(e)}))}},{key:"_updateSeries",value:function(t,e){var i,a=this,s=arguments.length>2&&void 0!==arguments[2]&&arguments[2],r=this.w;return r.globals.shouldAnimate=e,r.globals.dataChanged=!0,e&&this.ctx.series.getPreviousPaths(),r.globals.axisCharts?(0===(i=t.map((function(t,e){return a._extendSeries(t,e)}))).length&&(i=[{data:[]}]),r.config.series=i):r.config.series=t.slice(),s&&(r.globals.initialConfig.series=JSON.parse(JSON.stringify(r.config.series)),r.globals.initialSeries=JSON.parse(JSON.stringify(r.config.series))),this.ctx.update()}},{key:"_extendSeries",value:function(t,e){var i=this.w;return n({},i.config.series[e],{name:t.name?t.name:i.config.series[e]&&i.config.series[e].name,type:t.type?t.type:i.config.series[e]&&i.config.series[e].type,data:t.data?t.data:i.config.series[e]&&i.config.series[e].data})}},{key:"toggleDataPointSelection",value:function(t,e){var i=this.w,a=null,s=".apexcharts-series[data\\:realIndex='".concat(t,"']");i.globals.axisCharts?a=i.globals.dom.Paper.select("".concat(s," path[j='").concat(e,"'], ").concat(s," circle[j='").concat(e,"'], ").concat(s," rect[j='").concat(e,"']")).members[0]:void 0===e&&(a=i.globals.dom.Paper.select("".concat(s," path[j='").concat(t,"']")).members[0],("pie"===i.config.chart.type||"polarArea"===i.config.chart.type||"donut"===i.config.chart.type)&&new lt(this.ctx).pieClicked(t));return a?(new p(this.ctx).pathMouseDown(a,null),a.node?a.node:null):(console.warn("toggleDataPointSelection: Element not found"),null)}},{key:"forceXAxisUpdate",value:function(t){var e=this.w;if(["min","max"].forEach((function(i){void 0!==t.xaxis[i]&&(e.config.xaxis[i]=t.xaxis[i],e.globals.lastXAxis[i]=t.xaxis[i])})),t.xaxis.categories&&t.xaxis.categories.length&&(e.config.xaxis.categories=t.xaxis.categories),e.config.xaxis.convertedCatToNumeric){var i=new R(t);t=i.convertCatToNumericXaxis(t,this.ctx)}return t}},{key:"forceYAxisUpdate",value:function(t){var e=this.w;return e.config.chart.stacked&&"100%"===e.config.chart.stackType&&(Array.isArray(t.yaxis)?t.yaxis.forEach((function(e,i){t.yaxis[i].min=0,t.yaxis[i].max=100})):(t.yaxis.min=0,t.yaxis.max=100)),t}},{key:"revertDefaultAxisMinMax",value:function(){var t=this,e=this.w;e.config.xaxis.min=e.globals.lastXAxis.min,e.config.xaxis.max=e.globals.lastXAxis.max,e.config.yaxis.map((function(i,a){e.globals.zoomed?void 0!==e.globals.lastYAxis[a]&&(i.min=e.globals.lastYAxis[a].min,i.max=e.globals.lastYAxis[a].max):void 0!==t.ctx.opts.yaxis[a]&&(i.min=t.ctx.opts.yaxis[a].min,i.max=t.ctx.opts.yaxis[a].max)}))}}]),i}();w="undefined"!=typeof window?window:void 0,k=function(e,i){var a=(void 0!==this?this:e).SVG=function(t){if(a.supported)return t=new a.Doc(t),a.parser.draw||a.prepare(),t};if(a.ns="http://www.w3.org/2000/svg",a.xmlns="http://www.w3.org/2000/xmlns/",a.xlink="http://www.w3.org/1999/xlink",a.svgjs="http://svgjs.com/svgjs",a.supported=!0,!a.supported)return!1;a.did=1e3,a.eid=function(t){return"Svgjs"+d(t)+a.did++},a.create=function(t){var e=i.createElementNS(this.ns,t);return e.setAttribute("id",this.eid(t)),e},a.extend=function(){var t,e;e=(t=[].slice.call(arguments)).pop();for(var i=t.length-1;i>=0;i--)if(t[i])for(var s in e)t[i].prototype[s]=e[s];a.Set&&a.Set.inherit&&a.Set.inherit()},a.invent=function(t){var e="function"==typeof t.create?t.create:function(){this.constructor.call(this,a.create(t.create))};return t.inherit&&(e.prototype=new t.inherit),t.extend&&a.extend(e,t.extend),t.construct&&a.extend(t.parent||a.Container,t.construct),e},a.adopt=function(t){return t?t.instance?t.instance:((i="svg"==t.nodeName?t.parentNode instanceof e.SVGElement?new a.Nested:new a.Doc:"linearGradient"==t.nodeName?new a.Gradient("linear"):"radialGradient"==t.nodeName?new a.Gradient("radial"):a[d(t.nodeName)]?new(a[d(t.nodeName)]):new a.Element(t)).type=t.nodeName,i.node=t,t.instance=i,i instanceof a.Doc&&i.namespace().defs(),i.setData(JSON.parse(t.getAttribute("svgjs:data"))||{}),i):null;var i},a.prepare=function(){var t=i.getElementsByTagName("body")[0],e=(t?new a.Doc(t):a.adopt(i.documentElement).nested()).size(2,0);a.parser={body:t||i.documentElement,draw:e.style("opacity:0;position:absolute;left:-100%;top:-100%;overflow:hidden").node,poly:e.polyline().node,path:e.path().node,native:a.create("svg")}},a.parser={native:a.create("svg")},i.addEventListener("DOMContentLoaded",(function(){a.parser.draw||a.prepare()}),!1),a.regex={numberAndUnit:/^([+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?)([a-z%]*)$/i,hex:/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i,rgb:/rgb\((\d+),(\d+),(\d+)\)/,reference:/#([a-z0-9\-_]+)/i,transforms:/\)\s*,?\s*/,whitespace:/\s/g,isHex:/^#[a-f0-9]{3,6}$/i,isRgb:/^rgb\(/,isCss:/[^:]+:[^;]+;?/,isBlank:/^(\s+)?$/,isNumber:/^[+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?$/i,isPercent:/^-?[\d\.]+%$/,isImage:/\.(jpg|jpeg|png|gif|svg)(\?[^=]+.*)?/i,delimiter:/[\s,]+/,hyphen:/([^e])\-/gi,pathLetters:/[MLHVCSQTAZ]/gi,isPathLetter:/[MLHVCSQTAZ]/i,numbersWithDots:/((\d?\.\d+(?:e[+-]?\d+)?)((?:\.\d+(?:e[+-]?\d+)?)+))+/gi,dots:/\./g},a.utils={map:function(t,e){for(var i=t.length,a=[],s=0;s<i;s++)a.push(e(t[s]));return a},filter:function(t,e){for(var i=t.length,a=[],s=0;s<i;s++)e(t[s])&&a.push(t[s]);return a},filterSVGElements:function(t){return this.filter(t,(function(t){return t instanceof e.SVGElement}))}},a.defaults={attrs:{"fill-opacity":1,"stroke-opacity":1,"stroke-width":0,"stroke-linejoin":"miter","stroke-linecap":"butt",fill:"#000000",stroke:"#000000",opacity:1,x:0,y:0,cx:0,cy:0,width:0,height:0,r:0,rx:0,ry:0,offset:0,"stop-opacity":1,"stop-color":"#000000","font-size":16,"font-family":"Helvetica, Arial, sans-serif","text-anchor":"start"}},a.Color=function(e){var i,s;this.r=0,this.g=0,this.b=0,e&&("string"==typeof e?a.regex.isRgb.test(e)?(i=a.regex.rgb.exec(e.replace(a.regex.whitespace,"")),this.r=parseInt(i[1]),this.g=parseInt(i[2]),this.b=parseInt(i[3])):a.regex.isHex.test(e)&&(i=a.regex.hex.exec(4==(s=e).length?["#",s.substring(1,2),s.substring(1,2),s.substring(2,3),s.substring(2,3),s.substring(3,4),s.substring(3,4)].join(""):s),this.r=parseInt(i[1],16),this.g=parseInt(i[2],16),this.b=parseInt(i[3],16)):"object"===t(e)&&(this.r=e.r,this.g=e.g,this.b=e.b))},a.extend(a.Color,{toString:function(){return this.toHex()},toHex:function(){return"#"+g(this.r)+g(this.g)+g(this.b)},toRgb:function(){return"rgb("+[this.r,this.g,this.b].join()+")"},brightness:function(){return this.r/255*.3+this.g/255*.59+this.b/255*.11},morph:function(t){return this.destination=new a.Color(t),this},at:function(t){return this.destination?(t=t<0?0:t>1?1:t,new a.Color({r:~~(this.r+(this.destination.r-this.r)*t),g:~~(this.g+(this.destination.g-this.g)*t),b:~~(this.b+(this.destination.b-this.b)*t)})):this}}),a.Color.test=function(t){return t+="",a.regex.isHex.test(t)||a.regex.isRgb.test(t)},a.Color.isRgb=function(t){return t&&"number"==typeof t.r&&"number"==typeof t.g&&"number"==typeof t.b},a.Color.isColor=function(t){return a.Color.isRgb(t)||a.Color.test(t)},a.Array=function(t,e){0==(t=(t||[]).valueOf()).length&&e&&(t=e.valueOf()),this.value=this.parse(t)},a.extend(a.Array,{toString:function(){return this.value.join(" ")},valueOf:function(){return this.value},parse:function(t){return t=t.valueOf(),Array.isArray(t)?t:this.split(t)}}),a.PointArray=function(t,e){a.Array.call(this,t,e||[[0,0]])},a.PointArray.prototype=new a.Array,a.PointArray.prototype.constructor=a.PointArray;for(var s={M:function(t,e,i){return e.x=i.x=t[0],e.y=i.y=t[1],["M",e.x,e.y]},L:function(t,e){return e.x=t[0],e.y=t[1],["L",t[0],t[1]]},H:function(t,e){return e.x=t[0],["H",t[0]]},V:function(t,e){return e.y=t[0],["V",t[0]]},C:function(t,e){return e.x=t[4],e.y=t[5],["C",t[0],t[1],t[2],t[3],t[4],t[5]]},Q:function(t,e){return e.x=t[2],e.y=t[3],["Q",t[0],t[1],t[2],t[3]]},Z:function(t,e,i){return e.x=i.x,e.y=i.y,["Z"]}},r="mlhvqtcsaz".split(""),n=0,o=r.length;n<o;++n)s[r[n]]=function(t){return function(e,i,a){if("H"==t)e[0]=e[0]+i.x;else if("V"==t)e[0]=e[0]+i.y;else if("A"==t)e[5]=e[5]+i.x,e[6]=e[6]+i.y;else for(var r=0,n=e.length;r<n;++r)e[r]=e[r]+(r%2?i.y:i.x);return s[t](e,i,a)}}(r[n].toUpperCase());a.PathArray=function(t,e){a.Array.call(this,t,e||[["M",0,0]])},a.PathArray.prototype=new a.Array,a.PathArray.prototype.constructor=a.PathArray,a.extend(a.PathArray,{toString:function(){return function(t){for(var e=0,i=t.length,a="";e<i;e++)a+=t[e][0],null!=t[e][1]&&(a+=t[e][1],null!=t[e][2]&&(a+=" ",a+=t[e][2],null!=t[e][3]&&(a+=" ",a+=t[e][3],a+=" ",a+=t[e][4],null!=t[e][5]&&(a+=" ",a+=t[e][5],a+=" ",a+=t[e][6],null!=t[e][7]&&(a+=" ",a+=t[e][7])))));return a+" "}(this.value)},move:function(t,e){var i=this.bbox();return i.x,i.y,this},at:function(t){if(!this.destination)return this;for(var e=this.value,i=this.destination.value,s=[],r=new a.PathArray,n=0,o=e.length;n<o;n++){s[n]=[e[n][0]];for(var l=1,h=e[n].length;l<h;l++)s[n][l]=e[n][l]+(i[n][l]-e[n][l])*t;"A"===s[n][0]&&(s[n][4]=+(0!=s[n][4]),s[n][5]=+(0!=s[n][5]))}return r.value=s,r},parse:function(t){if(t instanceof a.PathArray)return t.valueOf();var e,i={M:2,L:2,H:1,V:1,C:6,S:4,Q:4,T:2,A:7,Z:0};t="string"==typeof t?t.replace(a.regex.numbersWithDots,h).replace(a.regex.pathLetters," $& ").replace(a.regex.hyphen,"$1 -").trim().split(a.regex.delimiter):t.reduce((function(t,e){return[].concat.call(t,e)}),[]);var r=[],n=new a.Point,o=new a.Point,l=0,c=t.length;do{a.regex.isPathLetter.test(t[l])?(e=t[l],++l):"M"==e?e="L":"m"==e&&(e="l"),r.push(s[e].call(null,t.slice(l,l+=i[e.toUpperCase()]).map(parseFloat),n,o))}while(c>l);return r},bbox:function(){return a.parser.draw||a.prepare(),a.parser.path.setAttribute("d",this.toString()),a.parser.path.getBBox()}}),a.Number=a.invent({create:function(t,e){this.value=0,this.unit=e||"","number"==typeof t?this.value=isNaN(t)?0:isFinite(t)?t:t<0?-34e37:34e37:"string"==typeof t?(e=t.match(a.regex.numberAndUnit))&&(this.value=parseFloat(e[1]),"%"==e[5]?this.value/=100:"s"==e[5]&&(this.value*=1e3),this.unit=e[5]):t instanceof a.Number&&(this.value=t.valueOf(),this.unit=t.unit)},extend:{toString:function(){return("%"==this.unit?~~(1e8*this.value)/1e6:"s"==this.unit?this.value/1e3:this.value)+this.unit},toJSON:function(){return this.toString()},valueOf:function(){return this.value},plus:function(t){return t=new a.Number(t),new a.Number(this+t,this.unit||t.unit)},minus:function(t){return t=new a.Number(t),new a.Number(this-t,this.unit||t.unit)},times:function(t){return t=new a.Number(t),new a.Number(this*t,this.unit||t.unit)},divide:function(t){return t=new a.Number(t),new a.Number(this/t,this.unit||t.unit)},to:function(t){var e=new a.Number(this);return"string"==typeof t&&(e.unit=t),e},morph:function(t){return this.destination=new a.Number(t),t.relative&&(this.destination.value+=this.value),this},at:function(t){return this.destination?new a.Number(this.destination).minus(this).times(t).plus(this):this}}}),a.Element=a.invent({create:function(t){this._stroke=a.defaults.attrs.stroke,this._event=null,this.dom={},(this.node=t)&&(this.type=t.nodeName,this.node.instance=this,this._stroke=t.getAttribute("stroke")||this._stroke)},extend:{x:function(t){return this.attr("x",t)},y:function(t){return this.attr("y",t)},cx:function(t){return null==t?this.x()+this.width()/2:this.x(t-this.width()/2)},cy:function(t){return null==t?this.y()+this.height()/2:this.y(t-this.height()/2)},move:function(t,e){return this.x(t).y(e)},center:function(t,e){return this.cx(t).cy(e)},width:function(t){return this.attr("width",t)},height:function(t){return this.attr("height",t)},size:function(t,e){var i=u(this,t,e);return this.width(new a.Number(i.width)).height(new a.Number(i.height))},clone:function(t){this.writeDataToDom();var e=x(this.node.cloneNode(!0));return t?t.add(e):this.after(e),e},remove:function(){return this.parent()&&this.parent().removeElement(this),this},replace:function(t){return this.after(t).remove(),t},addTo:function(t){return t.put(this)},putIn:function(t){return t.add(this)},id:function(t){return this.attr("id",t)},show:function(){return this.style("display","")},hide:function(){return this.style("display","none")},visible:function(){return"none"!=this.style("display")},toString:function(){return this.attr("id")},classes:function(){var t=this.attr("class");return null==t?[]:t.trim().split(a.regex.delimiter)},hasClass:function(t){return-1!=this.classes().indexOf(t)},addClass:function(t){if(!this.hasClass(t)){var e=this.classes();e.push(t),this.attr("class",e.join(" "))}return this},removeClass:function(t){return this.hasClass(t)&&this.attr("class",this.classes().filter((function(e){return e!=t})).join(" ")),this},toggleClass:function(t){return this.hasClass(t)?this.removeClass(t):this.addClass(t)},reference:function(t){return a.get(this.attr(t))},parent:function(t){var i=this;if(!i.node.parentNode)return null;if(i=a.adopt(i.node.parentNode),!t)return i;for(;i&&i.node instanceof e.SVGElement;){if("string"==typeof t?i.matches(t):i instanceof t)return i;if(!i.node.parentNode||"#document"==i.node.parentNode.nodeName)return null;i=a.adopt(i.node.parentNode)}},doc:function(){return this instanceof a.Doc?this:this.parent(a.Doc)},parents:function(t){var e=[],i=this;do{if(!(i=i.parent(t))||!i.node)break;e.push(i)}while(i.parent);return e},matches:function(t){return function(t,e){return(t.matches||t.matchesSelector||t.msMatchesSelector||t.mozMatchesSelector||t.webkitMatchesSelector||t.oMatchesSelector).call(t,e)}(this.node,t)},native:function(){return this.node},svg:function(t){var e=i.createElement("svg");if(!(t&&this instanceof a.Parent))return e.appendChild(t=i.createElement("svg")),this.writeDataToDom(),t.appendChild(this.node.cloneNode(!0)),e.innerHTML.replace(/^<svg>/,"").replace(/<\/svg>$/,"");e.innerHTML="<svg>"+t.replace(/\n/,"").replace(/<([\w:-]+)([^<]+?)\/>/g,"<$1$2></$1>")+"</svg>";for(var s=0,r=e.firstChild.childNodes.length;s<r;s++)this.node.appendChild(e.firstChild.firstChild);return this},writeDataToDom:function(){return(this.each||this.lines)&&(this.each?this:this.lines()).each((function(){this.writeDataToDom()})),this.node.removeAttribute("svgjs:data"),Object.keys(this.dom).length&&this.node.setAttribute("svgjs:data",JSON.stringify(this.dom)),this},setData:function(t){return this.dom=t,this},is:function(t){return function(t,e){return t instanceof e}(this,t)}}}),a.easing={"-":function(t){return t},"<>":function(t){return-Math.cos(t*Math.PI)/2+.5},">":function(t){return Math.sin(t*Math.PI/2)},"<":function(t){return 1-Math.cos(t*Math.PI/2)}},a.morph=function(t){return function(e,i){return new a.MorphObj(e,i).at(t)}},a.Situation=a.invent({create:function(t){this.init=!1,this.reversed=!1,this.reversing=!1,this.duration=new a.Number(t.duration).valueOf(),this.delay=new a.Number(t.delay).valueOf(),this.start=+new Date+this.delay,this.finish=this.start+this.duration,this.ease=t.ease,this.loop=0,this.loops=!1,this.animations={},this.attrs={},this.styles={},this.transforms=[],this.once={}}}),a.FX=a.invent({create:function(t){this._target=t,this.situations=[],this.active=!1,this.situation=null,this.paused=!1,this.lastPos=0,this.pos=0,this.absPos=0,this._speed=1},extend:{animate:function(e,i,s){"object"===t(e)&&(i=e.ease,s=e.delay,e=e.duration);var r=new a.Situation({duration:e||1e3,delay:s||0,ease:a.easing[i||"-"]||i});return this.queue(r),this},target:function(t){return t&&t instanceof a.Element?(this._target=t,this):this._target},timeToAbsPos:function(t){return(t-this.situation.start)/(this.situation.duration/this._speed)},absPosToTime:function(t){return this.situation.duration/this._speed*t+this.situation.start},startAnimFrame:function(){this.stopAnimFrame(),this.animationFrame=e.requestAnimationFrame(function(){this.step()}.bind(this))},stopAnimFrame:function(){e.cancelAnimationFrame(this.animationFrame)},start:function(){return!this.active&&this.situation&&(this.active=!0,this.startCurrent()),this},startCurrent:function(){return this.situation.start=+new Date+this.situation.delay/this._speed,this.situation.finish=this.situation.start+this.situation.duration/this._speed,this.initAnimations().step()},queue:function(t){return("function"==typeof t||t instanceof a.Situation)&&this.situations.push(t),this.situation||(this.situation=this.situations.shift()),this},dequeue:function(){return this.stop(),this.situation=this.situations.shift(),this.situation&&(this.situation instanceof a.Situation?this.start():this.situation.call(this)),this},initAnimations:function(){var t,e=this.situation;if(e.init)return this;for(var i in e.animations){t=this.target()[i](),Array.isArray(t)||(t=[t]),Array.isArray(e.animations[i])||(e.animations[i]=[e.animations[i]]);for(var s=t.length;s--;)e.animations[i][s]instanceof a.Number&&(t[s]=new a.Number(t[s])),e.animations[i][s]=t[s].morph(e.animations[i][s])}for(var i in e.attrs)e.attrs[i]=new a.MorphObj(this.target().attr(i),e.attrs[i]);for(var i in e.styles)e.styles[i]=new a.MorphObj(this.target().style(i),e.styles[i]);return e.initialTransformation=this.target().matrixify(),e.init=!0,this},clearQueue:function(){return this.situations=[],this},clearCurrent:function(){return this.situation=null,this},stop:function(t,e){var i=this.active;return this.active=!1,e&&this.clearQueue(),t&&this.situation&&(!i&&this.startCurrent(),this.atEnd()),this.stopAnimFrame(),this.clearCurrent()},after:function(t){var e=this.last();return this.target().on("finished.fx",(function i(a){a.detail.situation==e&&(t.call(this,e),this.off("finished.fx",i))})),this._callStart()},during:function(t){var e=this.last(),i=function(i){i.detail.situation==e&&t.call(this,i.detail.pos,a.morph(i.detail.pos),i.detail.eased,e)};return this.target().off("during.fx",i).on("during.fx",i),this.after((function(){this.off("during.fx",i)})),this._callStart()},afterAll:function(t){var e=function e(i){t.call(this),this.off("allfinished.fx",e)};return this.target().off("allfinished.fx",e).on("allfinished.fx",e),this._callStart()},last:function(){return this.situations.length?this.situations[this.situations.length-1]:this.situation},add:function(t,e,i){return this.last()[i||"animations"][t]=e,this._callStart()},step:function(t){var e,i,a;t||(this.absPos=this.timeToAbsPos(+new Date)),!1!==this.situation.loops?(e=Math.max(this.absPos,0),i=Math.floor(e),!0===this.situation.loops||i<this.situation.loops?(this.pos=e-i,a=this.situation.loop,this.situation.loop=i):(this.absPos=this.situation.loops,this.pos=1,a=this.situation.loop-1,this.situation.loop=this.situation.loops),this.situation.reversing&&(this.situation.reversed=this.situation.reversed!=Boolean((this.situation.loop-a)%2))):(this.absPos=Math.min(this.absPos,1),this.pos=this.absPos),this.pos<0&&(this.pos=0),this.situation.reversed&&(this.pos=1-this.pos);var s=this.situation.ease(this.pos);for(var r in this.situation.once)r>this.lastPos&&r<=s&&(this.situation.once[r].call(this.target(),this.pos,s),delete this.situation.once[r]);return this.active&&this.target().fire("during",{pos:this.pos,eased:s,fx:this,situation:this.situation}),this.situation?(this.eachAt(),1==this.pos&&!this.situation.reversed||this.situation.reversed&&0==this.pos?(this.stopAnimFrame(),this.target().fire("finished",{fx:this,situation:this.situation}),this.situations.length||(this.target().fire("allfinished"),this.situations.length||(this.target().off(".fx"),this.active=!1)),this.active?this.dequeue():this.clearCurrent()):!this.paused&&this.active&&this.startAnimFrame(),this.lastPos=s,this):this},eachAt:function(){var t,e=this,i=this.target(),s=this.situation;for(var r in s.animations)t=[].concat(s.animations[r]).map((function(t){return"string"!=typeof t&&t.at?t.at(s.ease(e.pos),e.pos):t})),i[r].apply(i,t);for(var r in s.attrs)t=[r].concat(s.attrs[r]).map((function(t){return"string"!=typeof t&&t.at?t.at(s.ease(e.pos),e.pos):t})),i.attr.apply(i,t);for(var r in s.styles)t=[r].concat(s.styles[r]).map((function(t){return"string"!=typeof t&&t.at?t.at(s.ease(e.pos),e.pos):t})),i.style.apply(i,t);if(s.transforms.length){t=s.initialTransformation,r=0;for(var n=s.transforms.length;r<n;r++){var o=s.transforms[r];o instanceof a.Matrix?t=o.relative?t.multiply((new a.Matrix).morph(o).at(s.ease(this.pos))):t.morph(o).at(s.ease(this.pos)):(o.relative||o.undo(t.extract()),t=t.multiply(o.at(s.ease(this.pos))))}i.matrix(t)}return this},once:function(t,e,i){var a=this.last();return i||(t=a.ease(t)),a.once[t]=e,this},_callStart:function(){return setTimeout(function(){this.start()}.bind(this),0),this}},parent:a.Element,construct:{animate:function(t,e,i){return(this.fx||(this.fx=new a.FX(this))).animate(t,e,i)},delay:function(t){return(this.fx||(this.fx=new a.FX(this))).delay(t)},stop:function(t,e){return this.fx&&this.fx.stop(t,e),this},finish:function(){return this.fx&&this.fx.finish(),this}}}),a.MorphObj=a.invent({create:function(t,e){return a.Color.isColor(e)?new a.Color(t).morph(e):a.regex.delimiter.test(t)?a.regex.pathLetters.test(t)?new a.PathArray(t).morph(e):new a.Array(t).morph(e):a.regex.numberAndUnit.test(e)?new a.Number(t).morph(e):(this.value=t,void(this.destination=e))},extend:{at:function(t,e){return e<1?this.value:this.destination},valueOf:function(){return this.value}}}),a.extend(a.FX,{attr:function(e,i,a){if("object"===t(e))for(var s in e)this.attr(s,e[s]);else this.add(e,i,"attrs");return this},plot:function(t,e,i,a){return 4==arguments.length?this.plot([t,e,i,a]):this.add("plot",new(this.target().morphArray)(t))}}),a.Box=a.invent({create:function(e,i,s,r){if(!("object"!==t(e)||e instanceof a.Element))return a.Box.call(this,null!=e.left?e.left:e.x,null!=e.top?e.top:e.y,e.width,e.height);4==arguments.length&&(this.x=e,this.y=i,this.width=s,this.height=r),b(this)}}),a.BBox=a.invent({create:function(t){if(a.Box.apply(this,[].slice.call(arguments)),t instanceof a.Element){var e;try{if(!i.documentElement.contains){for(var s=t.node;s.parentNode;)s=s.parentNode;if(s!=i)throw new Error("Element not in the dom")}e=t.node.getBBox()}catch(i){if(t instanceof a.Shape){a.parser.draw||a.prepare();var r=t.clone(a.parser.draw.instance).show();e=r.node.getBBox(),r.remove()}else e={x:t.node.clientLeft,y:t.node.clientTop,width:t.node.clientWidth,height:t.node.clientHeight}}a.Box.call(this,e)}},inherit:a.Box,parent:a.Element,construct:{bbox:function(){return new a.BBox(this)}}}),a.BBox.prototype.constructor=a.BBox,a.Matrix=a.invent({create:function(e){var i=p([1,0,0,1,0,0]);e=e instanceof a.Element?e.matrixify():"string"==typeof e?p(e.split(a.regex.delimiter).map(parseFloat)):6==arguments.length?p([].slice.call(arguments)):Array.isArray(e)?p(e):"object"===t(e)?e:i;for(var s=v.length-1;s>=0;--s)this[v[s]]=null!=e[v[s]]?e[v[s]]:i[v[s]]},extend:{extract:function(){var t=f(this,0,1),e=(f(this,1,0),180/Math.PI*Math.atan2(t.y,t.x)-90);return{x:this.e,y:this.f,transformedX:(this.e*Math.cos(e*Math.PI/180)+this.f*Math.sin(e*Math.PI/180))/Math.sqrt(this.a*this.a+this.b*this.b),transformedY:(this.f*Math.cos(e*Math.PI/180)+this.e*Math.sin(-e*Math.PI/180))/Math.sqrt(this.c*this.c+this.d*this.d),rotation:e,a:this.a,b:this.b,c:this.c,d:this.d,e:this.e,f:this.f,matrix:new a.Matrix(this)}},clone:function(){return new a.Matrix(this)},morph:function(t){return this.destination=new a.Matrix(t),this},multiply:function(t){return new a.Matrix(this.native().multiply(function(t){return t instanceof a.Matrix||(t=new a.Matrix(t)),t}(t).native()))},inverse:function(){return new a.Matrix(this.native().inverse())},translate:function(t,e){return new a.Matrix(this.native().translate(t||0,e||0))},native:function(){for(var t=a.parser.native.createSVGMatrix(),e=v.length-1;e>=0;e--)t[v[e]]=this[v[e]];return t},toString:function(){return"matrix("+m(this.a)+","+m(this.b)+","+m(this.c)+","+m(this.d)+","+m(this.e)+","+m(this.f)+")"}},parent:a.Element,construct:{ctm:function(){return new a.Matrix(this.node.getCTM())},screenCTM:function(){if(this instanceof a.Nested){var t=this.rect(1,1),e=t.node.getScreenCTM();return t.remove(),new a.Matrix(e)}return new a.Matrix(this.node.getScreenCTM())}}}),a.Point=a.invent({create:function(e,i){var a;a=Array.isArray(e)?{x:e[0],y:e[1]}:"object"===t(e)?{x:e.x,y:e.y}:null!=e?{x:e,y:null!=i?i:e}:{x:0,y:0},this.x=a.x,this.y=a.y},extend:{clone:function(){return new a.Point(this)},morph:function(t,e){return this.destination=new a.Point(t,e),this}}}),a.extend(a.Element,{point:function(t,e){return new a.Point(t,e).transform(this.screenCTM().inverse())}}),a.extend(a.Element,{attr:function(e,i,s){if(null==e){for(e={},s=(i=this.node.attributes).length-1;s>=0;s--)e[i[s].nodeName]=a.regex.isNumber.test(i[s].nodeValue)?parseFloat(i[s].nodeValue):i[s].nodeValue;return e}if("object"===t(e))for(var r in e)this.attr(r,e[r]);else if(null===i)this.node.removeAttribute(e);else{if(null==i)return null==(i=this.node.getAttribute(e))?a.defaults.attrs[e]:a.regex.isNumber.test(i)?parseFloat(i):i;"stroke-width"==e?this.attr("stroke",parseFloat(i)>0?this._stroke:null):"stroke"==e&&(this._stroke=i),"fill"!=e&&"stroke"!=e||(a.regex.isImage.test(i)&&(i=this.doc().defs().image(i,0,0)),i instanceof a.Image&&(i=this.doc().defs().pattern(0,0,(function(){this.add(i)})))),"number"==typeof i?i=new a.Number(i):a.Color.isColor(i)?i=new a.Color(i):Array.isArray(i)&&(i=new a.Array(i)),"leading"==e?this.leading&&this.leading(i):"string"==typeof s?this.node.setAttributeNS(s,e,i.toString()):this.node.setAttribute(e,i.toString()),!this.rebuild||"font-size"!=e&&"x"!=e||this.rebuild(e,i)}return this}}),a.extend(a.Element,{transform:function(e,i){var s;return"object"!==t(e)?(s=new a.Matrix(this).extract(),"string"==typeof e?s[e]:s):(s=new a.Matrix(this),i=!!i||!!e.relative,null!=e.a&&(s=i?s.multiply(new a.Matrix(e)):new a.Matrix(e)),this.attr("transform",s))}}),a.extend(a.Element,{untransform:function(){return this.attr("transform",null)},matrixify:function(){return(this.attr("transform")||"").split(a.regex.transforms).slice(0,-1).map((function(t){var e=t.trim().split("(");return[e[0],e[1].split(a.regex.delimiter).map((function(t){return parseFloat(t)}))]})).reduce((function(t,e){return"matrix"==e[0]?t.multiply(p(e[1])):t[e[0]].apply(t,e[1])}),new a.Matrix)},toParent:function(t){if(this==t)return this;var e=this.screenCTM(),i=t.screenCTM().inverse();return this.addTo(t).untransform().transform(i.multiply(e)),this},toDoc:function(){return this.toParent(this.doc())}}),a.Transformation=a.invent({create:function(e,i){if(arguments.length>1&&"boolean"!=typeof i)return this.constructor.call(this,[].slice.call(arguments));if(Array.isArray(e))for(var a=0,s=this.arguments.length;a<s;++a)this[this.arguments[a]]=e[a];else if("object"===t(e))for(a=0,s=this.arguments.length;a<s;++a)this[this.arguments[a]]=e[this.arguments[a]];this.inversed=!1,!0===i&&(this.inversed=!0)}}),a.Translate=a.invent({parent:a.Matrix,inherit:a.Transformation,create:function(t,e){this.constructor.apply(this,[].slice.call(arguments))},extend:{arguments:["transformedX","transformedY"],method:"translate"}}),a.extend(a.Element,{style:function(e,i){if(0==arguments.length)return this.node.style.cssText||"";if(arguments.length<2)if("object"===t(e))for(var s in e)this.style(s,e[s]);else{if(!a.regex.isCss.test(e))return this.node.style[c(e)];for(e=e.split(/\s*;\s*/).filter((function(t){return!!t})).map((function(t){return t.split(/\s*:\s*/)}));i=e.pop();)this.style(i[0],i[1])}else this.node.style[c(e)]=null===i||a.regex.isBlank.test(i)?"":i;return this}}),a.Parent=a.invent({create:function(t){this.constructor.call(this,t)},inherit:a.Element,extend:{children:function(){return a.utils.map(a.utils.filterSVGElements(this.node.childNodes),(function(t){return a.adopt(t)}))},add:function(t,e){return null==e?this.node.appendChild(t.node):t.node!=this.node.childNodes[e]&&this.node.insertBefore(t.node,this.node.childNodes[e]),this},put:function(t,e){return this.add(t,e),t},has:function(t){return this.index(t)>=0},index:function(t){return[].slice.call(this.node.childNodes).indexOf(t.node)},get:function(t){return a.adopt(this.node.childNodes[t])},first:function(){return this.get(0)},last:function(){return this.get(this.node.childNodes.length-1)},each:function(t,e){for(var i=this.children(),s=0,r=i.length;s<r;s++)i[s]instanceof a.Element&&t.apply(i[s],[s,i]),e&&i[s]instanceof a.Container&&i[s].each(t,e);return this},removeElement:function(t){return this.node.removeChild(t.node),this},clear:function(){for(;this.node.hasChildNodes();)this.node.removeChild(this.node.lastChild);return delete this._defs,this},defs:function(){return this.doc().defs()}}}),a.extend(a.Parent,{ungroup:function(t,e){return 0===e||this instanceof a.Defs||this.node==a.parser.draw?this:(t=t||(this instanceof a.Doc?this:this.parent(a.Parent)),e=e||1/0,this.each((function(){return this instanceof a.Defs?this:this instanceof a.Parent?this.ungroup(t,e-1):this.toParent(t)})),this.node.firstChild||this.remove(),this)},flatten:function(t,e){return this.ungroup(t,e)}}),a.Container=a.invent({create:function(t){this.constructor.call(this,t)},inherit:a.Parent}),a.ViewBox=a.invent({parent:a.Container,construct:{}}),["click","dblclick","mousedown","mouseup","mouseover","mouseout","mousemove","touchstart","touchmove","touchleave","touchend","touchcancel"].forEach((function(t){a.Element.prototype[t]=function(e){return a.on(this.node,t,e),this}})),a.listeners=[],a.handlerMap=[],a.listenerId=0,a.on=function(t,e,i,s,r){var n=i.bind(s||t.instance||t),o=(a.handlerMap.indexOf(t)+1||a.handlerMap.push(t))-1,l=e.split(".")[0],h=e.split(".")[1]||"*";a.listeners[o]=a.listeners[o]||{},a.listeners[o][l]=a.listeners[o][l]||{},a.listeners[o][l][h]=a.listeners[o][l][h]||{},i._svgjsListenerId||(i._svgjsListenerId=++a.listenerId),a.listeners[o][l][h][i._svgjsListenerId]=n,t.addEventListener(l,n,r||!1)},a.off=function(t,e,i){var s=a.handlerMap.indexOf(t),r=e&&e.split(".")[0],n=e&&e.split(".")[1],o="";if(-1!=s)if(i){if("function"==typeof i&&(i=i._svgjsListenerId),!i)return;a.listeners[s][r]&&a.listeners[s][r][n||"*"]&&(t.removeEventListener(r,a.listeners[s][r][n||"*"][i],!1),delete a.listeners[s][r][n||"*"][i])}else if(n&&r){if(a.listeners[s][r]&&a.listeners[s][r][n]){for(var l in a.listeners[s][r][n])a.off(t,[r,n].join("."),l);delete a.listeners[s][r][n]}}else if(n)for(var h in a.listeners[s])for(var o in a.listeners[s][h])n===o&&a.off(t,[h,n].join("."));else if(r){if(a.listeners[s][r]){for(var o in a.listeners[s][r])a.off(t,[r,o].join("."));delete a.listeners[s][r]}}else{for(var h in a.listeners[s])a.off(t,h);delete a.listeners[s],delete a.handlerMap[s]}},a.extend(a.Element,{on:function(t,e,i,s){return a.on(this.node,t,e,i,s),this},off:function(t,e){return a.off(this.node,t,e),this},fire:function(t,i){return t instanceof e.Event?this.node.dispatchEvent(t):this.node.dispatchEvent(t=new a.CustomEvent(t,{detail:i,cancelable:!0})),this._event=t,this},event:function(){return this._event}}),a.Defs=a.invent({create:"defs",inherit:a.Container}),a.G=a.invent({create:"g",inherit:a.Container,extend:{x:function(t){return null==t?this.transform("x"):this.transform({x:t-this.x()},!0)}},construct:{group:function(){return this.put(new a.G)}}}),a.Doc=a.invent({create:function(t){t&&("svg"==(t="string"==typeof t?i.getElementById(t):t).nodeName?this.constructor.call(this,t):(this.constructor.call(this,a.create("svg")),t.appendChild(this.node),this.size("100%","100%")),this.namespace().defs())},inherit:a.Container,extend:{namespace:function(){return this.attr({xmlns:a.ns,version:"1.1"}).attr("xmlns:xlink",a.xlink,a.xmlns).attr("xmlns:svgjs",a.svgjs,a.xmlns)},defs:function(){var t;return this._defs||((t=this.node.getElementsByTagName("defs")[0])?this._defs=a.adopt(t):this._defs=new a.Defs,this.node.appendChild(this._defs.node)),this._defs},parent:function(){return this.node.parentNode&&"#document"!=this.node.parentNode.nodeName?this.node.parentNode:null},remove:function(){return this.parent()&&this.parent().removeChild(this.node),this},clear:function(){for(;this.node.hasChildNodes();)this.node.removeChild(this.node.lastChild);return delete this._defs,a.parser.draw&&!a.parser.draw.parentNode&&this.node.appendChild(a.parser.draw),this},clone:function(t){this.writeDataToDom();var e=this.node,i=x(e.cloneNode(!0));return t?(t.node||t).appendChild(i.node):e.parentNode.insertBefore(i.node,e.nextSibling),i}}}),a.extend(a.Element,{}),a.Gradient=a.invent({create:function(t){this.constructor.call(this,a.create(t+"Gradient")),this.type=t},inherit:a.Container,extend:{at:function(t,e,i){return this.put(new a.Stop).update(t,e,i)},update:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this},fill:function(){return"url(#"+this.id()+")"},toString:function(){return this.fill()},attr:function(t,e,i){return"transform"==t&&(t="gradientTransform"),a.Container.prototype.attr.call(this,t,e,i)}},construct:{gradient:function(t,e){return this.defs().gradient(t,e)}}}),a.extend(a.Gradient,a.FX,{from:function(t,e){return"radial"==(this._target||this).type?this.attr({fx:new a.Number(t),fy:new a.Number(e)}):this.attr({x1:new a.Number(t),y1:new a.Number(e)})},to:function(t,e){return"radial"==(this._target||this).type?this.attr({cx:new a.Number(t),cy:new a.Number(e)}):this.attr({x2:new a.Number(t),y2:new a.Number(e)})}}),a.extend(a.Defs,{gradient:function(t,e){return this.put(new a.Gradient(t)).update(e)}}),a.Stop=a.invent({create:"stop",inherit:a.Element,extend:{update:function(t){return("number"==typeof t||t instanceof a.Number)&&(t={offset:arguments[0],color:arguments[1],opacity:arguments[2]}),null!=t.opacity&&this.attr("stop-opacity",t.opacity),null!=t.color&&this.attr("stop-color",t.color),null!=t.offset&&this.attr("offset",new a.Number(t.offset)),this}}}),a.Pattern=a.invent({create:"pattern",inherit:a.Container,extend:{fill:function(){return"url(#"+this.id()+")"},update:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this},toString:function(){return this.fill()},attr:function(t,e,i){return"transform"==t&&(t="patternTransform"),a.Container.prototype.attr.call(this,t,e,i)}},construct:{pattern:function(t,e,i){return this.defs().pattern(t,e,i)}}}),a.extend(a.Defs,{pattern:function(t,e,i){return this.put(new a.Pattern).update(i).attr({x:0,y:0,width:t,height:e,patternUnits:"userSpaceOnUse"})}}),a.Shape=a.invent({create:function(t){this.constructor.call(this,t)},inherit:a.Element}),a.Symbol=a.invent({create:"symbol",inherit:a.Container,construct:{symbol:function(){return this.put(new a.Symbol)}}}),a.Use=a.invent({create:"use",inherit:a.Shape,extend:{element:function(t,e){return this.attr("href",(e||"")+"#"+t,a.xlink)}},construct:{use:function(t,e){return this.put(new a.Use).element(t,e)}}}),a.Rect=a.invent({create:"rect",inherit:a.Shape,construct:{rect:function(t,e){return this.put(new a.Rect).size(t,e)}}}),a.Circle=a.invent({create:"circle",inherit:a.Shape,construct:{circle:function(t){return this.put(new a.Circle).rx(new a.Number(t).divide(2)).move(0,0)}}}),a.extend(a.Circle,a.FX,{rx:function(t){return this.attr("r",t)},ry:function(t){return this.rx(t)}}),a.Ellipse=a.invent({create:"ellipse",inherit:a.Shape,construct:{ellipse:function(t,e){return this.put(new a.Ellipse).size(t,e).move(0,0)}}}),a.extend(a.Ellipse,a.Rect,a.FX,{rx:function(t){return this.attr("rx",t)},ry:function(t){return this.attr("ry",t)}}),a.extend(a.Circle,a.Ellipse,{x:function(t){return null==t?this.cx()-this.rx():this.cx(t+this.rx())},y:function(t){return null==t?this.cy()-this.ry():this.cy(t+this.ry())},cx:function(t){return null==t?this.attr("cx"):this.attr("cx",t)},cy:function(t){return null==t?this.attr("cy"):this.attr("cy",t)},width:function(t){return null==t?2*this.rx():this.rx(new a.Number(t).divide(2))},height:function(t){return null==t?2*this.ry():this.ry(new a.Number(t).divide(2))},size:function(t,e){var i=u(this,t,e);return this.rx(new a.Number(i.width).divide(2)).ry(new a.Number(i.height).divide(2))}}),a.Line=a.invent({create:"line",inherit:a.Shape,extend:{array:function(){return new a.PointArray([[this.attr("x1"),this.attr("y1")],[this.attr("x2"),this.attr("y2")]])},plot:function(t,e,i,s){return null==t?this.array():(t=void 0!==e?{x1:t,y1:e,x2:i,y2:s}:new a.PointArray(t).toLine(),this.attr(t))},move:function(t,e){return this.attr(this.array().move(t,e).toLine())},size:function(t,e){var i=u(this,t,e);return this.attr(this.array().size(i.width,i.height).toLine())}},construct:{line:function(t,e,i,s){return a.Line.prototype.plot.apply(this.put(new a.Line),null!=t?[t,e,i,s]:[0,0,0,0])}}}),a.Polyline=a.invent({create:"polyline",inherit:a.Shape,construct:{polyline:function(t){return this.put(new a.Polyline).plot(t||new a.PointArray)}}}),a.Polygon=a.invent({create:"polygon",inherit:a.Shape,construct:{polygon:function(t){return this.put(new a.Polygon).plot(t||new a.PointArray)}}}),a.extend(a.Polyline,a.Polygon,{array:function(){return this._array||(this._array=new a.PointArray(this.attr("points")))},plot:function(t){return null==t?this.array():this.clear().attr("points","string"==typeof t?t:this._array=new a.PointArray(t))},clear:function(){return delete this._array,this},move:function(t,e){return this.attr("points",this.array().move(t,e))},size:function(t,e){var i=u(this,t,e);return this.attr("points",this.array().size(i.width,i.height))}}),a.extend(a.Line,a.Polyline,a.Polygon,{morphArray:a.PointArray,x:function(t){return null==t?this.bbox().x:this.move(t,this.bbox().y)},y:function(t){return null==t?this.bbox().y:this.move(this.bbox().x,t)},width:function(t){var e=this.bbox();return null==t?e.width:this.size(t,e.height)},height:function(t){var e=this.bbox();return null==t?e.height:this.size(e.width,t)}}),a.Path=a.invent({create:"path",inherit:a.Shape,extend:{morphArray:a.PathArray,array:function(){return this._array||(this._array=new a.PathArray(this.attr("d")))},plot:function(t){return null==t?this.array():this.clear().attr("d","string"==typeof t?t:this._array=new a.PathArray(t))},clear:function(){return delete this._array,this}},construct:{path:function(t){return this.put(new a.Path).plot(t||new a.PathArray)}}}),a.Image=a.invent({create:"image",inherit:a.Shape,extend:{load:function(t){if(!t)return this;var i=this,s=new e.Image;return a.on(s,"load",(function(){a.off(s);var e=i.parent(a.Pattern);null!==e&&(0==i.width()&&0==i.height()&&i.size(s.width,s.height),e&&0==e.width()&&0==e.height()&&e.size(i.width(),i.height()),"function"==typeof i._loaded&&i._loaded.call(i,{width:s.width,height:s.height,ratio:s.width/s.height,url:t}))})),a.on(s,"error",(function(t){a.off(s),"function"==typeof i._error&&i._error.call(i,t)})),this.attr("href",s.src=this.src=t,a.xlink)},loaded:function(t){return this._loaded=t,this},error:function(t){return this._error=t,this}},construct:{image:function(t,e,i){return this.put(new a.Image).load(t).size(e||0,i||e||0)}}}),a.Text=a.invent({create:function(){this.constructor.call(this,a.create("text")),this.dom.leading=new a.Number(1.3),this._rebuild=!0,this._build=!1,this.attr("font-family",a.defaults.attrs["font-family"])},inherit:a.Shape,extend:{x:function(t){return null==t?this.attr("x"):this.attr("x",t)},text:function(t){if(void 0===t){t="";for(var e=this.node.childNodes,i=0,s=e.length;i<s;++i)0!=i&&3!=e[i].nodeType&&1==a.adopt(e[i]).dom.newLined&&(t+="\n"),t+=e[i].textContent;return t}if(this.clear().build(!0),"function"==typeof t)t.call(this,this);else{i=0;for(var r=(t=t.split("\n")).length;i<r;i++)this.tspan(t[i]).newLine()}return this.build(!1).rebuild()},size:function(t){return this.attr("font-size",t).rebuild()},leading:function(t){return null==t?this.dom.leading:(this.dom.leading=new a.Number(t),this.rebuild())},lines:function(){var t=(this.textPath&&this.textPath()||this).node,e=a.utils.map(a.utils.filterSVGElements(t.childNodes),(function(t){return a.adopt(t)}));return new a.Set(e)},rebuild:function(t){if("boolean"==typeof t&&(this._rebuild=t),this._rebuild){var e=this,i=0,s=this.dom.leading*new a.Number(this.attr("font-size"));this.lines().each((function(){this.dom.newLined&&(e.textPath()||this.attr("x",e.attr("x")),"\n"==this.text()?i+=s:(this.attr("dy",s+i),i=0))})),this.fire("rebuild")}return this},build:function(t){return this._build=!!t,this},setData:function(t){return this.dom=t,this.dom.leading=new a.Number(t.leading||1.3),this}},construct:{text:function(t){return this.put(new a.Text).text(t)},plain:function(t){return this.put(new a.Text).plain(t)}}}),a.Tspan=a.invent({create:"tspan",inherit:a.Shape,extend:{text:function(t){return null==t?this.node.textContent+(this.dom.newLined?"\n":""):("function"==typeof t?t.call(this,this):this.plain(t),this)},dx:function(t){return this.attr("dx",t)},dy:function(t){return this.attr("dy",t)},newLine:function(){var t=this.parent(a.Text);return this.dom.newLined=!0,this.dy(t.dom.leading*t.attr("font-size")).attr("x",t.x())}}}),a.extend(a.Text,a.Tspan,{plain:function(t){return!1===this._build&&this.clear(),this.node.appendChild(i.createTextNode(t)),this},tspan:function(t){var e=(this.textPath&&this.textPath()||this).node,i=new a.Tspan;return!1===this._build&&this.clear(),e.appendChild(i.node),i.text(t)},clear:function(){for(var t=(this.textPath&&this.textPath()||this).node;t.hasChildNodes();)t.removeChild(t.lastChild);return this},length:function(){return this.node.getComputedTextLength()}}),a.TextPath=a.invent({create:"textPath",inherit:a.Parent,parent:a.Text,construct:{morphArray:a.PathArray,array:function(){var t=this.track();return t?t.array():null},plot:function(t){var e=this.track(),i=null;return e&&(i=e.plot(t)),null==t?i:this},track:function(){var t=this.textPath();if(t)return t.reference("href")},textPath:function(){if(this.node.firstChild&&"textPath"==this.node.firstChild.nodeName)return a.adopt(this.node.firstChild)}}}),a.Nested=a.invent({create:function(){this.constructor.call(this,a.create("svg")),this.style("overflow","visible")},inherit:a.Container,construct:{nested:function(){return this.put(new a.Nested)}}});var l={stroke:["color","width","opacity","linecap","linejoin","miterlimit","dasharray","dashoffset"],fill:["color","opacity","rule"],prefix:function(t,e){return"color"==e?t:t+"-"+e}};function h(t,e,i,s){return i+s.replace(a.regex.dots," .")}function c(t){return t.toLowerCase().replace(/-(.)/g,(function(t,e){return e.toUpperCase()}))}function d(t){return t.charAt(0).toUpperCase()+t.slice(1)}function g(t){var e=t.toString(16);return 1==e.length?"0"+e:e}function u(t,e,i){if(null==e||null==i){var a=t.bbox();null==e?e=a.width/a.height*i:null==i&&(i=a.height/a.width*e)}return{width:e,height:i}}function f(t,e,i){return{x:e*t.a+i*t.c+0,y:e*t.b+i*t.d+0}}function p(t){return{a:t[0],b:t[1],c:t[2],d:t[3],e:t[4],f:t[5]}}function x(t){for(var i=t.childNodes.length-1;i>=0;i--)t.childNodes[i]instanceof e.SVGElement&&x(t.childNodes[i]);return a.adopt(t).id(a.eid(t.nodeName))}function b(t){return null==t.x&&(t.x=0,t.y=0,t.width=0,t.height=0),t.w=t.width,t.h=t.height,t.x2=t.x+t.width,t.y2=t.y+t.height,t.cx=t.x+t.width/2,t.cy=t.y+t.height/2,t}function m(t){return Math.abs(t)>1e-37?t:0}["fill","stroke"].forEach((function(t){var e={};e[t]=function(e){if(void 0===e)return this;if("string"==typeof e||a.Color.isRgb(e)||e&&"function"==typeof e.fill)this.attr(t,e);else for(var i=l[t].length-1;i>=0;i--)null!=e[l[t][i]]&&this.attr(l.prefix(t,l[t][i]),e[l[t][i]]);return this},a.extend(a.Element,a.FX,e)})),a.extend(a.Element,a.FX,{translate:function(t,e){return this.transform({x:t,y:e})},matrix:function(t){return this.attr("transform",new a.Matrix(6==arguments.length?[].slice.call(arguments):t))},opacity:function(t){return this.attr("opacity",t)},dx:function(t){return this.x(new a.Number(t).plus(this instanceof a.FX?0:this.x()),!0)},dy:function(t){return this.y(new a.Number(t).plus(this instanceof a.FX?0:this.y()),!0)}}),a.extend(a.Path,{length:function(){return this.node.getTotalLength()},pointAt:function(t){return this.node.getPointAtLength(t)}}),a.Set=a.invent({create:function(t){Array.isArray(t)?this.members=t:this.clear()},extend:{add:function(){for(var t=[].slice.call(arguments),e=0,i=t.length;e<i;e++)this.members.push(t[e]);return this},remove:function(t){var e=this.index(t);return e>-1&&this.members.splice(e,1),this},each:function(t){for(var e=0,i=this.members.length;e<i;e++)t.apply(this.members[e],[e,this.members]);return this},clear:function(){return this.members=[],this},length:function(){return this.members.length},has:function(t){return this.index(t)>=0},index:function(t){return this.members.indexOf(t)},get:function(t){return this.members[t]},first:function(){return this.get(0)},last:function(){return this.get(this.members.length-1)},valueOf:function(){return this.members}},construct:{set:function(t){return new a.Set(t)}}}),a.FX.Set=a.invent({create:function(t){this.set=t}}),a.Set.inherit=function(){var t=[];for(var e in a.Shape.prototype)"function"==typeof a.Shape.prototype[e]&&"function"!=typeof a.Set.prototype[e]&&t.push(e);for(var e in t.forEach((function(t){a.Set.prototype[t]=function(){for(var e=0,i=this.members.length;e<i;e++)this.members[e]&&"function"==typeof this.members[e][t]&&this.members[e][t].apply(this.members[e],arguments);return"animate"==t?this.fx||(this.fx=new a.FX.Set(this)):this}})),t=[],a.FX.prototype)"function"==typeof a.FX.prototype[e]&&"function"!=typeof a.FX.Set.prototype[e]&&t.push(e);t.forEach((function(t){a.FX.Set.prototype[t]=function(){for(var e=0,i=this.set.members.length;e<i;e++)this.set.members[e].fx[t].apply(this.set.members[e].fx,arguments);return this}}))},a.extend(a.Element,{}),a.extend(a.Element,{remember:function(e,i){if("object"===t(arguments[0]))for(var a in e)this.remember(a,e[a]);else{if(1==arguments.length)return this.memory()[e];this.memory()[e]=i}return this},forget:function(){if(0==arguments.length)this._memory={};else for(var t=arguments.length-1;t>=0;t--)delete this.memory()[arguments[t]];return this},memory:function(){return this._memory||(this._memory={})}}),a.get=function(t){var e=i.getElementById(function(t){var e=(t||"").toString().match(a.regex.reference);if(e)return e[1]}(t)||t);return a.adopt(e)},a.select=function(t,e){return new a.Set(a.utils.map((e||i).querySelectorAll(t),(function(t){return a.adopt(t)})))},a.extend(a.Parent,{select:function(t){return a.select(t,this.node)}});var v="abcdef".split("");if("function"!=typeof e.CustomEvent){var y=function(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var a=i.createEvent("CustomEvent");return a.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),a};y.prototype=e.Event.prototype,a.CustomEvent=y}else a.CustomEvent=e.CustomEvent;return a},"function"==typeof define&&define.amd?define((function(){return k(w,w.document)})):"object"===("undefined"==typeof exports?"undefined":t(exports))&&"undefined"!=typeof module?module.exports=w.document?k(w,w.document):function(t){return k(t,t.document)}:w.SVG=k(w,w.document),
 /*! svg.filter.js - v2.0.2 - 2016-02-24
   * https://github.com/wout/svg.filter.js
   * Copyright (c) 2016 Wout Fierens; Licensed MIT */
@@ -11,4 +11,4 @@ function(){SVG.Filter=SVG.invent({create:"filter",inherit:SVG.Parent,extend:{sou
 /*! svg.draggable.js - v2.2.2 - 2019-01-08
   * https://github.com/svgdotjs/svg.draggable.js
   * Copyright (c) 2019 Wout Fierens; Licensed MIT */
-function(){function t(t){t.remember("_draggable",this),this.el=t}t.prototype.init=function(t,e){var i=this;this.constraint=t,this.value=e,this.el.on("mousedown.drag",(function(t){i.start(t)})),this.el.on("touchstart.drag",(function(t){i.start(t)}))},t.prototype.transformPoint=function(t,e){var i=(t=t||window.event).changedTouches&&t.changedTouches[0]||t;return this.p.x=i.clientX-(e||0),this.p.y=i.clientY,this.p.matrixTransform(this.m)},t.prototype.getBBox=function(){var t=this.el.bbox();return this.el instanceof SVG.Nested&&(t=this.el.rbox()),(this.el instanceof SVG.G||this.el instanceof SVG.Use||this.el instanceof SVG.Nested)&&(t.x=this.el.x(),t.y=this.el.y()),t},t.prototype.start=function(t){if("click"!=t.type&&"mousedown"!=t.type&&"mousemove"!=t.type||1==(t.which||t.buttons)){var e=this;if(this.el.fire("beforedrag",{event:t,handler:this}),!this.el.event().defaultPrevented){t.preventDefault(),t.stopPropagation(),this.parent=this.parent||this.el.parent(SVG.Nested)||this.el.parent(SVG.Doc),this.p=this.parent.node.createSVGPoint(),this.m=this.el.node.getScreenCTM().inverse();var i,a=this.getBBox();if(this.el instanceof SVG.Text)switch(i=this.el.node.getComputedTextLength(),this.el.attr("text-anchor")){case"middle":i/=2;break;case"start":i=0}this.startPoints={point:this.transformPoint(t,i),box:a,transform:this.el.transform()},SVG.on(window,"mousemove.drag",(function(t){e.drag(t)})),SVG.on(window,"touchmove.drag",(function(t){e.drag(t)})),SVG.on(window,"mouseup.drag",(function(t){e.end(t)})),SVG.on(window,"touchend.drag",(function(t){e.end(t)})),this.el.fire("dragstart",{event:t,p:this.startPoints.point,m:this.m,handler:this})}}},t.prototype.drag=function(t){var e=this.getBBox(),i=this.transformPoint(t),a=this.startPoints.box.x+i.x-this.startPoints.point.x,s=this.startPoints.box.y+i.y-this.startPoints.point.y,r=this.constraint,n=i.x-this.startPoints.point.x,o=i.y-this.startPoints.point.y;if(this.el.fire("dragmove",{event:t,p:i,m:this.m,handler:this}),this.el.event().defaultPrevented)return i;if("function"==typeof r){var l=r.call(this.el,a,s,this.m);"boolean"==typeof l&&(l={x:l,y:l}),!0===l.x?this.el.x(a):!1!==l.x&&this.el.x(l.x),!0===l.y?this.el.y(s):!1!==l.y&&this.el.y(l.y)}else"object"==typeof r&&(null!=r.minX&&a<r.minX?n=(a=r.minX)-this.startPoints.box.x:null!=r.maxX&&a>r.maxX-e.width&&(n=(a=r.maxX-e.width)-this.startPoints.box.x),null!=r.minY&&s<r.minY?o=(s=r.minY)-this.startPoints.box.y:null!=r.maxY&&s>r.maxY-e.height&&(o=(s=r.maxY-e.height)-this.startPoints.box.y),null!=r.snapToGrid&&(a-=a%r.snapToGrid,s-=s%r.snapToGrid,n-=n%r.snapToGrid,o-=o%r.snapToGrid),this.el instanceof SVG.G?this.el.matrix(this.startPoints.transform).transform({x:n,y:o},!0):this.el.move(a,s));return i},t.prototype.end=function(t){var e=this.drag(t);this.el.fire("dragend",{event:t,p:e,m:this.m,handler:this}),SVG.off(window,"mousemove.drag"),SVG.off(window,"touchmove.drag"),SVG.off(window,"mouseup.drag"),SVG.off(window,"touchend.drag")},SVG.extend(SVG.Element,{draggable:function(e,i){"function"!=typeof e&&"object"!=typeof e||(i=e,e=!0);var a=this.remember("_draggable")||new t(this);return(e=void 0===e||e)?a.init(i||{},e):(this.off("mousedown.drag"),this.off("touchstart.drag")),this}})}.call(void 0),function(){function t(t){this.el=t,t.remember("_selectHandler",this),this.pointSelection={isSelected:!1},this.rectSelection={isSelected:!1},this.pointsList={lt:[0,0],rt:["width",0],rb:["width","height"],lb:[0,"height"],t:["width",0],r:["width","height"],b:["width","height"],l:[0,"height"]},this.pointCoord=function(t,e,i){var a="string"!=typeof t?t:e[t];return i?a/2:a},this.pointCoords=function(t,e){var i=this.pointsList[t];return{x:this.pointCoord(i[0],e,"t"===t||"b"===t),y:this.pointCoord(i[1],e,"r"===t||"l"===t)}}}t.prototype.init=function(t,e){var i=this.el.bbox();this.options={};var a=this.el.selectize.defaults.points;for(var s in this.el.selectize.defaults)this.options[s]=this.el.selectize.defaults[s],void 0!==e[s]&&(this.options[s]=e[s]);var r=["points","pointsExclude"];for(var s in r){var n=this.options[r[s]];"string"==typeof n?n=n.length>0?n.split(/\s*,\s*/i):[]:"boolean"==typeof n&&"points"===r[s]&&(n=n?a:[]),this.options[r[s]]=n}this.options.points=[a,this.options.points].reduce((function(t,e){return t.filter((function(t){return e.indexOf(t)>-1}))})),this.options.points=[this.options.points,this.options.pointsExclude].reduce((function(t,e){return t.filter((function(t){return e.indexOf(t)<0}))})),this.parent=this.el.parent(),this.nested=this.nested||this.parent.group(),this.nested.matrix(new SVG.Matrix(this.el).translate(i.x,i.y)),this.options.deepSelect&&-1!==["line","polyline","polygon"].indexOf(this.el.type)?this.selectPoints(t):this.selectRect(t),this.observe(),this.cleanup()},t.prototype.selectPoints=function(t){return this.pointSelection.isSelected=t,this.pointSelection.set?this:(this.pointSelection.set=this.parent.set(),this.drawPoints(),this)},t.prototype.getPointArray=function(){var t=this.el.bbox();return this.el.array().valueOf().map((function(e){return[e[0]-t.x,e[1]-t.y]}))},t.prototype.drawPoints=function(){for(var t=this,e=this.getPointArray(),i=0,a=e.length;i<a;++i){var s=function(e){return function(i){(i=i||window.event).preventDefault?i.preventDefault():i.returnValue=!1,i.stopPropagation();var a=i.pageX||i.touches[0].pageX,s=i.pageY||i.touches[0].pageY;t.el.fire("point",{x:a,y:s,i:e,event:i})}}(i),r=this.drawPoint(e[i][0],e[i][1]).addClass(this.options.classPoints).addClass(this.options.classPoints+"_point").on("touchstart",s).on("mousedown",s);this.pointSelection.set.add(r)}},t.prototype.drawPoint=function(t,e){var i=this.options.pointType;switch(i){case"circle":return this.drawCircle(t,e);case"rect":return this.drawRect(t,e);default:if("function"==typeof i)return i.call(this,t,e);throw new Error("Unknown "+i+" point type!")}},t.prototype.drawCircle=function(t,e){return this.nested.circle(this.options.pointSize).center(t,e)},t.prototype.drawRect=function(t,e){return this.nested.rect(this.options.pointSize,this.options.pointSize).center(t,e)},t.prototype.updatePointSelection=function(){var t=this.getPointArray();this.pointSelection.set.each((function(e){this.cx()===t[e][0]&&this.cy()===t[e][1]||this.center(t[e][0],t[e][1])}))},t.prototype.updateRectSelection=function(){var t=this,e=this.el.bbox();if(this.rectSelection.set.get(0).attr({width:e.width,height:e.height}),this.options.points.length&&this.options.points.map((function(i,a){var s=t.pointCoords(i,e);t.rectSelection.set.get(a+1).center(s.x,s.y)})),this.options.rotationPoint){var i=this.rectSelection.set.length();this.rectSelection.set.get(i-1).center(e.width/2,20)}},t.prototype.selectRect=function(t){var e=this,i=this.el.bbox();function a(t){return function(i){(i=i||window.event).preventDefault?i.preventDefault():i.returnValue=!1,i.stopPropagation();var a=i.pageX||i.touches[0].pageX,s=i.pageY||i.touches[0].pageY;e.el.fire(t,{x:a,y:s,event:i})}}if(this.rectSelection.isSelected=t,this.rectSelection.set=this.rectSelection.set||this.parent.set(),this.rectSelection.set.get(0)||this.rectSelection.set.add(this.nested.rect(i.width,i.height).addClass(this.options.classRect)),this.options.points.length&&this.rectSelection.set.length()<2){this.options.points.map((function(t,s){var r=e.pointCoords(t,i),n=e.drawPoint(r.x,r.y).attr("class",e.options.classPoints+"_"+t).on("mousedown",a(t)).on("touchstart",a(t));e.rectSelection.set.add(n)})),this.rectSelection.set.each((function(){this.addClass(e.options.classPoints)}))}if(this.options.rotationPoint&&(this.options.points&&!this.rectSelection.set.get(9)||!this.options.points&&!this.rectSelection.set.get(1))){var s=function(t){(t=t||window.event).preventDefault?t.preventDefault():t.returnValue=!1,t.stopPropagation();var i=t.pageX||t.touches[0].pageX,a=t.pageY||t.touches[0].pageY;e.el.fire("rot",{x:i,y:a,event:t})},r=this.drawPoint(i.width/2,20).attr("class",this.options.classPoints+"_rot").on("touchstart",s).on("mousedown",s);this.rectSelection.set.add(r)}},t.prototype.handler=function(){var t=this.el.bbox();this.nested.matrix(new SVG.Matrix(this.el).translate(t.x,t.y)),this.rectSelection.isSelected&&this.updateRectSelection(),this.pointSelection.isSelected&&this.updatePointSelection()},t.prototype.observe=function(){var t=this;if(MutationObserver)if(this.rectSelection.isSelected||this.pointSelection.isSelected)this.observerInst=this.observerInst||new MutationObserver((function(){t.handler()})),this.observerInst.observe(this.el.node,{attributes:!0});else try{this.observerInst.disconnect(),delete this.observerInst}catch(t){}else this.el.off("DOMAttrModified.select"),(this.rectSelection.isSelected||this.pointSelection.isSelected)&&this.el.on("DOMAttrModified.select",(function(){t.handler()}))},t.prototype.cleanup=function(){!this.rectSelection.isSelected&&this.rectSelection.set&&(this.rectSelection.set.each((function(){this.remove()})),this.rectSelection.set.clear(),delete this.rectSelection.set),!this.pointSelection.isSelected&&this.pointSelection.set&&(this.pointSelection.set.each((function(){this.remove()})),this.pointSelection.set.clear(),delete this.pointSelection.set),this.pointSelection.isSelected||this.rectSelection.isSelected||(this.nested.remove(),delete this.nested)},SVG.extend(SVG.Element,{selectize:function(e,i){return"object"==typeof e&&(i=e,e=!0),(this.remember("_selectHandler")||new t(this)).init(void 0===e||e,i||{}),this}}),SVG.Element.prototype.selectize.defaults={points:["lt","rt","rb","lb","t","r","b","l"],pointsExclude:[],classRect:"svg_select_boundingRect",classPoints:"svg_select_points",pointSize:7,rotationPoint:!0,deepSelect:!1,pointType:"circle"}}(),function(){(function(){function t(t){t.remember("_resizeHandler",this),this.el=t,this.parameters={},this.lastUpdateCall=null,this.p=t.doc().node.createSVGPoint()}t.prototype.transformPoint=function(t,e,i){return this.p.x=t-(this.offset.x-window.pageXOffset),this.p.y=e-(this.offset.y-window.pageYOffset),this.p.matrixTransform(i||this.m)},t.prototype._extractPosition=function(t){return{x:null!=t.clientX?t.clientX:t.touches[0].clientX,y:null!=t.clientY?t.clientY:t.touches[0].clientY}},t.prototype.init=function(t){var e=this;if(this.stop(),"stop"!==t){for(var i in this.options={},this.el.resize.defaults)this.options[i]=this.el.resize.defaults[i],void 0!==t[i]&&(this.options[i]=t[i]);this.el.on("lt.resize",(function(t){e.resize(t||window.event)})),this.el.on("rt.resize",(function(t){e.resize(t||window.event)})),this.el.on("rb.resize",(function(t){e.resize(t||window.event)})),this.el.on("lb.resize",(function(t){e.resize(t||window.event)})),this.el.on("t.resize",(function(t){e.resize(t||window.event)})),this.el.on("r.resize",(function(t){e.resize(t||window.event)})),this.el.on("b.resize",(function(t){e.resize(t||window.event)})),this.el.on("l.resize",(function(t){e.resize(t||window.event)})),this.el.on("rot.resize",(function(t){e.resize(t||window.event)})),this.el.on("point.resize",(function(t){e.resize(t||window.event)})),this.update()}},t.prototype.stop=function(){return this.el.off("lt.resize"),this.el.off("rt.resize"),this.el.off("rb.resize"),this.el.off("lb.resize"),this.el.off("t.resize"),this.el.off("r.resize"),this.el.off("b.resize"),this.el.off("l.resize"),this.el.off("rot.resize"),this.el.off("point.resize"),this},t.prototype.resize=function(t){var e=this;this.m=this.el.node.getScreenCTM().inverse(),this.offset={x:window.pageXOffset,y:window.pageYOffset};var i=this._extractPosition(t.detail.event);if(this.parameters={type:this.el.type,p:this.transformPoint(i.x,i.y),x:t.detail.x,y:t.detail.y,box:this.el.bbox(),rotation:this.el.transform().rotation},"text"===this.el.type&&(this.parameters.fontSize=this.el.attr()["font-size"]),void 0!==t.detail.i){var a=this.el.array().valueOf();this.parameters.i=t.detail.i,this.parameters.pointCoords=[a[t.detail.i][0],a[t.detail.i][1]]}switch(t.type){case"lt":this.calc=function(t,e){var i=this.snapToGrid(t,e);if(this.parameters.box.width-i[0]>0&&this.parameters.box.height-i[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x+i[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize-i[0]);i=this.checkAspectRatio(i),this.el.move(this.parameters.box.x+i[0],this.parameters.box.y+i[1]).size(this.parameters.box.width-i[0],this.parameters.box.height-i[1])}};break;case"rt":this.calc=function(t,e){var i=this.snapToGrid(t,e,2);if(this.parameters.box.width+i[0]>0&&this.parameters.box.height-i[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x-i[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize+i[0]);i=this.checkAspectRatio(i,!0),this.el.move(this.parameters.box.x,this.parameters.box.y+i[1]).size(this.parameters.box.width+i[0],this.parameters.box.height-i[1])}};break;case"rb":this.calc=function(t,e){var i=this.snapToGrid(t,e,0);if(this.parameters.box.width+i[0]>0&&this.parameters.box.height+i[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x-i[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize+i[0]);i=this.checkAspectRatio(i),this.el.move(this.parameters.box.x,this.parameters.box.y).size(this.parameters.box.width+i[0],this.parameters.box.height+i[1])}};break;case"lb":this.calc=function(t,e){var i=this.snapToGrid(t,e,1);if(this.parameters.box.width-i[0]>0&&this.parameters.box.height+i[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x+i[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize-i[0]);i=this.checkAspectRatio(i,!0),this.el.move(this.parameters.box.x+i[0],this.parameters.box.y).size(this.parameters.box.width-i[0],this.parameters.box.height+i[1])}};break;case"t":this.calc=function(t,e){var i=this.snapToGrid(t,e,2);if(this.parameters.box.height-i[1]>0){if("text"===this.parameters.type)return;this.el.move(this.parameters.box.x,this.parameters.box.y+i[1]).height(this.parameters.box.height-i[1])}};break;case"r":this.calc=function(t,e){var i=this.snapToGrid(t,e,0);if(this.parameters.box.width+i[0]>0){if("text"===this.parameters.type)return;this.el.move(this.parameters.box.x,this.parameters.box.y).width(this.parameters.box.width+i[0])}};break;case"b":this.calc=function(t,e){var i=this.snapToGrid(t,e,0);if(this.parameters.box.height+i[1]>0){if("text"===this.parameters.type)return;this.el.move(this.parameters.box.x,this.parameters.box.y).height(this.parameters.box.height+i[1])}};break;case"l":this.calc=function(t,e){var i=this.snapToGrid(t,e,1);if(this.parameters.box.width-i[0]>0){if("text"===this.parameters.type)return;this.el.move(this.parameters.box.x+i[0],this.parameters.box.y).width(this.parameters.box.width-i[0])}};break;case"rot":this.calc=function(t,e){var i=t+this.parameters.p.x,a=e+this.parameters.p.y,s=Math.atan2(this.parameters.p.y-this.parameters.box.y-this.parameters.box.height/2,this.parameters.p.x-this.parameters.box.x-this.parameters.box.width/2),r=Math.atan2(a-this.parameters.box.y-this.parameters.box.height/2,i-this.parameters.box.x-this.parameters.box.width/2),n=this.parameters.rotation+180*(r-s)/Math.PI+this.options.snapToAngle/2;this.el.center(this.parameters.box.cx,this.parameters.box.cy).rotate(n-n%this.options.snapToAngle,this.parameters.box.cx,this.parameters.box.cy)};break;case"point":this.calc=function(t,e){var i=this.snapToGrid(t,e,this.parameters.pointCoords[0],this.parameters.pointCoords[1]),a=this.el.array().valueOf();a[this.parameters.i][0]=this.parameters.pointCoords[0]+i[0],a[this.parameters.i][1]=this.parameters.pointCoords[1]+i[1],this.el.plot(a)}}this.el.fire("resizestart",{dx:this.parameters.x,dy:this.parameters.y,event:t}),SVG.on(window,"touchmove.resize",(function(t){e.update(t||window.event)})),SVG.on(window,"touchend.resize",(function(){e.done()})),SVG.on(window,"mousemove.resize",(function(t){e.update(t||window.event)})),SVG.on(window,"mouseup.resize",(function(){e.done()}))},t.prototype.update=function(t){if(t){var e=this._extractPosition(t),i=this.transformPoint(e.x,e.y),a=i.x-this.parameters.p.x,s=i.y-this.parameters.p.y;this.lastUpdateCall=[a,s],this.calc(a,s),this.el.fire("resizing",{dx:a,dy:s,event:t})}else this.lastUpdateCall&&this.calc(this.lastUpdateCall[0],this.lastUpdateCall[1])},t.prototype.done=function(){this.lastUpdateCall=null,SVG.off(window,"mousemove.resize"),SVG.off(window,"mouseup.resize"),SVG.off(window,"touchmove.resize"),SVG.off(window,"touchend.resize"),this.el.fire("resizedone")},t.prototype.snapToGrid=function(t,e,i,a){var s;return void 0!==a?s=[(i+t)%this.options.snapToGrid,(a+e)%this.options.snapToGrid]:(i=null==i?3:i,s=[(this.parameters.box.x+t+(1&i?0:this.parameters.box.width))%this.options.snapToGrid,(this.parameters.box.y+e+(2&i?0:this.parameters.box.height))%this.options.snapToGrid]),t<0&&(s[0]-=this.options.snapToGrid),e<0&&(s[1]-=this.options.snapToGrid),t-=Math.abs(s[0])<this.options.snapToGrid/2?s[0]:s[0]-(t<0?-this.options.snapToGrid:this.options.snapToGrid),e-=Math.abs(s[1])<this.options.snapToGrid/2?s[1]:s[1]-(e<0?-this.options.snapToGrid:this.options.snapToGrid),this.constraintToBox(t,e,i,a)},t.prototype.constraintToBox=function(t,e,i,a){var s,r,n=this.options.constraint||{};return void 0!==a?(s=i,r=a):(s=this.parameters.box.x+(1&i?0:this.parameters.box.width),r=this.parameters.box.y+(2&i?0:this.parameters.box.height)),void 0!==n.minX&&s+t<n.minX&&(t=n.minX-s),void 0!==n.maxX&&s+t>n.maxX&&(t=n.maxX-s),void 0!==n.minY&&r+e<n.minY&&(e=n.minY-r),void 0!==n.maxY&&r+e>n.maxY&&(e=n.maxY-r),[t,e]},t.prototype.checkAspectRatio=function(t,e){if(!this.options.saveAspectRatio)return t;var i=t.slice(),a=this.parameters.box.width/this.parameters.box.height,s=this.parameters.box.width+t[0],r=this.parameters.box.height-t[1],n=s/r;return n<a?(i[1]=s/a-this.parameters.box.height,e&&(i[1]=-i[1])):n>a&&(i[0]=this.parameters.box.width-r*a,e&&(i[0]=-i[0])),i},SVG.extend(SVG.Element,{resize:function(e){return(this.remember("_resizeHandler")||new t(this)).init(e||{}),this}}),SVG.Element.prototype.resize.defaults={snapToAngle:.1,snapToGrid:1,constraint:{},saveAspectRatio:!1}}).call(this)}();!function(t,e){void 0===e&&(e={});var i=e.insertAt;if(t&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===i&&a.firstChild?a.insertBefore(s,a.firstChild):a.appendChild(s),s.styleSheet?s.styleSheet.cssText=t:s.appendChild(document.createTextNode(t))}}('.apexcharts-canvas {\n  position: relative;\n  user-select: none;\n  /* cannot give overflow: hidden as it will crop tooltips which overflow outside chart area */\n}\n\n\n/* scrollbar is not visible by default for legend, hence forcing the visibility */\n.apexcharts-canvas ::-webkit-scrollbar {\n  -webkit-appearance: none;\n  width: 6px;\n}\n\n.apexcharts-canvas ::-webkit-scrollbar-thumb {\n  border-radius: 4px;\n  background-color: rgba(0, 0, 0, .5);\n  box-shadow: 0 0 1px rgba(255, 255, 255, .5);\n  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);\n}\n\n.apexcharts-canvas.apexcharts-theme-dark {\n  background: #343F57;\n}\n\n.apexcharts-inner {\n  position: relative;\n}\n\n.apexcharts-text tspan {\n  font-family: inherit;\n}\n\n.legend-mouseover-inactive {\n  transition: 0.15s ease all;\n  opacity: 0.20;\n}\n\n.apexcharts-series-collapsed {\n  opacity: 0;\n}\n\n.apexcharts-tooltip {\n  border-radius: 5px;\n  box-shadow: 2px 2px 6px -4px #999;\n  cursor: default;\n  font-size: 14px;\n  left: 62px;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  top: 20px;\n  overflow: hidden;\n  white-space: nowrap;\n  z-index: 12;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-tooltip.apexcharts-theme-light {\n  border: 1px solid #e3e3e3;\n  background: rgba(255, 255, 255, 0.96);\n}\n\n.apexcharts-tooltip.apexcharts-theme-dark {\n  color: #fff;\n  background: rgba(30, 30, 30, 0.8);\n}\n\n.apexcharts-tooltip * {\n  font-family: inherit;\n}\n\n.apexcharts-tooltip.apexcharts-active {\n  opacity: 1;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-tooltip-title {\n  padding: 6px;\n  font-size: 15px;\n  margin-bottom: 4px;\n}\n\n.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {\n  background: #ECEFF1;\n  border-bottom: 1px solid #ddd;\n}\n\n.apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {\n  background: rgba(0, 0, 0, 0.7);\n  border-bottom: 1px solid #333;\n}\n\n.apexcharts-tooltip-text-value,\n.apexcharts-tooltip-text-z-value {\n  display: inline-block;\n  font-weight: 600;\n  margin-left: 5px;\n}\n\n.apexcharts-tooltip-text-z-label:empty,\n.apexcharts-tooltip-text-z-value:empty {\n  display: none;\n}\n\n.apexcharts-tooltip-text-value,\n.apexcharts-tooltip-text-z-value {\n  font-weight: 600;\n}\n\n.apexcharts-tooltip-marker {\n  width: 12px;\n  height: 12px;\n  position: relative;\n  top: 0px;\n  margin-right: 10px;\n  border-radius: 50%;\n}\n\n.apexcharts-tooltip-series-group {\n  padding: 0 10px;\n  display: none;\n  text-align: left;\n  justify-content: left;\n  align-items: center;\n}\n\n.apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-marker {\n  opacity: 1;\n}\n\n.apexcharts-tooltip-series-group.apexcharts-active,\n.apexcharts-tooltip-series-group:last-child {\n  padding-bottom: 4px;\n}\n\n.apexcharts-tooltip-series-group-hidden {\n  opacity: 0;\n  height: 0;\n  line-height: 0;\n  padding: 0 !important;\n}\n\n.apexcharts-tooltip-y-group {\n  padding: 6px 0 5px;\n}\n\n.apexcharts-tooltip-candlestick {\n  padding: 4px 8px;\n}\n\n.apexcharts-tooltip-candlestick>div {\n  margin: 4px 0;\n}\n\n.apexcharts-tooltip-candlestick span.value {\n  font-weight: bold;\n}\n\n.apexcharts-tooltip-rangebar {\n  padding: 5px 8px;\n}\n\n.apexcharts-tooltip-rangebar .category {\n  font-weight: 600;\n  color: #777;\n}\n\n.apexcharts-tooltip-rangebar .series-name {\n  font-weight: bold;\n  display: block;\n  margin-bottom: 5px;\n}\n\n.apexcharts-xaxistooltip {\n  opacity: 0;\n  padding: 9px 10px;\n  pointer-events: none;\n  color: #373d3f;\n  font-size: 13px;\n  text-align: center;\n  border-radius: 2px;\n  position: absolute;\n  z-index: 10;\n  background: #ECEFF1;\n  border: 1px solid #90A4AE;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-xaxistooltip.apexcharts-theme-dark {\n  background: rgba(0, 0, 0, 0.7);\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  color: #fff;\n}\n\n.apexcharts-xaxistooltip:after,\n.apexcharts-xaxistooltip:before {\n  left: 50%;\n  border: solid transparent;\n  content: " ";\n  height: 0;\n  width: 0;\n  position: absolute;\n  pointer-events: none;\n}\n\n.apexcharts-xaxistooltip:after {\n  border-color: rgba(236, 239, 241, 0);\n  border-width: 6px;\n  margin-left: -6px;\n}\n\n.apexcharts-xaxistooltip:before {\n  border-color: rgba(144, 164, 174, 0);\n  border-width: 7px;\n  margin-left: -7px;\n}\n\n.apexcharts-xaxistooltip-bottom:after,\n.apexcharts-xaxistooltip-bottom:before {\n  bottom: 100%;\n}\n\n.apexcharts-xaxistooltip-top:after,\n.apexcharts-xaxistooltip-top:before {\n  top: 100%;\n}\n\n.apexcharts-xaxistooltip-bottom:after {\n  border-bottom-color: #ECEFF1;\n}\n\n.apexcharts-xaxistooltip-bottom:before {\n  border-bottom-color: #90A4AE;\n}\n\n.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:after {\n  border-bottom-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:before {\n  border-bottom-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-xaxistooltip-top:after {\n  border-top-color: #ECEFF1\n}\n\n.apexcharts-xaxistooltip-top:before {\n  border-top-color: #90A4AE;\n}\n\n.apexcharts-xaxistooltip-top.apexcharts-theme-dark:after {\n  border-top-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-xaxistooltip-top.apexcharts-theme-dark:before {\n  border-top-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-xaxistooltip.apexcharts-active {\n  opacity: 1;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-yaxistooltip {\n  opacity: 0;\n  padding: 4px 10px;\n  pointer-events: none;\n  color: #373d3f;\n  font-size: 13px;\n  text-align: center;\n  border-radius: 2px;\n  position: absolute;\n  z-index: 10;\n  background: #ECEFF1;\n  border: 1px solid #90A4AE;\n}\n\n.apexcharts-yaxistooltip.apexcharts-theme-dark {\n  background: rgba(0, 0, 0, 0.7);\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  color: #fff;\n}\n\n.apexcharts-yaxistooltip:after,\n.apexcharts-yaxistooltip:before {\n  top: 50%;\n  border: solid transparent;\n  content: " ";\n  height: 0;\n  width: 0;\n  position: absolute;\n  pointer-events: none;\n}\n\n.apexcharts-yaxistooltip:after {\n  border-color: rgba(236, 239, 241, 0);\n  border-width: 6px;\n  margin-top: -6px;\n}\n\n.apexcharts-yaxistooltip:before {\n  border-color: rgba(144, 164, 174, 0);\n  border-width: 7px;\n  margin-top: -7px;\n}\n\n.apexcharts-yaxistooltip-left:after,\n.apexcharts-yaxistooltip-left:before {\n  left: 100%;\n}\n\n.apexcharts-yaxistooltip-right:after,\n.apexcharts-yaxistooltip-right:before {\n  right: 100%;\n}\n\n.apexcharts-yaxistooltip-left:after {\n  border-left-color: #ECEFF1;\n}\n\n.apexcharts-yaxistooltip-left:before {\n  border-left-color: #90A4AE;\n}\n\n.apexcharts-yaxistooltip-left.apexcharts-theme-dark:after {\n  border-left-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-yaxistooltip-left.apexcharts-theme-dark:before {\n  border-left-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-yaxistooltip-right:after {\n  border-right-color: #ECEFF1;\n}\n\n.apexcharts-yaxistooltip-right:before {\n  border-right-color: #90A4AE;\n}\n\n.apexcharts-yaxistooltip-right.apexcharts-theme-dark:after {\n  border-right-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-yaxistooltip-right.apexcharts-theme-dark:before {\n  border-right-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-yaxistooltip.apexcharts-active {\n  opacity: 1;\n}\n\n.apexcharts-yaxistooltip-hidden {\n  display: none;\n}\n\n.apexcharts-xcrosshairs,\n.apexcharts-ycrosshairs {\n  pointer-events: none;\n  opacity: 0;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-xcrosshairs.apexcharts-active,\n.apexcharts-ycrosshairs.apexcharts-active {\n  opacity: 1;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-ycrosshairs-hidden {\n  opacity: 0;\n}\n\n.apexcharts-selection-rect {\n  cursor: move;\n}\n\n.svg_select_boundingRect, .svg_select_points_rot {\n  pointer-events: none;\n  opacity: 0;\n  visibility: hidden;\n}\n.apexcharts-selection-rect + g .svg_select_boundingRect,\n.apexcharts-selection-rect + g .svg_select_points_rot {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.apexcharts-selection-rect + g .svg_select_points_l,\n.apexcharts-selection-rect + g .svg_select_points_r {\n  cursor: ew-resize;\n  opacity: 1;\n  visibility: visible;\n}\n\n.svg_select_points {\n  fill: #efefef;\n  stroke: #333;\n  rx: 2;\n}\n\n.apexcharts-canvas.apexcharts-zoomable .hovering-zoom {\n  cursor: crosshair\n}\n\n.apexcharts-canvas.apexcharts-zoomable .hovering-pan {\n  cursor: move\n}\n\n.apexcharts-zoom-icon,\n.apexcharts-zoomin-icon,\n.apexcharts-zoomout-icon,\n.apexcharts-reset-icon,\n.apexcharts-pan-icon,\n.apexcharts-selection-icon,\n.apexcharts-menu-icon,\n.apexcharts-toolbar-custom-icon {\n  cursor: pointer;\n  width: 20px;\n  height: 20px;\n  line-height: 24px;\n  color: #6E8192;\n  text-align: center;\n}\n\n.apexcharts-zoom-icon svg,\n.apexcharts-zoomin-icon svg,\n.apexcharts-zoomout-icon svg,\n.apexcharts-reset-icon svg,\n.apexcharts-menu-icon svg {\n  fill: #6E8192;\n}\n\n.apexcharts-selection-icon svg {\n  fill: #444;\n  transform: scale(0.76)\n}\n\n.apexcharts-theme-dark .apexcharts-zoom-icon svg,\n.apexcharts-theme-dark .apexcharts-zoomin-icon svg,\n.apexcharts-theme-dark .apexcharts-zoomout-icon svg,\n.apexcharts-theme-dark .apexcharts-reset-icon svg,\n.apexcharts-theme-dark .apexcharts-pan-icon svg,\n.apexcharts-theme-dark .apexcharts-selection-icon svg,\n.apexcharts-theme-dark .apexcharts-menu-icon svg,\n.apexcharts-theme-dark .apexcharts-toolbar-custom-icon svg {\n  fill: #f3f4f5;\n}\n\n.apexcharts-canvas .apexcharts-zoom-icon.apexcharts-selected svg,\n.apexcharts-canvas .apexcharts-selection-icon.apexcharts-selected svg,\n.apexcharts-canvas .apexcharts-reset-zoom-icon.apexcharts-selected svg {\n  fill: #008FFB;\n}\n\n.apexcharts-theme-light .apexcharts-selection-icon:not(.apexcharts-selected):hover svg,\n.apexcharts-theme-light .apexcharts-zoom-icon:not(.apexcharts-selected):hover svg,\n.apexcharts-theme-light .apexcharts-zoomin-icon:hover svg,\n.apexcharts-theme-light .apexcharts-zoomout-icon:hover svg,\n.apexcharts-theme-light .apexcharts-reset-icon:hover svg,\n.apexcharts-theme-light .apexcharts-menu-icon:hover svg {\n  fill: #333;\n}\n\n.apexcharts-selection-icon,\n.apexcharts-menu-icon {\n  position: relative;\n}\n\n.apexcharts-reset-icon {\n  margin-left: 5px;\n}\n\n.apexcharts-zoom-icon,\n.apexcharts-reset-icon,\n.apexcharts-menu-icon {\n  transform: scale(0.85);\n}\n\n.apexcharts-zoomin-icon,\n.apexcharts-zoomout-icon {\n  transform: scale(0.7)\n}\n\n.apexcharts-zoomout-icon {\n  margin-right: 3px;\n}\n\n.apexcharts-pan-icon {\n  transform: scale(0.62);\n  position: relative;\n  left: 1px;\n  top: 0px;\n}\n\n.apexcharts-pan-icon svg {\n  fill: #fff;\n  stroke: #6E8192;\n  stroke-width: 2;\n}\n\n.apexcharts-pan-icon.apexcharts-selected svg {\n  stroke: #008FFB;\n}\n\n.apexcharts-pan-icon:not(.apexcharts-selected):hover svg {\n  stroke: #333;\n}\n\n.apexcharts-toolbar {\n  position: absolute;\n  z-index: 11;\n  max-width: 176px;\n  text-align: right;\n  border-radius: 3px;\n  padding: 0px 6px 2px 6px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.apexcharts-menu {\n  background: #fff;\n  position: absolute;\n  top: 100%;\n  border: 1px solid #ddd;\n  border-radius: 3px;\n  padding: 3px;\n  right: 10px;\n  opacity: 0;\n  min-width: 110px;\n  transition: 0.15s ease all;\n  pointer-events: none;\n}\n\n.apexcharts-menu.apexcharts-menu-open {\n  opacity: 1;\n  pointer-events: all;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-menu-item {\n  padding: 6px 7px;\n  font-size: 12px;\n  cursor: pointer;\n}\n\n.apexcharts-theme-light .apexcharts-menu-item:hover {\n  background: #eee;\n}\n\n.apexcharts-theme-dark .apexcharts-menu {\n  background: rgba(0, 0, 0, 0.7);\n  color: #fff;\n}\n\n@media screen and (min-width: 768px) {\n  .apexcharts-canvas:hover .apexcharts-toolbar {\n    opacity: 1;\n  }\n}\n\n.apexcharts-datalabel.apexcharts-element-hidden {\n  opacity: 0;\n}\n\n.apexcharts-pie-label,\n.apexcharts-datalabels,\n.apexcharts-datalabel,\n.apexcharts-datalabel-label,\n.apexcharts-datalabel-value {\n  cursor: default;\n  pointer-events: none;\n}\n\n.apexcharts-pie-label-delay {\n  opacity: 0;\n  animation-name: opaque;\n  animation-duration: 0.3s;\n  animation-fill-mode: forwards;\n  animation-timing-function: ease;\n}\n\n.apexcharts-canvas .apexcharts-element-hidden {\n  opacity: 0;\n}\n\n.apexcharts-hide .apexcharts-series-points {\n  opacity: 0;\n}\n\n.apexcharts-gridline,\n.apexcharts-annotation-rect,\n.apexcharts-tooltip .apexcharts-marker,\n.apexcharts-area-series .apexcharts-area,\n.apexcharts-line,\n.apexcharts-zoom-rect,\n.apexcharts-toolbar svg,\n.apexcharts-area-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,\n.apexcharts-line-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,\n.apexcharts-radar-series path,\n.apexcharts-radar-series polygon {\n  pointer-events: none;\n}\n\n\n/* markers */\n\n.apexcharts-marker {\n  transition: 0.15s ease all;\n}\n\n@keyframes opaque {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n\n/* Resize generated styles */\n\n@keyframes resizeanim {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n.resize-triggers {\n  animation: 1ms resizeanim;\n  visibility: hidden;\n  opacity: 0;\n}\n\n.resize-triggers,\n.resize-triggers>div,\n.contract-trigger:before {\n  content: " ";\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n.resize-triggers>div {\n  background: #eee;\n  overflow: auto;\n}\n\n.contract-trigger:before {\n  width: 200%;\n  height: 200%;\n}'),function(){function t(t){var e=t.__resizeTriggers__,i=e.firstElementChild,a=e.lastElementChild,s=i?i.firstElementChild:null;a&&(a.scrollLeft=a.scrollWidth,a.scrollTop=a.scrollHeight),s&&(s.style.width=i.offsetWidth+1+"px",s.style.height=i.offsetHeight+1+"px"),i&&(i.scrollLeft=i.scrollWidth,i.scrollTop=i.scrollHeight)}function e(e){var i=this;t(this),this.__resizeRAF__&&r(this.__resizeRAF__),this.__resizeRAF__=s((function(){(function(t){return t.offsetWidth!=t.__resizeLast__.width||t.offsetHeight!=t.__resizeLast__.height})(i)&&(i.__resizeLast__.width=i.offsetWidth,i.__resizeLast__.height=i.offsetHeight,i.__resizeListeners__.forEach((function(t){t.call(e)})))}))}var i,a,s=(i=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(t){return window.setTimeout(t,20)},function(t){return i(t)}),r=(a=window.cancelAnimationFrame||window.mozCancelAnimationFrame||window.webkitCancelAnimationFrame||window.clearTimeout,function(t){return a(t)}),n=!1,o="animationstart",l="Webkit Moz O ms".split(" "),h="webkitAnimationStart animationstart oAnimationStart MSAnimationStart".split(" "),c=document.createElement("fakeelement");if(void 0!==c.style.animationName&&(n=!0),!1===n)for(var d=0;d<l.length;d++)if(void 0!==c.style[l[d]+"AnimationName"]){o=h[d];break}window.addResizeListener=function(i,a){i.__resizeTriggers__||("static"==getComputedStyle(i).position&&(i.style.position="relative"),i.__resizeLast__={},i.__resizeListeners__=[],(i.__resizeTriggers__=document.createElement("div")).className="resize-triggers",i.__resizeTriggers__.innerHTML='<div class="expand-trigger"><div></div></div><div class="contract-trigger"></div>',i.appendChild(i.__resizeTriggers__),t(i),i.addEventListener("scroll",e,!0),o&&i.__resizeTriggers__.addEventListener(o,(function(e){"resizeanim"==e.animationName&&t(i)}))),i.__resizeListeners__.push(a)},window.removeResizeListener=function(t,i){t&&(t.__resizeListeners__.splice(t.__resizeListeners__.indexOf(i),1),t.__resizeListeners__.length||(t.removeEventListener("scroll",e),t.__resizeTriggers__.parentNode&&(t.__resizeTriggers__=!t.removeChild(t.__resizeTriggers__))))}}(),window.Apex={};var zt=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"initModules",value:function(){this.ctx.publicMethods=["updateOptions","updateSeries","appendData","appendSeries","toggleSeries","showSeries","hideSeries","setLocale","resetSeries","toggleDataPointSelection","dataURI","addXaxisAnnotation","addYaxisAnnotation","addPointAnnotation","clearAnnotations","removeAnnotation","paper","destroy"],this.ctx.eventList=["click","mousedown","mousemove","touchstart","touchmove","mouseup","touchend"],this.ctx.animations=new f(this.ctx),this.ctx.axes=new U(this.ctx),this.ctx.core=new Pt(this.ctx.el,this.ctx),this.ctx.config=new P({}),this.ctx.data=new R(this.ctx),this.ctx.grid=new W(this.ctx),this.ctx.graphics=new p(this.ctx),this.ctx.coreUtils=new I(this.ctx),this.ctx.crosshairs=new q(this.ctx),this.ctx.events=new _(this.ctx),this.ctx.exports=new N(this.ctx),this.ctx.localization=new j(this.ctx),this.ctx.options=new A,this.ctx.responsive=new Z(this.ctx),this.ctx.series=new F(this.ctx),this.ctx.theme=new $(this.ctx),this.ctx.formatters=new D(this.ctx),this.ctx.titleSubtitle=new J(this.ctx),this.ctx.legend=new rt(this.ctx),this.ctx.toolbar=new nt(this.ctx),this.ctx.dimensions=new it(this.ctx),this.ctx.updateHelpers=new Tt(this.ctx),this.ctx.zoomPanSelection=new ot(this.ctx),this.ctx.w.globals.tooltip=new ft(this.ctx)}}]),t}(),It=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"clear",value:function(){this.ctx.zoomPanSelection&&this.ctx.zoomPanSelection.destroy(),this.ctx.toolbar&&this.ctx.toolbar.destroy(),this.ctx.animations=null,this.ctx.axes=null,this.ctx.annotations=null,this.ctx.core=null,this.ctx.data=null,this.ctx.grid=null,this.ctx.series=null,this.ctx.responsive=null,this.ctx.theme=null,this.ctx.formatters=null,this.ctx.titleSubtitle=null,this.ctx.legend=null,this.ctx.dimensions=null,this.ctx.options=null,this.ctx.crosshairs=null,this.ctx.zoomPanSelection=null,this.ctx.updateHelpers=null,this.ctx.toolbar=null,this.ctx.localization=null,this.ctx.w.globals.tooltip=null,this.clearDomElements()}},{key:"killSVG",value:function(t){t.each((function(t,e){this.removeClass("*"),this.off(),this.stop()}),!0),t.ungroup(),t.clear()}},{key:"clearDomElements",value:function(){var t=this;this.ctx.eventList.forEach((function(e){document.removeEventListener(e,t.ctx.events.documentEvent)}));var e=this.w.globals.dom;if(null!==this.ctx.el)for(;this.ctx.el.firstChild;)this.ctx.el.removeChild(this.ctx.el.firstChild);this.killSVG(e.Paper),e.Paper.remove(),e.elWrap=null,e.elGraphical=null,e.elAnnotations=null,e.elLegendWrap=null,e.baseEl=null,e.elGridRect=null,e.elGridRectMask=null,e.elGridRectMarkerMask=null,e.elDefs=null}}]),t}();return function(){function t(i,a){e(this,t),this.opts=a,this.ctx=this,this.w=new z(a).init(),this.el=i,this.w.globals.cuid=g.randomId(),this.w.globals.chartID=this.w.config.chart.id?this.w.config.chart.id:this.w.globals.cuid,new zt(this).initModules(),this.create=g.bind(this.create,this),this.windowResizeHandler=this._windowResize.bind(this)}return a(t,[{key:"render",value:function(){var t=this;return new Promise((function(e,i){if(null!==t.el){void 0===Apex._chartInstances&&(Apex._chartInstances=[]),t.w.config.chart.id&&Apex._chartInstances.push({id:t.w.globals.chartID,group:t.w.config.chart.group,chart:t}),t.setLocale(t.w.config.chart.defaultLocale);var a=t.w.config.chart.events.beforeMount;"function"==typeof a&&a(t,t.w),t.events.fireEvent("beforeMount",[t,t.w]),window.addEventListener("resize",t.windowResizeHandler),window.addResizeListener(t.el.parentNode,t._parentResizeCallback.bind(t));var s=t.create(t.w.config.series,{});if(!s)return e(t);t.mount(s).then((function(){"function"==typeof t.w.config.chart.events.mounted&&t.w.config.chart.events.mounted(t,t.w),t.events.fireEvent("mounted",[t,t.w]),e(s)})).catch((function(t){i(t)}))}else i(new Error("Element not found"))}))}},{key:"create",value:function(t,e){var i=this.w;new zt(this).initModules();var a=this.w.globals;(a.noData=!1,a.animationEnded=!1,this.responsive.checkResponsiveConfig(e),i.config.xaxis.convertedCatToNumeric)&&new L(i.config).convertCatToNumericXaxis(i.config,this.ctx);if(null===this.el)return a.animationEnded=!0,null;if(this.core.setupElements(),0===a.svgWidth)return a.animationEnded=!0,null;var s=I.checkComboSeries(t);a.comboCharts=s.comboCharts,a.comboBarCount=s.comboBarCount,(0===t.length||1===t.length&&t[0].data&&0===t[0].data.length)&&this.series.handleNoData(),this.events.setupEventHandlers(),this.data.parseData(t),this.theme.init(),new X(this).setGlobalMarkerSize(),this.formatters.setLabelFormatters(),this.titleSubtitle.draw(),a.noData&&a.collapsedSeries.length!==a.series.length||this.legend.init(),this.series.hasAllSeriesEqualX(),a.axisCharts&&(this.core.coreCalculations(),"category"!==i.config.xaxis.type&&this.formatters.setLabelFormatters()),this.formatters.heatmapLabelFormatters(),this.dimensions.plotCoords();var r=this.core.xySettings();this.grid.createGridMask();var n=this.core.plotChartType(t,r),o=new Y(this);o.bringForward(),i.config.dataLabels.background.enabled&&o.dataLabelsBackground(),this.core.shiftGraphPosition();var l={plot:{left:i.globals.translateX,top:i.globals.translateY,width:i.globals.gridWidth,height:i.globals.gridHeight}};return{elGraph:n,xyRatios:r,elInner:i.globals.dom.elGraphical,dimensions:l}}},{key:"mount",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,i=this,a=i.w;return new Promise((function(s,r){if(null===i.el)return r(new Error("Not enough data to display or target element not found"));(null===e||a.globals.allSeriesCollapsed)&&i.series.handleNoData(),i.axes.drawAxis(a.config.chart.type,e.xyRatios),i.grid=new W(i);var n=i.grid.drawGrid();i.annotations=new S(i),i.annotations.drawShapeAnnos(),i.annotations.drawImageAnnos(),i.annotations.drawTextAnnos(),"back"===a.config.grid.position&&n&&a.globals.dom.elGraphical.add(n.el);var o=new O(t.ctx),l=new G(t.ctx);if(null!==n&&(o.xAxisLabelCorrections(n.xAxisTickWidth),l.setYAxisTextAlignments()),"back"===a.config.annotations.position&&(a.globals.dom.Paper.add(a.globals.dom.elAnnotations),i.annotations.drawAxesAnnotations()),e.elGraph instanceof Array)for(var h=0;h<e.elGraph.length;h++)a.globals.dom.elGraphical.add(e.elGraph[h]);else a.globals.dom.elGraphical.add(e.elGraph);if("front"===a.config.grid.position&&n&&a.globals.dom.elGraphical.add(n.el),"front"===a.config.xaxis.crosshairs.position&&i.crosshairs.drawXCrosshairs(),"front"===a.config.yaxis[0].crosshairs.position&&i.crosshairs.drawYCrosshairs(),"front"===a.config.annotations.position&&(a.globals.dom.Paper.add(a.globals.dom.elAnnotations),i.annotations.drawAxesAnnotations()),!a.globals.noData){if(a.config.tooltip.enabled&&!a.globals.noData&&i.w.globals.tooltip.drawTooltip(e.xyRatios),a.globals.axisCharts&&(a.globals.isXNumeric||a.config.xaxis.convertedCatToNumeric))(a.config.chart.zoom.enabled||a.config.chart.selection&&a.config.chart.selection.enabled||a.config.chart.pan&&a.config.chart.pan.enabled)&&i.zoomPanSelection.init({xyRatios:e.xyRatios});else{var c=a.config.chart.toolbar.tools;["zoom","zoomin","zoomout","selection","pan","reset"].forEach((function(t){c[t]=!1}))}a.config.chart.toolbar.show&&!a.globals.allSeriesCollapsed&&i.toolbar.createToolbar()}a.globals.memory.methodsToExec.length>0&&a.globals.memory.methodsToExec.forEach((function(t){t.method(t.params,!1,t.context)})),a.globals.axisCharts||a.globals.noData||i.core.resizeNonAxisCharts(),s(i)}))}},{key:"destroy",value:function(){window.removeEventListener("resize",this.windowResizeHandler),window.removeResizeListener(this.el.parentNode,this._parentResizeCallback.bind(this));var t=this.w.config.chart.id;t&&Apex._chartInstances.forEach((function(e,i){e.id===t&&Apex._chartInstances.splice(i,1)})),new It(this.ctx).clear()}},{key:"updateOptions",value:function(t){var e=this,i=arguments.length>1&&void 0!==arguments[1]&&arguments[1],a=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],s=!(arguments.length>3&&void 0!==arguments[3])||arguments[3],r=!(arguments.length>4&&void 0!==arguments[4])||arguments[4],n=this.w;return t.series&&(this.series.resetSeries(!1,!0,!1),t.series.length&&t.series[0].data&&(t.series=t.series.map((function(t,i){return e.updateHelpers._extendSeries(t,i)}))),this.updateHelpers.revertDefaultAxisMinMax()),t.xaxis&&(t=this.updateHelpers.forceXAxisUpdate(t)),t.yaxis&&(t=this.updateHelpers.forceYAxisUpdate(t)),n.globals.collapsedSeriesIndices.length>0&&this.series.clearPreviousPaths(),t.theme&&(t=this.theme.updateThemeOptions(t)),this.updateHelpers._updateOptions(t,i,a,s,r)}},{key:"updateSeries",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];return this.series.resetSeries(!1),this.updateHelpers.revertDefaultAxisMinMax(),this.updateHelpers._updateSeries(t,e,i)}},{key:"appendSeries",value:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],a=this.w.config.series.slice();return a.push(t),this.series.resetSeries(!1),this.updateHelpers.revertDefaultAxisMinMax(),this.updateHelpers._updateSeries(a,e,i)}},{key:"appendData",value:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=this;i.w.globals.dataChanged=!0,i.series.getPreviousPaths();for(var a=i.w.config.series.slice(),s=0;s<a.length;s++)if(void 0!==t[s])for(var r=0;r<t[s].data.length;r++)a[s].data.push(t[s].data[r]);return i.w.config.series=a,e&&(i.w.globals.initialSeries=JSON.parse(JSON.stringify(i.w.config.series))),this.update()}},{key:"update",value:function(t){var e=this;return new Promise((function(i,a){new It(e.ctx).clear();var s=e.create(e.w.config.series,t);if(!s)return i(e);e.mount(s).then((function(){"function"==typeof e.w.config.chart.events.updated&&e.w.config.chart.events.updated(e,e.w),e.events.fireEvent("updated",[e,e.w]),e.w.globals.isDirty=!0,i(e)})).catch((function(t){a(t)}))}))}},{key:"getSyncedCharts",value:function(){var t=this.getGroupedCharts(),e=[this];return t.length&&(e=[],t.forEach((function(t){e.push(t)}))),e}},{key:"getGroupedCharts",value:function(){var t=this;return Apex._chartInstances.filter((function(t){if(t.group)return!0})).map((function(e){return t.w.config.chart.group===e.group?e.chart:t}))}},{key:"toggleSeries",value:function(t){return this.series.toggleSeries(t)}},{key:"showSeries",value:function(t){this.series.showSeries(t)}},{key:"hideSeries",value:function(t){this.series.hideSeries(t)}},{key:"resetSeries",value:function(){var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];this.series.resetSeries(t)}},{key:"addEventListener",value:function(t,e){this.events.addEventListener(t,e)}},{key:"removeEventListener",value:function(t,e){this.events.removeEventListener(t,e)}},{key:"addXaxisAnnotation",value:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:void 0,a=this;i&&(a=i),a.annotations.addXaxisAnnotationExternal(t,e,a)}},{key:"addYaxisAnnotation",value:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:void 0,a=this;i&&(a=i),a.annotations.addYaxisAnnotationExternal(t,e,a)}},{key:"addPointAnnotation",value:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:void 0,a=this;i&&(a=i),a.annotations.addPointAnnotationExternal(t,e,a)}},{key:"clearAnnotations",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:void 0,e=this;t&&(e=t),e.annotations.clearAnnotations(e)}},{key:"removeAnnotation",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,i=this;e&&(i=e),i.annotations.removeAnnotation(i,t)}},{key:"getChartArea",value:function(){return this.w.globals.dom.baseEl.querySelector(".apexcharts-inner")}},{key:"getSeriesTotalXRange",value:function(t,e){return this.coreUtils.getSeriesTotalsXRange(t,e)}},{key:"getHighestValueInSeries",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=new V(this.ctx);return e.getMinYMaxY(t).highestY}},{key:"getLowestValueInSeries",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=new V(this.ctx);return e.getMinYMaxY(t).lowestY}},{key:"getSeriesTotal",value:function(){return this.w.globals.seriesTotals}},{key:"toggleDataPointSelection",value:function(t,e){return this.updateHelpers.toggleDataPointSelection(t,e)}},{key:"setLocale",value:function(t){this.localization.setCurrentLocaleValues(t)}},{key:"dataURI",value:function(){return new N(this.ctx).dataURI()}},{key:"paper",value:function(){return this.w.globals.dom.Paper}},{key:"_parentResizeCallback",value:function(){!this.w.globals.noData&&this.w.globals.animationEnded&&this.w.config.chart.redrawOnParentResize&&this._windowResize()}},{key:"_windowResize",value:function(){var t=this;clearTimeout(this.w.globals.resizeTimer),this.w.globals.resizeTimer=window.setTimeout((function(){t.w.globals.resized=!0,t.w.globals.dataChanged=!1,t.ctx.update()}),150)}}],[{key:"getChartByID",value:function(t){var e=Apex._chartInstances.filter((function(e){return e.id===t}))[0];return e&&e.chart}},{key:"initOnLoad",value:function(){for(var e=document.querySelectorAll("[data-apexcharts]"),i=0;i<e.length;i++){new t(e[i],JSON.parse(e[i].getAttribute("data-options"))).render()}}},{key:"exec",value:function(t,e){var i=this.getChartByID(t);if(i){i.w.globals.isExecCalled=!0;var a=null;if(-1!==i.publicMethods.indexOf(e)){for(var s=arguments.length,r=new Array(s>2?s-2:0),n=2;n<s;n++)r[n-2]=arguments[n];a=i[e].apply(i,r)}return a}}},{key:"merge",value:function(t,e){return g.extend(t,e)}}]),t}()}));
+function(){function t(t){t.remember("_draggable",this),this.el=t}t.prototype.init=function(t,e){var i=this;this.constraint=t,this.value=e,this.el.on("mousedown.drag",(function(t){i.start(t)})),this.el.on("touchstart.drag",(function(t){i.start(t)}))},t.prototype.transformPoint=function(t,e){var i=(t=t||window.event).changedTouches&&t.changedTouches[0]||t;return this.p.x=i.clientX-(e||0),this.p.y=i.clientY,this.p.matrixTransform(this.m)},t.prototype.getBBox=function(){var t=this.el.bbox();return this.el instanceof SVG.Nested&&(t=this.el.rbox()),(this.el instanceof SVG.G||this.el instanceof SVG.Use||this.el instanceof SVG.Nested)&&(t.x=this.el.x(),t.y=this.el.y()),t},t.prototype.start=function(t){if("click"!=t.type&&"mousedown"!=t.type&&"mousemove"!=t.type||1==(t.which||t.buttons)){var e=this;if(this.el.fire("beforedrag",{event:t,handler:this}),!this.el.event().defaultPrevented){t.preventDefault(),t.stopPropagation(),this.parent=this.parent||this.el.parent(SVG.Nested)||this.el.parent(SVG.Doc),this.p=this.parent.node.createSVGPoint(),this.m=this.el.node.getScreenCTM().inverse();var i,a=this.getBBox();if(this.el instanceof SVG.Text)switch(i=this.el.node.getComputedTextLength(),this.el.attr("text-anchor")){case"middle":i/=2;break;case"start":i=0}this.startPoints={point:this.transformPoint(t,i),box:a,transform:this.el.transform()},SVG.on(window,"mousemove.drag",(function(t){e.drag(t)})),SVG.on(window,"touchmove.drag",(function(t){e.drag(t)})),SVG.on(window,"mouseup.drag",(function(t){e.end(t)})),SVG.on(window,"touchend.drag",(function(t){e.end(t)})),this.el.fire("dragstart",{event:t,p:this.startPoints.point,m:this.m,handler:this})}}},t.prototype.drag=function(t){var e=this.getBBox(),i=this.transformPoint(t),a=this.startPoints.box.x+i.x-this.startPoints.point.x,s=this.startPoints.box.y+i.y-this.startPoints.point.y,r=this.constraint,n=i.x-this.startPoints.point.x,o=i.y-this.startPoints.point.y;if(this.el.fire("dragmove",{event:t,p:i,m:this.m,handler:this}),this.el.event().defaultPrevented)return i;if("function"==typeof r){var l=r.call(this.el,a,s,this.m);"boolean"==typeof l&&(l={x:l,y:l}),!0===l.x?this.el.x(a):!1!==l.x&&this.el.x(l.x),!0===l.y?this.el.y(s):!1!==l.y&&this.el.y(l.y)}else"object"==typeof r&&(null!=r.minX&&a<r.minX?n=(a=r.minX)-this.startPoints.box.x:null!=r.maxX&&a>r.maxX-e.width&&(n=(a=r.maxX-e.width)-this.startPoints.box.x),null!=r.minY&&s<r.minY?o=(s=r.minY)-this.startPoints.box.y:null!=r.maxY&&s>r.maxY-e.height&&(o=(s=r.maxY-e.height)-this.startPoints.box.y),null!=r.snapToGrid&&(a-=a%r.snapToGrid,s-=s%r.snapToGrid,n-=n%r.snapToGrid,o-=o%r.snapToGrid),this.el instanceof SVG.G?this.el.matrix(this.startPoints.transform).transform({x:n,y:o},!0):this.el.move(a,s));return i},t.prototype.end=function(t){var e=this.drag(t);this.el.fire("dragend",{event:t,p:e,m:this.m,handler:this}),SVG.off(window,"mousemove.drag"),SVG.off(window,"touchmove.drag"),SVG.off(window,"mouseup.drag"),SVG.off(window,"touchend.drag")},SVG.extend(SVG.Element,{draggable:function(e,i){"function"!=typeof e&&"object"!=typeof e||(i=e,e=!0);var a=this.remember("_draggable")||new t(this);return(e=void 0===e||e)?a.init(i||{},e):(this.off("mousedown.drag"),this.off("touchstart.drag")),this}})}.call(void 0),function(){function t(t){this.el=t,t.remember("_selectHandler",this),this.pointSelection={isSelected:!1},this.rectSelection={isSelected:!1},this.pointsList={lt:[0,0],rt:["width",0],rb:["width","height"],lb:[0,"height"],t:["width",0],r:["width","height"],b:["width","height"],l:[0,"height"]},this.pointCoord=function(t,e,i){var a="string"!=typeof t?t:e[t];return i?a/2:a},this.pointCoords=function(t,e){var i=this.pointsList[t];return{x:this.pointCoord(i[0],e,"t"===t||"b"===t),y:this.pointCoord(i[1],e,"r"===t||"l"===t)}}}t.prototype.init=function(t,e){var i=this.el.bbox();this.options={};var a=this.el.selectize.defaults.points;for(var s in this.el.selectize.defaults)this.options[s]=this.el.selectize.defaults[s],void 0!==e[s]&&(this.options[s]=e[s]);var r=["points","pointsExclude"];for(var s in r){var n=this.options[r[s]];"string"==typeof n?n=n.length>0?n.split(/\s*,\s*/i):[]:"boolean"==typeof n&&"points"===r[s]&&(n=n?a:[]),this.options[r[s]]=n}this.options.points=[a,this.options.points].reduce((function(t,e){return t.filter((function(t){return e.indexOf(t)>-1}))})),this.options.points=[this.options.points,this.options.pointsExclude].reduce((function(t,e){return t.filter((function(t){return e.indexOf(t)<0}))})),this.parent=this.el.parent(),this.nested=this.nested||this.parent.group(),this.nested.matrix(new SVG.Matrix(this.el).translate(i.x,i.y)),this.options.deepSelect&&-1!==["line","polyline","polygon"].indexOf(this.el.type)?this.selectPoints(t):this.selectRect(t),this.observe(),this.cleanup()},t.prototype.selectPoints=function(t){return this.pointSelection.isSelected=t,this.pointSelection.set?this:(this.pointSelection.set=this.parent.set(),this.drawPoints(),this)},t.prototype.getPointArray=function(){var t=this.el.bbox();return this.el.array().valueOf().map((function(e){return[e[0]-t.x,e[1]-t.y]}))},t.prototype.drawPoints=function(){for(var t=this,e=this.getPointArray(),i=0,a=e.length;i<a;++i){var s=function(e){return function(i){(i=i||window.event).preventDefault?i.preventDefault():i.returnValue=!1,i.stopPropagation();var a=i.pageX||i.touches[0].pageX,s=i.pageY||i.touches[0].pageY;t.el.fire("point",{x:a,y:s,i:e,event:i})}}(i),r=this.drawPoint(e[i][0],e[i][1]).addClass(this.options.classPoints).addClass(this.options.classPoints+"_point").on("touchstart",s).on("mousedown",s);this.pointSelection.set.add(r)}},t.prototype.drawPoint=function(t,e){var i=this.options.pointType;switch(i){case"circle":return this.drawCircle(t,e);case"rect":return this.drawRect(t,e);default:if("function"==typeof i)return i.call(this,t,e);throw new Error("Unknown "+i+" point type!")}},t.prototype.drawCircle=function(t,e){return this.nested.circle(this.options.pointSize).center(t,e)},t.prototype.drawRect=function(t,e){return this.nested.rect(this.options.pointSize,this.options.pointSize).center(t,e)},t.prototype.updatePointSelection=function(){var t=this.getPointArray();this.pointSelection.set.each((function(e){this.cx()===t[e][0]&&this.cy()===t[e][1]||this.center(t[e][0],t[e][1])}))},t.prototype.updateRectSelection=function(){var t=this,e=this.el.bbox();if(this.rectSelection.set.get(0).attr({width:e.width,height:e.height}),this.options.points.length&&this.options.points.map((function(i,a){var s=t.pointCoords(i,e);t.rectSelection.set.get(a+1).center(s.x,s.y)})),this.options.rotationPoint){var i=this.rectSelection.set.length();this.rectSelection.set.get(i-1).center(e.width/2,20)}},t.prototype.selectRect=function(t){var e=this,i=this.el.bbox();function a(t){return function(i){(i=i||window.event).preventDefault?i.preventDefault():i.returnValue=!1,i.stopPropagation();var a=i.pageX||i.touches[0].pageX,s=i.pageY||i.touches[0].pageY;e.el.fire(t,{x:a,y:s,event:i})}}if(this.rectSelection.isSelected=t,this.rectSelection.set=this.rectSelection.set||this.parent.set(),this.rectSelection.set.get(0)||this.rectSelection.set.add(this.nested.rect(i.width,i.height).addClass(this.options.classRect)),this.options.points.length&&this.rectSelection.set.length()<2){this.options.points.map((function(t,s){var r=e.pointCoords(t,i),n=e.drawPoint(r.x,r.y).attr("class",e.options.classPoints+"_"+t).on("mousedown",a(t)).on("touchstart",a(t));e.rectSelection.set.add(n)})),this.rectSelection.set.each((function(){this.addClass(e.options.classPoints)}))}if(this.options.rotationPoint&&(this.options.points&&!this.rectSelection.set.get(9)||!this.options.points&&!this.rectSelection.set.get(1))){var s=function(t){(t=t||window.event).preventDefault?t.preventDefault():t.returnValue=!1,t.stopPropagation();var i=t.pageX||t.touches[0].pageX,a=t.pageY||t.touches[0].pageY;e.el.fire("rot",{x:i,y:a,event:t})},r=this.drawPoint(i.width/2,20).attr("class",this.options.classPoints+"_rot").on("touchstart",s).on("mousedown",s);this.rectSelection.set.add(r)}},t.prototype.handler=function(){var t=this.el.bbox();this.nested.matrix(new SVG.Matrix(this.el).translate(t.x,t.y)),this.rectSelection.isSelected&&this.updateRectSelection(),this.pointSelection.isSelected&&this.updatePointSelection()},t.prototype.observe=function(){var t=this;if(MutationObserver)if(this.rectSelection.isSelected||this.pointSelection.isSelected)this.observerInst=this.observerInst||new MutationObserver((function(){t.handler()})),this.observerInst.observe(this.el.node,{attributes:!0});else try{this.observerInst.disconnect(),delete this.observerInst}catch(t){}else this.el.off("DOMAttrModified.select"),(this.rectSelection.isSelected||this.pointSelection.isSelected)&&this.el.on("DOMAttrModified.select",(function(){t.handler()}))},t.prototype.cleanup=function(){!this.rectSelection.isSelected&&this.rectSelection.set&&(this.rectSelection.set.each((function(){this.remove()})),this.rectSelection.set.clear(),delete this.rectSelection.set),!this.pointSelection.isSelected&&this.pointSelection.set&&(this.pointSelection.set.each((function(){this.remove()})),this.pointSelection.set.clear(),delete this.pointSelection.set),this.pointSelection.isSelected||this.rectSelection.isSelected||(this.nested.remove(),delete this.nested)},SVG.extend(SVG.Element,{selectize:function(e,i){return"object"==typeof e&&(i=e,e=!0),(this.remember("_selectHandler")||new t(this)).init(void 0===e||e,i||{}),this}}),SVG.Element.prototype.selectize.defaults={points:["lt","rt","rb","lb","t","r","b","l"],pointsExclude:[],classRect:"svg_select_boundingRect",classPoints:"svg_select_points",pointSize:7,rotationPoint:!0,deepSelect:!1,pointType:"circle"}}(),function(){(function(){function t(t){t.remember("_resizeHandler",this),this.el=t,this.parameters={},this.lastUpdateCall=null,this.p=t.doc().node.createSVGPoint()}t.prototype.transformPoint=function(t,e,i){return this.p.x=t-(this.offset.x-window.pageXOffset),this.p.y=e-(this.offset.y-window.pageYOffset),this.p.matrixTransform(i||this.m)},t.prototype._extractPosition=function(t){return{x:null!=t.clientX?t.clientX:t.touches[0].clientX,y:null!=t.clientY?t.clientY:t.touches[0].clientY}},t.prototype.init=function(t){var e=this;if(this.stop(),"stop"!==t){for(var i in this.options={},this.el.resize.defaults)this.options[i]=this.el.resize.defaults[i],void 0!==t[i]&&(this.options[i]=t[i]);this.el.on("lt.resize",(function(t){e.resize(t||window.event)})),this.el.on("rt.resize",(function(t){e.resize(t||window.event)})),this.el.on("rb.resize",(function(t){e.resize(t||window.event)})),this.el.on("lb.resize",(function(t){e.resize(t||window.event)})),this.el.on("t.resize",(function(t){e.resize(t||window.event)})),this.el.on("r.resize",(function(t){e.resize(t||window.event)})),this.el.on("b.resize",(function(t){e.resize(t||window.event)})),this.el.on("l.resize",(function(t){e.resize(t||window.event)})),this.el.on("rot.resize",(function(t){e.resize(t||window.event)})),this.el.on("point.resize",(function(t){e.resize(t||window.event)})),this.update()}},t.prototype.stop=function(){return this.el.off("lt.resize"),this.el.off("rt.resize"),this.el.off("rb.resize"),this.el.off("lb.resize"),this.el.off("t.resize"),this.el.off("r.resize"),this.el.off("b.resize"),this.el.off("l.resize"),this.el.off("rot.resize"),this.el.off("point.resize"),this},t.prototype.resize=function(t){var e=this;this.m=this.el.node.getScreenCTM().inverse(),this.offset={x:window.pageXOffset,y:window.pageYOffset};var i=this._extractPosition(t.detail.event);if(this.parameters={type:this.el.type,p:this.transformPoint(i.x,i.y),x:t.detail.x,y:t.detail.y,box:this.el.bbox(),rotation:this.el.transform().rotation},"text"===this.el.type&&(this.parameters.fontSize=this.el.attr()["font-size"]),void 0!==t.detail.i){var a=this.el.array().valueOf();this.parameters.i=t.detail.i,this.parameters.pointCoords=[a[t.detail.i][0],a[t.detail.i][1]]}switch(t.type){case"lt":this.calc=function(t,e){var i=this.snapToGrid(t,e);if(this.parameters.box.width-i[0]>0&&this.parameters.box.height-i[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x+i[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize-i[0]);i=this.checkAspectRatio(i),this.el.move(this.parameters.box.x+i[0],this.parameters.box.y+i[1]).size(this.parameters.box.width-i[0],this.parameters.box.height-i[1])}};break;case"rt":this.calc=function(t,e){var i=this.snapToGrid(t,e,2);if(this.parameters.box.width+i[0]>0&&this.parameters.box.height-i[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x-i[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize+i[0]);i=this.checkAspectRatio(i,!0),this.el.move(this.parameters.box.x,this.parameters.box.y+i[1]).size(this.parameters.box.width+i[0],this.parameters.box.height-i[1])}};break;case"rb":this.calc=function(t,e){var i=this.snapToGrid(t,e,0);if(this.parameters.box.width+i[0]>0&&this.parameters.box.height+i[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x-i[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize+i[0]);i=this.checkAspectRatio(i),this.el.move(this.parameters.box.x,this.parameters.box.y).size(this.parameters.box.width+i[0],this.parameters.box.height+i[1])}};break;case"lb":this.calc=function(t,e){var i=this.snapToGrid(t,e,1);if(this.parameters.box.width-i[0]>0&&this.parameters.box.height+i[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x+i[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize-i[0]);i=this.checkAspectRatio(i,!0),this.el.move(this.parameters.box.x+i[0],this.parameters.box.y).size(this.parameters.box.width-i[0],this.parameters.box.height+i[1])}};break;case"t":this.calc=function(t,e){var i=this.snapToGrid(t,e,2);if(this.parameters.box.height-i[1]>0){if("text"===this.parameters.type)return;this.el.move(this.parameters.box.x,this.parameters.box.y+i[1]).height(this.parameters.box.height-i[1])}};break;case"r":this.calc=function(t,e){var i=this.snapToGrid(t,e,0);if(this.parameters.box.width+i[0]>0){if("text"===this.parameters.type)return;this.el.move(this.parameters.box.x,this.parameters.box.y).width(this.parameters.box.width+i[0])}};break;case"b":this.calc=function(t,e){var i=this.snapToGrid(t,e,0);if(this.parameters.box.height+i[1]>0){if("text"===this.parameters.type)return;this.el.move(this.parameters.box.x,this.parameters.box.y).height(this.parameters.box.height+i[1])}};break;case"l":this.calc=function(t,e){var i=this.snapToGrid(t,e,1);if(this.parameters.box.width-i[0]>0){if("text"===this.parameters.type)return;this.el.move(this.parameters.box.x+i[0],this.parameters.box.y).width(this.parameters.box.width-i[0])}};break;case"rot":this.calc=function(t,e){var i=t+this.parameters.p.x,a=e+this.parameters.p.y,s=Math.atan2(this.parameters.p.y-this.parameters.box.y-this.parameters.box.height/2,this.parameters.p.x-this.parameters.box.x-this.parameters.box.width/2),r=Math.atan2(a-this.parameters.box.y-this.parameters.box.height/2,i-this.parameters.box.x-this.parameters.box.width/2),n=this.parameters.rotation+180*(r-s)/Math.PI+this.options.snapToAngle/2;this.el.center(this.parameters.box.cx,this.parameters.box.cy).rotate(n-n%this.options.snapToAngle,this.parameters.box.cx,this.parameters.box.cy)};break;case"point":this.calc=function(t,e){var i=this.snapToGrid(t,e,this.parameters.pointCoords[0],this.parameters.pointCoords[1]),a=this.el.array().valueOf();a[this.parameters.i][0]=this.parameters.pointCoords[0]+i[0],a[this.parameters.i][1]=this.parameters.pointCoords[1]+i[1],this.el.plot(a)}}this.el.fire("resizestart",{dx:this.parameters.x,dy:this.parameters.y,event:t}),SVG.on(window,"touchmove.resize",(function(t){e.update(t||window.event)})),SVG.on(window,"touchend.resize",(function(){e.done()})),SVG.on(window,"mousemove.resize",(function(t){e.update(t||window.event)})),SVG.on(window,"mouseup.resize",(function(){e.done()}))},t.prototype.update=function(t){if(t){var e=this._extractPosition(t),i=this.transformPoint(e.x,e.y),a=i.x-this.parameters.p.x,s=i.y-this.parameters.p.y;this.lastUpdateCall=[a,s],this.calc(a,s),this.el.fire("resizing",{dx:a,dy:s,event:t})}else this.lastUpdateCall&&this.calc(this.lastUpdateCall[0],this.lastUpdateCall[1])},t.prototype.done=function(){this.lastUpdateCall=null,SVG.off(window,"mousemove.resize"),SVG.off(window,"mouseup.resize"),SVG.off(window,"touchmove.resize"),SVG.off(window,"touchend.resize"),this.el.fire("resizedone")},t.prototype.snapToGrid=function(t,e,i,a){var s;return void 0!==a?s=[(i+t)%this.options.snapToGrid,(a+e)%this.options.snapToGrid]:(i=null==i?3:i,s=[(this.parameters.box.x+t+(1&i?0:this.parameters.box.width))%this.options.snapToGrid,(this.parameters.box.y+e+(2&i?0:this.parameters.box.height))%this.options.snapToGrid]),t<0&&(s[0]-=this.options.snapToGrid),e<0&&(s[1]-=this.options.snapToGrid),t-=Math.abs(s[0])<this.options.snapToGrid/2?s[0]:s[0]-(t<0?-this.options.snapToGrid:this.options.snapToGrid),e-=Math.abs(s[1])<this.options.snapToGrid/2?s[1]:s[1]-(e<0?-this.options.snapToGrid:this.options.snapToGrid),this.constraintToBox(t,e,i,a)},t.prototype.constraintToBox=function(t,e,i,a){var s,r,n=this.options.constraint||{};return void 0!==a?(s=i,r=a):(s=this.parameters.box.x+(1&i?0:this.parameters.box.width),r=this.parameters.box.y+(2&i?0:this.parameters.box.height)),void 0!==n.minX&&s+t<n.minX&&(t=n.minX-s),void 0!==n.maxX&&s+t>n.maxX&&(t=n.maxX-s),void 0!==n.minY&&r+e<n.minY&&(e=n.minY-r),void 0!==n.maxY&&r+e>n.maxY&&(e=n.maxY-r),[t,e]},t.prototype.checkAspectRatio=function(t,e){if(!this.options.saveAspectRatio)return t;var i=t.slice(),a=this.parameters.box.width/this.parameters.box.height,s=this.parameters.box.width+t[0],r=this.parameters.box.height-t[1],n=s/r;return n<a?(i[1]=s/a-this.parameters.box.height,e&&(i[1]=-i[1])):n>a&&(i[0]=this.parameters.box.width-r*a,e&&(i[0]=-i[0])),i},SVG.extend(SVG.Element,{resize:function(e){return(this.remember("_resizeHandler")||new t(this)).init(e||{}),this}}),SVG.Element.prototype.resize.defaults={snapToAngle:.1,snapToGrid:1,constraint:{},saveAspectRatio:!1}}).call(this)}();!function(t,e){void 0===e&&(e={});var i=e.insertAt;if(t&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===i&&a.firstChild?a.insertBefore(s,a.firstChild):a.appendChild(s),s.styleSheet?s.styleSheet.cssText=t:s.appendChild(document.createTextNode(t))}}('.apexcharts-canvas {\n  position: relative;\n  user-select: none;\n  /* cannot give overflow: hidden as it will crop tooltips which overflow outside chart area */\n}\n\n\n/* scrollbar is not visible by default for legend, hence forcing the visibility */\n.apexcharts-canvas ::-webkit-scrollbar {\n  -webkit-appearance: none;\n  width: 6px;\n}\n\n.apexcharts-canvas ::-webkit-scrollbar-thumb {\n  border-radius: 4px;\n  background-color: rgba(0, 0, 0, .5);\n  box-shadow: 0 0 1px rgba(255, 255, 255, .5);\n  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);\n}\n\n.apexcharts-canvas.apexcharts-theme-dark {\n  background: #343F57;\n}\n\n.apexcharts-inner {\n  position: relative;\n}\n\n.apexcharts-text tspan {\n  font-family: inherit;\n}\n\n.legend-mouseover-inactive {\n  transition: 0.15s ease all;\n  opacity: 0.20;\n}\n\n.apexcharts-series-collapsed {\n  opacity: 0;\n}\n\n.apexcharts-tooltip {\n  border-radius: 5px;\n  box-shadow: 2px 2px 6px -4px #999;\n  cursor: default;\n  font-size: 14px;\n  left: 62px;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  top: 20px;\n  overflow: hidden;\n  white-space: nowrap;\n  z-index: 12;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-tooltip.apexcharts-active {\n  opacity: 1;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-tooltip.apexcharts-theme-light {\n  border: 1px solid #e3e3e3;\n  background: rgba(255, 255, 255, 0.96);\n}\n\n.apexcharts-tooltip.apexcharts-theme-dark {\n  color: #fff;\n  background: rgba(30, 30, 30, 0.8);\n}\n\n.apexcharts-tooltip * {\n  font-family: inherit;\n}\n\n\n.apexcharts-tooltip-title {\n  padding: 6px;\n  font-size: 15px;\n  margin-bottom: 4px;\n}\n\n.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {\n  background: #ECEFF1;\n  border-bottom: 1px solid #ddd;\n}\n\n.apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {\n  background: rgba(0, 0, 0, 0.7);\n  border-bottom: 1px solid #333;\n}\n\n.apexcharts-tooltip-text-value,\n.apexcharts-tooltip-text-z-value {\n  display: inline-block;\n  font-weight: 600;\n  margin-left: 5px;\n}\n\n.apexcharts-tooltip-text-z-label:empty,\n.apexcharts-tooltip-text-z-value:empty {\n  display: none;\n}\n\n.apexcharts-tooltip-text-value,\n.apexcharts-tooltip-text-z-value {\n  font-weight: 600;\n}\n\n.apexcharts-tooltip-marker {\n  width: 12px;\n  height: 12px;\n  position: relative;\n  top: 0px;\n  margin-right: 10px;\n  border-radius: 50%;\n}\n\n.apexcharts-tooltip-series-group {\n  padding: 0 10px;\n  display: none;\n  text-align: left;\n  justify-content: left;\n  align-items: center;\n}\n\n.apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-marker {\n  opacity: 1;\n}\n\n.apexcharts-tooltip-series-group.apexcharts-active,\n.apexcharts-tooltip-series-group:last-child {\n  padding-bottom: 4px;\n}\n\n.apexcharts-tooltip-series-group-hidden {\n  opacity: 0;\n  height: 0;\n  line-height: 0;\n  padding: 0 !important;\n}\n\n.apexcharts-tooltip-y-group {\n  padding: 6px 0 5px;\n}\n\n.apexcharts-tooltip-candlestick {\n  padding: 4px 8px;\n}\n\n.apexcharts-tooltip-candlestick>div {\n  margin: 4px 0;\n}\n\n.apexcharts-tooltip-candlestick span.value {\n  font-weight: bold;\n}\n\n.apexcharts-tooltip-rangebar {\n  padding: 5px 8px;\n}\n\n.apexcharts-tooltip-rangebar .category {\n  font-weight: 600;\n  color: #777;\n}\n\n.apexcharts-tooltip-rangebar .series-name {\n  font-weight: bold;\n  display: block;\n  margin-bottom: 5px;\n}\n\n.apexcharts-xaxistooltip {\n  opacity: 0;\n  padding: 9px 10px;\n  pointer-events: none;\n  color: #373d3f;\n  font-size: 13px;\n  text-align: center;\n  border-radius: 2px;\n  position: absolute;\n  z-index: 10;\n  background: #ECEFF1;\n  border: 1px solid #90A4AE;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-xaxistooltip.apexcharts-theme-dark {\n  background: rgba(0, 0, 0, 0.7);\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  color: #fff;\n}\n\n.apexcharts-xaxistooltip:after,\n.apexcharts-xaxistooltip:before {\n  left: 50%;\n  border: solid transparent;\n  content: " ";\n  height: 0;\n  width: 0;\n  position: absolute;\n  pointer-events: none;\n}\n\n.apexcharts-xaxistooltip:after {\n  border-color: rgba(236, 239, 241, 0);\n  border-width: 6px;\n  margin-left: -6px;\n}\n\n.apexcharts-xaxistooltip:before {\n  border-color: rgba(144, 164, 174, 0);\n  border-width: 7px;\n  margin-left: -7px;\n}\n\n.apexcharts-xaxistooltip-bottom:after,\n.apexcharts-xaxistooltip-bottom:before {\n  bottom: 100%;\n}\n\n.apexcharts-xaxistooltip-top:after,\n.apexcharts-xaxistooltip-top:before {\n  top: 100%;\n}\n\n.apexcharts-xaxistooltip-bottom:after {\n  border-bottom-color: #ECEFF1;\n}\n\n.apexcharts-xaxistooltip-bottom:before {\n  border-bottom-color: #90A4AE;\n}\n\n.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:after {\n  border-bottom-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:before {\n  border-bottom-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-xaxistooltip-top:after {\n  border-top-color: #ECEFF1\n}\n\n.apexcharts-xaxistooltip-top:before {\n  border-top-color: #90A4AE;\n}\n\n.apexcharts-xaxistooltip-top.apexcharts-theme-dark:after {\n  border-top-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-xaxistooltip-top.apexcharts-theme-dark:before {\n  border-top-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-xaxistooltip.apexcharts-active {\n  opacity: 1;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-yaxistooltip {\n  opacity: 0;\n  padding: 4px 10px;\n  pointer-events: none;\n  color: #373d3f;\n  font-size: 13px;\n  text-align: center;\n  border-radius: 2px;\n  position: absolute;\n  z-index: 10;\n  background: #ECEFF1;\n  border: 1px solid #90A4AE;\n}\n\n.apexcharts-yaxistooltip.apexcharts-theme-dark {\n  background: rgba(0, 0, 0, 0.7);\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  color: #fff;\n}\n\n.apexcharts-yaxistooltip:after,\n.apexcharts-yaxistooltip:before {\n  top: 50%;\n  border: solid transparent;\n  content: " ";\n  height: 0;\n  width: 0;\n  position: absolute;\n  pointer-events: none;\n}\n\n.apexcharts-yaxistooltip:after {\n  border-color: rgba(236, 239, 241, 0);\n  border-width: 6px;\n  margin-top: -6px;\n}\n\n.apexcharts-yaxistooltip:before {\n  border-color: rgba(144, 164, 174, 0);\n  border-width: 7px;\n  margin-top: -7px;\n}\n\n.apexcharts-yaxistooltip-left:after,\n.apexcharts-yaxistooltip-left:before {\n  left: 100%;\n}\n\n.apexcharts-yaxistooltip-right:after,\n.apexcharts-yaxistooltip-right:before {\n  right: 100%;\n}\n\n.apexcharts-yaxistooltip-left:after {\n  border-left-color: #ECEFF1;\n}\n\n.apexcharts-yaxistooltip-left:before {\n  border-left-color: #90A4AE;\n}\n\n.apexcharts-yaxistooltip-left.apexcharts-theme-dark:after {\n  border-left-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-yaxistooltip-left.apexcharts-theme-dark:before {\n  border-left-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-yaxistooltip-right:after {\n  border-right-color: #ECEFF1;\n}\n\n.apexcharts-yaxistooltip-right:before {\n  border-right-color: #90A4AE;\n}\n\n.apexcharts-yaxistooltip-right.apexcharts-theme-dark:after {\n  border-right-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-yaxistooltip-right.apexcharts-theme-dark:before {\n  border-right-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-yaxistooltip.apexcharts-active {\n  opacity: 1;\n}\n\n.apexcharts-yaxistooltip-hidden {\n  display: none;\n}\n\n.apexcharts-xcrosshairs,\n.apexcharts-ycrosshairs {\n  pointer-events: none;\n  opacity: 0;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-xcrosshairs.apexcharts-active,\n.apexcharts-ycrosshairs.apexcharts-active {\n  opacity: 1;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-ycrosshairs-hidden {\n  opacity: 0;\n}\n\n.apexcharts-selection-rect {\n  cursor: move;\n}\n\n.svg_select_boundingRect, .svg_select_points_rot {\n  pointer-events: none;\n  opacity: 0;\n  visibility: hidden;\n}\n.apexcharts-selection-rect + g .svg_select_boundingRect,\n.apexcharts-selection-rect + g .svg_select_points_rot {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.apexcharts-selection-rect + g .svg_select_points_l,\n.apexcharts-selection-rect + g .svg_select_points_r {\n  cursor: ew-resize;\n  opacity: 1;\n  visibility: visible;\n}\n\n.svg_select_points {\n  fill: #efefef;\n  stroke: #333;\n  rx: 2;\n}\n\n.apexcharts-canvas.apexcharts-zoomable .hovering-zoom {\n  cursor: crosshair\n}\n\n.apexcharts-canvas.apexcharts-zoomable .hovering-pan {\n  cursor: move\n}\n\n.apexcharts-zoom-icon,\n.apexcharts-zoomin-icon,\n.apexcharts-zoomout-icon,\n.apexcharts-reset-icon,\n.apexcharts-pan-icon,\n.apexcharts-selection-icon,\n.apexcharts-menu-icon,\n.apexcharts-toolbar-custom-icon {\n  cursor: pointer;\n  width: 20px;\n  height: 20px;\n  line-height: 24px;\n  color: #6E8192;\n  text-align: center;\n}\n\n.apexcharts-zoom-icon svg,\n.apexcharts-zoomin-icon svg,\n.apexcharts-zoomout-icon svg,\n.apexcharts-reset-icon svg,\n.apexcharts-menu-icon svg {\n  fill: #6E8192;\n}\n\n.apexcharts-selection-icon svg {\n  fill: #444;\n  transform: scale(0.76)\n}\n\n.apexcharts-theme-dark .apexcharts-zoom-icon svg,\n.apexcharts-theme-dark .apexcharts-zoomin-icon svg,\n.apexcharts-theme-dark .apexcharts-zoomout-icon svg,\n.apexcharts-theme-dark .apexcharts-reset-icon svg,\n.apexcharts-theme-dark .apexcharts-pan-icon svg,\n.apexcharts-theme-dark .apexcharts-selection-icon svg,\n.apexcharts-theme-dark .apexcharts-menu-icon svg,\n.apexcharts-theme-dark .apexcharts-toolbar-custom-icon svg {\n  fill: #f3f4f5;\n}\n\n.apexcharts-canvas .apexcharts-zoom-icon.apexcharts-selected svg,\n.apexcharts-canvas .apexcharts-selection-icon.apexcharts-selected svg,\n.apexcharts-canvas .apexcharts-reset-zoom-icon.apexcharts-selected svg {\n  fill: #008FFB;\n}\n\n.apexcharts-theme-light .apexcharts-selection-icon:not(.apexcharts-selected):hover svg,\n.apexcharts-theme-light .apexcharts-zoom-icon:not(.apexcharts-selected):hover svg,\n.apexcharts-theme-light .apexcharts-zoomin-icon:hover svg,\n.apexcharts-theme-light .apexcharts-zoomout-icon:hover svg,\n.apexcharts-theme-light .apexcharts-reset-icon:hover svg,\n.apexcharts-theme-light .apexcharts-menu-icon:hover svg {\n  fill: #333;\n}\n\n.apexcharts-selection-icon,\n.apexcharts-menu-icon {\n  position: relative;\n}\n\n.apexcharts-reset-icon {\n  margin-left: 5px;\n}\n\n.apexcharts-zoom-icon,\n.apexcharts-reset-icon,\n.apexcharts-menu-icon {\n  transform: scale(0.85);\n}\n\n.apexcharts-zoomin-icon,\n.apexcharts-zoomout-icon {\n  transform: scale(0.7)\n}\n\n.apexcharts-zoomout-icon {\n  margin-right: 3px;\n}\n\n.apexcharts-pan-icon {\n  transform: scale(0.62);\n  position: relative;\n  left: 1px;\n  top: 0px;\n}\n\n.apexcharts-pan-icon svg {\n  fill: #fff;\n  stroke: #6E8192;\n  stroke-width: 2;\n}\n\n.apexcharts-pan-icon.apexcharts-selected svg {\n  stroke: #008FFB;\n}\n\n.apexcharts-pan-icon:not(.apexcharts-selected):hover svg {\n  stroke: #333;\n}\n\n.apexcharts-toolbar {\n  position: absolute;\n  z-index: 11;\n  max-width: 176px;\n  text-align: right;\n  border-radius: 3px;\n  padding: 0px 6px 2px 6px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.apexcharts-menu {\n  background: #fff;\n  position: absolute;\n  top: 100%;\n  border: 1px solid #ddd;\n  border-radius: 3px;\n  padding: 3px;\n  right: 10px;\n  opacity: 0;\n  min-width: 110px;\n  transition: 0.15s ease all;\n  pointer-events: none;\n}\n\n.apexcharts-menu.apexcharts-menu-open {\n  opacity: 1;\n  pointer-events: all;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-menu-item {\n  padding: 6px 7px;\n  font-size: 12px;\n  cursor: pointer;\n}\n\n.apexcharts-theme-light .apexcharts-menu-item:hover {\n  background: #eee;\n}\n\n.apexcharts-theme-dark .apexcharts-menu {\n  background: rgba(0, 0, 0, 0.7);\n  color: #fff;\n}\n\n@media screen and (min-width: 768px) {\n  .apexcharts-canvas:hover .apexcharts-toolbar {\n    opacity: 1;\n  }\n}\n\n.apexcharts-datalabel.apexcharts-element-hidden {\n  opacity: 0;\n}\n\n.apexcharts-pie-label,\n.apexcharts-datalabels,\n.apexcharts-datalabel,\n.apexcharts-datalabel-label,\n.apexcharts-datalabel-value {\n  cursor: default;\n  pointer-events: none;\n}\n\n.apexcharts-pie-label-delay {\n  opacity: 0;\n  animation-name: opaque;\n  animation-duration: 0.3s;\n  animation-fill-mode: forwards;\n  animation-timing-function: ease;\n}\n\n.apexcharts-canvas .apexcharts-element-hidden {\n  opacity: 0;\n}\n\n.apexcharts-hide .apexcharts-series-points {\n  opacity: 0;\n}\n\n.apexcharts-gridline,\n.apexcharts-annotation-rect,\n.apexcharts-tooltip .apexcharts-marker,\n.apexcharts-area-series .apexcharts-area,\n.apexcharts-line,\n.apexcharts-zoom-rect,\n.apexcharts-toolbar svg,\n.apexcharts-area-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,\n.apexcharts-line-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,\n.apexcharts-radar-series path,\n.apexcharts-radar-series polygon {\n  pointer-events: none;\n}\n\n\n/* markers */\n\n.apexcharts-marker {\n  transition: 0.15s ease all;\n}\n\n@keyframes opaque {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n\n/* Resize generated styles */\n\n@keyframes resizeanim {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n.resize-triggers {\n  animation: 1ms resizeanim;\n  visibility: hidden;\n  opacity: 0;\n}\n\n.resize-triggers,\n.resize-triggers>div,\n.contract-trigger:before {\n  content: " ";\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n.resize-triggers>div {\n  background: #eee;\n  overflow: auto;\n}\n\n.contract-trigger:before {\n  width: 200%;\n  height: 200%;\n}'),function(){function t(t){var e=t.__resizeTriggers__,i=e.firstElementChild,a=e.lastElementChild,s=i?i.firstElementChild:null;a&&(a.scrollLeft=a.scrollWidth,a.scrollTop=a.scrollHeight),s&&(s.style.width=i.offsetWidth+1+"px",s.style.height=i.offsetHeight+1+"px"),i&&(i.scrollLeft=i.scrollWidth,i.scrollTop=i.scrollHeight)}function e(e){var i=this;t(this),this.__resizeRAF__&&r(this.__resizeRAF__),this.__resizeRAF__=s((function(){(function(t){return t.offsetWidth!=t.__resizeLast__.width||t.offsetHeight!=t.__resizeLast__.height})(i)&&(i.__resizeLast__.width=i.offsetWidth,i.__resizeLast__.height=i.offsetHeight,i.__resizeListeners__.forEach((function(t){t.call(e)})))}))}var i,a,s=(i=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(t){return window.setTimeout(t,20)},function(t){return i(t)}),r=(a=window.cancelAnimationFrame||window.mozCancelAnimationFrame||window.webkitCancelAnimationFrame||window.clearTimeout,function(t){return a(t)}),n=!1,o="animationstart",l="Webkit Moz O ms".split(" "),h="webkitAnimationStart animationstart oAnimationStart MSAnimationStart".split(" "),c=document.createElement("fakeelement");if(void 0!==c.style.animationName&&(n=!0),!1===n)for(var d=0;d<l.length;d++)if(void 0!==c.style[l[d]+"AnimationName"]){o=h[d];break}window.addResizeListener=function(i,a){i.__resizeTriggers__||("static"==getComputedStyle(i).position&&(i.style.position="relative"),i.__resizeLast__={},i.__resizeListeners__=[],(i.__resizeTriggers__=document.createElement("div")).className="resize-triggers",i.__resizeTriggers__.innerHTML='<div class="expand-trigger"><div></div></div><div class="contract-trigger"></div>',i.appendChild(i.__resizeTriggers__),t(i),i.addEventListener("scroll",e,!0),o&&i.__resizeTriggers__.addEventListener(o,(function(e){"resizeanim"==e.animationName&&t(i)}))),i.__resizeListeners__.push(a)},window.removeResizeListener=function(t,i){t&&(t.__resizeListeners__.splice(t.__resizeListeners__.indexOf(i),1),t.__resizeListeners__.length||(t.removeEventListener("scroll",e),t.__resizeTriggers__.parentNode&&(t.__resizeTriggers__=!t.removeChild(t.__resizeTriggers__))))}}(),window.Apex={};var It=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"initModules",value:function(){this.ctx.publicMethods=["updateOptions","updateSeries","appendData","appendSeries","toggleSeries","showSeries","hideSeries","setLocale","resetSeries","zoomX","toggleDataPointSelection","dataURI","addXaxisAnnotation","addYaxisAnnotation","addPointAnnotation","clearAnnotations","removeAnnotation","paper","destroy"],this.ctx.eventList=["click","mousedown","mousemove","touchstart","touchmove","mouseup","touchend"],this.ctx.animations=new f(this.ctx),this.ctx.axes=new J(this.ctx),this.ctx.core=new Tt(this.ctx.el,this.ctx),this.ctx.config=new D({}),this.ctx.data=new O(this.ctx),this.ctx.grid=new _(this.ctx),this.ctx.graphics=new p(this.ctx),this.ctx.coreUtils=new m(this.ctx),this.ctx.crosshairs=new Q(this.ctx),this.ctx.events=new Z(this.ctx),this.ctx.exports=new V(this.ctx),this.ctx.localization=new $(this.ctx),this.ctx.options=new S,this.ctx.responsive=new K(this.ctx),this.ctx.series=new M(this.ctx),this.ctx.theme=new tt(this.ctx),this.ctx.formatters=new W(this.ctx),this.ctx.titleSubtitle=new et(this.ctx),this.ctx.legend=new ct(this.ctx),this.ctx.toolbar=new dt(this.ctx),this.ctx.dimensions=new nt(this.ctx),this.ctx.updateHelpers=new zt(this.ctx),this.ctx.zoomPanSelection=new gt(this.ctx),this.ctx.w.globals.tooltip=new vt(this.ctx)}}]),t}(),Mt=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"clear",value:function(){this.ctx.zoomPanSelection&&this.ctx.zoomPanSelection.destroy(),this.ctx.toolbar&&this.ctx.toolbar.destroy(),this.ctx.animations=null,this.ctx.axes=null,this.ctx.annotations=null,this.ctx.core=null,this.ctx.data=null,this.ctx.grid=null,this.ctx.series=null,this.ctx.responsive=null,this.ctx.theme=null,this.ctx.formatters=null,this.ctx.titleSubtitle=null,this.ctx.legend=null,this.ctx.dimensions=null,this.ctx.options=null,this.ctx.crosshairs=null,this.ctx.zoomPanSelection=null,this.ctx.updateHelpers=null,this.ctx.toolbar=null,this.ctx.localization=null,this.ctx.w.globals.tooltip=null,this.clearDomElements()}},{key:"killSVG",value:function(t){t.each((function(t,e){this.removeClass("*"),this.off(),this.stop()}),!0),t.ungroup(),t.clear()}},{key:"clearDomElements",value:function(){var t=this;this.ctx.eventList.forEach((function(e){document.removeEventListener(e,t.ctx.events.documentEvent)}));var e=this.w.globals.dom;if(null!==this.ctx.el)for(;this.ctx.el.firstChild;)this.ctx.el.removeChild(this.ctx.el.firstChild);this.killSVG(e.Paper),e.Paper.remove(),e.elWrap=null,e.elGraphical=null,e.elAnnotations=null,e.elLegendWrap=null,e.baseEl=null,e.elGridRect=null,e.elGridRectMask=null,e.elGridRectMarkerMask=null,e.elDefs=null}}]),t}();return function(){function t(i,a){e(this,t),this.opts=a,this.ctx=this,this.w=new N(a).init(),this.el=i,this.w.globals.cuid=g.randomId(),this.w.globals.chartID=this.w.config.chart.id?this.w.config.chart.id:this.w.globals.cuid,new It(this).initModules(),this.create=g.bind(this.create,this),this.windowResizeHandler=this._windowResize.bind(this)}return a(t,[{key:"render",value:function(){var t=this;return new Promise((function(e,i){if(null!==t.el){void 0===Apex._chartInstances&&(Apex._chartInstances=[]),t.w.config.chart.id&&Apex._chartInstances.push({id:t.w.globals.chartID,group:t.w.config.chart.group,chart:t}),t.setLocale(t.w.config.chart.defaultLocale);var a=t.w.config.chart.events.beforeMount;"function"==typeof a&&a(t,t.w),t.events.fireEvent("beforeMount",[t,t.w]),window.addEventListener("resize",t.windowResizeHandler),window.addResizeListener(t.el.parentNode,t._parentResizeCallback.bind(t));var s=t.create(t.w.config.series,{});if(!s)return e(t);t.mount(s).then((function(){"function"==typeof t.w.config.chart.events.mounted&&t.w.config.chart.events.mounted(t,t.w),t.events.fireEvent("mounted",[t,t.w]),e(s)})).catch((function(t){i(t)}))}else i(new Error("Element not found"))}))}},{key:"create",value:function(t,e){var i=this.w;new It(this).initModules();var a=this.w.globals;(a.noData=!1,a.animationEnded=!1,this.responsive.checkResponsiveConfig(e),i.config.xaxis.convertedCatToNumeric)&&new R(i.config).convertCatToNumericXaxis(i.config,this.ctx);if(null===this.el)return a.animationEnded=!0,null;if(this.core.setupElements(),0===a.svgWidth)return a.animationEnded=!0,null;var s=m.checkComboSeries(t);a.comboCharts=s.comboCharts,a.comboBarCount=s.comboBarCount,(0===t.length||1===t.length&&t[0].data&&0===t[0].data.length)&&this.series.handleNoData(),this.events.setupEventHandlers(),this.data.parseData(t),this.theme.init(),new P(this).setGlobalMarkerSize(),this.formatters.setLabelFormatters(),this.titleSubtitle.draw(),a.noData&&a.collapsedSeries.length!==a.series.length||this.legend.init(),this.series.hasAllSeriesEqualX(),a.axisCharts&&(this.core.coreCalculations(),"category"!==i.config.xaxis.type&&this.formatters.setLabelFormatters()),this.formatters.heatmapLabelFormatters(),this.dimensions.plotCoords();var r=this.core.xySettings();this.grid.createGridMask();var n=this.core.plotChartType(t,r),o=new z(this);o.bringForward(),i.config.dataLabels.background.enabled&&o.dataLabelsBackground(),this.core.shiftGraphPosition();var l={plot:{left:i.globals.translateX,top:i.globals.translateY,width:i.globals.gridWidth,height:i.globals.gridHeight}};return{elGraph:n,xyRatios:r,elInner:i.globals.dom.elGraphical,dimensions:l}}},{key:"mount",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,i=this,a=i.w;return new Promise((function(s,r){if(null===i.el)return r(new Error("Not enough data to display or target element not found"));(null===e||a.globals.allSeriesCollapsed)&&i.series.handleNoData(),i.axes.drawAxis(a.config.chart.type,e.xyRatios),i.grid=new _(i);var n=i.grid.drawGrid();i.annotations=new C(i),i.annotations.drawShapeAnnos(),i.annotations.drawImageAnnos(),i.annotations.drawTextAnnos(),"back"===a.config.grid.position&&n&&a.globals.dom.elGraphical.add(n.el);var o=new G(t.ctx),l=new q(t.ctx);if(null!==n&&(o.xAxisLabelCorrections(n.xAxisTickWidth),l.setYAxisTextAlignments()),"back"===a.config.annotations.position&&(a.globals.dom.Paper.add(a.globals.dom.elAnnotations),i.annotations.drawAxesAnnotations()),e.elGraph instanceof Array)for(var h=0;h<e.elGraph.length;h++)a.globals.dom.elGraphical.add(e.elGraph[h]);else a.globals.dom.elGraphical.add(e.elGraph);if("front"===a.config.grid.position&&n&&a.globals.dom.elGraphical.add(n.el),"front"===a.config.xaxis.crosshairs.position&&i.crosshairs.drawXCrosshairs(),"front"===a.config.yaxis[0].crosshairs.position&&i.crosshairs.drawYCrosshairs(),"front"===a.config.annotations.position&&(a.globals.dom.Paper.add(a.globals.dom.elAnnotations),i.annotations.drawAxesAnnotations()),!a.globals.noData){if(a.config.tooltip.enabled&&!a.globals.noData&&i.w.globals.tooltip.drawTooltip(e.xyRatios),a.globals.axisCharts&&(a.globals.isXNumeric||a.config.xaxis.convertedCatToNumeric))(a.config.chart.zoom.enabled||a.config.chart.selection&&a.config.chart.selection.enabled||a.config.chart.pan&&a.config.chart.pan.enabled)&&i.zoomPanSelection.init({xyRatios:e.xyRatios});else{var c=a.config.chart.toolbar.tools;["zoom","zoomin","zoomout","selection","pan","reset"].forEach((function(t){c[t]=!1}))}a.config.chart.toolbar.show&&!a.globals.allSeriesCollapsed&&i.toolbar.createToolbar()}a.globals.memory.methodsToExec.length>0&&a.globals.memory.methodsToExec.forEach((function(t){t.method(t.params,!1,t.context)})),a.globals.axisCharts||a.globals.noData||i.core.resizeNonAxisCharts(),s(i)}))}},{key:"destroy",value:function(){window.removeEventListener("resize",this.windowResizeHandler),window.removeResizeListener(this.el.parentNode,this._parentResizeCallback.bind(this));var t=this.w.config.chart.id;t&&Apex._chartInstances.forEach((function(e,i){e.id===t&&Apex._chartInstances.splice(i,1)})),new Mt(this.ctx).clear()}},{key:"updateOptions",value:function(t){var e=this,i=arguments.length>1&&void 0!==arguments[1]&&arguments[1],a=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],s=!(arguments.length>3&&void 0!==arguments[3])||arguments[3],r=!(arguments.length>4&&void 0!==arguments[4])||arguments[4],n=this.w;return t.series&&(this.series.resetSeries(!1,!0,!1),t.series.length&&t.series[0].data&&(t.series=t.series.map((function(t,i){return e.updateHelpers._extendSeries(t,i)}))),this.updateHelpers.revertDefaultAxisMinMax()),t.xaxis&&(t=this.updateHelpers.forceXAxisUpdate(t)),t.yaxis&&(t=this.updateHelpers.forceYAxisUpdate(t)),n.globals.collapsedSeriesIndices.length>0&&this.series.clearPreviousPaths(),t.theme&&(t=this.theme.updateThemeOptions(t)),this.updateHelpers._updateOptions(t,i,a,s,r)}},{key:"updateSeries",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];return this.series.resetSeries(!1),this.updateHelpers.revertDefaultAxisMinMax(),this.updateHelpers._updateSeries(t,e,i)}},{key:"appendSeries",value:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],a=this.w.config.series.slice();return a.push(t),this.series.resetSeries(!1),this.updateHelpers.revertDefaultAxisMinMax(),this.updateHelpers._updateSeries(a,e,i)}},{key:"appendData",value:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=this;i.w.globals.dataChanged=!0,i.series.getPreviousPaths();for(var a=i.w.config.series.slice(),s=0;s<a.length;s++)if(void 0!==t[s])for(var r=0;r<t[s].data.length;r++)a[s].data.push(t[s].data[r]);return i.w.config.series=a,e&&(i.w.globals.initialSeries=JSON.parse(JSON.stringify(i.w.config.series))),this.update()}},{key:"update",value:function(t){var e=this;return new Promise((function(i,a){new Mt(e.ctx).clear();var s=e.create(e.w.config.series,t);if(!s)return i(e);e.mount(s).then((function(){"function"==typeof e.w.config.chart.events.updated&&e.w.config.chart.events.updated(e,e.w),e.events.fireEvent("updated",[e,e.w]),e.w.globals.isDirty=!0,i(e)})).catch((function(t){a(t)}))}))}},{key:"getSyncedCharts",value:function(){var t=this.getGroupedCharts(),e=[this];return t.length&&(e=[],t.forEach((function(t){e.push(t)}))),e}},{key:"getGroupedCharts",value:function(){var t=this;return Apex._chartInstances.filter((function(t){if(t.group)return!0})).map((function(e){return t.w.config.chart.group===e.group?e.chart:t}))}},{key:"toggleSeries",value:function(t){return this.series.toggleSeries(t)}},{key:"showSeries",value:function(t){this.series.showSeries(t)}},{key:"hideSeries",value:function(t){this.series.hideSeries(t)}},{key:"resetSeries",value:function(){var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];this.series.resetSeries(t,e)}},{key:"addEventListener",value:function(t,e){this.events.addEventListener(t,e)}},{key:"removeEventListener",value:function(t,e){this.events.removeEventListener(t,e)}},{key:"addXaxisAnnotation",value:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:void 0,a=this;i&&(a=i),a.annotations.addXaxisAnnotationExternal(t,e,a)}},{key:"addYaxisAnnotation",value:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:void 0,a=this;i&&(a=i),a.annotations.addYaxisAnnotationExternal(t,e,a)}},{key:"addPointAnnotation",value:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:void 0,a=this;i&&(a=i),a.annotations.addPointAnnotationExternal(t,e,a)}},{key:"clearAnnotations",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:void 0,e=this;t&&(e=t),e.annotations.clearAnnotations(e)}},{key:"removeAnnotation",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,i=this;e&&(i=e),i.annotations.removeAnnotation(i,t)}},{key:"getChartArea",value:function(){return this.w.globals.dom.baseEl.querySelector(".apexcharts-inner")}},{key:"getSeriesTotalXRange",value:function(t,e){return this.coreUtils.getSeriesTotalsXRange(t,e)}},{key:"getHighestValueInSeries",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=new U(this.ctx);return e.getMinYMaxY(t).highestY}},{key:"getLowestValueInSeries",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=new U(this.ctx);return e.getMinYMaxY(t).lowestY}},{key:"getSeriesTotal",value:function(){return this.w.globals.seriesTotals}},{key:"toggleDataPointSelection",value:function(t,e){return this.updateHelpers.toggleDataPointSelection(t,e)}},{key:"zoomX",value:function(t,e){this.ctx.toolbar.zoomUpdateOptions(t,e)}},{key:"setLocale",value:function(t){this.localization.setCurrentLocaleValues(t)}},{key:"dataURI",value:function(){return new V(this.ctx).dataURI()}},{key:"paper",value:function(){return this.w.globals.dom.Paper}},{key:"_parentResizeCallback",value:function(){!this.w.globals.noData&&this.w.globals.animationEnded&&this.w.config.chart.redrawOnParentResize&&this._windowResize()}},{key:"_windowResize",value:function(){var t=this;clearTimeout(this.w.globals.resizeTimer),this.w.globals.resizeTimer=window.setTimeout((function(){t.w.globals.resized=!0,t.w.globals.dataChanged=!1,t.ctx.update()}),150)}}],[{key:"getChartByID",value:function(t){var e=Apex._chartInstances.filter((function(e){return e.id===t}))[0];return e&&e.chart}},{key:"initOnLoad",value:function(){for(var e=document.querySelectorAll("[data-apexcharts]"),i=0;i<e.length;i++){new t(e[i],JSON.parse(e[i].getAttribute("data-options"))).render()}}},{key:"exec",value:function(t,e){var i=this.getChartByID(t);if(i){i.w.globals.isExecCalled=!0;var a=null;if(-1!==i.publicMethods.indexOf(e)){for(var s=arguments.length,r=new Array(s>2?s-2:0),n=2;n<s;n++)r[n-2]=arguments[n];a=i[e].apply(i,r)}return a}}},{key:"merge",value:function(t,e){return g.extend(t,e)}}]),t}()}));
diff --git a/demo/dist/libs/jquery/dist/jquery.slim.min.js b/demo/dist/libs/jquery/dist/jquery.slim.min.js
index af151cfe3..a3bdd4625 100644
--- a/demo/dist/libs/jquery/dist/jquery.slim.min.js
+++ b/demo/dist/libs/jquery/dist/jquery.slim.min.js
@@ -1,2 +1,2 @@
-/*! jQuery v3.4.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/parseXML,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-event/ajax,-effects,-effects/Tween,-effects/animatedSelector | (c) JS Foundation and other contributors | jquery.org/license */
-!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(g,e){"use strict";var t=[],v=g.document,r=Object.getPrototypeOf,s=t.slice,y=t.concat,u=t.push,i=t.indexOf,n={},o=n.toString,m=n.hasOwnProperty,a=m.toString,l=a.call(Object),b={},x=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType},w=function(e){return null!=e&&e===e.window},c={type:!0,src:!0,nonce:!0,noModule:!0};function C(e,t,n){var r,i,o=(n=n||v).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function T(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.4.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/parseXML,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-event/ajax,-effects,-effects/Tween,-effects/animatedSelector",E=function(e,t){return new E.fn.init(e,t)},d=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;function p(e){var t=!!e&&"length"in e&&e.length,n=T(e);return!x(e)&&!w(e)&&("array"===n||0===t||"number"==typeof t&&0<t&&t-1 in e)}E.fn=E.prototype={jquery:f,constructor:E,length:0,toArray:function(){return s.call(this)},get:function(e){return null==e?s.call(this):e<0?this[e+this.length]:this[e]},pushStack:function(e){var t=E.merge(this.constructor(),e);return t.prevObject=this,t},each:function(e){return E.each(this,e)},map:function(n){return this.pushStack(E.map(this,function(e,t){return n.call(e,t,e)}))},slice:function(){return this.pushStack(s.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(e){var t=this.length,n=+e+(e<0?t:0);return this.pushStack(0<=n&&n<t?[this[n]]:[])},end:function(){return this.prevObject||this.constructor()},push:u,sort:t.sort,splice:t.splice},E.extend=E.fn.extend=function(){var e,t,n,r,i,o,a=arguments[0]||{},s=1,u=arguments.length,l=!1;for("boolean"==typeof a&&(l=a,a=arguments[s]||{},s++),"object"==typeof a||x(a)||(a={}),s===u&&(a=this,s--);s<u;s++)if(null!=(e=arguments[s]))for(t in e)r=e[t],"__proto__"!==t&&a!==r&&(l&&r&&(E.isPlainObject(r)||(i=Array.isArray(r)))?(n=a[t],o=i&&!Array.isArray(n)?[]:i||E.isPlainObject(n)?n:{},i=!1,a[t]=E.extend(l,o,r)):void 0!==r&&(a[t]=r));return a},E.extend({expando:"jQuery"+(f+Math.random()).replace(/\D/g,""),isReady:!0,error:function(e){throw new Error(e)},noop:function(){},isPlainObject:function(e){var t,n;return!(!e||"[object Object]"!==o.call(e))&&(!(t=r(e))||"function"==typeof(n=m.call(t,"constructor")&&t.constructor)&&a.call(n)===l)},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},globalEval:function(e,t){C(e,{nonce:t&&t.nonce})},each:function(e,t){var n,r=0;if(p(e)){for(n=e.length;r<n;r++)if(!1===t.call(e[r],r,e[r]))break}else for(r in e)if(!1===t.call(e[r],r,e[r]))break;return e},trim:function(e){return null==e?"":(e+"").replace(d,"")},makeArray:function(e,t){var n=t||[];return null!=e&&(p(Object(e))?E.merge(n,"string"==typeof e?[e]:e):u.call(n,e)),n},inArray:function(e,t,n){return null==t?-1:i.call(t,e,n)},merge:function(e,t){for(var n=+t.length,r=0,i=e.length;r<n;r++)e[i++]=t[r];return e.length=i,e},grep:function(e,t,n){for(var r=[],i=0,o=e.length,a=!n;i<o;i++)!t(e[i],i)!==a&&r.push(e[i]);return r},map:function(e,t,n){var r,i,o=0,a=[];if(p(e))for(r=e.length;o<r;o++)null!=(i=t(e[o],o,n))&&a.push(i);else for(o in e)null!=(i=t(e[o],o,n))&&a.push(i);return y.apply([],a)},guid:1,support:b}),"function"==typeof Symbol&&(E.fn[Symbol.iterator]=t[Symbol.iterator]),E.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(e,t){n["[object "+t+"]"]=t.toLowerCase()});var h=function(n){var e,p,x,o,i,h,f,g,w,u,l,C,T,a,E,v,s,c,y,N="sizzle"+1*new Date,m=n.document,A=0,r=0,d=ue(),b=ue(),k=ue(),S=ue(),D=function(e,t){return e===t&&(l=!0),0},L={}.hasOwnProperty,t=[],j=t.pop,q=t.push,O=t.push,P=t.slice,H=function(e,t){for(var n=0,r=e.length;n<r;n++)if(e[n]===t)return n;return-1},I="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",R="[\\x20\\t\\r\\n\\f]",B="(?:\\\\.|[\\w-]|[^\0-\\xa0])+",M="\\["+R+"*("+B+")(?:"+R+"*([*^$|!~]?=)"+R+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+B+"))|)"+R+"*\\]",W=":("+B+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+M+")*)|.*)\\)|)",$=new RegExp(R+"+","g"),F=new RegExp("^"+R+"+|((?:^|[^\\\\])(?:\\\\.)*)"+R+"+$","g"),z=new RegExp("^"+R+"*,"+R+"*"),_=new RegExp("^"+R+"*([>+~]|"+R+")"+R+"*"),U=new RegExp(R+"|>"),V=new RegExp(W),X=new RegExp("^"+B+"$"),Q={ID:new RegExp("^#("+B+")"),CLASS:new RegExp("^\\.("+B+")"),TAG:new RegExp("^("+B+"|[*])"),ATTR:new RegExp("^"+M),PSEUDO:new RegExp("^"+W),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+R+"*(even|odd|(([+-]|)(\\d*)n|)"+R+"*(?:([+-]|)"+R+"*(\\d+)|))"+R+"*\\)|)","i"),bool:new RegExp("^(?:"+I+")$","i"),needsContext:new RegExp("^"+R+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+R+"*((?:-\\d)?\\d*)"+R+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,G=/^(?:input|select|textarea|button)$/i,K=/^h\d$/i,J=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\([\\da-f]{1,6}"+R+"?|("+R+")|.)","ig"),ne=function(e,t,n){var r="0x"+t-65536;return r!=r||n?t:r<0?String.fromCharCode(r+65536):String.fromCharCode(r>>10|55296,1023&r|56320)},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){C()},ae=xe(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{O.apply(t=P.call(m.childNodes),m.childNodes),t[m.childNodes.length].nodeType}catch(e){O={apply:t.length?function(e,t){q.apply(e,P.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,d=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==d&&9!==d&&11!==d)return n;if(!r&&((e?e.ownerDocument||e:m)!==T&&C(e),e=e||T,E)){if(11!==d&&(u=Z.exec(t)))if(i=u[1]){if(9===d){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return O.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&p.getElementsByClassName&&e.getElementsByClassName)return O.apply(n,e.getElementsByClassName(i)),n}if(p.qsa&&!S[t+" "]&&(!v||!v.test(t))&&(1!==d||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===d&&U.test(t)){(s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=N),o=(l=h(t)).length;while(o--)l[o]="#"+s+" "+be(l[o]);c=l.join(","),f=ee.test(t)&&ye(e.parentNode)||e}try{return O.apply(n,f.querySelectorAll(c)),n}catch(e){S(t,!0)}finally{s===N&&e.removeAttribute("id")}}}return g(t.replace(F,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>x.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[N]=!0,e}function ce(e){var t=T.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)x.attrHandle[n[r]]=t}function de(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function pe(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in p=se.support={},i=se.isXML=function(e){var t=e.namespaceURI,n=(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},C=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:m;return r!==T&&9===r.nodeType&&r.documentElement&&(a=(T=r).documentElement,E=!i(T),m!==T&&(n=T.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),p.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),p.getElementsByTagName=ce(function(e){return e.appendChild(T.createComment("")),!e.getElementsByTagName("*").length}),p.getElementsByClassName=J.test(T.getElementsByClassName),p.getById=ce(function(e){return a.appendChild(e).id=N,!T.getElementsByName||!T.getElementsByName(N).length}),p.getById?(x.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},x.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(x.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},x.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),x.find.TAG=p.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):p.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},x.find.CLASS=p.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(p.qsa=J.test(T.querySelectorAll))&&(ce(function(e){a.appendChild(e).innerHTML="<a id='"+N+"'></a><select id='"+N+"-\r\\' msallowcapture=''><option selected=''></option></select>",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+R+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+R+"*(?:value|"+I+")"),e.querySelectorAll("[id~="+N+"-]").length||v.push("~="),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+N+"+*").length||v.push(".#.+[+~]")}),ce(function(e){e.innerHTML="<a href='' disabled='disabled'></a><select disabled='disabled'><option/></select>";var t=T.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+R+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(p.matchesSelector=J.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){p.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",W)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=J.test(a.compareDocumentPosition),y=t||J.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},D=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)===(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!p.sortDetached&&t.compareDocumentPosition(e)===n?e===T||e.ownerDocument===m&&y(m,e)?-1:t===T||t.ownerDocument===m&&y(m,t)?1:u?H(u,e)-H(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e===T?-1:t===T?1:i?-1:o?1:u?H(u,e)-H(u,t):0;if(i===o)return de(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?de(a[r],s[r]):a[r]===m?-1:s[r]===m?1:0}),T},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if((e.ownerDocument||e)!==T&&C(e),p.matchesSelector&&E&&!S[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||p.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){S(t,!0)}return 0<se(t,T,null,[e]).length},se.contains=function(e,t){return(e.ownerDocument||e)!==T&&C(e),y(e,t)},se.attr=function(e,t){(e.ownerDocument||e)!==T&&C(e);var n=x.attrHandle[t.toLowerCase()],r=n&&L.call(x.attrHandle,t.toLowerCase())?n(e,t,!E):void 0;return void 0!==r?r:p.attributes||!E?e.getAttribute(t):(r=e.getAttributeNode(t))&&r.specified?r.value:null},se.escape=function(e){return(e+"").replace(re,ie)},se.error=function(e){throw new Error("Syntax error, unrecognized expression: "+e)},se.uniqueSort=function(e){var t,n=[],r=0,i=0;if(l=!p.detectDuplicates,u=!p.sortStable&&e.slice(0),e.sort(D),l){while(t=e[i++])t===e[i]&&(r=n.push(i));while(r--)e.splice(n[r],1)}return u=null,e},o=se.getText=function(e){var t,n="",r=0,i=e.nodeType;if(i){if(1===i||9===i||11===i){if("string"==typeof e.textContent)return e.textContent;for(e=e.firstChild;e;e=e.nextSibling)n+=o(e)}else if(3===i||4===i)return e.nodeValue}else while(t=e[r++])n+=o(t);return n},(x=se.selectors={cacheLength:50,createPseudo:le,match:Q,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return Q.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&V.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=d[e+" "];return t||(t=new RegExp("(^|"+R+")"+e+"("+R+"|$)"))&&d(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1<t.indexOf(i):"$="===r?i&&t.slice(-i.length)===i:"~="===r?-1<(" "+t.replace($," ")+" ").indexOf(i):"|="===r&&(t===i||t.slice(0,i.length+1)===i+"-"))}},CHILD:function(h,e,t,g,v){var y="nth"!==h.slice(0,3),m="last"!==h.slice(-4),b="of-type"===e;return 1===g&&0===v?function(e){return!!e.parentNode}:function(e,t,n){var r,i,o,a,s,u,l=y!==m?"nextSibling":"previousSibling",c=e.parentNode,f=b&&e.nodeName.toLowerCase(),d=!n&&!b,p=!1;if(c){if(y){while(l){a=e;while(a=a[l])if(b?a.nodeName.toLowerCase()===f:1===a.nodeType)return!1;u=l="only"===h&&!u&&"nextSibling"}return!0}if(u=[m?c.firstChild:c.lastChild],m&&d){p=(s=(r=(i=(o=(a=c)[N]||(a[N]={}))[a.uniqueID]||(o[a.uniqueID]={}))[h]||[])[0]===A&&r[1])&&r[2],a=s&&c.childNodes[s];while(a=++s&&a&&a[l]||(p=s=0)||u.pop())if(1===a.nodeType&&++p&&a===e){i[h]=[A,s,p];break}}else if(d&&(p=s=(r=(i=(o=(a=e)[N]||(a[N]={}))[a.uniqueID]||(o[a.uniqueID]={}))[h]||[])[0]===A&&r[1]),!1===p)while(a=++s&&a&&a[l]||(p=s=0)||u.pop())if((b?a.nodeName.toLowerCase()===f:1===a.nodeType)&&++p&&(d&&((i=(o=a[N]||(a[N]={}))[a.uniqueID]||(o[a.uniqueID]={}))[h]=[A,p]),a===e))break;return(p-=v)===g||p%g==0&&0<=p/g}}},PSEUDO:function(e,o){var t,a=x.pseudos[e]||x.setFilters[e.toLowerCase()]||se.error("unsupported pseudo: "+e);return a[N]?a(o):1<a.length?(t=[e,e,"",o],x.setFilters.hasOwnProperty(e.toLowerCase())?le(function(e,t){var n,r=a(e,o),i=r.length;while(i--)e[n=H(e,r[i])]=!(t[n]=r[i])}):function(e){return a(e,0,t)}):a}},pseudos:{not:le(function(e){var r=[],i=[],s=f(e.replace(F,"$1"));return s[N]?le(function(e,t,n,r){var i,o=s(e,null,r,[]),a=e.length;while(a--)(i=o[a])&&(e[a]=!(t[a]=i))}):function(e,t,n){return r[0]=e,s(r,null,n,i),r[0]=null,!i.pop()}}),has:le(function(t){return function(e){return 0<se(t,e).length}}),contains:le(function(t){return t=t.replace(te,ne),function(e){return-1<(e.textContent||o(e)).indexOf(t)}}),lang:le(function(n){return X.test(n||"")||se.error("unsupported lang: "+n),n=n.replace(te,ne).toLowerCase(),function(e){var t;do{if(t=E?e.lang:e.getAttribute("xml:lang")||e.getAttribute("lang"))return(t=t.toLowerCase())===n||0===t.indexOf(n+"-")}while((e=e.parentNode)&&1===e.nodeType);return!1}}),target:function(e){var t=n.location&&n.location.hash;return t&&t.slice(1)===e.id},root:function(e){return e===a},focus:function(e){return e===T.activeElement&&(!T.hasFocus||T.hasFocus())&&!!(e.type||e.href||~e.tabIndex)},enabled:ge(!1),disabled:ge(!0),checked:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&!!e.checked||"option"===t&&!!e.selected},selected:function(e){return e.parentNode&&e.parentNode.selectedIndex,!0===e.selected},empty:function(e){for(e=e.firstChild;e;e=e.nextSibling)if(e.nodeType<6)return!1;return!0},parent:function(e){return!x.pseudos.empty(e)},header:function(e){return K.test(e.nodeName)},input:function(e){return G.test(e.nodeName)},button:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&"button"===e.type||"button"===t},text:function(e){var t;return"input"===e.nodeName.toLowerCase()&&"text"===e.type&&(null==(t=e.getAttribute("type"))||"text"===t.toLowerCase())},first:ve(function(){return[0]}),last:ve(function(e,t){return[t-1]}),eq:ve(function(e,t,n){return[n<0?n+t:n]}),even:ve(function(e,t){for(var n=0;n<t;n+=2)e.push(n);return e}),odd:ve(function(e,t){for(var n=1;n<t;n+=2)e.push(n);return e}),lt:ve(function(e,t,n){for(var r=n<0?n+t:t<n?t:n;0<=--r;)e.push(r);return e}),gt:ve(function(e,t,n){for(var r=n<0?n+t:n;++r<t;)e.push(r);return e})}}).pseudos.nth=x.pseudos.eq,{radio:!0,checkbox:!0,file:!0,password:!0,image:!0})x.pseudos[e]=pe(e);for(e in{submit:!0,reset:!0})x.pseudos[e]=he(e);function me(){}function be(e){for(var t=0,n=e.length,r="";t<n;t++)r+=e[t].value;return r}function xe(s,e,t){var u=e.dir,l=e.next,c=l||u,f=t&&"parentNode"===c,d=r++;return e.first?function(e,t,n){while(e=e[u])if(1===e.nodeType||f)return s(e,t,n);return!1}:function(e,t,n){var r,i,o,a=[A,d];if(n){while(e=e[u])if((1===e.nodeType||f)&&s(e,t,n))return!0}else while(e=e[u])if(1===e.nodeType||f)if(i=(o=e[N]||(e[N]={}))[e.uniqueID]||(o[e.uniqueID]={}),l&&l===e.nodeName.toLowerCase())e=e[u]||e;else{if((r=i[c])&&r[0]===A&&r[1]===d)return a[2]=r[2];if((i[c]=a)[2]=s(e,t,n))return!0}return!1}}function we(i){return 1<i.length?function(e,t,n){var r=i.length;while(r--)if(!i[r](e,t,n))return!1;return!0}:i[0]}function Ce(e,t,n,r,i){for(var o,a=[],s=0,u=e.length,l=null!=t;s<u;s++)(o=e[s])&&(n&&!n(o,r,i)||(a.push(o),l&&t.push(s)));return a}function Te(p,h,g,v,y,e){return v&&!v[N]&&(v=Te(v)),y&&!y[N]&&(y=Te(y,e)),le(function(e,t,n,r){var i,o,a,s=[],u=[],l=t.length,c=e||function(e,t,n){for(var r=0,i=t.length;r<i;r++)se(e,t[r],n);return n}(h||"*",n.nodeType?[n]:n,[]),f=!p||!e&&h?c:Ce(c,s,p,n,r),d=g?y||(e?p:l||v)?[]:t:f;if(g&&g(f,d,n,r),v){i=Ce(d,u),v(i,[],n,r),o=i.length;while(o--)(a=i[o])&&(d[u[o]]=!(f[u[o]]=a))}if(e){if(y||p){if(y){i=[],o=d.length;while(o--)(a=d[o])&&i.push(f[o]=a);y(null,d=[],i,r)}o=d.length;while(o--)(a=d[o])&&-1<(i=y?H(e,a):s[o])&&(e[i]=!(t[i]=a))}}else d=Ce(d===t?d.splice(l,d.length):d),y?y(null,t,d,r):O.apply(t,d)})}function Ee(e){for(var i,t,n,r=e.length,o=x.relative[e[0].type],a=o||x.relative[" "],s=o?1:0,u=xe(function(e){return e===i},a,!0),l=xe(function(e){return-1<H(i,e)},a,!0),c=[function(e,t,n){var r=!o&&(n||t!==w)||((i=t).nodeType?u(e,t,n):l(e,t,n));return i=null,r}];s<r;s++)if(t=x.relative[e[s].type])c=[xe(we(c),t)];else{if((t=x.filter[e[s].type].apply(null,e[s].matches))[N]){for(n=++s;n<r;n++)if(x.relative[e[n].type])break;return Te(1<s&&we(c),1<s&&be(e.slice(0,s-1).concat({value:" "===e[s-2].type?"*":""})).replace(F,"$1"),t,s<n&&Ee(e.slice(s,n)),n<r&&Ee(e=e.slice(n)),n<r&&be(e))}c.push(t)}return we(c)}return me.prototype=x.filters=x.pseudos,x.setFilters=new me,h=se.tokenize=function(e,t){var n,r,i,o,a,s,u,l=b[e+" "];if(l)return t?0:l.slice(0);a=e,s=[],u=x.preFilter;while(a){for(o in n&&!(r=z.exec(a))||(r&&(a=a.slice(r[0].length)||a),s.push(i=[])),n=!1,(r=_.exec(a))&&(n=r.shift(),i.push({value:n,type:r[0].replace(F," ")}),a=a.slice(n.length)),x.filter)!(r=Q[o].exec(a))||u[o]&&!(r=u[o](r))||(n=r.shift(),i.push({value:n,type:o,matches:r}),a=a.slice(n.length));if(!n)break}return t?a.length:a?se.error(e):b(e,s).slice(0)},f=se.compile=function(e,t){var n,v,y,m,b,r,i=[],o=[],a=k[e+" "];if(!a){t||(t=h(e)),n=t.length;while(n--)(a=Ee(t[n]))[N]?i.push(a):o.push(a);(a=k(e,(v=o,m=0<(y=i).length,b=0<v.length,r=function(e,t,n,r,i){var o,a,s,u=0,l="0",c=e&&[],f=[],d=w,p=e||b&&x.find.TAG("*",i),h=A+=null==d?1:Math.random()||.1,g=p.length;for(i&&(w=t===T||t||i);l!==g&&null!=(o=p[l]);l++){if(b&&o){a=0,t||o.ownerDocument===T||(C(o),n=!E);while(s=v[a++])if(s(o,t||T,n)){r.push(o);break}i&&(A=h)}m&&((o=!s&&o)&&u--,e&&c.push(o))}if(u+=l,m&&l!==u){a=0;while(s=y[a++])s(c,f,t,n);if(e){if(0<u)while(l--)c[l]||f[l]||(f[l]=j.call(r));f=Ce(f)}O.apply(r,f),i&&!e&&0<f.length&&1<u+y.length&&se.uniqueSort(r)}return i&&(A=h,w=d),c},m?le(r):r))).selector=e}return a},g=se.select=function(e,t,n,r){var i,o,a,s,u,l="function"==typeof e&&e,c=!r&&h(e=l.selector||e);if(n=n||[],1===c.length){if(2<(o=c[0]=c[0].slice(0)).length&&"ID"===(a=o[0]).type&&9===t.nodeType&&E&&x.relative[o[1].type]){if(!(t=(x.find.ID(a.matches[0].replace(te,ne),t)||[])[0]))return n;l&&(t=t.parentNode),e=e.slice(o.shift().value.length)}i=Q.needsContext.test(e)?0:o.length;while(i--){if(a=o[i],x.relative[s=a.type])break;if((u=x.find[s])&&(r=u(a.matches[0].replace(te,ne),ee.test(o[0].type)&&ye(t.parentNode)||t))){if(o.splice(i,1),!(e=r.length&&be(o)))return O.apply(n,r),n;break}}}return(l||f(e,c))(r,t,!E,n,!t||ee.test(e)&&ye(t.parentNode)||t),n},p.sortStable=N.split("").sort(D).join("")===N,p.detectDuplicates=!!l,C(),p.sortDetached=ce(function(e){return 1&e.compareDocumentPosition(T.createElement("fieldset"))}),ce(function(e){return e.innerHTML="<a href='#'></a>","#"===e.firstChild.getAttribute("href")})||fe("type|href|height|width",function(e,t,n){if(!n)return e.getAttribute(t,"type"===t.toLowerCase()?1:2)}),p.attributes&&ce(function(e){return e.innerHTML="<input/>",e.firstChild.setAttribute("value",""),""===e.firstChild.getAttribute("value")})||fe("value",function(e,t,n){if(!n&&"input"===e.nodeName.toLowerCase())return e.defaultValue}),ce(function(e){return null==e.getAttribute("disabled")})||fe(I,function(e,t,n){var r;if(!n)return!0===e[t]?t.toLowerCase():(r=e.getAttributeNode(t))&&r.specified?r.value:null}),se}(g);E.find=h,E.expr=h.selectors,E.expr[":"]=E.expr.pseudos,E.uniqueSort=E.unique=h.uniqueSort,E.text=h.getText,E.isXMLDoc=h.isXML,E.contains=h.contains,E.escapeSelector=h.escape;var N=function(e,t,n){var r=[],i=void 0!==n;while((e=e[t])&&9!==e.nodeType)if(1===e.nodeType){if(i&&E(e).is(n))break;r.push(e)}return r},A=function(e,t){for(var n=[];e;e=e.nextSibling)1===e.nodeType&&e!==t&&n.push(e);return n},k=E.expr.match.needsContext;function S(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()}var D=/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function L(e,n,r){return x(n)?E.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?E.grep(e,function(e){return e===n!==r}):"string"!=typeof n?E.grep(e,function(e){return-1<i.call(n,e)!==r}):E.filter(n,e,r)}E.filter=function(e,t,n){var r=t[0];return n&&(e=":not("+e+")"),1===t.length&&1===r.nodeType?E.find.matchesSelector(r,e)?[r]:[]:E.find.matches(e,E.grep(t,function(e){return 1===e.nodeType}))},E.fn.extend({find:function(e){var t,n,r=this.length,i=this;if("string"!=typeof e)return this.pushStack(E(e).filter(function(){for(t=0;t<r;t++)if(E.contains(i[t],this))return!0}));for(n=this.pushStack([]),t=0;t<r;t++)E.find(e,i[t],n);return 1<r?E.uniqueSort(n):n},filter:function(e){return this.pushStack(L(this,e||[],!1))},not:function(e){return this.pushStack(L(this,e||[],!0))},is:function(e){return!!L(this,"string"==typeof e&&k.test(e)?E(e):e||[],!1).length}});var j,q=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/;(E.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||j,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:q.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof E?t[0]:t,E.merge(this,E.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:v,!0)),D.test(r[1])&&E.isPlainObject(t))for(r in t)x(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=v.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):x(e)?void 0!==n.ready?n.ready(e):e(E):E.makeArray(e,this)}).prototype=E.fn,j=E(v);var O=/^(?:parents|prev(?:Until|All))/,P={children:!0,contents:!0,next:!0,prev:!0};function H(e,t){while((e=e[t])&&1!==e.nodeType);return e}E.fn.extend({has:function(e){var t=E(e,this),n=t.length;return this.filter(function(){for(var e=0;e<n;e++)if(E.contains(this,t[e]))return!0})},closest:function(e,t){var n,r=0,i=this.length,o=[],a="string"!=typeof e&&E(e);if(!k.test(e))for(;r<i;r++)for(n=this[r];n&&n!==t;n=n.parentNode)if(n.nodeType<11&&(a?-1<a.index(n):1===n.nodeType&&E.find.matchesSelector(n,e))){o.push(n);break}return this.pushStack(1<o.length?E.uniqueSort(o):o)},index:function(e){return e?"string"==typeof e?i.call(E(e),this[0]):i.call(this,e.jquery?e[0]:e):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(e,t){return this.pushStack(E.uniqueSort(E.merge(this.get(),E(e,t))))},addBack:function(e){return this.add(null==e?this.prevObject:this.prevObject.filter(e))}}),E.each({parent:function(e){var t=e.parentNode;return t&&11!==t.nodeType?t:null},parents:function(e){return N(e,"parentNode")},parentsUntil:function(e,t,n){return N(e,"parentNode",n)},next:function(e){return H(e,"nextSibling")},prev:function(e){return H(e,"previousSibling")},nextAll:function(e){return N(e,"nextSibling")},prevAll:function(e){return N(e,"previousSibling")},nextUntil:function(e,t,n){return N(e,"nextSibling",n)},prevUntil:function(e,t,n){return N(e,"previousSibling",n)},siblings:function(e){return A((e.parentNode||{}).firstChild,e)},children:function(e){return A(e.firstChild)},contents:function(e){return"undefined"!=typeof e.contentDocument?e.contentDocument:(S(e,"template")&&(e=e.content||e),E.merge([],e.childNodes))}},function(r,i){E.fn[r]=function(e,t){var n=E.map(this,i,e);return"Until"!==r.slice(-5)&&(t=e),t&&"string"==typeof t&&(n=E.filter(t,n)),1<this.length&&(P[r]||E.uniqueSort(n),O.test(r)&&n.reverse()),this.pushStack(n)}});var I=/[^\x20\t\r\n\f]+/g;function R(e){return e}function B(e){throw e}function M(e,t,n,r){var i;try{e&&x(i=e.promise)?i.call(e).done(t).fail(n):e&&x(i=e.then)?i.call(e,t,n):t.apply(void 0,[e].slice(r))}catch(e){n.apply(void 0,[e])}}E.Callbacks=function(r){var e,n;r="string"==typeof r?(e=r,n={},E.each(e.match(I)||[],function(e,t){n[t]=!0}),n):E.extend({},r);var i,t,o,a,s=[],u=[],l=-1,c=function(){for(a=a||r.once,o=i=!0;u.length;l=-1){t=u.shift();while(++l<s.length)!1===s[l].apply(t[0],t[1])&&r.stopOnFalse&&(l=s.length,t=!1)}r.memory||(t=!1),i=!1,a&&(s=t?[]:"")},f={add:function(){return s&&(t&&!i&&(l=s.length-1,u.push(t)),function n(e){E.each(e,function(e,t){x(t)?r.unique&&f.has(t)||s.push(t):t&&t.length&&"string"!==T(t)&&n(t)})}(arguments),t&&!i&&c()),this},remove:function(){return E.each(arguments,function(e,t){var n;while(-1<(n=E.inArray(t,s,n)))s.splice(n,1),n<=l&&l--}),this},has:function(e){return e?-1<E.inArray(e,s):0<s.length},empty:function(){return s&&(s=[]),this},disable:function(){return a=u=[],s=t="",this},disabled:function(){return!s},lock:function(){return a=u=[],t||i||(s=t=""),this},locked:function(){return!!a},fireWith:function(e,t){return a||(t=[e,(t=t||[]).slice?t.slice():t],u.push(t),i||c()),this},fire:function(){return f.fireWith(this,arguments),this},fired:function(){return!!o}};return f},E.extend({Deferred:function(e){var o=[["notify","progress",E.Callbacks("memory"),E.Callbacks("memory"),2],["resolve","done",E.Callbacks("once memory"),E.Callbacks("once memory"),0,"resolved"],["reject","fail",E.Callbacks("once memory"),E.Callbacks("once memory"),1,"rejected"]],i="pending",a={state:function(){return i},always:function(){return s.done(arguments).fail(arguments),this},"catch":function(e){return a.then(null,e)},pipe:function(){var i=arguments;return E.Deferred(function(r){E.each(o,function(e,t){var n=x(i[t[4]])&&i[t[4]];s[t[1]](function(){var e=n&&n.apply(this,arguments);e&&x(e.promise)?e.promise().progress(r.notify).done(r.resolve).fail(r.reject):r[t[0]+"With"](this,n?[e]:arguments)})}),i=null}).promise()},then:function(t,n,r){var u=0;function l(i,o,a,s){return function(){var n=this,r=arguments,e=function(){var e,t;if(!(i<u)){if((e=a.apply(n,r))===o.promise())throw new TypeError("Thenable self-resolution");t=e&&("object"==typeof e||"function"==typeof e)&&e.then,x(t)?s?t.call(e,l(u,o,R,s),l(u,o,B,s)):(u++,t.call(e,l(u,o,R,s),l(u,o,B,s),l(u,o,R,o.notifyWith))):(a!==R&&(n=void 0,r=[e]),(s||o.resolveWith)(n,r))}},t=s?e:function(){try{e()}catch(e){E.Deferred.exceptionHook&&E.Deferred.exceptionHook(e,t.stackTrace),u<=i+1&&(a!==B&&(n=void 0,r=[e]),o.rejectWith(n,r))}};i?t():(E.Deferred.getStackHook&&(t.stackTrace=E.Deferred.getStackHook()),g.setTimeout(t))}}return E.Deferred(function(e){o[0][3].add(l(0,e,x(r)?r:R,e.notifyWith)),o[1][3].add(l(0,e,x(t)?t:R)),o[2][3].add(l(0,e,x(n)?n:B))}).promise()},promise:function(e){return null!=e?E.extend(e,a):a}},s={};return E.each(o,function(e,t){var n=t[2],r=t[5];a[t[1]]=n.add,r&&n.add(function(){i=r},o[3-e][2].disable,o[3-e][3].disable,o[0][2].lock,o[0][3].lock),n.add(t[3].fire),s[t[0]]=function(){return s[t[0]+"With"](this===s?void 0:this,arguments),this},s[t[0]+"With"]=n.fireWith}),a.promise(s),e&&e.call(s,s),s},when:function(e){var n=arguments.length,t=n,r=Array(t),i=s.call(arguments),o=E.Deferred(),a=function(t){return function(e){r[t]=this,i[t]=1<arguments.length?s.call(arguments):e,--n||o.resolveWith(r,i)}};if(n<=1&&(M(e,o.done(a(t)).resolve,o.reject,!n),"pending"===o.state()||x(i[t]&&i[t].then)))return o.then();while(t--)M(i[t],a(t),o.reject);return o.promise()}});var W=/^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;E.Deferred.exceptionHook=function(e,t){g.console&&g.console.warn&&e&&W.test(e.name)&&g.console.warn("jQuery.Deferred exception: "+e.message,e.stack,t)},E.readyException=function(e){g.setTimeout(function(){throw e})};var $=E.Deferred();function F(){v.removeEventListener("DOMContentLoaded",F),g.removeEventListener("load",F),E.ready()}E.fn.ready=function(e){return $.then(e)["catch"](function(e){E.readyException(e)}),this},E.extend({isReady:!1,readyWait:1,ready:function(e){(!0===e?--E.readyWait:E.isReady)||(E.isReady=!0)!==e&&0<--E.readyWait||$.resolveWith(v,[E])}}),E.ready.then=$.then,"complete"===v.readyState||"loading"!==v.readyState&&!v.documentElement.doScroll?g.setTimeout(E.ready):(v.addEventListener("DOMContentLoaded",F),g.addEventListener("load",F));var z=function(e,t,n,r,i,o,a){var s=0,u=e.length,l=null==n;if("object"===T(n))for(s in i=!0,n)z(e,t,s,n[s],!0,o,a);else if(void 0!==r&&(i=!0,x(r)||(a=!0),l&&(a?(t.call(e,r),t=null):(l=t,t=function(e,t,n){return l.call(E(e),n)})),t))for(;s<u;s++)t(e[s],n,a?r:r.call(e[s],s,t(e[s],n)));return i?e:l?t.call(e):u?t(e[0],n):o},_=/^-ms-/,U=/-([a-z])/g;function V(e,t){return t.toUpperCase()}function X(e){return e.replace(_,"ms-").replace(U,V)}var Q=function(e){return 1===e.nodeType||9===e.nodeType||!+e.nodeType};function Y(){this.expando=E.expando+Y.uid++}Y.uid=1,Y.prototype={cache:function(e){var t=e[this.expando];return t||(t={},Q(e)&&(e.nodeType?e[this.expando]=t:Object.defineProperty(e,this.expando,{value:t,configurable:!0}))),t},set:function(e,t,n){var r,i=this.cache(e);if("string"==typeof t)i[X(t)]=n;else for(r in t)i[X(r)]=t[r];return i},get:function(e,t){return void 0===t?this.cache(e):e[this.expando]&&e[this.expando][X(t)]},access:function(e,t,n){return void 0===t||t&&"string"==typeof t&&void 0===n?this.get(e,t):(this.set(e,t,n),void 0!==n?n:t)},remove:function(e,t){var n,r=e[this.expando];if(void 0!==r){if(void 0!==t){n=(t=Array.isArray(t)?t.map(X):(t=X(t))in r?[t]:t.match(I)||[]).length;while(n--)delete r[t[n]]}(void 0===t||E.isEmptyObject(r))&&(e.nodeType?e[this.expando]=void 0:delete e[this.expando])}},hasData:function(e){var t=e[this.expando];return void 0!==t&&!E.isEmptyObject(t)}};var G=new Y,K=new Y,J=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,Z=/[A-Z]/g;function ee(e,t,n){var r,i;if(void 0===n&&1===e.nodeType)if(r="data-"+t.replace(Z,"-$&").toLowerCase(),"string"==typeof(n=e.getAttribute(r))){try{n="true"===(i=n)||"false"!==i&&("null"===i?null:i===+i+""?+i:J.test(i)?JSON.parse(i):i)}catch(e){}K.set(e,t,n)}else n=void 0;return n}E.extend({hasData:function(e){return K.hasData(e)||G.hasData(e)},data:function(e,t,n){return K.access(e,t,n)},removeData:function(e,t){K.remove(e,t)},_data:function(e,t,n){return G.access(e,t,n)},_removeData:function(e,t){G.remove(e,t)}}),E.fn.extend({data:function(n,e){var t,r,i,o=this[0],a=o&&o.attributes;if(void 0===n){if(this.length&&(i=K.get(o),1===o.nodeType&&!G.get(o,"hasDataAttrs"))){t=a.length;while(t--)a[t]&&0===(r=a[t].name).indexOf("data-")&&(r=X(r.slice(5)),ee(o,r,i[r]));G.set(o,"hasDataAttrs",!0)}return i}return"object"==typeof n?this.each(function(){K.set(this,n)}):z(this,function(e){var t;if(o&&void 0===e)return void 0!==(t=K.get(o,n))?t:void 0!==(t=ee(o,n))?t:void 0;this.each(function(){K.set(this,n,e)})},null,e,1<arguments.length,null,!0)},removeData:function(e){return this.each(function(){K.remove(this,e)})}}),E.extend({queue:function(e,t,n){var r;if(e)return t=(t||"fx")+"queue",r=G.get(e,t),n&&(!r||Array.isArray(n)?r=G.access(e,t,E.makeArray(n)):r.push(n)),r||[]},dequeue:function(e,t){t=t||"fx";var n=E.queue(e,t),r=n.length,i=n.shift(),o=E._queueHooks(e,t);"inprogress"===i&&(i=n.shift(),r--),i&&("fx"===t&&n.unshift("inprogress"),delete o.stop,i.call(e,function(){E.dequeue(e,t)},o)),!r&&o&&o.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return G.get(e,n)||G.access(e,n,{empty:E.Callbacks("once memory").add(function(){G.remove(e,[t+"queue",n])})})}}),E.fn.extend({queue:function(t,n){var e=2;return"string"!=typeof t&&(n=t,t="fx",e--),arguments.length<e?E.queue(this[0],t):void 0===n?this:this.each(function(){var e=E.queue(this,t,n);E._queueHooks(this,t),"fx"===t&&"inprogress"!==e[0]&&E.dequeue(this,t)})},dequeue:function(e){return this.each(function(){E.dequeue(this,e)})},clearQueue:function(e){return this.queue(e||"fx",[])},promise:function(e,t){var n,r=1,i=E.Deferred(),o=this,a=this.length,s=function(){--r||i.resolveWith(o,[o])};"string"!=typeof e&&(t=e,e=void 0),e=e||"fx";while(a--)(n=G.get(o[a],e+"queueHooks"))&&n.empty&&(r++,n.empty.add(s));return s(),i.promise(t)}});var te=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,ne=new RegExp("^(?:([+-])=|)("+te+")([a-z%]*)$","i"),re=["Top","Right","Bottom","Left"],ie=v.documentElement,oe=function(e){return E.contains(e.ownerDocument,e)},ae={composed:!0};ie.getRootNode&&(oe=function(e){return E.contains(e.ownerDocument,e)||e.getRootNode(ae)===e.ownerDocument});var se=function(e,t){return"none"===(e=t||e).style.display||""===e.style.display&&oe(e)&&"none"===E.css(e,"display")},ue=function(e,t,n,r){var i,o,a={};for(o in t)a[o]=e.style[o],e.style[o]=t[o];for(o in i=n.apply(e,r||[]),t)e.style[o]=a[o];return i};var le={};function ce(e,t){for(var n,r,i,o,a,s,u,l=[],c=0,f=e.length;c<f;c++)(r=e[c]).style&&(n=r.style.display,t?("none"===n&&(l[c]=G.get(r,"display")||null,l[c]||(r.style.display="")),""===r.style.display&&se(r)&&(l[c]=(u=a=o=void 0,a=(i=r).ownerDocument,s=i.nodeName,(u=le[s])||(o=a.body.appendChild(a.createElement(s)),u=E.css(o,"display"),o.parentNode.removeChild(o),"none"===u&&(u="block"),le[s]=u)))):"none"!==n&&(l[c]="none",G.set(r,"display",n)));for(c=0;c<f;c++)null!=l[c]&&(e[c].style.display=l[c]);return e}E.fn.extend({show:function(){return ce(this,!0)},hide:function(){return ce(this)},toggle:function(e){return"boolean"==typeof e?e?this.show():this.hide():this.each(function(){se(this)?E(this).show():E(this).hide()})}});var fe=/^(?:checkbox|radio)$/i,de=/<([a-z][^\/\0>\x20\t\r\n\f]*)/i,pe=/^$|^module$|\/(?:java|ecma)script/i,he={option:[1,"<select multiple='multiple'>","</select>"],thead:[1,"<table>","</table>"],col:[2,"<table><colgroup>","</colgroup></table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],_default:[0,"",""]};function ge(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&S(e,t)?E.merge([e],n):n}function ve(e,t){for(var n=0,r=e.length;n<r;n++)G.set(e[n],"globalEval",!t||G.get(t[n],"globalEval"))}he.optgroup=he.option,he.tbody=he.tfoot=he.colgroup=he.caption=he.thead,he.th=he.td;var ye,me,be=/<|&#?\w+;/;function xe(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),d=[],p=0,h=e.length;p<h;p++)if((o=e[p])||0===o)if("object"===T(o))E.merge(d,o.nodeType?[o]:o);else if(be.test(o)){a=a||f.appendChild(t.createElement("div")),s=(de.exec(o)||["",""])[1].toLowerCase(),u=he[s]||he._default,a.innerHTML=u[1]+E.htmlPrefilter(o)+u[2],c=u[0];while(c--)a=a.lastChild;E.merge(d,a.childNodes),(a=f.firstChild).textContent=""}else d.push(t.createTextNode(o));f.textContent="",p=0;while(o=d[p++])if(r&&-1<E.inArray(o,r))i&&i.push(o);else if(l=oe(o),a=ge(f.appendChild(o),"script"),l&&ve(a),n){c=0;while(o=a[c++])pe.test(o.type||"")&&n.push(o)}return f}ye=v.createDocumentFragment().appendChild(v.createElement("div")),(me=v.createElement("input")).setAttribute("type","radio"),me.setAttribute("checked","checked"),me.setAttribute("name","t"),ye.appendChild(me),b.checkClone=ye.cloneNode(!0).cloneNode(!0).lastChild.checked,ye.innerHTML="<textarea>x</textarea>",b.noCloneChecked=!!ye.cloneNode(!0).lastChild.defaultValue;var we=/^key/,Ce=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,Te=/^([^.]*)(?:\.(.+)|)/;function Ee(){return!0}function Ne(){return!1}function Ae(e,t){return e===function(){try{return v.activeElement}catch(e){}}()==("focus"===t)}function ke(e,t,n,r,i,o){var a,s;if("object"==typeof t){for(s in"string"!=typeof n&&(r=r||n,n=void 0),t)ke(e,s,n,r,t[s],o);return e}if(null==r&&null==i?(i=n,r=n=void 0):null==i&&("string"==typeof n?(i=r,r=void 0):(i=r,r=n,n=void 0)),!1===i)i=Ne;else if(!i)return e;return 1===o&&(a=i,(i=function(e){return E().off(e),a.apply(this,arguments)}).guid=a.guid||(a.guid=E.guid++)),e.each(function(){E.event.add(this,t,i,r,n)})}function Se(e,i,o){o?(G.set(e,i,!1),E.event.add(e,i,{namespace:!1,handler:function(e){var t,n,r=G.get(this,i);if(1&e.isTrigger&&this[i]){if(r.length)(E.event.special[i]||{}).delegateType&&e.stopPropagation();else if(r=s.call(arguments),G.set(this,i,r),t=o(this,i),this[i](),r!==(n=G.get(this,i))||t?G.set(this,i,!1):n={},r!==n)return e.stopImmediatePropagation(),e.preventDefault(),n.value}else r.length&&(G.set(this,i,{value:E.event.trigger(E.extend(r[0],E.Event.prototype),r.slice(1),this)}),e.stopImmediatePropagation())}})):void 0===G.get(e,i)&&E.event.add(e,i,Ee)}E.event={global:{},add:function(t,e,n,r,i){var o,a,s,u,l,c,f,d,p,h,g,v=G.get(t);if(v){n.handler&&(n=(o=n).handler,i=o.selector),i&&E.find.matchesSelector(ie,i),n.guid||(n.guid=E.guid++),(u=v.events)||(u=v.events={}),(a=v.handle)||(a=v.handle=function(e){return"undefined"!=typeof E&&E.event.triggered!==e.type?E.event.dispatch.apply(t,arguments):void 0}),l=(e=(e||"").match(I)||[""]).length;while(l--)p=g=(s=Te.exec(e[l])||[])[1],h=(s[2]||"").split(".").sort(),p&&(f=E.event.special[p]||{},p=(i?f.delegateType:f.bindType)||p,f=E.event.special[p]||{},c=E.extend({type:p,origType:g,data:r,handler:n,guid:n.guid,selector:i,needsContext:i&&E.expr.match.needsContext.test(i),namespace:h.join(".")},o),(d=u[p])||((d=u[p]=[]).delegateCount=0,f.setup&&!1!==f.setup.call(t,r,h,a)||t.addEventListener&&t.addEventListener(p,a)),f.add&&(f.add.call(t,c),c.handler.guid||(c.handler.guid=n.guid)),i?d.splice(d.delegateCount++,0,c):d.push(c),E.event.global[p]=!0)}},remove:function(e,t,n,r,i){var o,a,s,u,l,c,f,d,p,h,g,v=G.hasData(e)&&G.get(e);if(v&&(u=v.events)){l=(t=(t||"").match(I)||[""]).length;while(l--)if(p=g=(s=Te.exec(t[l])||[])[1],h=(s[2]||"").split(".").sort(),p){f=E.event.special[p]||{},d=u[p=(r?f.delegateType:f.bindType)||p]||[],s=s[2]&&new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),a=o=d.length;while(o--)c=d[o],!i&&g!==c.origType||n&&n.guid!==c.guid||s&&!s.test(c.namespace)||r&&r!==c.selector&&("**"!==r||!c.selector)||(d.splice(o,1),c.selector&&d.delegateCount--,f.remove&&f.remove.call(e,c));a&&!d.length&&(f.teardown&&!1!==f.teardown.call(e,h,v.handle)||E.removeEvent(e,p,v.handle),delete u[p])}else for(p in u)E.event.remove(e,p+t[l],n,r,!0);E.isEmptyObject(u)&&G.remove(e,"handle events")}},dispatch:function(e){var t,n,r,i,o,a,s=E.event.fix(e),u=new Array(arguments.length),l=(G.get(this,"events")||{})[s.type]||[],c=E.event.special[s.type]||{};for(u[0]=s,t=1;t<arguments.length;t++)u[t]=arguments[t];if(s.delegateTarget=this,!c.preDispatch||!1!==c.preDispatch.call(this,s)){a=E.event.handlers.call(this,s,l),t=0;while((i=a[t++])&&!s.isPropagationStopped()){s.currentTarget=i.elem,n=0;while((o=i.handlers[n++])&&!s.isImmediatePropagationStopped())s.rnamespace&&!1!==o.namespace&&!s.rnamespace.test(o.namespace)||(s.handleObj=o,s.data=o.data,void 0!==(r=((E.event.special[o.origType]||{}).handle||o.handler).apply(i.elem,u))&&!1===(s.result=r)&&(s.preventDefault(),s.stopPropagation()))}return c.postDispatch&&c.postDispatch.call(this,s),s.result}},handlers:function(e,t){var n,r,i,o,a,s=[],u=t.delegateCount,l=e.target;if(u&&l.nodeType&&!("click"===e.type&&1<=e.button))for(;l!==this;l=l.parentNode||this)if(1===l.nodeType&&("click"!==e.type||!0!==l.disabled)){for(o=[],a={},n=0;n<u;n++)void 0===a[i=(r=t[n]).selector+" "]&&(a[i]=r.needsContext?-1<E(i,this).index(l):E.find(i,this,null,[l]).length),a[i]&&o.push(r);o.length&&s.push({elem:l,handlers:o})}return l=this,u<t.length&&s.push({elem:l,handlers:t.slice(u)}),s},addProp:function(t,e){Object.defineProperty(E.Event.prototype,t,{enumerable:!0,configurable:!0,get:x(e)?function(){if(this.originalEvent)return e(this.originalEvent)}:function(){if(this.originalEvent)return this.originalEvent[t]},set:function(e){Object.defineProperty(this,t,{enumerable:!0,configurable:!0,writable:!0,value:e})}})},fix:function(e){return e[E.expando]?e:new E.Event(e)},special:{load:{noBubble:!0},click:{setup:function(e){var t=this||e;return fe.test(t.type)&&t.click&&S(t,"input")&&Se(t,"click",Ee),!1},trigger:function(e){var t=this||e;return fe.test(t.type)&&t.click&&S(t,"input")&&Se(t,"click"),!0},_default:function(e){var t=e.target;return fe.test(t.type)&&t.click&&S(t,"input")&&G.get(t,"click")||S(t,"a")}},beforeunload:{postDispatch:function(e){void 0!==e.result&&e.originalEvent&&(e.originalEvent.returnValue=e.result)}}}},E.removeEvent=function(e,t,n){e.removeEventListener&&e.removeEventListener(t,n)},E.Event=function(e,t){if(!(this instanceof E.Event))return new E.Event(e,t);e&&e.type?(this.originalEvent=e,this.type=e.type,this.isDefaultPrevented=e.defaultPrevented||void 0===e.defaultPrevented&&!1===e.returnValue?Ee:Ne,this.target=e.target&&3===e.target.nodeType?e.target.parentNode:e.target,this.currentTarget=e.currentTarget,this.relatedTarget=e.relatedTarget):this.type=e,t&&E.extend(this,t),this.timeStamp=e&&e.timeStamp||Date.now(),this[E.expando]=!0},E.Event.prototype={constructor:E.Event,isDefaultPrevented:Ne,isPropagationStopped:Ne,isImmediatePropagationStopped:Ne,isSimulated:!1,preventDefault:function(){var e=this.originalEvent;this.isDefaultPrevented=Ee,e&&!this.isSimulated&&e.preventDefault()},stopPropagation:function(){var e=this.originalEvent;this.isPropagationStopped=Ee,e&&!this.isSimulated&&e.stopPropagation()},stopImmediatePropagation:function(){var e=this.originalEvent;this.isImmediatePropagationStopped=Ee,e&&!this.isSimulated&&e.stopImmediatePropagation(),this.stopPropagation()}},E.each({altKey:!0,bubbles:!0,cancelable:!0,changedTouches:!0,ctrlKey:!0,detail:!0,eventPhase:!0,metaKey:!0,pageX:!0,pageY:!0,shiftKey:!0,view:!0,"char":!0,code:!0,charCode:!0,key:!0,keyCode:!0,button:!0,buttons:!0,clientX:!0,clientY:!0,offsetX:!0,offsetY:!0,pointerId:!0,pointerType:!0,screenX:!0,screenY:!0,targetTouches:!0,toElement:!0,touches:!0,which:function(e){var t=e.button;return null==e.which&&we.test(e.type)?null!=e.charCode?e.charCode:e.keyCode:!e.which&&void 0!==t&&Ce.test(e.type)?1&t?1:2&t?3:4&t?2:0:e.which}},E.event.addProp),E.each({focus:"focusin",blur:"focusout"},function(e,t){E.event.special[e]={setup:function(){return Se(this,e,Ae),!1},trigger:function(){return Se(this,e),!0},delegateType:t}}),E.each({mouseenter:"mouseover",mouseleave:"mouseout",pointerenter:"pointerover",pointerleave:"pointerout"},function(e,i){E.event.special[e]={delegateType:i,bindType:i,handle:function(e){var t,n=e.relatedTarget,r=e.handleObj;return n&&(n===this||E.contains(this,n))||(e.type=r.origType,t=r.handler.apply(this,arguments),e.type=i),t}}}),E.fn.extend({on:function(e,t,n,r){return ke(this,e,t,n,r)},one:function(e,t,n,r){return ke(this,e,t,n,r,1)},off:function(e,t,n){var r,i;if(e&&e.preventDefault&&e.handleObj)return r=e.handleObj,E(e.delegateTarget).off(r.namespace?r.origType+"."+r.namespace:r.origType,r.selector,r.handler),this;if("object"==typeof e){for(i in e)this.off(i,t,e[i]);return this}return!1!==t&&"function"!=typeof t||(n=t,t=void 0),!1===n&&(n=Ne),this.each(function(){E.event.remove(this,e,n,t)})}});var De=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([a-z][^\/\0>\x20\t\r\n\f]*)[^>]*)\/>/gi,Le=/<script|<style|<link/i,je=/checked\s*(?:[^=]|=\s*.checked.)/i,qe=/^\s*<!(?:\[CDATA\[|--)|(?:\]\]|--)>\s*$/g;function Oe(e,t){return S(e,"table")&&S(11!==t.nodeType?t:t.firstChild,"tr")&&E(e).children("tbody")[0]||e}function Pe(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function He(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Ie(e,t){var n,r,i,o,a,s,u,l;if(1===t.nodeType){if(G.hasData(e)&&(o=G.access(e),a=G.set(t,o),l=o.events))for(i in delete a.handle,a.events={},l)for(n=0,r=l[i].length;n<r;n++)E.event.add(t,i,l[i][n]);K.hasData(e)&&(s=K.access(e),u=E.extend({},s),K.set(t,u))}}function Re(n,r,i,o){r=y.apply([],r);var e,t,a,s,u,l,c=0,f=n.length,d=f-1,p=r[0],h=x(p);if(h||1<f&&"string"==typeof p&&!b.checkClone&&je.test(p))return n.each(function(e){var t=n.eq(e);h&&(r[0]=p.call(this,e,t.html())),Re(t,r,i,o)});if(f&&(t=(e=xe(r,n[0].ownerDocument,!1,n,o)).firstChild,1===e.childNodes.length&&(e=t),t||o)){for(s=(a=E.map(ge(e,"script"),Pe)).length;c<f;c++)u=e,c!==d&&(u=E.clone(u,!0,!0),s&&E.merge(a,ge(u,"script"))),i.call(n[c],u,c);if(s)for(l=a[a.length-1].ownerDocument,E.map(a,He),c=0;c<s;c++)u=a[c],pe.test(u.type||"")&&!G.access(u,"globalEval")&&E.contains(l,u)&&(u.src&&"module"!==(u.type||"").toLowerCase()?E._evalUrl&&!u.noModule&&E._evalUrl(u.src,{nonce:u.nonce||u.getAttribute("nonce")}):C(u.textContent.replace(qe,""),u,l))}return n}function Be(e,t,n){for(var r,i=t?E.filter(t,e):e,o=0;null!=(r=i[o]);o++)n||1!==r.nodeType||E.cleanData(ge(r)),r.parentNode&&(n&&oe(r)&&ve(ge(r,"script")),r.parentNode.removeChild(r));return e}E.extend({htmlPrefilter:function(e){return e.replace(De,"<$1></$2>")},clone:function(e,t,n){var r,i,o,a,s,u,l,c=e.cloneNode(!0),f=oe(e);if(!(b.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||E.isXMLDoc(e)))for(a=ge(c),r=0,i=(o=ge(e)).length;r<i;r++)s=o[r],u=a[r],void 0,"input"===(l=u.nodeName.toLowerCase())&&fe.test(s.type)?u.checked=s.checked:"input"!==l&&"textarea"!==l||(u.defaultValue=s.defaultValue);if(t)if(n)for(o=o||ge(e),a=a||ge(c),r=0,i=o.length;r<i;r++)Ie(o[r],a[r]);else Ie(e,c);return 0<(a=ge(c,"script")).length&&ve(a,!f&&ge(e,"script")),c},cleanData:function(e){for(var t,n,r,i=E.event.special,o=0;void 0!==(n=e[o]);o++)if(Q(n)){if(t=n[G.expando]){if(t.events)for(r in t.events)i[r]?E.event.remove(n,r):E.removeEvent(n,r,t.handle);n[G.expando]=void 0}n[K.expando]&&(n[K.expando]=void 0)}}}),E.fn.extend({detach:function(e){return Be(this,e,!0)},remove:function(e){return Be(this,e)},text:function(e){return z(this,function(e){return void 0===e?E.text(this):this.empty().each(function(){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||(this.textContent=e)})},null,e,arguments.length)},append:function(){return Re(this,arguments,function(e){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||Oe(this,e).appendChild(e)})},prepend:function(){return Re(this,arguments,function(e){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var t=Oe(this,e);t.insertBefore(e,t.firstChild)}})},before:function(){return Re(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this)})},after:function(){return Re(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this.nextSibling)})},empty:function(){for(var e,t=0;null!=(e=this[t]);t++)1===e.nodeType&&(E.cleanData(ge(e,!1)),e.textContent="");return this},clone:function(e,t){return e=null!=e&&e,t=null==t?e:t,this.map(function(){return E.clone(this,e,t)})},html:function(e){return z(this,function(e){var t=this[0]||{},n=0,r=this.length;if(void 0===e&&1===t.nodeType)return t.innerHTML;if("string"==typeof e&&!Le.test(e)&&!he[(de.exec(e)||["",""])[1].toLowerCase()]){e=E.htmlPrefilter(e);try{for(;n<r;n++)1===(t=this[n]||{}).nodeType&&(E.cleanData(ge(t,!1)),t.innerHTML=e);t=0}catch(e){}}t&&this.empty().append(e)},null,e,arguments.length)},replaceWith:function(){var n=[];return Re(this,arguments,function(e){var t=this.parentNode;E.inArray(this,n)<0&&(E.cleanData(ge(this)),t&&t.replaceChild(e,this))},n)}}),E.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(e,a){E.fn[e]=function(e){for(var t,n=[],r=E(e),i=r.length-1,o=0;o<=i;o++)t=o===i?this:this.clone(!0),E(r[o])[a](t),u.apply(n,t.get());return this.pushStack(n)}});var Me=new RegExp("^("+te+")(?!px)[a-z%]+$","i"),We=function(e){var t=e.ownerDocument.defaultView;return t&&t.opener||(t=g),t.getComputedStyle(e)},$e=new RegExp(re.join("|"),"i");function Fe(e,t,n){var r,i,o,a,s=e.style;return(n=n||We(e))&&(""!==(a=n.getPropertyValue(t)||n[t])||oe(e)||(a=E.style(e,t)),!b.pixelBoxStyles()&&Me.test(a)&&$e.test(t)&&(r=s.width,i=s.minWidth,o=s.maxWidth,s.minWidth=s.maxWidth=s.width=a,a=n.width,s.width=r,s.minWidth=i,s.maxWidth=o)),void 0!==a?a+"":a}function ze(e,t){return{get:function(){if(!e())return(this.get=t).apply(this,arguments);delete this.get}}}!function(){function e(){if(u){s.style.cssText="position:absolute;left:-11111px;width:60px;margin-top:1px;padding:0;border:0",u.style.cssText="position:relative;display:block;box-sizing:border-box;overflow:scroll;margin:auto;border:1px;padding:1px;width:60%;top:1%",ie.appendChild(s).appendChild(u);var e=g.getComputedStyle(u);n="1%"!==e.top,a=12===t(e.marginLeft),u.style.right="60%",o=36===t(e.right),r=36===t(e.width),u.style.position="absolute",i=12===t(u.offsetWidth/3),ie.removeChild(s),u=null}}function t(e){return Math.round(parseFloat(e))}var n,r,i,o,a,s=v.createElement("div"),u=v.createElement("div");u.style&&(u.style.backgroundClip="content-box",u.cloneNode(!0).style.backgroundClip="",b.clearCloneStyle="content-box"===u.style.backgroundClip,E.extend(b,{boxSizingReliable:function(){return e(),r},pixelBoxStyles:function(){return e(),o},pixelPosition:function(){return e(),n},reliableMarginLeft:function(){return e(),a},scrollboxSize:function(){return e(),i}}))}();var _e=["Webkit","Moz","ms"],Ue=v.createElement("div").style,Ve={};function Xe(e){var t=E.cssProps[e]||Ve[e];return t||(e in Ue?e:Ve[e]=function(e){var t=e[0].toUpperCase()+e.slice(1),n=_e.length;while(n--)if((e=_e[n]+t)in Ue)return e}(e)||e)}var Qe,Ye,Ge=/^(none|table(?!-c[ea]).+)/,Ke=/^--/,Je={position:"absolute",visibility:"hidden",display:"block"},Ze={letterSpacing:"0",fontWeight:"400"};function et(e,t,n){var r=ne.exec(t);return r?Math.max(0,r[2]-(n||0))+(r[3]||"px"):t}function tt(e,t,n,r,i,o){var a="width"===t?1:0,s=0,u=0;if(n===(r?"border":"content"))return 0;for(;a<4;a+=2)"margin"===n&&(u+=E.css(e,n+re[a],!0,i)),r?("content"===n&&(u-=E.css(e,"padding"+re[a],!0,i)),"margin"!==n&&(u-=E.css(e,"border"+re[a]+"Width",!0,i))):(u+=E.css(e,"padding"+re[a],!0,i),"padding"!==n?u+=E.css(e,"border"+re[a]+"Width",!0,i):s+=E.css(e,"border"+re[a]+"Width",!0,i));return!r&&0<=o&&(u+=Math.max(0,Math.ceil(e["offset"+t[0].toUpperCase()+t.slice(1)]-o-u-s-.5))||0),u}function nt(e,t,n){var r=We(e),i=(!b.boxSizingReliable()||n)&&"border-box"===E.css(e,"boxSizing",!1,r),o=i,a=Fe(e,t,r),s="offset"+t[0].toUpperCase()+t.slice(1);if(Me.test(a)){if(!n)return a;a="auto"}return(!b.boxSizingReliable()&&i||"auto"===a||!parseFloat(a)&&"inline"===E.css(e,"display",!1,r))&&e.getClientRects().length&&(i="border-box"===E.css(e,"boxSizing",!1,r),(o=s in e)&&(a=e[s])),(a=parseFloat(a)||0)+tt(e,t,n||(i?"border":"content"),o,r,a)+"px"}E.extend({cssHooks:{opacity:{get:function(e,t){if(t){var n=Fe(e,"opacity");return""===n?"1":n}}}},cssNumber:{animationIterationCount:!0,columnCount:!0,fillOpacity:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,gridArea:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnStart:!0,gridRow:!0,gridRowEnd:!0,gridRowStart:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{},style:function(e,t,n,r){if(e&&3!==e.nodeType&&8!==e.nodeType&&e.style){var i,o,a,s=X(t),u=Ke.test(t),l=e.style;if(u||(t=Xe(s)),a=E.cssHooks[t]||E.cssHooks[s],void 0===n)return a&&"get"in a&&void 0!==(i=a.get(e,!1,r))?i:l[t];"string"===(o=typeof n)&&(i=ne.exec(n))&&i[1]&&(n=function(e,t,n,r){var i,o,a=20,s=r?function(){return r.cur()}:function(){return E.css(e,t,"")},u=s(),l=n&&n[3]||(E.cssNumber[t]?"":"px"),c=e.nodeType&&(E.cssNumber[t]||"px"!==l&&+u)&&ne.exec(E.css(e,t));if(c&&c[3]!==l){u/=2,l=l||c[3],c=+u||1;while(a--)E.style(e,t,c+l),(1-o)*(1-(o=s()/u||.5))<=0&&(a=0),c/=o;c*=2,E.style(e,t,c+l),n=n||[]}return n&&(c=+c||+u||0,i=n[1]?c+(n[1]+1)*n[2]:+n[2],r&&(r.unit=l,r.start=c,r.end=i)),i}(e,t,i),o="number"),null!=n&&n==n&&("number"!==o||u||(n+=i&&i[3]||(E.cssNumber[s]?"":"px")),b.clearCloneStyle||""!==n||0!==t.indexOf("background")||(l[t]="inherit"),a&&"set"in a&&void 0===(n=a.set(e,n,r))||(u?l.setProperty(t,n):l[t]=n))}},css:function(e,t,n,r){var i,o,a,s=X(t);return Ke.test(t)||(t=Xe(s)),(a=E.cssHooks[t]||E.cssHooks[s])&&"get"in a&&(i=a.get(e,!0,n)),void 0===i&&(i=Fe(e,t,r)),"normal"===i&&t in Ze&&(i=Ze[t]),""===n||n?(o=parseFloat(i),!0===n||isFinite(o)?o||0:i):i}}),E.each(["height","width"],function(e,u){E.cssHooks[u]={get:function(e,t,n){if(t)return!Ge.test(E.css(e,"display"))||e.getClientRects().length&&e.getBoundingClientRect().width?nt(e,u,n):ue(e,Je,function(){return nt(e,u,n)})},set:function(e,t,n){var r,i=We(e),o=!b.scrollboxSize()&&"absolute"===i.position,a=(o||n)&&"border-box"===E.css(e,"boxSizing",!1,i),s=n?tt(e,u,n,a,i):0;return a&&o&&(s-=Math.ceil(e["offset"+u[0].toUpperCase()+u.slice(1)]-parseFloat(i[u])-tt(e,u,"border",!1,i)-.5)),s&&(r=ne.exec(t))&&"px"!==(r[3]||"px")&&(e.style[u]=t,t=E.css(e,u)),et(0,t,s)}}}),E.cssHooks.marginLeft=ze(b.reliableMarginLeft,function(e,t){if(t)return(parseFloat(Fe(e,"marginLeft"))||e.getBoundingClientRect().left-ue(e,{marginLeft:0},function(){return e.getBoundingClientRect().left}))+"px"}),E.each({margin:"",padding:"",border:"Width"},function(i,o){E.cssHooks[i+o]={expand:function(e){for(var t=0,n={},r="string"==typeof e?e.split(" "):[e];t<4;t++)n[i+re[t]+o]=r[t]||r[t-2]||r[0];return n}},"margin"!==i&&(E.cssHooks[i+o].set=et)}),E.fn.extend({css:function(e,t){return z(this,function(e,t,n){var r,i,o={},a=0;if(Array.isArray(t)){for(r=We(e),i=t.length;a<i;a++)o[t[a]]=E.css(e,t[a],!1,r);return o}return void 0!==n?E.style(e,t,n):E.css(e,t)},e,t,1<arguments.length)}}),E.fn.delay=function(r,e){return r=E.fx&&E.fx.speeds[r]||r,e=e||"fx",this.queue(e,function(e,t){var n=g.setTimeout(e,r);t.stop=function(){g.clearTimeout(n)}})},Qe=v.createElement("input"),Ye=v.createElement("select").appendChild(v.createElement("option")),Qe.type="checkbox",b.checkOn=""!==Qe.value,b.optSelected=Ye.selected,(Qe=v.createElement("input")).value="t",Qe.type="radio",b.radioValue="t"===Qe.value;var rt,it=E.expr.attrHandle;E.fn.extend({attr:function(e,t){return z(this,E.attr,e,t,1<arguments.length)},removeAttr:function(e){return this.each(function(){E.removeAttr(this,e)})}}),E.extend({attr:function(e,t,n){var r,i,o=e.nodeType;if(3!==o&&8!==o&&2!==o)return"undefined"==typeof e.getAttribute?E.prop(e,t,n):(1===o&&E.isXMLDoc(e)||(i=E.attrHooks[t.toLowerCase()]||(E.expr.match.bool.test(t)?rt:void 0)),void 0!==n?null===n?void E.removeAttr(e,t):i&&"set"in i&&void 0!==(r=i.set(e,n,t))?r:(e.setAttribute(t,n+""),n):i&&"get"in i&&null!==(r=i.get(e,t))?r:null==(r=E.find.attr(e,t))?void 0:r)},attrHooks:{type:{set:function(e,t){if(!b.radioValue&&"radio"===t&&S(e,"input")){var n=e.value;return e.setAttribute("type",t),n&&(e.value=n),t}}}},removeAttr:function(e,t){var n,r=0,i=t&&t.match(I);if(i&&1===e.nodeType)while(n=i[r++])e.removeAttribute(n)}}),rt={set:function(e,t,n){return!1===t?E.removeAttr(e,n):e.setAttribute(n,n),n}},E.each(E.expr.match.bool.source.match(/\w+/g),function(e,t){var a=it[t]||E.find.attr;it[t]=function(e,t,n){var r,i,o=t.toLowerCase();return n||(i=it[o],it[o]=r,r=null!=a(e,t,n)?o:null,it[o]=i),r}});var ot=/^(?:input|select|textarea|button)$/i,at=/^(?:a|area)$/i;function st(e){return(e.match(I)||[]).join(" ")}function ut(e){return e.getAttribute&&e.getAttribute("class")||""}function lt(e){return Array.isArray(e)?e:"string"==typeof e&&e.match(I)||[]}E.fn.extend({prop:function(e,t){return z(this,E.prop,e,t,1<arguments.length)},removeProp:function(e){return this.each(function(){delete this[E.propFix[e]||e]})}}),E.extend({prop:function(e,t,n){var r,i,o=e.nodeType;if(3!==o&&8!==o&&2!==o)return 1===o&&E.isXMLDoc(e)||(t=E.propFix[t]||t,i=E.propHooks[t]),void 0!==n?i&&"set"in i&&void 0!==(r=i.set(e,n,t))?r:e[t]=n:i&&"get"in i&&null!==(r=i.get(e,t))?r:e[t]},propHooks:{tabIndex:{get:function(e){var t=E.find.attr(e,"tabindex");return t?parseInt(t,10):ot.test(e.nodeName)||at.test(e.nodeName)&&e.href?0:-1}}},propFix:{"for":"htmlFor","class":"className"}}),b.optSelected||(E.propHooks.selected={get:function(e){var t=e.parentNode;return t&&t.parentNode&&t.parentNode.selectedIndex,null},set:function(e){var t=e.parentNode;t&&(t.selectedIndex,t.parentNode&&t.parentNode.selectedIndex)}}),E.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){E.propFix[this.toLowerCase()]=this}),E.fn.extend({addClass:function(t){var e,n,r,i,o,a,s,u=0;if(x(t))return this.each(function(e){E(this).addClass(t.call(this,e,ut(this)))});if((e=lt(t)).length)while(n=this[u++])if(i=ut(n),r=1===n.nodeType&&" "+st(i)+" "){a=0;while(o=e[a++])r.indexOf(" "+o+" ")<0&&(r+=o+" ");i!==(s=st(r))&&n.setAttribute("class",s)}return this},removeClass:function(t){var e,n,r,i,o,a,s,u=0;if(x(t))return this.each(function(e){E(this).removeClass(t.call(this,e,ut(this)))});if(!arguments.length)return this.attr("class","");if((e=lt(t)).length)while(n=this[u++])if(i=ut(n),r=1===n.nodeType&&" "+st(i)+" "){a=0;while(o=e[a++])while(-1<r.indexOf(" "+o+" "))r=r.replace(" "+o+" "," ");i!==(s=st(r))&&n.setAttribute("class",s)}return this},toggleClass:function(i,t){var o=typeof i,a="string"===o||Array.isArray(i);return"boolean"==typeof t&&a?t?this.addClass(i):this.removeClass(i):x(i)?this.each(function(e){E(this).toggleClass(i.call(this,e,ut(this),t),t)}):this.each(function(){var e,t,n,r;if(a){t=0,n=E(this),r=lt(i);while(e=r[t++])n.hasClass(e)?n.removeClass(e):n.addClass(e)}else void 0!==i&&"boolean"!==o||((e=ut(this))&&G.set(this,"__className__",e),this.setAttribute&&this.setAttribute("class",e||!1===i?"":G.get(this,"__className__")||""))})},hasClass:function(e){var t,n,r=0;t=" "+e+" ";while(n=this[r++])if(1===n.nodeType&&-1<(" "+st(ut(n))+" ").indexOf(t))return!0;return!1}});var ct=/\r/g;E.fn.extend({val:function(n){var r,e,i,t=this[0];return arguments.length?(i=x(n),this.each(function(e){var t;1===this.nodeType&&(null==(t=i?n.call(this,e,E(this).val()):n)?t="":"number"==typeof t?t+="":Array.isArray(t)&&(t=E.map(t,function(e){return null==e?"":e+""})),(r=E.valHooks[this.type]||E.valHooks[this.nodeName.toLowerCase()])&&"set"in r&&void 0!==r.set(this,t,"value")||(this.value=t))})):t?(r=E.valHooks[t.type]||E.valHooks[t.nodeName.toLowerCase()])&&"get"in r&&void 0!==(e=r.get(t,"value"))?e:"string"==typeof(e=t.value)?e.replace(ct,""):null==e?"":e:void 0}}),E.extend({valHooks:{option:{get:function(e){var t=E.find.attr(e,"value");return null!=t?t:st(E.text(e))}},select:{get:function(e){var t,n,r,i=e.options,o=e.selectedIndex,a="select-one"===e.type,s=a?null:[],u=a?o+1:i.length;for(r=o<0?u:a?o:0;r<u;r++)if(((n=i[r]).selected||r===o)&&!n.disabled&&(!n.parentNode.disabled||!S(n.parentNode,"optgroup"))){if(t=E(n).val(),a)return t;s.push(t)}return s},set:function(e,t){var n,r,i=e.options,o=E.makeArray(t),a=i.length;while(a--)((r=i[a]).selected=-1<E.inArray(E.valHooks.option.get(r),o))&&(n=!0);return n||(e.selectedIndex=-1),o}}}}),E.each(["radio","checkbox"],function(){E.valHooks[this]={set:function(e,t){if(Array.isArray(t))return e.checked=-1<E.inArray(E(e).val(),t)}},b.checkOn||(E.valHooks[this].get=function(e){return null===e.getAttribute("value")?"on":e.value})}),b.focusin="onfocusin"in g;var ft=/^(?:focusinfocus|focusoutblur)$/,dt=function(e){e.stopPropagation()};E.extend(E.event,{trigger:function(e,t,n,r){var i,o,a,s,u,l,c,f,d=[n||v],p=m.call(e,"type")?e.type:e,h=m.call(e,"namespace")?e.namespace.split("."):[];if(o=f=a=n=n||v,3!==n.nodeType&&8!==n.nodeType&&!ft.test(p+E.event.triggered)&&(-1<p.indexOf(".")&&(p=(h=p.split(".")).shift(),h.sort()),u=p.indexOf(":")<0&&"on"+p,(e=e[E.expando]?e:new E.Event(p,"object"==typeof e&&e)).isTrigger=r?2:3,e.namespace=h.join("."),e.rnamespace=e.namespace?new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,e.result=void 0,e.target||(e.target=n),t=null==t?[e]:E.makeArray(t,[e]),c=E.event.special[p]||{},r||!c.trigger||!1!==c.trigger.apply(n,t))){if(!r&&!c.noBubble&&!w(n)){for(s=c.delegateType||p,ft.test(s+p)||(o=o.parentNode);o;o=o.parentNode)d.push(o),a=o;a===(n.ownerDocument||v)&&d.push(a.defaultView||a.parentWindow||g)}i=0;while((o=d[i++])&&!e.isPropagationStopped())f=o,e.type=1<i?s:c.bindType||p,(l=(G.get(o,"events")||{})[e.type]&&G.get(o,"handle"))&&l.apply(o,t),(l=u&&o[u])&&l.apply&&Q(o)&&(e.result=l.apply(o,t),!1===e.result&&e.preventDefault());return e.type=p,r||e.isDefaultPrevented()||c._default&&!1!==c._default.apply(d.pop(),t)||!Q(n)||u&&x(n[p])&&!w(n)&&((a=n[u])&&(n[u]=null),E.event.triggered=p,e.isPropagationStopped()&&f.addEventListener(p,dt),n[p](),e.isPropagationStopped()&&f.removeEventListener(p,dt),E.event.triggered=void 0,a&&(n[u]=a)),e.result}},simulate:function(e,t,n){var r=E.extend(new E.Event,n,{type:e,isSimulated:!0});E.event.trigger(r,null,t)}}),E.fn.extend({trigger:function(e,t){return this.each(function(){E.event.trigger(e,t,this)})},triggerHandler:function(e,t){var n=this[0];if(n)return E.event.trigger(e,t,n,!0)}}),b.focusin||E.each({focus:"focusin",blur:"focusout"},function(n,r){var i=function(e){E.event.simulate(r,e.target,E.event.fix(e))};E.event.special[r]={setup:function(){var e=this.ownerDocument||this,t=G.access(e,r);t||e.addEventListener(n,i,!0),G.access(e,r,(t||0)+1)},teardown:function(){var e=this.ownerDocument||this,t=G.access(e,r)-1;t?G.access(e,r,t):(e.removeEventListener(n,i,!0),G.remove(e,r))}}});var pt,ht=/\[\]$/,gt=/\r?\n/g,vt=/^(?:submit|button|image|reset|file)$/i,yt=/^(?:input|select|textarea|keygen)/i;function mt(n,e,r,i){var t;if(Array.isArray(e))E.each(e,function(e,t){r||ht.test(n)?i(n,t):mt(n+"["+("object"==typeof t&&null!=t?e:"")+"]",t,r,i)});else if(r||"object"!==T(e))i(n,e);else for(t in e)mt(n+"["+t+"]",e[t],r,i)}E.param=function(e,t){var n,r=[],i=function(e,t){var n=x(t)?t():t;r[r.length]=encodeURIComponent(e)+"="+encodeURIComponent(null==n?"":n)};if(null==e)return"";if(Array.isArray(e)||e.jquery&&!E.isPlainObject(e))E.each(e,function(){i(this.name,this.value)});else for(n in e)mt(n,e[n],t,i);return r.join("&")},E.fn.extend({serialize:function(){return E.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var e=E.prop(this,"elements");return e?E.makeArray(e):this}).filter(function(){var e=this.type;return this.name&&!E(this).is(":disabled")&&yt.test(this.nodeName)&&!vt.test(e)&&(this.checked||!fe.test(e))}).map(function(e,t){var n=E(this).val();return null==n?null:Array.isArray(n)?E.map(n,function(e){return{name:t.name,value:e.replace(gt,"\r\n")}}):{name:t.name,value:n.replace(gt,"\r\n")}}).get()}}),E.fn.extend({wrapAll:function(e){var t;return this[0]&&(x(e)&&(e=e.call(this[0])),t=E(e,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&t.insertBefore(this[0]),t.map(function(){var e=this;while(e.firstElementChild)e=e.firstElementChild;return e}).append(this)),this},wrapInner:function(n){return x(n)?this.each(function(e){E(this).wrapInner(n.call(this,e))}):this.each(function(){var e=E(this),t=e.contents();t.length?t.wrapAll(n):e.append(n)})},wrap:function(t){var n=x(t);return this.each(function(e){E(this).wrapAll(n?t.call(this,e):t)})},unwrap:function(e){return this.parent(e).not("body").each(function(){E(this).replaceWith(this.childNodes)}),this}}),E.expr.pseudos.hidden=function(e){return!E.expr.pseudos.visible(e)},E.expr.pseudos.visible=function(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)},b.createHTMLDocument=((pt=v.implementation.createHTMLDocument("").body).innerHTML="<form></form><form></form>",2===pt.childNodes.length),E.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(b.createHTMLDocument?((r=(t=v.implementation.createHTMLDocument("")).createElement("base")).href=v.location.href,t.head.appendChild(r)):t=v),o=!n&&[],(i=D.exec(e))?[t.createElement(i[1])]:(i=xe([e],t,o),o&&o.length&&E(o).remove(),E.merge([],i.childNodes)));var r,i,o},E.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=E.css(e,"position"),c=E(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=E.css(e,"top"),u=E.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),x(t)&&(t=t.call(e,n,E.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):c.css(f)}},E.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){E.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===E.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===E.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=E(e).offset()).top+=E.css(e,"borderTopWidth",!0),i.left+=E.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-E.css(r,"marginTop",!0),left:t.left-i.left-E.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===E.css(e,"position"))e=e.offsetParent;return e||ie})}}),E.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;E.fn[t]=function(e){return z(this,function(e,t,n){var r;if(w(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),E.each(["top","left"],function(e,n){E.cssHooks[n]=ze(b.pixelPosition,function(e,t){if(t)return t=Fe(e,n),Me.test(t)?E(e).position()[n]+"px":t})}),E.each({Height:"height",Width:"width"},function(a,s){E.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){E.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return z(this,function(e,t,n){var r;return w(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?E.css(e,t,i):E.style(e,t,n,i)},s,n?e:void 0,n)}})}),E.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){E.fn[n]=function(e,t){return 0<arguments.length?this.on(n,null,e,t):this.trigger(n)}}),E.fn.extend({hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),E.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)}}),E.proxy=function(e,t){var n,r,i;if("string"==typeof t&&(n=e[t],t=e,e=n),x(e))return r=s.call(arguments,2),(i=function(){return e.apply(t||this,r.concat(s.call(arguments)))}).guid=e.guid=e.guid||E.guid++,i},E.holdReady=function(e){e?E.readyWait++:E.ready(!0)},E.isArray=Array.isArray,E.parseJSON=JSON.parse,E.nodeName=S,E.isFunction=x,E.isWindow=w,E.camelCase=X,E.type=T,E.now=Date.now,E.isNumeric=function(e){var t=E.type(e);return("number"===t||"string"===t)&&!isNaN(e-parseFloat(e))},"function"==typeof define&&define.amd&&define("jquery",[],function(){return E});var bt=g.jQuery,xt=g.$;return E.noConflict=function(e){return g.$===E&&(g.$=xt),e&&g.jQuery===E&&(g.jQuery=bt),E},e||(g.jQuery=g.$=E),E});
+/*! jQuery v3.5.0 -ajax,-ajax/jsonp,-ajax/load,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-deprecated/ajax-event-alias,-effects,-effects/Tween,-effects/animatedSelector | (c) JS Foundation and other contributors | jquery.org/license */
+!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(g,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,v=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,y=n.hasOwnProperty,a=y.toString,l=a.call(Object),m={},b=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType},x=function(e){return null!=e&&e===e.window},w=g.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function C(e,t,n){var r,i,o=(n=n||w).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function T(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.5.0 -ajax,-ajax/jsonp,-ajax/load,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-deprecated/ajax-event-alias,-effects,-effects/Tween,-effects/animatedSelector",E=function(e,t){return new E.fn.init(e,t)};function d(e){var t=!!e&&"length"in e&&e.length,n=T(e);return!b(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0<t&&t-1 in e)}E.fn=E.prototype={jquery:f,constructor:E,length:0,toArray:function(){return s.call(this)},get:function(e){return null==e?s.call(this):e<0?this[e+this.length]:this[e]},pushStack:function(e){var t=E.merge(this.constructor(),e);return t.prevObject=this,t},each:function(e){return E.each(this,e)},map:function(n){return this.pushStack(E.map(this,function(e,t){return n.call(e,t,e)}))},slice:function(){return this.pushStack(s.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},even:function(){return this.pushStack(E.grep(this,function(e,t){return(t+1)%2}))},odd:function(){return this.pushStack(E.grep(this,function(e,t){return t%2}))},eq:function(e){var t=this.length,n=+e+(e<0?t:0);return this.pushStack(0<=n&&n<t?[this[n]]:[])},end:function(){return this.prevObject||this.constructor()},push:u,sort:t.sort,splice:t.splice},E.extend=E.fn.extend=function(){var e,t,n,r,i,o,a=arguments[0]||{},s=1,u=arguments.length,l=!1;for("boolean"==typeof a&&(l=a,a=arguments[s]||{},s++),"object"==typeof a||b(a)||(a={}),s===u&&(a=this,s--);s<u;s++)if(null!=(e=arguments[s]))for(t in e)r=e[t],"__proto__"!==t&&a!==r&&(l&&r&&(E.isPlainObject(r)||(i=Array.isArray(r)))?(n=a[t],o=i&&!Array.isArray(n)?[]:i||E.isPlainObject(n)?n:{},i=!1,a[t]=E.extend(l,o,r)):void 0!==r&&(a[t]=r));return a},E.extend({expando:"jQuery"+(f+Math.random()).replace(/\D/g,""),isReady:!0,error:function(e){throw new Error(e)},noop:function(){},isPlainObject:function(e){var t,n;return!(!e||"[object Object]"!==o.call(e))&&(!(t=r(e))||"function"==typeof(n=y.call(t,"constructor")&&t.constructor)&&a.call(n)===l)},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},globalEval:function(e,t,n){C(e,{nonce:t&&t.nonce},n)},each:function(e,t){var n,r=0;if(d(e)){for(n=e.length;r<n;r++)if(!1===t.call(e[r],r,e[r]))break}else for(r in e)if(!1===t.call(e[r],r,e[r]))break;return e},makeArray:function(e,t){var n=t||[];return null!=e&&(d(Object(e))?E.merge(n,"string"==typeof e?[e]:e):u.call(n,e)),n},inArray:function(e,t,n){return null==t?-1:i.call(t,e,n)},merge:function(e,t){for(var n=+t.length,r=0,i=e.length;r<n;r++)e[i++]=t[r];return e.length=i,e},grep:function(e,t,n){for(var r=[],i=0,o=e.length,a=!n;i<o;i++)!t(e[i],i)!==a&&r.push(e[i]);return r},map:function(e,t,n){var r,i,o=0,a=[];if(d(e))for(r=e.length;o<r;o++)null!=(i=t(e[o],o,n))&&a.push(i);else for(o in e)null!=(i=t(e[o],o,n))&&a.push(i);return v(a)},guid:1,support:m}),"function"==typeof Symbol&&(E.fn[Symbol.iterator]=t[Symbol.iterator]),E.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(e,t){n["[object "+t+"]"]=t.toLowerCase()});var p=function(n){var e,p,x,o,i,h,f,g,w,u,l,C,T,a,E,v,s,c,y,A="sizzle"+1*new Date,d=n.document,N=0,r=0,m=ue(),b=ue(),S=ue(),k=ue(),D=function(e,t){return e===t&&(l=!0),0},L={}.hasOwnProperty,t=[],j=t.pop,q=t.push,O=t.push,P=t.slice,H=function(e,t){for(var n=0,r=e.length;n<r;n++)if(e[n]===t)return n;return-1},I="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",R="[\\x20\\t\\r\\n\\f]",B="(?:\\\\[\\da-fA-F]{1,6}"+R+"?|\\\\[^\\r\\n\\f]|[\\w-]|[^\0-\\x7f])+",M="\\["+R+"*("+B+")(?:"+R+"*([*^$|!~]?=)"+R+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+B+"))|)"+R+"*\\]",W=":("+B+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+M+")*)|.*)\\)|)",F=new RegExp(R+"+","g"),$=new RegExp("^"+R+"+|((?:^|[^\\\\])(?:\\\\.)*)"+R+"+$","g"),z=new RegExp("^"+R+"*,"+R+"*"),_=new RegExp("^"+R+"*([>+~]|"+R+")"+R+"*"),U=new RegExp(R+"|>"),V=new RegExp(W),X=new RegExp("^"+B+"$"),Q={ID:new RegExp("^#("+B+")"),CLASS:new RegExp("^\\.("+B+")"),TAG:new RegExp("^("+B+"|[*])"),ATTR:new RegExp("^"+M),PSEUDO:new RegExp("^"+W),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+R+"*(even|odd|(([+-]|)(\\d*)n|)"+R+"*(?:([+-]|)"+R+"*(\\d+)|))"+R+"*\\)|)","i"),bool:new RegExp("^(?:"+I+")$","i"),needsContext:new RegExp("^"+R+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+R+"*((?:-\\d)?\\d*)"+R+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,G=/^(?:input|select|textarea|button)$/i,K=/^h\d$/i,J=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\[\\da-fA-F]{1,6}"+R+"?|\\\\([^\\r\\n\\f])","g"),ne=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|56320))},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){C()},ae=xe(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{O.apply(t=P.call(d.childNodes),d.childNodes),t[d.childNodes.length].nodeType}catch(e){O={apply:t.length?function(e,t){q.apply(e,P.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,d=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==d&&9!==d&&11!==d)return n;if(!r&&(C(e),e=e||T,E)){if(11!==d&&(u=Z.exec(t)))if(i=u[1]){if(9===d){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return O.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&p.getElementsByClassName&&e.getElementsByClassName)return O.apply(n,e.getElementsByClassName(i)),n}if(p.qsa&&!k[t+" "]&&(!v||!v.test(t))&&(1!==d||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===d&&(U.test(t)||_.test(t))){(f=ee.test(t)&&ye(e.parentNode)||e)===e&&p.scope||((s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=A)),o=(l=h(t)).length;while(o--)l[o]=(s?"#"+s:":scope")+" "+be(l[o]);c=l.join(",")}try{return O.apply(n,f.querySelectorAll(c)),n}catch(e){k(t,!0)}finally{s===A&&e.removeAttribute("id")}}}return g(t.replace($,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>x.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[A]=!0,e}function ce(e){var t=T.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)x.attrHandle[n[r]]=t}function de(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function pe(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in p=se.support={},i=se.isXML=function(e){var t=e.namespaceURI,n=(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},C=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:d;return r!=T&&9===r.nodeType&&r.documentElement&&(a=(T=r).documentElement,E=!i(T),d!=T&&(n=T.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),p.scope=ce(function(e){return a.appendChild(e).appendChild(T.createElement("div")),"undefined"!=typeof e.querySelectorAll&&!e.querySelectorAll(":scope fieldset div").length}),p.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),p.getElementsByTagName=ce(function(e){return e.appendChild(T.createComment("")),!e.getElementsByTagName("*").length}),p.getElementsByClassName=J.test(T.getElementsByClassName),p.getById=ce(function(e){return a.appendChild(e).id=A,!T.getElementsByName||!T.getElementsByName(A).length}),p.getById?(x.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},x.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(x.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},x.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),x.find.TAG=p.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):p.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},x.find.CLASS=p.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(p.qsa=J.test(T.querySelectorAll))&&(ce(function(e){var t;a.appendChild(e).innerHTML="<a id='"+A+"'></a><select id='"+A+"-\r\\' msallowcapture=''><option selected=''></option></select>",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+R+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+R+"*(?:value|"+I+")"),e.querySelectorAll("[id~="+A+"-]").length||v.push("~="),(t=T.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||v.push("\\["+R+"*name"+R+"*="+R+"*(?:''|\"\")"),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+A+"+*").length||v.push(".#.+[+~]"),e.querySelectorAll("\\\f"),v.push("[\\r\\n\\f]")}),ce(function(e){e.innerHTML="<a href='' disabled='disabled'></a><select disabled='disabled'><option/></select>";var t=T.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+R+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(p.matchesSelector=J.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){p.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",W)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=J.test(a.compareDocumentPosition),y=t||J.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},D=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)==(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!p.sortDetached&&t.compareDocumentPosition(e)===n?e==T||e.ownerDocument==d&&y(d,e)?-1:t==T||t.ownerDocument==d&&y(d,t)?1:u?H(u,e)-H(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e==T?-1:t==T?1:i?-1:o?1:u?H(u,e)-H(u,t):0;if(i===o)return de(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?de(a[r],s[r]):a[r]==d?-1:s[r]==d?1:0}),T},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if(C(e),p.matchesSelector&&E&&!k[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||p.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){k(t,!0)}return 0<se(t,T,null,[e]).length},se.contains=function(e,t){return(e.ownerDocument||e)!=T&&C(e),y(e,t)},se.attr=function(e,t){(e.ownerDocument||e)!=T&&C(e);var n=x.attrHandle[t.toLowerCase()],r=n&&L.call(x.attrHandle,t.toLowerCase())?n(e,t,!E):void 0;return void 0!==r?r:p.attributes||!E?e.getAttribute(t):(r=e.getAttributeNode(t))&&r.specified?r.value:null},se.escape=function(e){return(e+"").replace(re,ie)},se.error=function(e){throw new Error("Syntax error, unrecognized expression: "+e)},se.uniqueSort=function(e){var t,n=[],r=0,i=0;if(l=!p.detectDuplicates,u=!p.sortStable&&e.slice(0),e.sort(D),l){while(t=e[i++])t===e[i]&&(r=n.push(i));while(r--)e.splice(n[r],1)}return u=null,e},o=se.getText=function(e){var t,n="",r=0,i=e.nodeType;if(i){if(1===i||9===i||11===i){if("string"==typeof e.textContent)return e.textContent;for(e=e.firstChild;e;e=e.nextSibling)n+=o(e)}else if(3===i||4===i)return e.nodeValue}else while(t=e[r++])n+=o(t);return n},(x=se.selectors={cacheLength:50,createPseudo:le,match:Q,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return Q.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&V.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=m[e+" "];return t||(t=new RegExp("(^|"+R+")"+e+"("+R+"|$)"))&&m(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1<t.indexOf(i):"$="===r?i&&t.slice(-i.length)===i:"~="===r?-1<(" "+t.replace(F," ")+" ").indexOf(i):"|="===r&&(t===i||t.slice(0,i.length+1)===i+"-"))}},CHILD:function(h,e,t,g,v){var y="nth"!==h.slice(0,3),m="last"!==h.slice(-4),b="of-type"===e;return 1===g&&0===v?function(e){return!!e.parentNode}:function(e,t,n){var r,i,o,a,s,u,l=y!==m?"nextSibling":"previousSibling",c=e.parentNode,f=b&&e.nodeName.toLowerCase(),d=!n&&!b,p=!1;if(c){if(y){while(l){a=e;while(a=a[l])if(b?a.nodeName.toLowerCase()===f:1===a.nodeType)return!1;u=l="only"===h&&!u&&"nextSibling"}return!0}if(u=[m?c.firstChild:c.lastChild],m&&d){p=(s=(r=(i=(o=(a=c)[A]||(a[A]={}))[a.uniqueID]||(o[a.uniqueID]={}))[h]||[])[0]===N&&r[1])&&r[2],a=s&&c.childNodes[s];while(a=++s&&a&&a[l]||(p=s=0)||u.pop())if(1===a.nodeType&&++p&&a===e){i[h]=[N,s,p];break}}else if(d&&(p=s=(r=(i=(o=(a=e)[A]||(a[A]={}))[a.uniqueID]||(o[a.uniqueID]={}))[h]||[])[0]===N&&r[1]),!1===p)while(a=++s&&a&&a[l]||(p=s=0)||u.pop())if((b?a.nodeName.toLowerCase()===f:1===a.nodeType)&&++p&&(d&&((i=(o=a[A]||(a[A]={}))[a.uniqueID]||(o[a.uniqueID]={}))[h]=[N,p]),a===e))break;return(p-=v)===g||p%g==0&&0<=p/g}}},PSEUDO:function(e,o){var t,a=x.pseudos[e]||x.setFilters[e.toLowerCase()]||se.error("unsupported pseudo: "+e);return a[A]?a(o):1<a.length?(t=[e,e,"",o],x.setFilters.hasOwnProperty(e.toLowerCase())?le(function(e,t){var n,r=a(e,o),i=r.length;while(i--)e[n=H(e,r[i])]=!(t[n]=r[i])}):function(e){return a(e,0,t)}):a}},pseudos:{not:le(function(e){var r=[],i=[],s=f(e.replace($,"$1"));return s[A]?le(function(e,t,n,r){var i,o=s(e,null,r,[]),a=e.length;while(a--)(i=o[a])&&(e[a]=!(t[a]=i))}):function(e,t,n){return r[0]=e,s(r,null,n,i),r[0]=null,!i.pop()}}),has:le(function(t){return function(e){return 0<se(t,e).length}}),contains:le(function(t){return t=t.replace(te,ne),function(e){return-1<(e.textContent||o(e)).indexOf(t)}}),lang:le(function(n){return X.test(n||"")||se.error("unsupported lang: "+n),n=n.replace(te,ne).toLowerCase(),function(e){var t;do{if(t=E?e.lang:e.getAttribute("xml:lang")||e.getAttribute("lang"))return(t=t.toLowerCase())===n||0===t.indexOf(n+"-")}while((e=e.parentNode)&&1===e.nodeType);return!1}}),target:function(e){var t=n.location&&n.location.hash;return t&&t.slice(1)===e.id},root:function(e){return e===a},focus:function(e){return e===T.activeElement&&(!T.hasFocus||T.hasFocus())&&!!(e.type||e.href||~e.tabIndex)},enabled:ge(!1),disabled:ge(!0),checked:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&!!e.checked||"option"===t&&!!e.selected},selected:function(e){return e.parentNode&&e.parentNode.selectedIndex,!0===e.selected},empty:function(e){for(e=e.firstChild;e;e=e.nextSibling)if(e.nodeType<6)return!1;return!0},parent:function(e){return!x.pseudos.empty(e)},header:function(e){return K.test(e.nodeName)},input:function(e){return G.test(e.nodeName)},button:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&"button"===e.type||"button"===t},text:function(e){var t;return"input"===e.nodeName.toLowerCase()&&"text"===e.type&&(null==(t=e.getAttribute("type"))||"text"===t.toLowerCase())},first:ve(function(){return[0]}),last:ve(function(e,t){return[t-1]}),eq:ve(function(e,t,n){return[n<0?n+t:n]}),even:ve(function(e,t){for(var n=0;n<t;n+=2)e.push(n);return e}),odd:ve(function(e,t){for(var n=1;n<t;n+=2)e.push(n);return e}),lt:ve(function(e,t,n){for(var r=n<0?n+t:t<n?t:n;0<=--r;)e.push(r);return e}),gt:ve(function(e,t,n){for(var r=n<0?n+t:n;++r<t;)e.push(r);return e})}}).pseudos.nth=x.pseudos.eq,{radio:!0,checkbox:!0,file:!0,password:!0,image:!0})x.pseudos[e]=pe(e);for(e in{submit:!0,reset:!0})x.pseudos[e]=he(e);function me(){}function be(e){for(var t=0,n=e.length,r="";t<n;t++)r+=e[t].value;return r}function xe(s,e,t){var u=e.dir,l=e.next,c=l||u,f=t&&"parentNode"===c,d=r++;return e.first?function(e,t,n){while(e=e[u])if(1===e.nodeType||f)return s(e,t,n);return!1}:function(e,t,n){var r,i,o,a=[N,d];if(n){while(e=e[u])if((1===e.nodeType||f)&&s(e,t,n))return!0}else while(e=e[u])if(1===e.nodeType||f)if(i=(o=e[A]||(e[A]={}))[e.uniqueID]||(o[e.uniqueID]={}),l&&l===e.nodeName.toLowerCase())e=e[u]||e;else{if((r=i[c])&&r[0]===N&&r[1]===d)return a[2]=r[2];if((i[c]=a)[2]=s(e,t,n))return!0}return!1}}function we(i){return 1<i.length?function(e,t,n){var r=i.length;while(r--)if(!i[r](e,t,n))return!1;return!0}:i[0]}function Ce(e,t,n,r,i){for(var o,a=[],s=0,u=e.length,l=null!=t;s<u;s++)(o=e[s])&&(n&&!n(o,r,i)||(a.push(o),l&&t.push(s)));return a}function Te(p,h,g,v,y,e){return v&&!v[A]&&(v=Te(v)),y&&!y[A]&&(y=Te(y,e)),le(function(e,t,n,r){var i,o,a,s=[],u=[],l=t.length,c=e||function(e,t,n){for(var r=0,i=t.length;r<i;r++)se(e,t[r],n);return n}(h||"*",n.nodeType?[n]:n,[]),f=!p||!e&&h?c:Ce(c,s,p,n,r),d=g?y||(e?p:l||v)?[]:t:f;if(g&&g(f,d,n,r),v){i=Ce(d,u),v(i,[],n,r),o=i.length;while(o--)(a=i[o])&&(d[u[o]]=!(f[u[o]]=a))}if(e){if(y||p){if(y){i=[],o=d.length;while(o--)(a=d[o])&&i.push(f[o]=a);y(null,d=[],i,r)}o=d.length;while(o--)(a=d[o])&&-1<(i=y?H(e,a):s[o])&&(e[i]=!(t[i]=a))}}else d=Ce(d===t?d.splice(l,d.length):d),y?y(null,t,d,r):O.apply(t,d)})}function Ee(e){for(var i,t,n,r=e.length,o=x.relative[e[0].type],a=o||x.relative[" "],s=o?1:0,u=xe(function(e){return e===i},a,!0),l=xe(function(e){return-1<H(i,e)},a,!0),c=[function(e,t,n){var r=!o&&(n||t!==w)||((i=t).nodeType?u(e,t,n):l(e,t,n));return i=null,r}];s<r;s++)if(t=x.relative[e[s].type])c=[xe(we(c),t)];else{if((t=x.filter[e[s].type].apply(null,e[s].matches))[A]){for(n=++s;n<r;n++)if(x.relative[e[n].type])break;return Te(1<s&&we(c),1<s&&be(e.slice(0,s-1).concat({value:" "===e[s-2].type?"*":""})).replace($,"$1"),t,s<n&&Ee(e.slice(s,n)),n<r&&Ee(e=e.slice(n)),n<r&&be(e))}c.push(t)}return we(c)}return me.prototype=x.filters=x.pseudos,x.setFilters=new me,h=se.tokenize=function(e,t){var n,r,i,o,a,s,u,l=b[e+" "];if(l)return t?0:l.slice(0);a=e,s=[],u=x.preFilter;while(a){for(o in n&&!(r=z.exec(a))||(r&&(a=a.slice(r[0].length)||a),s.push(i=[])),n=!1,(r=_.exec(a))&&(n=r.shift(),i.push({value:n,type:r[0].replace($," ")}),a=a.slice(n.length)),x.filter)!(r=Q[o].exec(a))||u[o]&&!(r=u[o](r))||(n=r.shift(),i.push({value:n,type:o,matches:r}),a=a.slice(n.length));if(!n)break}return t?a.length:a?se.error(e):b(e,s).slice(0)},f=se.compile=function(e,t){var n,v,y,m,b,r,i=[],o=[],a=S[e+" "];if(!a){t||(t=h(e)),n=t.length;while(n--)(a=Ee(t[n]))[A]?i.push(a):o.push(a);(a=S(e,(v=o,m=0<(y=i).length,b=0<v.length,r=function(e,t,n,r,i){var o,a,s,u=0,l="0",c=e&&[],f=[],d=w,p=e||b&&x.find.TAG("*",i),h=N+=null==d?1:Math.random()||.1,g=p.length;for(i&&(w=t==T||t||i);l!==g&&null!=(o=p[l]);l++){if(b&&o){a=0,t||o.ownerDocument==T||(C(o),n=!E);while(s=v[a++])if(s(o,t||T,n)){r.push(o);break}i&&(N=h)}m&&((o=!s&&o)&&u--,e&&c.push(o))}if(u+=l,m&&l!==u){a=0;while(s=y[a++])s(c,f,t,n);if(e){if(0<u)while(l--)c[l]||f[l]||(f[l]=j.call(r));f=Ce(f)}O.apply(r,f),i&&!e&&0<f.length&&1<u+y.length&&se.uniqueSort(r)}return i&&(N=h,w=d),c},m?le(r):r))).selector=e}return a},g=se.select=function(e,t,n,r){var i,o,a,s,u,l="function"==typeof e&&e,c=!r&&h(e=l.selector||e);if(n=n||[],1===c.length){if(2<(o=c[0]=c[0].slice(0)).length&&"ID"===(a=o[0]).type&&9===t.nodeType&&E&&x.relative[o[1].type]){if(!(t=(x.find.ID(a.matches[0].replace(te,ne),t)||[])[0]))return n;l&&(t=t.parentNode),e=e.slice(o.shift().value.length)}i=Q.needsContext.test(e)?0:o.length;while(i--){if(a=o[i],x.relative[s=a.type])break;if((u=x.find[s])&&(r=u(a.matches[0].replace(te,ne),ee.test(o[0].type)&&ye(t.parentNode)||t))){if(o.splice(i,1),!(e=r.length&&be(o)))return O.apply(n,r),n;break}}}return(l||f(e,c))(r,t,!E,n,!t||ee.test(e)&&ye(t.parentNode)||t),n},p.sortStable=A.split("").sort(D).join("")===A,p.detectDuplicates=!!l,C(),p.sortDetached=ce(function(e){return 1&e.compareDocumentPosition(T.createElement("fieldset"))}),ce(function(e){return e.innerHTML="<a href='#'></a>","#"===e.firstChild.getAttribute("href")})||fe("type|href|height|width",function(e,t,n){if(!n)return e.getAttribute(t,"type"===t.toLowerCase()?1:2)}),p.attributes&&ce(function(e){return e.innerHTML="<input/>",e.firstChild.setAttribute("value",""),""===e.firstChild.getAttribute("value")})||fe("value",function(e,t,n){if(!n&&"input"===e.nodeName.toLowerCase())return e.defaultValue}),ce(function(e){return null==e.getAttribute("disabled")})||fe(I,function(e,t,n){var r;if(!n)return!0===e[t]?t.toLowerCase():(r=e.getAttributeNode(t))&&r.specified?r.value:null}),se}(g);E.find=p,E.expr=p.selectors,E.expr[":"]=E.expr.pseudos,E.uniqueSort=E.unique=p.uniqueSort,E.text=p.getText,E.isXMLDoc=p.isXML,E.contains=p.contains,E.escapeSelector=p.escape;var h=function(e,t,n){var r=[],i=void 0!==n;while((e=e[t])&&9!==e.nodeType)if(1===e.nodeType){if(i&&E(e).is(n))break;r.push(e)}return r},A=function(e,t){for(var n=[];e;e=e.nextSibling)1===e.nodeType&&e!==t&&n.push(e);return n},N=E.expr.match.needsContext;function S(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()}var k=/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function D(e,n,r){return b(n)?E.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?E.grep(e,function(e){return e===n!==r}):"string"!=typeof n?E.grep(e,function(e){return-1<i.call(n,e)!==r}):E.filter(n,e,r)}E.filter=function(e,t,n){var r=t[0];return n&&(e=":not("+e+")"),1===t.length&&1===r.nodeType?E.find.matchesSelector(r,e)?[r]:[]:E.find.matches(e,E.grep(t,function(e){return 1===e.nodeType}))},E.fn.extend({find:function(e){var t,n,r=this.length,i=this;if("string"!=typeof e)return this.pushStack(E(e).filter(function(){for(t=0;t<r;t++)if(E.contains(i[t],this))return!0}));for(n=this.pushStack([]),t=0;t<r;t++)E.find(e,i[t],n);return 1<r?E.uniqueSort(n):n},filter:function(e){return this.pushStack(D(this,e||[],!1))},not:function(e){return this.pushStack(D(this,e||[],!0))},is:function(e){return!!D(this,"string"==typeof e&&N.test(e)?E(e):e||[],!1).length}});var L,j=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/;(E.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||L,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:j.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof E?t[0]:t,E.merge(this,E.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:w,!0)),k.test(r[1])&&E.isPlainObject(t))for(r in t)b(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=w.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):b(e)?void 0!==n.ready?n.ready(e):e(E):E.makeArray(e,this)}).prototype=E.fn,L=E(w);var q=/^(?:parents|prev(?:Until|All))/,O={children:!0,contents:!0,next:!0,prev:!0};function P(e,t){while((e=e[t])&&1!==e.nodeType);return e}E.fn.extend({has:function(e){var t=E(e,this),n=t.length;return this.filter(function(){for(var e=0;e<n;e++)if(E.contains(this,t[e]))return!0})},closest:function(e,t){var n,r=0,i=this.length,o=[],a="string"!=typeof e&&E(e);if(!N.test(e))for(;r<i;r++)for(n=this[r];n&&n!==t;n=n.parentNode)if(n.nodeType<11&&(a?-1<a.index(n):1===n.nodeType&&E.find.matchesSelector(n,e))){o.push(n);break}return this.pushStack(1<o.length?E.uniqueSort(o):o)},index:function(e){return e?"string"==typeof e?i.call(E(e),this[0]):i.call(this,e.jquery?e[0]:e):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(e,t){return this.pushStack(E.uniqueSort(E.merge(this.get(),E(e,t))))},addBack:function(e){return this.add(null==e?this.prevObject:this.prevObject.filter(e))}}),E.each({parent:function(e){var t=e.parentNode;return t&&11!==t.nodeType?t:null},parents:function(e){return h(e,"parentNode")},parentsUntil:function(e,t,n){return h(e,"parentNode",n)},next:function(e){return P(e,"nextSibling")},prev:function(e){return P(e,"previousSibling")},nextAll:function(e){return h(e,"nextSibling")},prevAll:function(e){return h(e,"previousSibling")},nextUntil:function(e,t,n){return h(e,"nextSibling",n)},prevUntil:function(e,t,n){return h(e,"previousSibling",n)},siblings:function(e){return A((e.parentNode||{}).firstChild,e)},children:function(e){return A(e.firstChild)},contents:function(e){return null!=e.contentDocument&&r(e.contentDocument)?e.contentDocument:(S(e,"template")&&(e=e.content||e),E.merge([],e.childNodes))}},function(r,i){E.fn[r]=function(e,t){var n=E.map(this,i,e);return"Until"!==r.slice(-5)&&(t=e),t&&"string"==typeof t&&(n=E.filter(t,n)),1<this.length&&(O[r]||E.uniqueSort(n),q.test(r)&&n.reverse()),this.pushStack(n)}});var H=/[^\x20\t\r\n\f]+/g;function I(e){return e}function R(e){throw e}function B(e,t,n,r){var i;try{e&&b(i=e.promise)?i.call(e).done(t).fail(n):e&&b(i=e.then)?i.call(e,t,n):t.apply(void 0,[e].slice(r))}catch(e){n.apply(void 0,[e])}}E.Callbacks=function(r){var e,n;r="string"==typeof r?(e=r,n={},E.each(e.match(H)||[],function(e,t){n[t]=!0}),n):E.extend({},r);var i,t,o,a,s=[],u=[],l=-1,c=function(){for(a=a||r.once,o=i=!0;u.length;l=-1){t=u.shift();while(++l<s.length)!1===s[l].apply(t[0],t[1])&&r.stopOnFalse&&(l=s.length,t=!1)}r.memory||(t=!1),i=!1,a&&(s=t?[]:"")},f={add:function(){return s&&(t&&!i&&(l=s.length-1,u.push(t)),function n(e){E.each(e,function(e,t){b(t)?r.unique&&f.has(t)||s.push(t):t&&t.length&&"string"!==T(t)&&n(t)})}(arguments),t&&!i&&c()),this},remove:function(){return E.each(arguments,function(e,t){var n;while(-1<(n=E.inArray(t,s,n)))s.splice(n,1),n<=l&&l--}),this},has:function(e){return e?-1<E.inArray(e,s):0<s.length},empty:function(){return s&&(s=[]),this},disable:function(){return a=u=[],s=t="",this},disabled:function(){return!s},lock:function(){return a=u=[],t||i||(s=t=""),this},locked:function(){return!!a},fireWith:function(e,t){return a||(t=[e,(t=t||[]).slice?t.slice():t],u.push(t),i||c()),this},fire:function(){return f.fireWith(this,arguments),this},fired:function(){return!!o}};return f},E.extend({Deferred:function(e){var o=[["notify","progress",E.Callbacks("memory"),E.Callbacks("memory"),2],["resolve","done",E.Callbacks("once memory"),E.Callbacks("once memory"),0,"resolved"],["reject","fail",E.Callbacks("once memory"),E.Callbacks("once memory"),1,"rejected"]],i="pending",a={state:function(){return i},always:function(){return s.done(arguments).fail(arguments),this},"catch":function(e){return a.then(null,e)},pipe:function(){var i=arguments;return E.Deferred(function(r){E.each(o,function(e,t){var n=b(i[t[4]])&&i[t[4]];s[t[1]](function(){var e=n&&n.apply(this,arguments);e&&b(e.promise)?e.promise().progress(r.notify).done(r.resolve).fail(r.reject):r[t[0]+"With"](this,n?[e]:arguments)})}),i=null}).promise()},then:function(t,n,r){var u=0;function l(i,o,a,s){return function(){var n=this,r=arguments,e=function(){var e,t;if(!(i<u)){if((e=a.apply(n,r))===o.promise())throw new TypeError("Thenable self-resolution");t=e&&("object"==typeof e||"function"==typeof e)&&e.then,b(t)?s?t.call(e,l(u,o,I,s),l(u,o,R,s)):(u++,t.call(e,l(u,o,I,s),l(u,o,R,s),l(u,o,I,o.notifyWith))):(a!==I&&(n=void 0,r=[e]),(s||o.resolveWith)(n,r))}},t=s?e:function(){try{e()}catch(e){E.Deferred.exceptionHook&&E.Deferred.exceptionHook(e,t.stackTrace),u<=i+1&&(a!==R&&(n=void 0,r=[e]),o.rejectWith(n,r))}};i?t():(E.Deferred.getStackHook&&(t.stackTrace=E.Deferred.getStackHook()),g.setTimeout(t))}}return E.Deferred(function(e){o[0][3].add(l(0,e,b(r)?r:I,e.notifyWith)),o[1][3].add(l(0,e,b(t)?t:I)),o[2][3].add(l(0,e,b(n)?n:R))}).promise()},promise:function(e){return null!=e?E.extend(e,a):a}},s={};return E.each(o,function(e,t){var n=t[2],r=t[5];a[t[1]]=n.add,r&&n.add(function(){i=r},o[3-e][2].disable,o[3-e][3].disable,o[0][2].lock,o[0][3].lock),n.add(t[3].fire),s[t[0]]=function(){return s[t[0]+"With"](this===s?void 0:this,arguments),this},s[t[0]+"With"]=n.fireWith}),a.promise(s),e&&e.call(s,s),s},when:function(e){var n=arguments.length,t=n,r=Array(t),i=s.call(arguments),o=E.Deferred(),a=function(t){return function(e){r[t]=this,i[t]=1<arguments.length?s.call(arguments):e,--n||o.resolveWith(r,i)}};if(n<=1&&(B(e,o.done(a(t)).resolve,o.reject,!n),"pending"===o.state()||b(i[t]&&i[t].then)))return o.then();while(t--)B(i[t],a(t),o.reject);return o.promise()}});var M=/^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;E.Deferred.exceptionHook=function(e,t){g.console&&g.console.warn&&e&&M.test(e.name)&&g.console.warn("jQuery.Deferred exception: "+e.message,e.stack,t)},E.readyException=function(e){g.setTimeout(function(){throw e})};var W=E.Deferred();function F(){w.removeEventListener("DOMContentLoaded",F),g.removeEventListener("load",F),E.ready()}E.fn.ready=function(e){return W.then(e)["catch"](function(e){E.readyException(e)}),this},E.extend({isReady:!1,readyWait:1,ready:function(e){(!0===e?--E.readyWait:E.isReady)||(E.isReady=!0)!==e&&0<--E.readyWait||W.resolveWith(w,[E])}}),E.ready.then=W.then,"complete"===w.readyState||"loading"!==w.readyState&&!w.documentElement.doScroll?g.setTimeout(E.ready):(w.addEventListener("DOMContentLoaded",F),g.addEventListener("load",F));var $=function(e,t,n,r,i,o,a){var s=0,u=e.length,l=null==n;if("object"===T(n))for(s in i=!0,n)$(e,t,s,n[s],!0,o,a);else if(void 0!==r&&(i=!0,b(r)||(a=!0),l&&(a?(t.call(e,r),t=null):(l=t,t=function(e,t,n){return l.call(E(e),n)})),t))for(;s<u;s++)t(e[s],n,a?r:r.call(e[s],s,t(e[s],n)));return i?e:l?t.call(e):u?t(e[0],n):o},z=/^-ms-/,_=/-([a-z])/g;function U(e,t){return t.toUpperCase()}function V(e){return e.replace(z,"ms-").replace(_,U)}var X=function(e){return 1===e.nodeType||9===e.nodeType||!+e.nodeType};function Q(){this.expando=E.expando+Q.uid++}Q.uid=1,Q.prototype={cache:function(e){var t=e[this.expando];return t||(t=Object.create(null),X(e)&&(e.nodeType?e[this.expando]=t:Object.defineProperty(e,this.expando,{value:t,configurable:!0}))),t},set:function(e,t,n){var r,i=this.cache(e);if("string"==typeof t)i[V(t)]=n;else for(r in t)i[V(r)]=t[r];return i},get:function(e,t){return void 0===t?this.cache(e):e[this.expando]&&e[this.expando][V(t)]},access:function(e,t,n){return void 0===t||t&&"string"==typeof t&&void 0===n?this.get(e,t):(this.set(e,t,n),void 0!==n?n:t)},remove:function(e,t){var n,r=e[this.expando];if(void 0!==r){if(void 0!==t){n=(t=Array.isArray(t)?t.map(V):(t=V(t))in r?[t]:t.match(H)||[]).length;while(n--)delete r[t[n]]}(void 0===t||E.isEmptyObject(r))&&(e.nodeType?e[this.expando]=void 0:delete e[this.expando])}},hasData:function(e){var t=e[this.expando];return void 0!==t&&!E.isEmptyObject(t)}};var Y=new Q,G=new Q,K=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,J=/[A-Z]/g;function Z(e,t,n){var r,i;if(void 0===n&&1===e.nodeType)if(r="data-"+t.replace(J,"-$&").toLowerCase(),"string"==typeof(n=e.getAttribute(r))){try{n="true"===(i=n)||"false"!==i&&("null"===i?null:i===+i+""?+i:K.test(i)?JSON.parse(i):i)}catch(e){}G.set(e,t,n)}else n=void 0;return n}E.extend({hasData:function(e){return G.hasData(e)||Y.hasData(e)},data:function(e,t,n){return G.access(e,t,n)},removeData:function(e,t){G.remove(e,t)},_data:function(e,t,n){return Y.access(e,t,n)},_removeData:function(e,t){Y.remove(e,t)}}),E.fn.extend({data:function(n,e){var t,r,i,o=this[0],a=o&&o.attributes;if(void 0===n){if(this.length&&(i=G.get(o),1===o.nodeType&&!Y.get(o,"hasDataAttrs"))){t=a.length;while(t--)a[t]&&0===(r=a[t].name).indexOf("data-")&&(r=V(r.slice(5)),Z(o,r,i[r]));Y.set(o,"hasDataAttrs",!0)}return i}return"object"==typeof n?this.each(function(){G.set(this,n)}):$(this,function(e){var t;if(o&&void 0===e)return void 0!==(t=G.get(o,n))?t:void 0!==(t=Z(o,n))?t:void 0;this.each(function(){G.set(this,n,e)})},null,e,1<arguments.length,null,!0)},removeData:function(e){return this.each(function(){G.remove(this,e)})}}),E.extend({queue:function(e,t,n){var r;if(e)return t=(t||"fx")+"queue",r=Y.get(e,t),n&&(!r||Array.isArray(n)?r=Y.access(e,t,E.makeArray(n)):r.push(n)),r||[]},dequeue:function(e,t){t=t||"fx";var n=E.queue(e,t),r=n.length,i=n.shift(),o=E._queueHooks(e,t);"inprogress"===i&&(i=n.shift(),r--),i&&("fx"===t&&n.unshift("inprogress"),delete o.stop,i.call(e,function(){E.dequeue(e,t)},o)),!r&&o&&o.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return Y.get(e,n)||Y.access(e,n,{empty:E.Callbacks("once memory").add(function(){Y.remove(e,[t+"queue",n])})})}}),E.fn.extend({queue:function(t,n){var e=2;return"string"!=typeof t&&(n=t,t="fx",e--),arguments.length<e?E.queue(this[0],t):void 0===n?this:this.each(function(){var e=E.queue(this,t,n);E._queueHooks(this,t),"fx"===t&&"inprogress"!==e[0]&&E.dequeue(this,t)})},dequeue:function(e){return this.each(function(){E.dequeue(this,e)})},clearQueue:function(e){return this.queue(e||"fx",[])},promise:function(e,t){var n,r=1,i=E.Deferred(),o=this,a=this.length,s=function(){--r||i.resolveWith(o,[o])};"string"!=typeof e&&(t=e,e=void 0),e=e||"fx";while(a--)(n=Y.get(o[a],e+"queueHooks"))&&n.empty&&(r++,n.empty.add(s));return s(),i.promise(t)}});var ee=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,te=new RegExp("^(?:([+-])=|)("+ee+")([a-z%]*)$","i"),ne=["Top","Right","Bottom","Left"],re=w.documentElement,ie=function(e){return E.contains(e.ownerDocument,e)},oe={composed:!0};re.getRootNode&&(ie=function(e){return E.contains(e.ownerDocument,e)||e.getRootNode(oe)===e.ownerDocument});var ae=function(e,t){return"none"===(e=t||e).style.display||""===e.style.display&&ie(e)&&"none"===E.css(e,"display")};var se={};function ue(e,t){for(var n,r,i,o,a,s,u,l=[],c=0,f=e.length;c<f;c++)(r=e[c]).style&&(n=r.style.display,t?("none"===n&&(l[c]=Y.get(r,"display")||null,l[c]||(r.style.display="")),""===r.style.display&&ae(r)&&(l[c]=(u=a=o=void 0,a=(i=r).ownerDocument,s=i.nodeName,(u=se[s])||(o=a.body.appendChild(a.createElement(s)),u=E.css(o,"display"),o.parentNode.removeChild(o),"none"===u&&(u="block"),se[s]=u)))):"none"!==n&&(l[c]="none",Y.set(r,"display",n)));for(c=0;c<f;c++)null!=l[c]&&(e[c].style.display=l[c]);return e}E.fn.extend({show:function(){return ue(this,!0)},hide:function(){return ue(this)},toggle:function(e){return"boolean"==typeof e?e?this.show():this.hide():this.each(function(){ae(this)?E(this).show():E(this).hide()})}});var le,ce,fe=/^(?:checkbox|radio)$/i,de=/<([a-z][^\/\0>\x20\t\r\n\f]*)/i,pe=/^$|^module$|\/(?:java|ecma)script/i;le=w.createDocumentFragment().appendChild(w.createElement("div")),(ce=w.createElement("input")).setAttribute("type","radio"),ce.setAttribute("checked","checked"),ce.setAttribute("name","t"),le.appendChild(ce),m.checkClone=le.cloneNode(!0).cloneNode(!0).lastChild.checked,le.innerHTML="<textarea>x</textarea>",m.noCloneChecked=!!le.cloneNode(!0).lastChild.defaultValue,le.innerHTML="<option></option>",m.option=!!le.lastChild;var he={thead:[1,"<table>","</table>"],col:[2,"<table><colgroup>","</colgroup></table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],_default:[0,"",""]};function ge(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&S(e,t)?E.merge([e],n):n}function ve(e,t){for(var n=0,r=e.length;n<r;n++)Y.set(e[n],"globalEval",!t||Y.get(t[n],"globalEval"))}he.tbody=he.tfoot=he.colgroup=he.caption=he.thead,he.th=he.td,m.option||(he.optgroup=he.option=[1,"<select multiple='multiple'>","</select>"]);var ye=/<|&#?\w+;/;function me(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),d=[],p=0,h=e.length;p<h;p++)if((o=e[p])||0===o)if("object"===T(o))E.merge(d,o.nodeType?[o]:o);else if(ye.test(o)){a=a||f.appendChild(t.createElement("div")),s=(de.exec(o)||["",""])[1].toLowerCase(),u=he[s]||he._default,a.innerHTML=u[1]+E.htmlPrefilter(o)+u[2],c=u[0];while(c--)a=a.lastChild;E.merge(d,a.childNodes),(a=f.firstChild).textContent=""}else d.push(t.createTextNode(o));f.textContent="",p=0;while(o=d[p++])if(r&&-1<E.inArray(o,r))i&&i.push(o);else if(l=ie(o),a=ge(f.appendChild(o),"script"),l&&ve(a),n){c=0;while(o=a[c++])pe.test(o.type||"")&&n.push(o)}return f}var be=/^key/,xe=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,we=/^([^.]*)(?:\.(.+)|)/;function Ce(){return!0}function Te(){return!1}function Ee(e,t){return e===function(){try{return w.activeElement}catch(e){}}()==("focus"===t)}function Ae(e,t,n,r,i,o){var a,s;if("object"==typeof t){for(s in"string"!=typeof n&&(r=r||n,n=void 0),t)Ae(e,s,n,r,t[s],o);return e}if(null==r&&null==i?(i=n,r=n=void 0):null==i&&("string"==typeof n?(i=r,r=void 0):(i=r,r=n,n=void 0)),!1===i)i=Te;else if(!i)return e;return 1===o&&(a=i,(i=function(e){return E().off(e),a.apply(this,arguments)}).guid=a.guid||(a.guid=E.guid++)),e.each(function(){E.event.add(this,t,i,r,n)})}function Ne(e,i,o){o?(Y.set(e,i,!1),E.event.add(e,i,{namespace:!1,handler:function(e){var t,n,r=Y.get(this,i);if(1&e.isTrigger&&this[i]){if(r.length)(E.event.special[i]||{}).delegateType&&e.stopPropagation();else if(r=s.call(arguments),Y.set(this,i,r),t=o(this,i),this[i](),r!==(n=Y.get(this,i))||t?Y.set(this,i,!1):n={},r!==n)return e.stopImmediatePropagation(),e.preventDefault(),n.value}else r.length&&(Y.set(this,i,{value:E.event.trigger(E.extend(r[0],E.Event.prototype),r.slice(1),this)}),e.stopImmediatePropagation())}})):void 0===Y.get(e,i)&&E.event.add(e,i,Ce)}E.event={global:{},add:function(t,e,n,r,i){var o,a,s,u,l,c,f,d,p,h,g,v=Y.get(t);if(X(t)){n.handler&&(n=(o=n).handler,i=o.selector),i&&E.find.matchesSelector(re,i),n.guid||(n.guid=E.guid++),(u=v.events)||(u=v.events=Object.create(null)),(a=v.handle)||(a=v.handle=function(e){return"undefined"!=typeof E&&E.event.triggered!==e.type?E.event.dispatch.apply(t,arguments):void 0}),l=(e=(e||"").match(H)||[""]).length;while(l--)p=g=(s=we.exec(e[l])||[])[1],h=(s[2]||"").split(".").sort(),p&&(f=E.event.special[p]||{},p=(i?f.delegateType:f.bindType)||p,f=E.event.special[p]||{},c=E.extend({type:p,origType:g,data:r,handler:n,guid:n.guid,selector:i,needsContext:i&&E.expr.match.needsContext.test(i),namespace:h.join(".")},o),(d=u[p])||((d=u[p]=[]).delegateCount=0,f.setup&&!1!==f.setup.call(t,r,h,a)||t.addEventListener&&t.addEventListener(p,a)),f.add&&(f.add.call(t,c),c.handler.guid||(c.handler.guid=n.guid)),i?d.splice(d.delegateCount++,0,c):d.push(c),E.event.global[p]=!0)}},remove:function(e,t,n,r,i){var o,a,s,u,l,c,f,d,p,h,g,v=Y.hasData(e)&&Y.get(e);if(v&&(u=v.events)){l=(t=(t||"").match(H)||[""]).length;while(l--)if(p=g=(s=we.exec(t[l])||[])[1],h=(s[2]||"").split(".").sort(),p){f=E.event.special[p]||{},d=u[p=(r?f.delegateType:f.bindType)||p]||[],s=s[2]&&new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),a=o=d.length;while(o--)c=d[o],!i&&g!==c.origType||n&&n.guid!==c.guid||s&&!s.test(c.namespace)||r&&r!==c.selector&&("**"!==r||!c.selector)||(d.splice(o,1),c.selector&&d.delegateCount--,f.remove&&f.remove.call(e,c));a&&!d.length&&(f.teardown&&!1!==f.teardown.call(e,h,v.handle)||E.removeEvent(e,p,v.handle),delete u[p])}else for(p in u)E.event.remove(e,p+t[l],n,r,!0);E.isEmptyObject(u)&&Y.remove(e,"handle events")}},dispatch:function(e){var t,n,r,i,o,a,s=new Array(arguments.length),u=E.event.fix(e),l=(Y.get(this,"events")||Object.create(null))[u.type]||[],c=E.event.special[u.type]||{};for(s[0]=u,t=1;t<arguments.length;t++)s[t]=arguments[t];if(u.delegateTarget=this,!c.preDispatch||!1!==c.preDispatch.call(this,u)){a=E.event.handlers.call(this,u,l),t=0;while((i=a[t++])&&!u.isPropagationStopped()){u.currentTarget=i.elem,n=0;while((o=i.handlers[n++])&&!u.isImmediatePropagationStopped())u.rnamespace&&!1!==o.namespace&&!u.rnamespace.test(o.namespace)||(u.handleObj=o,u.data=o.data,void 0!==(r=((E.event.special[o.origType]||{}).handle||o.handler).apply(i.elem,s))&&!1===(u.result=r)&&(u.preventDefault(),u.stopPropagation()))}return c.postDispatch&&c.postDispatch.call(this,u),u.result}},handlers:function(e,t){var n,r,i,o,a,s=[],u=t.delegateCount,l=e.target;if(u&&l.nodeType&&!("click"===e.type&&1<=e.button))for(;l!==this;l=l.parentNode||this)if(1===l.nodeType&&("click"!==e.type||!0!==l.disabled)){for(o=[],a={},n=0;n<u;n++)void 0===a[i=(r=t[n]).selector+" "]&&(a[i]=r.needsContext?-1<E(i,this).index(l):E.find(i,this,null,[l]).length),a[i]&&o.push(r);o.length&&s.push({elem:l,handlers:o})}return l=this,u<t.length&&s.push({elem:l,handlers:t.slice(u)}),s},addProp:function(t,e){Object.defineProperty(E.Event.prototype,t,{enumerable:!0,configurable:!0,get:b(e)?function(){if(this.originalEvent)return e(this.originalEvent)}:function(){if(this.originalEvent)return this.originalEvent[t]},set:function(e){Object.defineProperty(this,t,{enumerable:!0,configurable:!0,writable:!0,value:e})}})},fix:function(e){return e[E.expando]?e:new E.Event(e)},special:{load:{noBubble:!0},click:{setup:function(e){var t=this||e;return fe.test(t.type)&&t.click&&S(t,"input")&&Ne(t,"click",Ce),!1},trigger:function(e){var t=this||e;return fe.test(t.type)&&t.click&&S(t,"input")&&Ne(t,"click"),!0},_default:function(e){var t=e.target;return fe.test(t.type)&&t.click&&S(t,"input")&&Y.get(t,"click")||S(t,"a")}},beforeunload:{postDispatch:function(e){void 0!==e.result&&e.originalEvent&&(e.originalEvent.returnValue=e.result)}}}},E.removeEvent=function(e,t,n){e.removeEventListener&&e.removeEventListener(t,n)},E.Event=function(e,t){if(!(this instanceof E.Event))return new E.Event(e,t);e&&e.type?(this.originalEvent=e,this.type=e.type,this.isDefaultPrevented=e.defaultPrevented||void 0===e.defaultPrevented&&!1===e.returnValue?Ce:Te,this.target=e.target&&3===e.target.nodeType?e.target.parentNode:e.target,this.currentTarget=e.currentTarget,this.relatedTarget=e.relatedTarget):this.type=e,t&&E.extend(this,t),this.timeStamp=e&&e.timeStamp||Date.now(),this[E.expando]=!0},E.Event.prototype={constructor:E.Event,isDefaultPrevented:Te,isPropagationStopped:Te,isImmediatePropagationStopped:Te,isSimulated:!1,preventDefault:function(){var e=this.originalEvent;this.isDefaultPrevented=Ce,e&&!this.isSimulated&&e.preventDefault()},stopPropagation:function(){var e=this.originalEvent;this.isPropagationStopped=Ce,e&&!this.isSimulated&&e.stopPropagation()},stopImmediatePropagation:function(){var e=this.originalEvent;this.isImmediatePropagationStopped=Ce,e&&!this.isSimulated&&e.stopImmediatePropagation(),this.stopPropagation()}},E.each({altKey:!0,bubbles:!0,cancelable:!0,changedTouches:!0,ctrlKey:!0,detail:!0,eventPhase:!0,metaKey:!0,pageX:!0,pageY:!0,shiftKey:!0,view:!0,"char":!0,code:!0,charCode:!0,key:!0,keyCode:!0,button:!0,buttons:!0,clientX:!0,clientY:!0,offsetX:!0,offsetY:!0,pointerId:!0,pointerType:!0,screenX:!0,screenY:!0,targetTouches:!0,toElement:!0,touches:!0,which:function(e){var t=e.button;return null==e.which&&be.test(e.type)?null!=e.charCode?e.charCode:e.keyCode:!e.which&&void 0!==t&&xe.test(e.type)?1&t?1:2&t?3:4&t?2:0:e.which}},E.event.addProp),E.each({focus:"focusin",blur:"focusout"},function(e,t){E.event.special[e]={setup:function(){return Ne(this,e,Ee),!1},trigger:function(){return Ne(this,e),!0},delegateType:t}}),E.each({mouseenter:"mouseover",mouseleave:"mouseout",pointerenter:"pointerover",pointerleave:"pointerout"},function(e,i){E.event.special[e]={delegateType:i,bindType:i,handle:function(e){var t,n=e.relatedTarget,r=e.handleObj;return n&&(n===this||E.contains(this,n))||(e.type=r.origType,t=r.handler.apply(this,arguments),e.type=i),t}}}),E.fn.extend({on:function(e,t,n,r){return Ae(this,e,t,n,r)},one:function(e,t,n,r){return Ae(this,e,t,n,r,1)},off:function(e,t,n){var r,i;if(e&&e.preventDefault&&e.handleObj)return r=e.handleObj,E(e.delegateTarget).off(r.namespace?r.origType+"."+r.namespace:r.origType,r.selector,r.handler),this;if("object"==typeof e){for(i in e)this.off(i,t,e[i]);return this}return!1!==t&&"function"!=typeof t||(n=t,t=void 0),!1===n&&(n=Te),this.each(function(){E.event.remove(this,e,n,t)})}});var Se=/<script|<style|<link/i,ke=/checked\s*(?:[^=]|=\s*.checked.)/i,De=/^\s*<!(?:\[CDATA\[|--)|(?:\]\]|--)>\s*$/g;function Le(e,t){return S(e,"table")&&S(11!==t.nodeType?t:t.firstChild,"tr")&&E(e).children("tbody")[0]||e}function je(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function qe(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Oe(e,t){var n,r,i,o,a,s;if(1===t.nodeType){if(Y.hasData(e)&&(s=Y.get(e).events))for(i in Y.remove(t,"handle events"),s)for(n=0,r=s[i].length;n<r;n++)E.event.add(t,i,s[i][n]);G.hasData(e)&&(o=G.access(e),a=E.extend({},o),G.set(t,a))}}function Pe(n,r,i,o){r=v(r);var e,t,a,s,u,l,c=0,f=n.length,d=f-1,p=r[0],h=b(p);if(h||1<f&&"string"==typeof p&&!m.checkClone&&ke.test(p))return n.each(function(e){var t=n.eq(e);h&&(r[0]=p.call(this,e,t.html())),Pe(t,r,i,o)});if(f&&(t=(e=me(r,n[0].ownerDocument,!1,n,o)).firstChild,1===e.childNodes.length&&(e=t),t||o)){for(s=(a=E.map(ge(e,"script"),je)).length;c<f;c++)u=e,c!==d&&(u=E.clone(u,!0,!0),s&&E.merge(a,ge(u,"script"))),i.call(n[c],u,c);if(s)for(l=a[a.length-1].ownerDocument,E.map(a,qe),c=0;c<s;c++)u=a[c],pe.test(u.type||"")&&!Y.access(u,"globalEval")&&E.contains(l,u)&&(u.src&&"module"!==(u.type||"").toLowerCase()?E._evalUrl&&!u.noModule&&E._evalUrl(u.src,{nonce:u.nonce||u.getAttribute("nonce")},l):C(u.textContent.replace(De,""),u,l))}return n}function He(e,t,n){for(var r,i=t?E.filter(t,e):e,o=0;null!=(r=i[o]);o++)n||1!==r.nodeType||E.cleanData(ge(r)),r.parentNode&&(n&&ie(r)&&ve(ge(r,"script")),r.parentNode.removeChild(r));return e}E.extend({htmlPrefilter:function(e){return e},clone:function(e,t,n){var r,i,o,a,s,u,l,c=e.cloneNode(!0),f=ie(e);if(!(m.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||E.isXMLDoc(e)))for(a=ge(c),r=0,i=(o=ge(e)).length;r<i;r++)s=o[r],u=a[r],void 0,"input"===(l=u.nodeName.toLowerCase())&&fe.test(s.type)?u.checked=s.checked:"input"!==l&&"textarea"!==l||(u.defaultValue=s.defaultValue);if(t)if(n)for(o=o||ge(e),a=a||ge(c),r=0,i=o.length;r<i;r++)Oe(o[r],a[r]);else Oe(e,c);return 0<(a=ge(c,"script")).length&&ve(a,!f&&ge(e,"script")),c},cleanData:function(e){for(var t,n,r,i=E.event.special,o=0;void 0!==(n=e[o]);o++)if(X(n)){if(t=n[Y.expando]){if(t.events)for(r in t.events)i[r]?E.event.remove(n,r):E.removeEvent(n,r,t.handle);n[Y.expando]=void 0}n[G.expando]&&(n[G.expando]=void 0)}}}),E.fn.extend({detach:function(e){return He(this,e,!0)},remove:function(e){return He(this,e)},text:function(e){return $(this,function(e){return void 0===e?E.text(this):this.empty().each(function(){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||(this.textContent=e)})},null,e,arguments.length)},append:function(){return Pe(this,arguments,function(e){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||Le(this,e).appendChild(e)})},prepend:function(){return Pe(this,arguments,function(e){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var t=Le(this,e);t.insertBefore(e,t.firstChild)}})},before:function(){return Pe(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this)})},after:function(){return Pe(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this.nextSibling)})},empty:function(){for(var e,t=0;null!=(e=this[t]);t++)1===e.nodeType&&(E.cleanData(ge(e,!1)),e.textContent="");return this},clone:function(e,t){return e=null!=e&&e,t=null==t?e:t,this.map(function(){return E.clone(this,e,t)})},html:function(e){return $(this,function(e){var t=this[0]||{},n=0,r=this.length;if(void 0===e&&1===t.nodeType)return t.innerHTML;if("string"==typeof e&&!Se.test(e)&&!he[(de.exec(e)||["",""])[1].toLowerCase()]){e=E.htmlPrefilter(e);try{for(;n<r;n++)1===(t=this[n]||{}).nodeType&&(E.cleanData(ge(t,!1)),t.innerHTML=e);t=0}catch(e){}}t&&this.empty().append(e)},null,e,arguments.length)},replaceWith:function(){var n=[];return Pe(this,arguments,function(e){var t=this.parentNode;E.inArray(this,n)<0&&(E.cleanData(ge(this)),t&&t.replaceChild(e,this))},n)}}),E.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(e,a){E.fn[e]=function(e){for(var t,n=[],r=E(e),i=r.length-1,o=0;o<=i;o++)t=o===i?this:this.clone(!0),E(r[o])[a](t),u.apply(n,t.get());return this.pushStack(n)}});var Ie=new RegExp("^("+ee+")(?!px)[a-z%]+$","i"),Re=function(e){var t=e.ownerDocument.defaultView;return t&&t.opener||(t=g),t.getComputedStyle(e)},Be=function(e,t,n){var r,i,o={};for(i in t)o[i]=e.style[i],e.style[i]=t[i];for(i in r=n.call(e),t)e.style[i]=o[i];return r},Me=new RegExp(ne.join("|"),"i");function We(e,t,n){var r,i,o,a,s=e.style;return(n=n||Re(e))&&(""!==(a=n.getPropertyValue(t)||n[t])||ie(e)||(a=E.style(e,t)),!m.pixelBoxStyles()&&Ie.test(a)&&Me.test(t)&&(r=s.width,i=s.minWidth,o=s.maxWidth,s.minWidth=s.maxWidth=s.width=a,a=n.width,s.width=r,s.minWidth=i,s.maxWidth=o)),void 0!==a?a+"":a}function Fe(e,t){return{get:function(){if(!e())return(this.get=t).apply(this,arguments);delete this.get}}}!function(){function e(){if(l){u.style.cssText="position:absolute;left:-11111px;width:60px;margin-top:1px;padding:0;border:0",l.style.cssText="position:relative;display:block;box-sizing:border-box;overflow:scroll;margin:auto;border:1px;padding:1px;width:60%;top:1%",re.appendChild(u).appendChild(l);var e=g.getComputedStyle(l);n="1%"!==e.top,s=12===t(e.marginLeft),l.style.right="60%",o=36===t(e.right),r=36===t(e.width),l.style.position="absolute",i=12===t(l.offsetWidth/3),re.removeChild(u),l=null}}function t(e){return Math.round(parseFloat(e))}var n,r,i,o,a,s,u=w.createElement("div"),l=w.createElement("div");l.style&&(l.style.backgroundClip="content-box",l.cloneNode(!0).style.backgroundClip="",m.clearCloneStyle="content-box"===l.style.backgroundClip,E.extend(m,{boxSizingReliable:function(){return e(),r},pixelBoxStyles:function(){return e(),o},pixelPosition:function(){return e(),n},reliableMarginLeft:function(){return e(),s},scrollboxSize:function(){return e(),i},reliableTrDimensions:function(){var e,t,n,r;return null==a&&(e=w.createElement("table"),t=w.createElement("tr"),n=w.createElement("div"),e.style.cssText="position:absolute;left:-11111px",t.style.height="1px",n.style.height="9px",re.appendChild(e).appendChild(t).appendChild(n),r=g.getComputedStyle(t),a=3<parseInt(r.height),re.removeChild(e)),a}}))}();var $e=["Webkit","Moz","ms"],ze=w.createElement("div").style,_e={};function Ue(e){var t=E.cssProps[e]||_e[e];return t||(e in ze?e:_e[e]=function(e){var t=e[0].toUpperCase()+e.slice(1),n=$e.length;while(n--)if((e=$e[n]+t)in ze)return e}(e)||e)}var Ve,Xe,Qe=/^(none|table(?!-c[ea]).+)/,Ye=/^--/,Ge={position:"absolute",visibility:"hidden",display:"block"},Ke={letterSpacing:"0",fontWeight:"400"};function Je(e,t,n){var r=te.exec(t);return r?Math.max(0,r[2]-(n||0))+(r[3]||"px"):t}function Ze(e,t,n,r,i,o){var a="width"===t?1:0,s=0,u=0;if(n===(r?"border":"content"))return 0;for(;a<4;a+=2)"margin"===n&&(u+=E.css(e,n+ne[a],!0,i)),r?("content"===n&&(u-=E.css(e,"padding"+ne[a],!0,i)),"margin"!==n&&(u-=E.css(e,"border"+ne[a]+"Width",!0,i))):(u+=E.css(e,"padding"+ne[a],!0,i),"padding"!==n?u+=E.css(e,"border"+ne[a]+"Width",!0,i):s+=E.css(e,"border"+ne[a]+"Width",!0,i));return!r&&0<=o&&(u+=Math.max(0,Math.ceil(e["offset"+t[0].toUpperCase()+t.slice(1)]-o-u-s-.5))||0),u}function et(e,t,n){var r=Re(e),i=(!m.boxSizingReliable()||n)&&"border-box"===E.css(e,"boxSizing",!1,r),o=i,a=We(e,t,r),s="offset"+t[0].toUpperCase()+t.slice(1);if(Ie.test(a)){if(!n)return a;a="auto"}return(!m.boxSizingReliable()&&i||!m.reliableTrDimensions()&&S(e,"tr")||"auto"===a||!parseFloat(a)&&"inline"===E.css(e,"display",!1,r))&&e.getClientRects().length&&(i="border-box"===E.css(e,"boxSizing",!1,r),(o=s in e)&&(a=e[s])),(a=parseFloat(a)||0)+Ze(e,t,n||(i?"border":"content"),o,r,a)+"px"}E.extend({cssHooks:{opacity:{get:function(e,t){if(t){var n=We(e,"opacity");return""===n?"1":n}}}},cssNumber:{animationIterationCount:!0,columnCount:!0,fillOpacity:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,gridArea:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnStart:!0,gridRow:!0,gridRowEnd:!0,gridRowStart:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{},style:function(e,t,n,r){if(e&&3!==e.nodeType&&8!==e.nodeType&&e.style){var i,o,a,s=V(t),u=Ye.test(t),l=e.style;if(u||(t=Ue(s)),a=E.cssHooks[t]||E.cssHooks[s],void 0===n)return a&&"get"in a&&void 0!==(i=a.get(e,!1,r))?i:l[t];"string"===(o=typeof n)&&(i=te.exec(n))&&i[1]&&(n=function(e,t,n,r){var i,o,a=20,s=r?function(){return r.cur()}:function(){return E.css(e,t,"")},u=s(),l=n&&n[3]||(E.cssNumber[t]?"":"px"),c=e.nodeType&&(E.cssNumber[t]||"px"!==l&&+u)&&te.exec(E.css(e,t));if(c&&c[3]!==l){u/=2,l=l||c[3],c=+u||1;while(a--)E.style(e,t,c+l),(1-o)*(1-(o=s()/u||.5))<=0&&(a=0),c/=o;c*=2,E.style(e,t,c+l),n=n||[]}return n&&(c=+c||+u||0,i=n[1]?c+(n[1]+1)*n[2]:+n[2],r&&(r.unit=l,r.start=c,r.end=i)),i}(e,t,i),o="number"),null!=n&&n==n&&("number"!==o||u||(n+=i&&i[3]||(E.cssNumber[s]?"":"px")),m.clearCloneStyle||""!==n||0!==t.indexOf("background")||(l[t]="inherit"),a&&"set"in a&&void 0===(n=a.set(e,n,r))||(u?l.setProperty(t,n):l[t]=n))}},css:function(e,t,n,r){var i,o,a,s=V(t);return Ye.test(t)||(t=Ue(s)),(a=E.cssHooks[t]||E.cssHooks[s])&&"get"in a&&(i=a.get(e,!0,n)),void 0===i&&(i=We(e,t,r)),"normal"===i&&t in Ke&&(i=Ke[t]),""===n||n?(o=parseFloat(i),!0===n||isFinite(o)?o||0:i):i}}),E.each(["height","width"],function(e,u){E.cssHooks[u]={get:function(e,t,n){if(t)return!Qe.test(E.css(e,"display"))||e.getClientRects().length&&e.getBoundingClientRect().width?et(e,u,n):Be(e,Ge,function(){return et(e,u,n)})},set:function(e,t,n){var r,i=Re(e),o=!m.scrollboxSize()&&"absolute"===i.position,a=(o||n)&&"border-box"===E.css(e,"boxSizing",!1,i),s=n?Ze(e,u,n,a,i):0;return a&&o&&(s-=Math.ceil(e["offset"+u[0].toUpperCase()+u.slice(1)]-parseFloat(i[u])-Ze(e,u,"border",!1,i)-.5)),s&&(r=te.exec(t))&&"px"!==(r[3]||"px")&&(e.style[u]=t,t=E.css(e,u)),Je(0,t,s)}}}),E.cssHooks.marginLeft=Fe(m.reliableMarginLeft,function(e,t){if(t)return(parseFloat(We(e,"marginLeft"))||e.getBoundingClientRect().left-Be(e,{marginLeft:0},function(){return e.getBoundingClientRect().left}))+"px"}),E.each({margin:"",padding:"",border:"Width"},function(i,o){E.cssHooks[i+o]={expand:function(e){for(var t=0,n={},r="string"==typeof e?e.split(" "):[e];t<4;t++)n[i+ne[t]+o]=r[t]||r[t-2]||r[0];return n}},"margin"!==i&&(E.cssHooks[i+o].set=Je)}),E.fn.extend({css:function(e,t){return $(this,function(e,t,n){var r,i,o={},a=0;if(Array.isArray(t)){for(r=Re(e),i=t.length;a<i;a++)o[t[a]]=E.css(e,t[a],!1,r);return o}return void 0!==n?E.style(e,t,n):E.css(e,t)},e,t,1<arguments.length)}}),E.fn.delay=function(r,e){return r=E.fx&&E.fx.speeds[r]||r,e=e||"fx",this.queue(e,function(e,t){var n=g.setTimeout(e,r);t.stop=function(){g.clearTimeout(n)}})},Ve=w.createElement("input"),Xe=w.createElement("select").appendChild(w.createElement("option")),Ve.type="checkbox",m.checkOn=""!==Ve.value,m.optSelected=Xe.selected,(Ve=w.createElement("input")).value="t",Ve.type="radio",m.radioValue="t"===Ve.value;var tt,nt=E.expr.attrHandle;E.fn.extend({attr:function(e,t){return $(this,E.attr,e,t,1<arguments.length)},removeAttr:function(e){return this.each(function(){E.removeAttr(this,e)})}}),E.extend({attr:function(e,t,n){var r,i,o=e.nodeType;if(3!==o&&8!==o&&2!==o)return"undefined"==typeof e.getAttribute?E.prop(e,t,n):(1===o&&E.isXMLDoc(e)||(i=E.attrHooks[t.toLowerCase()]||(E.expr.match.bool.test(t)?tt:void 0)),void 0!==n?null===n?void E.removeAttr(e,t):i&&"set"in i&&void 0!==(r=i.set(e,n,t))?r:(e.setAttribute(t,n+""),n):i&&"get"in i&&null!==(r=i.get(e,t))?r:null==(r=E.find.attr(e,t))?void 0:r)},attrHooks:{type:{set:function(e,t){if(!m.radioValue&&"radio"===t&&S(e,"input")){var n=e.value;return e.setAttribute("type",t),n&&(e.value=n),t}}}},removeAttr:function(e,t){var n,r=0,i=t&&t.match(H);if(i&&1===e.nodeType)while(n=i[r++])e.removeAttribute(n)}}),tt={set:function(e,t,n){return!1===t?E.removeAttr(e,n):e.setAttribute(n,n),n}},E.each(E.expr.match.bool.source.match(/\w+/g),function(e,t){var a=nt[t]||E.find.attr;nt[t]=function(e,t,n){var r,i,o=t.toLowerCase();return n||(i=nt[o],nt[o]=r,r=null!=a(e,t,n)?o:null,nt[o]=i),r}});var rt=/^(?:input|select|textarea|button)$/i,it=/^(?:a|area)$/i;function ot(e){return(e.match(H)||[]).join(" ")}function at(e){return e.getAttribute&&e.getAttribute("class")||""}function st(e){return Array.isArray(e)?e:"string"==typeof e&&e.match(H)||[]}E.fn.extend({prop:function(e,t){return $(this,E.prop,e,t,1<arguments.length)},removeProp:function(e){return this.each(function(){delete this[E.propFix[e]||e]})}}),E.extend({prop:function(e,t,n){var r,i,o=e.nodeType;if(3!==o&&8!==o&&2!==o)return 1===o&&E.isXMLDoc(e)||(t=E.propFix[t]||t,i=E.propHooks[t]),void 0!==n?i&&"set"in i&&void 0!==(r=i.set(e,n,t))?r:e[t]=n:i&&"get"in i&&null!==(r=i.get(e,t))?r:e[t]},propHooks:{tabIndex:{get:function(e){var t=E.find.attr(e,"tabindex");return t?parseInt(t,10):rt.test(e.nodeName)||it.test(e.nodeName)&&e.href?0:-1}}},propFix:{"for":"htmlFor","class":"className"}}),m.optSelected||(E.propHooks.selected={get:function(e){var t=e.parentNode;return t&&t.parentNode&&t.parentNode.selectedIndex,null},set:function(e){var t=e.parentNode;t&&(t.selectedIndex,t.parentNode&&t.parentNode.selectedIndex)}}),E.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){E.propFix[this.toLowerCase()]=this}),E.fn.extend({addClass:function(t){var e,n,r,i,o,a,s,u=0;if(b(t))return this.each(function(e){E(this).addClass(t.call(this,e,at(this)))});if((e=st(t)).length)while(n=this[u++])if(i=at(n),r=1===n.nodeType&&" "+ot(i)+" "){a=0;while(o=e[a++])r.indexOf(" "+o+" ")<0&&(r+=o+" ");i!==(s=ot(r))&&n.setAttribute("class",s)}return this},removeClass:function(t){var e,n,r,i,o,a,s,u=0;if(b(t))return this.each(function(e){E(this).removeClass(t.call(this,e,at(this)))});if(!arguments.length)return this.attr("class","");if((e=st(t)).length)while(n=this[u++])if(i=at(n),r=1===n.nodeType&&" "+ot(i)+" "){a=0;while(o=e[a++])while(-1<r.indexOf(" "+o+" "))r=r.replace(" "+o+" "," ");i!==(s=ot(r))&&n.setAttribute("class",s)}return this},toggleClass:function(i,t){var o=typeof i,a="string"===o||Array.isArray(i);return"boolean"==typeof t&&a?t?this.addClass(i):this.removeClass(i):b(i)?this.each(function(e){E(this).toggleClass(i.call(this,e,at(this),t),t)}):this.each(function(){var e,t,n,r;if(a){t=0,n=E(this),r=st(i);while(e=r[t++])n.hasClass(e)?n.removeClass(e):n.addClass(e)}else void 0!==i&&"boolean"!==o||((e=at(this))&&Y.set(this,"__className__",e),this.setAttribute&&this.setAttribute("class",e||!1===i?"":Y.get(this,"__className__")||""))})},hasClass:function(e){var t,n,r=0;t=" "+e+" ";while(n=this[r++])if(1===n.nodeType&&-1<(" "+ot(at(n))+" ").indexOf(t))return!0;return!1}});var ut=/\r/g;E.fn.extend({val:function(n){var r,e,i,t=this[0];return arguments.length?(i=b(n),this.each(function(e){var t;1===this.nodeType&&(null==(t=i?n.call(this,e,E(this).val()):n)?t="":"number"==typeof t?t+="":Array.isArray(t)&&(t=E.map(t,function(e){return null==e?"":e+""})),(r=E.valHooks[this.type]||E.valHooks[this.nodeName.toLowerCase()])&&"set"in r&&void 0!==r.set(this,t,"value")||(this.value=t))})):t?(r=E.valHooks[t.type]||E.valHooks[t.nodeName.toLowerCase()])&&"get"in r&&void 0!==(e=r.get(t,"value"))?e:"string"==typeof(e=t.value)?e.replace(ut,""):null==e?"":e:void 0}}),E.extend({valHooks:{option:{get:function(e){var t=E.find.attr(e,"value");return null!=t?t:ot(E.text(e))}},select:{get:function(e){var t,n,r,i=e.options,o=e.selectedIndex,a="select-one"===e.type,s=a?null:[],u=a?o+1:i.length;for(r=o<0?u:a?o:0;r<u;r++)if(((n=i[r]).selected||r===o)&&!n.disabled&&(!n.parentNode.disabled||!S(n.parentNode,"optgroup"))){if(t=E(n).val(),a)return t;s.push(t)}return s},set:function(e,t){var n,r,i=e.options,o=E.makeArray(t),a=i.length;while(a--)((r=i[a]).selected=-1<E.inArray(E.valHooks.option.get(r),o))&&(n=!0);return n||(e.selectedIndex=-1),o}}}}),E.each(["radio","checkbox"],function(){E.valHooks[this]={set:function(e,t){if(Array.isArray(t))return e.checked=-1<E.inArray(E(e).val(),t)}},m.checkOn||(E.valHooks[this].get=function(e){return null===e.getAttribute("value")?"on":e.value})}),m.focusin="onfocusin"in g;var lt=/^(?:focusinfocus|focusoutblur)$/,ct=function(e){e.stopPropagation()};E.extend(E.event,{trigger:function(e,t,n,r){var i,o,a,s,u,l,c,f,d=[n||w],p=y.call(e,"type")?e.type:e,h=y.call(e,"namespace")?e.namespace.split("."):[];if(o=f=a=n=n||w,3!==n.nodeType&&8!==n.nodeType&&!lt.test(p+E.event.triggered)&&(-1<p.indexOf(".")&&(p=(h=p.split(".")).shift(),h.sort()),u=p.indexOf(":")<0&&"on"+p,(e=e[E.expando]?e:new E.Event(p,"object"==typeof e&&e)).isTrigger=r?2:3,e.namespace=h.join("."),e.rnamespace=e.namespace?new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,e.result=void 0,e.target||(e.target=n),t=null==t?[e]:E.makeArray(t,[e]),c=E.event.special[p]||{},r||!c.trigger||!1!==c.trigger.apply(n,t))){if(!r&&!c.noBubble&&!x(n)){for(s=c.delegateType||p,lt.test(s+p)||(o=o.parentNode);o;o=o.parentNode)d.push(o),a=o;a===(n.ownerDocument||w)&&d.push(a.defaultView||a.parentWindow||g)}i=0;while((o=d[i++])&&!e.isPropagationStopped())f=o,e.type=1<i?s:c.bindType||p,(l=(Y.get(o,"events")||Object.create(null))[e.type]&&Y.get(o,"handle"))&&l.apply(o,t),(l=u&&o[u])&&l.apply&&X(o)&&(e.result=l.apply(o,t),!1===e.result&&e.preventDefault());return e.type=p,r||e.isDefaultPrevented()||c._default&&!1!==c._default.apply(d.pop(),t)||!X(n)||u&&b(n[p])&&!x(n)&&((a=n[u])&&(n[u]=null),E.event.triggered=p,e.isPropagationStopped()&&f.addEventListener(p,ct),n[p](),e.isPropagationStopped()&&f.removeEventListener(p,ct),E.event.triggered=void 0,a&&(n[u]=a)),e.result}},simulate:function(e,t,n){var r=E.extend(new E.Event,n,{type:e,isSimulated:!0});E.event.trigger(r,null,t)}}),E.fn.extend({trigger:function(e,t){return this.each(function(){E.event.trigger(e,t,this)})},triggerHandler:function(e,t){var n=this[0];if(n)return E.event.trigger(e,t,n,!0)}}),m.focusin||E.each({focus:"focusin",blur:"focusout"},function(n,r){var i=function(e){E.event.simulate(r,e.target,E.event.fix(e))};E.event.special[r]={setup:function(){var e=this.ownerDocument||this.document||this,t=Y.access(e,r);t||e.addEventListener(n,i,!0),Y.access(e,r,(t||0)+1)},teardown:function(){var e=this.ownerDocument||this.document||this,t=Y.access(e,r)-1;t?Y.access(e,r,t):(e.removeEventListener(n,i,!0),Y.remove(e,r))}}}),E.parseXML=function(e){var t;if(!e||"string"!=typeof e)return null;try{t=(new g.DOMParser).parseFromString(e,"text/xml")}catch(e){t=void 0}return t&&!t.getElementsByTagName("parsererror").length||E.error("Invalid XML: "+e),t};var ft,dt=/\[\]$/,pt=/\r?\n/g,ht=/^(?:submit|button|image|reset|file)$/i,gt=/^(?:input|select|textarea|keygen)/i;function vt(n,e,r,i){var t;if(Array.isArray(e))E.each(e,function(e,t){r||dt.test(n)?i(n,t):vt(n+"["+("object"==typeof t&&null!=t?e:"")+"]",t,r,i)});else if(r||"object"!==T(e))i(n,e);else for(t in e)vt(n+"["+t+"]",e[t],r,i)}E.param=function(e,t){var n,r=[],i=function(e,t){var n=b(t)?t():t;r[r.length]=encodeURIComponent(e)+"="+encodeURIComponent(null==n?"":n)};if(null==e)return"";if(Array.isArray(e)||e.jquery&&!E.isPlainObject(e))E.each(e,function(){i(this.name,this.value)});else for(n in e)vt(n,e[n],t,i);return r.join("&")},E.fn.extend({serialize:function(){return E.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var e=E.prop(this,"elements");return e?E.makeArray(e):this}).filter(function(){var e=this.type;return this.name&&!E(this).is(":disabled")&&gt.test(this.nodeName)&&!ht.test(e)&&(this.checked||!fe.test(e))}).map(function(e,t){var n=E(this).val();return null==n?null:Array.isArray(n)?E.map(n,function(e){return{name:t.name,value:e.replace(pt,"\r\n")}}):{name:t.name,value:n.replace(pt,"\r\n")}}).get()}}),E.fn.extend({wrapAll:function(e){var t;return this[0]&&(b(e)&&(e=e.call(this[0])),t=E(e,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&t.insertBefore(this[0]),t.map(function(){var e=this;while(e.firstElementChild)e=e.firstElementChild;return e}).append(this)),this},wrapInner:function(n){return b(n)?this.each(function(e){E(this).wrapInner(n.call(this,e))}):this.each(function(){var e=E(this),t=e.contents();t.length?t.wrapAll(n):e.append(n)})},wrap:function(t){var n=b(t);return this.each(function(e){E(this).wrapAll(n?t.call(this,e):t)})},unwrap:function(e){return this.parent(e).not("body").each(function(){E(this).replaceWith(this.childNodes)}),this}}),E.expr.pseudos.hidden=function(e){return!E.expr.pseudos.visible(e)},E.expr.pseudos.visible=function(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)},m.createHTMLDocument=((ft=w.implementation.createHTMLDocument("").body).innerHTML="<form></form><form></form>",2===ft.childNodes.length),E.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(m.createHTMLDocument?((r=(t=w.implementation.createHTMLDocument("")).createElement("base")).href=w.location.href,t.head.appendChild(r)):t=w),o=!n&&[],(i=k.exec(e))?[t.createElement(i[1])]:(i=me([e],t,o),o&&o.length&&E(o).remove(),E.merge([],i.childNodes)));var r,i,o},E.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=E.css(e,"position"),c=E(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=E.css(e,"top"),u=E.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),b(t)&&(t=t.call(e,n,E.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):("number"==typeof f.top&&(f.top+="px"),"number"==typeof f.left&&(f.left+="px"),c.css(f))}},E.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){E.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===E.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===E.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=E(e).offset()).top+=E.css(e,"borderTopWidth",!0),i.left+=E.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-E.css(r,"marginTop",!0),left:t.left-i.left-E.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===E.css(e,"position"))e=e.offsetParent;return e||re})}}),E.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;E.fn[t]=function(e){return $(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),E.each(["top","left"],function(e,n){E.cssHooks[n]=Fe(m.pixelPosition,function(e,t){if(t)return t=We(e,n),Ie.test(t)?E(e).position()[n]+"px":t})}),E.each({Height:"height",Width:"width"},function(a,s){E.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){E.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return $(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?E.css(e,t,i):E.style(e,t,n,i)},s,n?e:void 0,n)}})}),E.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),E.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){E.fn[n]=function(e,t){return 0<arguments.length?this.on(n,null,e,t):this.trigger(n)}});var yt=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;E.proxy=function(e,t){var n,r,i;if("string"==typeof t&&(n=e[t],t=e,e=n),b(e))return r=s.call(arguments,2),(i=function(){return e.apply(t||this,r.concat(s.call(arguments)))}).guid=e.guid=e.guid||E.guid++,i},E.holdReady=function(e){e?E.readyWait++:E.ready(!0)},E.isArray=Array.isArray,E.parseJSON=JSON.parse,E.nodeName=S,E.isFunction=b,E.isWindow=x,E.camelCase=V,E.type=T,E.now=Date.now,E.isNumeric=function(e){var t=E.type(e);return("number"===t||"string"===t)&&!isNaN(e-parseFloat(e))},E.trim=function(e){return null==e?"":(e+"").replace(yt,"")},"function"==typeof define&&define.amd&&define("jquery",[],function(){return E});var mt=g.jQuery,bt=g.$;return E.noConflict=function(e){return g.$===E&&(g.$=bt),e&&g.jQuery===E&&(g.jQuery=mt),E},"undefined"==typeof e&&(g.jQuery=g.$=E),E});
diff --git a/demo/docs/alerts.html b/demo/docs/alerts.html
index 098a761a7..e8cf973c6 100644
--- a/demo/docs/alerts.html
+++ b/demo/docs/alerts.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -50,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -121,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -174,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -228,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -403,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -560,7 +625,12 @@
                       <h2 class="h1 mt-0 mb-3">Alerts</h2>
                       <p class="ml-auto">
                         <a href="https://getbootstrap.com/docs/4.4/components/alerts/" target="_blank">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+                            <line x1="10" y1="14" x2="20" y2="4" />
+                            <polyline points="15 4 20 4 20 9" />
+                          </svg>
                           Bootstrap documentation
                         </a>
                       </p>
@@ -681,19 +751,36 @@
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="alert alert-success" role="alert">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                          <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" />
+                            <polyline points="20 7 10 17 5 12" />
+                          </svg>
                           This is a success alert — check it out!
                         </div>
                         <div class="alert alert-info" role="alert">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
+                          <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" />
+                            <circle cx="12" cy="12" r="9" />
+                            <line x1="12" y1="8" x2="12.01" y2="8" />
+                            <polyline points="11 12 12 12 12 16 13 16" />
+                          </svg>
                           This is a info alert — check it out!
                         </div>
                         <div class="alert alert-warning" role="alert">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
+                          <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" />
+                            <path d="M12 9v2m0 4v.01" />
+                            <path d="M5.07 19H19a2 2 0 0 0 1.75 -2.75L13.75 4a2 2 0 0 0 -3.5 0L3.25 16.25a2 2 0 0 0 1.75 2.75" />
+                          </svg>
                           This is a warning alert — check it out!
                         </div>
                         <div class="alert alert-danger" role="alert">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
+                          <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" />
+                            <circle cx="12" cy="12" r="9" />
+                            <line x1="12" y1="8" x2="12" y2="12" />
+                            <line x1="12" y1="16" x2="12.01" y2="16" />
+                          </svg>
                           This is a danger alert — check it out!
                         </div>
                       </div>
@@ -719,7 +806,7 @@
                       </figure>
                     </div>
                     <h2 id="alert-with-avatar">Alert with avatar</h2>
-                    <p>Add an avatar to your alert modal to make it more personalised.</p>
+                    <p>Add an avatar to your alert modal to make it more personalized.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="alert alert-success" role="alert">
@@ -814,185 +901,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/autosize.html b/demo/docs/autosize.html
index 4819b16f4..b36a3c09b 100644
--- a/demo/docs/autosize.html
+++ b/demo/docs/autosize.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -50,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -121,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -174,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -228,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -403,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -595,186 +660,12 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <script src="../dist/libs/autosize/dist/autosize.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       (function () {
       	const elements = document.querySelectorAll('[data-toggle="autosize"]');
diff --git a/demo/docs/avatars.html b/demo/docs/avatars.html
index 3473077ab..007f95770 100644
--- a/demo/docs/avatars.html
+++ b/demo/docs/avatars.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -24,7 +24,7 @@
     <meta name="robots" content="noindex,nofollow,noarchive"/>
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <meta name="description" content="Create and group avatars of various shapes and sizes with one component."/>
+    <meta name="description" content="Avatars help customise various elements of a user interface and make the product experience more personalised. They are often used in communication apps, collaboration tools and social media."/>
     <!-- Libs CSS -->
     <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
     <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
@@ -50,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -121,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -174,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -228,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -403,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -563,8 +628,9 @@
                     <div class="d-flex">
                       <h2 class="h1 mt-0 mb-3">Avatars</h2>
                     </div>
-                    <p>Create and group avatars of various shapes and sizes with one component.</p>
+                    <p>Avatars help customise various elements of a user interface and make the product experience more personalised. They are often used in communication apps, collaboration tools and social media.</p>
                     <h2 id="default-markup">Default markup</h2>
+                    <p>Use the <code class="highlighter-rouge">avatar</code> class to add an avatar to your interface design for greater customisation.</p>
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
@@ -580,7 +646,7 @@
                       </figure>
                     </div>
                     <h2 id="avatar-image">Avatar image</h2>
-                    <p>Set an image as the background.</p>
+                    <p>Set an image as the background to make users easy to indentify and create a personalised experience.</p>
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
@@ -596,7 +662,7 @@
                       </figure>
                     </div>
                     <h2 id="initials">Initials</h2>
-                    <p>You can easily use initials instead of images.</p>
+                    <p>You can also use initials instead of pictures.</p>
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <span class="avatar">AB</span>
@@ -616,14 +682,28 @@
                       </figure>
                     </div>
                     <h2 id="avatar-icons">Avatar icons</h2>
-                    <p>You can also use icons in avatars.</p>
+                    <p>Apart from pictures and initials, you can also use icons to make the avatars more universal.</p>
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
-                        <span class="avatar"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon avatar-icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                        <span class="avatar"><svg xmlns="http://www.w3.org/2000/svg" class="icon avatar-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" />
+                            <circle cx="12" cy="7" r="4" />
+                            <path d="M5.5 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2" />
+                          </svg>
                         </span>
-                        <span class="avatar"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon avatar-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                        <span class="avatar"><svg xmlns="http://www.w3.org/2000/svg" class="icon avatar-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" />
+                            <line x1="12" y1="5" x2="12" y2="19" />
+                            <line x1="5" y1="12" x2="19" y2="12" />
+                          </svg>
                         </span>
-                        <span class="avatar"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon avatar-icon"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="23" y1="11" x2="17" y2="11"></line></svg>
+                        <span class="avatar"><svg xmlns="http://www.w3.org/2000/svg" class="icon avatar-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" />
+                            <circle cx="8.5" cy="7" r="4" />
+                            <path d="M2 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2" />
+                            <line x1="16" y1="11" x2="22" y2="11" />
+                            <line x1="19" y1="8" x2="19" y2="14" />
+                          </svg>
                         </span>
                       </div>
                     </div>
@@ -658,7 +738,7 @@
                       </figure>
                     </div>
                     <h2 id="avatar-size">Avatar size</h2>
-                    <p>Using Bootstrap’s typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what’s needed.</p>
+                    <p>Using Bootstrap’s typical naming structure, you can create a standard avatar or scale it up or down to different sizes based on what you need.</p>
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <span class="avatar avatar-xl">HS</span>
@@ -678,7 +758,7 @@
                       </figure>
                     </div>
                     <h2 id="avatar-status">Avatar status</h2>
-                    <p>Add an online or offline status indicator to show user’s availability.</p>
+                    <p>Add a status indicator to your avatar to show, for instance, if a users is online or offline or indicate the number of messages they have received.</p>
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <span class="avatar" style="background-image: url(../static/avatars/006m.jpg)"></span>
@@ -710,7 +790,7 @@
                       </figure>
                     </div>
                     <h2 id="avatar-shape">Avatar shape</h2>
-                    <p>Change the shape of an avatar with the default Bootstrap image classes.</p>
+                    <p>Change the shape of an avatar with the default Bootstrap image classes. You can make them round or square and change their border radius.</p>
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <span class="avatar" style="background-image: url(../static/avatars/005f.jpg)"></span>
@@ -730,7 +810,7 @@
                       </figure>
                     </div>
                     <h2 id="avatars-list">Avatars list</h2>
-                    <p>You can easily create a list of avatars.</p>
+                    <p>Create a list of avatars within one parent container.</p>
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <div class="avatar-list">
@@ -754,7 +834,7 @@
                       </figure>
                     </div>
                     <h2 id="stacked-list">Stacked list</h2>
-                    <p>Make the list stack when it reaches a certain length.</p>
+                    <p>Make the list stack once a certain number of avatars is reached to make it look clear and display well regardless of the screen size.</p>
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <div class="avatar-list avatar-list-stacked">
@@ -805,185 +885,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/badges.html b/demo/docs/badges.html
index 55f6d19fd..c9d4059cd 100644
--- a/demo/docs/badges.html
+++ b/demo/docs/badges.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -50,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -121,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -174,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -228,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -403,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -545,7 +610,7 @@
                 <ul class="list-unstyled">
                   <li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
                   <li class="toc-entry toc-h2"><a href="#pill-badges">Pill badges</a></li>
-                  <li class="toc-entry toc-h2"><a href="#soft-colour-badges">Soft colour badges</a></li>
+                  <li class="toc-entry toc-h2"><a href="#soft-color-badges">Soft color badges</a></li>
                   <li class="toc-entry toc-h2"><a href="#links">Links</a></li>
                   <li class="toc-entry toc-h2"><a href="#empty-badges">Empty badges</a>
                     <ul>
@@ -564,14 +629,19 @@
                       <h2 class="h1 mt-0 mb-3">Badges</h2>
                       <p class="ml-auto">
                         <a href="https://getbootstrap.com/docs/4.4/components/badge/" target="_blank">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+                            <line x1="10" y1="14" x2="20" y2="4" />
+                            <polyline points="15 4 20 4 20 9" />
+                          </svg>
                           Bootstrap documentation
                         </a>
                       </p>
                     </div>
                     <p>Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users' attention to a new element, notify about unread messages or provide any kind of additional info.</p>
                     <h2 id="default-markup">Default markup</h2>
-                    <p>The default badges are square and come in the basic set of colours.</p>
+                    <p>The default badges are square and come in the basic set of colors.</p>
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <span class="badge bg-blue">blue</span>
@@ -642,8 +712,8 @@
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill bg-gray"</span><span class="nt">&gt;</span>13<span class="nt">&lt;/span&gt;</span></code></pre>
                       </figure>
                     </div>
-                    <h2 id="soft-colour-badges">Soft colour badges</h2>
-                    <p>You can create a soft colour variant of a corresponding contextual badge variation, to make it look more subtle. Click <a href="./colors.html">here</a> to see the list of available colours and choose ones that best suit your design.</p>
+                    <h2 id="soft-color-badges">Soft color badges</h2>
+                    <p>You can create a soft colour variant of a corresponding contextual badge variation, to make it look more subtle. Click <a href="./colors.html">here</a> to see the list of available colors and choose ones that best suit your design.</p>
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <span class="badge bg-blue-lt">blue</span>
@@ -751,7 +821,7 @@
                       </figure>
                     </div>
                     <h3 id="badge-add-ons">Badge add-ons</h3>
-                    <p>Add the <code class="highlighter-rouge">.badge-addon</code> class to create an add-on that will customise your badge and make it more noticeable. You can use any colour variants and combine them as you see fit.</p>
+                    <p>Add the <code class="highlighter-rouge">.badge-addon</code> class to create an add-on that will customize your badge and make it more noticeable. You can use any color variants and combine them as you see fit.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <span class="badge bg-green">
@@ -785,7 +855,7 @@
                       </figure>
                     </div>
                     <h3 id="badge-avatars">Badge avatars</h3>
-                    <p>Create the <code class="highlighter-rouge">.badge-avatar</code> class to add an avatar that will make a badge more personalised.</p>
+                    <p>Create the <code class="highlighter-rouge">.badge-avatar</code> class to add an avatar that will make a badge more personalized.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <span class="badge bg-blue">
@@ -860,185 +930,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/breadcrumb.html b/demo/docs/breadcrumb.html
index 6c617f049..8d7d5c691 100644
--- a/demo/docs/breadcrumb.html
+++ b/demo/docs/breadcrumb.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -50,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -121,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -174,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -228,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -403,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -557,7 +622,12 @@
                       <h2 class="h1 mt-0 mb-3">Breadcrumb</h2>
                       <p class="ml-auto">
                         <a href="https://getbootstrap.com/docs/4.4/components/breadcrumb/" target="_blank">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+                            <line x1="10" y1="14" x2="20" y2="4" />
+                            <polyline points="15 4 20 4 20 9" />
+                          </svg>
                           Bootstrap documentation
                         </a>
                       </p>
@@ -640,7 +710,7 @@
                       </figure>
                     </div>
                     <h2 id="alternate-version">Alternate version</h2>
-                    <p>Use the <code class="highlighter-rouge">breadcrumb-alternate</code> class to make the breadcrumb colours more neutral, retaining its function of showing the current location within an interface.</p>
+                    <p>Use the <code class="highlighter-rouge">breadcrumb-alternate</code> class to make the breadcrumb colors more neutral, retaining its function of showing the current location within an interface.</p>
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <ol class="breadcrumb breadcrumb-alternate" aria-label="breadcrumbs">
@@ -685,185 +755,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/buttons.html b/demo/docs/buttons.html
index 9d6bfbd97..f19e4bd82 100644
--- a/demo/docs/buttons.html
+++ b/demo/docs/buttons.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -24,7 +24,7 @@
     <meta name="robots" content="noindex,nofollow,noarchive"/>
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <meta name="description" content="Use button styles that best suit your designs and encourage users to take the desired actions. You can customise the button&#39;s properties to improve the user experience of your website or system, changing the size, shape, colour and many more."/>
+    <meta name="description" content="Use button styles that best suit your designs and encourage users to take the desired actions. You can customize the button&#39;s properties to improve the user experience of your website or system, changing the size, shape, color and many more."/>
     <!-- Libs CSS -->
     <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
     <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
@@ -50,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -121,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -174,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -228,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -403,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -546,7 +611,7 @@
                   <li class="toc-entry toc-h2"><a href="#button-tag">Button tag</a></li>
                   <li class="toc-entry toc-h2"><a href="#button-variations">Button variations</a></li>
                   <li class="toc-entry toc-h2"><a href="#disabled-buttons">Disabled buttons</a></li>
-                  <li class="toc-entry toc-h2"><a href="#colour-variations">Colour variations</a></li>
+                  <li class="toc-entry toc-h2"><a href="#color-variations">Color variations</a></li>
                   <li class="toc-entry toc-h2"><a href="#ghost-buttons">Ghost buttons</a></li>
                   <li class="toc-entry toc-h2"><a href="#square-buttons">Square buttons</a></li>
                   <li class="toc-entry toc-h2"><a href="#pill-buttons">Pill buttons</a></li>
@@ -570,14 +635,19 @@
                       <h2 class="h1 mt-0 mb-3">Buttons</h2>
                       <p class="ml-auto">
                         <a href="https://getbootstrap.com/docs/4.4/components/buttons/" target="_blank">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+                            <line x1="10" y1="14" x2="20" y2="4" />
+                            <polyline points="15 4 20 4 20 9" />
+                          </svg>
                           Bootstrap documentation
                         </a>
                       </p>
                     </div>
-                    <p>Use button styles that best suit your designs and encourage users to take the desired actions. You can customise the button's properties to improve the user experience of your website or system, changing the size, shape, colour and many more.</p>
+                    <p>Use button styles that best suit your designs and encourage users to take the desired actions. You can customize the button's properties to improve the user experience of your website or system, changing the size, shape, color and many more.</p>
                     <h2 id="button-tag">Button tag</h2>
-                    <p>As one of the most common elements of UI design, buttons have a very important function of engaging users with your website or system and guiding them in their actions. Use the <code class="highlighter-rouge">.btn</code> classes with the <code class="highlighter-rouge">&lt;button&gt;</code> element and add additional styling that will make your buttons serve their purpose and draw users’ attention.</p>
+                    <p>As one of the most common elements of UI design, buttons have a very important function of engaging users with your website or app and guiding them in their actions. Use the <code class="highlighter-rouge">.btn</code> classes with the <code class="highlighter-rouge">&lt;button&gt;</code> element and add additional styling that will make your buttons serve their purpose and draw users’ attention.</p>
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <div class="btn-list">
@@ -599,7 +669,7 @@
                       </figure>
                     </div>
                     <h2 id="button-variations">Button variations</h2>
-                    <p>Use the button classes that correspond to the function of your button. The big range of available colours will help you show your buttons’ purpose and make them easy to spot.</p>
+                    <p>Use the button classes that correspond to the function of your button. The big range of available colors will help you show your buttons’ purpose and make them easy to spot.</p>
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <div class="btn-list">
@@ -730,8 +800,8 @@
 <span class="nt">&lt;/a&gt;</span></code></pre>
                       </figure>
                     </div>
-                    <h2 id="colour-variations">Colour variations</h2>
-                    <p>Choose the right colour for your button to make it go well with your design and draw users’ attention. Button colours can have a big influence on users’ decisions, which is why it’s important to choose them based on the intended purpose.</p>
+                    <h2 id="color-variations">Color variations</h2>
+                    <p>Choose the right color for your button to make it go well with your design and draw users’ attention. Button colors can have a big influence on users’ decisions, which is why it’s important to choose them based on the intended purpose.</p>
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <div class="btn-list">
@@ -799,7 +869,7 @@
                       </figure>
                     </div>
                     <h2 id="square-buttons">Square buttons</h2>
-                    <p>Use the <code class="highlighter-rouge">.btn-square</code> class to remove border-radius, if you want the corners of your button to be square, not rounded.</p>
+                    <p>Use the <code class="highlighter-rouge">.btn-square</code> class to remove the border radius, if you want the corners of your button to be square rather than rounded.</p>
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <div class="btn-list">
@@ -931,7 +1001,7 @@
                       </figure>
                     </div>
                     <h2 id="outline-buttons">Outline buttons</h2>
-                    <p>Replace the default modifier class with the <code class="highlighter-rouge">.btn-outline-*</code> class, if you want to remove the colour and background of your button and give it a more subtle look. Outline buttons are perfect to use as secondary buttons, as they don’t distract users from the main action.</p>
+                    <p>Replace the default modifier class with the <code class="highlighter-rouge">.btn-outline-*</code> class, if you want to remove the color and the background of your button and give it a more subtle look. Outline buttons are perfect to use as secondary buttons, as they don’t distract users from the main action.</p>
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <div class="btn-list">
@@ -1042,33 +1112,58 @@
                       </figure>
                     </div>
                     <h2 id="buttons-with-icons">Buttons with icons</h2>
-                    <p>Label your button with text and add an icon to communiacate the action and make it easy to identify for users. Icons are easily recognised and improve the aesthetics of your button design, giving it a modern and atractive look.</p>
+                    <p>Label your button with text and add an icon to communiacate the action and make it easy to identify for users. Icons are easily recognized and improve the aesthetics of your button design, giving it a modern and atractive look.</p>
                     <p>Icons can be found <a href="/docs/icons.html#icons"><strong>here</strong></a></p>
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <div class="btn-list">
                           <button type="button" class="btn btn-dark">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z" />
+                              <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
+                              <polyline points="7 9 12 4 17 9" />
+                              <line x1="12" y1="4" x2="12" y2="16" />
+                            </svg>
                             Upload
                           </button>
                           <button type="button" class="btn btn-warning">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z" />
+                              <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                            </svg>
                             I like
                           </button>
                           <button type="button" class="btn btn-success">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z" />
+                              <polyline points="20 7 10 17 5 12" />
+                            </svg>
                             I agree
                           </button>
                           <button type="button" class="btn btn-outline-primary">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z" />
+                              <line x1="12" y1="5" x2="12" y2="19" />
+                              <line x1="5" y1="12" x2="19" y2="12" />
+                            </svg>
                             More
                           </button>
                           <button type="button" class="btn btn-danger">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z" />
+                              <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />
+                              <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" />
+                            </svg>
                             Link
                           </button>
                           <button type="button" class="btn btn-info">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z" />
+                              <path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1" />
+                              <line x1="12" y1="12" x2="12" y2="12.01" />
+                              <line x1="8" y1="12" x2="8" y2="12.01" />
+                              <line x1="16" y1="12" x2="16" y2="12.01" />
+                            </svg>
                             Comment
                           </button>
                         </div>
@@ -1378,30 +1473,62 @@
                       </figure>
                     </div>
                     <h2 id="icon-buttons">Icon buttons</h2>
-                    <p>Add the <code class="highlighter-rouge">.btn-icon</code> class to remove unnecessary padding from your button and use an icon without any additional label. Thanks to that, you can save space and make the action easy to recognise for international users.</p>
+                    <p>Add the <code class="highlighter-rouge">.btn-icon</code> class to remove unnecessary padding from your button and use an icon without any additional label. Thanks to that, you can save space and make the action easy to recognize for international users.</p>
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <div class="btn-list">
                           <a href="#" class="btn btn-primary btn-icon" aria-label="Button">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z" />
+                              <polyline points="21 12 17 12 14 20 10 4 7 12 3 12" />
+                            </svg>
                           </a>
                           <a href="#" class="btn btn-github btn-icon" aria-label="Button">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
+                            <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>
                           <a href="#" class="btn btn-success btn-icon" aria-label="Button">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z" />
+                              <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>
                           </a>
                           <a href="#" class="btn btn-warning btn-icon" aria-label="Button">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z" />
+                              <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                            </svg>
                           </a>
                           <a href="#" class="btn btn-danger btn-icon" aria-label="Button">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z" />
+                              <line x1="4" y1="7" x2="20" y2="7" />
+                              <line x1="10" y1="11" x2="10" y2="17" />
+                              <line x1="14" y1="11" x2="14" y2="17" />
+                              <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
+                              <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
+                            </svg>
                           </a>
                           <a href="#" class="btn btn-purple btn-icon" aria-label="Button">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="20" x2="12" y2="10"></line><line x1="18" y1="20" x2="18" y2="4"></line><line x1="6" y1="20" x2="6" y2="16"></line></svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z" />
+                              <rect x="3" y="12" width="6" height="8" rx="1" />
+                              <rect x="9" y="8" width="6" height="12" rx="1" />
+                              <rect x="15" y="4" width="6" height="16" rx="1" />
+                              <line x1="4" y1="20" x2="18" y2="20" />
+                            </svg>
                           </a>
                           <a href="#" class="btn btn-secondary btn-icon" aria-label="Button">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="18" cy="18" r="3"></circle><circle cx="6" cy="6" r="3"></circle><path d="M6 21V9a9 9 0 0 0 9 9"></path></svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z" />
+                              <circle cx="7" cy="18" r="2" />
+                              <circle cx="7" cy="6" r="2" />
+                              <circle cx="17" cy="12" r="2" />
+                              <line x1="7" y1="8" x2="7" y2="16" />
+                              <path d="M7 8a4 4 0 0 0 4 4h4" />
+                            </svg>
                           </a>
                         </div>
                       </div>
@@ -1438,7 +1565,15 @@
                         <div class="btn-list">
                           <div class="dropdown">
                             <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
-                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" />
+                                <rect x="4" y="5" width="16" height="16" rx="2" />
+                                <line x1="16" y1="3" x2="16" y2="7" />
+                                <line x1="8" y1="3" x2="8" y2="7" />
+                                <line x1="4" y1="11" x2="20" y2="11" />
+                                <line x1="11" y1="15" x2="12" y2="15" />
+                                <line x1="12" y1="15" x2="12" y2="18" />
+                              </svg>
                             </button>
                             <div class="dropdown-menu">
                               <a class="dropdown-item" href="#">
@@ -1451,7 +1586,15 @@
                           </div>
                           <div class="dropdown">
                             <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
-                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" />
+                                <rect x="4" y="5" width="16" height="16" rx="2" />
+                                <line x1="16" y1="3" x2="16" y2="7" />
+                                <line x1="8" y1="3" x2="8" y2="7" />
+                                <line x1="4" y1="11" x2="20" y2="11" />
+                                <line x1="11" y1="15" x2="12" y2="15" />
+                                <line x1="12" y1="15" x2="12" y2="18" />
+                              </svg>
                               Show calendar
                             </button>
                             <div class="dropdown-menu">
@@ -1686,7 +1829,7 @@
                       </figure>
                     </div>
                     <h2 id="buttons-with-avatars">Buttons with avatars</h2>
-                    <p>Use buttons with avatars to simplify the process of interaction and make your design more personalised. Buttons can contain avatars and labels or only avatars, if displayed on a smaller space.</p>
+                    <p>Use buttons with avatars to simplify the process of interaction and make your design more personalized. Buttons can contain avatars and labels or only avatars, if displayed on a smaller space.</p>
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <div class="btn-list">
@@ -1747,185 +1890,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/cards.html b/demo/docs/cards.html
index 00940b373..3da8b8d35 100644
--- a/demo/docs/cards.html
+++ b/demo/docs/cards.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -24,7 +24,7 @@
     <meta name="robots" content="noindex,nofollow,noarchive"/>
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <meta name="description" content="A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options."/>
+    <meta name="description" content="Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content."/>
     <!-- Libs CSS -->
     <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
     <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
@@ -50,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -121,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -174,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -228,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -403,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -564,15 +629,19 @@
                       <h2 class="h1 mt-0 mb-3">Cards</h2>
                       <p class="ml-auto">
                         <a href="https://getbootstrap.com/docs/4.4/components/card/" target="_blank">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+                            <line x1="10" y1="14" x2="20" y2="4" />
+                            <polyline points="15 4 20 4 20 9" />
+                          </svg>
                           Bootstrap documentation
                         </a>
                       </p>
                     </div>
-                    <p>A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.</p>
-                    <p>The <code class="highlighter-rouge">.card</code> element is simply a container with a shadow, a border, a radius, and some padding. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.</p>
+                    <p>Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content.</p>
                     <h2 id="default-card">Default card</h2>
-                    <p>To create a new card you have to use the <code class="highlighter-rouge">.card</code> and <code class="highlighter-rouge">.card-body</code> classes. You can put any content inside.</p>
+                    <p>Use the <code class="highlighter-rouge">.card</code> and <code class="highlighter-rouge">.card-body</code> classes to create a card and use it as the basis for a more advanced card design. A card is a perfect way to organize content and make it look neat and tidy.</p>
                     <div class="example no_toc_section example-bg">
                       <div class="example-content">
                         <div class="example-column example-column-1">
@@ -594,8 +663,8 @@
                       </figure>
                     </div>
                     <h2 id="card-padding">Card padding</h2>
-                    <p>You can change the padding of a newly created card. You can do this with the <code class="highlighter-rouge">.card-sm</code>, <code class="highlighter-rouge">.card-md</code> and <code class="highlighter-rouge">.card-lg</code> classes.</p>
-                    <p>Cards with the <code class="highlighter-rouge">.card-sm</code> class are very well suited for small items such as snippets, etc., while <code class="highlighter-rouge">.card-lg</code> can be used for large blocks of text. On small devices, padding will automatically be reduced to fit on the screen.</p>
+                    <p>You can change the padding of a newly created card. To do it, use the <code class="highlighter-rouge">.card-sm</code>, <code class="highlighter-rouge">.card-md</code> or <code class="highlighter-rouge">.card-lg</code> classes.</p>
+                    <p>Cards with the <code class="highlighter-rouge">.card-sm</code> class are well suited for small items such as snippets, etc., while the <code class="highlighter-rouge">.card-lg</code> class can be used for large blocks of text. Padding will be automatically reduced on small devices, to fit the screen size.</p>
                     <div class="example no_toc_section example-bg">
                       <div class="example-content">
                         <div class="example-column example-column-2">
@@ -647,8 +716,7 @@
                       </figure>
                     </div>
                     <h2 id="card-with-title">Card with title</h2>
-                    <p>To add a title to a card you should add a class <code class="highlighter-rouge">.card-title</code> inside <code class="highlighter-rouge">.card-body</code>.</p>
-                    <p>You can also place the title inside the <code class="highlighter-rouge">.card-header</code> element - then the title will be separated from the content by a horizontal line.</p>
+                    <p>Add a title to your card by including the <code class="highlighter-rouge">.card-title</code> class within <code class="highlighter-rouge">.card-body</code>. You can also place the title inside the <code class="highlighter-rouge">.card-header</code> element to separate the title from the content with a horizontal line.</p>
                     <div class="example no_toc_section example-bg">
                       <div class="example-content">
                         <div class="example-column example-column-1">
@@ -688,6 +756,7 @@
                       </figure>
                     </div>
                     <h2 id="card-with-title-and-image">Card with title and image</h2>
+                    <p>To create a more visually appealing card, add a title and an image. Thanks to that, the card will go well with your inteface design and draw users’ attention.</p>
                     <div class="example no_toc_section example-bg">
                       <div class="example-content">
                         <div class="example-column example-column-1">
@@ -715,7 +784,7 @@
                       </figure>
                     </div>
                     <h2 id="blog-post-card">Blog post card</h2>
-                    <p>The best way to make your post eye-catching is adding an image to it. To do so, just add the image with the <code class="highlighter-rouge">.card-img-top</code> class. We’ve added the <code class="highlighter-rouge">.d-flex .flex-column</code> classes to the <code class="highlighter-rouge">.card-body</code> to have the author details be on the bottom of the card.</p>
+                    <p>Add an image to your blog post card to make it eye-catching. You can do it by adding the image in the <code class="highlighter-rouge">.card-img-top</code> class. Thanks to the <code class="highlighter-rouge">.d-flex</code> and <code class="highlighter-rouge">.flex-column</code> classes within <code class="highlighter-rouge">.card-body</code>, the author details will be displayed at the bottom of the card.</p>
                     <div class="example no_toc_section example-bg">
                       <div class="example-content">
                         <div class="example-column example-column-1">
@@ -734,7 +803,10 @@
                                 </div>
                                 <div class="ml-auto">
                                   <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                      <path stroke="none" d="M0 0h24v24H0z" />
+                                      <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                                    </svg>
                                   </a>
                                 </div>
                               </div>
@@ -769,7 +841,7 @@
                       </figure>
                     </div>
                     <h2 id="row-deck">Row deck</h2>
-                    <p>If you want to create a couple of posts next to each other, add the <code class="highlighter-rouge">.row-deck</code> class to <code class="highlighter-rouge">.row</code>—then they will all have the same height.</p>
+                    <p>Add the <code class="highlighter-rouge">.row-deck</code> class to <code class="highlighter-rouge">.row</code>, if you want to display several cards next to one another. Thanks to that, they will all have the same height.</p>
                     <div class="example no_toc_section example-bg">
                       <div class="example-content">
                         <div class="example-column example-column-2">
@@ -815,7 +887,7 @@
                       </figure>
                     </div>
                     <h2 id="post-card-with-aside-image">Post card with aside image</h2>
-                    <p>You can also add the image on the left side of the card. All you need do to is: add the <code class="highlighter-rouge">.card-aside</code> class to the element with the <code class="highlighter-rouge">.card</code> class. Then add the image in the <code class="highlighter-rouge">.card-aside-column</code> element. No worries, tabler will automatically center it and scale to right size:</p>
+                    <p>You can also add an image on the left side of the card. To do it, add the <code class="highlighter-rouge">.card-aside</code> class to the element with the <code class="highlighter-rouge">.card</code> class. Then add the image in the <code class="highlighter-rouge">.card-aside-column</code> element and it will be automatically centered and scaled to the right size.</p>
                     <div class="example no_toc_section example-bg">
                       <div class="example-content">
                         <div class="example-column example-column-2">
@@ -838,7 +910,10 @@
                                     </div>
                                     <div class="ml-auto">
                                       <a href="#" class="icon d-none d-md-inline-block ml-3 text-red">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                          <path stroke="none" d="M0 0h24v24H0z" />
+                                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                                        </svg>
                                       </a>
                                     </div>
                                   </div>
@@ -881,6 +956,7 @@
                       </figure>
                     </div>
                     <h2 id="color-variations">Color variations</h2>
+                    <p>Add a status color to your card, either at the top or on the side of the card, to customise it and make it more eye-catching.</p>
                     <div class="example no_toc_section example-bg">
                       <div class="example-content">
                         <div class="example-column example-column-2">
@@ -936,6 +1012,7 @@
                       </figure>
                     </div>
                     <h2 id="stacked-card">Stacked card</h2>
+                    <p>Use the <code class="highlighter-rouge">card-stacked</code> class to stack up multiple cards, if you want to save screen space or create a visually appealing effect.</p>
                     <div class="example no_toc_section example-bg">
                       <div class="example-content">
                         <div class="example-column example-column-1">
@@ -961,6 +1038,7 @@
                       </figure>
                     </div>
                     <h2 id="tabbed-card">Tabbed card</h2>
+                    <p>Organize multiple cards into tabs to be able to display more content in a well-organized way and allow users to alternate between them easily.</p>
                     <div class="example no_toc_section example-bg">
                       <div class="example-content">
                         <div class="example-column example-column-2">
@@ -1093,185 +1171,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/carousel.html b/demo/docs/carousel.html
index 6967841ea..e7ccd0b93 100644
--- a/demo/docs/carousel.html
+++ b/demo/docs/carousel.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -50,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -121,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -174,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -228,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -403,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -555,7 +620,12 @@
                       <h2 class="h1 mt-0 mb-3">Carousel</h2>
                       <p class="ml-auto">
                         <a href="https://getbootstrap.com/docs/4.4/components/carousel/" target="_blank">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+                            <line x1="10" y1="14" x2="20" y2="4" />
+                            <polyline points="15 4 20 4 20 9" />
+                          </svg>
                           Bootstrap documentation
                         </a>
                       </p>
@@ -667,185 +737,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/charts.html b/demo/docs/charts.html
index 96a195b5d..873eeec9d 100644
--- a/demo/docs/charts.html
+++ b/demo/docs/charts.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -580,185 +645,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/colors.html b/demo/docs/colors.html
index f7c2b4a92..ad8f8f06e 100644
--- a/demo/docs/colors.html
+++ b/demo/docs/colors.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -24,6 +24,7 @@
     <meta name="robots" content="noindex,nofollow,noarchive"/>
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <meta name="description" content="The choice of colors for a website or app interface has an big influence on how users interact with the product and what decisions they make. Harmonic colors can contribute to a nice first impression and encourage users to engage with your product, so it&#39;s a very important aspect of a successful design, which needs to be well thought out."/>
     <!-- Libs CSS -->
     <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
     <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
@@ -49,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -120,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -173,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -555,12 +621,19 @@
                       <h2 class="h1 mt-0 mb-3">Colors</h2>
                       <p class="ml-auto">
                         <a href="https://getbootstrap.com/docs/4.4/utilities/colors/" target="_blank">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+                            <line x1="10" y1="14" x2="20" y2="4" />
+                            <polyline points="15 4 20 4 20 9" />
+                          </svg>
                           Bootstrap documentation
                         </a>
                       </p>
                     </div>
+                    <p>The choice of colors for a website or app interface has an big influence on how users interact with the product and what decisions they make. Harmonic colors can contribute to a nice first impression and encourage users to engage with your product, so it's a very important aspect of a successful design, which needs to be well thought out.</p>
                     <h2 id="base-colors">Base colors</h2>
+                    <p>Choose one of the available colors from the basic color palette and make your design attractive for users. You can use the colors to customize the design of components, indicate different states or suggest actions you want users to take.</p>
                     <div class="example">
                       <div class="mb-n3">
                         <div class="row row-sm mb-3 align-items-center">
@@ -683,6 +756,7 @@
                       </div>
                     </div>
                     <h2 id="light-colors">Light colors</h2>
+                    <p>All available colors can come in pastel shades, which are perfect for more subtle designs and can be easily combined with the basic palette to create eye-cathing designs.</p>
                     <div class="example">
                       <div class="mb-n3">
                         <div class="row row-sm mb-3 align-items-center">
@@ -830,185 +904,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/countup.html b/demo/docs/countup.html
index 522195298..aded9443a 100644
--- a/demo/docs/countup.html
+++ b/demo/docs/countup.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -24,6 +24,7 @@
     <meta name="robots" content="noindex,nofollow,noarchive"/>
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <meta name="description" content="A countup element is used to display numerical data in an interesting way and make the interface more interactive. All the available options can be found [here](https://inorganik.github.io/countUp.js/)"/>
     <!-- Libs CSS -->
     <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
     <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
@@ -49,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -120,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -173,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -562,10 +628,9 @@
                     <div class="d-flex">
                       <h2 class="h1 mt-0 mb-3">Countup</h2>
                     </div>
-                    <p>Countups with many options that can be found <a href="https://inorganik.github.io/countUp.js/">here</a></p>
-                    <p>To make countup add <code class="highlighter-rouge">data-countup</code> to any html text tag.</p>
+                    <p>A countup element is used to display numerical data in an interesting way and make the interface more interactive. All the available options can be found [here](https://inorganik.github.io/countUp.js/)</p>
                     <h2 id="default-countup">Default countup</h2>
-                    <p>Set number to count up.</p>
+                    <p>To create a countup, add <code class="highlighter-rouge">data-countup</code> to any HTML text tag and specify the number which is to be reached. The animation will be triggered as soon as the number enters the viewport.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <h1 data-countup="">30000</h1>
@@ -577,7 +642,7 @@
                       </figure>
                     </div>
                     <h2 id="duration">Duration</h2>
-                    <p>Set the <code class="highlighter-rouge">duration</code> of the countup. (2s is set by default)</p>
+                    <p>Set the <code class="highlighter-rouge">duration</code> to determine how long the animation should take. By default, the duration is set to 2 seconds, but you can modify it as you wish.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <h1 data-countup="">30000</h1>
@@ -593,8 +658,8 @@
                       </figure>
                     </div>
                     <h2 id="starting-value">Starting value</h2>
-                    <p>Set the start value of countup using <code class="highlighter-rouge">startVal</code>.
-                      If you set it bigger than the <code class="highlighter-rouge">count</code>, countup will run reverse.</p>
+                    <p>By default the countup will start from zero. If you want to set a different start value use <code class="highlighter-rouge">startVal</code>. 
+                      You can also set the start value to be greater than the final value, so that it counts down instead of up.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <h1 data-countup="{&quot;startVal&quot;:12345}">30000</h1>
@@ -608,7 +673,7 @@
                       </figure>
                     </div>
                     <h2 id="decimal-places">Decimal places</h2>
-                    <p>Set how many decimal places to show using <code class="highlighter-rouge">decimalPlaces</code>.</p>
+                    <p>Set how many decimal numbers should be displayed using <code class="highlighter-rouge">decimalPlaces</code>.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <h1 data-countup="">3.123</h1>
@@ -626,7 +691,7 @@
                       </figure>
                     </div>
                     <h2 id="easing">Easing</h2>
-                    <p>Disable easing using <code class="highlighter-rouge">"useEasing": false</code>. (<code class="highlighter-rouge">true</code> by default)</p>
+                    <p>Disable easing using <code class="highlighter-rouge">"useEasing": false</code>. Easing is set to <code class="highlighter-rouge">true</code> by default, so that the animation speed changes over the course of its duration.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <h1 data-countup="">30000</h1>
@@ -640,7 +705,7 @@
                       </figure>
                     </div>
                     <h2 id="use-grouping">Use grouping</h2>
-                    <p>Disable grouping using <code class="highlighter-rouge">"useGrouping": false</code>. (<code class="highlighter-rouge">true</code> by default)</p>
+                    <p>Disable grouping using <code class="highlighter-rouge">"useGrouping": false</code>. Grouping is set to <code class="highlighter-rouge">true</code> by default and the default group separator is a comma.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <h1 data-countup="">30000</h1>
@@ -654,7 +719,7 @@
                       </figure>
                     </div>
                     <h2 id="separator">Separator</h2>
-                    <p>Set seperator that seperates groups using <code class="highlighter-rouge">separator</code>. (<code class="highlighter-rouge">,</code> by default)</p>
+                    <p>You can change the default comma group separator using <code class="highlighter-rouge">separator</code> and specifying the one you wish to use.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <h1 data-countup="">3000000</h1>
@@ -672,7 +737,7 @@
                       </figure>
                     </div>
                     <h2 id="decimal-separator">Decimal separator</h2>
-                    <p>Set decimal separator using <code class="highlighter-rouge">decimal</code>. (<code class="highlighter-rouge">.</code> by default)</p>
+                    <p>You can also change the decimal separator which is set to a full stop by default. To do it, use <code class="highlighter-rouge">decimal</code> and specify the decimal separator of your choice.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <h1 data-countup="{&quot;decimalPlaces&quot;:2}">3.12</h1>
@@ -690,7 +755,7 @@
                       </figure>
                     </div>
                     <h2 id="prefix">Prefix</h2>
-                    <p>Set countup prefix using <code class="highlighter-rouge">prefix</code>.</p>
+                    <p>Set the countup prefix using <code class="highlighter-rouge">prefix</code> and specifying the prefix you want to add, for instance a currency symbol.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <h1 data-countup="{&quot;prefix&quot;:&quot;$&quot;}">30000</h1>
@@ -706,7 +771,7 @@
                       </figure>
                     </div>
                     <h2 id="suffix">Suffix</h2>
-                    <p>Set countup suffix using <code class="highlighter-rouge">suffix</code>.</p>
+                    <p>Set the countup suffix using <code class="highlighter-rouge">suffix</code>.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <h1 data-countup="{&quot;suffix&quot;:&quot;%&quot;}">30</h1>
@@ -732,7 +797,7 @@
                         <pre><code class="language-html" data-lang="html"><span class="nt">&lt;h1</span> <span class="na">data-countup=</span><span class="s">'{"duration":6,"startVal":12345,"decimalPlaces":2,"separator":" ","prefix":"$"}'</span><span class="nt">&gt;</span>64547834.76<span class="nt">&lt;/h1&gt;</span></code></pre>
                       </figure>
                     </div>
-                    <p>To do more advanced stuff with countups go <a href="https://inorganik.github.io/countUp.js/"><strong>here</strong></a> to check how it’s done.</p>
+                    <p>For more advanced features of countups, click <a href="https://inorganik.github.io/countUp.js/"><strong>here</strong></a> and see what more you can do.</p>
                   </div>
                 </div>
               </div>
@@ -759,185 +824,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/cursors.html b/demo/docs/cursors.html
index a9536f644..92b02ba2c 100644
--- a/demo/docs/cursors.html
+++ b/demo/docs/cursors.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -50,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -121,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -174,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -228,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -403,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -639,185 +704,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/divider.html b/demo/docs/divider.html
index 4b6d6404f..13522cc69 100644
--- a/demo/docs/divider.html
+++ b/demo/docs/divider.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -24,7 +24,7 @@
     <meta name="robots" content="noindex,nofollow,noarchive"/>
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <meta name="description" content="Dividers help organise content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app."/>
+    <meta name="description" content="Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app."/>
     <!-- Libs CSS -->
     <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
     <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
@@ -50,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -121,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -174,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -228,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -403,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -557,12 +622,17 @@
                       <h2 class="h1 mt-0 mb-3">Divider</h2>
                       <p class="ml-auto">
                         <a href="https://getbootstrap.com/docs/4.4/components/dropdowns/#dividers" target="_blank">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+                            <line x1="10" y1="14" x2="20" y2="4" />
+                            <polyline points="15 4 20 4 20 9" />
+                          </svg>
                           Bootstrap documentation
                         </a>
                       </p>
                     </div>
-                    <p>Dividers help organise content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app.</p>
+                    <p>Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app.</p>
                     <h2 id="default-markup">Default markup</h2>
                     <p>Use dividers to visually separate content into parts. You can use a line only or add text that will be centered by default.</p>
                     <div class="example no_toc_section">
@@ -628,7 +698,7 @@
                       </figure>
                     </div>
                     <h2 id="divider-color">Divider color</h2>
-                    <p>Customise the colour of dividers to make them go well with your design. Click <a href="./colors.html">here</a> to see the list of available colours.</p>
+                    <p>Customize the color of dividers to make them go well with your design. Click <a href="./colors.html">here</a> to see the list of available colors.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <p>
@@ -685,185 +755,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/dropdowns.html b/demo/docs/dropdowns.html
index 12b554c66..dcc34a864 100644
--- a/demo/docs/dropdowns.html
+++ b/demo/docs/dropdowns.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -50,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -121,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -174,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -228,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -403,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -565,7 +630,12 @@
                       <h2 class="h1 mt-0 mb-3">Dropdowns</h2>
                       <p class="ml-auto">
                         <a href="https://getbootstrap.com/docs/4.4/components/dropdowns" target="_blank">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+                            <line x1="10" y1="14" x2="20" y2="4" />
+                            <polyline points="15 4 20 4 20 9" />
+                          </svg>
                           Bootstrap documentation
                         </a>
                       </p>
@@ -718,11 +788,20 @@
                         <div class="dropdown-menu dropdown-menu-demo">
                           <span class="dropdown-header">Dropdown header</span>
                           <a class="dropdown-item" href="#">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                            <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" />
+                              <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.37.996.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" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                            <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" />
+                              <path d="M9 7 h-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>
@@ -844,11 +923,20 @@
                         <div class="dropdown-menu dropdown-menu-demo dropdown-menu-arrow bg-dark text-white">
                           <span class="dropdown-header">Dropdown header</span>
                           <a class="dropdown-item" href="#">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                            <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" />
+                              <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.37.996.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" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                            <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" />
+                              <path d="M9 7 h-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>
@@ -895,7 +983,10 @@
                                     </div>
                                     <div class="ml-auto">
                                       <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                          <path stroke="none" d="M0 0h24v24H0z" />
+                                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                                        </svg>
                                       </a>
                                     </div>
                                   </div>
@@ -965,185 +1056,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/empty.html b/demo/docs/empty.html
index 152458aae..7816d1f27 100644
--- a/demo/docs/empty.html
+++ b/demo/docs/empty.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -50,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -121,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -174,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -228,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -403,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -562,7 +627,11 @@
                       <div class="example-content">
                         <div class="empty">
                           <div class="empty-icon">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z" />
+                              <circle cx="10" cy="10" r="7" />
+                              <line x1="21" y1="21" x2="15" y2="15" />
+                            </svg>
                           </div>
                           <p class="empty-title h3">No results found</p>
                           <p class="empty-subtitle text-muted">
@@ -570,7 +639,11 @@
                           </p>
                           <div class="empty-action">
                             <a href="../." class="btn btn-primary">
-                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" />
+                                <circle cx="10" cy="10" r="7" />
+                                <line x1="21" y1="21" x2="15" y2="15" />
+                              </svg>
                               Search again
                             </a>
                           </div>
@@ -597,7 +670,7 @@
                       </figure>
                     </div>
                     <h2 id="empty-state-with-illustration">Empty state with illustration</h2>
-                    <p>Make your empty state screen more attractive and engaging by adding an illustration. Thanks to a more personalised design, you will improve your brand image and make your website or app more user friendly.</p>
+                    <p>Make your empty state screen more attractive and engaging by adding an illustration. Thanks to a more personalized design, you will improve your brand image and make your website or app more user friendly.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="empty">
@@ -610,7 +683,11 @@
                           </p>
                           <div class="empty-action">
                             <a href="../." class="btn btn-primary">
-                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" />
+                                <circle cx="10" cy="10" r="7" />
+                                <line x1="21" y1="21" x2="15" y2="15" />
+                              </svg>
                               Search again
                             </a>
                           </div>
@@ -662,185 +739,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/flags.html b/demo/docs/flags.html
index 98726f4f6..263eb4444 100644
--- a/demo/docs/flags.html
+++ b/demo/docs/flags.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -24,6 +24,7 @@
     <meta name="robots" content="noindex,nofollow,noarchive"/>
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <meta name="description" content="Thanks to the Tabler flags plug-in, you can create flags to visually represent countries or languages. Flags are often used in forms, as an element of a delivery address, phone number dialling code and many more."/>
     <!-- Libs CSS -->
     <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
     <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
@@ -49,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -120,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -173,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -558,7 +624,9 @@
                     <div class="alert alert-info">This module is available in <code>tabler-flags</code>
                       plugin.
                     </div>
+                    <p>Thanks to the Tabler flags plug-in, you can create flags to visually represent countries or languages. Flags are often used in forms, as an element of a delivery address, phone number dialling code and many more.</p>
                     <h2 id="flag">Flag</h2>
+                    <p>To create a flag, add the <code class="highlighter-rouge">flag</code> class to a component and choose the country whose flag you want to use. The full list of countries can be found below.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <span class="flag flag-country-tg mr-1"></span>
@@ -574,7 +642,7 @@
                       </figure>
                     </div>
                     <h2 id="flag-sizes">Flag sizes</h2>
-                    <p>Using Bootstrap’s typical naming structure, you can create a standard flag, or scale it up to different sizes based on what’s needed.</p>
+                    <p>Using Bootstrap’s typical naming structure, you can create a standard flag, or scale it up or down to different sizes based on what’s needed.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <span class="flag flag-xl flag-country-pl mr-1"></span>
@@ -592,7 +660,7 @@
                       </figure>
                     </div>
                     <h2 id="types">Types</h2>
-                    <p>To set the flag of the country you want add a class <code class="highlighter-rouge">flag-(country name)</code>. For example to create a flag of Andorra your class should look like this: <code class="highlighter-rouge">.flag-ad</code>.</p>
+                    <p>To use the flag of a particular country, add the <code class="highlighter-rouge">flag-(country name)</code> class. For example, to create a flag of Andorra should use the following class: <code class="highlighter-rouge">.flag-ad</code>.</p>
                     <table>
                       <tr>
                         <td><span class="flag flag-country-ad"></span>
@@ -2127,185 +2195,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/form-elements.html b/demo/docs/form-elements.html
index cc5a5492d..50ec3ed56 100644
--- a/demo/docs/form-elements.html
+++ b/demo/docs/form-elements.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -24,6 +24,7 @@
     <meta name="robots" content="noindex,nofollow,noarchive"/>
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <meta name="description" content="Forms are one of the most important types of interaction with a website or app. Since their aim is to enable users to make a purchase, subscribe to a service or sign up to create an account, it&#39;s important to make sure they are easy to complete and help increase conversion rates. Use the available elements to create forms which are well-structured and user-friendly."/>
     <!-- Libs CSS -->
     <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
     <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
@@ -49,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -120,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -173,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -555,8 +621,8 @@
                   </li>
                   <li class="toc-entry toc-h2"><a href="#input-size">Input size</a></li>
                   <li class="toc-entry toc-h2"><a href="#image-check">Image check</a></li>
-                  <li class="toc-entry toc-h2"><a href="#input-colour">Input colour</a></li>
-                  <li class="toc-entry toc-h2"><a href="#input-colour-picker">Input colour picker</a></li>
+                  <li class="toc-entry toc-h2"><a href="#input-color">Input color</a></li>
+                  <li class="toc-entry toc-h2"><a href="#input-color-picker">Input color picker</a></li>
                   <li class="toc-entry toc-h2"><a href="#datalists">Datalists</a></li>
                   <li class="toc-entry toc-h2"><a href="#custom-selectboxes">Custom selectboxes</a></li>
                   <li class="toc-entry toc-h2"><a href="#advanced-selectboxes">Advanced selectboxes</a></li>
@@ -581,11 +647,17 @@
                       <h2 class="h1 mt-0 mb-3">Form elements</h2>
                       <p class="ml-auto">
                         <a href="https://getbootstrap.com/docs/4.4/components/forms/" target="_blank">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+                            <line x1="10" y1="14" x2="20" y2="4" />
+                            <polyline points="15 4 20 4 20 9" />
+                          </svg>
                           Bootstrap documentation
                         </a>
                       </p>
                     </div>
+                    <p>Forms are one of the most important types of interaction with a website or app. Since their aim is to enable users to make a purchase, subscribe to a service or sign up to create an account, it's important to make sure they are easy to complete and help increase conversion rates. Use the available elements to create forms which are well-structured and user-friendly.</p>
                     <h2 id="classic-inputs">Classic inputs</h2>
                     <p>Use classic, user-friendly inputs, label them appropriately and include input placeholders that will help users avoid confusion when completing a form.</p>
                     <div class="example no_toc_section">
@@ -622,7 +694,11 @@
                           <div class="input-icon">
                             <input type="text" class="form-control form-control-rounded" placeholder="Search…" />
                             <span class="input-icon-addon">
-                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" />
+                                <circle cx="10" cy="10" r="7" />
+                                <line x1="21" y1="21" x2="15" y2="15" />
+                              </svg>
                             </span>
                           </div>
                         </div>
@@ -661,7 +737,7 @@
                       </figure>
                     </div>
                     <h2 id="input-with-icon">Input with icon</h2>
-                    <p>Add icons to your input controls to sugegst users what they should enter or inform them of the current state of a form element.</p>
+                    <p>Add icons to your input controls to suggest users what they should enter or inform them of the current state of a form element.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="mb-3">
@@ -669,12 +745,20 @@
                           <div class="input-icon mb-3">
                             <input type="text" class="form-control" placeholder="Search…" />
                             <span class="input-icon-addon">
-                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" />
+                                <circle cx="10" cy="10" r="7" />
+                                <line x1="21" y1="21" x2="15" y2="15" />
+                              </svg>
                             </span>
                           </div>
                           <div class="input-icon mb-3">
                             <span class="input-icon-addon">
-                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" />
+                                <circle cx="12" cy="7" r="4" />
+                                <path d="M5.5 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2" />
+                              </svg>
                             </span>
                             <input type="text" class="form-control" placeholder="Username" />
                           </div>
@@ -742,7 +826,11 @@
                             </div>
                             <div class="col-auto">
                               <a href="#" class="btn btn-secondary btn-icon" aria-label="Button">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                  <path stroke="none" d="M0 0h24v24H0z" />
+                                  <circle cx="10" cy="10" r="7" />
+                                  <line x1="21" y1="21" x2="15" y2="15" />
+                                </svg>
                               </a>
                             </div>
                           </div>
@@ -840,7 +928,7 @@
                       </figure>
                     </div>
                     <h3 id="subtle-validation-states">Subtle validation states</h3>
-                    <p>If you prefer a more subtle manner of informing users of the input control validation state, you can use tick and cross symbols and resign from coloured control frames and the validation feedback.</p>
+                    <p>If you prefer a more subtle manner of informing users of the input control validation state, you can use tick and cross symbols and resign from colored control frames and the validation feedback.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="mb-3">
@@ -882,7 +970,7 @@
                       </figure>
                     </div>
                     <h2 id="image-check">Image check</h2>
-                    <p>Add an image check to your form and give users visually appealing options to choose from.</p>
+                    <p>Add an image check to your form and give users visually attractive options to choose from.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div style="max-width: 25rem">
@@ -1047,8 +1135,8 @@
 <span class="nt">&lt;/div&gt;</span></code></pre>
                       </figure>
                     </div>
-                    <h2 id="input-colour">Input colour</h2>
-                    <p>Your input controls can come in a variety of colours, depending on your preferences. Click <a href="./colors.html">here</a> to see the list of available colours.</p>
+                    <h2 id="input-color">Input color</h2>
+                    <p>Your input controls can come in a variety of colors, depending on your preferences. Click <a href="./colors.html">here</a> to see the list of available colors.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="mb-3">
@@ -1199,8 +1287,8 @@
 <span class="nt">&lt;/div&gt;</span></code></pre>
                       </figure>
                     </div>
-                    <h2 id="input-colour-picker">Input colour picker</h2>
-                    <p>Add an colour picker to your form to let users customise it according to their preferences.</p>
+                    <h2 id="input-color-picker">Input color picker</h2>
+                    <p>Add an color picker to your form to let users customise it according to their preferences.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="mb-3">
@@ -1268,19 +1356,19 @@
                           <div class="form-selectgroup">
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked="" />
-                              <span class="form-selectgroup-box">HTML</span>
+                              <span class="form-selectgroup-label">HTML</span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="CSS" class="form-selectgroup-input" />
-                              <span class="form-selectgroup-box">CSS</span>
+                              <span class="form-selectgroup-label">CSS</span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="PHP" class="form-selectgroup-input" />
-                              <span class="form-selectgroup-box">PHP</span>
+                              <span class="form-selectgroup-label">PHP</span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input" />
-                              <span class="form-selectgroup-box">JavaScript</span>
+                              <span class="form-selectgroup-label">JavaScript</span>
                             </label>
                           </div>
                         </div>
@@ -1289,27 +1377,41 @@
                           <div class="form-selectgroup">
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="sun" class="form-selectgroup-input" checked="" />
-                              <span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+                              <span class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                  <path stroke="none" d="M0 0h24v24H0z" />
+                                  <circle cx="12" cy="12" r="4" />
+                                  <path d="M3 12h1M12 3v1M20 12h1M12 20v1M5.6 5.6l.7 .7M18.4 5.6l-.7 .7M17.7 17.7l.7 .7M6.3 17.7l-.7 .7" />
+                                </svg>
                               </span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="moon" class="form-selectgroup-input" />
-                              <span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+                              <span class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                  <path stroke="none" d="M0 0h24v24H0z" />
+                                  <path d="M16.2 4a9.03 9.03 0 1 0 3.9 12a6.5 6.5 0 1 1 -3.9 -12" />
+                                </svg>
                               </span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="cloud-rain" class="form-selectgroup-input" />
-                              <span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16" y1="13" x2="16" y2="21"></line><line x1="8" y1="13" x2="8" y2="21"></line><line x1="12" y1="15" x2="12" y2="23"></line><path d="M20 16.58A5 5 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.25"></path></svg>
+                              <span class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                  <path stroke="none" d="M0 0h24v24H0z" />
+                                  <path d="M7 18a4.6 4.4 0 0 1 0 -9h0a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7" />
+                                  <path d="M11 13v2m0 3v2m4 -5v2m0 3v2" />
+                                </svg>
                               </span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="cloud" class="form-selectgroup-input" />
-                              <span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path></svg>
+                              <span class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                  <path stroke="none" d="M0 0h24v24H0z" />
+                                  <path d="M7 18a4.6 4.4 0 0 1 0 -9h0a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-12" />
+                                </svg>
                               </span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="Other" class="form-selectgroup-input" />
-                              <span class="form-selectgroup-box">Other</span>
+                              <span class="form-selectgroup-label">Other</span>
                             </label>
                           </div>
                         </div>
@@ -1318,22 +1420,37 @@
                           <div class="form-selectgroup">
                             <label class="form-selectgroup-item">
                               <input type="radio" name="icons" value="home" class="form-selectgroup-input" checked="" />
-                              <span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                              <span class="form-selectgroup-label"><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" />
+                                  <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>
                                 Home</span>
                             </label>
                             <label class="form-selectgroup-item">
-                              <input type="radio" name="icons" value="users" class="form-selectgroup-input" />
-                              <span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
-                                Users</span>
+                              <input type="radio" name="icons" value="user" class="form-selectgroup-input" />
+                              <span class="form-selectgroup-label"><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" />
+                                  <circle cx="12" cy="7" r="4" />
+                                  <path d="M5.5 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2" />
+                                </svg>
+                                User</span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="radio" name="icons" value="circle" class="form-selectgroup-input" />
-                              <span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1"><circle cx="12" cy="12" r="10"></circle></svg>
+                              <span class="form-selectgroup-label"><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" />
+                                  <circle cx="12" cy="12" r="9" />
+                                </svg>
                                 Circle</span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="radio" name="icons" value="square" class="form-selectgroup-input" />
-                              <span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>
+                              <span class="form-selectgroup-label"><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" />
+                                  <rect x="4" y="4" width="16" height="16" rx="2" />
+                                </svg>
                                 Square</span>
                             </label>
                           </div>
@@ -1343,19 +1460,19 @@
                           <div class="form-selectgroup form-selectgroup-pills">
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked="" />
-                              <span class="form-selectgroup-box">HTML</span>
+                              <span class="form-selectgroup-label">HTML</span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="CSS" class="form-selectgroup-input" />
-                              <span class="form-selectgroup-box">CSS</span>
+                              <span class="form-selectgroup-label">CSS</span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="PHP" class="form-selectgroup-input" />
-                              <span class="form-selectgroup-box">PHP</span>
+                              <span class="form-selectgroup-label">PHP</span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input" />
-                              <span class="form-selectgroup-box">JavaScript</span>
+                              <span class="form-selectgroup-label">JavaScript</span>
                             </label>
                           </div>
                         </div>
@@ -1368,19 +1485,19 @@
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">value=</span><span class="s">"HTML"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span> <span class="na">checked</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;</span>HTML<span class="nt">&lt;/span&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span>HTML<span class="nt">&lt;/span&gt;</span>
     <span class="nt">&lt;/label&gt;</span>
     <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">value=</span><span class="s">"CSS"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;</span>CSS<span class="nt">&lt;/span&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span>CSS<span class="nt">&lt;/span&gt;</span>
     <span class="nt">&lt;/label&gt;</span>
     <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">value=</span><span class="s">"PHP"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;</span>PHP<span class="nt">&lt;/span&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span>PHP<span class="nt">&lt;/span&gt;</span>
     <span class="nt">&lt;/label&gt;</span>
     <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">value=</span><span class="s">"JavaScript"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;</span>JavaScript<span class="nt">&lt;/span&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span>JavaScript<span class="nt">&lt;/span&gt;</span>
     <span class="nt">&lt;/label&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;/div&gt;</span>
@@ -1389,27 +1506,27 @@
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">value=</span><span class="s">"sun"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span> <span class="na">checked</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
       <span class="nt">&lt;/span&gt;</span>
     <span class="nt">&lt;/label&gt;</span>
     <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">value=</span><span class="s">"moon"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
       <span class="nt">&lt;/span&gt;</span>
     <span class="nt">&lt;/label&gt;</span>
     <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">value=</span><span class="s">"cloud-rain"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
       <span class="nt">&lt;/span&gt;</span>
     <span class="nt">&lt;/label&gt;</span>
     <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">value=</span><span class="s">"cloud"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
       <span class="nt">&lt;/span&gt;</span>
     <span class="nt">&lt;/label&gt;</span>
     <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">value=</span><span class="s">"Other"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;</span>Other<span class="nt">&lt;/span&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span>Other<span class="nt">&lt;/span&gt;</span>
     <span class="nt">&lt;/label&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;/div&gt;</span>
@@ -1418,22 +1535,22 @@
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"icons"</span> <span class="na">value=</span><span class="s">"home"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span> <span class="na">checked</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
         Home<span class="nt">&lt;/span&gt;</span>
     <span class="nt">&lt;/label&gt;</span>
     <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"icons"</span> <span class="na">value=</span><span class="s">"users"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
-        Users<span class="nt">&lt;/span&gt;</span>
+      <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"icons"</span> <span class="na">value=</span><span class="s">"user"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
+        User<span class="nt">&lt;/span&gt;</span>
     <span class="nt">&lt;/label&gt;</span>
     <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"icons"</span> <span class="na">value=</span><span class="s">"circle"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
         Circle<span class="nt">&lt;/span&gt;</span>
     <span class="nt">&lt;/label&gt;</span>
     <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"icons"</span> <span class="na">value=</span><span class="s">"square"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
         Square<span class="nt">&lt;/span&gt;</span>
     <span class="nt">&lt;/label&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
@@ -1443,19 +1560,19 @@
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup form-selectgroup-pills"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">value=</span><span class="s">"HTML"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span> <span class="na">checked</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;</span>HTML<span class="nt">&lt;/span&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span>HTML<span class="nt">&lt;/span&gt;</span>
     <span class="nt">&lt;/label&gt;</span>
     <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">value=</span><span class="s">"CSS"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;</span>CSS<span class="nt">&lt;/span&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span>CSS<span class="nt">&lt;/span&gt;</span>
     <span class="nt">&lt;/label&gt;</span>
     <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">value=</span><span class="s">"PHP"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;</span>PHP<span class="nt">&lt;/span&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span>PHP<span class="nt">&lt;/span&gt;</span>
     <span class="nt">&lt;/label&gt;</span>
     <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">value=</span><span class="s">"JavaScript"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-box"</span><span class="nt">&gt;</span>JavaScript<span class="nt">&lt;/span&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span>JavaScript<span class="nt">&lt;/span&gt;</span>
     <span class="nt">&lt;/label&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;/div&gt;</span></code></pre>
@@ -1470,7 +1587,7 @@
                           <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
                             <label class="form-selectgroup-item flex-fill">
                               <input type="radio" name="form-payment" value="visa" class="form-selectgroup-input" />
-                              <div class="form-selectgroup-box d-flex align-items-center p-3">
+                              <div class="form-selectgroup-label d-flex align-items-center p-3">
                                 <div class="mr-3">
                                   <span class="form-selectgroup-check"></span>
                                 </div>
@@ -1482,7 +1599,7 @@
                             </label>
                             <label class="form-selectgroup-item flex-fill">
                               <input type="radio" name="form-payment" value="mastercard" class="form-selectgroup-input" checked="" />
-                              <div class="form-selectgroup-box d-flex align-items-center p-3">
+                              <div class="form-selectgroup-label d-flex align-items-center p-3">
                                 <div class="mr-3">
                                   <span class="form-selectgroup-check"></span>
                                 </div>
@@ -1494,7 +1611,7 @@
                             </label>
                             <label class="form-selectgroup-item flex-fill">
                               <input type="radio" name="form-payment" value="paypal" class="form-selectgroup-input" />
-                              <div class="form-selectgroup-box d-flex align-items-center p-3">
+                              <div class="form-selectgroup-label d-flex align-items-center p-3">
                                 <div class="mr-3">
                                   <span class="form-selectgroup-check"></span>
                                 </div>
@@ -1510,11 +1627,11 @@
                           <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
                             <label class="form-selectgroup-item flex-fill">
                               <input type="checkbox" name="form-project-manager[]" value="1" class="form-selectgroup-input" />
-                              <div class="form-selectgroup-box d-flex align-items-center p-3">
+                              <div class="form-selectgroup-label d-flex align-items-center p-3">
                                 <div class="mr-3">
                                   <span class="form-selectgroup-check"></span>
                                 </div>
-                                <div class="form-selectgroup-box-content d-flex align-items-center">
+                                <div class="form-selectgroup-label-content d-flex align-items-center">
                                   <span class="avatar mr-3" style="background-image: url(../static/avatars/000m.jpg)"></span>
                                   <div class="lh-sm">
                                     <div class="strong">Paweł Kuna</div>
@@ -1525,11 +1642,11 @@
                             </label>
                             <label class="form-selectgroup-item flex-fill">
                               <input type="checkbox" name="form-project-manager[]" value="2" class="form-selectgroup-input" checked="" />
-                              <div class="form-selectgroup-box d-flex align-items-center p-3">
+                              <div class="form-selectgroup-label d-flex align-items-center p-3">
                                 <div class="mr-3">
                                   <span class="form-selectgroup-check"></span>
                                 </div>
-                                <div class="form-selectgroup-box-content d-flex align-items-center">
+                                <div class="form-selectgroup-label-content d-flex align-items-center">
                                   <span class="avatar mr-3">JL</span>
                                   <div class="lh-sm">
                                     <div class="strong">Jeffie Lewzey</div>
@@ -1540,11 +1657,11 @@
                             </label>
                             <label class="form-selectgroup-item flex-fill">
                               <input type="checkbox" name="form-project-manager[]" value="3" class="form-selectgroup-input" />
-                              <div class="form-selectgroup-box d-flex align-items-center p-3">
+                              <div class="form-selectgroup-label d-flex align-items-center p-3">
                                 <div class="mr-3">
                                   <span class="form-selectgroup-check"></span>
                                 </div>
-                                <div class="form-selectgroup-box-content d-flex align-items-center">
+                                <div class="form-selectgroup-label-content d-flex align-items-center">
                                   <span class="avatar mr-3" style="background-image: url(../static/avatars/002m.jpg)"></span>
                                   <div class="lh-sm">
                                     <div class="strong">Mallory Hulme</div>
@@ -1555,11 +1672,11 @@
                             </label>
                             <label class="form-selectgroup-item flex-fill">
                               <input type="checkbox" name="form-project-manager[]" value="4" class="form-selectgroup-input" />
-                              <div class="form-selectgroup-box d-flex align-items-center p-3">
+                              <div class="form-selectgroup-label d-flex align-items-center p-3">
                                 <div class="mr-3">
                                   <span class="form-selectgroup-check"></span>
                                 </div>
-                                <div class="form-selectgroup-box-content d-flex align-items-center">
+                                <div class="form-selectgroup-label-content d-flex align-items-center">
                                   <span class="avatar mr-3" style="background-image: url(../static/avatars/003m.jpg)"></span>
                                   <div class="lh-sm">
                                     <div class="strong">Dunn Slane</div>
@@ -1570,11 +1687,11 @@
                             </label>
                             <label class="form-selectgroup-item flex-fill">
                               <input type="checkbox" name="form-project-manager[]" value="5" class="form-selectgroup-input" />
-                              <div class="form-selectgroup-box d-flex align-items-center p-3">
+                              <div class="form-selectgroup-label d-flex align-items-center p-3">
                                 <div class="mr-3">
                                   <span class="form-selectgroup-check"></span>
                                 </div>
-                                <div class="form-selectgroup-box-content d-flex align-items-center">
+                                <div class="form-selectgroup-label-content d-flex align-items-center">
                                   <span class="avatar mr-3" style="background-image: url(../static/avatars/000f.jpg)"></span>
                                   <div class="lh-sm">
                                     <div class="strong">Emmy Levet</div>
@@ -1594,7 +1711,7 @@
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup form-selectgroup-boxes d-flex flex-column"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item flex-fill"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"form-payment"</span> <span class="na">value=</span><span class="s">"visa"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-box d-flex align-items-center p-3"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label d-flex align-items-center p-3"</span><span class="nt">&gt;</span>
         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mr-3"</span><span class="nt">&gt;</span>
           <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-check"</span><span class="nt">&gt;&lt;/span&gt;</span>
         <span class="nt">&lt;/div&gt;</span>
@@ -1606,7 +1723,7 @@
     <span class="nt">&lt;/label&gt;</span>
     <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item flex-fill"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"form-payment"</span> <span class="na">value=</span><span class="s">"mastercard"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span> <span class="na">checked</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-box d-flex align-items-center p-3"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label d-flex align-items-center p-3"</span><span class="nt">&gt;</span>
         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mr-3"</span><span class="nt">&gt;</span>
           <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-check"</span><span class="nt">&gt;&lt;/span&gt;</span>
         <span class="nt">&lt;/div&gt;</span>
@@ -1618,7 +1735,7 @@
     <span class="nt">&lt;/label&gt;</span>
     <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item flex-fill"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"form-payment"</span> <span class="na">value=</span><span class="s">"paypal"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-box d-flex align-items-center p-3"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label d-flex align-items-center p-3"</span><span class="nt">&gt;</span>
         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mr-3"</span><span class="nt">&gt;</span>
           <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-check"</span><span class="nt">&gt;&lt;/span&gt;</span>
         <span class="nt">&lt;/div&gt;</span>
@@ -1634,11 +1751,11 @@
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup form-selectgroup-boxes d-flex flex-column"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item flex-fill"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"form-project-manager[]"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span> <span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-box d-flex align-items-center p-3"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label d-flex align-items-center p-3"</span><span class="nt">&gt;</span>
         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mr-3"</span><span class="nt">&gt;</span>
           <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-check"</span><span class="nt">&gt;&lt;/span&gt;</span>
         <span class="nt">&lt;/div&gt;</span>
-        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-box-content d-flex align-items-center"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label-content d-flex align-items-center"</span><span class="nt">&gt;</span>
           <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar mr-3"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
           <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"lh-sm"</span><span class="nt">&gt;</span>
             <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"strong"</span><span class="nt">&gt;</span>Paweł Kuna<span class="nt">&lt;/div&gt;</span>
@@ -1649,11 +1766,11 @@
     <span class="nt">&lt;/label&gt;</span>
     <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item flex-fill"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"form-project-manager[]"</span> <span class="na">value=</span><span class="s">"2"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span>  <span class="na">checked</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-box d-flex align-items-center p-3"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label d-flex align-items-center p-3"</span><span class="nt">&gt;</span>
         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mr-3"</span><span class="nt">&gt;</span>
           <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-check"</span><span class="nt">&gt;&lt;/span&gt;</span>
         <span class="nt">&lt;/div&gt;</span>
-        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-box-content d-flex align-items-center"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label-content d-flex align-items-center"</span><span class="nt">&gt;</span>
           <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar mr-3"</span><span class="nt">&gt;</span>JL<span class="nt">&lt;/span&gt;</span>
           <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"lh-sm"</span><span class="nt">&gt;</span>
             <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"strong"</span><span class="nt">&gt;</span>Jeffie Lewzey<span class="nt">&lt;/div&gt;</span>
@@ -1664,11 +1781,11 @@
     <span class="nt">&lt;/label&gt;</span>
     <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item flex-fill"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"form-project-manager[]"</span> <span class="na">value=</span><span class="s">"3"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span> <span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-box d-flex align-items-center p-3"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label d-flex align-items-center p-3"</span><span class="nt">&gt;</span>
         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mr-3"</span><span class="nt">&gt;</span>
           <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-check"</span><span class="nt">&gt;&lt;/span&gt;</span>
         <span class="nt">&lt;/div&gt;</span>
-        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-box-content d-flex align-items-center"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label-content d-flex align-items-center"</span><span class="nt">&gt;</span>
           <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar mr-3"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
           <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"lh-sm"</span><span class="nt">&gt;</span>
             <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"strong"</span><span class="nt">&gt;</span>Mallory Hulme<span class="nt">&lt;/div&gt;</span>
@@ -1679,11 +1796,11 @@
     <span class="nt">&lt;/label&gt;</span>
     <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item flex-fill"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"form-project-manager[]"</span> <span class="na">value=</span><span class="s">"4"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span> <span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-box d-flex align-items-center p-3"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label d-flex align-items-center p-3"</span><span class="nt">&gt;</span>
         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mr-3"</span><span class="nt">&gt;</span>
           <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-check"</span><span class="nt">&gt;&lt;/span&gt;</span>
         <span class="nt">&lt;/div&gt;</span>
-        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-box-content d-flex align-items-center"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label-content d-flex align-items-center"</span><span class="nt">&gt;</span>
           <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar mr-3"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
           <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"lh-sm"</span><span class="nt">&gt;</span>
             <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"strong"</span><span class="nt">&gt;</span>Dunn Slane<span class="nt">&lt;/div&gt;</span>
@@ -1694,11 +1811,11 @@
     <span class="nt">&lt;/label&gt;</span>
     <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item flex-fill"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"form-project-manager[]"</span> <span class="na">value=</span><span class="s">"5"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span> <span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-box d-flex align-items-center p-3"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label d-flex align-items-center p-3"</span><span class="nt">&gt;</span>
         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mr-3"</span><span class="nt">&gt;</span>
           <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-check"</span><span class="nt">&gt;&lt;/span&gt;</span>
         <span class="nt">&lt;/div&gt;</span>
-        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-box-content d-flex align-items-center"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label-content d-flex align-items-center"</span><span class="nt">&gt;</span>
           <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar mr-3"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
           <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"lh-sm"</span><span class="nt">&gt;</span>
             <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"strong"</span><span class="nt">&gt;</span>Emmy Levet<span class="nt">&lt;/div&gt;</span>
@@ -1959,15 +2076,15 @@
                       <div class="example-content">
                         <fieldset class="form-fieldset">
                           <div class="mb-3">
-                            <label class="form-label">Full name<span class="form-required">*</span></label>
+                            <label class="form-label required">Full name</label>
                             <input type="text" class="form-control" autocomplete="off" />
                           </div>
                           <div class="mb-3">
-                            <label class="form-label">Company<span class="form-required">*</span></label>
+                            <label class="form-label required">Company</label>
                             <input type="text" class="form-control" autocomplete="off" />
                           </div>
                           <div class="mb-3">
-                            <label class="form-label">Email<span class="form-required">*</span></label>
+                            <label class="form-label required">Email</label>
                             <input type="email" class="form-control" autocomplete="off" />
                           </div>
                           <div class="">
@@ -1981,15 +2098,15 @@
                       <figure class="highlight">
                         <pre><code class="language-html" data-lang="html"><span class="nt">&lt;fieldset</span> <span class="na">class=</span><span class="s">"form-fieldset"</span><span class="nt">&gt;</span>
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
-    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Full name<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-required"</span><span class="nt">&gt;</span>*<span class="nt">&lt;/span&gt;&lt;/label&gt;</span>
+    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label required"</span><span class="nt">&gt;</span>Full name<span class="nt">&lt;/label&gt;</span>
     <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">/&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
-    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Company<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-required"</span><span class="nt">&gt;</span>*<span class="nt">&lt;/span&gt;&lt;/label&gt;</span>
+    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label required"</span><span class="nt">&gt;</span>Company<span class="nt">&lt;/label&gt;</span>
     <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span>  <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">/&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
-    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Email<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-required"</span><span class="nt">&gt;</span>*<span class="nt">&lt;/span&gt;&lt;/label&gt;</span>
+    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label required"</span><span class="nt">&gt;</span>Email<span class="nt">&lt;/label&gt;</span>
     <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span>  <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">/&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;</span>
@@ -2006,33 +2123,25 @@
                         <div class="mb-3">
                           <label class="form-label">Input group</label>
                           <div class="input-group mb-2">
-                            <div class="input-group-prepend">
-                              <span class="input-group-text">
-                                @
-                              </span>
-                            </div>
+                            <span class="input-group-text">
+                              @
+                            </span>
                             <input type="text" class="form-control" placeholder="username" />
                           </div>
                           <div class="input-group mb-2">
                             <input type="text" class="form-control" placeholder="subdomain" />
-                            <div class="input-group-append">
-                              <span class="input-group-text">
-                                .tabler.io
-                              </span>
-                            </div>
+                            <span class="input-group-text">
+                              .tabler.io
+                            </span>
                           </div>
                           <div class="input-group">
-                            <div class="input-group-prepend">
-                              <span class="input-group-text">
-                                https://
-                              </span>
-                            </div>
+                            <span class="input-group-text">
+                              https://
+                            </span>
                             <input type="text" class="form-control" placeholder="subdomain" />
-                            <div class="input-group-append">
-                              <span class="input-group-text">
-                                .tabler.io
-                              </span>
-                            </div>
+                            <span class="input-group-text">
+                              .tabler.io
+                            </span>
                           </div>
                         </div>
                       </div>
@@ -2042,33 +2151,25 @@
                         <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
   <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Input group<span class="nt">&lt;/label&gt;</span>
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group mb-2"</span><span class="nt">&gt;</span>
-    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
-        @
-      <span class="nt">&lt;/span&gt;</span>
-    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
+      @
+    <span class="nt">&lt;/span&gt;</span>
     <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span>  <span class="na">placeholder=</span><span class="s">"username"</span> <span class="nt">&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group mb-2"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span>  <span class="na">placeholder=</span><span class="s">"subdomain"</span> <span class="nt">&gt;</span>
-    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-append"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
-        .tabler.io
-      <span class="nt">&lt;/span&gt;</span>
-    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
+      .tabler.io
+    <span class="nt">&lt;/span&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
-    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
-        https://
-      <span class="nt">&lt;/span&gt;</span>
-    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
+      https://
+    <span class="nt">&lt;/span&gt;</span>
     <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span>  <span class="na">placeholder=</span><span class="s">"subdomain"</span> <span class="nt">&gt;</span>
-    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-append"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
-        .tabler.io
-      <span class="nt">&lt;/span&gt;</span>
-    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
+      .tabler.io
+    <span class="nt">&lt;/span&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;/div&gt;</span></code></pre>
                       </figure>
@@ -2080,20 +2181,16 @@
                         <div class="mb-3">
                           <label class="form-label">Input with checkbox or radios</label>
                           <div class="input-group mb-2">
-                            <div class="input-group-prepend">
-                              <span class="input-group-text">
-                                <input class="form-check-input m-0" type="checkbox" checked="" />
-                              </span>
-                            </div>
+                            <span class="input-group-text">
+                              <input class="form-check-input m-0" type="checkbox" checked="" />
+                            </span>
                             <input type="text" class="form-control" />
                           </div>
                           <div class="input-group">
                             <input type="text" class="form-control" />
-                            <div class="input-group-append">
-                              <span class="input-group-text">
-                                <input class="form-check-input m-0" type="radio" checked="" />
-                              </span>
-                            </div>
+                            <span class="input-group-text">
+                              <input class="form-check-input m-0" type="radio" checked="" />
+                            </span>
                           </div>
                         </div>
                       </div>
@@ -2103,20 +2200,16 @@
                         <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
   <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Input with checkbox or radios<span class="nt">&lt;/label&gt;</span>
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group mb-2"</span><span class="nt">&gt;</span>
-    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
-        <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input m-0"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">checked</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;/span&gt;</span>
-    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input m-0"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">checked</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;/span&gt;</span>
     <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="nt">&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="nt">&gt;</span>
-    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-append"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
-        <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input m-0"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">checked</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;/span&gt;</span>
-    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input m-0"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">checked</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;/span&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;/div&gt;</span></code></pre>
                       </figure>
@@ -2128,20 +2221,16 @@
                         <div class="mb-3">
                           <label class="form-label">Input with prepended text</label>
                           <div class="input-group input-group-flat mb-2">
-                            <div class="input-group-prepend">
-                              <span class="input-group-text">
-                                https://tabler.io/users/
-                              </span>
-                            </div>
+                            <span class="input-group-text">
+                              https://tabler.io/users/
+                            </span>
                             <input type="text" class="form-control pl-0" value="yourfancyusername" />
                           </div>
                           <div class="input-group input-group-flat">
                             <input type="text" class="form-control text-right pr-0" value="yourfancydomain" />
-                            <div class="input-group-append">
-                              <span class="input-group-text">
-                                .tabler.io
-                              </span>
-                            </div>
+                            <span class="input-group-text">
+                              .tabler.io
+                            </span>
                           </div>
                         </div>
                       </div>
@@ -2151,20 +2240,16 @@
                         <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
   <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Input with prepended text<span class="nt">&lt;/label&gt;</span>
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group input-group-flat mb-2"</span><span class="nt">&gt;</span>
-    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
-        https://tabler.io/users/
-      <span class="nt">&lt;/span&gt;</span>
-    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
+      https://tabler.io/users/
+    <span class="nt">&lt;/span&gt;</span>
     <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control pl-0"</span>  <span class="na">value=</span><span class="s">"yourfancyusername"</span><span class="nt">&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group input-group-flat"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control text-right pr-0"</span>  <span class="na">value=</span><span class="s">"yourfancydomain"</span><span class="nt">&gt;</span>
-    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-append"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
-        .tabler.io
-      <span class="nt">&lt;/span&gt;</span>
-    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
+      .tabler.io
+    <span class="nt">&lt;/span&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;/div&gt;</span></code></pre>
                       </figure>
@@ -2177,11 +2262,9 @@
                           <label class="form-label">Input with appended link</label>
                           <div class="input-group input-group-flat">
                             <input type="password" class="form-control" value="ultrastrongpassword" />
-                            <div class="input-group-append">
-                              <span class="input-group-text">
-                                <a href="#" class="input-group-link">Show password</a>
-                              </span>
-                            </div>
+                            <span class="input-group-text">
+                              <a href="#" class="input-group-link">Show password</a>
+                            </span>
                           </div>
                         </div>
                       </div>
@@ -2192,11 +2275,9 @@
   <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Input with appended link<span class="nt">&lt;/label&gt;</span>
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group input-group-flat"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span>  <span class="na">value=</span><span class="s">"ultrastrongpassword"</span><span class="nt">&gt;</span>
-    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-append"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
-        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"input-group-link"</span><span class="nt">&gt;</span>Show password<span class="nt">&lt;/a&gt;</span>
-      <span class="nt">&lt;/span&gt;</span>
-    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"input-group-link"</span><span class="nt">&gt;</span>Show password<span class="nt">&lt;/a&gt;</span>
+    <span class="nt">&lt;/span&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;/div&gt;</span></code></pre>
                       </figure>
@@ -2209,16 +2290,33 @@
                           <label class="form-label">Input with appended icon links</label>
                           <div class="input-group input-group-flat">
                             <input type="text" class="form-control" />
-                            <div class="input-group-append">
-                              <span class="input-group-text">
-                                <a href="#" class="link-secondary" title="Clear search" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-                                </a>
-                                <a href="#" class="link-secondary ml-2" title="Search settings" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                                </a>
-                                <a href="#" class="link-secondary ml-2 disabled" title="Add notification" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                                </a>
-                              </span>
-                            </div>
+                            <span class="input-group-text">
+                              <a href="#" class="link-secondary" title="Clear search" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                  <path stroke="none" d="M0 0h24v24H0z" />
+                                  <line x1="18" y1="6" x2="6" y2="18" />
+                                  <line x1="6" y1="6" x2="18" y2="18" />
+                                </svg>
+                              </a>
+                              <a href="#" class="link-secondary ml-2" title="Search settings" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                  <path stroke="none" d="M0 0h24v24H0z" />
+                                  <circle cx="6" cy="10" r="2" />
+                                  <line x1="6" y1="4" x2="6" y2="8" />
+                                  <line x1="6" y1="12" x2="6" y2="20" />
+                                  <circle cx="12" cy="16" r="2" />
+                                  <line x1="12" y1="4" x2="12" y2="14" />
+                                  <line x1="12" y1="18" x2="12" y2="20" />
+                                  <circle cx="18" cy="7" r="2" />
+                                  <line x1="18" y1="4" x2="18" y2="5" />
+                                  <line x1="18" y1="9" x2="18" y2="20" />
+                                </svg>
+                              </a>
+                              <a href="#" class="link-secondary ml-2 disabled" title="Add notification" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                  <path stroke="none" d="M0 0h24v24H0z" />
+                                  <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>
+                              </a>
+                            </span>
                           </div>
                         </div>
                       </div>
@@ -2229,16 +2327,14 @@
   <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Input with appended icon links<span class="nt">&lt;/label&gt;</span>
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group input-group-flat"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="nt">&gt;</span>
-    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-append"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
-        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"link-secondary"</span> <span class="na">title=</span><span class="s">"Clear search"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
-        <span class="nt">&lt;/a&gt;</span>
-        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"link-secondary ml-2"</span> <span class="na">title=</span><span class="s">"Search settings"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
-        <span class="nt">&lt;/a&gt;</span>
-        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"link-secondary ml-2 disabled"</span> <span class="na">title=</span><span class="s">"Add notification"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
-        <span class="nt">&lt;/a&gt;</span>
-      <span class="nt">&lt;/span&gt;</span>
-    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"link-secondary"</span> <span class="na">title=</span><span class="s">"Clear search"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
+      <span class="nt">&lt;/a&gt;</span>
+      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"link-secondary ml-2"</span> <span class="na">title=</span><span class="s">"Search settings"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
+      <span class="nt">&lt;/a&gt;</span>
+      <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"link-secondary ml-2 disabled"</span> <span class="na">title=</span><span class="s">"Add notification"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
+      <span class="nt">&lt;/a&gt;</span>
+    <span class="nt">&lt;/span&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;/div&gt;</span></code></pre>
                       </figure>
@@ -2269,67 +2365,6 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
@@ -2375,119 +2410,6 @@
       });
       // @formatter:on
     </script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/form-helpers.html b/demo/docs/form-helpers.html
index b187ee751..be73ad500 100644
--- a/demo/docs/form-helpers.html
+++ b/demo/docs/form-helpers.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -24,6 +24,7 @@
     <meta name="robots" content="noindex,nofollow,noarchive"/>
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <meta name="description" content="A form helper can be used to provide users with additional information about the elements of a form that may be unclear."/>
     <!-- Libs CSS -->
     <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
     <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
@@ -49,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -120,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -173,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -553,7 +619,9 @@
                     <div class="d-flex">
                       <h2 class="h1 mt-0 mb-3">Form helpers</h2>
                     </div>
+                    <p>A form helper can be used to provide users with additional information about the elements of a form that may be unclear.</p>
                     <h2 id="input-help">Input help</h2>
+                    <p>Use an input helper to display additional information about a form element. The text label will appear once a user hovers over the helper.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <span class="form-help" data-toggle="popover" data-placement="top" data-content="&lt;p&gt;ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.&lt;/p&gt;&lt;p class='mb-0'&gt;&lt;a href=''&gt;USP ZIP codes lookup tools&lt;/a&gt;&lt;/p&gt;">?</span>
@@ -592,185 +660,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/index.html b/demo/docs/index.html
index 105145ae9..61ff4f0ab 100644
--- a/demo/docs/index.html
+++ b/demo/docs/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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 active" href="../docs/index.html" >
                       Introduction
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -558,9 +623,9 @@
                       <h2 class="h1 mt-0 mb-3">Introduction</h2>
                     </div>
                     <h2 id="what-is-tabler">What is Tabler?</h2>
-                    <p>Tabler is a UI kit that speeds up the development process and makes it easier than ever! Built on the latest version of Bootstrap, it helps you create templates based on fully customisable and ready-to-use UI components, which can be used by both simple websites and sophisticated systems. With basic knowledge of HTML and CSS, you’ll be able to create dashboards that are fully functional and beautifully designed!</p>
+                    <p>Tabler is a UI kit that speeds up the development process and makes it easier than ever! Built on the latest version of Bootstrap, it helps you create templates based on fully customizable and ready-to-use UI components, which can be used by both simple websites and sophisticated systems. With basic knowledge of HTML and CSS, you’ll be able to create dashboards that are fully functional and beautifully designed!</p>
                     <h2 id="what-are-the-benefits">What are the benefits?</h2>
-                    <p>Tabler is a perfect solution if you want to create an interface which is not only user-friendly but also fully reponsive. Thanks to the big choice of ready-made components, you can customise your design and adapt it to the needs of even the most demanding users. On top of that, Tabler is an open source solution, continuously developed and improved by the open source community.</p>
+                    <p>Tabler is a perfect solution if you want to create an interface which is not only user-friendly but also fully reponsive. Thanks to the big choice of ready-made components, you can customize your design and adapt it to the needs of even the most demanding users. On top of that, Tabler is an open source solution, continuously developed and improved by the open source community.</p>
                     <p>To start using Tabler, first you need to set up the environment.</p>
                     <h2 id="set-up-the-environment">Set up the environment</h2>
                     <p>To use our build system and run our documentation locally, you’ll need a copy of Tabler’s source files. Follow the steps below:</p>
@@ -614,185 +679,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/input-mask.html b/demo/docs/input-mask.html
index 635d34708..bd6c3b050 100644
--- a/demo/docs/input-mask.html
+++ b/demo/docs/input-mask.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -24,6 +24,7 @@
     <meta name="robots" content="noindex,nofollow,noarchive"/>
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <meta name="description" content="An input mask is a used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors."/>
     <!-- Libs CSS -->
     <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
     <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
@@ -49,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -120,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -173,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -553,7 +619,9 @@
                     <div class="d-flex">
                       <h2 class="h1 mt-0 mb-3">Input mask</h2>
                     </div>
+                    <p>An input mask is a used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors.</p>
                     <h2 id="default-markup">Default markup</h2>
+                    <p>Use an input mask in the fields where users have to enter their phone number, to make the formatting rules clear and help them avoid confusion.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <label class="form-label">Telephone mask</label>
@@ -592,186 +660,12 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.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() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       (function () {
       	/**
diff --git a/demo/docs/modals.html b/demo/docs/modals.html
index ef2263222..4c54b1d20 100644
--- a/demo/docs/modals.html
+++ b/demo/docs/modals.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -50,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -121,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -174,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -228,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -403,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -566,7 +631,11 @@
                             <div class="modal-header">
                               <h5 class="modal-title">Modal title</h5>
                               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                  <path stroke="none" d="M0 0h24v24H0z" />
+                                  <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">
@@ -644,7 +713,11 @@
                             <div class="modal-header">
                               <h5 class="modal-title">New report</h5>
                               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                  <path stroke="none" d="M0 0h24v24H0z" />
+                                  <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">
@@ -657,11 +730,11 @@
                                 <div class="col-lg-6">
                                   <label class="form-selectgroup-item">
                                     <input type="radio" name="report-type" value="1" class="form-selectgroup-input" checked="" />
-                                    <div class="form-selectgroup-box d-flex align-items-center p-3">
+                                    <div class="form-selectgroup-label d-flex align-items-center p-3">
                                       <div class="mr-3">
                                         <span class="form-selectgroup-check"></span>
                                       </div>
-                                      <div class="form-selectgroup-box-content">
+                                      <div class="form-selectgroup-label-content">
                                         <div class="form-selectgroup-title strong mb-1">Simple</div>
                                         <div class="text-muted">Provide only basic data needed for the report</div>
                                       </div>
@@ -671,11 +744,11 @@
                                 <div class="col-lg-6">
                                   <label class="form-selectgroup-item">
                                     <input type="radio" name="report-type" value="1" class="form-selectgroup-input" />
-                                    <div class="form-selectgroup-box d-flex align-items-center p-3">
+                                    <div class="form-selectgroup-label d-flex align-items-center p-3">
                                       <div class="mr-3">
                                         <span class="form-selectgroup-check"></span>
                                       </div>
-                                      <div class="form-selectgroup-box-content">
+                                      <div class="form-selectgroup-label-content">
                                         <div class="form-selectgroup-title strong mb-1">Advanced</div>
                                         <div class="text-muted">Insert charts and additional advanced analyses to be inserted in the report</div>
                                       </div>
@@ -688,11 +761,9 @@
                                   <div class="mb-3">
                                     <label class="form-label">Report url</label>
                                     <div class="input-group input-group-flat">
-                                      <div class="input-group-prepend">
-                                        <span class="input-group-text">
-                                          https://tabler.io/reports/
-                                        </span>
-                                      </div>
+                                      <span class="input-group-text">
+                                        https://tabler.io/reports/
+                                      </span>
                                       <input type="text" class="form-control pl-0" value="report-01" />
                                     </div>
                                   </div>
@@ -736,7 +807,11 @@
                                 Cancel
                               </a>
                               <a href="#" class="btn btn-primary ml-auto" data-dismiss="modal">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                  <path stroke="none" d="M0 0h24v24H0z" />
+                                  <line x1="12" y1="5" x2="12" y2="19" />
+                                  <line x1="5" y1="12" x2="19" y2="12" />
+                                </svg>
                                 Create new report
                               </a>
                             </div>
@@ -764,11 +839,11 @@
         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-6"</span><span class="nt">&gt;</span>
           <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
             <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"report-type"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span> <span class="na">checked</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-box d-flex align-items-center p-3"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label d-flex align-items-center p-3"</span><span class="nt">&gt;</span>
               <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mr-3"</span><span class="nt">&gt;</span>
                 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-check"</span><span class="nt">&gt;&lt;/span&gt;</span>
               <span class="nt">&lt;/div&gt;</span>
-              <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-box-content"</span><span class="nt">&gt;</span>
+              <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label-content"</span><span class="nt">&gt;</span>
                 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-title strong mb-1"</span><span class="nt">&gt;</span>Simple<span class="nt">&lt;/div&gt;</span>
                 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Provide only basic data needed for the report<span class="nt">&lt;/div&gt;</span>
               <span class="nt">&lt;/div&gt;</span>
@@ -778,11 +853,11 @@
         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-6"</span><span class="nt">&gt;</span>
           <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
             <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"report-type"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-box d-flex align-items-center p-3"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label d-flex align-items-center p-3"</span><span class="nt">&gt;</span>
               <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mr-3"</span><span class="nt">&gt;</span>
                 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-check"</span><span class="nt">&gt;&lt;/span&gt;</span>
               <span class="nt">&lt;/div&gt;</span>
-              <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-box-content"</span><span class="nt">&gt;</span>
+              <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label-content"</span><span class="nt">&gt;</span>
                 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-title strong mb-1"</span><span class="nt">&gt;</span>Advanced<span class="nt">&lt;/div&gt;</span>
                 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Insert charts and additional advanced analyses to be inserted in the report<span class="nt">&lt;/div&gt;</span>
               <span class="nt">&lt;/div&gt;</span>
@@ -795,11 +870,9 @@
           <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
             <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Report url<span class="nt">&lt;/label&gt;</span>
             <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group input-group-flat"</span><span class="nt">&gt;</span>
-              <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">&gt;</span>
-                <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
-                  https://tabler.io/reports/
-                <span class="nt">&lt;/span&gt;</span>
-              <span class="nt">&lt;/div&gt;</span>
+              <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
+                https://tabler.io/reports/
+              <span class="nt">&lt;/span&gt;</span>
               <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control pl-0"</span>  <span class="na">value=</span><span class="s">"report-01"</span><span class="nt">&gt;</span>
             <span class="nt">&lt;/div&gt;</span>
           <span class="nt">&lt;/div&gt;</span>
@@ -877,185 +950,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/payments.html b/demo/docs/payments.html
index dbba3a5d0..c1729e178 100644
--- a/demo/docs/payments.html
+++ b/demo/docs/payments.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -24,6 +24,7 @@
     <meta name="robots" content="noindex,nofollow,noarchive"/>
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <meta name="description" content="The Tabler payments plug-in will let you use a set of payment provider icons to facilitate the payment process and make it more-user friendly."/>
     <!-- Libs CSS -->
     <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
     <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
@@ -49,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -120,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -173,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -558,7 +624,9 @@
                     <div class="alert alert-info">This module is available in <code>tabler-payments</code>
                       plugin.
                     </div>
+                    <p>The Tabler payments plug-in will let you use a set of payment provider icons to facilitate the payment process and make it more-user friendly.</p>
                     <h2 id="payment">Payment</h2>
+                    <p>To create a payment provider icon, add the <code class="highlighter-rouge">payment</code> class to a component and specify the payment provider. The full list of payment providers can be found below.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <span class="payment payment-provider-shopify mr-3"></span>
@@ -574,7 +642,7 @@
                       </figure>
                     </div>
                     <h2 id="payment-sizes">Payment sizes</h2>
-                    <p>Using Bootstrap’s typical naming structure, you can create a standard payment, or scale it up to different sizes based on what’s needed.</p>
+                    <p>Using Bootstrap’s typical naming structure, you can create a standard payment, or scale it up or down to different sizes based on what’s needed.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <span class="payment payment-xl payment-provider-shopify mr-3"></span>
@@ -592,6 +660,7 @@
                       </figure>
                     </div>
                     <h2 id="types">Types</h2>
+                    <p>Select an icon from the list of payment providers. Each icon comes in two color variants - light and dark, so you can choose the one that goes well with your design.</p>
                     <table class="table-vcenter">
                       <tr>
                         <td>2checkout</td>
@@ -1092,185 +1161,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/progress.html b/demo/docs/progress.html
index 649d47aac..0b36f75f7 100644
--- a/demo/docs/progress.html
+++ b/demo/docs/progress.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -12,7 +12,7 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Progress - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <title>Progress bars - Documentation - 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"/>
@@ -24,7 +24,7 @@
     <meta name="robots" content="noindex,nofollow,noarchive"/>
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <meta name="description" content="A progress bar can be used to show a user how far along he is in a process."/>
+    <meta name="description" content="Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users&#39; expectations and preventing them from abandoning a process they have initiated."/>
     <!-- Libs CSS -->
     <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
     <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
@@ -50,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -121,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -174,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -228,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -403,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -557,17 +622,22 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div class="d-flex">
-                      <h2 class="h1 mt-0 mb-3">Progress</h2>
+                      <h2 class="h1 mt-0 mb-3">Progress bars</h2>
                       <p class="ml-auto">
                         <a href="https://getbootstrap.com/docs/4.4/components/progress" target="_blank">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+                            <line x1="10" y1="14" x2="20" y2="4" />
+                            <polyline points="15 4 20 4 20 9" />
+                          </svg>
                           Bootstrap documentation
                         </a>
                       </p>
                     </div>
-                    <p>A progress bar can be used to show a user how far along he is in a process.</p>
+                    <p>Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users' expectations and preventing them from abandoning a process they have initiated.</p>
                     <h2 id="default-markup">Default markup</h2>
-                    <p>To create a default progress bar, add a <code class="highlighter-rouge">.progress</code> class to a <code class="highlighter-rouge">&lt;div&gt;</code> element:</p>
+                    <p>To create a default progress bar, add a <code class="highlighter-rouge">.progress</code> class to a <code class="highlighter-rouge">&lt;div&gt;</code> element. Thanks to that, you will be able to notify users how long they have to wait for a process to complete.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="progress">
@@ -587,7 +657,7 @@
                       </figure>
                     </div>
                     <h2 id="progress-size">Progress size</h2>
-                    <p>Using Bootstrap’s typical naming structure, you can create a standard progress, or scale it up to different sizes based on what’s needed.</p>
+                    <p>Using Bootstrap’s typical naming structure, you can create a standard progress bar or scale it up or down to different sizes based on what’s needed.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="progress progress-sm">
@@ -607,7 +677,7 @@
                       </figure>
                     </div>
                     <h2 id="progress-without-value">Progress without value</h2>
-                    <p>Remove the showed value by adding a class called <code class="highlighter-rouge">.sr-only</code>.</p>
+                    <p>Remove the displayed value by adding the <code class="highlighter-rouge">.sr-only</code> class.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="progress">
@@ -627,7 +697,7 @@
                       </figure>
                     </div>
                     <h2 id="indeterminate-progress">Indeterminate progress</h2>
-                    <p>To create indeterminate progress add <code class="highlighter-rouge">.progress-bar-indeterminate</code> to the <code class="highlighter-rouge">.progress-bar</code> element.</p>
+                    <p>You can create a progress bar which shows indeterminate progress by adding <code class="highlighter-rouge">.progress-bar-indeterminate</code> to the <code class="highlighter-rouge">.progress-bar</code> element.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="progress progress-sm">
@@ -655,7 +725,7 @@
                       </figure>
                     </div>
                     <h2 id="progress-color">Progress color</h2>
-                    <p>Customize the color of the progress bar. You can click <a href="./colors.html">here</a> to see the list of available colors.</p>
+                    <p>Customize the color of the progress bar to suit your design. Click <a href="./colors.html">here</a> to see the list of available colors.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="progress progress-sm mb-2">
@@ -730,185 +800,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/range-slider.html b/demo/docs/range-slider.html
index 58f3cc03c..9b733f006 100644
--- a/demo/docs/range-slider.html
+++ b/demo/docs/range-slider.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -789,185 +854,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/ribbons.html b/demo/docs/ribbons.html
index dff6ec01f..639bc2583 100644
--- a/demo/docs/ribbons.html
+++ b/demo/docs/ribbons.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -24,6 +24,7 @@
     <meta name="robots" content="noindex,nofollow,noarchive"/>
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <meta name="description" content="Ribbons are graphical elements which attract users&#39; attention to a given element of an interface and make it stand out."/>
     <!-- Libs CSS -->
     <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
     <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
@@ -49,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -120,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -173,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -557,13 +623,18 @@
                     <div class="d-flex">
                       <h2 class="h1 mt-0 mb-3">Ribbons</h2>
                     </div>
+                    <p>Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out.</p>
                     <h2 id="default-markup">Default markup</h2>
+                    <p>Use the <code class="highlighter-rouge">ribbon</code> class to add the default ribbon to any section of your interface.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="card">
                           <div class="card-body h-8">
                           </div>
-                          <div class="ribbon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                          <div class="ribbon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z" />
+                              <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                            </svg>
                           </div>
                         </div>
                       </div>
@@ -579,20 +650,23 @@
                       </figure>
                     </div>
                     <h2 id="ribbon-position">Ribbon position</h2>
-                    <p>You can easily change the position of a ribbon by adding a class to the element.</p>
+                    <p>You can change the position of a ribbon by adding one of the following classes to the element:</p>
                     <ul>
                       <li><code class="highlighter-rouge">ribbon-top</code> - moves it to the top</li>
                       <li><code class="highlighter-rouge">ribbon-right</code> - moves it to the right</li>
                       <li><code class="highlighter-rouge">ribbon-bottom</code> - moves it to the bottom</li>
                       <li><code class="highlighter-rouge">ribbon-left</code> - moves it to the lefg</li>
                     </ul>
-                    <p>You can also use multiple classes at once for example: <code class="highlighter-rouge">.ribbon.ribbon-top.ribbon-left</code> moves the ribbon to the top left corner.</p>
+                    <p>Using multiple classes at once will give you more position options. For example, the following class: <code class="highlighter-rouge">.ribbon.ribbon-top.ribbon-left</code> will move the ribbon to the top left corner.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="card">
                           <div class="card-body h-8">
                           </div>
-                          <div class="ribbon ribbon-top ribbon-left"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                          <div class="ribbon ribbon-top ribbon-left"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z" />
+                              <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                            </svg>
                           </div>
                         </div>
                       </div>
@@ -614,7 +688,10 @@
                         <div class="card">
                           <div class="card-body h-8">
                           </div>
-                          <div class="ribbon bg-red"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                          <div class="ribbon bg-red"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z" />
+                              <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                            </svg>
                           </div>
                         </div>
                       </div>
@@ -630,13 +707,16 @@
                       </figure>
                     </div>
                     <h2 id="ribbon-text">Ribbon text</h2>
-                    <p>Set your own text in a ribbon.</p>
+                    <p>Add your own text to a ribbon to display any additional information and make it easy to spot for users.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="card">
                           <div class="card-body h-8">
                           </div>
-                          <div class="ribbon bg-green"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                          <div class="ribbon bg-green"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z" />
+                              <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                            </svg>
                           </div>
                         </div>
                       </div>
@@ -652,13 +732,16 @@
                       </figure>
                     </div>
                     <h2 id="ribbon-style">Ribbon style</h2>
-                    <p>Change the style of a ribbon.</p>
+                    <p>Change the style of a ribbon to make it go well with your interface design.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="card">
                           <div class="card-body h-8">
                           </div>
-                          <div class="ribbon ribbon-bookmark bg-orange"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                          <div class="ribbon ribbon-bookmark bg-orange"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z" />
+                              <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                            </svg>
                           </div>
                         </div>
                       </div>
@@ -699,185 +782,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/spinners.html b/demo/docs/spinners.html
index 4dd2b94a3..abe25e285 100644
--- a/demo/docs/spinners.html
+++ b/demo/docs/spinners.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -50,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -121,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -174,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -228,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -403,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -559,13 +624,17 @@
                       <h2 class="h1 mt-0 mb-3">Spinners</h2>
                       <p class="ml-auto">
                         <a href="https://getbootstrap.com/docs/4.4/components/spinners/" target="_blank">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+                            <line x1="10" y1="14" x2="20" y2="4" />
+                            <polyline points="15 4 20 4 20 9" />
+                          </svg>
                           Bootstrap documentation
                         </a>
                       </p>
                     </div>
                     <p>Spinners are used to show the loading state of a component or page. They provide feedback for an action a user has taken, when it takes a bit longer to complete.</p>
-                    <p>loading state of a component</p>
                     <h2 id="default-markup">Default markup</h2>
                     <p>Use the default spinner to notify users that an action they have taken is in progress, helping them avoid confusion.</p>
                     <div class="example no_toc_section">
@@ -751,185 +820,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/steps.html b/demo/docs/steps.html
index 79e1e3cc7..c61241f41 100644
--- a/demo/docs/steps.html
+++ b/demo/docs/steps.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -50,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -121,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -174,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -228,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -403,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -545,7 +610,7 @@
                 <ul class="list-unstyled">
                   <li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
                   <li class="toc-entry toc-h2"><a href="#tooltips">Tooltips</a></li>
-                  <li class="toc-entry toc-h2"><a href="#colour">Colour</a></li>
+                  <li class="toc-entry toc-h2"><a href="#color">Color</a></li>
                   <li class="toc-entry toc-h2"><a href="#steps-without-title">Steps without title</a></li>
                   <li class="toc-entry toc-h2"><a href="#steps-with-numbers">Steps with numbers</a></li>
                 </ul>
@@ -599,7 +664,7 @@
                       </figure>
                     </div>
                     <h2 id="tooltips">Tooltips</h2>
-                    <p>Add tooltips, if you want to provide users with additional information about the steps they are expected to complete. Tooltips will display when a user hovers over a given step and help clarify what might not be clear from the interface.</p>
+                    <p>Add tooltips, if you want to provide users with additional information about the steps they are expected to complete. Tooltips are displayed when a user hovers over a given step and help clarify what might not be clear from the interface.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="steps">
@@ -636,8 +701,8 @@
 <span class="nt">&lt;/div&gt;</span></code></pre>
                       </figure>
                     </div>
-                    <h2 id="colour">Colour</h2>
-                    <p>You can customise the default progress indicator by changing the colour to one that better suits your design. Click <a href="./colors.html">here</a> to see the range of available colours.</p>
+                    <h2 id="color">Color</h2>
+                    <p>You can customize the default progress indicator by changing the color to one that better suits your design. Click <a href="./colors.html">here</a> to see the range of available colors.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="steps steps-green">
@@ -725,7 +790,7 @@
                       </figure>
                     </div>
                     <h2 id="steps-with-numbers">Steps with numbers</h2>
-                    <p>Use the <code class="highlighter-rouge">steps-counter</code> class to create a progress tracker with numbers instead of titles and change the colour to customise it.</p>
+                    <p>Use the <code class="highlighter-rouge">steps-counter</code> class to create a progress tracker with numbers instead of titles and change the color to customize it.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="steps steps-counter steps-lime">
@@ -774,185 +839,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/tables.html b/demo/docs/tables.html
index 36f48b91d..b9c476982 100644
--- a/demo/docs/tables.html
+++ b/demo/docs/tables.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -24,6 +24,7 @@
     <meta name="robots" content="noindex,nofollow,noarchive"/>
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <meta name="description" content="Tables are a useful interface element that allows to visualise data and arrange it in a clear way. Thanks to that, users can browse a lot of information at once and a good table design will help you take care of its clarity."/>
     <!-- Libs CSS -->
     <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
     <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
@@ -49,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -120,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -173,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -556,13 +622,19 @@
                       <h2 class="h1 mt-0 mb-3">Tables</h2>
                       <p class="ml-auto">
                         <a href="https://getbootstrap.com/docs/4.4/content/tables/" target="_blank">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+                            <line x1="10" y1="14" x2="20" y2="4" />
+                            <polyline points="15 4 20 4 20 9" />
+                          </svg>
                           Bootstrap documentation
                         </a>
                       </p>
                     </div>
+                    <p>Tables are a useful interface element that allows to visualise data and arrange it in a clear way. Thanks to that, users can browse a lot of information at once and a good table design will help you take care of its clarity.</p>
                     <h2 id="basic-table">Basic Table</h2>
-                    <p>A basic Bootstrap table has a light padding and only horizontal dividers.</p>
+                    <p>The basic table design has light padding and the presented data is separated wih horizontal dividers. It helps provide users with all the necessary information, without overwheling them with visuals.</p>
                     <p>The <code class="highlighter-rouge">.table</code> class adds basic styling to a table:</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
@@ -733,7 +805,7 @@
                       </figure>
                     </div>
                     <h2 id="responsive-tables">Responsive tables</h2>
-                    <p>Across each breakpoint, use <code class="highlighter-rouge">.table-responsive</code> class for horizontal scrolling tables. Use <code class="highlighter-rouge">.table-responsive{-sm|-md|-lg|-xl}</code> as needed to create responsive tables up to a specific breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.</p>
+                    <p>Use the <code class="highlighter-rouge">.table-responsive</code> class across each breakpoint for horizontal scrolling tables. If you want to create responsive tables up to a specific breakpoint, use <code class="highlighter-rouge">.table-responsive{-sm|-md|-lg|-xl}</code>. From that breakpoint and up, the table will behave normally, rather than scroll horizontally.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <table class="table table-responsive">
@@ -833,7 +905,7 @@
                       </figure>
                     </div>
                     <h2 id="no-wrap">No wrap</h2>
-                    <p>Prevents table cell content from wrapping to another line.</p>
+                    <p>If you don’t want the table cell content to wrap to another line, use the <code class="highlighter-rouge">table-nowrap</code> class.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="table-responsive">
@@ -1040,185 +1112,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/tabs.html b/demo/docs/tabs.html
index 2c815b7c6..d51407b2e 100644
--- a/demo/docs/tabs.html
+++ b/demo/docs/tabs.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -24,7 +24,7 @@
     <meta name="robots" content="noindex,nofollow,noarchive"/>
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <meta name="description" content="Tabs allow users to alternate between equally important views within the same context. By dividing content into meaningful sections, they improve its organisation and make it easy for users to navigate."/>
+    <meta name="description" content="Tabs allow users to alternate between equally important views within the same context. By dividing content into meaningful sections, they improve its organization and make it easy for users to navigate."/>
     <!-- Libs CSS -->
     <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
     <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
@@ -50,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -121,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -174,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -228,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -403,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -560,12 +625,17 @@
                       <h2 class="h1 mt-0 mb-3">Tabs</h2>
                       <p class="ml-auto">
                         <a href="https://getbootstrap.com/docs/4.4/components/navs/" target="_blank">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+                            <line x1="10" y1="14" x2="20" y2="4" />
+                            <polyline points="15 4 20 4 20 9" />
+                          </svg>
                           Bootstrap documentation
                         </a>
                       </p>
                     </div>
-                    <p>Tabs allow users to alternate between equally important views within the same context. By dividing content into meaningful sections, they improve its organisation and make it easy for users to navigate.</p>
+                    <p>Tabs allow users to alternate between equally important views within the same context. By dividing content into meaningful sections, they improve its organization and make it easy for users to navigate.</p>
                     <h2 id="default-markup">Default markup</h2>
                     <p>Use tabs to let users access different sections within one context quickly and with ease. In the default design, the current tab is highlighted, which makes the interface clear and user-friendly.</p>
                     <div class="example no_toc_section example-bg">
@@ -626,15 +696,28 @@
                           <div class="card">
                             <ul class="nav nav-tabs" data-toggle="tabs">
                               <li class="nav-item">
-                                <a href="#tabs-home-ex2" class="nav-link active" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                                <a href="#tabs-home-ex2" class="nav-link active" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon mr-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" />
+                                    <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>
                                   Home</a>
                               </li>
                               <li class="nav-item">
-                                <a href="#tabs-profile-ex2" class="nav-link" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                                <a href="#tabs-profile-ex2" class="nav-link" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon mr-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" />
+                                    <circle cx="12" cy="7" r="4" />
+                                    <path d="M5.5 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2" />
+                                  </svg>
                                   Profile</a>
                               </li>
                               <li class="nav-item ml-auto">
-                                <a href="#tabs-settings-ex2" class="nav-link" title="Settings" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                                <a href="#tabs-settings-ex2" class="nav-link" title="Settings" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" />
+                                    <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.37.996.608 2.296.07 2.572-1.065z" />
+                                    <circle cx="12" cy="12" r="3" />
+                                  </svg>
                                 </a>
                               </li>
                             </ul>
@@ -696,15 +779,28 @@
                           <div class="card">
                             <ul class="nav nav-tabs" data-toggle="tabs">
                               <li class="nav-item">
-                                <a href="#tabs-home-ex3" class="nav-link active" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon "><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                                <a href="#tabs-home-ex3" class="nav-link active" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon " width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" />
+                                    <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>
                                 </a>
                               </li>
                               <li class="nav-item">
-                                <a href="#tabs-profile-ex3" class="nav-link" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon "><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                                <a href="#tabs-profile-ex3" class="nav-link" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon " width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" />
+                                    <circle cx="12" cy="7" r="4" />
+                                    <path d="M5.5 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2" />
+                                  </svg>
                                 </a>
                               </li>
                               <li class="nav-item ml-auto">
-                                <a href="#tabs-settings-ex3" class="nav-link" title="Settings" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                                <a href="#tabs-settings-ex3" class="nav-link" title="Settings" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" />
+                                    <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.37.996.608 2.296.07 2.572-1.065z" />
+                                    <circle cx="12" cy="12" r="3" />
+                                  </svg>
                                 </a>
                               </li>
                             </ul>
@@ -840,15 +936,27 @@
                           <div class="card">
                             <ul class="nav nav-tabs nav-fill" data-toggle="tabs">
                               <li class="nav-item">
-                                <a href="#tabs-home-ex5" class="nav-link active" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon "><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                                <a href="#tabs-home-ex5" class="nav-link active" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon " width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" />
+                                    <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>
                                 </a>
                               </li>
                               <li class="nav-item">
-                                <a href="#tabs-profile-ex5" class="nav-link" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon "><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                                <a href="#tabs-profile-ex5" class="nav-link" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon " width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" />
+                                    <circle cx="12" cy="7" r="4" />
+                                    <path d="M5.5 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2" />
+                                  </svg>
                                 </a>
                               </li>
                               <li class="nav-item">
-                                <a href="#tabs-activity-ex5" class="nav-link" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon "><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
+                                <a href="#tabs-activity-ex5" class="nav-link" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon " width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" />
+                                    <polyline points="21 12 17 12 14 20 10 4 7 12 3 12" />
+                                  </svg>
                                 </a>
                               </li>
                             </ul>
@@ -910,15 +1018,28 @@
                           <div class="card">
                             <ul class="nav nav-tabs nav-tabs-alt" data-toggle="tabs">
                               <li class="nav-item">
-                                <a href="#tabs-home-ex6" class="nav-link active" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                                <a href="#tabs-home-ex6" class="nav-link active" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon mr-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" />
+                                    <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>
                                   Home</a>
                               </li>
                               <li class="nav-item">
-                                <a href="#tabs-profile-ex6" class="nav-link" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                                <a href="#tabs-profile-ex6" class="nav-link" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon mr-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" />
+                                    <circle cx="12" cy="7" r="4" />
+                                    <path d="M5.5 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2" />
+                                  </svg>
                                   Profile</a>
                               </li>
                               <li class="nav-item ml-auto">
-                                <a href="#tabs-settings-ex6" class="nav-link" title="Settings" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                                <a href="#tabs-settings-ex6" class="nav-link" title="Settings" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" />
+                                    <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.37.996.608 2.296.07 2.572-1.065z" />
+                                    <circle cx="12" cy="12" r="3" />
+                                  </svg>
                                 </a>
                               </li>
                             </ul>
@@ -998,185 +1119,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/timelines.html b/demo/docs/timelines.html
index df3949180..c2fd38cc6 100644
--- a/demo/docs/timelines.html
+++ b/demo/docs/timelines.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -24,6 +24,7 @@
     <meta name="robots" content="noindex,nofollow,noarchive"/>
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <meta name="description" content="A timeline is a perfect way to visualize processes and projects, as it&#39;s easy to read and attractive for users. You can use it to give an overview of events, present an agenda or point out important points in time."/>
     <!-- Libs CSS -->
     <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
     <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
@@ -49,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -120,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -173,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -543,7 +609,7 @@
                 <h5 class="subheader">On this page</h5>
                 <ul class="list-unstyled">
                   <li class="toc-entry toc-h2"><a href="#timeline">Timeline</a></li>
-                  <li class="toc-entry toc-h2"><a href="#simple-timeline">Simple Timeline</a></li>
+                  <li class="toc-entry toc-h2"><a href="#simple-timeline">Simple timeline</a></li>
                 </ul>
               </div>
             </div>
@@ -554,7 +620,9 @@
                     <div class="d-flex">
                       <h2 class="h1 mt-0 mb-3">Timelines</h2>
                     </div>
+                    <p>A timeline is a perfect way to visualize processes and projects, as it's easy to read and attractive for users. You can use it to give an overview of events, present an agenda or point out important points in time.</p>
                     <h2 id="timeline">Timeline</h2>
+                    <p>The available timeline design is comprised of many components that will help you visualize a process or show an outline of events. Thanks to the possibility of adding icons, avatars and links and the way of presenting the elements of content, your timeline will be clear for users and will make yor website or app more attractive.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="card">
@@ -564,7 +632,9 @@
                           <div class="card-body">
                             <ul class="list list-timeline">
                               <li>
-                                <div class="list-timeline-icon bg-twitter"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
+                                <div class="list-timeline-icon bg-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>
                                 </div>
                                 <div class="list-timeline-content">
                                   <div class="list-timeline-time">10 hrs ago</div>
@@ -573,7 +643,13 @@
                                 </div>
                               </li>
                               <li>
-                                <div class="list-timeline-icon bg-red"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>
+                                <div class="list-timeline-icon bg-red"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" />
+                                    <rect x="3" y="7" width="18" height="13" rx="2" />
+                                    <path d="M8 7v-2a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v2" />
+                                    <line x1="12" y1="12" x2="12" y2="12.01" />
+                                    <path d="M3 13a20 20 0 0 0 18 0" />
+                                  </svg>
                                 </div>
                                 <div class="list-timeline-content">
                                   <div class="list-timeline-time">2 hrs ago</div>
@@ -582,7 +658,10 @@
                                 </div>
                               </li>
                               <li>
-                                <div class="list-timeline-icon bg-success"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                                <div class="list-timeline-icon bg-success"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" />
+                                    <polyline points="20 7 10 17 5 12" />
+                                  </svg>
                                 </div>
                                 <div class="list-timeline-content">
                                   <div class="list-timeline-time">1 day ago</div>
@@ -591,7 +670,9 @@
                                 </div>
                               </li>
                               <li>
-                                <div class="list-timeline-icon bg-facebook"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
+                                <div class="list-timeline-icon bg-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>
                                 </div>
                                 <div class="list-timeline-content">
                                   <div class="list-timeline-time">1 day ago</div>
@@ -600,7 +681,13 @@
                                 </div>
                               </li>
                               <li>
-                                <div class="list-timeline-icon bg-teal"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="23" y1="11" x2="17" y2="11"></line></svg>
+                                <div class="list-timeline-icon bg-teal"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" />
+                                    <circle cx="8.5" cy="7" r="4" />
+                                    <path d="M2 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2" />
+                                    <line x1="16" y1="11" x2="22" y2="11" />
+                                    <line x1="19" y1="8" x2="19" y2="14" />
+                                  </svg>
                                 </div>
                                 <div class="list-timeline-content">
                                   <div class="list-timeline-time">2 days ago</div>
@@ -616,7 +703,13 @@
                                 </div>
                               </li>
                               <li>
-                                <div class="list-timeline-icon bg-yellow"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                                <div class="list-timeline-icon bg-yellow"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" />
+                                    <line x1="15" y1="8" x2="15.01" y2="8" />
+                                    <rect x="4" y="4" width="16" height="16" rx="3" />
+                                    <path d="M4 15l4 -4a3 5 0 0 1 3 0l 5 5" />
+                                    <path d="M14 14l1 -1a3 5 0 0 1 3 0l 2 2" />
+                                  </svg>
                                 </div>
                                 <div class="list-timeline-content">
                                   <div class="list-timeline-time">3 days ago</div>
@@ -640,7 +733,11 @@
                                 </div>
                               </li>
                               <li>
-                                <div class="list-timeline-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                                <div class="list-timeline-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" />
+                                    <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.37.996.608 2.296.07 2.572-1.065z" />
+                                    <circle cx="12" cy="12" r="3" />
+                                  </svg>
                                 </div>
                                 <div class="list-timeline-content">
                                   <div class="list-timeline-time">2 weeks ago</div>
@@ -751,7 +848,8 @@
 <span class="nt">&lt;/div&gt;</span></code></pre>
                       </figure>
                     </div>
-                    <h2 id="simple-timeline">Simple Timeline</h2>
+                    <h2 id="simple-timeline">Simple timeline</h2>
+                    <p>Use a simplified version of the timeline, if it suits your design better. You can still make use of all the available timeline components.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="card">
@@ -761,7 +859,9 @@
                           <div class="card-body">
                             <ul class="list list-timeline list-timeline-simple">
                               <li>
-                                <div class="list-timeline-icon bg-twitter"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
+                                <div class="list-timeline-icon bg-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>
                                 </div>
                                 <div class="list-timeline-content">
                                   <div class="list-timeline-time">10 hrs ago</div>
@@ -770,7 +870,13 @@
                                 </div>
                               </li>
                               <li>
-                                <div class="list-timeline-icon bg-red"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>
+                                <div class="list-timeline-icon bg-red"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" />
+                                    <rect x="3" y="7" width="18" height="13" rx="2" />
+                                    <path d="M8 7v-2a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v2" />
+                                    <line x1="12" y1="12" x2="12" y2="12.01" />
+                                    <path d="M3 13a20 20 0 0 0 18 0" />
+                                  </svg>
                                 </div>
                                 <div class="list-timeline-content">
                                   <div class="list-timeline-time">2 hrs ago</div>
@@ -779,7 +885,10 @@
                                 </div>
                               </li>
                               <li>
-                                <div class="list-timeline-icon bg-success"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                                <div class="list-timeline-icon bg-success"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" />
+                                    <polyline points="20 7 10 17 5 12" />
+                                  </svg>
                                 </div>
                                 <div class="list-timeline-content">
                                   <div class="list-timeline-time">1 day ago</div>
@@ -788,7 +897,9 @@
                                 </div>
                               </li>
                               <li>
-                                <div class="list-timeline-icon bg-facebook"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
+                                <div class="list-timeline-icon bg-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>
                                 </div>
                                 <div class="list-timeline-content">
                                   <div class="list-timeline-time">1 day ago</div>
@@ -797,7 +908,13 @@
                                 </div>
                               </li>
                               <li>
-                                <div class="list-timeline-icon bg-teal"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="23" y1="11" x2="17" y2="11"></line></svg>
+                                <div class="list-timeline-icon bg-teal"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" />
+                                    <circle cx="8.5" cy="7" r="4" />
+                                    <path d="M2 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2" />
+                                    <line x1="16" y1="11" x2="22" y2="11" />
+                                    <line x1="19" y1="8" x2="19" y2="14" />
+                                  </svg>
                                 </div>
                                 <div class="list-timeline-content">
                                   <div class="list-timeline-time">2 days ago</div>
@@ -813,7 +930,13 @@
                                 </div>
                               </li>
                               <li>
-                                <div class="list-timeline-icon bg-yellow"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                                <div class="list-timeline-icon bg-yellow"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" />
+                                    <line x1="15" y1="8" x2="15.01" y2="8" />
+                                    <rect x="4" y="4" width="16" height="16" rx="3" />
+                                    <path d="M4 15l4 -4a3 5 0 0 1 3 0l 5 5" />
+                                    <path d="M14 14l1 -1a3 5 0 0 1 3 0l 2 2" />
+                                  </svg>
                                 </div>
                                 <div class="list-timeline-content">
                                   <div class="list-timeline-time">3 days ago</div>
@@ -837,7 +960,11 @@
                                 </div>
                               </li>
                               <li>
-                                <div class="list-timeline-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                                <div class="list-timeline-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" />
+                                    <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.37.996.608 2.296.07 2.572-1.065z" />
+                                    <circle cx="12" cy="12" r="3" />
+                                  </svg>
                                 </div>
                                 <div class="list-timeline-content">
                                   <div class="list-timeline-time">2 weeks ago</div>
@@ -974,185 +1101,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/toasts.html b/demo/docs/toasts.html
index f925b0193..135e19669 100644
--- a/demo/docs/toasts.html
+++ b/demo/docs/toasts.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -50,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -121,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -174,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -228,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -403,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -557,7 +622,12 @@
                       <h2 class="h1 mt-0 mb-3">Toasts</h2>
                       <p class="ml-auto">
                         <a href="https://getbootstrap.com/docs/4.4/components/toasts/" target="_blank">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+                            <line x1="10" y1="14" x2="20" y2="4" />
+                            <polyline points="15 4 20 4 20 9" />
+                          </svg>
                           Bootstrap documentation
                         </a>
                       </p>
@@ -723,185 +793,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/tooltips.html b/demo/docs/tooltips.html
index a7b460abf..87d72cdc4 100644
--- a/demo/docs/tooltips.html
+++ b/demo/docs/tooltips.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -50,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -121,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -174,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -228,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -403,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -556,7 +621,12 @@
                       <h2 class="h1 mt-0 mb-3">Tooltips</h2>
                       <p class="ml-auto">
                         <a href="https://getbootstrap.com/docs/4.4/components/tooltips/" target="_blank">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+                            <line x1="10" y1="14" x2="20" y2="4" />
+                            <polyline points="15 4 20 4 20 9" />
+                          </svg>
                           Bootstrap documentation
                         </a>
                       </p>
@@ -638,185 +708,11 @@ Tooltip with HTML
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/docs/typography.html b/demo/docs/typography.html
index c877aff31..2e52abcc9 100644
--- a/demo/docs/typography.html
+++ b/demo/docs/typography.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -24,7 +24,7 @@
     <meta name="robots" content="noindex,nofollow,noarchive"/>
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <meta name="description" content="Documentation and examples for common text utilities to control alignment, wrapping, weight, and more."/>
+    <meta name="description" content="Typography plays an important role in creating an attractive and clear interface design. Good typography will make the content easy to follow and improve the usability of your website."/>
     <!-- Libs CSS -->
     <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
     <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
@@ -50,37 +50,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="../empty.html" >
                       Empty page
@@ -121,6 +188,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="../navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="../charts.html" >
                       Charts
@@ -174,13 +246,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -228,14 +317,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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 active 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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -403,125 +567,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="../static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -551,7 +616,7 @@
                   <li class="toc-entry toc-h2"><a href="#optimized-for-different-alphabets">Optimized for different alphabets</a></li>
                   <li class="toc-entry toc-h2"><a href="#text-transform">Text transform</a></li>
                   <li class="toc-entry toc-h2"><a href="#letter-spacing">Letter spacing</a></li>
-                  <li class="toc-entry toc-h2"><a href="#line-height">Line Height</a></li>
+                  <li class="toc-entry toc-h2"><a href="#line-height">Line height</a></li>
                   <li class="toc-entry toc-h2"><a href="#antialiasing">Antialiasing</a></li>
                   <li class="toc-entry toc-h2"><a href="#markdown-elements">Markdown elements</a></li>
                 </ul>
@@ -565,13 +630,19 @@
                       <h2 class="h1 mt-0 mb-3">Typography</h2>
                       <p class="ml-auto">
                         <a href="https://getbootstrap.com/docs/4.4/content/typography/" target="_blank">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon pr-1 text-blue"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+                            <line x1="10" y1="14" x2="20" y2="4" />
+                            <polyline points="15 4 20 4 20 9" />
+                          </svg>
                           Bootstrap documentation
                         </a>
                       </p>
                     </div>
-                    <p>Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.</p>
+                    <p>Typography plays an important role in creating an attractive and clear interface design. Good typography will make the content easy to follow and improve the usability of your website.</p>
                     <h2 id="headings">Headings</h2>
+                    <p>Use HTML headings to organize content on your website and make the structure clear and user-friendly.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <h1>H1 Heading</h1>
@@ -593,6 +664,7 @@
                       </figure>
                     </div>
                     <h2 id="paragraphs">Paragraphs</h2>
+                    <p>Organize longer pieces of text into paragraphs using the <code class="highlighter-rouge">p</code> tag.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
@@ -606,6 +678,7 @@
                       </figure>
                     </div>
                     <h2 id="semantic-text-elements">Semantic text elements</h2>
+                    <p>Use a variety of semantic text elements, depending of how you want to display particular fragments of content.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <abbr title="Internationalization">I18N</abbr> <code class="ml-2">abbr</code><br />
@@ -649,6 +722,7 @@ Text <span class="nt">&lt;sup&gt;</span>Superscripted<span class="nt">&lt;/sup&g
                       </figure>
                     </div>
                     <h2 id="horizontal-rules">Horizontal rules</h2>
+                    <p>Use the <code class="highlighter-rouge">hr</code> tag to represent a thematic break between paragraphs within one section.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <hr />
@@ -660,6 +734,7 @@ Text <span class="nt">&lt;sup&gt;</span>Superscripted<span class="nt">&lt;/sup&g
                       </figure>
                     </div>
                     <h2 id="horizontal-rules-with-label">Horizontal rules with label</h2>
+                    <p>You can also add a label to a horizontal rule and align it as you see fit.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <p>
@@ -711,7 +786,7 @@ Text <span class="nt">&lt;sup&gt;</span>Superscripted<span class="nt">&lt;/sup&g
                       </figure>
                     </div>
                     <h2 id="optimized-for-different-alphabets">Optimized for different alphabets</h2>
-                    <p>Tabler has been optimized to correctly display content in any language. The Tabler supports most Asian, African and Middle Eastern languages.</p>
+                    <p>Tabler has been optimized to correctly display content in any language. It supports most Asian, African and Middle Eastern languages.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <h5>Chinese</h5>
@@ -761,7 +836,7 @@ Text <span class="nt">&lt;sup&gt;</span>Superscripted<span class="nt">&lt;/sup&g
                       </figure>
                     </div>
                     <h2 id="text-transform">Text transform</h2>
-                    <p>Transform text in components with text capitalization classes.</p>
+                    <p>Transform the content of components with text capitalization classes.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <p class="text-lowercase">Lowercased text.</p>
@@ -777,7 +852,7 @@ Text <span class="nt">&lt;sup&gt;</span>Superscripted<span class="nt">&lt;/sup&g
                       </figure>
                     </div>
                     <h2 id="letter-spacing">Letter spacing</h2>
-                    <p>Utilities for controlling the tracking (letter spacing) of an element.</p>
+                    <p>Control the tracking (letter spacing) of an element and make it tight, wide or normal.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <p class="tracking-tight">Lorem ipsum dolor sit amet. Tight letter spacing.</p>
@@ -792,8 +867,8 @@ Text <span class="nt">&lt;sup&gt;</span>Superscripted<span class="nt">&lt;/sup&g
 <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"tracking-wide"</span><span class="nt">&gt;</span>Lorem ipsum dolor sit amet. Wide letter spacing.<span class="nt">&lt;/p&gt;</span></code></pre>
                       </figure>
                     </div>
-                    <h2 id="line-height">Line Height</h2>
-                    <p>Utilities for controlling the leading (line height) of an element.</p>
+                    <h2 id="line-height">Line height</h2>
+                    <p>Control the leading (line height) of an element.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <p class="lh-1">Lorem ipsum dolor sit amet.<br />
@@ -819,8 +894,8 @@ Text <span class="nt">&lt;sup&gt;</span>Superscripted<span class="nt">&lt;/sup&g
                       </figure>
                     </div>
                     <h2 id="antialiasing">Antialiasing</h2>
-                    <p>Utilities for controlling the font smoothing of an element.</p>
-                    <p>Use the <code class="highlighter-rouge">.antialiased</code> utility to render text using subpixel antialiasing or use the <code class="highlighter-rouge">.subpixel-antialiased</code> render without antialiasing.</p>
+                    <p>Control the font smoothing of an element.</p>
+                    <p>Use the <code class="highlighter-rouge">.antialiased</code> utility to render text using subpixel antialiasing or use the <code class="highlighter-rouge">.subpixel-antialiased</code> utility to remove antialiasing.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="antialiased">Text with antialiasing</div>
@@ -834,7 +909,7 @@ Text <span class="nt">&lt;sup&gt;</span>Superscripted<span class="nt">&lt;/sup&g
                       </figure>
                     </div>
                     <h2 id="markdown-elements">Markdown elements</h2>
-                    <p>When you can’t use the CSS classes you want, or when you just want to directly use HTML tags, use <code class="highlighter-rouge">.markdown</code> as container. It can handle almost any HTML tag.</p>
+                    <p>If you can’t use the CSS classes you want or if you just want to use HTML tags, use the <code class="highlighter-rouge">.markdown</code> class in a container. It can handle almost any HTML tag.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="markdown">
@@ -893,185 +968,11 @@ Text <span class="nt">&lt;sup&gt;</span>Superscripted<span class="nt">&lt;/sup&g
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/dropdowns.html b/demo/dropdowns.html
index d7e65abe4..bf026040b 100644
--- a/demo/dropdowns.html
+++ b/demo/dropdowns.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -535,9 +600,17 @@
             <div class="col-sm-6 col-lg-3">
               <div class="dropdown-menu dropdown-menu-demo">
                 <h6 class="dropdown-header">Dropdown header</h6>
-                <a href="#" class="dropdown-item"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
+                <a href="#" class="dropdown-item"><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"/>
+                    <polyline points="21 12 17 12 14 20 10 4 7 12 3 12" />
+                  </svg>
                   Item 1</a>
-                <a href="#" class="dropdown-item"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                <a href="#" class="dropdown-item"><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"/>
+                    <path d="M9 7 h-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>
                   Item 2</a>
                 <div class="dropdown-item">
                   <a href="#" class="text-reset">My profile</a>
@@ -562,7 +635,11 @@
                 <a href="#" class="dropdown-item"><span class="avatar avatar-sm rounded mr-2" style="background-image: url(./static/avatars/002m.jpg)"></span>
                   Mallory Hulme</a>
                 <div class="dropdown-divider"></div>
-                <a href="#" class="dropdown-item"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                <a href="#" class="dropdown-item"><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"/>
+                    <path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" />
+                    <path d="M7 12h14l-3 -3m0 6l3 -3" />
+                  </svg>
                   Logout</a>
               </div>
             </div>
@@ -615,11 +692,20 @@
               <div class="dropdown-menu dropdown-menu-demo">
                 <span class="dropdown-header">Dropdown header</span>
                 <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  <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"/>
+                    <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.37.996.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" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  <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"/>
+                    <path d="M9 7 h-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>
@@ -680,11 +766,20 @@
               </div>
               <div class="dropdown-menu dropdown-menu-demo">
                 <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  <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"/>
+                    <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.37.996.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" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  <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"/>
+                    <path d="M9 7 h-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>
@@ -728,11 +823,20 @@
               </div>
               <div class="dropdown-menu dropdown-menu-right dropdown-menu-demo dropdown-menu-arrow bg-dark text-white">
                 <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                  <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"/>
+                    <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.37.996.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" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                  <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"/>
+                    <path d="M9 7 h-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>
@@ -781,185 +885,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/email.html b/demo/email.html
index 598b733a4..f350c9297 100644
--- a/demo/email.html
+++ b/demo/email.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -537,31 +602,62 @@
               <div>
                 <div class="list-group list-group-transparent mb-0">
                   <a href="#" class="list-group-item list-group-item-action d-flex align-items-center active">
-                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg>
+                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <rect x="4" y="4" width="16" height="16" rx="2" />
+                        <path d="M4 13h3l3 3h4l3 -3h3" />
+                      </svg>
                     </span>Inbox <span class="ml-auto badge bg-blue">14</span>
                   </a>
                   <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
-                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <line x1="10" y1="14" x2="21" y2="3" />
+                        <path d="M21 3L14.5 21a.55 .55 0 0 1 -1 0L10 14L3 10.5a.55 .55 0 0 1 0 -1L21 3" />
+                      </svg>
                     </span>Sent Mail
                   </a>
                   <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
-                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
+                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <circle cx="12" cy="12" r="9" />
+                        <line x1="12" y1="8" x2="12" y2="12" />
+                        <line x1="12" y1="16" x2="12.01" y2="16" />
+                      </svg>
                     </span>Important <span class="ml-auto badge bg-gray">3</span>
                   </a>
                   <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
-                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                      </svg>
                     </span>Starred
                   </a>
                   <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
-                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
+                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <polyline points="14 3 14 8 19 8" />
+                        <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
+                      </svg>
                     </span>Drafts
                   </a>
                   <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
-                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7.01" y2="7"></line></svg>
+                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <path d="M11 3L20 12a1.5 1.5 0 0 1 0 2L14 20a1.5 1.5 0 0 1 -2 0L3 11v-4a4 4 0 0 1 4 -4h4" />
+                        <circle cx="9" cy="9" r="2" />
+                      </svg>
                     </span>Tags
                   </a>
                   <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
-                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
+                    <span class="icon mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <line x1="4" y1="7" x2="20" y2="7" />
+                        <line x1="10" y1="11" x2="10" y2="17" />
+                        <line x1="14" y1="11" x2="14" y2="17" />
+                        <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
+                        <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
+                      </svg>
                     </span>Trash
                   </a>
                 </div>
@@ -624,185 +720,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/empty.html b/demo/empty.html
index f7ed90c4e..c911f8796 100644
--- a/demo/empty.html
+++ b/demo/empty.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item active" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,37 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
+          <!-- Page title -->
+          <div class="page-header">
+            <div class="row align-items-center">
+              <div class="col-auto">
+                <h2 class="page-title">
+                  Empty page
+                </h2>
+              </div>
+            </div>
+          </div>
+          <!-- Content here -->
         </div>
         <footer class="footer footer-transparent">
           <div class="container">
@@ -542,185 +618,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/flags.html b/demo/flags.html
index c880ca228..c03b97a15 100644
--- a/demo/flags.html
+++ b/demo/flags.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -1809,185 +1874,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/forgot-password.html b/demo/forgot-password.html
index dadfb19c6..fcae7e86c 100644
--- a/demo/forgot-password.html
+++ b/demo/forgot-password.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
diff --git a/demo/form-elements.html b/demo/form-elements.html
index 34c91309d..d2f124c59 100644
--- a/demo/form-elements.html
+++ b/demo/form-elements.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -172,14 +244,31 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+              <li class="nav-item active">
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -556,14 +621,18 @@
                           </div>
                           <div class="mb-3">
                             <label class="form-label">Disabled</label>
-                            <input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
+                            <input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled..."
 	       value="Well, she turned me into a newt." disabled>
                           </div>
                           <div class="mb-3">
                             <label class="form-label">Readonly</label>
-                            <input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
+                            <input type="text" class="form-control" name="example-disabled-input" placeholder="Readonly..."
 	       value="Well, how'd you become king, then?" readonly>
                           </div>
+                          <div class="mb-3">
+                            <label class="form-label required">Required</label>
+                            <input type="text" class="form-control" name="example-required-input" placeholder="Required..." >
+                          </div>
                           <div class="mb-3">
                             <label class="form-label">Textarea <span class="form-label-description">56/100</span></label>
                             <textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
@@ -588,23 +657,19 @@
                             <label class="form-label">Input group</label>
                             <div class="input-group mb-2">
                               <input type="text" class="form-control" placeholder="Search for…">
-                              <span class="input-group-append">
-                                <button class="btn btn-secondary" type="button">Go!</button>
-                              </span>
+                              <button class="btn btn-secondary" type="button">Go!</button>
                             </div>
                             <div class="input-group">
-                              <div class="input-group-prepend">
-                                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                              <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                Action
+                              </button>
+                              <div class="dropdown-menu">
+                                <a class="dropdown-item" href="#">
                                   Action
-                                </button>
-                                <div class="dropdown-menu">
-                                  <a class="dropdown-item" href="#">
-                                    Action
-                                  </a>
-                                  <a class="dropdown-item" href="#">
-                                    Another action
-                                  </a>
-                                </div>
+                                </a>
+                                <a class="dropdown-item" href="#">
+                                  Another action
+                                </a>
                               </div>
                               <input type="text" class="form-control" aria-label="Text input with dropdown button">
                             </div>
@@ -613,17 +678,15 @@
                             <label class="form-label">Input group buttons</label>
                             <div class="input-group">
                               <input type="text" class="form-control">
-                              <div class="input-group-append">
-                                <button type="button" class="btn btn-secondary">Action</button>
-                                <button data-toggle="dropdown" type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"></button>
-                                <div class="dropdown-menu dropdown-menu-right">
-                                  <a class="dropdown-item" href="#">
-                                    Action
-                                  </a>
-                                  <a class="dropdown-item" href="#">
-                                    Another action
-                                  </a>
-                                </div>
+                              <button type="button" class="btn btn-secondary">Action</button>
+                              <button data-toggle="dropdown" type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"></button>
+                              <div class="dropdown-menu dropdown-menu-right">
+                                <a class="dropdown-item" href="#">
+                                  Action
+                                </a>
+                                <a class="dropdown-item" href="#">
+                                  Another action
+                                </a>
                               </div>
                             </div>
                           </div>
@@ -632,12 +695,20 @@
                             <div class="input-icon mb-3">
                               <input type="text" class="form-control" placeholder="Search…">
                               <span class="input-icon-addon">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                  <path stroke="none" d="M0 0h24v24H0z"/>
+                                  <circle cx="10" cy="10" r="7" />
+                                  <line x1="21" y1="21" x2="15" y2="15" />
+                                </svg>
                               </span>
                             </div>
                             <div class="input-icon mb-3">
                               <span class="input-icon-addon">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                  <path stroke="none" d="M0 0h24v24H0z"/>
+                                  <circle cx="12" cy="7" r="4" />
+                                  <path d="M5.5 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2" />
+                                </svg>
                               </span>
                               <input type="text" class="form-control" placeholder="Username">
                             </div>
@@ -665,7 +736,11 @@
                               </div>
                               <div class="col-auto">
                                 <a href="#" class="btn btn-secondary btn-icon" aria-label="Button">
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z"/>
+                                    <circle cx="10" cy="10" r="7" />
+                                    <line x1="21" y1="21" x2="15" y2="15" />
+                                  </svg>
                                 </a>
                               </div>
                             </div>
@@ -693,7 +768,11 @@
                           <div class="input-icon">
                             <input type="text" class="form-control form-control-rounded" placeholder="Search…">
                             <span class="input-icon-addon">
-                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z"/>
+                                <circle cx="10" cy="10" r="7" />
+                                <line x1="21" y1="21" x2="15" y2="15" />
+                              </svg>
                             </span>
                           </div>
                         </div>
@@ -704,62 +783,48 @@
                         <div class="mb-3">
                           <label class="form-label">Input group</label>
                           <div class="input-group mb-2">
-                            <div class="input-group-prepend">
-                              <span class="input-group-text">
-                                @
-                              </span>
-                            </div>
+                            <span class="input-group-text">
+                              @
+                            </span>
                             <input type="text" class="form-control"  placeholder="username" >
                           </div>
                           <div class="input-group mb-2">
                             <input type="text" class="form-control"  placeholder="subdomain" >
-                            <div class="input-group-append">
-                              <span class="input-group-text">
-                                .tabler.io
-                              </span>
-                            </div>
+                            <span class="input-group-text">
+                              .tabler.io
+                            </span>
                           </div>
                           <div class="input-group">
-                            <div class="input-group-prepend">
-                              <span class="input-group-text">
-                                https://
-                              </span>
-                            </div>
+                            <span class="input-group-text">
+                              https://
+                            </span>
                             <input type="text" class="form-control"  placeholder="subdomain" >
-                            <div class="input-group-append">
-                              <span class="input-group-text">
-                                .tabler.io
-                              </span>
-                            </div>
+                            <span class="input-group-text">
+                              .tabler.io
+                            </span>
                           </div>
                         </div>
                         <div class="mb-3">
                           <label class="form-label">Input with checkbox or radios</label>
                           <div class="input-group mb-2">
-                            <div class="input-group-prepend">
-                              <span class="input-group-text">
-                                <input class="form-check-input m-0" type="checkbox" checked>
-                              </span>
-                            </div>
+                            <span class="input-group-text">
+                              <input class="form-check-input m-0" type="checkbox" checked>
+                            </span>
                             <input type="text" class="form-control" >
                           </div>
                           <div class="input-group">
                             <input type="text" class="form-control" >
-                            <div class="input-group-append">
-                              <span class="input-group-text">
-                                <input class="form-check-input m-0" type="radio" checked>
-                              </span>
-                            </div>
+                            <span class="input-group-text">
+                              <input class="form-check-input m-0" type="radio" checked>
+                            </span>
                           </div>
                         </div>
                         <div class="mb-3">
                           <label class="form-label">Input with prepended text</label>
                           <div class="input-group input-group-flat">
-                            <div class="input-group-prepend">
-                              <span class="input-group-text">
-                                https://tabler.io/users/
-                              </span>
-                            </div>
+                            <span class="input-group-text">
+                              https://tabler.io/users/
+                            </span>
                             <input type="text" class="form-control pl-0"  value="yourfancyusername">
                           </div>
                         </div>
@@ -767,38 +832,51 @@
                           <label class="form-label">Input with appended text</label>
                           <div class="input-group input-group-flat">
                             <input type="text" class="form-control text-right pr-0"  value="yourfancydomain">
-                            <div class="input-group-append">
-                              <span class="input-group-text">
-                                .tabler.io
-                              </span>
-                            </div>
+                            <span class="input-group-text">
+                              .tabler.io
+                            </span>
                           </div>
                         </div>
                         <div class="mb-3">
                           <label class="form-label">Input with appended link</label>
                           <div class="input-group input-group-flat">
                             <input type="password" class="form-control"  value="ultrastrongpassword">
-                            <div class="input-group-append">
-                              <span class="input-group-text">
-                                <a href="#" class="input-group-link">Show password</a>
-                              </span>
-                            </div>
+                            <span class="input-group-text">
+                              <a href="#" class="input-group-link">Show password</a>
+                            </span>
                           </div>
                         </div>
                         <div class="mb-3">
                           <label class="form-label">Input with appended icon links</label>
                           <div class="input-group input-group-flat">
                             <input type="text" class="form-control" >
-                            <div class="input-group-append">
-                              <span class="input-group-text">
-                                <a href="#" class="link-secondary" title="Clear search" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-                                </a>
-                                <a href="#" class="link-secondary ml-2" title="Search settings" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                                </a>
-                                <a href="#" class="link-secondary ml-2 disabled" title="Add notification" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                                </a>
-                              </span>
-                            </div>
+                            <span class="input-group-text">
+                              <a href="#" class="link-secondary" title="Clear search" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                  <path stroke="none" d="M0 0h24v24H0z"/>
+                                  <line x1="18" y1="6" x2="6" y2="18" />
+                                  <line x1="6" y1="6" x2="18" y2="18" />
+                                </svg>
+                              </a>
+                              <a href="#" class="link-secondary ml-2" title="Search settings" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                  <path stroke="none" d="M0 0h24v24H0z"/>
+                                  <circle cx="6" cy="10" r="2" />
+                                  <line x1="6" y1="4" x2="6" y2="8" />
+                                  <line x1="6" y1="12" x2="6" y2="20" />
+                                  <circle cx="12" cy="16" r="2" />
+                                  <line x1="12" y1="4" x2="12" y2="14" />
+                                  <line x1="12" y1="18" x2="12" y2="20" />
+                                  <circle cx="18" cy="7" r="2" />
+                                  <line x1="18" y1="4" x2="18" y2="5" />
+                                  <line x1="18" y1="9" x2="18" y2="20" />
+                                </svg>
+                              </a>
+                              <a href="#" class="link-secondary ml-2 disabled" title="Add notification" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                  <path stroke="none" d="M0 0h24v24H0z"/>
+                                  <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>
+                              </a>
+                            </span>
                           </div>
                         </div>
                       </div>
@@ -973,15 +1051,15 @@
                         <label class="form-label">Form fieldset</label>
                         <fieldset class="form-fieldset">
                           <div class="mb-3">
-                            <label class="form-label">Full name<span class="form-required">*</span></label>
+                            <label class="form-label required">Full name</label>
                             <input type="text" class="form-control" autocomplete="off"/>
                           </div>
                           <div class="mb-3">
-                            <label class="form-label">Company<span class="form-required">*</span></label>
+                            <label class="form-label required">Company</label>
                             <input type="text" class="form-control"  autocomplete="off"/>
                           </div>
                           <div class="mb-3">
-                            <label class="form-label">Email<span class="form-required">*</span></label>
+                            <label class="form-label required">Email</label>
                             <input type="email" class="form-control"  autocomplete="off"/>
                           </div>
                           <div class="">
@@ -996,19 +1074,19 @@
                           <div class="form-selectgroup">
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked>
-                              <span class="form-selectgroup-box">HTML</span>
+                              <span class="form-selectgroup-label">HTML</span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="CSS" class="form-selectgroup-input">
-                              <span class="form-selectgroup-box">CSS</span>
+                              <span class="form-selectgroup-label">CSS</span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="PHP" class="form-selectgroup-input">
-                              <span class="form-selectgroup-box">PHP</span>
+                              <span class="form-selectgroup-label">PHP</span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input">
-                              <span class="form-selectgroup-box">JavaScript</span>
+                              <span class="form-selectgroup-label">JavaScript</span>
                             </label>
                           </div>
                         </div>
@@ -1017,27 +1095,41 @@
                           <div class="form-selectgroup">
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="sun" class="form-selectgroup-input" checked>
-                              <span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+                              <span class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                  <path stroke="none" d="M0 0h24v24H0z"/>
+                                  <circle cx="12" cy="12" r="4" />
+                                  <path d="M3 12h1M12 3v1M20 12h1M12 20v1M5.6 5.6l.7 .7M18.4 5.6l-.7 .7M17.7 17.7l.7 .7M6.3 17.7l-.7 .7" />
+                                </svg>
                               </span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="moon" class="form-selectgroup-input">
-                              <span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+                              <span class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                  <path stroke="none" d="M0 0h24v24H0z"/>
+                                  <path d="M16.2 4a9.03 9.03 0 1 0 3.9 12a6.5 6.5 0 1 1 -3.9 -12" />
+                                </svg>
                               </span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="cloud-rain" class="form-selectgroup-input">
-                              <span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16" y1="13" x2="16" y2="21"></line><line x1="8" y1="13" x2="8" y2="21"></line><line x1="12" y1="15" x2="12" y2="23"></line><path d="M20 16.58A5 5 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.25"></path></svg>
+                              <span class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                  <path stroke="none" d="M0 0h24v24H0z"/>
+                                  <path d="M7 18a4.6 4.4 0 0 1 0 -9h0a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7" />
+                                  <path d="M11 13v2m0 3v2m4 -5v2m0 3v2" />
+                                </svg>
                               </span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="cloud" class="form-selectgroup-input">
-                              <span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path></svg>
+                              <span class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                  <path stroke="none" d="M0 0h24v24H0z"/>
+                                  <path d="M7 18a4.6 4.4 0 0 1 0 -9h0a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-12" />
+                                </svg>
                               </span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="Other" class="form-selectgroup-input">
-                              <span class="form-selectgroup-box">Other</span>
+                              <span class="form-selectgroup-label">Other</span>
                             </label>
                           </div>
                         </div>
@@ -1046,22 +1138,37 @@
                           <div class="form-selectgroup">
                             <label class="form-selectgroup-item">
                               <input type="radio" name="icons" value="home" class="form-selectgroup-input" checked>
-                              <span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                              <span class="form-selectgroup-label"><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"/>
+                                  <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>
                                 Home</span>
                             </label>
                             <label class="form-selectgroup-item">
-                              <input type="radio" name="icons" value="users" class="form-selectgroup-input">
-                              <span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
-                                Users</span>
+                              <input type="radio" name="icons" value="user" class="form-selectgroup-input">
+                              <span class="form-selectgroup-label"><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"/>
+                                  <circle cx="12" cy="7" r="4" />
+                                  <path d="M5.5 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2" />
+                                </svg>
+                                User</span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="radio" name="icons" value="circle" class="form-selectgroup-input">
-                              <span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1"><circle cx="12" cy="12" r="10"></circle></svg>
+                              <span class="form-selectgroup-label"><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"/>
+                                  <circle cx="12" cy="12" r="9" />
+                                </svg>
                                 Circle</span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="radio" name="icons" value="square" class="form-selectgroup-input">
-                              <span class="form-selectgroup-box"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>
+                              <span class="form-selectgroup-label"><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"/>
+                                  <rect x="4" y="4" width="16" height="16" rx="2" />
+                                </svg>
                                 Square</span>
                             </label>
                           </div>
@@ -1071,19 +1178,19 @@
                           <div class="form-selectgroup form-selectgroup-pills">
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked>
-                              <span class="form-selectgroup-box">HTML</span>
+                              <span class="form-selectgroup-label">HTML</span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="CSS" class="form-selectgroup-input">
-                              <span class="form-selectgroup-box">CSS</span>
+                              <span class="form-selectgroup-label">CSS</span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="PHP" class="form-selectgroup-input">
-                              <span class="form-selectgroup-box">PHP</span>
+                              <span class="form-selectgroup-label">PHP</span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input">
-                              <span class="form-selectgroup-box">JavaScript</span>
+                              <span class="form-selectgroup-label">JavaScript</span>
                             </label>
                           </div>
                         </div>
@@ -1092,7 +1199,7 @@
                           <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
                             <label class="form-selectgroup-item flex-fill">
                               <input type="radio" name="form-payment" value="visa" class="form-selectgroup-input">
-                              <div class="form-selectgroup-box d-flex align-items-center p-3">
+                              <div class="form-selectgroup-label d-flex align-items-center p-3">
                                 <div class="mr-3">
                                   <span class="form-selectgroup-check"></span>
                                 </div>
@@ -1104,7 +1211,7 @@
                             </label>
                             <label class="form-selectgroup-item flex-fill">
                               <input type="radio" name="form-payment" value="mastercard" class="form-selectgroup-input" checked>
-                              <div class="form-selectgroup-box d-flex align-items-center p-3">
+                              <div class="form-selectgroup-label d-flex align-items-center p-3">
                                 <div class="mr-3">
                                   <span class="form-selectgroup-check"></span>
                                 </div>
@@ -1116,7 +1223,7 @@
                             </label>
                             <label class="form-selectgroup-item flex-fill">
                               <input type="radio" name="form-payment" value="paypal" class="form-selectgroup-input">
-                              <div class="form-selectgroup-box d-flex align-items-center p-3">
+                              <div class="form-selectgroup-label d-flex align-items-center p-3">
                                 <div class="mr-3">
                                   <span class="form-selectgroup-check"></span>
                                 </div>
@@ -1132,11 +1239,11 @@
                           <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column">
                             <label class="form-selectgroup-item flex-fill">
                               <input type="checkbox" name="form-project-manager[]" value="1" class="form-selectgroup-input" >
-                              <div class="form-selectgroup-box d-flex align-items-center p-3">
+                              <div class="form-selectgroup-label d-flex align-items-center p-3">
                                 <div class="mr-3">
                                   <span class="form-selectgroup-check"></span>
                                 </div>
-                                <div class="form-selectgroup-box-content d-flex align-items-center">
+                                <div class="form-selectgroup-label-content d-flex align-items-center">
                                   <span class="avatar mr-3" style="background-image: url(./static/avatars/000m.jpg)"></span>
                                   <div class="lh-sm">
                                     <div class="strong">Paweł Kuna</div>
@@ -1147,11 +1254,11 @@
                             </label>
                             <label class="form-selectgroup-item flex-fill">
                               <input type="checkbox" name="form-project-manager[]" value="2" class="form-selectgroup-input"  checked>
-                              <div class="form-selectgroup-box d-flex align-items-center p-3">
+                              <div class="form-selectgroup-label d-flex align-items-center p-3">
                                 <div class="mr-3">
                                   <span class="form-selectgroup-check"></span>
                                 </div>
-                                <div class="form-selectgroup-box-content d-flex align-items-center">
+                                <div class="form-selectgroup-label-content d-flex align-items-center">
                                   <span class="avatar mr-3">JL</span>
                                   <div class="lh-sm">
                                     <div class="strong">Jeffie Lewzey</div>
@@ -1162,11 +1269,11 @@
                             </label>
                             <label class="form-selectgroup-item flex-fill">
                               <input type="checkbox" name="form-project-manager[]" value="3" class="form-selectgroup-input" >
-                              <div class="form-selectgroup-box d-flex align-items-center p-3">
+                              <div class="form-selectgroup-label d-flex align-items-center p-3">
                                 <div class="mr-3">
                                   <span class="form-selectgroup-check"></span>
                                 </div>
-                                <div class="form-selectgroup-box-content d-flex align-items-center">
+                                <div class="form-selectgroup-label-content d-flex align-items-center">
                                   <span class="avatar mr-3" style="background-image: url(./static/avatars/002m.jpg)"></span>
                                   <div class="lh-sm">
                                     <div class="strong">Mallory Hulme</div>
@@ -1177,11 +1284,11 @@
                             </label>
                             <label class="form-selectgroup-item flex-fill">
                               <input type="checkbox" name="form-project-manager[]" value="4" class="form-selectgroup-input" >
-                              <div class="form-selectgroup-box d-flex align-items-center p-3">
+                              <div class="form-selectgroup-label d-flex align-items-center p-3">
                                 <div class="mr-3">
                                   <span class="form-selectgroup-check"></span>
                                 </div>
-                                <div class="form-selectgroup-box-content d-flex align-items-center">
+                                <div class="form-selectgroup-label-content d-flex align-items-center">
                                   <span class="avatar mr-3" style="background-image: url(./static/avatars/003m.jpg)"></span>
                                   <div class="lh-sm">
                                     <div class="strong">Dunn Slane</div>
@@ -1192,11 +1299,11 @@
                             </label>
                             <label class="form-selectgroup-item flex-fill">
                               <input type="checkbox" name="form-project-manager[]" value="5" class="form-selectgroup-input" >
-                              <div class="form-selectgroup-box d-flex align-items-center p-3">
+                              <div class="form-selectgroup-label d-flex align-items-center p-3">
                                 <div class="mr-3">
                                   <span class="form-selectgroup-check"></span>
                                 </div>
-                                <div class="form-selectgroup-box-content d-flex align-items-center">
+                                <div class="form-selectgroup-label-content d-flex align-items-center">
                                   <span class="avatar mr-3" style="background-image: url(./static/avatars/000f.jpg)"></span>
                                   <div class="lh-sm">
                                     <div class="strong">Emmy Levet</div>
@@ -1244,25 +1351,59 @@
                           <label class="form-label">Toolbar</label>
                           <div class="btn-group w-100">
                             <a href="#" class="btn btn-secondary btn-icon" aria-label="Button">
-                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path></svg>
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z"/>
+                                <path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6z" />
+                                <path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7" />
+                              </svg>
                             </a>
                             <a href="#" class="btn btn-secondary btn-icon" aria-label="Button">
-                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="4" x2="10" y2="4"></line><line x1="14" y1="20" x2="5" y2="20"></line><line x1="15" y1="4" x2="9" y2="20"></line></svg>
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z"/>
+                                <line x1="11" y1="5" x2="17" y2="5" />
+                                <line x1="7" y1="19" x2="13" y2="19" />
+                                <line x1="14" y1="5" x2="10" y2="19" />
+                              </svg>
                             </a>
                             <a href="#" class="btn btn-secondary btn-icon" aria-label="Button">
-                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3"></path><line x1="4" y1="21" x2="20" y2="21"></line></svg>
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z"/>
+                                <line x1="7" y1="19" x2="17" y2="19" />
+                                <path d="M8 5v6a4 4 0 0 0 8 0v-6" />
+                              </svg>
                             </a>
                             <a href="#" class="btn btn-secondary btn-icon" aria-label="Button">
-                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z"/>
+                                <rect x="8" y="8" width="12" height="12" rx="2" />
+                                <path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" />
+                              </svg>
                             </a>
                             <a href="#" class="btn btn-secondary btn-icon" aria-label="Button">
-                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="6" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><line x1="20" y1="4" x2="8.12" y2="15.88"></line><line x1="14.47" y1="14.48" x2="20" y2="20"></line><line x1="8.12" y1="8.12" x2="12" y2="12"></line></svg>
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z"/>
+                                <circle cx="6" cy="7" r="3" />
+                                <circle cx="6" cy="17" r="3" />
+                                <line x1="8.6" y1="8.6" x2="19" y2="19" />
+                                <line x1="8.6" y1="15.4" x2="19" y2="5" />
+                              </svg>
                             </a>
                             <a href="#" class="btn btn-secondary btn-icon" aria-label="Button">
-                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="12" y1="18" x2="12" y2="12"></line><line x1="9" y1="15" x2="15" y2="15"></line></svg>
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z"/>
+                                <polyline points="14 3 14 8 19 8" />
+                                <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
+                                <line x1="12" y1="11" x2="12" y2="17" />
+                                <line x1="9" y1="14" x2="15" y2="14" />
+                              </svg>
                             </a>
                             <a href="#" class="btn btn-secondary btn-icon" aria-label="Button">
-                              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z"/>
+                                <polyline points="14 3 14 8 19 8" />
+                                <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
+                                <line x1="9" y1="14" x2="15" y2="14" />
+                              </svg>
                             </a>
                           </div>
                         </div>
@@ -1626,7 +1767,15 @@
                           <input id="calendar-simple" type="date" value="2020-06-20" class="form-control mb-2" placeholder="Select a date" />
                           <div class="input-icon">
                             <input id="calendar-time" type="date" value="2020-06-20" class="form-control" placeholder="Select a date" />
-                            <span class="input-icon-addon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                            <span 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"/>
+                                <rect x="4" y="5" width="16" height="16" rx="2" />
+                                <line x1="16" y1="3" x2="16" y2="7" />
+                                <line x1="8" y1="3" x2="8" y2="7" />
+                                <line x1="4" y1="11" x2="20" y2="11" />
+                                <line x1="11" y1="15" x2="12" y2="15" />
+                                <line x1="12" y1="15" x2="12" y2="18" />
+                              </svg>
                             </span>
                           </div>
                         </div>
@@ -1698,26 +1847,26 @@
                         <div class="mb-3">
                           <label class="form-label">Select with avatars</label>
                           <select name="people" id="select-people" class="form-select">
-                            <option value="1" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/000m.jpg)\"></span>"}'>Paweł Kuna</option>
-                          <option value="2" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\">JL</span>"}'>Jeffie Lewzey</option>
-                        <option value="3" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/002m.jpg)\"></span>"}'>Mallory Hulme</option>
-                      <option value="4" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/003m.jpg)\"></span>"}' selected>Dunn Slane</option>
-                    <option value="5" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/000f.jpg)\"></span>"}'>Emmy Levet</option>
-                  <option value="6" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/001f.jpg)\"></span>"}'>Maryjo Lebarree</option>
-                <option value="7" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\">EP</span>"}'>Egan Poetz</option>
-              <option value="8" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/002f.jpg)\"></span>"}'>Kellie Skingley</option>
-            <option value="9" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/003f.jpg)\"></span>"}'>Christabel Charlwood</option>
-          <option value="10" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\">HS</span>"}'>Haskel Shelper</option>
-        <option value="11" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/006m.jpg)\"></span>"}'>Lorry Mion</option>
-      <option value="12" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/004f.jpg)\"></span>"}'>Leesa Beaty</option>
-    <option value="13" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/007m.jpg)\"></span>"}'>Perren Keemar</option>
-  <option value="14" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\">SA</span>"}'>Sunny Airey</option>
-<option value="15" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/009m.jpg)\"></span>"}'>Geoffry Flaunders</option>
-<option value="16" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/010m.jpg)\"></span>"}'>Thatcher Keel</option>
-<option value="17" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/005f.jpg)\"></span>"}'>Dyann Escala</option>
-<option value="18" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/006f.jpg)\"></span>"}'>Avivah Mugleston</option>
-<option value="19" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\">AA</span>"}'>Arlie Armstead</option>
-<option value="20" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/008f.jpg)\"></span>"}'>Tessie Curzon</option>
+                            <option value="1" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/000m.jpg)\"></span>"}'>Paweł Kuna</option>
+                          <option value="2" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\">JL</span>"}'>Jeffie Lewzey</option>
+                        <option value="3" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/002m.jpg)\"></span>"}'>Mallory Hulme</option>
+                      <option value="4" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/003m.jpg)\"></span>"}' selected>Dunn Slane</option>
+                    <option value="5" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/000f.jpg)\"></span>"}'>Emmy Levet</option>
+                  <option value="6" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/001f.jpg)\"></span>"}'>Maryjo Lebarree</option>
+                <option value="7" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\">EP</span>"}'>Egan Poetz</option>
+              <option value="8" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/002f.jpg)\"></span>"}'>Kellie Skingley</option>
+            <option value="9" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/003f.jpg)\"></span>"}'>Christabel Charlwood</option>
+          <option value="10" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\">HS</span>"}'>Haskel Shelper</option>
+        <option value="11" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/006m.jpg)\"></span>"}'>Lorry Mion</option>
+      <option value="12" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/004f.jpg)\"></span>"}'>Leesa Beaty</option>
+    <option value="13" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/007m.jpg)\"></span>"}'>Perren Keemar</option>
+  <option value="14" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\">SA</span>"}'>Sunny Airey</option>
+<option value="15" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/009m.jpg)\"></span>"}'>Geoffry Flaunders</option>
+<option value="16" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/010m.jpg)\"></span>"}'>Thatcher Keel</option>
+<option value="17" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/005f.jpg)\"></span>"}'>Dyann Escala</option>
+<option value="18" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/006f.jpg)\"></span>"}'>Avivah Mugleston</option>
+<option value="19" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\">AA</span>"}'>Arlie Armstead</option>
+<option value="20" data-data='{"avatar": "<span class=\"avatar avatar-sm rounded mr-2 ml-n1\" style=\"background-image: url(./static/avatars/008f.jpg)\"></span>"}'>Tessie Curzon</option>
 </select>
 </div>
 <div class="mb-3">
@@ -1885,67 +2034,6 @@
 </footer>
 </div>
 </div>
-<div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title">Customize Tabler</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-        </button>
-      </div>
-      <div class="modal-body">
-        <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-        <div class="mb-3">
-          <label class="form-label">Color scheme</label>
-          <div class="form-hint">Light or dark presentation.</div>
-          <div class="btn-group w-100">
-            <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-              Light</button>
-            <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-              Dark</button>
-          </div>
-        </div>
-        <div class="mb-4 text-muted">
-          You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-        </div>
-        <div class="mb-3">
-          <label class="form-label">Navigation position</label>
-          <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-          <div class="btn-group w-100">
-            <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-            <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-            <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-          </div>
-        </div>
-        <div class="mb-3">
-          <label class="form-label">Sidebar size</label>
-          <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-          <div class="btn-group w-100">
-            <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-            <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-          </div>
-        </div>
-        <div class="mb-3">
-          <label class="form-label">Sidebar position</label>
-          <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-          <div class="btn-group w-100">
-            <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-            <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-          </div>
-        </div>
-        <div>
-          <label class="form-label">Navigation color</label>
-          <div class="form-hint">Light or dark version of the sidebar </div>
-          <div class="btn-group w-100">
-            <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-            <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
 <!-- Libs JS -->
 <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
 <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
@@ -2078,119 +2166,6 @@
   	});
   });
 </script>
-<script>
-  (function() {
-  	var navbarPrimary = document.getElementById('navbar-primary'),
-  		navbarSecondary = document.getElementById('navbar-secondary');
-  	var defaults = {
-  		theme: 'light',
-  		'navbar-position': 'horizontal',
-  		'navbar-size': 'wide',
-  		'navbar-side': 'left',
-  		'navbar-color': 'light',
-  	};
-  	var eventsClean = {
-  		'theme': function () {
-  			document.body.classList.remove('theme-dark');
-  		},
-  		'navbar-position': function () {
-  			navbarPrimary.classList.remove('navbar-vertical');
-  			navbarSecondary.classList.remove('d-none');
-  		},
-  		'navbar-size': function () {
-  			navbarPrimary.classList.remove('navbar-vertical-narrow');
-  		},
-  		'navbar-side': function () {
-  			navbarPrimary.classList.remove('navbar-right');
-  		},
-  		'navbar-color': function () {
-  			navbarPrimary.classList.remove('navbar-dark');
-  			navbarPrimary.classList.add('navbar-light');
-  		},
-  	};
-  	var events = {
-  		'theme:light': function () {
-  		},
-  		'theme:dark': function () {
-  			document.body.classList.add('theme-dark');
-  		},
-  		'navbar-position:vertical': function () {
-  			navbarPrimary.classList.add('navbar-vertical');
-  			navbarSecondary.classList.add('d-none');
-  		},
-  		'navbar-position:horizontal': function () {
-  		},
-  		'navbar-position:both': function () {
-  			navbarPrimary.classList.add('navbar-vertical');
-  		},
-  		'navbar-size:wide': function () {
-  		},
-  		'navbar-size:narrow': function () {
-  			navbarPrimary.classList.add('navbar-vertical-narrow');
-  		},
-  		'navbar-side:left': function () {
-  		},
-  		'navbar-side:right': function () {
-  			navbarPrimary.classList.add('navbar-right');
-  		},
-  		'navbar-color:light': function () {
-  		},
-  		'navbar-color:dark': function () {
-  			navbarPrimary.classList.add('navbar-dark');
-  			navbarPrimary.classList.remove('navbar-light');
-  		},
-  	};
-  	var updateThemeConfig = function (name) {
-  		var key, value;
-  		if (name) {
-  			[key, value] = name.split(':');
-  			setConfig(key, value);
-  		}
-  		applyConfig();
-  	};
-  	var disableTransitions = function () {
-  		document.body.classList.add('no-transitions');
-  		setTimeout(function () {
-  			document.body.classList.remove('no-transitions');
-  		}, 300);
-  	};
-  	var getConfig = function () {
-  		var config = {};
-  		for (var key in defaults) {
-  			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-  		}
-  		return config;
-  	};
-  	var setConfig = function (key, value) {
-  		localStorage.setItem('tabler-' + key, value);
-  	};
-  	var applyConfig = function () {
-  		disableTransitions();
-  		var config = getConfig();
-  		for (var key in config) {
-  			var value = config[key];
-  			eventsClean[key] && eventsClean[key].call();
-  			events[key + ':' + value] && events[key + ':' + value].call();
-  			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-  				activeTrigger.classList.remove('active')
-  			});
-  			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-  		}
-  	};
-  	applyConfig();
-  	for (var name in events) {
-  		var event = events[name];
-  		(function (event, name) {
-  			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-  				updateThemeConfig(name);
-  				event.call();
-  				e.preventDefault();
-  				return false;
-  			});
-  		})(event, name);
-  	}
-  })();
-</script>
 <script>
   (function () {
   	/**
diff --git a/demo/gallery.html b/demo/gallery.html
index ff61e8ba5..2ba3945b6 100644
--- a/demo/gallery.html
+++ b/demo/gallery.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -172,14 +244,31 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </li>
+              <li class="nav-item active 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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -539,12 +604,20 @@
                     <div class="input-icon">
                       <input type="text" class="form-control" placeholder="Search…">
                       <span class="input-icon-addon">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="10" cy="10" r="7" />
+                          <line x1="21" y1="21" x2="15" y2="15" />
+                        </svg>
                       </span>
                     </div>
                   </div>
                   <a href="#" class="btn btn-primary">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path stroke="none" d="M0 0h24v24H0z"/>
+                      <line x1="12" y1="5" x2="12" y2="19" />
+                      <line x1="5" y1="12" x2="19" y2="12" />
+                    </svg>
                     Add event
                   </a>
                 </div>
@@ -564,11 +637,19 @@
                     </div>
                     <div class="ml-auto">
                       <a href="#" class="text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="2" />
+                          <path d="M2 12l1.5 2a11 11 0 0 0 17 0l1.5 -2" />
+                          <path d="M2 12l1.5 -2a11 11 0 0 1 17 0l1.5 2" />
+                        </svg>
                         467
                       </a>
                       <a href="#" class="ml-3 text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                        </svg>
                         67
                       </a>
                     </div>
@@ -588,11 +669,19 @@
                     </div>
                     <div class="ml-auto">
                       <a href="#" class="text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="2" />
+                          <path d="M2 12l1.5 2a11 11 0 0 0 17 0l1.5 -2" />
+                          <path d="M2 12l1.5 -2a11 11 0 0 1 17 0l1.5 2" />
+                        </svg>
                         369
                       </a>
                       <a href="#" class="ml-3 text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                        </svg>
                         32
                       </a>
                     </div>
@@ -612,11 +701,19 @@
                     </div>
                     <div class="ml-auto">
                       <a href="#" class="text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="2" />
+                          <path d="M2 12l1.5 2a11 11 0 0 0 17 0l1.5 -2" />
+                          <path d="M2 12l1.5 -2a11 11 0 0 1 17 0l1.5 2" />
+                        </svg>
                         481
                       </a>
                       <a href="#" class="ml-3 text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                        </svg>
                         57
                       </a>
                     </div>
@@ -636,11 +733,19 @@
                     </div>
                     <div class="ml-auto">
                       <a href="#" class="text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="2" />
+                          <path d="M2 12l1.5 2a11 11 0 0 0 17 0l1.5 -2" />
+                          <path d="M2 12l1.5 -2a11 11 0 0 1 17 0l1.5 2" />
+                        </svg>
                         332
                       </a>
                       <a href="#" class="ml-3 text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                        </svg>
                         51
                       </a>
                     </div>
@@ -660,11 +765,19 @@
                     </div>
                     <div class="ml-auto">
                       <a href="#" class="text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="2" />
+                          <path d="M2 12l1.5 2a11 11 0 0 0 17 0l1.5 -2" />
+                          <path d="M2 12l1.5 -2a11 11 0 0 1 17 0l1.5 2" />
+                        </svg>
                         424
                       </a>
                       <a href="#" class="ml-3 text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                        </svg>
                         45
                       </a>
                     </div>
@@ -684,11 +797,19 @@
                     </div>
                     <div class="ml-auto">
                       <a href="#" class="text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="2" />
+                          <path d="M2 12l1.5 2a11 11 0 0 0 17 0l1.5 -2" />
+                          <path d="M2 12l1.5 -2a11 11 0 0 1 17 0l1.5 2" />
+                        </svg>
                         496
                       </a>
                       <a href="#" class="ml-3 text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                        </svg>
                         64
                       </a>
                     </div>
@@ -708,11 +829,19 @@
                     </div>
                     <div class="ml-auto">
                       <a href="#" class="text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="2" />
+                          <path d="M2 12l1.5 2a11 11 0 0 0 17 0l1.5 -2" />
+                          <path d="M2 12l1.5 -2a11 11 0 0 1 17 0l1.5 2" />
+                        </svg>
                         301
                       </a>
                       <a href="#" class="ml-3 text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                        </svg>
                         99
                       </a>
                     </div>
@@ -732,11 +861,19 @@
                     </div>
                     <div class="ml-auto">
                       <a href="#" class="text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="2" />
+                          <path d="M2 12l1.5 2a11 11 0 0 0 17 0l1.5 -2" />
+                          <path d="M2 12l1.5 -2a11 11 0 0 1 17 0l1.5 2" />
+                        </svg>
                         596
                       </a>
                       <a href="#" class="ml-3 text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                        </svg>
                         64
                       </a>
                     </div>
@@ -756,11 +893,19 @@
                     </div>
                     <div class="ml-auto">
                       <a href="#" class="text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="2" />
+                          <path d="M2 12l1.5 2a11 11 0 0 0 17 0l1.5 -2" />
+                          <path d="M2 12l1.5 -2a11 11 0 0 1 17 0l1.5 2" />
+                        </svg>
                         373
                       </a>
                       <a href="#" class="ml-3 text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                        </svg>
                         64
                       </a>
                     </div>
@@ -780,11 +925,19 @@
                     </div>
                     <div class="ml-auto">
                       <a href="#" class="text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="2" />
+                          <path d="M2 12l1.5 2a11 11 0 0 0 17 0l1.5 -2" />
+                          <path d="M2 12l1.5 -2a11 11 0 0 1 17 0l1.5 2" />
+                        </svg>
                         537
                       </a>
                       <a href="#" class="ml-3 text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                        </svg>
                         51
                       </a>
                     </div>
@@ -804,11 +957,19 @@
                     </div>
                     <div class="ml-auto">
                       <a href="#" class="text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="2" />
+                          <path d="M2 12l1.5 2a11 11 0 0 0 17 0l1.5 -2" />
+                          <path d="M2 12l1.5 -2a11 11 0 0 1 17 0l1.5 2" />
+                        </svg>
                         487
                       </a>
                       <a href="#" class="ml-3 text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                        </svg>
                         58
                       </a>
                     </div>
@@ -828,11 +989,19 @@
                     </div>
                     <div class="ml-auto">
                       <a href="#" class="text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="2" />
+                          <path d="M2 12l1.5 2a11 11 0 0 0 17 0l1.5 -2" />
+                          <path d="M2 12l1.5 -2a11 11 0 0 1 17 0l1.5 2" />
+                        </svg>
                         400
                       </a>
                       <a href="#" class="ml-3 text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                        </svg>
                         56
                       </a>
                     </div>
@@ -845,7 +1014,10 @@
             <ul class="pagination ml-auto">
               <li class="page-item disabled">
                 <a class="page-link" href="#" tabindex="-1">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="15 18 9 12 15 6"></polyline></svg>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <polyline points="15 6 9 12 15 18" />
+                  </svg>
                   prev
                 </a>
               </li>
@@ -856,7 +1028,10 @@
               <li class="page-item"><a class="page-link" href="#">5</a></li>
               <li class="page-item">
                 <a class="page-link" href="#">
-                  next <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 18 15 12 9 6"></polyline></svg>
+                  next <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <polyline points="9 6 15 12 9 18" />
+                  </svg>
                 </a>
               </li>
             </ul>
@@ -888,7 +1063,11 @@
           <div class="modal-header">
             <h5 class="modal-title">New report</h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z"/>
+                <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">
@@ -901,11 +1080,11 @@
               <div class="col-lg-6">
                 <label class="form-selectgroup-item">
                   <input type="radio" name="report-type" value="1" class="form-selectgroup-input" checked>
-                  <div class="form-selectgroup-box d-flex align-items-center p-3">
+                  <div class="form-selectgroup-label d-flex align-items-center p-3">
                     <div class="mr-3">
                       <span class="form-selectgroup-check"></span>
                     </div>
-                    <div class="form-selectgroup-box-content">
+                    <div class="form-selectgroup-label-content">
                       <div class="form-selectgroup-title strong mb-1">Simple</div>
                       <div class="text-muted">Provide only basic data needed for the report</div>
                     </div>
@@ -915,11 +1094,11 @@
               <div class="col-lg-6">
                 <label class="form-selectgroup-item">
                   <input type="radio" name="report-type" value="1" class="form-selectgroup-input">
-                  <div class="form-selectgroup-box d-flex align-items-center p-3">
+                  <div class="form-selectgroup-label d-flex align-items-center p-3">
                     <div class="mr-3">
                       <span class="form-selectgroup-check"></span>
                     </div>
-                    <div class="form-selectgroup-box-content">
+                    <div class="form-selectgroup-label-content">
                       <div class="form-selectgroup-title strong mb-1">Advanced</div>
                       <div class="text-muted">Insert charts and additional advanced analyses to be inserted in the report</div>
                     </div>
@@ -932,11 +1111,9 @@
                 <div class="mb-3">
                   <label class="form-label">Report url</label>
                   <div class="input-group input-group-flat">
-                    <div class="input-group-prepend">
-                      <span class="input-group-text">
-                        https://tabler.io/reports/
-                      </span>
-                    </div>
+                    <span class="input-group-text">
+                      https://tabler.io/reports/
+                    </span>
                     <input type="text" class="form-control pl-0"  value="report-01">
                   </div>
                 </div>
@@ -980,192 +1157,22 @@
               Cancel
             </a>
             <a href="#" class="btn btn-primary ml-auto" data-dismiss="modal">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z"/>
+                <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>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/icons.html b/demo/icons.html
index a855fc1e9..bc61888cf 100644
--- a/demo/icons.html
+++ b/demo/icons.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -535,845 +600,3471 @@
             <div class="col-12">
               <div class="card">
                 <div class="card-body">
-                  <div class="card-title">Feather icons</div>
+                  <div class="card-title">Tabler icons</div>
                   <div class="icons-list-wrap">
                     <ul class="icons-list">
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="21 12 17 12 14 20 10 4 7 12 3 12" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="3" y="5" width="18" height="14" rx="2" />
+                          <path d="M7 15v-4a2 2 0 0 1 4 0v4" />
+                          <line x1="7" y1="13" x2="11" y2="13" />
+                          <path d="M17 9v6h-1.5a1.5 1.5 0 1 1 1.5 -1.5" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="6" cy="10" r="2" />
+                          <line x1="6" y1="4" x2="6" y2="8" />
+                          <line x1="6" y1="12" x2="6" y2="20" />
+                          <circle cx="12" cy="16" r="2" />
+                          <line x1="12" y1="4" x2="12" y2="14" />
+                          <line x1="12" y1="18" x2="12" y2="20" />
+                          <circle cx="18" cy="7" r="2" />
+                          <line x1="18" y1="4" x2="18" y2="5" />
+                          <line x1="18" y1="9" x2="18" y2="20" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="13" r="7" />
+                          <polyline points="12 10 12 13 14 13" />
+                          <line x1="7" y1="4" x2="4.25" y2="6" />
+                          <line x1="17" y1="4" x2="19.75" y2="6" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <line x1="12" y1="8" x2="12" y2="12" />
+                          <line x1="12" y1="16" x2="12.01" y2="16" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M12 9v2m0 4v.01" />
+                          <path d="M5.07 19H19a2 2 0 0 0 1.75 -2.75L13.75 4a2 2 0 0 0 -3.5 0L3.25 16.25a2 2 0 0 0 1.75 2.75" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="4" y1="6" x2="20" y2="6" />
+                          <line x1="8" y1="12" x2="16" y2="12" />
+                          <line x1="6" y1="18" x2="18" y2="18" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="4" y1="6" x2="20" y2="6" />
+                          <line x1="4" y1="12" x2="20" y2="12" />
+                          <line x1="4" y1="18" x2="20" y2="18" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="4" y1="6" x2="20" y2="6" />
+                          <line x1="4" y1="12" x2="14" y2="12" />
+                          <line x1="4" y1="18" x2="18" y2="18" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="4" y1="6" x2="20" y2="6" />
+                          <line x1="10" y1="12" x2="20" y2="12" />
+                          <line x1="6" y1="18" x2="20" y2="18" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M12 9v12m-8 -8a8 8 0 0 0 16 0m1 0h-2m-14 0h-2" />
+                          <circle cx="12" cy="6" r="3" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <line x1="3.6" y1="15" x2="14.15" y2="15" />
+                          <line x1="3.6" y1="15" x2="14.15" y2="15" transform="rotate(72 12 12)" />
+                          <line x1="3.6" y1="15" x2="14.15" y2="15" transform="rotate(144 12 12)" />
+                          <line x1="3.6" y1="15" x2="14.15" y2="15" transform="rotate(216 12 12)" />
+                          <line x1="3.6" y1="15" x2="14.15" y2="15" transform="rotate(288 12 12)" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="3" y="4" width="18" height="4" rx="2" />
+                          <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
+                          <line x1="10" y1="12" x2="14" y2="12" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M9 11l-4 4l4 4m-4 -4h11a4 4 0 0 0 0 -8h-1" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M9 13l-4 -4l4 -4m-4 4h11a4 4 0 0 1 0 8h-1" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"></path><polygon points="12 15 17 21 7 21 12 15"></polygon></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="12" y1="20" x2="12" y2="10" />
+                          <line x1="12" y1="20" x2="16" y2="16" />
+                          <line x1="12" y1="20" x2="8" y2="16" />
+                          <line x1="4" y1="4" x2="20" y2="4" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="4" y1="12" x2="14" y2="12" />
+                          <line x1="4" y1="12" x2="8" y2="16" />
+                          <line x1="4" y1="12" x2="8" y2="8" />
+                          <line x1="20" y1="4" x2="20" y2="20" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="20" y1="12" x2="10" y2="12" />
+                          <line x1="20" y1="12" x2="16" y2="16" />
+                          <line x1="20" y1="12" x2="16" y2="8" />
+                          <line x1="4" y1="4" x2="4" y2="20" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="12" y1="4" x2="12" y2="14" />
+                          <line x1="12" y1="4" x2="16" y2="8" />
+                          <line x1="12" y1="4" x2="8" y2="8" />
+                          <line x1="4" y1="20" x2="20" y2="20" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="18" y1="10" x2="6" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="18" y1="18" x2="6" y2="18"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="12" y1="5" x2="12" y2="19" />
+                          <line x1="18" y1="13" x2="12" y2="19" />
+                          <line x1="6" y1="13" x2="12" y2="19" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="21" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="21" y1="18" x2="3" y2="18"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <line x1="8" y1="12" x2="12" y2="16" />
+                          <line x1="12" y1="8" x2="12" y2="16" />
+                          <line x1="16" y1="12" x2="12" y2="16" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="17" y1="7" x2="7" y2="17" />
+                          <polyline points="16 17 7 17 7 8" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="21" y1="10" x2="7" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="21" y1="18" x2="7" y2="18"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <line x1="15" y1="9" x2="9" y2="15" />
+                          <polyline points="15 15 9 15 9 9" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="5" r="3"></circle><line x1="12" y1="22" x2="12" y2="8"></line><path d="M5 12H2a10 10 0 0 0 20 0h-3"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="7" y1="7" x2="17" y2="17" />
+                          <polyline points="17 8 17 17 8 17" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <line x1="15" y1="15" x2="9" y2="15" />
+                          <polyline points="15 9 15 15 9 9" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M15 11l4 4l-4 4m4 -4h-11a4 4 0 0 1 0 -8h1" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="10"></circle><polyline points="8 12 12 16 16 12"></polyline><line x1="12" y1="8" x2="12" y2="16"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M15 13l4 -4l-4 -4m4 4h-11a4 4 0 0 0 0 8h1" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="17" y1="7" x2="7" y2="17"></line><polyline points="17 17 7 17 7 7"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="5" y1="12" x2="19" y2="12" />
+                          <line x1="5" y1="12" x2="11" y2="18" />
+                          <line x1="5" y1="12" x2="11" y2="6" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="7" y1="7" x2="17" y2="17"></line><polyline points="17 7 17 17 7 17"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <line x1="8" y1="12" x2="16" y2="12" />
+                          <line x1="8" y1="12" x2="12" y2="16" />
+                          <line x1="8" y1="12" x2="12" y2="8" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="12" y1="5" x2="12" y2="19" />
+                          <line x1="16" y1="15" x2="12" y2="19" />
+                          <line x1="8" y1="15" x2="12" y2="19" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="10"></circle><polyline points="12 8 8 12 12 16"></polyline><line x1="16" y1="12" x2="8" y2="12"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="5" y1="12" x2="19" y2="12" />
+                          <line x1="5" y1="12" x2="9" y2="16" />
+                          <line x1="5" y1="12" x2="9" y2="8" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="5" y1="12" x2="19" y2="12" />
+                          <line x1="15" y1="16" x2="19" y2="12" />
+                          <line x1="15" y1="8" x2="19" y2="12" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="12" y1="5" x2="12" y2="19" />
+                          <line x1="16" y1="9" x2="12" y2="5" />
+                          <line x1="8" y1="9" x2="12" y2="5" />
+                        </svg>
                       </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="10"></circle><polyline points="16 12 12 8 8 12"></polyline><line x1="12" y1="16" x2="12" y2="8"></line></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="17" y1="17" x2="7" y2="7"></line><polyline points="7 17 7 7 17 7"></polyline></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="4"></circle><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"></path></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="8" r="7"></circle><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"></polyline></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="18" y1="20" x2="18" y2="10"></line><line x1="12" y1="20" x2="12" y2="4"></line><line x1="6" y1="20" x2="6" y2="14"></line></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="12" y1="20" x2="12" y2="10"></line><line x1="18" y1="20" x2="18" y2="4"></line><line x1="6" y1="20" x2="6" y2="16"></line></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M5 18H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3.19M15 6h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-3.19"></path><line x1="23" y1="13" x2="23" y2="11"></line><polyline points="11 6 7 12 13 12 9 18"></polyline></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="1" y="6" width="18" height="12" rx="2" ry="2"></rect><line x1="23" y1="13" x2="23" y2="11"></line></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M13.73 21a2 2 0 0 1-3.46 0"></path><path d="M18.63 13A17.89 17.89 0 0 1 18 8"></path><path d="M6.26 6.26A5.86 5.86 0 0 0 6 8c0 7-3 9-3 9h14"></path><path d="M18 8a6 6 0 0 0-9.33-5"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="6.5 6.5 17.5 17.5 12 23 12 1 17.5 6.5 6.5 17.5"></polyline></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="1" y1="1" x2="23" y2="23"></line><path d="M21 21H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3m3-3h6l2 3h4a2 2 0 0 1 2 2v9.34m-7.72-2.06a4 4 0 1 1-5.56-5.56"></path></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M2 16.1A5 5 0 0 1 5.9 20M2 12.05A9 9 0 0 1 9.95 20M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6"></path><line x1="2" y1="20" x2="2.01" y2="20"></line></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="20 6 9 17 4 12"></polyline></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="6 9 12 15 18 9"></polyline></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="15 18 9 12 15 6"></polyline></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="9 18 15 12 9 6"></polyline></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="18 15 12 9 6 15"></polyline></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="7 13 12 18 17 13"></polyline><polyline points="7 6 12 11 17 6"></polyline></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="11 17 6 12 11 7"></polyline><polyline points="18 17 13 12 18 7"></polyline></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="13 17 18 12 13 7"></polyline><polyline points="6 17 11 12 6 7"></polyline></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="17 11 12 6 7 11"></polyline><polyline points="17 18 12 13 7 18"></polyline></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="4"></circle><line x1="21.17" y1="8" x2="12" y2="8"></line><line x1="3.95" y1="6.06" x2="8.54" y2="14"></line><line x1="10.88" y1="21.94" x2="15.46" y2="14"></line></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="10"></circle></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="8" y1="19" x2="8" y2="21"></line><line x1="8" y1="13" x2="8" y2="15"></line><line x1="16" y1="19" x2="16" y2="21"></line><line x1="16" y1="13" x2="16" y2="15"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="12" y1="15" x2="12" y2="17"></line><path d="M20 16.58A5 5 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.25"></path></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M19 16.9A5 5 0 0 0 18 7h-1.26a8 8 0 1 0-11.62 9"></path><polyline points="13 11 9 17 15 17 11 23"></polyline></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M22.61 16.95A5 5 0 0 0 18 10h-1.26a8 8 0 0 0-7.05-6M5 5a8 8 0 0 0 4 15h9a5 5 0 0 0 1.7-.3"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="16" y1="13" x2="16" y2="21"></line><line x1="8" y1="13" x2="8" y2="21"></line><line x1="12" y1="15" x2="12" y2="23"></line><path d="M20 16.58A5 5 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.25"></path></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M20 17.58A5 5 0 0 0 18 8h-1.26A8 8 0 1 0 4 16.25"></path><line x1="8" y1="16" x2="8.01" y2="16"></line><line x1="8" y1="20" x2="8.01" y2="20"></line><line x1="12" y1="18" x2="12.01" y2="18"></line><line x1="12" y1="22" x2="12.01" y2="22"></line><line x1="16" y1="16" x2="16.01" y2="16"></line><line x1="16" y1="20" x2="16.01" y2="20"></line></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"></polygon><line x1="12" y1="22" x2="12" y2="15.5"></line><polyline points="22 8.5 12 15.5 2 8.5"></polyline><polyline points="2 15.5 12 8.5 22 15.5"></polyline><line x1="12" y1="2" x2="12" y2="8.5"></line></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M18 8h1a4 4 0 0 1 0 8h-1"></path><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path><line x1="6" y1="1" x2="6" y2="4"></line><line x1="10" y1="1" x2="10" y2="4"></line><line x1="14" y1="1" x2="14" y2="4"></line></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M12 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7m0-18H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7m0-18v18"></path></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z"></path></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="10"></circle><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="5" y1="12" x2="19" y2="12" />
+                          <line x1="13" y1="18" x2="19" y2="12" />
+                          <line x1="13" y1="6" x2="19" y2="12" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="9 10 4 15 9 20"></polyline><path d="M20 4v7a4 4 0 0 1-4 4H4"></path></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="15 10 20 15 15 20"></polyline><path d="M4 4v7a4 4 0 0 0 4 4h12"></path></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="14 15 9 20 4 15"></polyline><path d="M20 4h-7a4 4 0 0 0-4 4v12"></path></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="14 9 9 4 4 9"></polyline><path d="M20 20h-7a4 4 0 0 1-4-4V4"></path></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="10 15 15 20 20 15"></polyline><path d="M4 4h7a4 4 0 0 1 4 4v12"></path></svg>
-                      </li>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <line x1="16" y1="12" x2="8" y2="12" />
+                          <line x1="16" y1="12" x2="12" y2="16" />
+                          <line x1="16" y1="12" x2="12" y2="8" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="12" y1="5" x2="12" y2="19" />
+                          <line x1="18" y1="11" x2="12" y2="5" />
+                          <line x1="6" y1="11" x2="12" y2="5" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <line x1="12" y1="8" x2="8" y2="12" />
+                          <line x1="12" y1="8" x2="12" y2="16" />
+                          <line x1="16" y1="12" x2="12" y2="8" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="7" y1="7" x2="17" y2="17" />
+                          <polyline points="16 7 7 7 7 16" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <line x1="9" y1="9" x2="15" y2="15" />
+                          <polyline points="15 9 9 9 9 15" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="17" y1="7" x2="7" y2="17" />
+                          <polyline points="8 7 17 7 17 16" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <line x1="15" y1="9" x2="9" y2="15" />
+                          <polyline points="15 15 15 9 9 9" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="16 4 20 4 20 8" />
+                          <line x1="14" y1="10" x2="20" y2="4" />
+                          <polyline points="8 20 4 20 4 16" />
+                          <line x1="4" y1="20" x2="10" y2="14" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="16 20 20 20 20 16" />
+                          <line x1="14" y1="14" x2="20" y2="20" />
+                          <polyline points="8 4 4 4 4 8" />
+                          <line x1="4" y1="4" x2="10" y2="10" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="7 8 3 12 7 16" />
+                          <polyline points="17 8 21 12 17 16" />
+                          <line x1="3" y1="12" x2="21" y2="12" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="16 4 20 4 20 8" />
+                          <line x1="14" y1="10" x2="20" y2="4" />
+                          <polyline points="8 20 4 20 4 16" />
+                          <line x1="4" y1="20" x2="10" y2="14" />
+                          <polyline points="16 20 20 20 20 16" />
+                          <line x1="14" y1="14" x2="20" y2="20" />
+                          <polyline points="8 4 4 4 4 8" />
+                          <line x1="4" y1="4" x2="10" y2="10" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="5 9 9 9 9 5" />
+                          <line x1="3" y1="3" x2="9" y2="9" />
+                          <polyline points="5 15 9 15 9 19" />
+                          <line x1="3" y1="21" x2="9" y2="15" />
+                          <polyline points="19 9 15 9 15 5" />
+                          <line x1="15" y1="9" x2="21" y2="3" />
+                          <polyline points="19 15 15 15 15 19" />
+                          <line x1="15" y1="15" x2="21" y2="21" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M3 9l4-4l4 4m-4 -4v14" />
+                          <path d="M21 15l-4 4l-4-4m4 4v-14" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="8 7 12 3 16 7" />
+                          <polyline points="8 17 12 21 16 17" />
+                          <line x1="12" y1="3" x2="12" y2="21" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="8" y="8" width="8" height="8" rx="1" />
+                          <line x1="3" y1="8" x2="4" y2="8" />
+                          <line x1="3" y1="16" x2="4" y2="16" />
+                          <line x1="8" y1="3" x2="8" y2="4" />
+                          <line x1="16" y1="3" x2="16" y2="4" />
+                          <line x1="20" y1="8" x2="21" y2="8" />
+                          <line x1="20" y1="16" x2="21" y2="16" />
+                          <line x1="8" y1="20" x2="8" y2="21" />
+                          <line x1="16" y1="20" x2="16" y2="21" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="4" />
+                          <path d="M16 12v1.5a2.5 2.5 0 0 0 5 0v-1.5a9 9 0 1 0 -5.5 8.28" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="12" y1="12" x2="12" y2="12.01" />
+                          <path d="M12 2a4 10 0 0 0 -4 10a4 10 0 0 0 4 10a4 10 0 0 0 4 -10a4 10 0 0 0 -4 -10" transform="rotate(45 12 12)" />
+                          <path d="M12 2a4 10 0 0 0 -4 10a4 10 0 0 0 4 10a4 10 0 0 0 4 -10a4 10 0 0 0 -4 -10" transform="rotate(-45 12 12)" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="9" r="6" />
+                          <polyline points="9 14.2 9 21 12 19 15 21 15 14.2" transform="rotate(-30 12 9)" />
+                          <polyline points="9 14.2 9 21 12 19 15 21 15 14.2" transform="rotate(30 12 9)" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M20 6a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-11l-5 -5a1.5 1.5 0 0 1 0 -2l5 -5Z" />
+                          <path d="M12 10l4 4m0 -4l-4 4" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <line x1="5.7" y1="5.7" x2="18.3" y2="18.3" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="14" y1="12" x2="14" y2="12.01" />
+                          <line x1="10" y1="12" x2="10" y2="12.01" />
+                          <line x1="12" y1="10" x2="12" y2="10.01" />
+                          <line x1="12" y1="14" x2="12" y2="14.01" />
+                          <path d="M4.5 12.5l8 -8a4.94 4.94 0 0 1 7 7l-8 8a4.94 4.94 0 0 1 -7 -7" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M6 7h11a2 2 0 0 1 2 2v.5a.5 .5 0 0 0 .5 .5a.5 .5 0 0 1 .5 .5v3a.5 .5 0 0 1 -.5 .5a.5 .5 0 0 0 -.5 .5v.5a2 2 0 0 1 -2 2h-11a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2" />
+                        </svg>
+                      </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="10 9 15 4 20 9"></polyline><path d="M4 20h7a4 4 0 0 0 4-4V4"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M6 7h11a2 2 0 0 1 2 2v.5a.5 .5 0 0 0 .5 .5a.5 .5 0 0 1 .5 .5v3a.5 .5 0 0 1 -.5 .5a.5 .5 0 0 0 -.5 .5v.5a2 2 0 0 1 -2 2h-11a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2" />
+                          <line x1="7" y1="10" x2="7" y2="14" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M6 7h11a2 2 0 0 1 2 2v.5a.5 .5 0 0 0 .5 .5a.5 .5 0 0 1 .5 .5v3a.5 .5 0 0 1 -.5 .5a.5 .5 0 0 0 -.5 .5v.5a2 2 0 0 1 -2 2h-11a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2" />
+                          <line x1="7" y1="10" x2="7" y2="14" />
+                          <line x1="10" y1="10" x2="10" y2="14" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="9 14 4 9 9 4"></polyline><path d="M20 20v-7a4 4 0 0 0-4-4H4"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M6 7h11a2 2 0 0 1 2 2v.5a.5 .5 0 0 0 .5 .5a.5 .5 0 0 1 .5 .5v3a.5 .5 0 0 1 -.5 .5a.5 .5 0 0 0 -.5 .5v.5a2 2 0 0 1 -2 2h-11a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2" />
+                          <line x1="7" y1="10" x2="7" y2="14" />
+                          <line x1="10" y1="10" x2="10" y2="14" />
+                          <line x1="13" y1="10" x2="13" y2="14" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="15 14 20 9 15 4"></polyline><path d="M4 20v-7a4 4 0 0 1 4-4h12"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M6 7h11a2 2 0 0 1 2 2v.5a.5 .5 0 0 0 .5 .5a.5 .5 0 0 1 .5 .5v3a.5 .5 0 0 1 -.5 .5a.5 .5 0 0 0 -.5 .5v.5a2 2 0 0 1 -2 2h-11a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2" />
+                          <line x1="7" y1="10" x2="7" y2="14" />
+                          <line x1="10" y1="10" x2="10" y2="14" />
+                          <line x1="13" y1="10" x2="13" y2="14" />
+                          <line x1="16" y1="10" x2="16" y2="14" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M16 7h1a2 2 0 0 1 2 2v.5a.5 .5 0 0 0 .5 .5a.5 .5 0 0 1 .5 .5v3a.5 .5 0 0 1 -.5 .5a.5 .5 0 0 0 -.5 .5v.5a2 2 0 0 1 -2 2h-2" />
+                          <path d="M8 7H6a2 2 0 0 0 -2 2v6a2 2 0 0 0 2 2h1" />
+                          <polyline points="12 8 10 12 13 12 11 16" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M3 7v11m0 -4h18m0 4v-8a2 2 0 0 0 -2 -2h-8v6" />
+                          <circle cx="7" cy="10" r="1" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <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>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="5" cy="18" r="3" />
+                          <circle cx="19" cy="18" r="3" />
+                          <polyline points="12 19 12 15 9 12 14 8 16 11 19 11" />
+                          <circle cx="17" cy="5" r="1" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="6 8 18 16 12 20 12 4 18 8 6 16" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6z" />
+                          <path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="13 3 13 10 19 10 11 21 11 14 5 14 13 3" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
+                          <path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
+                          <line x1="3" y1="6" x2="3" y2="19" />
+                          <line x1="12" y1="6" x2="12" y2="19" />
+                          <line x1="21" y1="6" x2="21" y2="19" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M9 4h6a2 2 0 0 1 2 2v14l-5-3l-5 3v-14a2 2 0 0 1 2 -2" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="4" width="16" height="16" rx="2" />
+                          <line x1="4" y1="12" x2="20" y2="12" />
+                          <line x1="12" y1="4" x2="12" y2="20" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="20" y1="20" x2="4" y2="20" />
+                          <g stroke-dasharray=".001 4">
+                            <line x1="4" y1="4" x2="20" y2="4" />
+                            <line x1="20" y1="4" x2="20" y2="20" />
+                            <line x1="4" y1="20" x2="4" y2="4" />
+                            <line x1="4" y1="12" x2="20" y2="12" />
+                            <line x1="12" y1="4" x2="12" y2="20" />
+                          </g>
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="4" y1="12" x2="20" y2="12" />
+                          <g stroke-dasharray=".001 4">
+                            <line x1="4" y1="4" x2="20" y2="4" />
+                            <line x1="4" y1="20" x2="4" y2="4" />
+                            <line x1="20" y1="20" x2="4" y2="20" />
+                            <line x1="20" y1="4" x2="20" y2="20" />
+                            <line x1="12" y1="4" x2="12" y2="20" />
+                          </g>
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="4" y1="12" x2="20" y2="12" />
+                          <line x1="12" y1="4" x2="12" y2="20" />
+                          <g stroke-dasharray=".001 4">
+                            <line x1="4" y1="4" x2="20" y2="4" />
+                            <line x1="4" y1="20" x2="4" y2="4" />
+                            <line x1="20" y1="20" x2="4" y2="20" />
+                            <line x1="20" y1="4" x2="20" y2="20" />
+                          </g>
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="4" y1="20" x2="4" y2="4" />
+                          <g stroke-dasharray=".001 4">
+                            <line x1="4" y1="4" x2="20" y2="4" />
+                            <line x1="20" y1="4" x2="20" y2="20" />
+                            <line x1="20" y1="20" x2="4" y2="20" />
+                            <line x1="4" y1="12" x2="20" y2="12" />
+                            <line x1="12" y1="4" x2="12" y2="20" />
+                          </g>
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <g stroke-dasharray=".001 4">
+                            <line x1="4" y1="4" x2="20" y2="4" />
+                            <line x1="20" y1="4" x2="20" y2="20" />
+                            <line x1="20" y1="20" x2="4" y2="20" />
+                            <line x1="4" y1="20" x2="4" y2="4" />
+                            <line x1="4" y1="12" x2="20" y2="12" />
+                            <line x1="12" y1="4" x2="12" y2="20" />
+                          </g>
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="4" width="16" height="16" rx="2" />
+                          <g stroke-dasharray=".001 4">
+                            <line x1="4" y1="12" x2="20" y2="12" />
+                            <line x1="12" y1="4" x2="12" y2="20" />
+                          </g>
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M16.01 4h4v16h-16v-4.01" stroke-dasharray=".001 4" />
+                          <path d="M4 12v-4a4 4 0 0 1 4 -4h4" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="20" y1="4" x2="20" y2="20" />
+                          <g stroke-dasharray=".001 4">
+                            <line x1="4" y1="4" x2="20" y2="4" />
+                            <line x1="20" y1="20" x2="4" y2="20" />
+                            <line x1="4" y1="20" x2="4" y2="4" />
+                            <line x1="4" y1="12" x2="20" y2="12" />
+                            <line x1="12" y1="4" x2="12" y2="20" />
+                          </g>
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="4" y1="4" x2="20" y2="4" />
+                          <g stroke-dasharray=".001 4">
+                            <line x1="20" y1="4" x2="20" y2="20" />
+                            <line x1="20" y1="20" x2="4" y2="20" />
+                            <line x1="4" y1="20" x2="4" y2="4" />
+                            <line x1="4" y1="12" x2="20" y2="12" />
+                            <line x1="12" y1="4" x2="12" y2="20" />
+                          </g>
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="12" y1="4" x2="12" y2="20" />
+                          <g stroke-dasharray=".001 4">
+                            <line x1="4" y1="12" x2="20" y2="12" />
+                            <line x1="4" y1="4" x2="20" y2="4" />
+                            <line x1="4" y1="20" x2="4" y2="4" />
+                            <line x1="20" y1="20" x2="4" y2="20" />
+                            <line x1="20" y1="4" x2="20" y2="20" />
+                          </g>
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <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" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="3" y="7" width="18" height="13" rx="2" />
+                          <path d="M8 7v-2a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v2" />
+                          <line x1="12" y1="12" x2="12" y2="12.01" />
+                          <path d="M3 13a20 20 0 0 0 18 0" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <line x1="12" y1="3" x2="12" y2="21" />
+                          <path d="M12 9l4.65 -4.65" />
+                          <path d="M12 14.3l7.37 -7.37" />
+                          <path d="M12 19.6l8.85 -8.85" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="3" />
+                          <line x1="12" y1="5" x2="12" y2="5.01" />
+                          <line x1="17" y1="7" x2="17" y2="7.01" />
+                          <line x1="19" y1="12" x2="19" y2="12.01" />
+                          <line x1="17" y1="17" x2="17" y2="17.01" />
+                          <line x1="12" y1="19" x2="12" y2="19.01" />
+                          <line x1="7" y1="17" x2="7" y2="17.01" />
+                          <line x1="5" y1="12" x2="5" y2="12.01" />
+                          <line x1="7" y1="7" x2="7" y2="7.01" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="3" />
+                          <line x1="12" y1="5" x2="12" y2="3" />
+                          <line x1="17" y1="7" x2="18.4" y2="5.6" />
+                          <line x1="19" y1="12" x2="21" y2="12" />
+                          <line x1="17" y1="17" x2="18.4" y2="18.4" />
+                          <line x1="12" y1="19" x2="12" y2="21" />
+                          <line x1="7" y1="17" x2="5.6" y2="18.4" />
+                          <line x1="6" y1="12" x2="4" y2="12" />
+                          <line x1="7" y1="7" x2="5.6" y2="5.6" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M19 9l-2 9a2 2.5 0 0 1 -2 2h-6a2 2.5 0 0 1 -2 -2l-2 -9Z" />
+                          <path d="M7 9a5 5 0 0 1 10 0" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M9 9v-1a3 3 0 0 1 6 0v1" />
+                          <path d="M8 9h8a6 6 0 0 1 1 3v3a5 5 0 0 1 -10 0v-3a6 6 0 0 1 1 -3" />
+                          <line x1="3" y1="13" x2="7" y2="13" />
+                          <line x1="17" y1="13" x2="21" y2="13" />
+                          <line x1="12" y1="20" x2="12" y2="14" />
+                          <line x1="4" y1="19" x2="7.35" y2="17" />
+                          <line x1="20" y1="19" x2="16.65" y2="17" />
+                          <line x1="4" y1="7" x2="7.75" y2="9.4" />
+                          <line x1="20" y1="7" x2="16.25" y2="9.4" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="3" y1="21" x2="21" y2="21" />
+                          <line x1="9" y1="8" x2="10" y2="8" />
+                          <line x1="9" y1="12" x2="10" y2="12" />
+                          <line x1="9" y1="16" x2="10" y2="16" />
+                          <line x1="14" y1="8" x2="15" y2="8" />
+                          <line x1="14" y1="12" x2="15" y2="12" />
+                          <line x1="14" y1="16" x2="15" y2="16" />
+                          <path d="M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="3" y1="21" x2="21" y2="21" />
+                          <path d="M4 21v-15a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v15" />
+                          <path d="M9 21v-8a3 3 0 0 1 6 0v8" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="6" y1="5" x2="6" y2="19" />
+                          <line x1="18" y1="5" x2="18" y2="19" />
+                          <line x1="2" y1="15" x2="22" y2="15" />
+                          <path d="M3 8a7.5 7.5 0 0 0 3 -2a6.5 6.5 0 0 0 12 0a7.5 7.5 0 0 0 3 2" />
+                          <line x1="12" y1="10" x2="12" y2="15" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M6 7h12a2 2 0 0 1 2 2v9a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-2a4 4 0 0 0 -8 0v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-9a2 2 0 0 1 2 -2" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="3" y1="21" x2="21" y2="21" />
+                          <path d="M10 21v-4a2 2 0 0 1 4 0v4" />
+                          <line x1="10" y1="5" x2="14" y2="5" />
+                          <line x1="12" y1="3" x2="12" y2="8" />
+                          <path d="M6 21v-7m-2 2l8 -8l8 8m-2 -2v7" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="3" y1="21" x2="21" y2="21" />
+                          <path d="M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16" />
+                          <path d="M9 21v-4a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v4" />
+                          <line x1="10" y1="9" x2="14" y2="9" />
+                          <line x1="12" y1="7" x2="12" y2="11" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="3" y1="21" x2="21" y2="21" />
+                          <path d="M3 7v1a3 3 0 0 0 6 0v-1m0 1a3 3 0 0 0 6 0v-1m0 1a3 3 0 0 0 6 0v-1h-18l2 -4h14l2 4" />
+                          <path d="M5 21v-10.15" />
+                          <path d="M19 21v-10.15" />
+                          <path d="M9 21v-4a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v4" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M3 12h1M12 3v1M20 12h1M5.6 5.6l.7 .7M18.4 5.6l-.7 .7" />
+                          <path d="M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3" />
+                          <line x1="9.7" y1="17" x2="14.3" y2="17" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3" />
+                          <line x1="9.7" y1="17" x2="14.3" y2="17" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="3" width="16" height="18" rx="2" />
+                          <rect x="8" y="7" width="8" height="3" rx="1" />
+                          <line x1="8" y1="14" x2="8" y2="14.01" />
+                          <line x1="12" y1="14" x2="12" y2="14.01" />
+                          <line x1="16" y1="14" x2="16" y2="14.01" />
+                          <line x1="8" y1="17" x2="8" y2="17.01" />
+                          <line x1="12" y1="17" x2="12" y2="17.01" />
+                          <line x1="16" y1="17" x2="16" y2="17.01" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="5" width="16" height="16" rx="2" />
+                          <line x1="16" y1="3" x2="16" y2="7" />
+                          <line x1="8" y1="3" x2="8" y2="7" />
+                          <line x1="4" y1="11" x2="20" y2="11" />
+                          <line x1="11" y1="15" x2="12" y2="15" />
+                          <line x1="12" y1="15" x2="12" y2="18" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="5" width="16" height="16" rx="2" />
+                          <line x1="16" y1="3" x2="16" y2="7" />
+                          <line x1="8" y1="3" x2="8" y2="7" />
+                          <line x1="4" y1="11" x2="20" y2="11" />
+                          <rect x="8" y="15" width="2" height="2" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2" />
+                          <circle cx="12" cy="13" r="3" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M18 15l-6-6l-6 6h12" transform="rotate(180 12 12)" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="14" x2="23" y2="14"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="14" x2="4" y2="14"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M18 15l-6-6l-6 6h12" transform="rotate(270 12 12)" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M18 15l-6-6l-6 6h12" transform="rotate(90 12 12)" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M6.13 1L6 16a2 2 0 0 0 2 2h15"></path><path d="M1 6.13L16 6a2 2 0 0 1 2 2v15"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M18 15l-6-6l-6 6h12" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="10"></circle><line x1="22" y1="12" x2="18" y2="12"></line><line x1="6" y1="12" x2="2" y2="12"></line><line x1="12" y1="6" x2="12" y2="2"></line><line x1="12" y1="22" x2="12" y2="18"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="7" y="9" width="14" height="10" rx="2" />
+                          <circle cx="14" cy="14" r="2" />
+                          <path d="M17 9v-2a2 2 0 0 0 -2 -2h-10a2 2 0 0 0 -2 2v6a2 2 0 0 0 2 2h2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="3" y1="19" x2="3.01" y2="19" />
+                          <path d="M7 19a4 4 0 0 0 -4 -4" />
+                          <path d="M11 19a8 8 0 0 0 -8 -8" />
+                          <path d="M15 19h3a3 3 0 0 0 3 -3v-8a3 3 0 0 0 -3 -3h-12a3 3 0 0 0 -2.8 2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M21 4H8l-7 8 7 8h13a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"></path><line x1="18" y1="9" x2="12" y2="15"></line><line x1="12" y1="9" x2="18" y2="15"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="4" y1="19" x2="20" y2="19" />
+                          <polyline points="4 15 8 9 12 11 16 6 20 10 20 15 4 15" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="3"></circle></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="4 19 8 13 12 15 16 10 20 14 20 19 4 19" />
+                          <polyline points="4 12 7 8 11 10 16 4 20 8" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="3" y="12" width="6" height="8" rx="1" />
+                          <rect x="9" y="8" width="6" height="12" rx="1" />
+                          <rect x="15" y="4" width="6" height="16" rx="1" />
+                          <line x1="4" y1="20" x2="18" y2="20" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="8 17 12 21 16 17"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="6" width="4" height="5" rx="1" />
+                          <line x1="6" y1="4" x2="6" y2="6" />
+                          <line x1="6" y1="11" x2="6" y2="20" />
+                          <rect x="10" y="14" width="4" height="5" rx="1" />
+                          <line x1="12" y1="4" x2="12" y2="14" />
+                          <line x1="12" y1="19" x2="12" y2="20" />
+                          <rect x="16" y="5" width="4" height="6" rx="1" />
+                          <line x1="18" y1="4" x2="18" y2="5" />
+                          <line x1="18" y1="11" x2="18" y2="20" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M10 3.2a9 9 0 1 0 10.8 10.8a1 1 0 0 0 -1 -1h-3.8a4.1 4.1 0 1 1 -5 -5v-4a.9 .9 0 0 0 -1 -.8" />
+                          <path d="M15 3.5a9 9 0 0 1 5.5 5.5h-4.5a9 9 0 0 0 -1 -1v-4.5" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="4" y1="19" x2="20" y2="19" />
+                          <polyline points="4 15 8 9 12 11 16 6 20 10" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M10 3.2a9 9 0 1 0 10.8 10.8a1 1 0 0 0 -1 -1h-6.8a2 2 0 0 1 -2 -2v-7a.9 .9 0 0 0 -1 -.8" />
+                          <path d="M15 3.5a9 9 0 0 1 5.5 5.5h-4.5a1 1 0 0 1 -1 -1v-4.5" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="20 7 10 17 5 12" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="6 9 12 15 18 9" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="15 6 9 12 15 18" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="9 6 15 12 9 18" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="6 15 12 9 18 15" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="7 7 12 12 17 7" />
+                          <polyline points="7 13 12 18 17 13" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polygon points="13 19 22 12 13 5 13 19"></polygon><polygon points="2 19 11 12 2 5 2 19"></polygon></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="11 7 6 12 11 17" />
+                          <polyline points="17 7 12 12 17 17" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"></path><line x1="16" y1="8" x2="2" y2="22"></line><line x1="17.5" y1="15" x2="9" y2="15"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="7 7 12 12 7 17" />
+                          <polyline points="13 7 18 12 13 17" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z"></path><path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z"></path><path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z"></path><path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z"></path><path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="7 11 12 6 17 11" />
+                          <polyline points="7 17 12 12 17 17" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="9" y1="15" x2="15" y2="15"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <circle cx="12" cy="12" r="3" />
+                          <line x1="12" y1="9" x2="20.5" y2="9" />
+                          <line x1="12" y1="9" x2="20.5" y2="9" transform="rotate(120 12 12)" />
+                          <line x1="12" y1="9" x2="20.5" y2="9" transform="rotate(240 12 12)" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="12" y1="18" x2="12" y2="12"></line><line x1="9" y1="15" x2="15" y2="15"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <path d="M9 12l2 2l4 -4" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <line x1="9" y1="12" x2="15" y2="12" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect><line x1="7" y1="2" x2="7" y2="22"></line><line x1="17" y1="2" x2="17" y2="22"></line><line x1="2" y1="12" x2="22" y2="12"></line><line x1="2" y1="7" x2="7" y2="7"></line><line x1="2" y1="17" x2="7" y2="17"></line><line x1="17" y1="17" x2="22" y2="17"></line><line x1="17" y1="7" x2="22" y2="7"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <line x1="9" y1="12" x2="15" y2="12" />
+                          <line x1="12" y1="9" x2="12" y2="15" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <path d="M10 10l4 4m0 -4l-4 4" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" y1="22" x2="4" y2="15"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M9 5H7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2V7a2 2 0 0 0 -2 -2h-2" />
+                          <rect x="9" y="3" width="6" height="4" rx="2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path><line x1="9" y1="14" x2="15" y2="14"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M9 5H7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2V7a2 2 0 0 0 -2 -2h-2" />
+                          <rect x="9" y="3" width="6" height="4" rx="2" />
+                          <path d="M9 14l2 2l4 -4" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path><line x1="12" y1="11" x2="12" y2="17"></line><line x1="9" y1="14" x2="15" y2="14"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M9 5H7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2V7a2 2 0 0 0 -2 -2h-2" />
+                          <rect x="9" y="3" width="6" height="4" rx="2" />
+                          <line x1="9" y1="12" x2="9.01" y2="12" />
+                          <line x1="13" y1="12" x2="15" y2="12" />
+                          <line x1="9" y1="16" x2="9.01" y2="16" />
+                          <line x1="13" y1="16" x2="15" y2="16" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M9 5H7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2V7a2 2 0 0 0 -2 -2h-2" />
+                          <rect x="9" y="3" width="6" height="4" rx="2" />
+                          <path d="M10 12l4 4m0 -4l-4 4" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="10"></circle><path d="M16 16s-1.5-2-4-2-4 2-4 2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <polyline points="12 7 12 12 9 15" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="20 12 20 22 4 22 4 12"></polyline><rect x="2" y="7" width="20" height="5"></rect><line x1="12" y1="22" x2="12" y2="7"></line><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M7 18a4.6 4.4 0 0 1 0 -9h0a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-12" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="6" y1="3" x2="6" y2="15"></line><circle cx="18" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><path d="M18 9a9 9 0 0 1-9 9"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M19 18a3.5 3.5 0 0 0 0 -7h-1a5 4.5 0 0 0 -11 -2a4.6 4.4 0 0 0 -2.1 8.4" />
+                          <line x1="12" y1="13" x2="12" y2="22" />
+                          <polyline points="9 19 12 22 15 19" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="4"></circle><line x1="1.05" y1="12" x2="7" y2="12"></line><line x1="17.01" y1="12" x2="22.96" y2="12"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M7 18a4.6 4.4 0 0 1 0 -9h0a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7" />
+                          <path d="M11 13v2m0 3v2m4 -5v2m0 3v2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="18" cy="18" r="3"></circle><circle cx="6" cy="6" r="3"></circle><path d="M6 21V9a9 9 0 0 0 9 9"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M7 18a4.6 4.4 0 0 1 0 -9h0a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7" />
+                          <path d="M11 15v.01m0 3v.01m0 3v.01m4 -4v.01m0 3v.01" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="18" cy="18" r="3"></circle><circle cx="6" cy="6" r="3"></circle><path d="M13 6h3a2 2 0 0 1 2 2v7"></path><line x1="6" y1="9" x2="6" y2="21"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M7 18a4.6 4.4 0 0 1 0 -9h0a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1" />
+                          <polyline points="13 14 11 18 14 18 12 22" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M7 18a4.6 4.4 0 0 1 0 -9h0a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1" />
+                          <polyline points="9 15 12 12 15 15" />
+                          <line x1="12" y1="12" x2="12" y2="21" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="7 8 3 12 7 16" />
+                          <polyline points="17 8 21 12 17 16" />
+                          <line x1="14" y1="4" x2="10" y2="20" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <path d="M14.8 9a2 2 0 0 0 -1.8 -1h-2a2 2 0 0 0 0 4h2a2 2 0 0 1 0 4h-2a2 2 0 0 1 -1.8 -1" />
+                          <path d="M12 6v2m0 8v2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M19 3h-4a2 2 0 0 0 -2 2v12a4 4 0 0 0 8 0v-12a2 2 0 0 0 -2 -2" />
+                          <path d="M13 7.35l-2 -2a2 2 0 0 0 -2.828 0l-2.828 2.828a2 2 0 0 0 0 2.828l 9 9" />
+                          <path d="M7.3 13h-2.3a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h12" />
+                          <line x1="17" y1="17" x2="17" y2="17.01" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="22" y1="12" x2="2" y2="12"></line><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path><line x1="6" y1="16" x2="6.01" y2="16"></line><line x1="10" y1="16" x2="10.01" y2="16"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="4" y1="6" x2="9.5" y2="6" />
+                          <line x1="4" y1="10" x2="9.5" y2="10" />
+                          <line x1="4" y1="14" x2="9.5" y2="14" />
+                          <line x1="4" y1="18" x2="9.5" y2="18" />
+                          <line x1="14.5" y1="6" x2="20" y2="6" />
+                          <line x1="14.5" y1="10" x2="20" y2="10" />
+                          <line x1="14.5" y1="14" x2="20" y2="14" />
+                          <line x1="14.5" y1="18" x2="20" y2="18" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="4" y1="9" x2="20" y2="9"></line><line x1="4" y1="15" x2="20" y2="15"></line><line x1="10" y1="3" x2="8" y2="21"></line><line x1="16" y1="3" x2="14" y2="21"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M7 9a2 2 0 1 1 2 -2v10a2 2 0 1 1 -2 -2h10a2 2 0 1 1 -2 2v-10a2 2 0 1 1 2 2h-10" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M3 18v-6a9 9 0 0 1 18 0v6"></path><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="8 16 10 10 16 8 14 14 8 16" />
+                          <circle cx="12" cy="12" r="9" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="8" y="8" width="12" height="12" rx="2" />
+                          <path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <path d="M14.5 9a3.5 4 0 1 0 0 6" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M18 6v6a3 3 0 0 1 -3 3h-10l5 -5m0 10l-5 -5" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M6 6v6a3 3 0 0 0 3 3h10l-5 -5m0 10l5 -5" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M18 6h-6a3 3 0 0 0 -3 3v10l-5 -5m10 0l-5 5" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M18 18h-6a3 3 0 0 1 -3 -3v-10l-5 5m10 0l-5 -5" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M6 6h6a3 3 0 0 1 3 3v10l-5 -5m10 0l-5 5" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M6 18h6a3 3 0 0 0 3 -3v-10l-5 5m10 0l-5 -5" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="19" y1="4" x2="10" y2="4"></line><line x1="14" y1="20" x2="5" y2="20"></line><line x1="15" y1="4" x2="9" y2="20"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M18 18v-6a3 3 0 0 0 -3 -3h-10l5 -5m0 10l-5 -5" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M6 18v-6a3 3 0 0 1 3 -3h10l-5 -5m0 10l5 -5" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="3" y="5" width="18" height="14" rx="3" />
+                          <line x1="3" y1="10" x2="21" y2="10" />
+                          <line x1="7" y1="15" x2="7.01" y2="15" />
+                          <line x1="11" y1="15" x2="13" y2="15" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M8 5v10a1 1 0 0 0 1 1h10" />
+                          <path d="M5 8h10a1 1 0 0 1 1 1v10" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="4"></circle><line x1="4.93" y1="4.93" x2="9.17" y2="9.17"></line><line x1="14.83" y1="14.83" x2="19.07" y2="19.07"></line><line x1="14.83" y1="9.17" x2="19.07" y2="4.93"></line><line x1="14.83" y1="9.17" x2="18.36" y2="5.64"></line><line x1="4.93" y1="19.07" x2="9.17" y2="14.83"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M16.7 8a3 3 0 0 0 -2.7 -2h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1 -2.7 -2" />
+                          <path d="M12 3v3m0 12v3" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M17.2 7a6 7 0 1 0 0 10" />
+                          <path d="M13 10h-8m0 4h8" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="7" cy="17" r="3" />
+                          <circle cx="17" cy="17" r="3" />
+                          <line x1="9.15" y1="14.85" x2="18" y2="4" />
+                          <line x1="6" y1="4" x2="14.85" y2="14.85" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="13" r="2" />
+                          <line x1="13.45" y1="11.55" x2="15.5" y2="9.5" />
+                          <path d="M6.4 20a9 9 0 1 1 11.2 0Z" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <ellipse cx="12" cy="6" rx="8" ry="3"></ellipse>
+                          <path d="M4 6v6a8 3 0 0 0 16 0v-6" />
+                          <path d="M4 12v6a8 3 0 0 0 16 0v-6" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="3" y="4" width="18" height="12" rx="1" />
+                          <line x1="7" y1="20" x2="17" y2="20" />
+                          <line x1="9" y1="16" x2="9" y2="20" />
+                          <line x1="15" y1="16" x2="15" y2="20" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2" />
+                          <circle cx="12" cy="14" r="2" />
+                          <polyline points="14 4 14 8 8 8 8 4" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path><polyline points="10 17 15 12 10 7"></polyline><line x1="15" y1="12" x2="3" y2="12"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="2" y="6" width="20" height="12" rx="2" />
+                          <path d="M6 12h4m-2 -2v4" />
+                          <line x1="15" y1="11" x2="15" y2="11.01" />
+                          <line x1="18" y1="13" x2="18" y2="13.01" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="3" y1="19" x2="21" y2="19" />
+                          <rect x="5" y="6" width="14" height="10" rx="1" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="7" y="4" width="10" height="16" rx="1" />
+                          <line x1="11" y1="5" x2="13" y2="5" />
+                          <line x1="12" y1="17" x2="12" y2="17.01" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <g transform="rotate(20 12 12)">
+                            <rect x="7" y="4" width="10" height="16" rx="1" />
+                            <line x1="11" y1="5" x2="13" y2="5" />
+                            <line x1="12" y1="17" x2="12" y2="17.01" />
+                            <line x1="3" y1="8" x2="3" y2="16" />
+                            <line x1="21" y1="8" x2="21" y2="16" />
+                          </g>
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="5" y="3" width="14" height="18" rx="2" />
+                          <circle cx="12" cy="14" r="3" />
+                          <line x1="12" y1="7" x2="12" y2="7.01" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="5" y="3" width="14" height="18" rx="1" />
+                          <circle cx="12" cy="17" r="1" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="3" y="7" width="18" height="13" rx="2" />
+                          <polyline points="16 3 12 7 8 3" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="13" y="8" width="8" height="12" rx="1" />
+                          <path d="M18 8v-3a1 1 0 0 0 -1 -1h-13a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1h9" />
+                          <line x1="16" y1="9" x2="18" y2="9" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M6 5h12l3 5l-8.5 9.5a.7 .7 0 0 1 -1 0l-8.5 -9.5l3 -5" />
+                          <path d="M10 12l-2 -2.2l.6 -1" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="4" width="16" height="16" rx="2" />
+                          <circle cx="8.5" cy="8.5" r=".5" />
+                          <circle cx="15.5" cy="8.5" r=".5" />
+                          <circle cx="15.5" cy="15.5" r=".5" />
+                          <circle cx="8.5" cy="15.5" r=".5" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M9 5h10l2 2l-2 2h-10a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1" />
+                          <path d="M13 13h-7l-2 2l2 2h7a1 1 0 0 0 1 -1v-2a1 1 0 0 0 -1 -1" />
+                          <line x1="12" y1="22" x2="12" y2="17" />
+                          <line x1="12" y1="13" x2="12" y2="9" />
+                          <line x1="12" y1="5" x2="12" y2="3" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="11" cy="5" r="2" />
+                          <polyline points="11 7 11 15 15 15 19 20" />
+                          <line x1="11" y1="11" x2="16" y2="11" />
+                          <path d="M7 11.5a4.97 4.97 0 1 0 6 7.5" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
-                      </li>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <circle cx="12" cy="12" r="1" />
+                          <path d="M7 12a5 5 0 0 1 5 -5" />
+                          <path d="M12 17a5 5 0 0 0 5 -5" />
+                        </svg>
+                      </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"></polygon><line x1="8" y1="2" x2="8" y2="18"></line><line x1="16" y1="6" x2="16" y2="22"></line></svg>
-                      </li>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="5" cy="12" r="1" />
+                          <circle cx="12" cy="12" r="1" />
+                          <circle cx="19" cy="12" r="1" />
+                        </svg>
+                      </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="15 3 21 3 21 9"></polyline><polyline points="9 21 3 21 3 15"></polyline><line x1="21" y1="3" x2="14" y2="10"></line><line x1="3" y1="21" x2="10" y2="14"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <line x1="8" y1="12" x2="8" y2="12.01" />
+                          <line x1="12" y1="12" x2="12" y2="12.01" />
+                          <line x1="16" y1="12" x2="16" y2="12.01" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="7" cy="17" r="1" />
+                          <circle cx="12" cy="12" r="1" />
+                          <circle cx="17" cy="7" r="1" />
+                        </svg>
                       </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="10"></circle><line x1="8" y1="15" x2="16" y2="15"></line><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="7" cy="7" r="1" />
+                          <circle cx="12" cy="12" r="1" />
+                          <circle cx="17" cy="17" r="1" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="1" />
+                          <circle cx="12" cy="19" r="1" />
+                          <circle cx="12" cy="5" r="1" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
+                          <polyline points="7 11 12 16 17 11" />
+                          <line x1="12" y1="4" x2="12" y2="16" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M16 8v-4h-12v12.01h4" stroke-dasharray=".001 4" />
+                          <path d="M20 12v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" />
+                          <path d="M22 19l-6 -4v7.2l2.6 -2.6l3.4-.6" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M16 8v-4h-12v12.01h4" stroke-dasharray=".001 4" />
+                          <rect x="8" y="8" width="12" height="12" rx="2" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M12 3l5 5a7 7 0 1 1 -10 0l5 -5" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M9 7 h-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>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M6 14a6 6 0 0 0 12 0a12 12 0 0 0 -3 -8.5a3.7 3.7 0 0 0 -6 0a12 12 0 0 0 -3 8.5" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M19 19h-11l-4 -4a1 1 0 0 1 0 -1.41l10 -10a1 1 0 0 1 1.41 0l5 5a1 1 0 0 1 0 1.41l-9 9" />
+                          <path d="M18 12.3l-6.3 -6.3" />
+                        </svg>
                       </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="4" width="16" height="16" rx="2" />
+                          <line x1="4.6" y1="19.4" x2="19.4" y2="4.6" />
+                          <path d="M7 9h4m-2 -2v4" />
+                          <path d="M13 16h4" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+                          <line x1="10" y1="14" x2="20" y2="4" />
+                          <polyline points="15 4 20 4 20 9" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="2" />
+                          <path d="M2 12l1.5 2a11 11 0 0 0 17 0l1.5 -2" />
+                          <path d="M2 12l1.5 -2a11 11 0 0 1 17 0l1.5 2" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M4 8v-2a2 2 0 0 1 2 -2h2" />
+                          <path d="M4 16v2a2 2 0 0 0 2 2h2" />
+                          <path d="M16 4h2a2 2 0 0 1 2 2v2" />
+                          <path d="M16 20h2a2 2 0 0 0 2 -2v-2" />
+                          <line x1="9" y1="10" x2="9.01" y2="10" />
+                          <line x1="15" y1="10" x2="15.01" y2="10" />
+                          <path d="M9.5 15a3.5 3.5 0 0 0 5 0" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="14 3 14 8 19 8" />
+                          <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="14 3 14 8 19 8" />
+                          <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
+                          <path d="M9 15l2 2l4 -4" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="14 3 14 8 19 8" />
+                          <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
+                          <line x1="12" y1="11" x2="12" y2="17" />
+                          <polyline points="9 14 12 17 15 14" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="14 3 14 8 19 8" />
+                          <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
+                          <line x1="9" y1="7" x2="10" y2="7" />
+                          <line x1="9" y1="13" x2="15" y2="13" />
+                          <line x1="13" y1="17" x2="15" y2="17" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="14 3 14 8 19 8" />
+                          <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
+                          <line x1="9" y1="14" x2="15" y2="14" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="14 3 14 8 19 8" />
+                          <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
+                          <circle cx="11" cy="16" r="1" />
+                          <polyline points="12 16 12 11 14 12" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="14 3 14 8 19 8" />
+                          <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
+                          <line x1="12" y1="11" x2="12" y2="17" />
+                          <line x1="9" y1="14" x2="15" y2="14" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="14 3 14 8 19 8" />
+                          <path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4" />
+                          <line x1="3" y1="12" x2="21" y2="12" />
+                          <line x1="6" y1="16" x2="6" y2="18" />
+                          <line x1="10" y1="16" x2="10" y2="22" />
+                          <line x1="14" y1="16" x2="14" y2="18" />
+                          <line x1="18" y1="16" x2="18" y2="20" />
+                        </svg>
                       </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="14 3 14 8 19 8" />
+                          <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="14 3 14 8 19 8" />
+                          <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
+                          <path d="M10 12l4 4m0 -4l-4 4" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M5.5 5h13a1 1 0 0 1 0.5 1.5L14 12L14 19L10 16L10 12L5 6.5a1 1 0 0 1 0.5 -1.5" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="5" y1="5" x2="5" y2="21" />
+                          <line x1="19" y1="5" x2="19" y2="14" />
+                          <path d="M5 5a5 5 0 0 1 7 0a5 5 0 0 0 7 0" />
+                          <path d="M5 14a5 5 0 0 1 7 0a5 5 0 0 0 7 0" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="3" y1="12" x2="21" y2="12" />
+                          <polyline points="7 16 17 16 7 21 7 16" />
+                          <polyline points="7 8 17 8 7 3 7 8" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="12" y1="3" x2="12" y2="21" />
+                          <polyline points="16 7 16 17 21 17 16 7" />
+                          <polyline points="8 7 8 17 3 17 8 7" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M18 20h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9l5 5v9a2 2 0 0 1 -2 2" />
+                          <circle cx="12" cy="13" r="2" />
+                          <polyline points="4 8 10 8 10 4" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r=".5" />
+                          <circle cx="12" cy="12" r="9" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2" />
+                          <line x1="9" y1="13" x2="15" y2="13" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2" />
+                          <line x1="12" y1="10" x2="12" y2="16" />
+                          <line x1="9" y1="13" x2="15" y2="13" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2" />
+                          <path d="M10 11l4 4m0 -4l-4 4" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M9 4h3l2 2h5a2 2 0 0 1 2 2v7a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2" />
+                          <path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2h2" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="4" y1="7" x2="20" y2="7" />
+                          <line x1="4" y1="17" x2="20" y2="17" />
+                          <line x1="7" y1="4" x2="7" y2="20" />
+                          <line x1="17" y1="4" x2="17" y2="20" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="7" cy="5" r="2" />
+                          <path d="M5 22v-5l-1-1v-4a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4l-1 1v5" />
+                          <circle cx="17" cy="5" r="2" />
+                          <path d="M15 22v-4h-2l2 -6a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1l2 6h-2v4" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <circle cx="12" cy="12" r="1" />
+                          <line x1="13.41" y1="10.59" x2="16" y2="8" />
+                          <path d="M7 12a5 5 0 0 1 5 -5" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" />
+                          <line x1="10" y1="10" x2="10.01" y2="10" />
+                          <line x1="14" y1="10" x2="14.01" y2="10" />
+                          <path d="M10 14a3.5 3.5 0 0 0 4 0" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="3" y="8" width="18" height="4" rx="1" />
+                          <line x1="12" y1="8" x2="12" y2="21" />
+                          <path d="M19 12v7a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-7" />
+                          <path d="M7.5 8a2.5 2.5 0 0 1 0 -5a4.8 8 0 0 1 4.5 5a4.8 8 0 0 1 4.5 -5a2.5 2.5 0 0 1 0 5" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="7" cy="18" r="2" />
+                          <circle cx="7" cy="6" r="2" />
+                          <circle cx="17" cy="6" r="2" />
+                          <line x1="7" y1="8" x2="7" y2="16" />
+                          <path d="M9 18h6a2 2 0 0 0 2 -2v-5" />
+                          <polyline points="14 14 17 11 20 14" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="3" />
+                          <line x1="12" y1="3" x2="12" y2="9" />
+                          <line x1="12" y1="15" x2="12" y2="21" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="6" cy="6" r="2" />
+                          <circle cx="18" cy="18" r="2" />
+                          <path d="M11 6h5a2 2 0 0 1 2 2v8" />
+                          <polyline points="14 9 11 6 14 3" />
+                          <path d="M13 18h-5a2 2 0 0 1 -2 -2v-8" />
+                          <polyline points="10 15 13 18 10 21" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="18" r="2" />
+                          <circle cx="7" cy="6" r="2" />
+                          <circle cx="17" cy="6" r="2" />
+                          <path d="M7 8v2a2 2 0 0 0 2 2h6a2 2 0 0 0 2 -2v-2" />
+                          <line x1="12" y1="12" x2="12" y2="16" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="7" cy="18" r="2" />
+                          <circle cx="7" cy="6" r="2" />
+                          <circle cx="17" cy="12" r="2" />
+                          <line x1="7" y1="8" x2="7" y2="16" />
+                          <path d="M7 8a4 4 0 0 0 4 4h4" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="6" cy="18" r="2" />
+                          <circle cx="6" cy="6" r="2" />
+                          <circle cx="18" cy="18" r="2" />
+                          <line x1="6" y1="8" x2="6" y2="16" />
+                          <path d="M11 6h5a2 2 0 0 1 2 2v8" />
+                          <polyline points="14 9 11 6 14 3" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="8" y1="21" x2="16" y2="21" />
+                          <line x1="12" y1="15" x2="12" y2="21" />
+                          <path d="M16 4l1 6a5 5 0 0 1 -10 0l1 -6z" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="8" y1="21" x2="16" y2="21" />
+                          <line x1="12" y1="15" x2="12" y2="21" />
+                          <path d="M16 4l1 6a5 5 0 0 1 -10 0l1 -6z" />
+                          <path d="M7 10a4 4 0 0 1 5 0a4 4 0 0 0 5 0" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="10" r="4" />
+                          <path d="M6.75 16a8.015 8.015 0 1 0 9.25 -13" />
+                          <line x1="12" y1="18" x2="12" y2="22" />
+                          <line x1="8" y1="22" x2="16" y2="22" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="4" width="6" height="6" rx="1" />
+                          <rect x="14" y="4" width="6" height="6" rx="1" />
+                          <rect x="4" y="14" width="6" height="6" rx="1" />
+                          <rect x="14" y="14" width="6" height="6" rx="1" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="5" cy="5" r="1" />
+                          <circle cx="12" cy="5" r="1" />
+                          <circle cx="19" cy="5" r="1" />
+                          <circle cx="5" cy="12" r="1" />
+                          <circle cx="12" cy="12" r="1" />
+                          <circle cx="19" cy="12" r="1" />
+                          <circle cx="5" cy="19" r="1" />
+                          <circle cx="12" cy="19" r="1" />
+                          <circle cx="19" cy="19" r="1" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="5" y1="9" x2="19" y2="9" />
+                          <line x1="5" y1="15" x2="19" y2="15" />
+                          <line x1="11" y1="4" x2="7" y2="20" />
+                          <line x1="17" y1="4" x2="13" y2="20" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="13" rx="2" width="5" height="7" />
+                          <rect x="15" y="13" rx="2" width="5" height="7" />
+                          <path d="M4 15v-3a8 8 0 0 1 16 0v3" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="13" rx="2" width="4" height="6" />
+                          <rect x="16" y="13" rx="2" width="4" height="6" />
+                          <path d="M4 15v-3a8 8 0 0 1 16 0v3" />
+                          <path d="M18 19a6 3 0 0 1 -6 3" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <line x1="12" y1="17" x2="12" y2="17.01" />
+                          <path d="M12 13.5a1.5 1.5 0 0 1 1 -1.5a2.6 2.6 0 1 0 -3 -4" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <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>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <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" />
+                          <rect x="10" y="12" width="4" height="4" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="4" y1="20" x2="8" y2="16" />
+                          <line x1="5" y1="13" x2="11" y2="19" />
+                          <path d="M11 19l7 -7a4 4 0 0 0 -6 -6l-7 7" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="3" y="4" width="18" height="16" rx="3" />
+                          <circle cx="9" cy="10" r="2" />
+                          <line x1="15" y1="8" x2="17" y2="8" />
+                          <line x1="15" y1="12" x2="17" y2="12" />
+                          <line x1="7" y1="16" x2="17" y2="16" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="1" y1="1" x2="23" y2="23"></line><path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6"></path><path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23"></path><line x1="12" y1="19" x2="12" y2="23"></line><line x1="8" y1="23" x2="16" y2="23"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="4" width="16" height="16" rx="2" />
+                          <path d="M4 13h3l3 3h4l3 -3h3" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="20" y1="6" x2="13" y2="6" />
+                          <line x1="20" y1="12" x2="11" y2="12" />
+                          <line x1="20" y1="18" x2="13" y2="18" />
+                          <path d="M8 8l-4 4l4 4" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" y1="19" x2="12" y2="23"></line><line x1="8" y1="23" x2="16" y2="23"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="20" y1="6" x2="9" y2="6" />
+                          <line x1="20" y1="12" x2="13" y2="12" />
+                          <line x1="20" y1="18" x2="9" y2="18" />
+                          <path d="M4 8l4 4l-4 4" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="4 14 10 14 10 20"></polyline><polyline points="20 10 14 10 14 4"></polyline><line x1="14" y1="10" x2="21" y2="3"></line><line x1="3" y1="21" x2="10" y2="14"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M9.828 9.172a4 4 0 1 0 0 5.656 a10 10 0 0 0 2.172 -2.828a10 10 0 0 1 2.172 -2.828 a4 4 0 1 1 0 5.656a10 10 0 0 1 -2.172 -2.828a10 10 0 0 0 -2.172 -2.828" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <line x1="12" y1="8" x2="12.01" y2="8" />
+                          <polyline points="11 12 12 12 12 16 13 16" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="10"></circle><line x1="8" y1="12" x2="16" y2="12"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="12" y1="8" x2="12.01" y2="8" />
+                          <rect x="4" y="4" width="16" height="16" rx="2" />
+                          <polyline points="11 12 12 12 12 16 13 16" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="8" y1="12" x2="16" y2="12"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="11" y1="5" x2="17" y2="5" />
+                          <line x1="7" y1="19" x2="13" y2="19" />
+                          <line x1="14" y1="5" x2="10" y2="19" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="8" cy="15" r="4" />
+                          <line x1="10.85" y1="12.15" x2="19" y2="4" />
+                          <line x1="18" y1="5" x2="20" y2="7" />
+                          <line x1="15" y1="8" x2="17" y2="10" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M16 16v2a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-8a2 2 0 0 1 2 -2h2v-2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-2" />
+                          <polyline points="8 8 16 8 16 16 8 16 8 8" stroke-dasharray="4 4" stroke-dashoffset="2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="8" y="4" width="12" height="12" rx="2" />
+                          <rect x="4" y="8" width="12" height="12" rx="2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="8" y="4" width="12" height="12" rx="2" />
+                          <path d="M16 16v2a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-8a2 2 0 0 1 2 -2h2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M16 16v2a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-8a2 2 0 0 1 2 -2h2v-2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path><path d="M13 13l6 6"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <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="16" rx="2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="5 9 2 12 5 15"></polyline><polyline points="9 5 12 2 15 5"></polyline><polyline points="15 19 12 22 9 19"></polyline><polyline points="19 9 22 12 19 15"></polyline><line x1="2" y1="12" x2="22" y2="12"></line><line x1="12" y1="2" x2="12" y2="22"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <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>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="4" y1="20" x2="20" y2="20" />
+                          <rect x="9" y="4" width="6" height="12" rx="2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polygon points="12 2 19 21 12 17 5 21 12 2"></polygon></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="12" y1="4" x2="12" y2="9" />
+                          <line x1="12" y1="15" x2="12" y2="20" />
+                          <rect x="6" y="9" width="12" height="6" rx="2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polygon points="3 11 22 2 13 21 11 13 3 11"></polygon></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="4" y1="4" x2="4" y2="20" />
+                          <rect x="8" y="9" width="12" height="6" rx="2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="4" y1="12" x2="9" y2="12" />
+                          <line x1="15" y1="12" x2="20" y2="12" />
+                          <rect x="9" y="6" width="6" height="12" rx="2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="20" y1="4" x2="20" y2="20" />
+                          <rect x="4" y="9" width="12" height="6" rx="2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="4" y1="4" x2="20" y2="4" />
+                          <rect x="9" y="8" width="6" height="12" rx="2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="10"></circle><line x1="10" y1="15" x2="10" y2="9"></line><line x1="14" y1="15" x2="14" y2="9"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="4" width="16" height="16" rx="2" />
+                          <line x1="4" y1="15" x2="20" y2="15" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="4" width="16" height="16" rx="2" />
+                          <line x1="12" y1="4" x2="12" y2="20" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M12 19l7-7 3 3-7 7-3-3z"></path><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"></path><path d="M2 2l7.586 7.586"></path><circle cx="11" cy="11" r="2"></circle></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="4" y1="4" x2="20" y2="4" />
+                          <line x1="4" y1="20" x2="20" y2="20" />
+                          <rect x="6" y="9" width="12" height="6" rx="2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="19" y1="5" x2="5" y2="19"></line><circle cx="6.5" cy="6.5" r="2.5"></circle><circle cx="17.5" cy="17.5" r="2.5"></circle></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="4" y1="4" x2="4" y2="20" />
+                          <line x1="20" y1="4" x2="20" y2="20" />
+                          <rect x="9" y="6" width="6" height="12" rx="2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M15.05 5A5 5 0 0 1 19 8.95M15.05 1A9 9 0 0 1 23 8.94m-1 7.98v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="4" width="16" height="16" rx="2" />
+                          <line x1="4" y1="9" x2="20" y2="9" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="19 1 23 5 19 9"></polyline><line x1="15" y1="5" x2="23" y2="5"></line><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="4" width="16" height="16" rx="2" />
+                          <line x1="4" y1="12" x2="20" y2="12" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="16 2 16 8 22 8"></polyline><line x1="23" y1="1" x2="16" y2="8"></line><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="4" width="16" height="16" rx="2" />
+                          <line x1="9" y1="4" x2="9" y2="20" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="23" y1="1" x2="17" y2="7"></line><line x1="17" y1="1" x2="23" y2="7"></line><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="4" width="16" height="16" rx="2" />
+                          <line x1="15" y1="4" x2="15" y2="20" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.42 19.42 0 0 1-3.33-2.67m-2.67-3.34a19.79 19.79 0 0 1-3.07-8.63A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91"></path><line x1="23" y1="1" x2="1" y2="23"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="9.5" y1="11" x2="9.51" y2="11" />
+                          <line x1="14.5" y1="11" x2="14.51" y2="11" />
+                          <path d="M9.5 15a3.5 3.5 0 0 0 5 0" />
+                          <path d="M7 5h1v-2h8v2h1a3 3 0 0 1 3 3v9a3 3 0 0 1 -3 3v1h-10v-1a3 3 0 0 1 -3 -3v-9a3 3 0 0 1 3 -3" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="23 7 23 1 17 1"></polyline><line x1="16" y1="8" x2="23" y2="1"></line><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="4" />
+                          <circle cx="12" cy="12" r="9" />
+                          <line x1="15" y1="15" x2="18.35" y2="18.35" />
+                          <line x1="9" y1="15" x2="5.65" y2="18.35" />
+                          <line x1="5.65" y1="5.65" x2="9" y2="9" />
+                          <line x1="18.35" y1="5.65" x2="15" y2="9" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="3 8 6 5 9 8" />
+                          <polyline points="3 16 6 19 9 16" />
+                          <line x1="6" y1="5" x2="6" y2="19" />
+                          <line x1="13" y1="6" x2="20" y2="6" />
+                          <line x1="13" y1="12" x2="20" y2="12" />
+                          <line x1="13" y1="18" x2="20" y2="18" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />
+                          <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="9" y1="6" x2="20" y2="6" />
+                          <line x1="9" y1="12" x2="20" y2="12" />
+                          <line x1="9" y1="18" x2="20" y2="18" />
+                          <line x1="5" y1="6" x2="5" y2="6.01" />
+                          <line x1="5" y1="12" x2="5" y2="12.01" />
+                          <line x1="5" y1="18" x2="5" y2="18.01" />
+                        </svg>
                       </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="10"></circle><polygon points="10 8 16 12 10 16 10 8"></polygon></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M3.5 5.5l1.5 1.5l2.5 -2.5" />
+                          <path d="M3.5 11.5l1.5 1.5l2.5 -2.5" />
+                          <path d="M3.5 17.5l1.5 1.5l2.5 -2.5" />
+                          <line x1="11" y1="6" x2="20" y2="6" />
+                          <line x1="11" y1="12" x2="20" y2="12" />
+                          <line x1="11" y1="18" x2="20" y2="18" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="1" />
+                          <circle cx="12" cy="12" r="5" />
+                          <circle cx="12" cy="12" r="9" stroke-dasharray=".001 4.03" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M21 3L14.5 21a.55 .55 0 0 1 -1 0L10 14L3 10.5a.55 .55 0 0 1 0 -1L21 3" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="5" y="11" width="14" height="10" rx="2" />
+                          <circle cx="12" cy="16" r="1" />
+                          <path d="M8 11v-4a4 4 0 0 1 8 0v4" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="5" y="11" width="14" height="10" rx="2" />
+                          <circle cx="12" cy="16" r="1" />
+                          <path d="M8 11v-5a4 4 0 0 1 8 0" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M4 13v-8a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v8a2 2 0 0 0 6 0v-8a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v8a8 8 0 0 1 -16 0" />
+                          <line x1="4" y1="8" x2="9" y2="8" />
+                          <line x1="15" y1="8" x2="19" y2="8" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="3" y="5" width="18" height="14" rx="2" />
+                          <polyline points="3 7 12 13 21 7" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="3 9 12 15 21 9 12 3 3 9" />
+                          <path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" />
+                          <line x1="3" y1="19" x2="9" y2="13" />
+                          <line x1="15" y1="13" x2="21" y2="19" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="5" r="2" />
+                          <path d="M10 22v-5l-1-1v-4a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4l-1 1v5" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="3 7 9 4 15 7 21 4 21 17 15 20 9 17 3 20 3 7" />
+                          <line x1="9" y1="4" x2="9" y2="17" />
+                          <line x1="15" y1="7" x2="15" y2="20" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="18" y1="6" x2="18" y2="6.01" />
+                          <path d="M18 13l-3.5 -5a4 4 0 1 1 7 0l-3.5 5" />
+                          <polyline points="10.5 4.75 9 4 3 7 3 20 9 17 15 20 21 17 21 15" />
+                          <line x1="9" y1="4" x2="9" y2="17" />
+                          <line x1="15" y1="15" x2="15" y2="20" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="11" r="3" />
+                          <path d="M17.657 16.657L13.414 20.9a1.998 1.998 0 0 1 -2.827 0l-4.244-4.243a8 8 0 1 1 11.314 0z" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M4 8v-2a2 2 0 0 1 2 -2h2" />
+                          <path d="M4 16v2a2 2 0 0 0 2 2h2" />
+                          <path d="M16 4h2a2 2 0 0 1 2 2v2" />
+                          <path d="M16 20h2a2 2 0 0 0 2 -2v-2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                      </li>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="4" y1="8" x2="20" y2="8" />
+                          <line x1="4" y1="16" x2="20" y2="16" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M4 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4" />
+                          <line x1="8" y1="9" x2="16" y2="9" />
+                          <line x1="8" y1="13" x2="14" y2="13" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M12 20l-3 -3h-2a3 3 0 0 1 -3 -3v-6a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-2l-3 3" />
+                          <line x1="8" y1="9" x2="16" y2="9" />
+                          <line x1="8" y1="13" x2="14" y2="13" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1" />
+                          <line x1="12" y1="12" x2="12" y2="12.01" />
+                          <line x1="8" y1="12" x2="8" y2="12.01" />
+                          <line x1="16" y1="12" x2="16" y2="12.01" />
+                        </svg>
+                      </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M4 3h16a2 2 0 0 1 2 2v6a10 10 0 0 1-10 10A10 10 0 0 1 2 11V5a2 2 0 0 1 2-2z"></path><polyline points="8 10 12 14 16 10"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M4 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4" />
+                          <line x1="12" y1="11" x2="12" y2="11.01" />
+                          <line x1="8" y1="11" x2="8" y2="11.01" />
+                          <line x1="16" y1="11" x2="16" y2="11.01" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M18.36 6.64a9 9 0 1 1-12.73 0"></path><line x1="12" y1="2" x2="12" y2="12"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M21 14l-3 -3h-7a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1h9a1 1 0 0 1 1 1v10" />
+                          <path d="M14 15v2a1 1 0 0 1 -1 1h-7l-3 3v-10a1 1 0 0 1 1 -1h2" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="9" y="2" width="6" height="11" rx="3" />
+                          <path d="M5 10a7 7 0 0 0 14 0" />
+                          <line x1="8" y1="21" x2="16" y2="21" />
+                          <line x1="12" y1="17" x2="12" y2="21" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M15 19v-2a2 2 0 0 1 2 -2h2" />
+                          <path d="M15 5v2a2 2 0 0 0 2 2h2" />
+                          <path d="M5 15h2a2 2 0 0 1 2 2v2" />
+                          <path d="M5 9h2a2 2 0 0 0 2 -2v-2" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="5" y1="12" x2="19" y2="12" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <line x1="9" y1="10" x2="9.01" y2="10" />
+                          <line x1="15" y1="10" x2="15.01" y2="10" />
+                          <path d="M9.5 16a10 10 0 0 1 6 -1.5" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <line x1="9" y1="9" x2="9.01" y2="9" />
+                          <line x1="15" y1="9" x2="15.01" y2="9" />
+                          <path d="M8 13a4 4 0 1 0 8 0m0 0H8" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <line x1="9" y1="10" x2="9.01" y2="10" />
+                          <line x1="15" y1="10" x2="15.01" y2="10" />
+                          <line x1="9" y1="15" x2="15" y2="15" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <line x1="9" y1="10" x2="9.01" y2="10" />
+                          <line x1="15" y1="10" x2="15.01" y2="10" />
+                          <path d="M9.5 15.25a3.5 3.5 0 0 1 5 0" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <line x1="9" y1="10" x2="9.01" y2="10" />
+                          <line x1="15" y1="10" x2="15.01" y2="10" />
+                          <path d="M9.5 15a3.5 3.5 0 0 0 5 0" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <line x1="9" y1="10" x2="9.01" y2="10" />
+                          <line x1="15" y1="10" x2="15.01" y2="10" />
+                          <path d="M10 14v2a2 2 0 0 0 4 0v-2m1 0h-6" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M16.2 4a9.03 9.03 0 1 0 3.9 12a6.5 6.5 0 1 1 -3.9 -12" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="7" y="4" width="10" height="16" rx="4" />
+                          <line x1="12" y1="8" x2="12" y2="11" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="4" width="16" height="16" rx="2" />
+                          <line x1="8" y1="4" x2="8" y2="20" />
+                          <line x1="16" y1="4" x2="16" y2="20" />
+                          <line x1="4" y1="8" x2="8" y2="8" />
+                          <line x1="4" y1="16" x2="8" y2="16" />
+                          <line x1="4" y1="12" x2="20" y2="12" />
+                          <line x1="16" y1="8" x2="20" y2="8" />
+                          <line x1="16" y1="16" x2="20" y2="16" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M5 6h10a1 1 0 0 1 1 1v8a4 4 0 0 1 -4 4h-4a4 4 0 0 1 -4 -4v-8a1 1 0 0 1 1 -1" />
+                          <path d="M16 9h2a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-2" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="6" cy="17" r="3" />
+                          <circle cx="16" cy="17" r="3" />
+                          <polyline points="9 17 9 4 19 4 19 17" />
+                          <line x1="9" y1="8" x2="19" y2="8" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M16 6h3a1 1 0 0 1 1 1v11a2 2 0 0 1 -4 0v-13a1 1 0 0 0 -1 -1h-10a1 1 0 0 0 -1 1v12a3 3 0 0 0 3 3h11" />
+                          <line x1="8" y1="8" x2="12" y2="8" />
+                          <line x1="8" y1="12" x2="12" y2="12" />
+                          <line x1="8" y1="16" x2="12" y2="16" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="2"></circle><path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="13" y1="20" x2="20" y2="13" />
+                          <path d="M13 20v-6a1 1 0 0 1 1 -1h6v-7a2 2 0 0 0 -2 -2h-12a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="1 4 1 10 7 10"></polyline><polyline points="23 20 23 14 17 14"></polyline><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M6 4h11a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-11a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1m3 0v18" />
+                          <line x1="13" y1="8" x2="15" y2="8" />
+                          <line x1="13" y1="12" x2="15" y2="12" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="5" y="3" width="14" height="18" rx="2" />
+                          <line x1="9" y1="7" x2="15" y2="7" />
+                          <line x1="9" y1="11" x2="15" y2="11" />
+                          <line x1="9" y1="15" x2="13" y2="15" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="17 1 21 5 17 9"></polyline><path d="M3 11V9a4 4 0 0 1 4-4h14"></path><polyline points="7 23 3 19 7 15"></polyline><path d="M21 13v2a4 4 0 0 1-4 4H3"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
+                          <circle cx="16" cy="8" r="3" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polygon points="11 19 2 12 11 5 11 19"></polygon><polygon points="22 19 13 12 22 5 22 19"></polygon></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M4 19h5v-1a7.35 7.35 0 1 1 6 0v1h5" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <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>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="5" y="3" width="14" height="6" rx="2" />
+                          <path d="M19 6h1a2 2 0 0 1 2 2a5 5 0 0 1 -5 5l-5 0v2" />
+                          <rect x="10" y="15" width="4" height="6" rx="1" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M12 21a9 9 0 1 1 0 -18a9 8 0 0 1 9 8a4.5 4 0 0 1 -4.5 4h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25" />
+                          <circle cx="7.5" cy="10.5" r=".5" />
+                          <circle cx="12" cy="7.5" r=".5" />
+                          <circle cx="16.5" cy="10.5" r=".5" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M15 7l-6.5 6.5a1.5 1.5 0 0 0 3 3l6.5 -6.5a3 3 0 0 0 -6 -6l-6.5 6.5a4.5 4.5 0 0 0 9 9 l6.5 -6.5" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="6" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><line x1="20" y1="4" x2="8.12" y2="15.88"></line><line x1="14.47" y1="14.48" x2="20" y2="20"></line><line x1="8.12" y1="8.12" x2="12" y2="12"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="4" width="16" height="16" rx="2" />
+                          <path d="M9 16v-8h4a2 2 0 0 1 0 4h-4" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M4 20h4l10.5 -10.5a1.5 1.5 0 0 0 -4 -4l-10.5 10.5v4" />
+                          <line x1="13.5" y1="6.5" x2="17.5" y2="10.5" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M4 4h5l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v5a1 1 0 0 1 -1 1a16 16 0 0 1 -16 -16a1 1 0 0 1 1 -1" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M4 4h5l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v5a1 1 0 0 1 -1 1a16 16 0 0 1 -16 -16a1 1 0 0 1 1 -1" />
+                          <path d="M15 7a2 2 0 0 1 2 2" />
+                          <path d="M15 3a6 6 0 0 1 6 6" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="15" y1="9" x2="21" y2="3" />
+                          <polyline points="15 4 15 9 20 9" />
+                          <path d="M4 4h5l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v5a1 1 0 0 1 -1 1a16 16 0 0 1 -16 -16a1 1 0 0 1 1 -1" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="15" y1="9" x2="21" y2="3" />
+                          <polyline points="16 3 21 3 21 8" />
+                          <path d="M4 4h5l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v5a1 1 0 0 1 -1 1a16 16 0 0 1 -16 -16a1 1 0 0 1 1 -1" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path><polyline points="16 6 12 2 8 6"></polyline><line x1="12" y1="2" x2="12" y2="15"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="20" y1="3" x2="20" y2="7" />
+                          <line x1="16" y1="3" x2="16" y2="7" />
+                          <path d="M4 4h5l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v5a1 1 0 0 1 -1 1a16 16 0 0 1 -16 -16a1 1 0 0 1 1 -1" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M19.69 14a6.9 6.9 0 0 0 .31-2V5l-8-3-3.16 1.18"></path><path d="M4.73 4.73L4 5v7c0 6 8 10 8 10a20.29 20.29 0 0 0 5.62-4.38"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="15" y1="8" x2="15.01" y2="8" />
+                          <rect x="4" y="4" width="16" height="16" rx="3" />
+                          <path d="M4 15l4 -4a3 5 0 0 1 3 0l 5 5" />
+                          <path d="M14 14l1 -1a3 5 0 0 1 3 0l 2 2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M4.5 12.5l8 -8a4.94 4.94 0 0 1 7 7l-8 8a4.94 4.94 0 0 1 -7 -7" />
+                          <path d="M8.5 8.5l7 7" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M16 10h4a2 2 0 0 1 0 4h-4l-4 7h-3l2 -7h-4l-2 2h-3l2-4l-2 -4h3l2 2h4l-2 -7h3z" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M15 12h5a2 2 0 0 1 0 4h-15l-3 -6h3l2 2h3l-2 -7h3z" transform="rotate(15 12 12) translate(0 -1)" />
+                          <line x1="3" y1="21" x2="21" y2="21" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="16 3 21 3 21 8"></polyline><line x1="4" y1="20" x2="21" y2="3"></line><polyline points="21 16 21 21 16 21"></polyline><line x1="15" y1="15" x2="21" y2="21"></line><line x1="4" y1="4" x2="9" y2="9"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M15 12h5a2 2 0 0 1 0 4h-15l-3 -6h3l2 2h3l-2 -7h3z" transform="rotate(-15 12 12) translate(0 -1)" />
+                          <line x1="3" y1="21" x2="21" y2="21" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="3" x2="9" y2="21"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="12" y1="5" x2="12" y2="19" />
+                          <line x1="5" y1="12" x2="19" y2="12" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polygon points="19 20 9 12 19 4 19 20"></polygon><line x1="5" y1="19" x2="5" y2="5"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="4" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polygon points="5 4 15 12 5 20 5 4"></polygon><line x1="19" y1="5" x2="19" y2="19"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M7 6a7.75 7.75 0 1 0 10 0" />
+                          <line x1="12" y1="4" x2="12" y2="12" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M14.5 10c-.83 0-1.5-.67-1.5-1.5v-5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5z"></path><path d="M20.5 10H19V8.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"></path><path d="M9.5 14c.83 0 1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5S8 21.33 8 20.5v-5c0-.83.67-1.5 1.5-1.5z"></path><path d="M3.5 14H5v1.5c0 .83-.67 1.5-1.5 1.5S2 16.33 2 15.5 2.67 14 3.5 14z"></path><path d="M14 14.5c0-.83.67-1.5 1.5-1.5h5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-5c-.83 0-1.5-.67-1.5-1.5z"></path><path d="M15.5 19H14v1.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"></path><path d="M10 9.5C10 8.67 9.33 8 8.5 8h-5C2.67 8 2 8.67 2 9.5S2.67 11 3.5 11h5c.83 0 1.5-.67 1.5-1.5z"></path><path d="M8.5 5H10V3.5C10 2.67 9.33 2 8.5 2S7 2.67 7 3.5 7.67 5 8.5 5z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="3" y1="4" x2="21" y2="4" />
+                          <path d="M4 4v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-10" />
+                          <line x1="12" y1="16" x2="12" y2="20" />
+                          <line x1="9" y1="20" x2="15" y2="20" />
+                          <path d="M8 12l3 -3l2 2l3 -3" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="10"></circle><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M17 17h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-14a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2" />
+                          <path d="M17 9v-4a2 2 0 0 0 -2 -2h-6a2 2 0 0 0 -2 2v4" />
+                          <rect x="7" y="13" width="10" height="8" rx="2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="5 7 10 12 5 17" />
+                          <line x1="13" y1="17" x2="19" y2="17" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="4" width="6" height="6" rx="1" />
+                          <line x1="7" y1="17" x2="7" y2="17.01" />
+                          <rect x="14" y="4" width="6" height="6" rx="1" />
+                          <line x1="7" y1="7" x2="7" y2="7.01" />
+                          <rect x="4" y="14" width="6" height="6" rx="1" />
+                          <line x1="17" y1="7" x2="17" y2="7.01" />
+                          <line x1="14" y1="14" x2="17" y2="14" />
+                          <line x1="20" y1="14" x2="20" y2="14.01" />
+                          <line x1="14" y1="14" x2="14" y2="17" />
+                          <line x1="14" y1="20" x2="17" y2="20" />
+                          <line x1="17" y1="17" x2="20" y2="17" />
+                          <line x1="20" y1="17" x2="20" y2="20" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="4" y="2" width="16" height="20" rx="2" ry="2"></rect><circle cx="12" cy="14" r="4"></circle><line x1="12" y1="6" x2="12.01" y2="6"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="7" cy="12" r="3" />
+                          <circle cx="17" cy="12" r="3" />
+                          <line x1="7" y1="15" x2="17" y2="15" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M12 17l-2 2l2 2m-2 -2h9a2 2 0 0 0 1.75 -2.75l-.55 -1" />
+                          <path d="M12 17l-2 2l2 2m-2 -2h9a2 2 0 0 0 1.75 -2.75l-.55 -1" transform="rotate(120 12 13)" />
+                          <path d="M12 17l-2 2l2 2m-2 -2h9a2 2 0 0 0 1.75 -2.75l-.55 -1" transform="rotate(240 12 13)" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -5v5h5" />
+                          <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 5v-5h-5" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="10"></circle><rect x="9" y="9" width="6" height="6"></rect></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <path d="M9 16v-8h4a2 2 0 0 1 0 4h-4m3 0l3 4" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M4 12v-3a3 3 0 0 1 3 -3h13m-3 -3l3 3l-3 3" />
+                          <path d="M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3-3l3-3" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M17 18a5 5 0 0 0-10 0"></path><line x1="12" y1="2" x2="12" y2="9"></line><line x1="4.22" y1="10.22" x2="5.64" y2="11.64"></line><line x1="1" y1="18" x2="3" y2="18"></line><line x1="21" y1="18" x2="23" y2="18"></line><line x1="18.36" y1="11.64" x2="19.78" y2="10.22"></line><line x1="23" y1="22" x2="1" y2="22"></line><polyline points="8 6 12 2 16 6"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M4 12v-3a3 3 0 0 1 3 -3h13m-3 -3l3 3l-3 3" />
+                          <path d="M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3-3l3-3" />
+                          <path d="M11 11l1 -1v4" />
+                        </svg>
                       </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M17 18a5 5 0 0 0-10 0"></path><line x1="12" y1="9" x2="12" y2="2"></line><line x1="4.22" y1="10.22" x2="5.64" y2="11.64"></line><line x1="1" y1="18" x2="3" y2="18"></line><line x1="21" y1="18" x2="23" y2="18"></line><line x1="18.36" y1="11.64" x2="19.78" y2="10.22"></line><line x1="23" y1="22" x2="1" y2="22"></line><polyline points="16 5 12 9 8 5"></polyline></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="4" y="2" width="16" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7.01" y2="7"></line></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="6"></circle><circle cx="12" cy="12" r="2"></circle></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z"></path></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>
-                      </li>
-                      <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="1" y="5" width="22" height="14" rx="7" ry="7"></rect><circle cx="8" cy="12" r="3"></circle></svg>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M20 11a8.1 8.1 0 1 0 -.5 4m.5 5v-5h-5" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M4 11a8.1 8.1 0 1 1 .5 4m-.5 5v-5h5" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="6" cy="19" r="2" />
+                          <circle cx="18" cy="5" r="2" />
+                          <path d="M12 19h4.5a3.5 3.5 0 0 0 0 -7h-8a3.5 3.5 0 0 1 0 -7h3.5" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="3" y="13" width="18" height="8" rx="2" />
+                          <line x1="17" y1="17" x2="17" y2="17.01" />
+                          <line x1="13" y1="17" x2="13" y2="17.01" />
+                          <line x1="15" y1="13" x2="15" y2="11" />
+                          <path d="M11.75 8.75a4 4 0 0 1 6.5 0" />
+                          <path d="M8.5 6.5a8 8 0 0 1 13 0" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="5" cy="19" r="1" />
+                          <path d="M4 4a16 16 0 0 1 16 16" />
+                          <path d="M4 11a9 9 0 0 1 9 9" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M5 4h14a1 1 0 0 1 1 1v5a1 1 0 0 1 -1 1h-7a1 1 0 0 0 -1 1v7a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1" />
+                          <line x1="4" y1="8" x2="6" y2="8" />
+                          <line x1="4" y1="12" x2="7" y2="12" />
+                          <line x1="4" y1="16" x2="6" y2="16" />
+                          <line x1="8" y1="4" x2="8" y2="6" />
+                          <polyline points="12 4 12 7 " />
+                          <polyline points="16 4 16 6 " />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="1" y="5" width="22" height="14" rx="7" ry="7"></rect><circle cx="16" cy="12" r="3"></circle></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="6" cy="7" r="3" />
+                          <circle cx="6" cy="17" r="3" />
+                          <line x1="8.6" y1="8.6" x2="19" y2="19" />
+                          <line x1="8.6" y1="15.4" x2="19" y2="5" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="10" cy="10" r="7" />
+                          <line x1="21" y1="21" x2="15" y2="15" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="8 9 12 5 16 9" />
+                          <polyline points="16 15 12 19 8 15" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="10" y1="14" x2="21" y2="3" />
+                          <path d="M21 3L14.5 21a.55 .55 0 0 1 -1 0L10 14L3 10.5a.55 .55 0 0 1 0 -1L21 3" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="3" y="4" width="18" height="8" rx="3" />
+                          <rect x="3" y="12" width="18" height="8" rx="3" />
+                          <line x1="7" y1="8" x2="7" y2="8.01" />
+                          <line x1="7" y1="16" x2="7" y2="16.01" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <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.37.996.608 2.296.07 2.572-1.065z" />
+                          <circle cx="12" cy="12" r="3" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="6" cy="6" r="2" />
+                          <circle cx="18" cy="6" r="2" />
+                          <circle cx="6" cy="18" r="2" />
+                          <circle cx="18" cy="18" r="2" />
+                          <line x1="6" y1="8" x2="6" y2="16" />
+                          <line x1="8" y1="6" x2="16" y2="6" />
+                          <line x1="8" y1="18" x2="16" y2="18" />
+                          <line x1="18" y1="8" x2="18" y2="16" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="6" cy="12" r="3" />
+                          <circle cx="18" cy="6" r="3" />
+                          <circle cx="18" cy="18" r="3" />
+                          <line x1="8.7" y1="10.7" x2="15.3" y2="7.3" />
+                          <line x1="8.7" y1="13.3" x2="15.3" y2="16.7" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M9 12l2 2l4 -4" />
+                          <path d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M12 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3" />
+                          <path d="M10 10l4 4m0 -4l-4 4" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="9" cy="19" r="2" />
+                          <circle cx="17" cy="19" r="2" />
+                          <path d="M3 3h2l2 12a3 3 0 0 0 3 2h7a3 3 0 0 0 3 -2l1 -7h-15.2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="3" y="15" width="6" height="6" rx="2" />
+                          <rect x="15" y="15" width="6" height="6" rx="2" />
+                          <rect x="9" y="3" width="6" height="6" rx="2" />
+                          <path d="M6 15v-1a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v1" />
+                          <line x1="12" y1="9" x2="12" y2="12" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><rect x="7" y="7" width="3" height="9"></rect><rect x="14" y="7" width="3" height="5"></rect></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="4" y1="6" x2="11" y2="6" />
+                          <line x1="4" y1="12" x2="11" y2="12" />
+                          <line x1="4" y1="18" x2="13" y2="18" />
+                          <polyline points="15 9 18 6 21 9" />
+                          <line x1="18" y1="6" x2="18" y2="18" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"></polyline><polyline points="17 18 23 18 23 12"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="4" y1="6" x2="13" y2="6" />
+                          <line x1="4" y1="12" x2="11" y2="12" />
+                          <line x1="4" y1="18" x2="11" y2="18" />
+                          <polyline points="15 15 18 18 21 15" />
+                          <line x1="18" y1="6" x2="18" y2="18" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="4" width="16" height="16" rx="2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="4" width="16" height="16" rx="2" />
+                          <path d="M9 12l2 2l4 -4" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="1" y="3" width="15" height="13"></rect><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18.5" r="2.5"></circle><circle cx="18.5" cy="18.5" r="2.5"></circle></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="4" width="16" height="16" rx="2" />
+                          <line x1="9" y1="12" x2="15" y2="12" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="2" y="7" width="20" height="15" rx="2" ry="2"></rect><polyline points="17 2 12 7 7 2"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="4" width="16" height="16" rx="2" />
+                          <line x1="9" y1="12" x2="15" y2="12" />
+                          <line x1="12" y1="9" x2="12" y2="15" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="4" width="16" height="16" rx="2" />
+                          <path d="M10 10l4 4m0 -4l-4 4" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="4 7 4 4 20 4 20 7"></polyline><line x1="9" y1="20" x2="15" y2="20"></line><line x1="12" y1="4" x2="12" y2="20"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="12 4 4 8 12 12 20 8 12 4" />
+                          <polyline points="4 12 12 16 20 12" />
+                          <polyline points="4 16 12 20 20 16" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M23 12a11.05 11.05 0 0 0-22 0zm-5 7a3 3 0 0 1-6 0v-7"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3"></path><line x1="4" y1="21" x2="20" y2="21"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M20 12l-2 .5a6 6 0 0 1 -6.5 -6.5l.5 -2l8 8" />
+                          <path d="M20 12a8 8 0 1 1 -8 -8" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 9.9-1"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="5" y1="12" x2="19" y2="12" />
+                          <path d="M16 6.5a4 2 0 0 0 -4 -1.5h-1a3.5 3.5 0 0 0 0 7" />
+                          <path d="M16.5 16a3.5 3.5 0 0 1 -3.5 3h-1.5a4 2 0 0 1 -4 -1.5" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="16 16 12 12 8 16"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline points="16 16 12 12 8 16"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M5 7l8 10m-8 0l8 -10" />
+                          <path d="M21 20h-4l3.5 -4a1.73 1.73 0 0 0 -3.5 -2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M18 16v2a1 1 0 0 1 -1 1h-11l6-7l-6-7h11a1 1 0 0 1 1 1v2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><polyline points="17 11 19 13 23 9"></polyline></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="4" />
+                          <path d="M3 12h1M12 3v1M20 12h1M12 20v1M5.6 5.6l.7 .7M18.4 5.6l-.7 .7M17.7 17.7l.7 .7M6.3 17.7l-.7 .7" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="23" y1="11" x2="17" y2="11"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M5 7l8 10m-8 0l8 -10" />
+                          <path d="M21 11h-4l3.5 -4a1.73 1.73 0 0 0 -3.5 -2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="23" y1="11" x2="17" y2="11"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="15 4 19 4 19 8" />
+                          <line x1="14.75" y1="9.25" x2="19" y2="4" />
+                          <line x1="5" y1="19" x2="9" y2="15" />
+                          <polyline points="15 19 19 19 19 15" />
+                          <line x1="5" y1="5" x2="19" y2="19" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="18" y1="8" x2="23" y2="13"></line><line x1="23" y1="8" x2="18" y2="13"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="16 3 20 7 16 11" />
+                          <line x1="10" y1="7" x2="20" y2="7" />
+                          <polyline points="8 13 4 17 8 21" />
+                          <line x1="4" y1="17" x2="13" y2="17" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="3 8 7 4 11 8" />
+                          <line x1="7" y1="4" x2="7" y2="13" />
+                          <polyline points="13 16 17 20 21 16" />
+                          <line x1="17" y1="10" x2="17" y2="20" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="4" width="16" height="16" rx="2" />
+                          <line x1="4" y1="10" x2="20" y2="10" />
+                          <line x1="10" y1="4" x2="10" y2="20" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M16 16v1a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2m5.66 0H14a2 2 0 0 1 2 2v3.34l1 1L23 7v10"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M11 3L20 12a1.5 1.5 0 0 1 0 2L14 20a1.5 1.5 0 0 1 -2 0L3 11v-4a4 4 0 0 1 4 -4h4" />
+                          <circle cx="9" cy="9" r="2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polygon points="23 7 16 12 23 17 23 7"></polygon><rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="1" />
+                          <circle cx="12" cy="12" r="5" />
+                          <circle cx="12" cy="12" r="9" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="5.5" cy="11.5" r="4.5"></circle><circle cx="18.5" cy="11.5" r="4.5"></circle><line x1="5.5" y1="16" x2="18.5" y2="16"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M10 13.5a4 4 0 1 0 4 0v-8.5a2 2 0 0 0 -4 0v8.5" />
+                          <line x1="10" y1="9" x2="14" y2="9" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="6" cy="8" r="2" />
+                          <path d="M20 9a3 3 0 0 0 -3 -3h-1a3 3 0 0 0 -3 3v6a3 3 0 0 0 3 3h1a3 3 0 0 0 3 -3" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="6" cy="8" r="2" />
+                          <line x1="13" y1="12" x2="18" y2="12" />
+                          <path d="M20 6h-6a1 1 0 0 0 -1 1v11" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><line x1="23" y1="9" x2="17" y2="15"></line><line x1="17" y1="9" x2="23" y2="15"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="4" width="16" height="4" rx="1" />
+                          <rect x="4" y="12" width="6" height="8" rx="1" />
+                          <line x1="14" y1="12" x2="20" y2="12" />
+                          <line x1="14" y1="16" x2="20" y2="16" />
+                          <line x1="14" y1="20" x2="20" y2="20" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M16 4l3 3l-12.35 12.35a1.5 1.5 0 0 1 -3 -3l12.35 -12.35" />
+                          <line x1="10" y1="10" x2="16" y2="10" />
+                          <path d="M19 15l1.5 1.6a2 2 0 1 1 -3 0l1.5 -1.6" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="7"></circle><polyline points="12 9 12 12 13.5 13.5"></polyline><path d="M16.51 17.35l-.35 3.83a2 2 0 0 1-2 1.82H9.83a2 2 0 0 1-2-1.82l-.35-3.83m.01-10.7l.35-3.83A2 2 0 0 1 9.83 1h4.35a2 2 0 0 1 2 1.82l.35 3.83"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v 1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="1" y1="1" x2="23" y2="23"></line><path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55"></path><path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39"></path><path d="M10.71 5.05A16 16 0 0 1 22.58 9"></path><path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88"></path><path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path><line x1="12" y1="20" x2="12.01" y2="20"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M7 11v 8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M5 12.55a11 11 0 0 1 14.08 0"></path><path d="M1.42 9a16 16 0 0 1 21.16 0"></path><path d="M8.53 16.11a6 6 0 0 1 6.95 0"></path><line x1="12" y1="20" x2="12.01" y2="20"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="15" y1="5" x2="15" y2="7" />
+                          <line x1="15" y1="11" x2="15" y2="13" />
+                          <line x1="15" y1="17" x2="15" y2="19" />
+                          <path d="M5 5h14a2 2 0 0 1 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-3a2 2 0 0 0 0 -4v-3a2 2 0 0 1 2 -2" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M9.59 4.59A2 2 0 1 1 11 8H2m10.59 11.41A2 2 0 1 0 14 16H2m15.73-8.27A2.5 2.5 0 1 1 19.5 12H2"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="8" cy="12" r="2" />
+                          <rect x="2" y="6" width="20" height="12" rx="6" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="16" cy="12" r="2" />
+                          <rect x="2" y="6" width="20" height="12" rx="6" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M7 10h3v-3l-3.5 -3.5a6 6 0 0 1 8 8l6 6a2 2 0 0 1 -3 3l-6-6a6 6 0 0 1 -8 -8l3.5 3.5" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="9" x2="15" y2="15"></line><line x1="15" y1="9" x2="9" y2="15"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="4" y1="7" x2="20" y2="7" />
+                          <line x1="10" y1="11" x2="10" y2="17" />
+                          <line x1="14" y1="11" x2="14" y2="17" />
+                          <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
+                          <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="3 7 9 13 13 9 21 17" />
+                          <polyline points="21 10 21 17 14 17" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <polyline points="3 17 9 11 13 15 21 7" />
+                          <polyline points="14 7 21 7 21 14" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polyline points="12.41 6.75 13 2 10.57 4.92"></polyline><polyline points="18.57 12.91 21 10 15.66 10"></polyline><polyline points="8 8 3 14 12 14 11 22 16 16"></polyline><line x1="1" y1="1" x2="23" y2="23"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M5.07 19H19a2 2 0 0 0 1.75 -2.75L13.75 4a2 2 0 0 0 -3.5 0L3.25 16.25a2 2 0 0 0 1.75 2.75" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="8" y1="21" x2="16" y2="21" />
+                          <line x1="12" y1="17" x2="12" y2="21" />
+                          <line x1="7" y1="4" x2="17" y2="4" />
+                          <path d="M17 4v8a5 5 0 0 1 -10 0v-8" />
+                          <circle cx="5" cy="9" r="2" />
+                          <circle cx="19" cy="9" r="2" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="7" y1="19" x2="17" y2="19" />
+                          <path d="M8 5v6a4 4 0 0 0 8 0v-6" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />
+                          <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" />
+                          <line x1="16" y1="21" x2="16" y2="19" />
+                          <line x1="19" y1="16" x2="21" y2="16" />
+                          <line x1="3" y1="8" x2="5" y2="8" />
+                          <line x1="8" y1="3" x2="8" y2="5" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
+                          <polyline points="7 9 12 4 17 9" />
+                          <line x1="12" y1="4" x2="12" y2="16" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M8 16v-4a4 4 0 0 1 8 0v4" />
+                          <path d="M3 12h1M12 3v1M20 12h1M5.6 5.6l.7 .7M18.4 5.6l-.7 .7" />
+                          <rect x="6" y="16" width="12" height="4" rx="1" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="7" r="4" />
+                          <path d="M5.5 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="8.5" cy="7" r="4" />
+                          <path d="M2 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2" />
+                          <path d="M16 11l2 2l4 -4" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="8.5" cy="7" r="4" />
+                          <path d="M2 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2" />
+                          <line x1="16" y1="11" x2="22" y2="11" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="8.5" cy="7" r="4" />
+                          <path d="M2 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2" />
+                          <line x1="16" y1="11" x2="22" y2="11" />
+                          <line x1="19" y1="8" x2="19" y2="14" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="8.5" cy="7" r="4" />
+                          <path d="M2 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2" />
+                          <path d="M17 9l4 4m0 -4l-4 4" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <line x1="12" y1="3" x2="12" y2="7" />
+                          <line x1="12" y1="21" x2="12" y2="18" />
+                          <line x1="3" y1="12" x2="7" y2="12" />
+                          <line x1="21" y1="12" x2="18" y2="12" />
+                          <line x1="12" y1="12" x2="12" y2="12.01" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="5" />
+                          <path d="M12 7v-4m-1 0h2" />
+                          <path d="M12 7v-4m-1 0h2" transform="rotate(45 12 12)" />
+                          <path d="M12 7v-4m-1 0h2" transform="rotate(90 12 12)" />
+                          <path d="M12 7v-4m-1 0h2" transform="rotate(135 12 12)" />
+                          <path d="M12 7v-4m-1 0h2" transform="rotate(180 12 12)" />
+                          <path d="M12 7v-4m-1 0h2" transform="rotate(225 12 12)" />
+                          <path d="M12 7v-4m-1 0h2" transform="rotate(270 12 12)" />
+                          <path d="M12 7v-4m-1 0h2" transform="rotate(315 12 12)" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M15 8a5 5 0 0 1 0 8" />
+                          <path d="M17.7 5a9 9 0 0 1 0 14" />
+                          <path d="M6 15 h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a.8 .8 0 0 1 1.5 .5v14a.8 .8 0 0 1 -1.5 .5l-3.5 -4.5" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M15 8a5 5 0 0 1 0 8" />
+                          <path d="M6 15 h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a.8 .8 0 0 1 1.5 .5v14a.8 .8 0 0 1 -1.5 .5l-3.5 -4.5" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M6 15 h-2a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h2l3.5 -4.5a.8 .8 0 0 1 1.5 .5v14a.8 .8 0 0 1 -1.5 .5l-3.5 -4.5" />
+                          <path d="M16 10l4 4m0 -4l-4 4" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <path d="M17 8v-3a1 1 0 0 0 -1 -1h-10a2 2 0 0 0 0 4h12a1 1 0 0 1 1 1v3m0 4v3a1 1 0 0 1 -1 1h-12a2 2 0 0 1 -2 -2v-12" />
+                          <path d="M20 12v4h-4a2 2 0 0 1 0 -4h4" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <g transform="rotate(-45 12 18)">
+                            <line x1="12" y1="18" x2="12.01" y2="18" />
+                            <path d="M12 14a4 4 0 0 1 4 4" />
+                            <path d="M12 10a8 8 0 0 1 8 8" />
+                            <path d="M12 6a12 12 0 0 1 12 12" />
+                          </g>
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="12" y1="18" x2="12.01" y2="18" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <g transform="rotate(-45 12 18)">
+                            <line x1="12" y1="18" x2="12.01" y2="18" />
+                            <path d="M12 14a4 4 0 0 1 4 4" />
+                          </g>
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <g transform="rotate(-45 12 18)">
+                            <line x1="12" y1="18" x2="12.01" y2="18" />
+                            <path d="M12 14a4 4 0 0 1 4 4" />
+                            <path d="M12 10a8 8 0 0 1 8 8" />
+                          </g>
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="5" r="2" />
+                          <path d="M10 22v-4h-2l2 -6a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1l2 6h-2v4" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="12" cy="12" r="9" />
+                          <line x1="3" y1="12" x2="21" y2="12" />
+                          <path d="M12 3a12 12 0 0 0 0 18" />
+                          <path d="M12 3a12 12 0 0 1 0 18" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <line x1="18" y1="6" x2="6" y2="18" />
+                          <line x1="6" y1="6" x2="18" y2="18" />
+                        </svg>
+                      </li>
+                      <li class="icons-list-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="10" cy="10" r="7" />
+                          <line x1="7" y1="10" x2="13" y2="10" />
+                          <line x1="10" y1="7" x2="10" y2="13" />
+                          <line x1="21" y1="21" x2="15" y2="15" />
+                        </svg>
                       </li>
                       <li class="icons-list-item">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-md"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <circle cx="10" cy="10" r="7" />
+                          <line x1="7" y1="10" x2="13" y2="10" />
+                          <line x1="21" y1="21" x2="15" y2="15" />
+                        </svg>
                       </li>
                       <li></li>
                       <li></li>
@@ -3673,185 +6364,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/index.html b/demo/index.html
index 8d8221555..b51ea50ad 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item active">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -541,11 +606,19 @@
                   </a>
                 </span>
                 <a href="#" class="btn btn-primary ml-3 d-none d-sm-inline-block" data-toggle="modal" data-target="#modal-report">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <line x1="12" y1="5" x2="12" y2="19" />
+                    <line x1="5" y1="12" x2="19" y2="12" />
+                  </svg>
                   Create new report
                 </a>
                 <a href="#" class="btn btn-primary ml-3 d-sm-none btn-icon" data-toggle="modal" data-target="#modal-report" aria-label="Create new report">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <line x1="12" y1="5" x2="12" y2="19" />
+                    <line x1="5" y1="12" x2="19" y2="12" />
+                  </svg>
                 </a>
               </div>
             </div>
@@ -574,7 +647,11 @@
                     <div>Conversion rate</div>
                     <div class="ml-auto">
                       <span class="text-green d-inline-flex align-items-center lh-1">
-                        7% <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon ml-1"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
+                        7% <svg xmlns="http://www.w3.org/2000/svg" class="icon ml-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"/>
+                          <polyline points="3 17 9 11 13 15 21 7" />
+                          <polyline points="14 7 21 7 21 14" />
+                        </svg>
                       </span>
                     </div>
                   </div>
@@ -608,7 +685,11 @@
                     <div class="h1 mb-0 mr-2">$4,300</div>
                     <div class="mr-auto">
                       <span class="text-green d-inline-flex align-items-center lh-1">
-                        8% <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon ml-1"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
+                        8% <svg xmlns="http://www.w3.org/2000/svg" class="icon ml-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"/>
+                          <polyline points="3 17 9 11 13 15 21 7" />
+                          <polyline points="14 7 21 7 21 14" />
+                        </svg>
                       </span>
                     </div>
                   </div>
@@ -638,7 +719,10 @@
                     <div class="h1 mb-3 mr-2">6,782</div>
                     <div class="mr-auto">
                       <span class="text-yellow d-inline-flex align-items-center lh-1">
-                        0% <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon ml-1"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                        0% <svg xmlns="http://www.w3.org/2000/svg" class="icon ml-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"/>
+                          <line x1="5" y1="12" x2="19" y2="12" />
+                        </svg>
                       </span>
                     </div>
                   </div>
@@ -668,7 +752,11 @@
                     <div class="h1 mb-3 mr-2">2,986</div>
                     <div class="mr-auto">
                       <span class="text-green d-inline-flex align-items-center lh-1">
-                        4% <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon ml-1"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
+                        4% <svg xmlns="http://www.w3.org/2000/svg" class="icon ml-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"/>
+                          <polyline points="3 17 9 11 13 15 21 7" />
+                          <polyline points="14 7 21 7 21 14" />
+                        </svg>
                       </span>
                     </div>
                   </div>
@@ -753,7 +841,11 @@
                     <div class="card-body p-2 text-center">
                       <div class="text-right text-green">
                         <span class="text-green d-inline-flex align-items-center lh-1">
-                          6% <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon ml-1"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
+                          6% <svg xmlns="http://www.w3.org/2000/svg" class="icon ml-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"/>
+                            <polyline points="3 17 9 11 13 15 21 7" />
+                            <polyline points="14 7 21 7 21 14" />
+                          </svg>
                         </span>
                       </div>
                       <div class="h1 m-0">43</div>
@@ -766,7 +858,11 @@
                     <div class="card-body p-2 text-center">
                       <div class="text-right text-red">
                         <span class="text-red d-inline-flex align-items-center lh-1">
-                          -2% <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon ml-1"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"></polyline><polyline points="17 18 23 18 23 12"></polyline></svg>
+                          -2% <svg xmlns="http://www.w3.org/2000/svg" class="icon ml-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"/>
+                            <polyline points="3 7 9 13 13 9 21 17" />
+                            <polyline points="21 10 21 17 14 17" />
+                          </svg>
                         </span>
                       </div>
                       <div class="h1 m-0">95</div>
@@ -779,7 +875,11 @@
                     <div class="card-body p-2 text-center">
                       <div class="text-right text-green">
                         <span class="text-green d-inline-flex align-items-center lh-1">
-                          9% <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon ml-1"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
+                          9% <svg xmlns="http://www.w3.org/2000/svg" class="icon ml-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"/>
+                            <polyline points="3 17 9 11 13 15 21 7" />
+                            <polyline points="14 7 21 7 21 14" />
+                          </svg>
                         </span>
                       </div>
                       <div class="h1 m-0">7</div>
@@ -865,7 +965,11 @@
             <div class="col-sm-6 col-xl-3">
               <div class="card card-sm">
                 <div class="card-body d-flex align-items-center">
-                  <span class="bg-blue text-white stamp mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
+                  <span class="bg-blue text-white stamp mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path stroke="none" d="M0 0h24v24H0z"/>
+                      <path d="M16.7 8a3 3 0 0 0 -2.7 -2h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1 -2.7 -2" />
+                      <path d="M12 3v3m0 12v3" />
+                    </svg>
                   </span>
                   <div class="mr-3 lh-sm">
                     <div class="strong">
@@ -879,7 +983,12 @@
             <div class="col-sm-6 col-xl-3">
               <div class="card card-sm">
                 <div class="card-body d-flex align-items-center">
-                  <span class="bg-green text-white stamp mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
+                  <span class="bg-green text-white stamp mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path stroke="none" d="M0 0h24v24H0z"/>
+                      <circle cx="9" cy="19" r="2" />
+                      <circle cx="17" cy="19" r="2" />
+                      <path d="M3 3h2l2 12a3 3 0 0 0 3 2h7a3 3 0 0 0 3 -2l1 -7h-15.2" />
+                    </svg>
                   </span>
                   <div class="mr-3 lh-sm">
                     <div class="strong">
@@ -938,7 +1047,11 @@
                     <tr>
                       <td>
                         /about.html
-                        <a href="#" class="link-secondary ml-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
+                        <a href="#" class="link-secondary ml-2"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />
+                            <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" />
+                          </svg>
                         </a>
                       </td>
                       <td class="text-muted">4,896</td>
@@ -951,7 +1064,11 @@
                     <tr>
                       <td>
                         /special-promo.html
-                        <a href="#" class="link-secondary ml-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
+                        <a href="#" class="link-secondary ml-2"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />
+                            <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" />
+                          </svg>
                         </a>
                       </td>
                       <td class="text-muted">3,652</td>
@@ -964,7 +1081,11 @@
                     <tr>
                       <td>
                         /news/1,new-ui-kit.html
-                        <a href="#" class="link-secondary ml-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
+                        <a href="#" class="link-secondary ml-2"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />
+                            <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" />
+                          </svg>
                         </a>
                       </td>
                       <td class="text-muted">3,256</td>
@@ -977,7 +1098,11 @@
                     <tr>
                       <td>
                         /lorem-ipsum-dolor-sit-amet-very-long-url.html
-                        <a href="#" class="link-secondary ml-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
+                        <a href="#" class="link-secondary ml-2"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />
+                            <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" />
+                          </svg>
                         </a>
                       </td>
                       <td class="text-muted">986</td>
@@ -1076,18 +1201,34 @@
                         <a href="#" class="text-reset">Extend the data model.</a>
                       </td>
                       <td class="text-nowrap text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="5" width="16" height="16" rx="2" />
+                          <line x1="16" y1="3" x2="16" y2="7" />
+                          <line x1="8" y1="3" x2="8" y2="7" />
+                          <line x1="4" y1="11" x2="20" y2="11" />
+                          <line x1="11" y1="15" x2="12" y2="15" />
+                          <line x1="12" y1="15" x2="12" y2="18" />
+                        </svg>
                         January 01, 2019
                       </td>
                       <td class="text-nowrap">
                         <a href="#" class="text-muted">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <polyline points="20 7 10 17 5 12" />
+                          </svg>
                           2/7
                         </a>
                       </td>
                       <td class="text-nowrap">
                         <a href="#" class="text-muted">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M4 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4" />
+                            <line x1="8" y1="9" x2="16" y2="9" />
+                            <line x1="8" y1="13" x2="14" y2="13" />
+                          </svg>
                           3</a>
                       </td>
                       <td>
@@ -1105,18 +1246,34 @@
                         <a href="#" class="text-reset">Verify the event flow.</a>
                       </td>
                       <td class="text-nowrap text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="5" width="16" height="16" rx="2" />
+                          <line x1="16" y1="3" x2="16" y2="7" />
+                          <line x1="8" y1="3" x2="8" y2="7" />
+                          <line x1="4" y1="11" x2="20" y2="11" />
+                          <line x1="11" y1="15" x2="12" y2="15" />
+                          <line x1="12" y1="15" x2="12" y2="18" />
+                        </svg>
                         January 01, 2019
                       </td>
                       <td class="text-nowrap">
                         <a href="#" class="text-muted">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <polyline points="20 7 10 17 5 12" />
+                          </svg>
                           3/10
                         </a>
                       </td>
                       <td class="text-nowrap">
                         <a href="#" class="text-muted">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M4 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4" />
+                            <line x1="8" y1="9" x2="16" y2="9" />
+                            <line x1="8" y1="13" x2="14" y2="13" />
+                          </svg>
                           6</a>
                       </td>
                       <td>
@@ -1134,18 +1291,34 @@
                         <a href="#" class="text-reset">Database backup and maintenance</a>
                       </td>
                       <td class="text-nowrap text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="5" width="16" height="16" rx="2" />
+                          <line x1="16" y1="3" x2="16" y2="7" />
+                          <line x1="8" y1="3" x2="8" y2="7" />
+                          <line x1="4" y1="11" x2="20" y2="11" />
+                          <line x1="11" y1="15" x2="12" y2="15" />
+                          <line x1="12" y1="15" x2="12" y2="18" />
+                        </svg>
                         January 01, 2019
                       </td>
                       <td class="text-nowrap">
                         <a href="#" class="text-muted">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <polyline points="20 7 10 17 5 12" />
+                          </svg>
                           0/6
                         </a>
                       </td>
                       <td class="text-nowrap">
                         <a href="#" class="text-muted">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M4 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4" />
+                            <line x1="8" y1="9" x2="16" y2="9" />
+                            <line x1="8" y1="13" x2="14" y2="13" />
+                          </svg>
                           1</a>
                       </td>
                       <td>
@@ -1163,18 +1336,34 @@
                         <a href="#" class="text-reset">Identify the implementation team.</a>
                       </td>
                       <td class="text-nowrap text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="5" width="16" height="16" rx="2" />
+                          <line x1="16" y1="3" x2="16" y2="7" />
+                          <line x1="8" y1="3" x2="8" y2="7" />
+                          <line x1="4" y1="11" x2="20" y2="11" />
+                          <line x1="11" y1="15" x2="12" y2="15" />
+                          <line x1="12" y1="15" x2="12" y2="18" />
+                        </svg>
                         January 01, 2019
                       </td>
                       <td class="text-nowrap">
                         <a href="#" class="text-muted">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <polyline points="20 7 10 17 5 12" />
+                          </svg>
                           6/10
                         </a>
                       </td>
                       <td class="text-nowrap">
                         <a href="#" class="text-muted">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M4 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4" />
+                            <line x1="8" y1="9" x2="16" y2="9" />
+                            <line x1="8" y1="13" x2="14" y2="13" />
+                          </svg>
                           12</a>
                       </td>
                       <td>
@@ -1192,18 +1381,34 @@
                         <a href="#" class="text-reset">Define users and workflow</a>
                       </td>
                       <td class="text-nowrap text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="5" width="16" height="16" rx="2" />
+                          <line x1="16" y1="3" x2="16" y2="7" />
+                          <line x1="8" y1="3" x2="8" y2="7" />
+                          <line x1="4" y1="11" x2="20" y2="11" />
+                          <line x1="11" y1="15" x2="12" y2="15" />
+                          <line x1="12" y1="15" x2="12" y2="18" />
+                        </svg>
                         January 01, 2019
                       </td>
                       <td class="text-nowrap">
                         <a href="#" class="text-muted">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <polyline points="20 7 10 17 5 12" />
+                          </svg>
                           3/7
                         </a>
                       </td>
                       <td class="text-nowrap">
                         <a href="#" class="text-muted">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M4 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4" />
+                            <line x1="8" y1="9" x2="16" y2="9" />
+                            <line x1="8" y1="13" x2="14" y2="13" />
+                          </svg>
                           5</a>
                       </td>
                       <td>
@@ -1221,18 +1426,34 @@
                         <a href="#" class="text-reset">Check Pull Requests</a>
                       </td>
                       <td class="text-nowrap text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <path stroke="none" d="M0 0h24v24H0z"/>
+                          <rect x="4" y="5" width="16" height="16" rx="2" />
+                          <line x1="16" y1="3" x2="16" y2="7" />
+                          <line x1="8" y1="3" x2="8" y2="7" />
+                          <line x1="4" y1="11" x2="20" y2="11" />
+                          <line x1="11" y1="15" x2="12" y2="15" />
+                          <line x1="12" y1="15" x2="12" y2="18" />
+                        </svg>
                         January 01, 2019
                       </td>
                       <td class="text-nowrap">
                         <a href="#" class="text-muted">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <polyline points="20 7 10 17 5 12" />
+                          </svg>
                           2/9
                         </a>
                       </td>
                       <td class="text-nowrap">
                         <a href="#" class="text-muted">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M4 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4" />
+                            <line x1="8" y1="9" x2="16" y2="9" />
+                            <line x1="8" y1="13" x2="14" y2="13" />
+                          </svg>
                           3</a>
                       </td>
                       <td>
@@ -1271,7 +1492,11 @@
           <div class="modal-header">
             <h5 class="modal-title">New report</h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z"/>
+                <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">
@@ -1284,11 +1509,11 @@
               <div class="col-lg-6">
                 <label class="form-selectgroup-item">
                   <input type="radio" name="report-type" value="1" class="form-selectgroup-input" checked>
-                  <div class="form-selectgroup-box d-flex align-items-center p-3">
+                  <div class="form-selectgroup-label d-flex align-items-center p-3">
                     <div class="mr-3">
                       <span class="form-selectgroup-check"></span>
                     </div>
-                    <div class="form-selectgroup-box-content">
+                    <div class="form-selectgroup-label-content">
                       <div class="form-selectgroup-title strong mb-1">Simple</div>
                       <div class="text-muted">Provide only basic data needed for the report</div>
                     </div>
@@ -1298,11 +1523,11 @@
               <div class="col-lg-6">
                 <label class="form-selectgroup-item">
                   <input type="radio" name="report-type" value="1" class="form-selectgroup-input">
-                  <div class="form-selectgroup-box d-flex align-items-center p-3">
+                  <div class="form-selectgroup-label d-flex align-items-center p-3">
                     <div class="mr-3">
                       <span class="form-selectgroup-check"></span>
                     </div>
-                    <div class="form-selectgroup-box-content">
+                    <div class="form-selectgroup-label-content">
                       <div class="form-selectgroup-title strong mb-1">Advanced</div>
                       <div class="text-muted">Insert charts and additional advanced analyses to be inserted in the report</div>
                     </div>
@@ -1315,11 +1540,9 @@
                 <div class="mb-3">
                   <label class="form-label">Report url</label>
                   <div class="input-group input-group-flat">
-                    <div class="input-group-prepend">
-                      <span class="input-group-text">
-                        https://tabler.io/reports/
-                      </span>
-                    </div>
+                    <span class="input-group-text">
+                      https://tabler.io/reports/
+                    </span>
                     <input type="text" class="form-control pl-0"  value="report-01">
                   </div>
                 </div>
@@ -1363,74 +1586,17 @@
               Cancel
             </a>
             <a href="#" class="btn btn-primary ml-auto" data-dismiss="modal">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z"/>
+                <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>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
@@ -1883,119 +2049,6 @@
       	});
       });
     </script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/invoice.html b/demo/invoice.html
index ae4dd69cb..3983db970 100644
--- a/demo/invoice.html
+++ b/demo/invoice.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -172,14 +244,31 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </li>
+              <li class="nav-item active 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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                    </svg>
+                  </span>
+                  <span class="nav-link-title">
+                    Extra
+                  </span>
+                </a>
+                <ul class="dropdown-menu">
                   <li >
                     <a class="dropdown-item active" href="./invoice.html" >
                       Invoice
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <div class="card">
             <div class="card-header d-print-none">
               <h3 class="card-title">Invoice</h3>
@@ -644,185 +709,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/lists.html b/demo/lists.html
index 8d8a47204..bfd22eff7 100644
--- a/demo/lists.html
+++ b/demo/lists.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -744,7 +809,10 @@
                       <a href="#" class="text-body d-block">Paweł Kuna</a>
                       <small class="d-block text-muted text-truncate mt-n1">Change deprecated html tags to text decoration classes (#29604)</small>
                     </div>
-                    <a href="#" class="list-item-actions"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-muted"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                    <a href="#" class="list-item-actions"><svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                      </svg>
                     </a>
                   </div>
                   <div class="list-item">
@@ -756,7 +824,10 @@
                       <a href="#" class="text-body d-block">Jeffie Lewzey</a>
                       <small class="d-block text-muted text-truncate mt-n1">justify-content:between ⇒ justify-content:space-between (#29734)</small>
                     </div>
-                    <a href="#" class="list-item-actions show"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-yellow"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                    <a href="#" class="list-item-actions show"><svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                      </svg>
                     </a>
                   </div>
                   <div class="list-item">
@@ -768,7 +839,10 @@
                       <a href="#" class="text-body d-block">Mallory Hulme</a>
                       <small class="d-block text-muted text-truncate mt-n1">Update change-version.js (#29736)</small>
                     </div>
-                    <a href="#" class="list-item-actions"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-muted"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                    <a href="#" class="list-item-actions"><svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                      </svg>
                     </a>
                   </div>
                   <div class="list-item">
@@ -780,7 +854,10 @@
                       <a href="#" class="text-body d-block">Dunn Slane</a>
                       <small class="d-block text-muted text-truncate mt-n1">Regenerate package-lock.json (#29730)</small>
                     </div>
-                    <a href="#" class="list-item-actions"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-muted"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                    <a href="#" class="list-item-actions"><svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                      </svg>
                     </a>
                   </div>
                   <div class="list-item">
@@ -792,7 +869,10 @@
                       <a href="#" class="text-body d-block">Emmy Levet</a>
                       <small class="d-block text-muted text-truncate mt-n1">Some minor text tweaks</small>
                     </div>
-                    <a href="#" class="list-item-actions show"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-yellow"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                    <a href="#" class="list-item-actions show"><svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                      </svg>
                     </a>
                   </div>
                   <div class="list-item">
@@ -804,7 +884,10 @@
                       <a href="#" class="text-body d-block">Maryjo Lebarree</a>
                       <small class="d-block text-muted text-truncate mt-n1">Link to versioned docs</small>
                     </div>
-                    <a href="#" class="list-item-actions"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-muted"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                    <a href="#" class="list-item-actions"><svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                      </svg>
                     </a>
                   </div>
                   <div class="list-item">
@@ -816,7 +899,10 @@
                       <a href="#" class="text-body d-block">Egan Poetz</a>
                       <small class="d-block text-muted text-truncate mt-n1">Copywriting edits</small>
                     </div>
-                    <a href="#" class="list-item-actions"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-muted"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                    <a href="#" class="list-item-actions"><svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                      </svg>
                     </a>
                   </div>
                   <div class="list-item">
@@ -828,7 +914,10 @@
                       <a href="#" class="text-body d-block">Kellie Skingley</a>
                       <small class="d-block text-muted text-truncate mt-n1">Enable RFS for font resizing</small>
                     </div>
-                    <a href="#" class="list-item-actions show"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon text-yellow"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                    <a href="#" class="list-item-actions show"><svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                      </svg>
                     </a>
                   </div>
                 </div>
@@ -856,185 +945,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/lookup.html b/demo/lookup.html
index eb844588a..34cfd6dfc 100644
--- a/demo/lookup.html
+++ b/demo/lookup.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -758,185 +823,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/maintenance.html b/demo/maintenance.html
index 083cc2ab9..d6e0a3d93 100644
--- a/demo/maintenance.html
+++ b/demo/maintenance.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -60,7 +60,12 @@
           </p>
           <div class="empty-action">
             <a href="./." class="btn btn-primary">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z"/>
+                <line x1="5" y1="12" x2="19" y2="12" />
+                <line x1="5" y1="12" x2="11" y2="18" />
+                <line x1="5" y1="12" x2="11" y2="6" />
+              </svg>
               Take me home
             </a>
           </div>
diff --git a/demo/maps-vector.html b/demo/maps-vector.html
index c52c5f662..5a9edab88 100644
--- a/demo/maps-vector.html
+++ b/demo/maps-vector.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -590,67 +655,6 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
@@ -705,119 +709,6 @@
       });
       // @formatter:off
     </script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/maps.html b/demo/maps.html
index 262e91205..0d125acd2 100644
--- a/demo/maps.html
+++ b/demo/maps.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -596,67 +661,6 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
@@ -721,119 +725,6 @@
       });
       // @formatter:on
     </script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/markdown.html b/demo/markdown.html
index 8cf6aca5c..14abf8dbe 100644
--- a/demo/markdown.html
+++ b/demo/markdown.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -600,185 +665,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/modals.html b/demo/modals.html
index d7a861d43..2ec9e9a33 100644
--- a/demo/modals.html
+++ b/demo/modals.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -588,7 +653,11 @@
           <div class="modal-header">
             <h5 class="modal-title">Modal title</h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z"/>
+                <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">
@@ -607,7 +676,11 @@
           <div class="modal-header">
             <h5 class="modal-title">Large modal</h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z"/>
+                <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">
@@ -640,7 +713,11 @@
           <div class="modal-header">
             <h5 class="modal-title">Full width modal</h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z"/>
+                <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">
@@ -659,7 +736,11 @@
           <div class="modal-header">
             <h5 class="modal-title">Scrollable modal</h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z"/>
+                <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">
@@ -713,7 +794,11 @@
           <div class="modal-header">
             <h5 class="modal-title">New report</h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z"/>
+                <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">
@@ -726,11 +811,11 @@
               <div class="col-lg-6">
                 <label class="form-selectgroup-item">
                   <input type="radio" name="report-type" value="1" class="form-selectgroup-input" checked>
-                  <div class="form-selectgroup-box d-flex align-items-center p-3">
+                  <div class="form-selectgroup-label d-flex align-items-center p-3">
                     <div class="mr-3">
                       <span class="form-selectgroup-check"></span>
                     </div>
-                    <div class="form-selectgroup-box-content">
+                    <div class="form-selectgroup-label-content">
                       <div class="form-selectgroup-title strong mb-1">Simple</div>
                       <div class="text-muted">Provide only basic data needed for the report</div>
                     </div>
@@ -740,11 +825,11 @@
               <div class="col-lg-6">
                 <label class="form-selectgroup-item">
                   <input type="radio" name="report-type" value="1" class="form-selectgroup-input">
-                  <div class="form-selectgroup-box d-flex align-items-center p-3">
+                  <div class="form-selectgroup-label d-flex align-items-center p-3">
                     <div class="mr-3">
                       <span class="form-selectgroup-check"></span>
                     </div>
-                    <div class="form-selectgroup-box-content">
+                    <div class="form-selectgroup-label-content">
                       <div class="form-selectgroup-title strong mb-1">Advanced</div>
                       <div class="text-muted">Insert charts and additional advanced analyses to be inserted in the report</div>
                     </div>
@@ -757,11 +842,9 @@
                 <div class="mb-3">
                   <label class="form-label">Report url</label>
                   <div class="input-group input-group-flat">
-                    <div class="input-group-prepend">
-                      <span class="input-group-text">
-                        https://tabler.io/reports/
-                      </span>
-                    </div>
+                    <span class="input-group-text">
+                      https://tabler.io/reports/
+                    </span>
                     <input type="text" class="form-control pl-0"  value="report-01">
                   </div>
                 </div>
@@ -805,7 +888,11 @@
               Cancel
             </a>
             <a href="#" class="btn btn-primary ml-auto" data-dismiss="modal">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z"/>
+                <line x1="12" y1="5" x2="12" y2="19" />
+                <line x1="5" y1="12" x2="19" y2="12" />
+              </svg>
               Create new report
             </a>
           </div>
@@ -816,10 +903,18 @@
       <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
         <div class="modal-content">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+              <path stroke="none" d="M0 0h24v24H0z"/>
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
           </button>
           <div class="modal-body text-center py-5">
-            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-xl icon-thin mb-4 text-green"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-xl icon-thin mb-4 text-green" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+              <path stroke="none" d="M0 0h24v24H0z"/>
+              <circle cx="12" cy="12" r="9" />
+              <path d="M9 12l2 2l4 -4" />
+            </svg>
             <h3>Payment succedeed</h3>
             <div class="text-muted">Your payment of $290 has been successfully submitted. Your invoice has been sent to support@tabler.io.</div>
           </div>
@@ -840,14 +935,22 @@
           <div class="modal-header">
             <h5 class="modal-title">Add a new team</h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z"/>
+                <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="row mb-3 align-items-end">
               <div class="col-auto">
                 <a href="#" class="avatar avatar-upload rounded">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <line x1="12" y1="5" x2="12" y2="19" />
+                    <line x1="5" y1="12" x2="19" y2="12" />
+                  </svg>
                   <span class="avatar-upload-text">Add</span>
                 </a>
               </div>
@@ -939,185 +1042,11 @@
         </div>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/music.html b/demo/music.html
index 3f105f795..c933f2281 100644
--- a/demo/music.html
+++ b/demo/music.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -172,14 +244,31 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </li>
+              <li class="nav-item active 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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -555,12 +620,20 @@
                         03:41
                       </div>
                       <div class="col-auto">
-                        <a href="#" class="link-secondary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <a href="#" class="link-secondary"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                          </svg>
                         </a>
                       </div>
                       <div class="col-auto">
                         <div class="dropdown">
-                          <a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
+                          <a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z"/>
+                              <circle cx="5" cy="12" r="1" />
+                              <circle cx="12" cy="12" r="1" />
+                              <circle cx="19" cy="12" r="1" />
+                            </svg>
                           </a>
                           <div class="dropdown-menu dropdown-menu-right">
                             <a class="dropdown-item" href="#">
@@ -592,12 +665,20 @@
                         03:21
                       </div>
                       <div class="col-auto">
-                        <a href="#" class="link-secondary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <a href="#" class="link-secondary"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                          </svg>
                         </a>
                       </div>
                       <div class="col-auto">
                         <div class="dropdown">
-                          <a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
+                          <a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z"/>
+                              <circle cx="5" cy="12" r="1" />
+                              <circle cx="12" cy="12" r="1" />
+                              <circle cx="19" cy="12" r="1" />
+                            </svg>
                           </a>
                           <div class="dropdown-menu dropdown-menu-right">
                             <a class="dropdown-item" href="#">
@@ -629,12 +710,20 @@
                         03:23
                       </div>
                       <div class="col-auto">
-                        <a href="#" class="link-secondary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <a href="#" class="link-secondary"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                          </svg>
                         </a>
                       </div>
                       <div class="col-auto">
                         <div class="dropdown">
-                          <a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
+                          <a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z"/>
+                              <circle cx="5" cy="12" r="1" />
+                              <circle cx="12" cy="12" r="1" />
+                              <circle cx="19" cy="12" r="1" />
+                            </svg>
                           </a>
                           <div class="dropdown-menu dropdown-menu-right">
                             <a class="dropdown-item" href="#">
@@ -666,12 +755,20 @@
                         03:12
                       </div>
                       <div class="col-auto">
-                        <a href="#" class="link-secondary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <a href="#" class="link-secondary"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                          </svg>
                         </a>
                       </div>
                       <div class="col-auto">
                         <div class="dropdown">
-                          <a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
+                          <a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z"/>
+                              <circle cx="5" cy="12" r="1" />
+                              <circle cx="12" cy="12" r="1" />
+                              <circle cx="19" cy="12" r="1" />
+                            </svg>
                           </a>
                           <div class="dropdown-menu dropdown-menu-right">
                             <a class="dropdown-item" href="#">
@@ -703,12 +800,20 @@
                         03:17
                       </div>
                       <div class="col-auto">
-                        <a href="#" class="link-secondary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <a href="#" class="link-secondary"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                          </svg>
                         </a>
                       </div>
                       <div class="col-auto">
                         <div class="dropdown">
-                          <a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
+                          <a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z"/>
+                              <circle cx="5" cy="12" r="1" />
+                              <circle cx="12" cy="12" r="1" />
+                              <circle cx="19" cy="12" r="1" />
+                            </svg>
                           </a>
                           <div class="dropdown-menu dropdown-menu-right">
                             <a class="dropdown-item" href="#">
@@ -740,12 +845,20 @@
                         03:47
                       </div>
                       <div class="col-auto">
-                        <a href="#" class="link-secondary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <a href="#" class="link-secondary"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                          </svg>
                         </a>
                       </div>
                       <div class="col-auto">
                         <div class="dropdown">
-                          <a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
+                          <a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z"/>
+                              <circle cx="5" cy="12" r="1" />
+                              <circle cx="12" cy="12" r="1" />
+                              <circle cx="19" cy="12" r="1" />
+                            </svg>
                           </a>
                           <div class="dropdown-menu dropdown-menu-right">
                             <a class="dropdown-item" href="#">
@@ -779,12 +892,20 @@
                         02:46
                       </div>
                       <div class="col-auto">
-                        <a href="#" class="link-secondary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <a href="#" class="link-secondary"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                          </svg>
                         </a>
                       </div>
                       <div class="col-auto">
                         <div class="dropdown">
-                          <a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
+                          <a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z"/>
+                              <circle cx="5" cy="12" r="1" />
+                              <circle cx="12" cy="12" r="1" />
+                              <circle cx="19" cy="12" r="1" />
+                            </svg>
                           </a>
                           <div class="dropdown-menu dropdown-menu-right">
                             <a class="dropdown-item" href="#">
@@ -817,12 +938,20 @@
                         04:04
                       </div>
                       <div class="col-auto">
-                        <a href="#" class="link-secondary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <a href="#" class="link-secondary"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                          </svg>
                         </a>
                       </div>
                       <div class="col-auto">
                         <div class="dropdown">
-                          <a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
+                          <a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z"/>
+                              <circle cx="5" cy="12" r="1" />
+                              <circle cx="12" cy="12" r="1" />
+                              <circle cx="19" cy="12" r="1" />
+                            </svg>
                           </a>
                           <div class="dropdown-menu dropdown-menu-right">
                             <a class="dropdown-item" href="#">
@@ -854,12 +983,20 @@
                         03:53
                       </div>
                       <div class="col-auto">
-                        <a href="#" class="link-secondary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <a href="#" class="link-secondary"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                          </svg>
                         </a>
                       </div>
                       <div class="col-auto">
                         <div class="dropdown">
-                          <a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
+                          <a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z"/>
+                              <circle cx="5" cy="12" r="1" />
+                              <circle cx="12" cy="12" r="1" />
+                              <circle cx="19" cy="12" r="1" />
+                            </svg>
                           </a>
                           <div class="dropdown-menu dropdown-menu-right">
                             <a class="dropdown-item" href="#">
@@ -891,12 +1028,20 @@
                         02:41
                       </div>
                       <div class="col-auto">
-                        <a href="#" class="link-secondary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <a href="#" class="link-secondary"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                          </svg>
                         </a>
                       </div>
                       <div class="col-auto">
                         <div class="dropdown">
-                          <a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
+                          <a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z"/>
+                              <circle cx="5" cy="12" r="1" />
+                              <circle cx="12" cy="12" r="1" />
+                              <circle cx="19" cy="12" r="1" />
+                            </svg>
                           </a>
                           <div class="dropdown-menu dropdown-menu-right">
                             <a class="dropdown-item" href="#">
@@ -928,12 +1073,20 @@
                         02:43
                       </div>
                       <div class="col-auto">
-                        <a href="#" class="link-secondary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <a href="#" class="link-secondary"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                          </svg>
                         </a>
                       </div>
                       <div class="col-auto">
                         <div class="dropdown">
-                          <a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
+                          <a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z"/>
+                              <circle cx="5" cy="12" r="1" />
+                              <circle cx="12" cy="12" r="1" />
+                              <circle cx="19" cy="12" r="1" />
+                            </svg>
                           </a>
                           <div class="dropdown-menu dropdown-menu-right">
                             <a class="dropdown-item" href="#">
@@ -965,12 +1118,20 @@
                         03:12
                       </div>
                       <div class="col-auto">
-                        <a href="#" class="link-secondary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                        <a href="#" class="link-secondary"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                          </svg>
                         </a>
                       </div>
                       <div class="col-auto">
                         <div class="dropdown">
-                          <a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg>
+                          <a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z"/>
+                              <circle cx="5" cy="12" r="1" />
+                              <circle cx="12" cy="12" r="1" />
+                              <circle cx="19" cy="12" r="1" />
+                            </svg>
                           </a>
                           <div class="dropdown-menu dropdown-menu-right">
                             <a class="dropdown-item" href="#">
@@ -1119,185 +1280,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/pagination.html b/demo/pagination.html
index 1949be1d2..1e6741492 100644
--- a/demo/pagination.html
+++ b/demo/pagination.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,131 +566,35 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <div class="card">
             <div class="card-body">
               <ul class="pagination ">
                 <li class="page-item disabled">
                   <a class="page-link" href="#" tabindex="-1">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="15 18 9 12 15 6"></polyline></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path stroke="none" d="M0 0h24v24H0z"/>
+                      <polyline points="15 6 9 12 15 18" />
+                    </svg>
                     prev
                   </a>
                 </li>
@@ -537,14 +605,20 @@
                 <li class="page-item"><a class="page-link" href="#">5</a></li>
                 <li class="page-item">
                   <a class="page-link" href="#">
-                    next <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 18 15 12 9 6"></polyline></svg>
+                    next <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path stroke="none" d="M0 0h24v24H0z"/>
+                      <polyline points="9 6 15 12 9 18" />
+                    </svg>
                   </a>
                 </li>
               </ul>
               <ul class="pagination ">
                 <li class="page-item disabled">
                   <a class="page-link" href="#" tabindex="-1">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="15 18 9 12 15 6"></polyline></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path stroke="none" d="M0 0h24v24H0z"/>
+                      <polyline points="15 6 9 12 15 18" />
+                    </svg>
                   </a>
                 </li>
                 <li class="page-item"><a class="page-link" href="#">1</a></li>
@@ -554,7 +628,10 @@
                 <li class="page-item"><a class="page-link" href="#">5</a></li>
                 <li class="page-item">
                   <a class="page-link" href="#">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 18 15 12 9 6"></polyline></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path stroke="none" d="M0 0h24v24H0z"/>
+                      <polyline points="9 6 15 12 9 18" />
+                    </svg>
                   </a>
                 </li>
               </ul>
@@ -582,7 +659,10 @@
             <ul class="pagination ">
               <li class="page-item disabled">
                 <a class="page-link" href="#" tabindex="-1">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="15 18 9 12 15 6"></polyline></svg>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <polyline points="15 6 9 12 15 18" />
+                  </svg>
                 </a>
               </li>
               <li class="page-item"><a class="page-link" href="#">1</a></li>
@@ -592,7 +672,10 @@
               <li class="page-item"><a class="page-link" href="#">5</a></li>
               <li class="page-item">
                 <a class="page-link" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 18 15 12 9 6"></polyline></svg>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <polyline points="9 6 15 12 9 18" />
+                  </svg>
                 </a>
               </li>
             </ul>
@@ -618,185 +701,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/pricing.html b/demo/pricing.html
index a80593667..e680883d9 100644
--- a/demo/pricing.html
+++ b/demo/pricing.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -540,19 +605,34 @@
                   <ul class="list-unstyled lh-lg">
                     <li><strong>3</strong> Users</li>
                     <li>
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1 text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 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"/>
+                        <polyline points="20 7 10 17 5 12" />
+                      </svg>
                       Sharing Tools
                     </li>
                     <li>
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1 text-danger"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 text-danger" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <line x1="18" y1="6" x2="6" y2="18" />
+                        <line x1="6" y1="6" x2="18" y2="18" />
+                      </svg>
                       Design Tools
                     </li>
                     <li>
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1 text-danger"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 text-danger" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <line x1="18" y1="6" x2="6" y2="18" />
+                        <line x1="6" y1="6" x2="18" y2="18" />
+                      </svg>
                       Private Messages
                     </li>
                     <li>
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1 text-danger"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 text-danger" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <line x1="18" y1="6" x2="6" y2="18" />
+                        <line x1="6" y1="6" x2="18" y2="18" />
+                      </svg>
                       Twitter API
                     </li>
                   </ul>
@@ -564,7 +644,10 @@
             </div>
             <div class="col-sm-6 col-lg-3">
               <div class="card">
-                <div class="ribbon ribbon-top ribbon-bookmark bg-green"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <div class="ribbon ribbon-top ribbon-bookmark bg-green"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                  </svg>
                 </div>
                 <div class="card-body text-center">
                   <div class="text-uppercase text-muted">Premium</div>
@@ -572,19 +655,33 @@
                   <ul class="list-unstyled lh-lg">
                     <li><strong>10</strong> Users</li>
                     <li>
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1 text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 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"/>
+                        <polyline points="20 7 10 17 5 12" />
+                      </svg>
                       Sharing Tools
                     </li>
                     <li>
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1 text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 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"/>
+                        <polyline points="20 7 10 17 5 12" />
+                      </svg>
                       Design Tools
                     </li>
                     <li>
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1 text-danger"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 text-danger" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <line x1="18" y1="6" x2="6" y2="18" />
+                        <line x1="6" y1="6" x2="18" y2="18" />
+                      </svg>
                       Private Messages
                     </li>
                     <li>
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1 text-danger"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 text-danger" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <line x1="18" y1="6" x2="6" y2="18" />
+                        <line x1="6" y1="6" x2="18" y2="18" />
+                      </svg>
                       Twitter API
                     </li>
                   </ul>
@@ -602,19 +699,32 @@
                   <ul class="list-unstyled lh-lg">
                     <li><strong>100</strong> Users</li>
                     <li>
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1 text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 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"/>
+                        <polyline points="20 7 10 17 5 12" />
+                      </svg>
                       Sharing Tools
                     </li>
                     <li>
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1 text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 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"/>
+                        <polyline points="20 7 10 17 5 12" />
+                      </svg>
                       Design Tools
                     </li>
                     <li>
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1 text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 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"/>
+                        <polyline points="20 7 10 17 5 12" />
+                      </svg>
                       Private Messages
                     </li>
                     <li>
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1 text-danger"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 text-danger" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <line x1="18" y1="6" x2="6" y2="18" />
+                        <line x1="6" y1="6" x2="18" y2="18" />
+                      </svg>
                       Twitter API
                     </li>
                   </ul>
@@ -632,19 +742,31 @@
                   <ul class="list-unstyled lh-lg">
                     <li><strong>Unlimited</strong> Users</li>
                     <li>
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1 text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 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"/>
+                        <polyline points="20 7 10 17 5 12" />
+                      </svg>
                       Sharing Tools
                     </li>
                     <li>
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1 text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 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"/>
+                        <polyline points="20 7 10 17 5 12" />
+                      </svg>
                       Design Tools
                     </li>
                     <li>
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1 text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 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"/>
+                        <polyline points="20 7 10 17 5 12" />
+                      </svg>
                       Private Messages
                     </li>
                     <li>
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-1 text-success"><polyline points="20 6 9 17 4 12"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 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"/>
+                        <polyline points="20 7 10 17 5 12" />
+                      </svg>
                       Twitter API
                     </li>
                   </ul>
@@ -676,185 +798,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/profile.html b/demo/profile.html
index f5d4a310a..567e662d7 100644
--- a/demo/profile.html
+++ b/demo/profile.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -172,14 +244,31 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </li>
+              <li class="nav-item active 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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -540,7 +605,9 @@
                     Big belly rude boy, million dollar hustler. Unemployed.
                   </p>
                   <button class="btn btn-outline-primary btn-sm">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
+                    <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>
                     Follow
                   </button>
                 </div>
@@ -555,17 +622,24 @@
                       <ul class="social-links list-inline mb-0 mt-2">
                         <li class="list-inline-item">
                           <a href="#" title="Facebook" data-toggle="tooltip">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
+                            <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>
                         </li>
                         <li class="list-inline-item">
                           <a href="#" title="Twitter" data-toggle="tooltip">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
+                            <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>
                         </li>
                         <li class="list-inline-item">
                           <a href="#" title="1234567890" data-toggle="tooltip">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <path stroke="none" d="M0 0h24v24H0z"/>
+                              <path d="M4 4h5l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v5a1 1 0 0 1 -1 1a16 16 0 0 1 -16 -16a1 1 0 0 1 1 -1" />
+                            </svg>
                           </a>
                         </li>
                       </ul>
@@ -614,11 +688,13 @@
                 <div class="card-header">
                   <div class="input-group">
                     <input type="text" class="form-control" placeholder="Message">
-                    <div class="input-group-append">
-                      <a href="#" class="btn btn-secondary btn-icon" aria-label="Button">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
-                      </a>
-                    </div>
+                    <a href="#" class="btn btn-secondary btn-icon" aria-label="Button">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <path d="M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2" />
+                        <circle cx="12" cy="13" r="3" />
+                      </svg>
+                    </a>
                   </div>
                 </div>
                 <ul class="list-group card-list-group">
@@ -808,185 +884,11 @@ But that's the difference in our opinions.</textarea>
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/ribbons.html b/demo/ribbons.html
index 09b23578c..6b970d6d7 100644
--- a/demo/ribbons.html
+++ b/demo/ribbons.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -536,7 +601,10 @@
               <div class="card">
                 <div class="card-body h-8">
                 </div>
-                <div class="ribbon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <div class="ribbon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                  </svg>
                 </div>
               </div>
             </div>
@@ -544,7 +612,10 @@
               <div class="card">
                 <div class="card-body h-8">
                 </div>
-                <div class="ribbon ribbon-top"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <div class="ribbon ribbon-top"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                  </svg>
                 </div>
               </div>
             </div>
@@ -552,7 +623,10 @@
               <div class="card">
                 <div class="card-body h-8">
                 </div>
-                <div class="ribbon ribbon-top ribbon-left"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <div class="ribbon ribbon-top ribbon-left"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                  </svg>
                 </div>
               </div>
             </div>
@@ -560,7 +634,10 @@
               <div class="card">
                 <div class="card-body h-8">
                 </div>
-                <div class="ribbon ribbon-bottom"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <div class="ribbon ribbon-bottom"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                  </svg>
                 </div>
               </div>
             </div>
@@ -568,7 +645,10 @@
               <div class="card">
                 <div class="card-body h-8">
                 </div>
-                <div class="ribbon ribbon-left"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <div class="ribbon ribbon-left"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                  </svg>
                 </div>
               </div>
             </div>
@@ -576,7 +656,10 @@
               <div class="card">
                 <div class="card-body h-8">
                 </div>
-                <div class="ribbon ribbon-left ribbon-bottom"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <div class="ribbon ribbon-left ribbon-bottom"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                  </svg>
                 </div>
               </div>
             </div>
@@ -584,7 +667,10 @@
               <div class="card">
                 <div class="card-body h-8">
                 </div>
-                <div class="ribbon ribbon-bookmark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <div class="ribbon ribbon-bookmark"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                  </svg>
                 </div>
               </div>
             </div>
@@ -592,7 +678,10 @@
               <div class="card">
                 <div class="card-body h-8">
                 </div>
-                <div class="ribbon ribbon-bottom ribbon-bookmark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <div class="ribbon ribbon-bottom ribbon-bookmark"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                  </svg>
                 </div>
               </div>
             </div>
@@ -600,7 +689,10 @@
               <div class="card">
                 <div class="card-body h-8">
                 </div>
-                <div class="ribbon ribbon-left ribbon-bookmark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <div class="ribbon ribbon-left ribbon-bookmark"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                  </svg>
                 </div>
               </div>
             </div>
@@ -608,7 +700,10 @@
               <div class="card">
                 <div class="card-body h-8">
                 </div>
-                <div class="ribbon ribbon-left ribbon-bottom ribbon-bookmark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <div class="ribbon ribbon-left ribbon-bottom ribbon-bookmark"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                  </svg>
                 </div>
               </div>
             </div>
@@ -616,7 +711,10 @@
               <div class="card">
                 <div class="card-body h-8">
                 </div>
-                <div class="ribbon bg-red"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <div class="ribbon bg-red"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                  </svg>
                 </div>
               </div>
             </div>
@@ -624,7 +722,10 @@
               <div class="card">
                 <div class="card-body h-8">
                 </div>
-                <div class="ribbon ribbon-bottom bg-green"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <div class="ribbon ribbon-bottom bg-green"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                  </svg>
                 </div>
               </div>
             </div>
@@ -632,7 +733,10 @@
               <div class="card">
                 <div class="card-body h-8">
                 </div>
-                <div class="ribbon ribbon-left ribbon-bookmark bg-teal"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <div class="ribbon ribbon-left ribbon-bookmark bg-teal"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                  </svg>
                 </div>
               </div>
             </div>
@@ -640,7 +744,10 @@
               <div class="card">
                 <div class="card-body h-8">
                 </div>
-                <div class="ribbon ribbon-left ribbon-bottom ribbon-bookmark bg-yellow"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <div class="ribbon ribbon-left ribbon-bottom ribbon-bookmark bg-yellow"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                  </svg>
                 </div>
               </div>
             </div>
@@ -648,7 +755,10 @@
               <div class="card">
                 <div class="card-body h-8">
                 </div>
-                <div class="ribbon ribbon-top ribbon-left ribbon-bookmark bg-pink"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <div class="ribbon ribbon-top ribbon-left ribbon-bookmark bg-pink"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                  </svg>
                 </div>
               </div>
             </div>
@@ -656,7 +766,10 @@
               <div class="card">
                 <div class="card-body h-8">
                 </div>
-                <div class="ribbon ribbon-top ribbon-bookmark bg-purple"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <div class="ribbon ribbon-top ribbon-bookmark bg-purple"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                  </svg>
                 </div>
               </div>
             </div>
@@ -664,7 +777,10 @@
               <div class="card">
                 <div class="card-body h-8">
                 </div>
-                <div class="ribbon ribbon-left ribbon-bookmark bg-teal-lt"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <div class="ribbon ribbon-left ribbon-bookmark bg-teal-lt"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                  </svg>
                 </div>
               </div>
             </div>
@@ -672,7 +788,10 @@
               <div class="card">
                 <div class="card-body h-8">
                 </div>
-                <div class="ribbon ribbon-left ribbon-bottom ribbon-bookmark bg-yellow-lt"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <div class="ribbon ribbon-left ribbon-bottom ribbon-bookmark bg-yellow-lt"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                  </svg>
                 </div>
               </div>
             </div>
@@ -680,7 +799,10 @@
               <div class="card">
                 <div class="card-body h-8">
                 </div>
-                <div class="ribbon ribbon-top ribbon-left ribbon-bookmark bg-pink-lt"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <div class="ribbon ribbon-top ribbon-left ribbon-bookmark bg-pink-lt"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                  </svg>
                 </div>
               </div>
             </div>
@@ -688,7 +810,10 @@
               <div class="card">
                 <div class="card-body h-8">
                 </div>
-                <div class="ribbon ribbon-top ribbon-bookmark bg-purple-lt"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <div class="ribbon ribbon-top ribbon-bookmark bg-purple-lt"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
+                  </svg>
                 </div>
               </div>
             </div>
@@ -714,185 +839,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/rtl.html b/demo/rtl.html
index 032bee85a..9ff411a25 100644
--- a/demo/rtl.html
+++ b/demo/rtl.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -560,7 +625,7 @@
                         <div class="text-muted">تذاكر جديدة</div>
                       </div>
                       <div class="ml-auto">
-                        <div class="chart-sparkline chart-sparkline-square" id="sparkline-13"></div>
+                        <div class="chart-sparkline chart-sparkline-square" id="sparkline-73"></div>
                       </div>
                     </div>
                   </div>
@@ -575,7 +640,7 @@
                         <div class="text-muted">مغلق اليوم</div>
                       </div>
                       <div class="ml-auto">
-                        <div class="chart-sparkline chart-sparkline-square" id="sparkline-14"></div>
+                        <div class="chart-sparkline chart-sparkline-square" id="sparkline-74"></div>
                       </div>
                     </div>
                   </div>
@@ -590,7 +655,7 @@
                         <div class="text-muted">متابعون</div>
                       </div>
                       <div class="ml-auto">
-                        <div class="chart-sparkline chart-sparkline-square" id="sparkline-15"></div>
+                        <div class="chart-sparkline chart-sparkline-square" id="sparkline-75"></div>
                       </div>
                     </div>
                   </div>
@@ -619,67 +684,6 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
@@ -688,7 +692,7 @@
     <script src="./dist/js/tabler.min.js"></script>
     <script>
       document.addEventListener("DOMContentLoaded", function () {
-      	$().peity && $('#sparkline-13').text("45/100").peity("pie", {
+      	$().peity && $('#sparkline-73').text("45/100").peity("pie", {
       		width: 40,
       		height: 40,
       		stroke: "#206bc4",
@@ -701,7 +705,7 @@
     </script>
     <script>
       document.addEventListener("DOMContentLoaded", function () {
-      	$().peity && $('#sparkline-14').text("22/100").peity("pie", {
+      	$().peity && $('#sparkline-74').text("22/100").peity("pie", {
       		width: 40,
       		height: 40,
       		stroke: "#206bc4",
@@ -714,7 +718,7 @@
     </script>
     <script>
       document.addEventListener("DOMContentLoaded", function () {
-      	$().peity && $('#sparkline-15').text("75/100").peity("pie", {
+      	$().peity && $('#sparkline-75').text("75/100").peity("pie", {
       		width: 40,
       		height: 40,
       		stroke: "#206bc4",
@@ -725,119 +729,6 @@
       	});
       });
     </script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/search-results.html b/demo/search-results.html
index 3bc2a0f84..6708b42bf 100644
--- a/demo/search-results.html
+++ b/demo/search-results.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -172,14 +244,31 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </li>
+              <li class="nav-item active 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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -598,22 +663,18 @@
                 <div class="row row-sm align-items-center mb-3">
                   <div class="col">
                     <div class="input-group">
-                      <div class="input-group-prepend">
-                        <span class="input-group-text">
-                          $
-                        </span>
-                      </div>
+                      <span class="input-group-text">
+                        $
+                      </span>
                       <input type="text" class="form-control"  placeholder="from"  value="3">
                     </div>
                   </div>
                   <div class="col-auto">—</div>
                   <div class="col">
                     <div class="input-group">
-                      <div class="input-group-prepend">
-                        <span class="input-group-text">
-                          $
-                        </span>
-                      </div>
+                      <span class="input-group-text">
+                        $
+                      </span>
                       <input type="text" class="form-control"  placeholder="to" >
                     </div>
                   </div>
@@ -832,185 +893,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/sign-in.html b/demo/sign-in.html
index 5db903f1c..3529d2a5a 100644
--- a/demo/sign-in.html
+++ b/demo/sign-in.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -69,12 +69,15 @@
               </label>
               <div class="input-group input-group-flat">
                 <input type="password" class="form-control"  placeholder="Password" >
-                <div class="input-group-append">
-                  <span class="input-group-text">
-                    <a href="#" class="link-secondary" title="Show password" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
-                    </a>
-                  </span>
-                </div>
+                <span class="input-group-text">
+                  <a href="#" class="link-secondary" title="Show password" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path stroke="none" d="M0 0h24v24H0z"/>
+                      <circle cx="12" cy="12" r="2" />
+                      <path d="M2 12l1.5 2a11 11 0 0 0 17 0l1.5 -2" />
+                      <path d="M2 12l1.5 -2a11 11 0 0 1 17 0l1.5 2" />
+                    </svg>
+                  </a>
+                </span>
               </div>
             </div>
             <div class="mb-2">
diff --git a/demo/sign-up.html b/demo/sign-up.html
index f280eebcf..da72e4ed1 100644
--- a/demo/sign-up.html
+++ b/demo/sign-up.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -68,12 +68,15 @@
               <label class="form-label">Password</label>
               <div class="input-group input-group-flat">
                 <input type="password" class="form-control"  placeholder="Password" >
-                <div class="input-group-append">
-                  <span class="input-group-text">
-                    <a href="#" class="link-secondary" title="Show password" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
-                    </a>
-                  </span>
-                </div>
+                <span class="input-group-text">
+                  <a href="#" class="link-secondary" title="Show password" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path stroke="none" d="M0 0h24v24H0z"/>
+                      <circle cx="12" cy="12" r="2" />
+                      <path d="M2 12l1.5 2a11 11 0 0 0 17 0l1.5 -2" />
+                      <path d="M2 12l1.5 -2a11 11 0 0 1 17 0l1.5 2" />
+                    </svg>
+                  </a>
+                </span>
               </div>
             </div>
             <div class="mb-3">
diff --git a/demo/sitemap.xml b/demo/sitemap.xml
index 883cec2af..ab5112aa0 100644
--- a/demo/sitemap.xml
+++ b/demo/sitemap.xml
@@ -1,188 +1,136 @@
 <?xml version="1.0" encoding="UTF-8"?>
   <urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-    <url>
-      <loc>/components/card-buttons.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
-    </url>
-    <url>
-      <loc>/components/card-comments.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
-    </url>
-    <url>
-      <loc>/components/card-ribbon.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
-    </url>
-    <url>
-      <loc>/components/card-tabs-bottom.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
-    </url>
-    <url>
-      <loc>/components/card-with-image.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
-    </url>
-    <url>
-      <loc>/components/empty.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
-    </url>
-    <url>
-      <loc>/components/input-colors.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
-    </url>
-    <url>
-      <loc>/components/input-image.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
-    </url>
-    <url>
-      <loc>/components/progress.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
-    </url>
-    <url>
-      <loc>/components/simple-avatar.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
-    </url>
-    <url>
-      <loc>/components/simple-card.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
-    </url>
-    <url>
-      <loc>/components/widget-revenue.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
-    </url>
-    <url>
-      <loc>/components/widget-sales.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
-    </url>
     <url>
       <loc>/docs/alerts.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/autosize.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/avatars.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/badges.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/breadcrumb.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/buttons.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/cards.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/carousel.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/charts.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/colors.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/countup.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/cursors.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/divider.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/dropdowns.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/empty.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/flags.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/form-elements.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/form-helpers.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/input-mask.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/modals.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/payments.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/progress.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/range-slider.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/ribbons.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/spinners.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/steps.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/tables.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/tabs.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/timelines.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/toasts.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/tooltips.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/typography.html</loc>
-      <lastmod>2020-03-28T12:06:47+01:00</lastmod>
+      <lastmod>2020-04-11T22:36:43+02:00</lastmod>
     </url>
     <url>
       <loc>/400.html</loc>
@@ -265,6 +213,36 @@
     <url>
       <loc>/invoice.html</loc>
     </url>
+    <url>
+      <loc>/layout-combo.html</loc>
+    </url>
+    <url>
+      <loc>/layout-condensed-dark.html</loc>
+    </url>
+    <url>
+      <loc>/layout-condensed.html</loc>
+    </url>
+    <url>
+      <loc>/layout-dark.html</loc>
+    </url>
+    <url>
+      <loc>/layout-fluid-vertical.html</loc>
+    </url>
+    <url>
+      <loc>/layout-fluid.html</loc>
+    </url>
+    <url>
+      <loc>/layout-horizontal.html</loc>
+    </url>
+    <url>
+      <loc>/layout-navbar-dark.html</loc>
+    </url>
+    <url>
+      <loc>/layout-vertical-right.html</loc>
+    </url>
+    <url>
+      <loc>/layout-vertical.html</loc>
+    </url>
     <url>
       <loc>/lists.html</loc>
     </url>
@@ -289,6 +267,9 @@
     <url>
       <loc>/music.html</loc>
     </url>
+    <url>
+      <loc>/navigation.html</loc>
+    </url>
     <url>
       <loc>/pagination.html</loc>
     </url>
diff --git a/demo/snippets.html b/demo/snippets.html
index 604e9dfd8..c25846284 100644
--- a/demo/snippets.html
+++ b/demo/snippets.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -172,14 +244,31 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </li>
+              <li class="nav-item active 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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -709,7 +774,12 @@
                     <div class="col-auto">
                       <div class="dropdown">
                         <button class="btn-options" type="button" data-toggle="dropdown">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <circle cx="12" cy="12" r="1" />
+                            <circle cx="12" cy="19" r="1" />
+                            <circle cx="12" cy="5" r="1" />
+                          </svg>
                         </button>
                         <div class="dropdown-menu dropdown-menu-right">
                           <a class="dropdown-item" href="#">
@@ -751,7 +821,12 @@
                     <div class="col-auto">
                       <div class="dropdown">
                         <button class="btn-options" type="button" data-toggle="dropdown">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <circle cx="12" cy="12" r="1" />
+                            <circle cx="12" cy="19" r="1" />
+                            <circle cx="12" cy="5" r="1" />
+                          </svg>
                         </button>
                         <div class="dropdown-menu dropdown-menu-right">
                           <a class="dropdown-item" href="#">
@@ -770,7 +845,11 @@
             <div class="col-md-6 col-xl-3">
               <div class="card card-sm">
                 <div class="card-body d-flex align-items-center">
-                  <span class="bg-blue text-white stamp mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
+                  <span class="bg-blue text-white stamp mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path stroke="none" d="M0 0h24v24H0z"/>
+                      <path d="M16.7 8a3 3 0 0 0 -2.7 -2h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1 -2.7 -2" />
+                      <path d="M12 3v3m0 12v3" />
+                    </svg>
                   </span>
                   <div class="mr-3 lh-sm">
                     <div class="strong">
@@ -784,7 +863,12 @@
             <div class="col-md-6 col-xl-3">
               <div class="card card-sm">
                 <div class="card-body d-flex align-items-center">
-                  <span class="bg-green text-white stamp mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path></svg>
+                  <span class="bg-green text-white stamp mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path stroke="none" d="M0 0h24v24H0z"/>
+                      <circle cx="9" cy="19" r="2" />
+                      <circle cx="17" cy="19" r="2" />
+                      <path d="M3 3h2l2 12a3 3 0 0 0 3 2h7a3 3 0 0 0 3 -2l1 -7h-15.2" />
+                    </svg>
                   </span>
                   <div class="mr-3 lh-sm">
                     <div class="strong">
@@ -798,7 +882,11 @@
             <div class="col-md-6 col-xl-3">
               <div class="card card-sm">
                 <div class="card-body d-flex align-items-center">
-                  <span class="bg-red text-white stamp mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                  <span class="bg-red text-white stamp mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path stroke="none" d="M0 0h24v24H0z"/>
+                      <circle cx="12" cy="7" r="4" />
+                      <path d="M5.5 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2" />
+                    </svg>
                   </span>
                   <div class="mr-3 lh-sm">
                     <div class="strong">
@@ -812,7 +900,12 @@
             <div class="col-md-6 col-xl-3">
               <div class="card card-sm">
                 <div class="card-body d-flex align-items-center">
-                  <span class="bg-yellow text-white stamp mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
+                  <span class="bg-yellow text-white stamp mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path stroke="none" d="M0 0h24v24H0z"/>
+                      <path d="M4 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4" />
+                      <line x1="8" y1="9" x2="16" y2="9" />
+                      <line x1="8" y1="13" x2="14" y2="13" />
+                    </svg>
                   </span>
                   <div class="mr-3 lh-sm">
                     <div class="strong">
@@ -827,7 +920,7 @@
               <div class="card card-sm">
                 <div class="card-body d-flex align-items-center">
                   <div class="mr-3">
-                    <div class="chart-sparkline chart-sparkline-square" id="sparkline-16"></div>
+                    <div class="chart-sparkline chart-sparkline-square" id="sparkline-76"></div>
                   </div>
                   <div class="mr-3 lh-sm">
                     <div class="strong">
@@ -842,7 +935,7 @@
               <div class="card card-sm">
                 <div class="card-body d-flex align-items-center">
                   <div class="mr-3">
-                    <div class="chart-sparkline chart-sparkline-square" id="sparkline-17"></div>
+                    <div class="chart-sparkline chart-sparkline-square" id="sparkline-77"></div>
                   </div>
                   <div class="mr-3 lh-sm">
                     <div class="strong">
@@ -857,7 +950,7 @@
               <div class="card card-sm">
                 <div class="card-body d-flex align-items-center">
                   <div class="mr-3">
-                    <div class="chart-sparkline chart-sparkline-square" id="sparkline-18"></div>
+                    <div class="chart-sparkline chart-sparkline-square" id="sparkline-78"></div>
                   </div>
                   <div class="mr-3 lh-sm">
                     <div class="strong">
@@ -872,7 +965,7 @@
               <div class="card card-sm">
                 <div class="card-body d-flex align-items-center">
                   <div class="mr-3">
-                    <div class="chart-sparkline chart-sparkline-square" id="sparkline-19"></div>
+                    <div class="chart-sparkline chart-sparkline-square" id="sparkline-79"></div>
                   </div>
                   <div class="mr-3 lh-sm">
                     <div class="strong">
@@ -893,13 +986,16 @@
                     <div class="text-muted">Users</div>
                   </div>
                   <div class="ml-auto">
-                    <div class="chart-sparkline" id="sparkline-20"></div>
+                    <div class="chart-sparkline" id="sparkline-80"></div>
                   </div>
                 </div>
               </div>
               <div class="card card-sm">
                 <div class="card-body d-flex align-items-center">
-                  <span class="bg-red text-white stamp mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
+                  <span class="bg-red text-white stamp mr-3"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path stroke="none" d="M0 0h24v24H0z"/>
+                      <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
+                    </svg>
                   </span>
                   <div class="mr-3 lh-sm">
                     <div class="strong">
@@ -908,13 +1004,15 @@
                     <div class="text-muted">Users</div>
                   </div>
                   <div class="ml-auto">
-                    <div class="chart-sparkline" id="sparkline-21"></div>
+                    <div class="chart-sparkline" id="sparkline-81"></div>
                   </div>
                 </div>
               </div>
               <div class="card card-sm">
                 <div class="card-body d-flex align-items-center">
-                  <span class="bg-green text-white stamp mr-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
+                  <span class="bg-green text-white stamp mr-3"><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>
                   </span>
                   <div class="mr-3 lh-sm">
                     <div class="strong">
@@ -923,7 +1021,7 @@
                     <div class="text-muted">Users</div>
                   </div>
                   <div class="ml-auto">
-                    <div class="chart-sparkline" id="sparkline-22"></div>
+                    <div class="chart-sparkline" id="sparkline-82"></div>
                   </div>
                 </div>
               </div>
@@ -937,7 +1035,7 @@
                     <div class="text-muted">Users</div>
                   </div>
                   <div class="ml-auto">
-                    <div class="chart-sparkline chart-sparkline-square" id="sparkline-23"></div>
+                    <div class="chart-sparkline chart-sparkline-square" id="sparkline-83"></div>
                   </div>
                 </div>
               </div>
@@ -951,7 +1049,7 @@
                     <div class="text-muted">Users</div>
                   </div>
                   <div class="ml-auto">
-                    <div class="chart-sparkline chart-sparkline-square" id="sparkline-24"></div>
+                    <div class="chart-sparkline chart-sparkline-square" id="sparkline-84"></div>
                   </div>
                 </div>
               </div>
@@ -965,7 +1063,7 @@
                     <div class="text-muted">Users</div>
                   </div>
                   <div class="ml-auto">
-                    <div class="chart-sparkline chart-sparkline-square" id="sparkline-25"></div>
+                    <div class="chart-sparkline chart-sparkline-square" id="sparkline-85"></div>
                   </div>
                 </div>
               </div>
@@ -986,7 +1084,11 @@
                   <div class="mr-3 lh-sm">
                     <div class="strong">
                       1,700 
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm ml-1 text-red"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"></polyline><polyline points="17 18 23 18 23 12"></polyline></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-sm ml-1 text-red" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <polyline points="3 7 9 13 13 9 21 17" />
+                        <polyline points="21 10 21 17 14 17" />
+                      </svg>
                     </div>
                     <div class="text-muted">Users</div>
                   </div>
@@ -1013,13 +1115,21 @@
               <div class="card" data-color=green>
                 <div class="card-body">
                   <div class="float-right stamp bg-yellow text-white">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path stroke="none" d="M0 0h24v24H0z"/>
+                      <circle cx="12" cy="7" r="4" />
+                      <path d="M5.5 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2" />
+                    </svg>
                   </div>
                   <div class="text-muted font-weight-normal mt-0">Customers</div>
                   <h3 class="h2 mt-2 mb-3">1,950</h3>
                   <p class="mb-0 text-muted">
                     <span class="text-green d-inline-flex align-items-center lh-1">
-                      5.2% <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon ml-1"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
+                      5.2% <svg xmlns="http://www.w3.org/2000/svg" class="icon ml-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"/>
+                        <polyline points="3 17 9 11 13 15 21 7" />
+                        <polyline points="14 7 21 7 21 14" />
+                      </svg>
                     </span>
                     <span class="text-nowrap">Since last month</span>
                   </p>
@@ -1028,13 +1138,20 @@
               <div class="card" data-color=grey>
                 <div class="card-body">
                   <div class="float-right stamp bg-green text-white">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path stroke="none" d="M0 0h24v24H0z"/>
+                      <circle cx="12" cy="7" r="4" />
+                      <path d="M5.5 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2" />
+                    </svg>
                   </div>
                   <div class="text-muted font-weight-normal mt-0">Orders</div>
                   <h3 class="h2 mt-2 mb-3">8256</h3>
                   <p class="mb-0 text-muted">
                     <span class="text-yellow d-inline-flex align-items-center lh-1">
-                      0% <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon ml-1"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                      0% <svg xmlns="http://www.w3.org/2000/svg" class="icon ml-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"/>
+                        <line x1="5" y1="12" x2="19" y2="12" />
+                      </svg>
                     </span>
                     <span class="text-nowrap">Since last month</span>
                   </p>
@@ -1043,13 +1160,21 @@
               <div class="card" data-color=red>
                 <div class="card-body">
                   <div class="float-right stamp bg-red-lt">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path stroke="none" d="M0 0h24v24H0z"/>
+                      <circle cx="12" cy="7" r="4" />
+                      <path d="M5.5 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2" />
+                    </svg>
                   </div>
                   <div class="text-muted font-weight-normal mt-0">Revenue</div>
                   <h3 class="h2 mt-2 mb-3">$58,924</h3>
                   <p class="mb-0 text-muted">
                     <span class="text-red d-inline-flex align-items-center lh-1">
-                      -3.1% <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon ml-1"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"></polyline><polyline points="17 18 23 18 23 12"></polyline></svg>
+                      -3.1% <svg xmlns="http://www.w3.org/2000/svg" class="icon ml-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"/>
+                        <polyline points="3 7 9 13 13 9 21 17" />
+                        <polyline points="21 10 21 17 14 17" />
+                      </svg>
                     </span>
                     <span class="text-nowrap">Since last month</span>
                   </p>
@@ -1066,7 +1191,12 @@
                 <div class="card-body">
                   <div class="dropdown card-options">
                     <button class="btn-options" type="button" data-toggle="dropdown">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <circle cx="12" cy="12" r="1" />
+                        <circle cx="12" cy="19" r="1" />
+                        <circle cx="12" cy="5" r="1" />
+                      </svg>
                     </button>
                     <div class="dropdown-menu dropdown-menu-right">
                       <a class="dropdown-item" href="#">
@@ -1088,7 +1218,10 @@
                   </div>
                   <div class="card-meta d-flex justify-content-between">
                     <div class="d-flex align-items-center">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <polyline points="20 7 10 17 5 12" />
+                      </svg>
                       <span>5/10</span>
                     </div>
                     <span>Due 72 days</span>
@@ -1104,7 +1237,12 @@
                 <div class="card-body">
                   <div class="dropdown card-options">
                     <button class="btn-options" type="button" data-toggle="dropdown">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <circle cx="12" cy="12" r="1" />
+                        <circle cx="12" cy="19" r="1" />
+                        <circle cx="12" cy="5" r="1" />
+                      </svg>
                     </button>
                     <div class="dropdown-menu dropdown-menu-right">
                       <a class="dropdown-item" href="#">
@@ -1129,7 +1267,10 @@
                   </div>
                   <div class="card-meta d-flex justify-content-between">
                     <div class="d-flex align-items-center">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <polyline points="20 7 10 17 5 12" />
+                      </svg>
                       <span>5/10</span>
                     </div>
                     <span>Due 2 days</span>
@@ -1140,28 +1281,62 @@
                 <div class="card-body">
                   <div class="card-title">Basic info</div>
                   <div class="mb-2">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2 text-muted"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-2 text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path stroke="none" d="M0 0h24v24H0z"/>
+                      <path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
+                      <path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" />
+                      <line x1="3" y1="6" x2="3" y2="19" />
+                      <line x1="12" y1="6" x2="12" y2="19" />
+                      <line x1="21" y1="6" x2="21" y2="19" />
+                    </svg>
                     Went to: <strong>University of Ljubljana</strong>
                   </div>
                   <div class="mb-2">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2 text-muted"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-2 text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path stroke="none" d="M0 0h24v24H0z"/>
+                      <rect x="3" y="7" width="18" height="13" rx="2" />
+                      <path d="M8 7v-2a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v2" />
+                      <line x1="12" y1="12" x2="12" y2="12.01" />
+                      <path d="M3 13a20 20 0 0 0 18 0" />
+                    </svg>
                     Worked at: <strong>Devpulse</strong>
                   </div>
                   <div class="mb-2">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2 text-muted"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-2 text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path stroke="none" d="M0 0h24v24H0z"/>
+                      <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>
                     Lives in: <strong>Šentilj v Slov. Goricah, Slovenia</strong>
                   </div>
                   <div class="mb-2">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2 text-muted"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-2 text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path stroke="none" d="M0 0h24v24H0z"/>
+                      <circle cx="12" cy="11" r="3" />
+                      <path d="M17.657 16.657L13.414 20.9a1.998 1.998 0 0 1 -2.827 0l-4.244-4.243a8 8 0 1 1 11.314 0z" />
+                    </svg>
                     From: <strong><span class="flag flag-country-si"></span>
                       Slovenia</strong>
                   </div>
                   <div class="mb-2">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2 text-muted"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-2 text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path stroke="none" d="M0 0h24v24H0z"/>
+                      <rect x="4" y="5" width="16" height="16" rx="2" />
+                      <line x1="16" y1="3" x2="16" y2="7" />
+                      <line x1="8" y1="3" x2="8" y2="7" />
+                      <line x1="4" y1="11" x2="20" y2="11" />
+                      <line x1="11" y1="15" x2="12" y2="15" />
+                      <line x1="12" y1="15" x2="12" y2="18" />
+                    </svg>
                     Birth date: <strong>13/01/1985</strong>
                   </div>
                   <div>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2 text-muted"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-2 text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path stroke="none" d="M0 0h24v24H0z"/>
+                      <circle cx="12" cy="12" r="9" />
+                      <polyline points="12 7 12 12 9 15" />
+                    </svg>
                     Time zone: <strong>Europe/Ljubljana</strong>
                   </div>
                 </div>
@@ -1173,7 +1348,12 @@
                   </h3>
                   <div class="card-actions">
                     <a href="#">
-                      Edit configuration<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon ml-1"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
+                      Edit configuration<svg xmlns="http://www.w3.org/2000/svg" class="icon ml-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"/>
+                        <path d="M9 7 h-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>
                     </a>
                   </div>
                 </div>
@@ -1224,7 +1404,11 @@
           <div class="modal-header">
             <h5 class="modal-title">New report</h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z"/>
+                <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">
@@ -1237,11 +1421,11 @@
               <div class="col-lg-6">
                 <label class="form-selectgroup-item">
                   <input type="radio" name="report-type" value="1" class="form-selectgroup-input" checked>
-                  <div class="form-selectgroup-box d-flex align-items-center p-3">
+                  <div class="form-selectgroup-label d-flex align-items-center p-3">
                     <div class="mr-3">
                       <span class="form-selectgroup-check"></span>
                     </div>
-                    <div class="form-selectgroup-box-content">
+                    <div class="form-selectgroup-label-content">
                       <div class="form-selectgroup-title strong mb-1">Simple</div>
                       <div class="text-muted">Provide only basic data needed for the report</div>
                     </div>
@@ -1251,11 +1435,11 @@
               <div class="col-lg-6">
                 <label class="form-selectgroup-item">
                   <input type="radio" name="report-type" value="1" class="form-selectgroup-input">
-                  <div class="form-selectgroup-box d-flex align-items-center p-3">
+                  <div class="form-selectgroup-label d-flex align-items-center p-3">
                     <div class="mr-3">
                       <span class="form-selectgroup-check"></span>
                     </div>
-                    <div class="form-selectgroup-box-content">
+                    <div class="form-selectgroup-label-content">
                       <div class="form-selectgroup-title strong mb-1">Advanced</div>
                       <div class="text-muted">Insert charts and additional advanced analyses to be inserted in the report</div>
                     </div>
@@ -1268,11 +1452,9 @@
                 <div class="mb-3">
                   <label class="form-label">Report url</label>
                   <div class="input-group input-group-flat">
-                    <div class="input-group-prepend">
-                      <span class="input-group-text">
-                        https://tabler.io/reports/
-                      </span>
-                    </div>
+                    <span class="input-group-text">
+                      https://tabler.io/reports/
+                    </span>
                     <input type="text" class="form-control pl-0"  value="report-01">
                   </div>
                 </div>
@@ -1316,74 +1498,17 @@
               Cancel
             </a>
             <a href="#" class="btn btn-primary ml-auto" data-dismiss="modal">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z"/>
+                <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>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
@@ -1392,7 +1517,7 @@
     <script src="./dist/js/tabler.min.js"></script>
     <script>
       document.addEventListener("DOMContentLoaded", function () {
-      	$().peity && $('#sparkline-16').text("56/100").peity("pie", {
+      	$().peity && $('#sparkline-76').text("56/100").peity("pie", {
       		width: 40,
       		height: 40,
       		stroke: "#206bc4",
@@ -1405,7 +1530,7 @@
     </script>
     <script>
       document.addEventListener("DOMContentLoaded", function () {
-      	$().peity && $('#sparkline-17').text("56/100").peity("pie", {
+      	$().peity && $('#sparkline-77').text("56/100").peity("pie", {
       		width: 40,
       		height: 40,
       		stroke: "#5eba00",
@@ -1418,7 +1543,7 @@
     </script>
     <script>
       document.addEventListener("DOMContentLoaded", function () {
-      	$().peity && $('#sparkline-18').text("56/100").peity("pie", {
+      	$().peity && $('#sparkline-78').text("56/100").peity("pie", {
       		width: 40,
       		height: 40,
       		stroke: "#fa4654",
@@ -1431,7 +1556,7 @@
     </script>
     <script>
       document.addEventListener("DOMContentLoaded", function () {
-      	$().peity && $('#sparkline-19').text("56/100").peity("pie", {
+      	$().peity && $('#sparkline-79').text("56/100").peity("pie", {
       		width: 40,
       		height: 40,
       		stroke: "#fab005",
@@ -1444,7 +1569,7 @@
     </script>
     <script>
       document.addEventListener("DOMContentLoaded", function () {
-      	$().peity && $('#sparkline-20').text("20,0,40,30,40,30,80,60").peity("line", {
+      	$().peity && $('#sparkline-80').text("20,0,40,30,40,30,80,60").peity("line", {
       		width: 64,
       		height: 40,
       		stroke: "#206bc4",
@@ -1456,7 +1581,7 @@
     </script>
     <script>
       document.addEventListener("DOMContentLoaded", function () {
-      	$().peity && $('#sparkline-21').text("20,40,30,10,40,60,80,70").peity("bar", {
+      	$().peity && $('#sparkline-81').text("20,40,30,10,40,60,80,70").peity("bar", {
       		width: 64,
       		height: 40,
       		stroke: "#fa4654",
@@ -1468,7 +1593,7 @@
     </script>
     <script>
       document.addEventListener("DOMContentLoaded", function () {
-      	$().peity && $('#sparkline-22').text("20,40,20,-10,-30,10,40,60,80,70").peity("bar", {
+      	$().peity && $('#sparkline-82').text("20,40,20,-10,-30,10,40,60,80,70").peity("bar", {
       		width: 64,
       		height: 40,
       		stroke: "#5eba00",
@@ -1480,7 +1605,7 @@
     </script>
     <script>
       document.addEventListener("DOMContentLoaded", function () {
-      	$().peity && $('#sparkline-23').text("12/100").peity("pie", {
+      	$().peity && $('#sparkline-83').text("12/100").peity("pie", {
       		width: 40,
       		height: 40,
       		stroke: "#206bc4",
@@ -1493,7 +1618,7 @@
     </script>
     <script>
       document.addEventListener("DOMContentLoaded", function () {
-      	$().peity && $('#sparkline-24').text("12/100").peity("pie", {
+      	$().peity && $('#sparkline-84').text("12/100").peity("pie", {
       		width: 40,
       		height: 40,
       		stroke: "#206bc4",
@@ -1506,7 +1631,7 @@
     </script>
     <script>
       document.addEventListener("DOMContentLoaded", function () {
-      	$().peity && $('#sparkline-25').text("56/100").peity("pie", {
+      	$().peity && $('#sparkline-85').text("56/100").peity("pie", {
       		width: 40,
       		height: 40,
       		stroke: "#206bc4",
@@ -1517,119 +1642,6 @@
       	});
       });
     </script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/social.html b/demo/social.html
index e3fa1bda4..f7f9504ba 100644
--- a/demo/social.html
+++ b/demo/social.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container-narrow">
+        <div class="container-xl">
           <div class="row">
             <div class="col">
               <div class="card">
@@ -535,13 +600,29 @@
                     <div class="col-auto text-muted">
                       <div class="btn-list">
                         <a href="#" class="btn btn-link btn-icon link-secondary btn-sm" data-toggle="tooltip" title="Add photo">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <line x1="15" y1="8" x2="15.01" y2="8" />
+                            <rect x="4" y="4" width="16" height="16" rx="3" />
+                            <path d="M4 15l4 -4a3 5 0 0 1 3 0l 5 5" />
+                            <path d="M14 14l1 -1a3 5 0 0 1 3 0l 2 2" />
+                          </svg>
                         </a>
                         <a href="#" class="btn btn-link btn-icon link-secondary btn-sm" data-toggle="tooltip" title="Attach file">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="12" y1="18" x2="12" y2="12"></line><line x1="9" y1="15" x2="15" y2="15"></line></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <polyline points="14 3 14 8 19 8" />
+                            <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
+                            <line x1="12" y1="11" x2="12" y2="17" />
+                            <line x1="9" y1="14" x2="15" y2="14" />
+                          </svg>
                         </a>
                         <a href="#" class="btn btn-link btn-icon link-secondary btn-sm" data-toggle="tooltip" title="Share your position">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z"/>
+                            <circle cx="12" cy="11" r="3" />
+                            <path d="M17.657 16.657L13.414 20.9a1.998 1.998 0 0 1 -2.827 0l-4.244-4.243a8 8 0 1 1 11.314 0z" />
+                          </svg>
                         </a>
                       </div>
                     </div>
@@ -571,186 +652,12 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <script src="./dist/libs/autosize/dist/autosize.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       (function () {
       	const elements = document.querySelectorAll('[data-toggle="autosize"]');
diff --git a/demo/store.html b/demo/store.html
index 4084fe85e..db93fb990 100644
--- a/demo/store.html
+++ b/demo/store.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -546,7 +611,11 @@
                           <strong></strong>
                         </div>
                         <div class="ml-auto">
-                          <a href="#" class="btn btn-primary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                          <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"/>
+                              <line x1="12" y1="5" x2="12" y2="19" />
+                              <line x1="5" y1="12" x2="19" y2="12" />
+                            </svg>
                             Add to cart</a>
                         </div>
                       </div>
@@ -565,7 +634,11 @@
                           <strong></strong>
                         </div>
                         <div class="ml-auto">
-                          <a href="#" class="btn btn-primary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                          <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"/>
+                              <line x1="12" y1="5" x2="12" y2="19" />
+                              <line x1="5" y1="12" x2="19" y2="12" />
+                            </svg>
                             Add to cart</a>
                         </div>
                       </div>
@@ -751,185 +824,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/tables.html b/demo/tables.html
index 1cd2a4692..5750bf30f 100644
--- a/demo/tables.html
+++ b/demo/tables.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -1046,19 +1111,52 @@
                 <thead>
                   <tr>
                     <th class="w-1"><input class="form-check-input m-0 align-middle" type="checkbox"></th>
-                    <th class="w-1">No. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-sm text-dark icon-thick"><polyline points="18 15 12 9 6 15"></polyline></svg>
+                    <th class="w-1">No. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-sm text-dark icon-thick" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <polyline points="6 15 12 9 18 15" />
+                      </svg>
                     </th>
-                    <th>Invoice Subject <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
+                    <th>Invoice Subject <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <polyline points="7 8 3 12 7 16" />
+                        <polyline points="17 8 21 12 17 16" />
+                        <line x1="14" y1="4" x2="10" y2="20" />
+                      </svg>
                     </th>
-                    <th>Client <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
+                    <th>Client <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <polyline points="7 8 3 12 7 16" />
+                        <polyline points="17 8 21 12 17 16" />
+                        <line x1="14" y1="4" x2="10" y2="20" />
+                      </svg>
                     </th>
-                    <th>VAT No. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
+                    <th>VAT No. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <polyline points="7 8 3 12 7 16" />
+                        <polyline points="17 8 21 12 17 16" />
+                        <line x1="14" y1="4" x2="10" y2="20" />
+                      </svg>
                     </th>
-                    <th>Created <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
+                    <th>Created <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <polyline points="7 8 3 12 7 16" />
+                        <polyline points="17 8 21 12 17 16" />
+                        <line x1="14" y1="4" x2="10" y2="20" />
+                      </svg>
                     </th>
-                    <th>Status <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
+                    <th>Status <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <polyline points="7 8 3 12 7 16" />
+                        <polyline points="17 8 21 12 17 16" />
+                        <line x1="14" y1="4" x2="10" y2="20" />
+                      </svg>
                     </th>
-                    <th>Price <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
+                    <th>Price <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <polyline points="7 8 3 12 7 16" />
+                        <polyline points="17 8 21 12 17 16" />
+                        <line x1="14" y1="4" x2="10" y2="20" />
+                      </svg>
                     </th>
                     <th></th>
                   </tr>
@@ -1328,7 +1426,10 @@
               <ul class="pagination m-0 ml-auto">
                 <li class="page-item disabled">
                   <a class="page-link" href="#" tabindex="-1">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="15 18 9 12 15 6"></polyline></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path stroke="none" d="M0 0h24v24H0z"/>
+                      <polyline points="15 6 9 12 15 18" />
+                    </svg>
                     prev
                   </a>
                 </li>
@@ -1339,7 +1440,10 @@
                 <li class="page-item"><a class="page-link" href="#">5</a></li>
                 <li class="page-item">
                   <a class="page-link" href="#">
-                    next <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 18 15 12 9 6"></polyline></svg>
+                    next <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path stroke="none" d="M0 0h24v24H0z"/>
+                      <polyline points="9 6 15 12 9 18" />
+                    </svg>
                   </a>
                 </li>
               </ul>
@@ -1366,185 +1470,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/tabs.html b/demo/tabs.html
index 9b23ad330..b89d8add9 100644
--- a/demo/tabs.html
+++ b/demo/tabs.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -536,25 +601,29 @@
               <div class="card">
                 <ul class="nav nav-tabs" data-toggle="tabs">
                   <li class="nav-item">
-                    <a href="#tabs-home-26" class="nav-link active" data-toggle="tab">Home</a>
+                    <a href="#tabs-home-86" class="nav-link active" data-toggle="tab">Home</a>
                   </li>
                   <li class="nav-item">
-                    <a href="#tabs-profile-26" class="nav-link" data-toggle="tab">Profile</a>
+                    <a href="#tabs-profile-86" class="nav-link" data-toggle="tab">Profile</a>
                   </li>
                   <li class="nav-item ml-auto">
-                    <a href="#tabs-settings-26" class="nav-link" title="Settings" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                    <a href="#tabs-settings-86" class="nav-link" title="Settings" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <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.37.996.608 2.296.07 2.572-1.065z" />
+                        <circle cx="12" cy="12" r="3" />
+                      </svg>
                     </a>
                   </li>
                 </ul>
                 <div class="card-body">
                   <div class="tab-content">
-                    <div class="tab-pane active show" id="tabs-home-26">
+                    <div class="tab-pane active show" id="tabs-home-86">
                       <div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
                     </div>
-                    <div class="tab-pane" id="tabs-profile-26">
+                    <div class="tab-pane" id="tabs-profile-86">
                       <div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
                     </div>
-                    <div class="tab-pane" id="tabs-settings-26">
+                    <div class="tab-pane" id="tabs-settings-86">
                       <div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
                     </div>
                   </div>
@@ -565,25 +634,29 @@
               <div class="card">
                 <ul class="nav nav-tabs flex-row-reverse" data-toggle="tabs">
                   <li class="nav-item">
-                    <a href="#tabs-home-27" class="nav-link active" data-toggle="tab">Home</a>
+                    <a href="#tabs-home-87" class="nav-link active" data-toggle="tab">Home</a>
                   </li>
                   <li class="nav-item">
-                    <a href="#tabs-profile-27" class="nav-link" data-toggle="tab">Profile</a>
+                    <a href="#tabs-profile-87" class="nav-link" data-toggle="tab">Profile</a>
                   </li>
                   <li class="nav-item mr-auto">
-                    <a href="#tabs-settings-27" class="nav-link" title="Settings" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                    <a href="#tabs-settings-87" class="nav-link" title="Settings" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <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.37.996.608 2.296.07 2.572-1.065z" />
+                        <circle cx="12" cy="12" r="3" />
+                      </svg>
                     </a>
                   </li>
                 </ul>
                 <div class="card-body">
                   <div class="tab-content">
-                    <div class="tab-pane active show" id="tabs-home-27">
+                    <div class="tab-pane active show" id="tabs-home-87">
                       <div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
                     </div>
-                    <div class="tab-pane" id="tabs-profile-27">
+                    <div class="tab-pane" id="tabs-profile-87">
                       <div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
                     </div>
-                    <div class="tab-pane" id="tabs-settings-27">
+                    <div class="tab-pane" id="tabs-settings-87">
                       <div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
                     </div>
                   </div>
@@ -594,20 +667,29 @@
               <div class="card">
                 <ul class="nav nav-tabs" data-toggle="tabs">
                   <li class="nav-item">
-                    <a href="#tabs-home-28" class="nav-link active" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                    <a href="#tabs-home-88" class="nav-link active" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon mr-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <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>
                       Home</a>
                   </li>
                   <li class="nav-item">
-                    <a href="#tabs-profile-28" class="nav-link" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                    <a href="#tabs-profile-88" class="nav-link" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon mr-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <circle cx="12" cy="7" r="4" />
+                        <path d="M5.5 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2" />
+                      </svg>
                       Profile</a>
                   </li>
                 </ul>
                 <div class="card-body">
                   <div class="tab-content">
-                    <div class="tab-pane active show" id="tabs-home-28">
+                    <div class="tab-pane active show" id="tabs-home-88">
                       <div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
                     </div>
-                    <div class="tab-pane" id="tabs-profile-28">
+                    <div class="tab-pane" id="tabs-profile-88">
                       <div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
                     </div>
                   </div>
@@ -618,25 +700,29 @@
               <div class="card">
                 <ul class="nav nav-tabs nav-tabs-alt" data-toggle="tabs">
                   <li class="nav-item">
-                    <a href="#tabs-home-29" class="nav-link active" data-toggle="tab">Home</a>
+                    <a href="#tabs-home-89" class="nav-link active" data-toggle="tab">Home</a>
                   </li>
                   <li class="nav-item">
-                    <a href="#tabs-profile-29" class="nav-link" data-toggle="tab">Profile</a>
+                    <a href="#tabs-profile-89" class="nav-link" data-toggle="tab">Profile</a>
                   </li>
                   <li class="nav-item ml-auto">
-                    <a href="#tabs-settings-29" class="nav-link" title="Settings" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                    <a href="#tabs-settings-89" class="nav-link" title="Settings" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <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.37.996.608 2.296.07 2.572-1.065z" />
+                        <circle cx="12" cy="12" r="3" />
+                      </svg>
                     </a>
                   </li>
                 </ul>
                 <div class="card-body">
                   <div class="tab-content">
-                    <div class="tab-pane active show" id="tabs-home-29">
+                    <div class="tab-pane active show" id="tabs-home-89">
                       <div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
                     </div>
-                    <div class="tab-pane" id="tabs-profile-29">
+                    <div class="tab-pane" id="tabs-profile-89">
                       <div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
                     </div>
-                    <div class="tab-pane" id="tabs-settings-29">
+                    <div class="tab-pane" id="tabs-settings-89">
                       <div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
                     </div>
                   </div>
@@ -647,25 +733,29 @@
               <div class="card">
                 <ul class="nav nav-tabs nav-tabs-alt flex-row-reverse" data-toggle="tabs">
                   <li class="nav-item">
-                    <a href="#tabs-home-30" class="nav-link active" data-toggle="tab">Home</a>
+                    <a href="#tabs-home-90" class="nav-link active" data-toggle="tab">Home</a>
                   </li>
                   <li class="nav-item">
-                    <a href="#tabs-profile-30" class="nav-link" data-toggle="tab">Profile</a>
+                    <a href="#tabs-profile-90" class="nav-link" data-toggle="tab">Profile</a>
                   </li>
                   <li class="nav-item mr-auto">
-                    <a href="#tabs-settings-30" class="nav-link" title="Settings" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                    <a href="#tabs-settings-90" class="nav-link" title="Settings" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <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.37.996.608 2.296.07 2.572-1.065z" />
+                        <circle cx="12" cy="12" r="3" />
+                      </svg>
                     </a>
                   </li>
                 </ul>
                 <div class="card-body">
                   <div class="tab-content">
-                    <div class="tab-pane active show" id="tabs-home-30">
+                    <div class="tab-pane active show" id="tabs-home-90">
                       <div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
                     </div>
-                    <div class="tab-pane" id="tabs-profile-30">
+                    <div class="tab-pane" id="tabs-profile-90">
                       <div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
                     </div>
-                    <div class="tab-pane" id="tabs-settings-30">
+                    <div class="tab-pane" id="tabs-settings-90">
                       <div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
                     </div>
                   </div>
@@ -676,20 +766,29 @@
               <div class="card">
                 <ul class="nav nav-tabs nav-tabs-alt" data-toggle="tabs">
                   <li class="nav-item">
-                    <a href="#tabs-home-31" class="nav-link active" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                    <a href="#tabs-home-91" class="nav-link active" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon mr-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <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>
                       Home</a>
                   </li>
                   <li class="nav-item">
-                    <a href="#tabs-profile-31" class="nav-link" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                    <a href="#tabs-profile-91" class="nav-link" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon mr-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <circle cx="12" cy="7" r="4" />
+                        <path d="M5.5 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2" />
+                      </svg>
                       Profile</a>
                   </li>
                 </ul>
                 <div class="card-body">
                   <div class="tab-content">
-                    <div class="tab-pane active show" id="tabs-home-31">
+                    <div class="tab-pane active show" id="tabs-home-91">
                       <div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
                     </div>
-                    <div class="tab-pane" id="tabs-profile-31">
+                    <div class="tab-pane" id="tabs-profile-91">
                       <div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
                     </div>
                   </div>
@@ -700,10 +799,10 @@
               <div class="card">
                 <ul class="nav nav-tabs" data-toggle="tabs">
                   <li class="nav-item">
-                    <a href="#tabs-home-32" class="nav-link active" data-toggle="tab">Home</a>
+                    <a href="#tabs-home-92" class="nav-link active" data-toggle="tab">Home</a>
                   </li>
                   <li class="nav-item">
-                    <a href="#tabs-profile-32" class="nav-link" data-toggle="tab">Profile</a>
+                    <a href="#tabs-profile-92" class="nav-link" data-toggle="tab">Profile</a>
                   </li>
                   <li class="nav-item dropdown">
                     <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
@@ -719,10 +818,10 @@
                 </ul>
                 <div class="card-body">
                   <div class="tab-content">
-                    <div class="tab-pane active show" id="tabs-home-32">
+                    <div class="tab-pane active show" id="tabs-home-92">
                       <div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
                     </div>
-                    <div class="tab-pane" id="tabs-profile-32">
+                    <div class="tab-pane" id="tabs-profile-92">
                       <div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
                     </div>
                   </div>
@@ -733,24 +832,24 @@
               <div class="card">
                 <ul class="nav nav-tabs nav-fill" data-toggle="tabs">
                   <li class="nav-item">
-                    <a href="#tabs-home-33" class="nav-link active" data-toggle="tab">Home</a>
+                    <a href="#tabs-home-93" class="nav-link active" data-toggle="tab">Home</a>
                   </li>
                   <li class="nav-item">
-                    <a href="#tabs-profile-33" class="nav-link" data-toggle="tab">Profile</a>
+                    <a href="#tabs-profile-93" class="nav-link" data-toggle="tab">Profile</a>
                   </li>
                   <li class="nav-item">
-                    <a href="#tabs-activity-33" class="nav-link" data-toggle="tab">Activity</a>
+                    <a href="#tabs-activity-93" class="nav-link" data-toggle="tab">Activity</a>
                   </li>
                 </ul>
                 <div class="card-body">
                   <div class="tab-content">
-                    <div class="tab-pane active show" id="tabs-home-33">
+                    <div class="tab-pane active show" id="tabs-home-93">
                       <div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
                     </div>
-                    <div class="tab-pane" id="tabs-profile-33">
+                    <div class="tab-pane" id="tabs-profile-93">
                       <div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
                     </div>
-                    <div class="tab-pane" id="tabs-activity-33">
+                    <div class="tab-pane" id="tabs-activity-93">
                       <div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
                     </div>
                   </div>
@@ -761,21 +860,21 @@
               <div class="card">
                 <ul class="nav nav-tabs nav-fill" data-toggle="tabs">
                   <li class="nav-item">
-                    <a href="#tabs-home-34" class="nav-link active" data-toggle="tab">Home</a>
+                    <a href="#tabs-home-94" class="nav-link active" data-toggle="tab">Home</a>
                   </li>
                   <li class="nav-item">
-                    <a href="#tabs-profile-34" class="nav-link" data-toggle="tab">Profile</a>
+                    <a href="#tabs-profile-94" class="nav-link" data-toggle="tab">Profile</a>
                   </li>
                   <li class="nav-item">
-                    <a href="#tabs-activity-34" class="nav-link disabled" data-toggle="tab">Disabled</a>
+                    <a href="#tabs-activity-94" class="nav-link disabled" data-toggle="tab">Disabled</a>
                   </li>
                 </ul>
                 <div class="card-body">
                   <div class="tab-content">
-                    <div class="tab-pane active show" id="tabs-home-34">
+                    <div class="tab-pane active show" id="tabs-home-94">
                       <div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
                     </div>
-                    <div class="tab-pane" id="tabs-profile-34">
+                    <div class="tab-pane" id="tabs-profile-94">
                       <div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
                     </div>
                   </div>
@@ -786,27 +885,39 @@
               <div class="card">
                 <ul class="nav nav-tabs nav-fill" data-toggle="tabs">
                   <li class="nav-item">
-                    <a href="#tabs-home-35" class="nav-link active" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                    <a href="#tabs-home-95" class="nav-link active" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon mr-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <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>
                       Home</a>
                   </li>
                   <li class="nav-item">
-                    <a href="#tabs-profile-35" class="nav-link" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+                    <a href="#tabs-profile-95" class="nav-link" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon mr-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <circle cx="12" cy="7" r="4" />
+                        <path d="M5.5 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2" />
+                      </svg>
                       Profile</a>
                   </li>
                   <li class="nav-item">
-                    <a href="#tabs-activity-35" class="nav-link" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon mr-2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
+                    <a href="#tabs-activity-95" class="nav-link" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon mr-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z"/>
+                        <polyline points="21 12 17 12 14 20 10 4 7 12 3 12" />
+                      </svg>
                       Activity</a>
                   </li>
                 </ul>
                 <div class="card-body">
                   <div class="tab-content">
-                    <div class="tab-pane active show" id="tabs-home-35">
+                    <div class="tab-pane active show" id="tabs-home-95">
                       <div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
                     </div>
-                    <div class="tab-pane" id="tabs-profile-35">
+                    <div class="tab-pane" id="tabs-profile-95">
                       <div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
                     </div>
-                    <div class="tab-pane" id="tabs-activity-35">
+                    <div class="tab-pane" id="tabs-activity-95">
                       <div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
                     </div>
                   </div>
@@ -817,24 +928,24 @@
               <div class="card">
                 <ul class="nav nav-tabs" data-toggle="tabs">
                   <li class="nav-item">
-                    <a href="#tabs-home-36" class="nav-link active" data-toggle="tab">Home</a>
+                    <a href="#tabs-home-96" class="nav-link active" data-toggle="tab">Home</a>
                   </li>
                   <li class="nav-item">
-                    <a href="#tabs-profile-36" class="nav-link" data-toggle="tab">Profile</a>
+                    <a href="#tabs-profile-96" class="nav-link" data-toggle="tab">Profile</a>
                   </li>
                   <li class="nav-item">
-                    <a href="#tabs-activity-36" class="nav-link" data-toggle="tab">Activity</a>
+                    <a href="#tabs-activity-96" class="nav-link" data-toggle="tab">Activity</a>
                   </li>
                 </ul>
                 <div class="card-body">
                   <div class="tab-content">
-                    <div class="tab-pane fade active show" id="tabs-home-36">
+                    <div class="tab-pane fade active show" id="tabs-home-96">
                       <div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
                     </div>
-                    <div class="tab-pane fade" id="tabs-profile-36">
+                    <div class="tab-pane fade" id="tabs-profile-96">
                       <div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
                     </div>
-                    <div class="tab-pane fade" id="tabs-activity-36">
+                    <div class="tab-pane fade" id="tabs-activity-96">
                       <div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
                     </div>
                   </div>
@@ -863,185 +974,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/terms-of-service.html b/demo/terms-of-service.html
index d949044d3..098d0c782 100644
--- a/demo/terms-of-service.html
+++ b/demo/terms-of-service.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
diff --git a/demo/tmp-dark.html b/demo/tmp-dark.html
index e80d5ae18..b1b3a5a79 100644
--- a/demo/tmp-dark.html
+++ b/demo/tmp-dark.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -670,27 +735,21 @@
                     <label class="form-label">Input with appended text</label>
                     <div class="input-group input-group-flat">
                       <input type="text" class="form-control text-right pr-0" >
-                      <div class="input-group-append">
-                        <span class="input-group-text">
-                          .tabler.io
-                        </span>
-                      </div>
+                      <span class="input-group-text">
+                        .tabler.io
+                      </span>
                     </div>
                   </div>
                   <div class="mb-3">
                     <label class="form-label">Price</label>
                     <div class="input-group">
-                      <div class="input-group-prepend">
-                        <span class="input-group-text">
-                          $
-                        </span>
-                      </div>
+                      <span class="input-group-text">
+                        $
+                      </span>
                       <input type="text" class="form-control" >
-                      <div class="input-group-append">
-                        <span class="input-group-text">
-                          .00
-                        </span>
-                      </div>
+                      <span class="input-group-text">
+                        .00
+                      </span>
                     </div>
                   </div>
                 </div>
@@ -837,27 +896,21 @@
                     <label class="form-label">Input with appended text</label>
                     <div class="input-group input-group-flat">
                       <input type="text" class="form-control text-right pr-0" >
-                      <div class="input-group-append">
-                        <span class="input-group-text">
-                          .tabler.io
-                        </span>
-                      </div>
+                      <span class="input-group-text">
+                        .tabler.io
+                      </span>
                     </div>
                   </div>
                   <div class="mb-3">
                     <label class="form-label">Price</label>
                     <div class="input-group">
-                      <div class="input-group-prepend">
-                        <span class="input-group-text">
-                          $
-                        </span>
-                      </div>
+                      <span class="input-group-text">
+                        $
+                      </span>
                       <input type="text" class="form-control" >
-                      <div class="input-group-append">
-                        <span class="input-group-text">
-                          .00
-                        </span>
-                      </div>
+                      <span class="input-group-text">
+                        .00
+                      </span>
                     </div>
                   </div>
                 </div>
@@ -888,185 +941,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/tmp.html b/demo/tmp.html
index 355629f5e..3c16fae5a 100644
--- a/demo/tmp.html
+++ b/demo/tmp.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <div class="card">
             <div class="card-body">
               <div class="row">
@@ -574,185 +639,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/tmp3.html b/demo/tmp3.html
index fb763a205..7bf324b6d 100644
--- a/demo/tmp3.html
+++ b/demo/tmp3.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <div class="row">
             <div class="col-md-6">
               <div class="card">
@@ -656,185 +721,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/typography.html b/demo/typography.html
index b6efd2e6c..434a0ddd4 100644
--- a/demo/typography.html
+++ b/demo/typography.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -173,13 +245,30 @@
                 </ul>
               </li>
               <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+                <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -815,185 +880,11 @@
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/users.html b/demo/users.html
index 61c4b5f30..ce7e28849 100644
--- a/demo/users.html
+++ b/demo/users.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -49,37 +49,104 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <nav class="navbar navbar-expand-lg navbar-light navbar-primary" id="navbar-primary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
+      <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-collapse collapse">
-            <h6 class="navbar-heading">Navigation</h6>
+          <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"/>
+                  <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"/>
+                    <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.37.996.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"/>
+                    <path d="M9 7 h-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"/>
+                    <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="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+          <div class="container-xl">
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                  <span 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"/>
+                      <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>
-                  <span class="nav-link-title">Home</span>
                 </a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
+              <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"/>
+                      <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">Form elements</span>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                  <span class="nav-link-title">
+                    User Interface
                   </span>
-                  <span class="nav-link-title">Base</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-2">
+                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
                   <li >
                     <a class="dropdown-item" href="./empty.html" >
                       Empty page
@@ -120,6 +187,11 @@
                       Vector maps
                     </a>
                   </li>
+                  <li >
+                    <a class="dropdown-item" href="./navigation.html" >
+                      Navigation
+                    </a>
+                  </li>
                   <li >
                     <a class="dropdown-item" href="./charts.html" >
                       Charts
@@ -172,14 +244,31 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button"
-			   aria-expanded="true" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Extra</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow">
+              </li>
+              <li class="nav-item active 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"/>
+                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.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
@@ -227,14 +316,89 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button"
-			   aria-expanded="false" >
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
+              <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"/>
+                      <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>
-                  <span class="nav-link-title">Docs</span>
                 </a>
-                <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-columns  dropdown-menu-columns-3">
+                <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-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"/>
+                      <polyline points="14 3 14 8 19 8" />
+                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 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
@@ -402,125 +566,26 @@
                   </li>
                 </ul>
               </li>
-              <li class="nav-item d-none-navbar-vertical">
-                <a href="#" class="nav-link" data-toggle="modal" data-target="#modal-customize">
-                  <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                  </span>
-                  <span class="nav-link-title">Customize</span>
-                </a>
-              </li>
             </ul>
-            <h6 class="navbar-heading mt-4">Tools</h6>
-            <div class="navbar-side">
-              <div class="d-none d-xl-block ml-auto d-none-navbar-vertical-narrow">
-                <form action="." method="get">
-                  <div class="input-icon">
-                    <span class="input-icon-addon">
-                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-                    </span>
-                    <input type="text" class="form-control" placeholder="Search…">
-                  </div>
-                </form>
-              </div>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-narrow btn-block" data-toggle="modal" data-target="#modal-customize">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-                Customize
-              </a>
-              <a href="#" class="btn btn-primary d-none-navbar-horizontal d-none-navbar-vertical-wide btn-block btn-icon" data-toggle="modal" data-target="#modal-customize" aria-label="Button">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
-              </a>
+            <div 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"/>
+                      <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>
-      </nav>
-      <nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
-        <div class="container">
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-vertical">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-large">
-            <img src="./static/logo-small.svg" alt="Tabler" class="navbar-brand-logo navbar-brand-logo-small">
-          </a>
-          <form class="form-inline w-50 mr-4 d-none d-md-flex ">
-            <div class="input-icon w-100">
-              <span class="input-icon-addon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-              </span>
-              <input type="text" class="form-control form-control-flush w-100" placeholder="Search…">
-            </div>
-          </form>
-          <ul class="navbar-nav ml-auto">
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link" data-toggle="dropdown">
-                <span class="flag flag-country-us mr-1"></span>
-                <span class="d-none d-lg-inline">English</span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" style="">
-                <a href="#" class="dropdown-item"><span class="flag flag-country-de mr-1"></span>
-                  German</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-pl mr-1"></span>
-                  Polish</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-jp mr-1"></span>
-                  Japan</a>
-                <a href="#" class="dropdown-item"><span class="flag flag-country-ru mr-1"></span>
-                  Russian</a>
-              </div>
-            </li>
-            <li class="nav-item dropdown">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown">
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow dropdown-menu-card" style="max-width: 20rem;">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </li>
-            <li class="nav-item dropdown pl-3">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0 text-left" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-lg-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">Founder</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon dropdown-item-icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-                  Separated link</a>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      </div>
       <div class="content">
-        <div class="container">
+        <div class="container-xl">
           <!-- Page title -->
           <div class="page-header">
             <div class="row align-items-center">
@@ -537,7 +602,11 @@
                 <div class="d-flex">
                   <input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user…"/>
                   <a href="#" class="btn btn-primary">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <path stroke="none" d="M0 0h24v24H0z"/>
+                      <line x1="12" y1="5" x2="12" y2="19" />
+                      <line x1="5" y1="12" x2="19" y2="12" />
+                    </svg>
                     New user
                   </a>
                 </div>
@@ -1335,7 +1404,10 @@
             <ul class="pagination ml-auto">
               <li class="page-item disabled">
                 <a class="page-link" href="#" tabindex="-1">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="15 18 9 12 15 6"></polyline></svg>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <polyline points="15 6 9 12 15 18" />
+                  </svg>
                   prev
                 </a>
               </li>
@@ -1346,7 +1418,10 @@
               <li class="page-item"><a class="page-link" href="#">5</a></li>
               <li class="page-item">
                 <a class="page-link" href="#">
-                  next <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><polyline points="9 18 15 12 9 6"></polyline></svg>
+                  next <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z"/>
+                    <polyline points="9 6 15 12 9 18" />
+                  </svg>
                 </a>
               </li>
             </ul>
@@ -1378,7 +1453,11 @@
           <div class="modal-header">
             <h5 class="modal-title">New report</h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z"/>
+                <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">
@@ -1391,11 +1470,11 @@
               <div class="col-lg-6">
                 <label class="form-selectgroup-item">
                   <input type="radio" name="report-type" value="1" class="form-selectgroup-input" checked>
-                  <div class="form-selectgroup-box d-flex align-items-center p-3">
+                  <div class="form-selectgroup-label d-flex align-items-center p-3">
                     <div class="mr-3">
                       <span class="form-selectgroup-check"></span>
                     </div>
-                    <div class="form-selectgroup-box-content">
+                    <div class="form-selectgroup-label-content">
                       <div class="form-selectgroup-title strong mb-1">Simple</div>
                       <div class="text-muted">Provide only basic data needed for the report</div>
                     </div>
@@ -1405,11 +1484,11 @@
               <div class="col-lg-6">
                 <label class="form-selectgroup-item">
                   <input type="radio" name="report-type" value="1" class="form-selectgroup-input">
-                  <div class="form-selectgroup-box d-flex align-items-center p-3">
+                  <div class="form-selectgroup-label d-flex align-items-center p-3">
                     <div class="mr-3">
                       <span class="form-selectgroup-check"></span>
                     </div>
-                    <div class="form-selectgroup-box-content">
+                    <div class="form-selectgroup-label-content">
                       <div class="form-selectgroup-title strong mb-1">Advanced</div>
                       <div class="text-muted">Insert charts and additional advanced analyses to be inserted in the report</div>
                     </div>
@@ -1422,11 +1501,9 @@
                 <div class="mb-3">
                   <label class="form-label">Report url</label>
                   <div class="input-group input-group-flat">
-                    <div class="input-group-prepend">
-                      <span class="input-group-text">
-                        https://tabler.io/reports/
-                      </span>
-                    </div>
+                    <span class="input-group-text">
+                      https://tabler.io/reports/
+                    </span>
                     <input type="text" class="form-control pl-0"  value="report-01">
                   </div>
                 </div>
@@ -1470,192 +1547,22 @@
               Cancel
             </a>
             <a href="#" class="btn btn-primary ml-auto" data-dismiss="modal">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z"/>
+                <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>
-    <div class="modal modal-blur fade" id="modal-customize" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Customize Tabler</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p class="text-muted">Set preferences that will be saved for your live preview.</p>
-            <div class="mb-3">
-              <label class="form-label">Color scheme</label>
-              <div class="form-hint">Light or dark presentation.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="theme:light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
-                  Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="theme:dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
-                  Dark</button>
-              </div>
-            </div>
-            <div class="mb-4 text-muted">
-              You can use the <code>.theme-dark-auto</code> class to automatically adjust the color version to the system settings.
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Navigation position</label>
-              <div class="form-hint">Choose where the main navigation in your project should be located.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:horizontal">Topnav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:vertical">Sidenav</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-position:both">Both</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar size</label>
-              <div class="form-hint">Standard sidebar width or narrow version with icons only.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:wide">Wide</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-size:narrow">Narrow</button>
-              </div>
-            </div>
-            <div class="mb-3">
-              <label class="form-label">Sidebar position</label>
-              <div class="form-hint">Choose whether the sidebar should appear on the left or on the right.</div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:left">Left</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-side:right">Right</button>
-              </div>
-            </div>
-            <div>
-              <label class="form-label">Navigation color</label>
-              <div class="form-hint">Light or dark version of the sidebar </div>
-              <div class="btn-group w-100">
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:light">Light</button>
-                <button class="btn btn-secondary" data-theme-toggle="navbar-color:dark">Dark</button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function() {
-      	var navbarPrimary = document.getElementById('navbar-primary'),
-      		navbarSecondary = document.getElementById('navbar-secondary');
-      	var defaults = {
-      		theme: 'light',
-      		'navbar-position': 'horizontal',
-      		'navbar-size': 'wide',
-      		'navbar-side': 'left',
-      		'navbar-color': 'light',
-      	};
-      	var eventsClean = {
-      		'theme': function () {
-      			document.body.classList.remove('theme-dark');
-      		},
-      		'navbar-position': function () {
-      			navbarPrimary.classList.remove('navbar-vertical');
-      			navbarSecondary.classList.remove('d-none');
-      		},
-      		'navbar-size': function () {
-      			navbarPrimary.classList.remove('navbar-vertical-narrow');
-      		},
-      		'navbar-side': function () {
-      			navbarPrimary.classList.remove('navbar-right');
-      		},
-      		'navbar-color': function () {
-      			navbarPrimary.classList.remove('navbar-dark');
-      			navbarPrimary.classList.add('navbar-light');
-      		},
-      	};
-      	var events = {
-      		'theme:light': function () {
-      		},
-      		'theme:dark': function () {
-      			document.body.classList.add('theme-dark');
-      		},
-      		'navbar-position:vertical': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      			navbarSecondary.classList.add('d-none');
-      		},
-      		'navbar-position:horizontal': function () {
-      		},
-      		'navbar-position:both': function () {
-      			navbarPrimary.classList.add('navbar-vertical');
-      		},
-      		'navbar-size:wide': function () {
-      		},
-      		'navbar-size:narrow': function () {
-      			navbarPrimary.classList.add('navbar-vertical-narrow');
-      		},
-      		'navbar-side:left': function () {
-      		},
-      		'navbar-side:right': function () {
-      			navbarPrimary.classList.add('navbar-right');
-      		},
-      		'navbar-color:light': function () {
-      		},
-      		'navbar-color:dark': function () {
-      			navbarPrimary.classList.add('navbar-dark');
-      			navbarPrimary.classList.remove('navbar-light');
-      		},
-      	};
-      	var updateThemeConfig = function (name) {
-      		var key, value;
-      		if (name) {
-      			[key, value] = name.split(':');
-      			setConfig(key, value);
-      		}
-      		applyConfig();
-      	};
-      	var disableTransitions = function () {
-      		document.body.classList.add('no-transitions');
-      		setTimeout(function () {
-      			document.body.classList.remove('no-transitions');
-      		}, 300);
-      	};
-      	var getConfig = function () {
-      		var config = {};
-      		for (var key in defaults) {
-      			config[key] = localStorage.getItem('tabler-' + key) || defaults[key];
-      		}
-      		return config;
-      	};
-      	var setConfig = function (key, value) {
-      		localStorage.setItem('tabler-' + key, value);
-      	};
-      	var applyConfig = function () {
-      		disableTransitions();
-      		var config = getConfig();
-      		for (var key in config) {
-      			var value = config[key];
-      			eventsClean[key] && eventsClean[key].call();
-      			events[key + ':' + value] && events[key + ':' + value].call();
-      			([].slice.call(document.querySelectorAll('[data-theme-toggle^="' + key + '"]'))).map(function (activeTrigger) {
-      				activeTrigger.classList.remove('active')
-      			});
-      			document.querySelector('[data-theme-toggle="' + key + ':' + value + '"]').classList.add('active');
-      		}
-      	};
-      	applyConfig();
-      	for (var name in events) {
-      		var event = events[name];
-      		(function (event, name) {
-      			document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
-      				updateThemeConfig(name);
-      				event.call();
-      				e.preventDefault();
-      				return false;
-      			});
-      		})(event, name);
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>
diff --git a/demo/welcome.html b/demo/welcome.html
index 22d1a4b08..751a473dc 100644
--- a/demo/welcome.html
+++ b/demo/welcome.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.4
+* @version 1.0.0-alpha.5
 * @link https://github.com/tabler/tabler
 * Copyright 2018-2019 The Tabler Authors
 * Copyright 2018-2019 codecalm.net Paweł Kuna
@@ -66,11 +66,9 @@
                 <label class="form-label">Create your Tabler URL</label>
                 <div class="form-hint">Choose a URL that describes you or your business in a concise way. Make it short and easy to remember so you can share links with ease.</div>
                 <div class="input-group input-group-flat">
-                  <div class="input-group-prepend">
-                    <span class="input-group-text">
-                      https://tabler.io/
-                    </span>
-                  </div>
+                  <span class="input-group-text">
+                    https://tabler.io/
+                  </span>
                   <input type="text" class="form-control pl-1" >
                 </div>
               </div>
diff --git a/dist/css/demo.css b/dist/css/demo.css
index 42be5c721..17246c858 100644
--- a/dist/css/demo.css
+++ b/dist/css/demo.css
@@ -1,5 +1,5 @@
 /*!
- * Tabler (v1.0.0-alpha.4)
+ * Tabler (v1.0.0-alpha.5)
  * Copyright 2018-2020 The Tabler Authors
  * Copyright 2018-2020 codecalm
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
@@ -12,7 +12,7 @@ pre.highlight,
   max-height: 30rem;
   margin: 1.5rem 0;
   overflow: auto;
-  font-size: 0.6875rem;
+  font-size: 0.625rem;
   background: #354052;
   border-radius: 3px;
   color: #ffffff; }
@@ -55,7 +55,7 @@ pre.highlight,
 .example {
   padding: 2rem;
   margin: 2rem 0;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 3px 3px 0 0;
   position: relative;
   min-height: 12rem;
@@ -69,7 +69,7 @@ pre.highlight,
     flex: 0 auto; }
 
 .example-content {
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   flex: 1;
   max-width: 100%; }
 
@@ -108,12 +108,12 @@ pre.highlight,
 
 @media not print {
   .theme-dark .example-code {
-    border: 1px solid rgba(134, 140, 151, 0.24);
+    border: 1px solid rgba(110, 117, 130, 0.2);
     border-top: none; } }
 
 @media not print and (prefers-color-scheme: dark) {
   .theme-dark-auto .example-code {
-    border: 1px solid rgba(134, 140, 151, 0.24);
+    border: 1px solid rgba(110, 117, 130, 0.2);
     border-top: none; } }
 
 .card-sponsor {
@@ -132,7 +132,7 @@ body.no-transitions * {
   padding-left: 1rem; }
 
 .toc-entry a {
-  color: #868c97; }
+  color: #6e7582; }
 
 .dropdown-menu-demo {
   display: inline-block;
diff --git a/dist/css/demo.css.map b/dist/css/demo.css.map
index 8de83d3ca..3234bdd79 100644
Binary files a/dist/css/demo.css.map and b/dist/css/demo.css.map differ
diff --git a/dist/css/demo.min.css b/dist/css/demo.min.css
index 8cbe4c14d..40dd007da 100644
--- a/dist/css/demo.min.css
+++ b/dist/css/demo.min.css
@@ -1,7 +1,7 @@
 /*!
- * Tabler (v1.0.0-alpha.4)
+ * Tabler (v1.0.0-alpha.5)
  * Copyright 2018-2020 The Tabler Authors
  * Copyright 2018-2020 codecalm
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */.highlight pre,pre.highlight{max-height:30rem;margin:1.5rem 0;overflow:auto;font-size:.6875rem;background:#354052;border-radius:3px;color:#fff}.highlight pre::-webkit-scrollbar,pre.highlight::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.highlight pre::-webkit-scrollbar-thumb,pre.highlight::-webkit-scrollbar-thumb{border-radius:5px;background:0 0}.highlight pre::-webkit-scrollbar-corner,pre.highlight::-webkit-scrollbar-corner{background:0 0}.highlight pre:hover::-webkit-scrollbar-thumb,pre.highlight:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#5d6675}.highlight .c,.highlight .c1{color:#a0aec0}.highlight .na,.highlight .nl,.highlight .nx,.language-css .highlight .na,.language-scss .highlight .na{color:#ffe484}.highlight .dl,.highlight .mh,.highlight .s,.highlight .s1,.highlight .s2{color:#b5f4a5}.highlight .language-js .nb,.highlight .mi,.highlight .nc,.highlight .nd,.highlight .nt{color:#93ddfd}.highlight .language-html .nt,.highlight .nb{color:#ff8383}.highlight .k,.highlight .kd,.highlight .n,.highlight .nv{color:#d9a9ff}.example{padding:2rem;margin:2rem 0;border:1px solid rgba(134,140,151,.24);border-radius:3px 3px 0 0;position:relative;min-height:12rem;display:flex;align-items:center;overflow-x:auto}.example-centered{justify-content:center}.example-centered .example-content{flex:0 auto}.example-content{font-size:.9375rem;flex:1;max-width:100%}.example-bg{background:#f5f7fb}.example-code{margin:2rem 0;border-top:none}.example-code pre{margin:0;border-radius:0 0 3px 3px}.example+.example-code{margin-top:-2rem}.example-column{margin:0 auto}.example-column>.card:last-of-type{margin-bottom:0}.example-column-1{max-width:20rem}.example-column-2{max-width:40rem}.example-modal-backdrop{background:#354052;opacity:.24;position:absolute;width:100%;left:0;top:0;height:100%;border-radius:2px 2px 0 0}@media not print{.theme-dark .example-code{border:1px solid rgba(134,140,151,.24);border-top:none}}@media not print and (prefers-color-scheme:dark){.theme-dark-auto .example-code{border:1px solid rgba(134,140,151,.24);border-top:none}}.card-sponsor{background:#dbe7f6 no-repeat center/100% 100%;border-color:#548ed2;min-height:316px}body.no-transitions *{transition:none!important}.toc-entry:before{content:'- '}.toc-entry ul{list-style:none;padding-left:1rem}.toc-entry a{color:#868c97}.dropdown-menu-demo{display:inline-block;width:100%;position:relative;top:0;margin-bottom:1rem}
+ */.highlight pre,pre.highlight{max-height:30rem;margin:1.5rem 0;overflow:auto;font-size:.625rem;background:#354052;border-radius:3px;color:#fff}.highlight pre::-webkit-scrollbar,pre.highlight::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.highlight pre::-webkit-scrollbar-thumb,pre.highlight::-webkit-scrollbar-thumb{border-radius:5px;background:0 0}.highlight pre::-webkit-scrollbar-corner,pre.highlight::-webkit-scrollbar-corner{background:0 0}.highlight pre:hover::-webkit-scrollbar-thumb,pre.highlight:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#5d6675}.highlight .c,.highlight .c1{color:#a0aec0}.highlight .na,.highlight .nl,.highlight .nx,.language-css .highlight .na,.language-scss .highlight .na{color:#ffe484}.highlight .dl,.highlight .mh,.highlight .s,.highlight .s1,.highlight .s2{color:#b5f4a5}.highlight .language-js .nb,.highlight .mi,.highlight .nc,.highlight .nd,.highlight .nt{color:#93ddfd}.highlight .language-html .nt,.highlight .nb{color:#ff8383}.highlight .k,.highlight .kd,.highlight .n,.highlight .nv{color:#d9a9ff}.example{padding:2rem;margin:2rem 0;border:1px solid rgba(110,117,130,.2);border-radius:3px 3px 0 0;position:relative;min-height:12rem;display:flex;align-items:center;overflow-x:auto}.example-centered{justify-content:center}.example-centered .example-content{flex:0 auto}.example-content{font-size:.875rem;flex:1;max-width:100%}.example-bg{background:#f5f7fb}.example-code{margin:2rem 0;border-top:none}.example-code pre{margin:0;border-radius:0 0 3px 3px}.example+.example-code{margin-top:-2rem}.example-column{margin:0 auto}.example-column>.card:last-of-type{margin-bottom:0}.example-column-1{max-width:20rem}.example-column-2{max-width:40rem}.example-modal-backdrop{background:#354052;opacity:.24;position:absolute;width:100%;left:0;top:0;height:100%;border-radius:2px 2px 0 0}@media not print{.theme-dark .example-code{border:1px solid rgba(110,117,130,.2);border-top:none}}@media not print and (prefers-color-scheme:dark){.theme-dark-auto .example-code{border:1px solid rgba(110,117,130,.2);border-top:none}}.card-sponsor{background:#dbe7f6 no-repeat center/100% 100%;border-color:#548ed2;min-height:316px}body.no-transitions *{transition:none!important}.toc-entry:before{content:'- '}.toc-entry ul{list-style:none;padding-left:1rem}.toc-entry a{color:#6e7582}.dropdown-menu-demo{display:inline-block;width:100%;position:relative;top:0;margin-bottom:1rem}
 /*# sourceMappingURL=demo.min.css.map */
\ No newline at end of file
diff --git a/dist/css/demo.min.css.map b/dist/css/demo.min.css.map
index 27909b166..c80cd71fa 100644
Binary files a/dist/css/demo.min.css.map and b/dist/css/demo.min.css.map differ
diff --git a/dist/css/tabler-buttons.css b/dist/css/tabler-buttons.css
index 7946ad2b2..7dbcceb1f 100644
--- a/dist/css/tabler-buttons.css
+++ b/dist/css/tabler-buttons.css
@@ -1,5 +1,5 @@
 /*!
- * Tabler (v1.0.0-alpha.4)
+ * Tabler (v1.0.0-alpha.5)
  * Copyright 2018-2020 The Tabler Authors
  * Copyright 2018-2020 codecalm
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
@@ -34,28 +34,28 @@ Dark mode
     border-color: transparent; }
 
 .btn-ghost-secondary {
-  color: #868c97;
+  color: #6e7582;
   background-color: transparent;
   border-color: transparent; }
   .btn-ghost-secondary:hover {
     color: #fff;
-    background-color: #868c97;
-    border-color: #868c97; }
+    background-color: #6e7582;
+    border-color: #6e7582; }
   .btn-ghost-secondary:focus, .btn-ghost-secondary.focus {
     color: #fff;
-    background-color: #868c97;
-    border-color: #868c97;
-    box-shadow: 0 0 0 0.2rem rgba(134, 140, 151, 0.5); }
+    background-color: #6e7582;
+    border-color: #6e7582;
+    box-shadow: 0 0 0 0.2rem rgba(110, 117, 130, 0.5); }
   .btn-ghost-secondary:active, .btn-ghost-secondary.active,
   .show > .btn-ghost-secondary.dropdown-toggle {
     color: #ffffff;
-    background-color: #868c97;
-    border-color: #868c97; }
+    background-color: #6e7582;
+    border-color: #6e7582; }
     .btn-ghost-secondary:active:focus, .btn-ghost-secondary.active:focus,
     .show > .btn-ghost-secondary.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(134, 140, 151, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(110, 117, 130, 0.5); }
   .btn-ghost-secondary:disabled, .btn-ghost-secondary.disabled {
-    color: #868c97;
+    color: #6e7582;
     background-color: transparent;
     border-color: transparent; }
 
@@ -74,7 +74,7 @@ Dark mode
     box-shadow: 0 0 0 0.2rem rgba(94, 186, 0, 0.5); }
   .btn-ghost-success:active, .btn-ghost-success.active,
   .show > .btn-ghost-success.dropdown-toggle {
-    color: #354052;
+    color: #ffffff;
     background-color: #5eba00;
     border-color: #5eba00; }
     .btn-ghost-success:active:focus, .btn-ghost-success.active:focus,
@@ -100,7 +100,7 @@ Dark mode
     box-shadow: 0 0 0 0.2rem rgba(69, 170, 242, 0.5); }
   .btn-ghost-info:active, .btn-ghost-info.active,
   .show > .btn-ghost-info.dropdown-toggle {
-    color: #354052;
+    color: #ffffff;
     background-color: #45aaf2;
     border-color: #45aaf2; }
     .btn-ghost-info:active:focus, .btn-ghost-info.active:focus,
@@ -126,7 +126,7 @@ Dark mode
     box-shadow: 0 0 0 0.2rem rgba(250, 176, 5, 0.5); }
   .btn-ghost-warning:active, .btn-ghost-warning.active,
   .show > .btn-ghost-warning.dropdown-toggle {
-    color: #354052;
+    color: #ffffff;
     background-color: #fab005;
     border-color: #fab005; }
     .btn-ghost-warning:active:focus, .btn-ghost-warning.active:focus,
@@ -138,28 +138,28 @@ Dark mode
     border-color: transparent; }
 
 .btn-ghost-danger {
-  color: #fa4654;
+  color: #cd201f;
   background-color: transparent;
   border-color: transparent; }
   .btn-ghost-danger:hover {
     color: #fff;
-    background-color: #fa4654;
-    border-color: #fa4654; }
+    background-color: #cd201f;
+    border-color: #cd201f; }
   .btn-ghost-danger:focus, .btn-ghost-danger.focus {
     color: #fff;
-    background-color: #fa4654;
-    border-color: #fa4654;
-    box-shadow: 0 0 0 0.2rem rgba(250, 70, 84, 0.5); }
+    background-color: #cd201f;
+    border-color: #cd201f;
+    box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.5); }
   .btn-ghost-danger:active, .btn-ghost-danger.active,
   .show > .btn-ghost-danger.dropdown-toggle {
     color: #ffffff;
-    background-color: #fa4654;
-    border-color: #fa4654; }
+    background-color: #cd201f;
+    border-color: #cd201f; }
     .btn-ghost-danger:active:focus, .btn-ghost-danger.active:focus,
     .show > .btn-ghost-danger.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(250, 70, 84, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.5); }
   .btn-ghost-danger:disabled, .btn-ghost-danger.disabled {
-    color: #fa4654;
+    color: #cd201f;
     background-color: transparent;
     border-color: transparent; }
 
@@ -261,7 +261,7 @@ Dark mode
     background-color: transparent; }
 
 .btn-twitter {
-  color: #354052;
+  color: #ffffff;
   background-color: #1da1f2;
   border-color: #1da1f2; }
   .btn-twitter:hover {
@@ -272,7 +272,7 @@ Dark mode
     color: #ffffff;
     background-color: #0d8ddc;
     border-color: #0c85d0;
-    box-shadow: 0 0 0 0.2rem rgba(33, 146, 218, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(63, 175, 244, 0.5); }
   .btn-twitter:active, .btn-twitter.active,
   .show > .btn-twitter.dropdown-toggle {
     color: #ffffff;
@@ -280,9 +280,9 @@ Dark mode
     border-color: #0b7ec4; }
     .btn-twitter:active:focus, .btn-twitter.active:focus,
     .show > .btn-twitter.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(33, 146, 218, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(63, 175, 244, 0.5); }
   .btn-twitter:disabled, .btn-twitter.disabled {
-    color: #354052;
+    color: #ffffff;
     background-color: #1da1f2;
     border-color: #1da1f2; }
 
@@ -296,7 +296,7 @@ Dark mode
   .btn-outline-twitter:focus, .btn-outline-twitter.focus {
     box-shadow: 0 0 0 0.2rem rgba(29, 161, 242, 0.5); }
   .btn-outline-twitter:active, .btn-outline-twitter.active, .btn-outline-twitter.dropdown-toggle.show {
-    color: #354052;
+    color: #ffffff;
     background-color: #1da1f2;
     border-color: #1da1f2; }
     .btn-outline-twitter:active:focus, .btn-outline-twitter.active:focus, .btn-outline-twitter.dropdown-toggle.show:focus {
@@ -396,7 +396,7 @@ Dark mode
     background-color: transparent; }
 
 .btn-vimeo {
-  color: #354052;
+  color: #ffffff;
   background-color: #1ab7ea;
   border-color: #1ab7ea; }
   .btn-vimeo:hover {
@@ -407,7 +407,7 @@ Dark mode
     color: #ffffff;
     background-color: #139ecb;
     border-color: #1295bf;
-    box-shadow: 0 0 0 0.2rem rgba(30, 165, 211, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(60, 194, 237, 0.5); }
   .btn-vimeo:active, .btn-vimeo.active,
   .show > .btn-vimeo.dropdown-toggle {
     color: #ffffff;
@@ -415,9 +415,9 @@ Dark mode
     border-color: #108cb4; }
     .btn-vimeo:active:focus, .btn-vimeo.active:focus,
     .show > .btn-vimeo.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(30, 165, 211, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(60, 194, 237, 0.5); }
   .btn-vimeo:disabled, .btn-vimeo.disabled {
-    color: #354052;
+    color: #ffffff;
     background-color: #1ab7ea;
     border-color: #1ab7ea; }
 
@@ -431,7 +431,7 @@ Dark mode
   .btn-outline-vimeo:focus, .btn-outline-vimeo.focus {
     box-shadow: 0 0 0 0.2rem rgba(26, 183, 234, 0.5); }
   .btn-outline-vimeo:active, .btn-outline-vimeo.active, .btn-outline-vimeo.dropdown-toggle.show {
-    color: #354052;
+    color: #ffffff;
     background-color: #1ab7ea;
     border-color: #1ab7ea; }
     .btn-outline-vimeo:active:focus, .btn-outline-vimeo.active:focus, .btn-outline-vimeo.dropdown-toggle.show:focus {
@@ -666,18 +666,18 @@ Dark mode
     background-color: transparent; }
 
 .btn-rss {
-  color: #354052;
+  color: #ffffff;
   background-color: #ffa500;
   border-color: #ffa500; }
   .btn-rss:hover {
-    color: #354052;
+    color: #ffffff;
     background-color: #d98c00;
     border-color: #cc8400; }
   .btn-rss:focus, .btn-rss.focus {
-    color: #354052;
+    color: #ffffff;
     background-color: #d98c00;
     border-color: #cc8400;
-    box-shadow: 0 0 0 0.2rem rgba(225, 150, 12, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(255, 179, 38, 0.5); }
   .btn-rss:active, .btn-rss.active,
   .show > .btn-rss.dropdown-toggle {
     color: #ffffff;
@@ -685,9 +685,9 @@ Dark mode
     border-color: #bf7c00; }
     .btn-rss:active:focus, .btn-rss.active:focus,
     .show > .btn-rss.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(225, 150, 12, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(255, 179, 38, 0.5); }
   .btn-rss:disabled, .btn-rss.disabled {
-    color: #354052;
+    color: #ffffff;
     background-color: #ffa500;
     border-color: #ffa500; }
 
@@ -701,7 +701,7 @@ Dark mode
   .btn-outline-rss:focus, .btn-outline-rss.focus {
     box-shadow: 0 0 0 0.2rem rgba(255, 165, 0, 0.5); }
   .btn-outline-rss:active, .btn-outline-rss.active, .btn-outline-rss.dropdown-toggle.show {
-    color: #354052;
+    color: #ffffff;
     background-color: #ffa500;
     border-color: #ffa500; }
     .btn-outline-rss:active:focus, .btn-outline-rss.active:focus, .btn-outline-rss.dropdown-toggle.show:focus {
@@ -891,7 +891,7 @@ Dark mode
     background-color: transparent; }
 
 .btn-azure {
-  color: #354052;
+  color: #ffffff;
   background-color: #45aaf2;
   border-color: #45aaf2; }
   .btn-azure:hover {
@@ -902,7 +902,7 @@ Dark mode
     color: #ffffff;
     background-color: #219af0;
     border-color: #1594ef;
-    box-shadow: 0 0 0 0.2rem rgba(67, 154, 218, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(97, 183, 244, 0.5); }
   .btn-azure:active, .btn-azure.active,
   .show > .btn-azure.dropdown-toggle {
     color: #ffffff;
@@ -910,9 +910,9 @@ Dark mode
     border-color: #108ee7; }
     .btn-azure:active:focus, .btn-azure.active:focus,
     .show > .btn-azure.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(67, 154, 218, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(97, 183, 244, 0.5); }
   .btn-azure:disabled, .btn-azure.disabled {
-    color: #354052;
+    color: #ffffff;
     background-color: #45aaf2;
     border-color: #45aaf2; }
 
@@ -926,7 +926,7 @@ Dark mode
   .btn-outline-azure:focus, .btn-outline-azure.focus {
     box-shadow: 0 0 0 0.2rem rgba(69, 170, 242, 0.5); }
   .btn-outline-azure:active, .btn-outline-azure.active, .btn-outline-azure.dropdown-toggle.show {
-    color: #354052;
+    color: #ffffff;
     background-color: #45aaf2;
     border-color: #45aaf2; }
     .btn-outline-azure:active:focus, .btn-outline-azure.active:focus, .btn-outline-azure.dropdown-toggle.show:focus {
@@ -1026,7 +1026,7 @@ Dark mode
     background-color: transparent; }
 
 .btn-pink {
-  color: #354052;
+  color: #ffffff;
   background-color: #f66d9b;
   border-color: #f66d9b; }
   .btn-pink:hover {
@@ -1037,7 +1037,7 @@ Dark mode
     color: #ffffff;
     background-color: #f44982;
     border-color: #f33d7a;
-    box-shadow: 0 0 0 0.2rem rgba(217, 102, 144, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(247, 131, 170, 0.5); }
   .btn-pink:active, .btn-pink.active,
   .show > .btn-pink.dropdown-toggle {
     color: #ffffff;
@@ -1045,9 +1045,9 @@ Dark mode
     border-color: #f23172; }
     .btn-pink:active:focus, .btn-pink.active:focus,
     .show > .btn-pink.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(217, 102, 144, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(247, 131, 170, 0.5); }
   .btn-pink:disabled, .btn-pink.disabled {
-    color: #354052;
+    color: #ffffff;
     background-color: #f66d9b;
     border-color: #f66d9b; }
 
@@ -1061,7 +1061,7 @@ Dark mode
   .btn-outline-pink:focus, .btn-outline-pink.focus {
     box-shadow: 0 0 0 0.2rem rgba(246, 109, 155, 0.5); }
   .btn-outline-pink:active, .btn-outline-pink.active, .btn-outline-pink.dropdown-toggle.show {
-    color: #354052;
+    color: #ffffff;
     background-color: #f66d9b;
     border-color: #f66d9b; }
     .btn-outline-pink:active:focus, .btn-outline-pink.active:focus, .btn-outline-pink.dropdown-toggle.show:focus {
@@ -1072,72 +1072,72 @@ Dark mode
 
 .btn-red {
   color: #ffffff;
-  background-color: #fa4654;
-  border-color: #fa4654; }
+  background-color: #cd201f;
+  border-color: #cd201f; }
   .btn-red:hover {
     color: #ffffff;
-    background-color: #f92132;
-    border-color: #f91426; }
+    background-color: #ac1b1a;
+    border-color: #a11918; }
   .btn-red:focus, .btn-red.focus {
     color: #ffffff;
-    background-color: #f92132;
-    border-color: #f91426;
-    box-shadow: 0 0 0 0.2rem rgba(251, 98, 110, 0.5); }
+    background-color: #ac1b1a;
+    border-color: #a11918;
+    box-shadow: 0 0 0 0.2rem rgba(213, 65, 65, 0.5); }
   .btn-red:active, .btn-red.active,
   .show > .btn-red.dropdown-toggle {
     color: #ffffff;
-    background-color: #f91426;
-    border-color: #f8081b; }
+    background-color: #a11918;
+    border-color: #961717; }
     .btn-red:active:focus, .btn-red.active:focus,
     .show > .btn-red.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(251, 98, 110, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(213, 65, 65, 0.5); }
   .btn-red:disabled, .btn-red.disabled {
     color: #ffffff;
-    background-color: #fa4654;
-    border-color: #fa4654; }
+    background-color: #cd201f;
+    border-color: #cd201f; }
 
 .btn-outline-red {
-  color: #fa4654;
-  border-color: #fa4654; }
+  color: #cd201f;
+  border-color: #cd201f; }
   .btn-outline-red:hover {
-    color: #fa4654;
-    background-color: #fa4654;
-    border-color: #fa4654; }
+    color: #cd201f;
+    background-color: #cd201f;
+    border-color: #cd201f; }
   .btn-outline-red:focus, .btn-outline-red.focus {
-    box-shadow: 0 0 0 0.2rem rgba(250, 70, 84, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.5); }
   .btn-outline-red:active, .btn-outline-red.active, .btn-outline-red.dropdown-toggle.show {
     color: #ffffff;
-    background-color: #fa4654;
-    border-color: #fa4654; }
+    background-color: #cd201f;
+    border-color: #cd201f; }
     .btn-outline-red:active:focus, .btn-outline-red.active:focus, .btn-outline-red.dropdown-toggle.show:focus {
-      box-shadow: 0 0 0 0.2rem rgba(250, 70, 84, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.5); }
   .btn-outline-red:disabled, .btn-outline-red.disabled {
-    color: #fa4654;
+    color: #cd201f;
     background-color: transparent; }
 
 .btn-orange {
-  color: #354052;
+  color: #ffffff;
   background-color: #ff922b;
   border-color: #ff922b; }
   .btn-orange:hover {
-    color: #354052;
+    color: #ffffff;
     background-color: #ff7e05;
     border-color: #f77800; }
   .btn-orange:focus, .btn-orange.focus {
-    color: #354052;
+    color: #ffffff;
     background-color: #ff7e05;
     border-color: #f77800;
-    box-shadow: 0 0 0 0.2rem rgba(225, 134, 49, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(255, 162, 75, 0.5); }
   .btn-orange:active, .btn-orange.active,
   .show > .btn-orange.dropdown-toggle {
-    color: #354052;
+    color: #ffffff;
     background-color: #f77800;
     border-color: #ea7200; }
     .btn-orange:active:focus, .btn-orange.active:focus,
     .show > .btn-orange.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(225, 134, 49, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(255, 162, 75, 0.5); }
   .btn-orange:disabled, .btn-orange.disabled {
-    color: #354052;
+    color: #ffffff;
     background-color: #ff922b;
     border-color: #ff922b; }
 
@@ -1151,7 +1151,7 @@ Dark mode
   .btn-outline-orange:focus, .btn-outline-orange.focus {
     box-shadow: 0 0 0 0.2rem rgba(255, 146, 43, 0.5); }
   .btn-outline-orange:active, .btn-outline-orange.active, .btn-outline-orange.dropdown-toggle.show {
-    color: #354052;
+    color: #ffffff;
     background-color: #ff922b;
     border-color: #ff922b; }
     .btn-outline-orange:active:focus, .btn-outline-orange.active:focus, .btn-outline-orange.dropdown-toggle.show:focus {
@@ -1161,28 +1161,28 @@ Dark mode
     background-color: transparent; }
 
 .btn-yellow {
-  color: #354052;
+  color: #ffffff;
   background-color: #fab005;
   border-color: #fab005; }
   .btn-yellow:hover {
-    color: #354052;
+    color: #ffffff;
     background-color: #d59604;
     border-color: #c88d04; }
   .btn-yellow:focus, .btn-yellow.focus {
-    color: #354052;
+    color: #ffffff;
     background-color: #d59604;
     border-color: #c88d04;
-    box-shadow: 0 0 0 0.2rem rgba(220, 159, 17, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(251, 188, 43, 0.5); }
   .btn-yellow:active, .btn-yellow.active,
   .show > .btn-yellow.dropdown-toggle {
-    color: #354052;
+    color: #ffffff;
     background-color: #c88d04;
     border-color: #bc8404; }
     .btn-yellow:active:focus, .btn-yellow.active:focus,
     .show > .btn-yellow.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(220, 159, 17, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(251, 188, 43, 0.5); }
   .btn-yellow:disabled, .btn-yellow.disabled {
-    color: #354052;
+    color: #ffffff;
     background-color: #fab005;
     border-color: #fab005; }
 
@@ -1196,7 +1196,7 @@ Dark mode
   .btn-outline-yellow:focus, .btn-outline-yellow.focus {
     box-shadow: 0 0 0 0.2rem rgba(250, 176, 5, 0.5); }
   .btn-outline-yellow:active, .btn-outline-yellow.active, .btn-outline-yellow.dropdown-toggle.show {
-    color: #354052;
+    color: #ffffff;
     background-color: #fab005;
     border-color: #fab005; }
     .btn-outline-yellow:active:focus, .btn-outline-yellow.active:focus, .btn-outline-yellow.dropdown-toggle.show:focus {
@@ -1206,28 +1206,28 @@ Dark mode
     background-color: transparent; }
 
 .btn-lime {
-  color: #354052;
+  color: #ffffff;
   background-color: #94d82d;
   border-color: #94d82d; }
   .btn-lime:hover {
-    color: #354052;
+    color: #ffffff;
     background-color: #7fbc23;
     border-color: #78b121; }
   .btn-lime:focus, .btn-lime.focus {
-    color: #354052;
+    color: #ffffff;
     background-color: #7fbc23;
     border-color: #78b121;
-    box-shadow: 0 0 0 0.2rem rgba(134, 193, 51, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(164, 222, 77, 0.5); }
   .btn-lime:active, .btn-lime.active,
   .show > .btn-lime.dropdown-toggle {
-    color: #354052;
+    color: #ffffff;
     background-color: #78b121;
     border-color: #70a61f; }
     .btn-lime:active:focus, .btn-lime.active:focus,
     .show > .btn-lime.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(134, 193, 51, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(164, 222, 77, 0.5); }
   .btn-lime:disabled, .btn-lime.disabled {
-    color: #354052;
+    color: #ffffff;
     background-color: #94d82d;
     border-color: #94d82d; }
 
@@ -1241,7 +1241,7 @@ Dark mode
   .btn-outline-lime:focus, .btn-outline-lime.focus {
     box-shadow: 0 0 0 0.2rem rgba(148, 216, 45, 0.5); }
   .btn-outline-lime:active, .btn-outline-lime.active, .btn-outline-lime.dropdown-toggle.show {
-    color: #354052;
+    color: #ffffff;
     background-color: #94d82d;
     border-color: #94d82d; }
     .btn-outline-lime:active:focus, .btn-outline-lime.active:focus, .btn-outline-lime.dropdown-toggle.show:focus {
@@ -1251,7 +1251,7 @@ Dark mode
     background-color: transparent; }
 
 .btn-green {
-  color: #354052;
+  color: #ffffff;
   background-color: #5eba00;
   border-color: #5eba00; }
   .btn-green:hover {
@@ -1262,7 +1262,7 @@ Dark mode
     color: #ffffff;
     background-color: #4b9400;
     border-color: #448700;
-    box-shadow: 0 0 0 0.2rem rgba(88, 168, 12, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(118, 196, 38, 0.5); }
   .btn-green:active, .btn-green.active,
   .show > .btn-green.dropdown-toggle {
     color: #ffffff;
@@ -1270,9 +1270,9 @@ Dark mode
     border-color: #3e7a00; }
     .btn-green:active:focus, .btn-green.active:focus,
     .show > .btn-green.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(88, 168, 12, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(118, 196, 38, 0.5); }
   .btn-green:disabled, .btn-green.disabled {
-    color: #354052;
+    color: #ffffff;
     background-color: #5eba00;
     border-color: #5eba00; }
 
@@ -1286,7 +1286,7 @@ Dark mode
   .btn-outline-green:focus, .btn-outline-green.focus {
     box-shadow: 0 0 0 0.2rem rgba(94, 186, 0, 0.5); }
   .btn-outline-green:active, .btn-outline-green.active, .btn-outline-green.dropdown-toggle.show {
-    color: #354052;
+    color: #ffffff;
     background-color: #5eba00;
     border-color: #5eba00; }
     .btn-outline-green:active:focus, .btn-outline-green.active:focus, .btn-outline-green.dropdown-toggle.show:focus {
@@ -1296,18 +1296,18 @@ Dark mode
     background-color: transparent; }
 
 .btn-teal {
-  color: #354052;
+  color: #ffffff;
   background-color: #2bcbba;
   border-color: #2bcbba; }
   .btn-teal:hover {
-    color: #354052;
+    color: #ffffff;
     background-color: #24ab9d;
     border-color: #22a193; }
   .btn-teal:focus, .btn-teal.focus {
-    color: #354052;
+    color: #ffffff;
     background-color: #24ab9d;
     border-color: #22a193;
-    box-shadow: 0 0 0 0.2rem rgba(45, 182, 170, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(75, 211, 196, 0.5); }
   .btn-teal:active, .btn-teal.active,
   .show > .btn-teal.dropdown-toggle {
     color: #ffffff;
@@ -1315,9 +1315,9 @@ Dark mode
     border-color: #20968a; }
     .btn-teal:active:focus, .btn-teal.active:focus,
     .show > .btn-teal.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(45, 182, 170, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(75, 211, 196, 0.5); }
   .btn-teal:disabled, .btn-teal.disabled {
-    color: #354052;
+    color: #ffffff;
     background-color: #2bcbba;
     border-color: #2bcbba; }
 
@@ -1331,7 +1331,7 @@ Dark mode
   .btn-outline-teal:focus, .btn-outline-teal.focus {
     box-shadow: 0 0 0 0.2rem rgba(43, 203, 186, 0.5); }
   .btn-outline-teal:active, .btn-outline-teal.active, .btn-outline-teal.dropdown-toggle.show {
-    color: #354052;
+    color: #ffffff;
     background-color: #2bcbba;
     border-color: #2bcbba; }
     .btn-outline-teal:active:focus, .btn-outline-teal.active:focus, .btn-outline-teal.dropdown-toggle.show:focus {
@@ -1431,18 +1431,18 @@ Dark mode
     background-color: transparent; }
 
 .btn-gray {
-  color: #354052;
+  color: #ffffff;
   background-color: #a8aeb7;
   border-color: #a8aeb7; }
   .btn-gray:hover {
-    color: #354052;
+    color: #ffffff;
     background-color: #939ba6;
     border-color: #8c94a0; }
   .btn-gray:focus, .btn-gray.focus {
-    color: #354052;
+    color: #ffffff;
     background-color: #939ba6;
     border-color: #8c94a0;
-    box-shadow: 0 0 0 0.2rem rgba(151, 158, 168, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(181, 186, 194, 0.5); }
   .btn-gray:active, .btn-gray.active,
   .show > .btn-gray.dropdown-toggle {
     color: #ffffff;
@@ -1450,9 +1450,9 @@ Dark mode
     border-color: #858e9a; }
     .btn-gray:active:focus, .btn-gray.active:focus,
     .show > .btn-gray.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(151, 158, 168, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(181, 186, 194, 0.5); }
   .btn-gray:disabled, .btn-gray.disabled {
-    color: #354052;
+    color: #ffffff;
     background-color: #a8aeb7;
     border-color: #a8aeb7; }
 
@@ -1466,7 +1466,7 @@ Dark mode
   .btn-outline-gray:focus, .btn-outline-gray.focus {
     box-shadow: 0 0 0 0.2rem rgba(168, 174, 183, 0.5); }
   .btn-outline-gray:active, .btn-outline-gray.active, .btn-outline-gray.dropdown-toggle.show {
-    color: #354052;
+    color: #ffffff;
     background-color: #a8aeb7;
     border-color: #a8aeb7; }
     .btn-outline-gray:active:focus, .btn-outline-gray.active:focus, .btn-outline-gray.dropdown-toggle.show:focus {
diff --git a/dist/css/tabler-buttons.css.map b/dist/css/tabler-buttons.css.map
index 227c9a0b1..ad37010e6 100644
Binary files a/dist/css/tabler-buttons.css.map and b/dist/css/tabler-buttons.css.map differ
diff --git a/dist/css/tabler-buttons.min.css b/dist/css/tabler-buttons.min.css
index 141fdef47..de3e17c63 100644
--- a/dist/css/tabler-buttons.min.css
+++ b/dist/css/tabler-buttons.min.css
@@ -1,7 +1,7 @@
 /*!
- * Tabler (v1.0.0-alpha.4)
+ * Tabler (v1.0.0-alpha.5)
  * Copyright 2018-2020 The Tabler Authors
  * Copyright 2018-2020 codecalm
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */.btn-ghost-primary{color:#206bc4;background-color:transparent;border-color:transparent}.btn-ghost-primary:hover{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-ghost-primary.focus,.btn-ghost-primary:focus{color:#fff;background-color:#206bc4;border-color:#206bc4;box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-ghost-primary.active,.btn-ghost-primary:active,.show>.btn-ghost-primary.dropdown-toggle{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-ghost-primary.active:focus,.btn-ghost-primary:active:focus,.show>.btn-ghost-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-ghost-primary.disabled,.btn-ghost-primary:disabled{color:#206bc4;background-color:transparent;border-color:transparent}.btn-ghost-secondary{color:#868c97;background-color:transparent;border-color:transparent}.btn-ghost-secondary:hover{color:#fff;background-color:#868c97;border-color:#868c97}.btn-ghost-secondary.focus,.btn-ghost-secondary:focus{color:#fff;background-color:#868c97;border-color:#868c97;box-shadow:0 0 0 .2rem rgba(134,140,151,.5)}.btn-ghost-secondary.active,.btn-ghost-secondary:active,.show>.btn-ghost-secondary.dropdown-toggle{color:#fff;background-color:#868c97;border-color:#868c97}.btn-ghost-secondary.active:focus,.btn-ghost-secondary:active:focus,.show>.btn-ghost-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(134,140,151,.5)}.btn-ghost-secondary.disabled,.btn-ghost-secondary:disabled{color:#868c97;background-color:transparent;border-color:transparent}.btn-ghost-success{color:#5eba00;background-color:transparent;border-color:transparent}.btn-ghost-success:hover{color:#fff;background-color:#5eba00;border-color:#5eba00}.btn-ghost-success.focus,.btn-ghost-success:focus{color:#fff;background-color:#5eba00;border-color:#5eba00;box-shadow:0 0 0 .2rem rgba(94,186,0,.5)}.btn-ghost-success.active,.btn-ghost-success:active,.show>.btn-ghost-success.dropdown-toggle{color:#354052;background-color:#5eba00;border-color:#5eba00}.btn-ghost-success.active:focus,.btn-ghost-success:active:focus,.show>.btn-ghost-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(94,186,0,.5)}.btn-ghost-success.disabled,.btn-ghost-success:disabled{color:#5eba00;background-color:transparent;border-color:transparent}.btn-ghost-info{color:#45aaf2;background-color:transparent;border-color:transparent}.btn-ghost-info:hover{color:#fff;background-color:#45aaf2;border-color:#45aaf2}.btn-ghost-info.focus,.btn-ghost-info:focus{color:#fff;background-color:#45aaf2;border-color:#45aaf2;box-shadow:0 0 0 .2rem rgba(69,170,242,.5)}.btn-ghost-info.active,.btn-ghost-info:active,.show>.btn-ghost-info.dropdown-toggle{color:#354052;background-color:#45aaf2;border-color:#45aaf2}.btn-ghost-info.active:focus,.btn-ghost-info:active:focus,.show>.btn-ghost-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(69,170,242,.5)}.btn-ghost-info.disabled,.btn-ghost-info:disabled{color:#45aaf2;background-color:transparent;border-color:transparent}.btn-ghost-warning{color:#fab005;background-color:transparent;border-color:transparent}.btn-ghost-warning:hover{color:#fff;background-color:#fab005;border-color:#fab005}.btn-ghost-warning.focus,.btn-ghost-warning:focus{color:#fff;background-color:#fab005;border-color:#fab005;box-shadow:0 0 0 .2rem rgba(250,176,5,.5)}.btn-ghost-warning.active,.btn-ghost-warning:active,.show>.btn-ghost-warning.dropdown-toggle{color:#354052;background-color:#fab005;border-color:#fab005}.btn-ghost-warning.active:focus,.btn-ghost-warning:active:focus,.show>.btn-ghost-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(250,176,5,.5)}.btn-ghost-warning.disabled,.btn-ghost-warning:disabled{color:#fab005;background-color:transparent;border-color:transparent}.btn-ghost-danger{color:#fa4654;background-color:transparent;border-color:transparent}.btn-ghost-danger:hover{color:#fff;background-color:#fa4654;border-color:#fa4654}.btn-ghost-danger.focus,.btn-ghost-danger:focus{color:#fff;background-color:#fa4654;border-color:#fa4654;box-shadow:0 0 0 .2rem rgba(250,70,84,.5)}.btn-ghost-danger.active,.btn-ghost-danger:active,.show>.btn-ghost-danger.dropdown-toggle{color:#fff;background-color:#fa4654;border-color:#fa4654}.btn-ghost-danger.active:focus,.btn-ghost-danger:active:focus,.show>.btn-ghost-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(250,70,84,.5)}.btn-ghost-danger.disabled,.btn-ghost-danger:disabled{color:#fa4654;background-color:transparent;border-color:transparent}.btn-ghost-light{color:#f5f7fb;background-color:transparent;border-color:transparent}.btn-ghost-light:hover{color:#fff;background-color:#f5f7fb;border-color:#f5f7fb}.btn-ghost-light.focus,.btn-ghost-light:focus{color:#fff;background-color:#f5f7fb;border-color:#f5f7fb;box-shadow:0 0 0 .2rem rgba(245,247,251,.5)}.btn-ghost-light.active,.btn-ghost-light:active,.show>.btn-ghost-light.dropdown-toggle{color:#354052;background-color:#f5f7fb;border-color:#f5f7fb}.btn-ghost-light.active:focus,.btn-ghost-light:active:focus,.show>.btn-ghost-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(245,247,251,.5)}.btn-ghost-light.disabled,.btn-ghost-light:disabled{color:#f5f7fb;background-color:transparent;border-color:transparent}.btn-ghost-dark{color:#354052;background-color:transparent;border-color:transparent}.btn-ghost-dark:hover{color:#fff;background-color:#354052;border-color:#354052}.btn-ghost-dark.focus,.btn-ghost-dark:focus{color:#fff;background-color:#354052;border-color:#354052;box-shadow:0 0 0 .2rem rgba(53,64,82,.5)}.btn-ghost-dark.active,.btn-ghost-dark:active,.show>.btn-ghost-dark.dropdown-toggle{color:#fff;background-color:#354052;border-color:#354052}.btn-ghost-dark.active:focus,.btn-ghost-dark:active:focus,.show>.btn-ghost-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(53,64,82,.5)}.btn-ghost-dark.disabled,.btn-ghost-dark:disabled{color:#354052;background-color:transparent;border-color:transparent}.btn-facebook{color:#fff;background-color:#3b5998;border-color:#3b5998}.btn-facebook:hover{color:#fff;background-color:#30497c;border-color:#2d4373}.btn-facebook.focus,.btn-facebook:focus{color:#fff;background-color:#30497c;border-color:#2d4373;box-shadow:0 0 0 .2rem rgba(88,114,167,.5)}.btn-facebook.active,.btn-facebook:active,.show>.btn-facebook.dropdown-toggle{color:#fff;background-color:#2d4373;border-color:#293e6a}.btn-facebook.active:focus,.btn-facebook:active:focus,.show>.btn-facebook.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(88,114,167,.5)}.btn-facebook.disabled,.btn-facebook:disabled{color:#fff;background-color:#3b5998;border-color:#3b5998}.btn-outline-facebook{color:#3b5998;border-color:#3b5998}.btn-outline-facebook:hover{color:#3b5998;background-color:#3b5998;border-color:#3b5998}.btn-outline-facebook.focus,.btn-outline-facebook:focus{box-shadow:0 0 0 .2rem rgba(59,89,152,.5)}.btn-outline-facebook.active,.btn-outline-facebook.dropdown-toggle.show,.btn-outline-facebook:active{color:#fff;background-color:#3b5998;border-color:#3b5998}.btn-outline-facebook.active:focus,.btn-outline-facebook.dropdown-toggle.show:focus,.btn-outline-facebook:active:focus{box-shadow:0 0 0 .2rem rgba(59,89,152,.5)}.btn-outline-facebook.disabled,.btn-outline-facebook:disabled{color:#3b5998;background-color:transparent}.btn-twitter{color:#354052;background-color:#1da1f2;border-color:#1da1f2}.btn-twitter:hover{color:#fff;background-color:#0d8ddc;border-color:#0c85d0}.btn-twitter.focus,.btn-twitter:focus{color:#fff;background-color:#0d8ddc;border-color:#0c85d0;box-shadow:0 0 0 .2rem rgba(33,146,218,.5)}.btn-twitter.active,.btn-twitter:active,.show>.btn-twitter.dropdown-toggle{color:#fff;background-color:#0c85d0;border-color:#0b7ec4}.btn-twitter.active:focus,.btn-twitter:active:focus,.show>.btn-twitter.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(33,146,218,.5)}.btn-twitter.disabled,.btn-twitter:disabled{color:#354052;background-color:#1da1f2;border-color:#1da1f2}.btn-outline-twitter{color:#1da1f2;border-color:#1da1f2}.btn-outline-twitter:hover{color:#1da1f2;background-color:#1da1f2;border-color:#1da1f2}.btn-outline-twitter.focus,.btn-outline-twitter:focus{box-shadow:0 0 0 .2rem rgba(29,161,242,.5)}.btn-outline-twitter.active,.btn-outline-twitter.dropdown-toggle.show,.btn-outline-twitter:active{color:#354052;background-color:#1da1f2;border-color:#1da1f2}.btn-outline-twitter.active:focus,.btn-outline-twitter.dropdown-toggle.show:focus,.btn-outline-twitter:active:focus{box-shadow:0 0 0 .2rem rgba(29,161,242,.5)}.btn-outline-twitter.disabled,.btn-outline-twitter:disabled{color:#1da1f2;background-color:transparent}.btn-google{color:#fff;background-color:#dc4e41;border-color:#dc4e41}.btn-google:hover{color:#fff;background-color:#d03526;border-color:#c63224}.btn-google.focus,.btn-google:focus{color:#fff;background-color:#d03526;border-color:#c63224;box-shadow:0 0 0 .2rem rgba(225,105,94,.5)}.btn-google.active,.btn-google:active,.show>.btn-google.dropdown-toggle{color:#fff;background-color:#c63224;border-color:#bb2f22}.btn-google.active:focus,.btn-google:active:focus,.show>.btn-google.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(225,105,94,.5)}.btn-google.disabled,.btn-google:disabled{color:#fff;background-color:#dc4e41;border-color:#dc4e41}.btn-outline-google{color:#dc4e41;border-color:#dc4e41}.btn-outline-google:hover{color:#dc4e41;background-color:#dc4e41;border-color:#dc4e41}.btn-outline-google.focus,.btn-outline-google:focus{box-shadow:0 0 0 .2rem rgba(220,78,65,.5)}.btn-outline-google.active,.btn-outline-google.dropdown-toggle.show,.btn-outline-google:active{color:#fff;background-color:#dc4e41;border-color:#dc4e41}.btn-outline-google.active:focus,.btn-outline-google.dropdown-toggle.show:focus,.btn-outline-google:active:focus{box-shadow:0 0 0 .2rem rgba(220,78,65,.5)}.btn-outline-google.disabled,.btn-outline-google:disabled{color:#dc4e41;background-color:transparent}.btn-youtube{color:#fff;background-color:red;border-color:red}.btn-youtube:hover{color:#fff;background-color:#d90000;border-color:#c00}.btn-youtube.focus,.btn-youtube:focus{color:#fff;background-color:#d90000;border-color:#c00;box-shadow:0 0 0 .2rem rgba(255,38,38,.5)}.btn-youtube.active,.btn-youtube:active,.show>.btn-youtube.dropdown-toggle{color:#fff;background-color:#c00;border-color:#bf0000}.btn-youtube.active:focus,.btn-youtube:active:focus,.show>.btn-youtube.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(255,38,38,.5)}.btn-youtube.disabled,.btn-youtube:disabled{color:#fff;background-color:red;border-color:red}.btn-outline-youtube{color:red;border-color:red}.btn-outline-youtube:hover{color:red;background-color:red;border-color:red}.btn-outline-youtube.focus,.btn-outline-youtube:focus{box-shadow:0 0 0 .2rem rgba(255,0,0,.5)}.btn-outline-youtube.active,.btn-outline-youtube.dropdown-toggle.show,.btn-outline-youtube:active{color:#fff;background-color:red;border-color:red}.btn-outline-youtube.active:focus,.btn-outline-youtube.dropdown-toggle.show:focus,.btn-outline-youtube:active:focus{box-shadow:0 0 0 .2rem rgba(255,0,0,.5)}.btn-outline-youtube.disabled,.btn-outline-youtube:disabled{color:red;background-color:transparent}.btn-vimeo{color:#354052;background-color:#1ab7ea;border-color:#1ab7ea}.btn-vimeo:hover{color:#fff;background-color:#139ecb;border-color:#1295bf}.btn-vimeo.focus,.btn-vimeo:focus{color:#fff;background-color:#139ecb;border-color:#1295bf;box-shadow:0 0 0 .2rem rgba(30,165,211,.5)}.btn-vimeo.active,.btn-vimeo:active,.show>.btn-vimeo.dropdown-toggle{color:#fff;background-color:#1295bf;border-color:#108cb4}.btn-vimeo.active:focus,.btn-vimeo:active:focus,.show>.btn-vimeo.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(30,165,211,.5)}.btn-vimeo.disabled,.btn-vimeo:disabled{color:#354052;background-color:#1ab7ea;border-color:#1ab7ea}.btn-outline-vimeo{color:#1ab7ea;border-color:#1ab7ea}.btn-outline-vimeo:hover{color:#1ab7ea;background-color:#1ab7ea;border-color:#1ab7ea}.btn-outline-vimeo.focus,.btn-outline-vimeo:focus{box-shadow:0 0 0 .2rem rgba(26,183,234,.5)}.btn-outline-vimeo.active,.btn-outline-vimeo.dropdown-toggle.show,.btn-outline-vimeo:active{color:#354052;background-color:#1ab7ea;border-color:#1ab7ea}.btn-outline-vimeo.active:focus,.btn-outline-vimeo.dropdown-toggle.show:focus,.btn-outline-vimeo:active:focus{box-shadow:0 0 0 .2rem rgba(26,183,234,.5)}.btn-outline-vimeo.disabled,.btn-outline-vimeo:disabled{color:#1ab7ea;background-color:transparent}.btn-dribbble{color:#fff;background-color:#ea4c89;border-color:#ea4c89}.btn-dribbble:hover{color:#fff;background-color:#e62a72;border-color:#e51e6b}.btn-dribbble.focus,.btn-dribbble:focus{color:#fff;background-color:#e62a72;border-color:#e51e6b;box-shadow:0 0 0 .2rem rgba(237,103,155,.5)}.btn-dribbble.active,.btn-dribbble:active,.show>.btn-dribbble.dropdown-toggle{color:#fff;background-color:#e51e6b;border-color:#dc1a65}.btn-dribbble.active:focus,.btn-dribbble:active:focus,.show>.btn-dribbble.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(237,103,155,.5)}.btn-dribbble.disabled,.btn-dribbble:disabled{color:#fff;background-color:#ea4c89;border-color:#ea4c89}.btn-outline-dribbble{color:#ea4c89;border-color:#ea4c89}.btn-outline-dribbble:hover{color:#ea4c89;background-color:#ea4c89;border-color:#ea4c89}.btn-outline-dribbble.focus,.btn-outline-dribbble:focus{box-shadow:0 0 0 .2rem rgba(234,76,137,.5)}.btn-outline-dribbble.active,.btn-outline-dribbble.dropdown-toggle.show,.btn-outline-dribbble:active{color:#fff;background-color:#ea4c89;border-color:#ea4c89}.btn-outline-dribbble.active:focus,.btn-outline-dribbble.dropdown-toggle.show:focus,.btn-outline-dribbble:active:focus{box-shadow:0 0 0 .2rem rgba(234,76,137,.5)}.btn-outline-dribbble.disabled,.btn-outline-dribbble:disabled{color:#ea4c89;background-color:transparent}.btn-github{color:#fff;background-color:#181717;border-color:#181717}.btn-github:hover{color:#fff;background-color:#040404;border-color:#000}.btn-github.focus,.btn-github:focus{color:#fff;background-color:#040404;border-color:#000;box-shadow:0 0 0 .2rem rgba(59,58,58,.5)}.btn-github.active,.btn-github:active,.show>.btn-github.dropdown-toggle{color:#fff;background-color:#000;border-color:#000}.btn-github.active:focus,.btn-github:active:focus,.show>.btn-github.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(59,58,58,.5)}.btn-github.disabled,.btn-github:disabled{color:#fff;background-color:#181717;border-color:#181717}.btn-outline-github{color:#181717;border-color:#181717}.btn-outline-github:hover{color:#181717;background-color:#181717;border-color:#181717}.btn-outline-github.focus,.btn-outline-github:focus{box-shadow:0 0 0 .2rem rgba(24,23,23,.5)}.btn-outline-github.active,.btn-outline-github.dropdown-toggle.show,.btn-outline-github:active{color:#fff;background-color:#181717;border-color:#181717}.btn-outline-github.active:focus,.btn-outline-github.dropdown-toggle.show:focus,.btn-outline-github:active:focus{box-shadow:0 0 0 .2rem rgba(24,23,23,.5)}.btn-outline-github.disabled,.btn-outline-github:disabled{color:#181717;background-color:transparent}.btn-instagram{color:#fff;background-color:#e4405f;border-color:#e4405f}.btn-instagram:hover{color:#fff;background-color:#de1f44;border-color:#d31e40}.btn-instagram.focus,.btn-instagram:focus{color:#fff;background-color:#de1f44;border-color:#d31e40;box-shadow:0 0 0 .2rem rgba(232,93,119,.5)}.btn-instagram.active,.btn-instagram:active,.show>.btn-instagram.dropdown-toggle{color:#fff;background-color:#d31e40;border-color:#c81c3d}.btn-instagram.active:focus,.btn-instagram:active:focus,.show>.btn-instagram.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(232,93,119,.5)}.btn-instagram.disabled,.btn-instagram:disabled{color:#fff;background-color:#e4405f;border-color:#e4405f}.btn-outline-instagram{color:#e4405f;border-color:#e4405f}.btn-outline-instagram:hover{color:#e4405f;background-color:#e4405f;border-color:#e4405f}.btn-outline-instagram.focus,.btn-outline-instagram:focus{box-shadow:0 0 0 .2rem rgba(228,64,95,.5)}.btn-outline-instagram.active,.btn-outline-instagram.dropdown-toggle.show,.btn-outline-instagram:active{color:#fff;background-color:#e4405f;border-color:#e4405f}.btn-outline-instagram.active:focus,.btn-outline-instagram.dropdown-toggle.show:focus,.btn-outline-instagram:active:focus{box-shadow:0 0 0 .2rem rgba(228,64,95,.5)}.btn-outline-instagram.disabled,.btn-outline-instagram:disabled{color:#e4405f;background-color:transparent}.btn-pinterest{color:#fff;background-color:#bd081c;border-color:#bd081c}.btn-pinterest:hover{color:#fff;background-color:#980617;border-color:#8c0615}.btn-pinterest.focus,.btn-pinterest:focus{color:#fff;background-color:#980617;border-color:#8c0615;box-shadow:0 0 0 .2rem rgba(199,45,62,.5)}.btn-pinterest.active,.btn-pinterest:active,.show>.btn-pinterest.dropdown-toggle{color:#fff;background-color:#8c0615;border-color:#800513}.btn-pinterest.active:focus,.btn-pinterest:active:focus,.show>.btn-pinterest.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(199,45,62,.5)}.btn-pinterest.disabled,.btn-pinterest:disabled{color:#fff;background-color:#bd081c;border-color:#bd081c}.btn-outline-pinterest{color:#bd081c;border-color:#bd081c}.btn-outline-pinterest:hover{color:#bd081c;background-color:#bd081c;border-color:#bd081c}.btn-outline-pinterest.focus,.btn-outline-pinterest:focus{box-shadow:0 0 0 .2rem rgba(189,8,28,.5)}.btn-outline-pinterest.active,.btn-outline-pinterest.dropdown-toggle.show,.btn-outline-pinterest:active{color:#fff;background-color:#bd081c;border-color:#bd081c}.btn-outline-pinterest.active:focus,.btn-outline-pinterest.dropdown-toggle.show:focus,.btn-outline-pinterest:active:focus{box-shadow:0 0 0 .2rem rgba(189,8,28,.5)}.btn-outline-pinterest.disabled,.btn-outline-pinterest:disabled{color:#bd081c;background-color:transparent}.btn-vk{color:#fff;background-color:#6383a8;border-color:#6383a8}.btn-vk:hover{color:#fff;background-color:#527093;border-color:#4d6a8b}.btn-vk.focus,.btn-vk:focus{color:#fff;background-color:#527093;border-color:#4d6a8b;box-shadow:0 0 0 .2rem rgba(122,150,181,.5)}.btn-vk.active,.btn-vk:active,.show>.btn-vk.dropdown-toggle{color:#fff;background-color:#4d6a8b;border-color:#496482}.btn-vk.active:focus,.btn-vk:active:focus,.show>.btn-vk.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(122,150,181,.5)}.btn-vk.disabled,.btn-vk:disabled{color:#fff;background-color:#6383a8;border-color:#6383a8}.btn-outline-vk{color:#6383a8;border-color:#6383a8}.btn-outline-vk:hover{color:#6383a8;background-color:#6383a8;border-color:#6383a8}.btn-outline-vk.focus,.btn-outline-vk:focus{box-shadow:0 0 0 .2rem rgba(99,131,168,.5)}.btn-outline-vk.active,.btn-outline-vk.dropdown-toggle.show,.btn-outline-vk:active{color:#fff;background-color:#6383a8;border-color:#6383a8}.btn-outline-vk.active:focus,.btn-outline-vk.dropdown-toggle.show:focus,.btn-outline-vk:active:focus{box-shadow:0 0 0 .2rem rgba(99,131,168,.5)}.btn-outline-vk.disabled,.btn-outline-vk:disabled{color:#6383a8;background-color:transparent}.btn-rss{color:#354052;background-color:orange;border-color:orange}.btn-rss:hover{color:#354052;background-color:#d98c00;border-color:#cc8400}.btn-rss.focus,.btn-rss:focus{color:#354052;background-color:#d98c00;border-color:#cc8400;box-shadow:0 0 0 .2rem rgba(225,150,12,.5)}.btn-rss.active,.btn-rss:active,.show>.btn-rss.dropdown-toggle{color:#fff;background-color:#cc8400;border-color:#bf7c00}.btn-rss.active:focus,.btn-rss:active:focus,.show>.btn-rss.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(225,150,12,.5)}.btn-rss.disabled,.btn-rss:disabled{color:#354052;background-color:orange;border-color:orange}.btn-outline-rss{color:orange;border-color:orange}.btn-outline-rss:hover{color:orange;background-color:orange;border-color:orange}.btn-outline-rss.focus,.btn-outline-rss:focus{box-shadow:0 0 0 .2rem rgba(255,165,0,.5)}.btn-outline-rss.active,.btn-outline-rss.dropdown-toggle.show,.btn-outline-rss:active{color:#354052;background-color:orange;border-color:orange}.btn-outline-rss.active:focus,.btn-outline-rss.dropdown-toggle.show:focus,.btn-outline-rss:active:focus{box-shadow:0 0 0 .2rem rgba(255,165,0,.5)}.btn-outline-rss.disabled,.btn-outline-rss:disabled{color:orange;background-color:transparent}.btn-flickr{color:#fff;background-color:#0063dc;border-color:#0063dc}.btn-flickr:hover{color:#fff;background-color:#0052b6;border-color:#004ca9}.btn-flickr.focus,.btn-flickr:focus{color:#fff;background-color:#0052b6;border-color:#004ca9;box-shadow:0 0 0 .2rem rgba(38,122,225,.5)}.btn-flickr.active,.btn-flickr:active,.show>.btn-flickr.dropdown-toggle{color:#fff;background-color:#004ca9;border-color:#00469c}.btn-flickr.active:focus,.btn-flickr:active:focus,.show>.btn-flickr.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(38,122,225,.5)}.btn-flickr.disabled,.btn-flickr:disabled{color:#fff;background-color:#0063dc;border-color:#0063dc}.btn-outline-flickr{color:#0063dc;border-color:#0063dc}.btn-outline-flickr:hover{color:#0063dc;background-color:#0063dc;border-color:#0063dc}.btn-outline-flickr.focus,.btn-outline-flickr:focus{box-shadow:0 0 0 .2rem rgba(0,99,220,.5)}.btn-outline-flickr.active,.btn-outline-flickr.dropdown-toggle.show,.btn-outline-flickr:active{color:#fff;background-color:#0063dc;border-color:#0063dc}.btn-outline-flickr.active:focus,.btn-outline-flickr.dropdown-toggle.show:focus,.btn-outline-flickr:active:focus{box-shadow:0 0 0 .2rem rgba(0,99,220,.5)}.btn-outline-flickr.disabled,.btn-outline-flickr:disabled{color:#0063dc;background-color:transparent}.btn-bitbucket{color:#fff;background-color:#0052cc;border-color:#0052cc}.btn-bitbucket:hover{color:#fff;background-color:#0043a6;border-color:#003e99}.btn-bitbucket.focus,.btn-bitbucket:focus{color:#fff;background-color:#0043a6;border-color:#003e99;box-shadow:0 0 0 .2rem rgba(38,108,212,.5)}.btn-bitbucket.active,.btn-bitbucket:active,.show>.btn-bitbucket.dropdown-toggle{color:#fff;background-color:#003e99;border-color:#00388c}.btn-bitbucket.active:focus,.btn-bitbucket:active:focus,.show>.btn-bitbucket.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(38,108,212,.5)}.btn-bitbucket.disabled,.btn-bitbucket:disabled{color:#fff;background-color:#0052cc;border-color:#0052cc}.btn-outline-bitbucket{color:#0052cc;border-color:#0052cc}.btn-outline-bitbucket:hover{color:#0052cc;background-color:#0052cc;border-color:#0052cc}.btn-outline-bitbucket.focus,.btn-outline-bitbucket:focus{box-shadow:0 0 0 .2rem rgba(0,82,204,.5)}.btn-outline-bitbucket.active,.btn-outline-bitbucket.dropdown-toggle.show,.btn-outline-bitbucket:active{color:#fff;background-color:#0052cc;border-color:#0052cc}.btn-outline-bitbucket.active:focus,.btn-outline-bitbucket.dropdown-toggle.show:focus,.btn-outline-bitbucket:active:focus{box-shadow:0 0 0 .2rem rgba(0,82,204,.5)}.btn-outline-bitbucket.disabled,.btn-outline-bitbucket:disabled{color:#0052cc;background-color:transparent}.btn-tabler{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-tabler:hover{color:#fff;background-color:#1b59a3;border-color:#195398}.btn-tabler.focus,.btn-tabler:focus{color:#fff;background-color:#1b59a3;border-color:#195398;box-shadow:0 0 0 .2rem rgba(65,129,205,.5)}.btn-tabler.active,.btn-tabler:active,.show>.btn-tabler.dropdown-toggle{color:#fff;background-color:#195398;border-color:#174d8d}.btn-tabler.active:focus,.btn-tabler:active:focus,.show>.btn-tabler.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(65,129,205,.5)}.btn-tabler.disabled,.btn-tabler:disabled{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-outline-tabler{color:#206bc4;border-color:#206bc4}.btn-outline-tabler:hover{color:#206bc4;background-color:#206bc4;border-color:#206bc4}.btn-outline-tabler.focus,.btn-outline-tabler:focus{box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-outline-tabler.active,.btn-outline-tabler.dropdown-toggle.show,.btn-outline-tabler:active{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-outline-tabler.active:focus,.btn-outline-tabler.dropdown-toggle.show:focus,.btn-outline-tabler:active:focus{box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-outline-tabler.disabled,.btn-outline-tabler:disabled{color:#206bc4;background-color:transparent}.btn-blue{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-blue:hover{color:#fff;background-color:#1b59a3;border-color:#195398}.btn-blue.focus,.btn-blue:focus{color:#fff;background-color:#1b59a3;border-color:#195398;box-shadow:0 0 0 .2rem rgba(65,129,205,.5)}.btn-blue.active,.btn-blue:active,.show>.btn-blue.dropdown-toggle{color:#fff;background-color:#195398;border-color:#174d8d}.btn-blue.active:focus,.btn-blue:active:focus,.show>.btn-blue.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(65,129,205,.5)}.btn-blue.disabled,.btn-blue:disabled{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-outline-blue{color:#206bc4;border-color:#206bc4}.btn-outline-blue:hover{color:#206bc4;background-color:#206bc4;border-color:#206bc4}.btn-outline-blue.focus,.btn-outline-blue:focus{box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-outline-blue.active,.btn-outline-blue.dropdown-toggle.show,.btn-outline-blue:active{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-outline-blue.active:focus,.btn-outline-blue.dropdown-toggle.show:focus,.btn-outline-blue:active:focus{box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-outline-blue.disabled,.btn-outline-blue:disabled{color:#206bc4;background-color:transparent}.btn-azure{color:#354052;background-color:#45aaf2;border-color:#45aaf2}.btn-azure:hover{color:#fff;background-color:#219af0;border-color:#1594ef}.btn-azure.focus,.btn-azure:focus{color:#fff;background-color:#219af0;border-color:#1594ef;box-shadow:0 0 0 .2rem rgba(67,154,218,.5)}.btn-azure.active,.btn-azure:active,.show>.btn-azure.dropdown-toggle{color:#fff;background-color:#1594ef;border-color:#108ee7}.btn-azure.active:focus,.btn-azure:active:focus,.show>.btn-azure.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(67,154,218,.5)}.btn-azure.disabled,.btn-azure:disabled{color:#354052;background-color:#45aaf2;border-color:#45aaf2}.btn-outline-azure{color:#45aaf2;border-color:#45aaf2}.btn-outline-azure:hover{color:#45aaf2;background-color:#45aaf2;border-color:#45aaf2}.btn-outline-azure.focus,.btn-outline-azure:focus{box-shadow:0 0 0 .2rem rgba(69,170,242,.5)}.btn-outline-azure.active,.btn-outline-azure.dropdown-toggle.show,.btn-outline-azure:active{color:#354052;background-color:#45aaf2;border-color:#45aaf2}.btn-outline-azure.active:focus,.btn-outline-azure.dropdown-toggle.show:focus,.btn-outline-azure:active:focus{box-shadow:0 0 0 .2rem rgba(69,170,242,.5)}.btn-outline-azure.disabled,.btn-outline-azure:disabled{color:#45aaf2;background-color:transparent}.btn-indigo{color:#fff;background-color:#6574cd;border-color:#6574cd}.btn-indigo:hover{color:#fff;background-color:#485ac4;border-color:#3f51c1}.btn-indigo.focus,.btn-indigo:focus{color:#fff;background-color:#485ac4;border-color:#3f51c1;box-shadow:0 0 0 .2rem rgba(124,137,213,.5)}.btn-indigo.active,.btn-indigo:active,.show>.btn-indigo.dropdown-toggle{color:#fff;background-color:#3f51c1;border-color:#3b4db7}.btn-indigo.active:focus,.btn-indigo:active:focus,.show>.btn-indigo.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(124,137,213,.5)}.btn-indigo.disabled,.btn-indigo:disabled{color:#fff;background-color:#6574cd;border-color:#6574cd}.btn-outline-indigo{color:#6574cd;border-color:#6574cd}.btn-outline-indigo:hover{color:#6574cd;background-color:#6574cd;border-color:#6574cd}.btn-outline-indigo.focus,.btn-outline-indigo:focus{box-shadow:0 0 0 .2rem rgba(101,116,205,.5)}.btn-outline-indigo.active,.btn-outline-indigo.dropdown-toggle.show,.btn-outline-indigo:active{color:#fff;background-color:#6574cd;border-color:#6574cd}.btn-outline-indigo.active:focus,.btn-outline-indigo.dropdown-toggle.show:focus,.btn-outline-indigo:active:focus{box-shadow:0 0 0 .2rem rgba(101,116,205,.5)}.btn-outline-indigo.disabled,.btn-outline-indigo:disabled{color:#6574cd;background-color:transparent}.btn-purple{color:#fff;background-color:#a55eea;border-color:#a55eea}.btn-purple:hover{color:#fff;background-color:#923ce6;border-color:#8c31e4}.btn-purple.focus,.btn-purple:focus{color:#fff;background-color:#923ce6;border-color:#8c31e4;box-shadow:0 0 0 .2rem rgba(179,118,237,.5)}.btn-purple.active,.btn-purple:active,.show>.btn-purple.dropdown-toggle{color:#fff;background-color:#8c31e4;border-color:#8526e3}.btn-purple.active:focus,.btn-purple:active:focus,.show>.btn-purple.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(179,118,237,.5)}.btn-purple.disabled,.btn-purple:disabled{color:#fff;background-color:#a55eea;border-color:#a55eea}.btn-outline-purple{color:#a55eea;border-color:#a55eea}.btn-outline-purple:hover{color:#a55eea;background-color:#a55eea;border-color:#a55eea}.btn-outline-purple.focus,.btn-outline-purple:focus{box-shadow:0 0 0 .2rem rgba(165,94,234,.5)}.btn-outline-purple.active,.btn-outline-purple.dropdown-toggle.show,.btn-outline-purple:active{color:#fff;background-color:#a55eea;border-color:#a55eea}.btn-outline-purple.active:focus,.btn-outline-purple.dropdown-toggle.show:focus,.btn-outline-purple:active:focus{box-shadow:0 0 0 .2rem rgba(165,94,234,.5)}.btn-outline-purple.disabled,.btn-outline-purple:disabled{color:#a55eea;background-color:transparent}.btn-pink{color:#354052;background-color:#f66d9b;border-color:#f66d9b}.btn-pink:hover{color:#fff;background-color:#f44982;border-color:#f33d7a}.btn-pink.focus,.btn-pink:focus{color:#fff;background-color:#f44982;border-color:#f33d7a;box-shadow:0 0 0 .2rem rgba(217,102,144,.5)}.btn-pink.active,.btn-pink:active,.show>.btn-pink.dropdown-toggle{color:#fff;background-color:#f33d7a;border-color:#f23172}.btn-pink.active:focus,.btn-pink:active:focus,.show>.btn-pink.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(217,102,144,.5)}.btn-pink.disabled,.btn-pink:disabled{color:#354052;background-color:#f66d9b;border-color:#f66d9b}.btn-outline-pink{color:#f66d9b;border-color:#f66d9b}.btn-outline-pink:hover{color:#f66d9b;background-color:#f66d9b;border-color:#f66d9b}.btn-outline-pink.focus,.btn-outline-pink:focus{box-shadow:0 0 0 .2rem rgba(246,109,155,.5)}.btn-outline-pink.active,.btn-outline-pink.dropdown-toggle.show,.btn-outline-pink:active{color:#354052;background-color:#f66d9b;border-color:#f66d9b}.btn-outline-pink.active:focus,.btn-outline-pink.dropdown-toggle.show:focus,.btn-outline-pink:active:focus{box-shadow:0 0 0 .2rem rgba(246,109,155,.5)}.btn-outline-pink.disabled,.btn-outline-pink:disabled{color:#f66d9b;background-color:transparent}.btn-red{color:#fff;background-color:#fa4654;border-color:#fa4654}.btn-red:hover{color:#fff;background-color:#f92132;border-color:#f91426}.btn-red.focus,.btn-red:focus{color:#fff;background-color:#f92132;border-color:#f91426;box-shadow:0 0 0 .2rem rgba(251,98,110,.5)}.btn-red.active,.btn-red:active,.show>.btn-red.dropdown-toggle{color:#fff;background-color:#f91426;border-color:#f8081b}.btn-red.active:focus,.btn-red:active:focus,.show>.btn-red.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(251,98,110,.5)}.btn-red.disabled,.btn-red:disabled{color:#fff;background-color:#fa4654;border-color:#fa4654}.btn-outline-red{color:#fa4654;border-color:#fa4654}.btn-outline-red:hover{color:#fa4654;background-color:#fa4654;border-color:#fa4654}.btn-outline-red.focus,.btn-outline-red:focus{box-shadow:0 0 0 .2rem rgba(250,70,84,.5)}.btn-outline-red.active,.btn-outline-red.dropdown-toggle.show,.btn-outline-red:active{color:#fff;background-color:#fa4654;border-color:#fa4654}.btn-outline-red.active:focus,.btn-outline-red.dropdown-toggle.show:focus,.btn-outline-red:active:focus{box-shadow:0 0 0 .2rem rgba(250,70,84,.5)}.btn-outline-red.disabled,.btn-outline-red:disabled{color:#fa4654;background-color:transparent}.btn-orange{color:#354052;background-color:#ff922b;border-color:#ff922b}.btn-orange:hover{color:#354052;background-color:#ff7e05;border-color:#f77800}.btn-orange.focus,.btn-orange:focus{color:#354052;background-color:#ff7e05;border-color:#f77800;box-shadow:0 0 0 .2rem rgba(225,134,49,.5)}.btn-orange.active,.btn-orange:active,.show>.btn-orange.dropdown-toggle{color:#354052;background-color:#f77800;border-color:#ea7200}.btn-orange.active:focus,.btn-orange:active:focus,.show>.btn-orange.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(225,134,49,.5)}.btn-orange.disabled,.btn-orange:disabled{color:#354052;background-color:#ff922b;border-color:#ff922b}.btn-outline-orange{color:#ff922b;border-color:#ff922b}.btn-outline-orange:hover{color:#ff922b;background-color:#ff922b;border-color:#ff922b}.btn-outline-orange.focus,.btn-outline-orange:focus{box-shadow:0 0 0 .2rem rgba(255,146,43,.5)}.btn-outline-orange.active,.btn-outline-orange.dropdown-toggle.show,.btn-outline-orange:active{color:#354052;background-color:#ff922b;border-color:#ff922b}.btn-outline-orange.active:focus,.btn-outline-orange.dropdown-toggle.show:focus,.btn-outline-orange:active:focus{box-shadow:0 0 0 .2rem rgba(255,146,43,.5)}.btn-outline-orange.disabled,.btn-outline-orange:disabled{color:#ff922b;background-color:transparent}.btn-yellow{color:#354052;background-color:#fab005;border-color:#fab005}.btn-yellow:hover{color:#354052;background-color:#d59604;border-color:#c88d04}.btn-yellow.focus,.btn-yellow:focus{color:#354052;background-color:#d59604;border-color:#c88d04;box-shadow:0 0 0 .2rem rgba(220,159,17,.5)}.btn-yellow.active,.btn-yellow:active,.show>.btn-yellow.dropdown-toggle{color:#354052;background-color:#c88d04;border-color:#bc8404}.btn-yellow.active:focus,.btn-yellow:active:focus,.show>.btn-yellow.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(220,159,17,.5)}.btn-yellow.disabled,.btn-yellow:disabled{color:#354052;background-color:#fab005;border-color:#fab005}.btn-outline-yellow{color:#fab005;border-color:#fab005}.btn-outline-yellow:hover{color:#fab005;background-color:#fab005;border-color:#fab005}.btn-outline-yellow.focus,.btn-outline-yellow:focus{box-shadow:0 0 0 .2rem rgba(250,176,5,.5)}.btn-outline-yellow.active,.btn-outline-yellow.dropdown-toggle.show,.btn-outline-yellow:active{color:#354052;background-color:#fab005;border-color:#fab005}.btn-outline-yellow.active:focus,.btn-outline-yellow.dropdown-toggle.show:focus,.btn-outline-yellow:active:focus{box-shadow:0 0 0 .2rem rgba(250,176,5,.5)}.btn-outline-yellow.disabled,.btn-outline-yellow:disabled{color:#fab005;background-color:transparent}.btn-lime{color:#354052;background-color:#94d82d;border-color:#94d82d}.btn-lime:hover{color:#354052;background-color:#7fbc23;border-color:#78b121}.btn-lime.focus,.btn-lime:focus{color:#354052;background-color:#7fbc23;border-color:#78b121;box-shadow:0 0 0 .2rem rgba(134,193,51,.5)}.btn-lime.active,.btn-lime:active,.show>.btn-lime.dropdown-toggle{color:#354052;background-color:#78b121;border-color:#70a61f}.btn-lime.active:focus,.btn-lime:active:focus,.show>.btn-lime.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(134,193,51,.5)}.btn-lime.disabled,.btn-lime:disabled{color:#354052;background-color:#94d82d;border-color:#94d82d}.btn-outline-lime{color:#94d82d;border-color:#94d82d}.btn-outline-lime:hover{color:#94d82d;background-color:#94d82d;border-color:#94d82d}.btn-outline-lime.focus,.btn-outline-lime:focus{box-shadow:0 0 0 .2rem rgba(148,216,45,.5)}.btn-outline-lime.active,.btn-outline-lime.dropdown-toggle.show,.btn-outline-lime:active{color:#354052;background-color:#94d82d;border-color:#94d82d}.btn-outline-lime.active:focus,.btn-outline-lime.dropdown-toggle.show:focus,.btn-outline-lime:active:focus{box-shadow:0 0 0 .2rem rgba(148,216,45,.5)}.btn-outline-lime.disabled,.btn-outline-lime:disabled{color:#94d82d;background-color:transparent}.btn-green{color:#354052;background-color:#5eba00;border-color:#5eba00}.btn-green:hover{color:#fff;background-color:#4b9400;border-color:#448700}.btn-green.focus,.btn-green:focus{color:#fff;background-color:#4b9400;border-color:#448700;box-shadow:0 0 0 .2rem rgba(88,168,12,.5)}.btn-green.active,.btn-green:active,.show>.btn-green.dropdown-toggle{color:#fff;background-color:#448700;border-color:#3e7a00}.btn-green.active:focus,.btn-green:active:focus,.show>.btn-green.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(88,168,12,.5)}.btn-green.disabled,.btn-green:disabled{color:#354052;background-color:#5eba00;border-color:#5eba00}.btn-outline-green{color:#5eba00;border-color:#5eba00}.btn-outline-green:hover{color:#5eba00;background-color:#5eba00;border-color:#5eba00}.btn-outline-green.focus,.btn-outline-green:focus{box-shadow:0 0 0 .2rem rgba(94,186,0,.5)}.btn-outline-green.active,.btn-outline-green.dropdown-toggle.show,.btn-outline-green:active{color:#354052;background-color:#5eba00;border-color:#5eba00}.btn-outline-green.active:focus,.btn-outline-green.dropdown-toggle.show:focus,.btn-outline-green:active:focus{box-shadow:0 0 0 .2rem rgba(94,186,0,.5)}.btn-outline-green.disabled,.btn-outline-green:disabled{color:#5eba00;background-color:transparent}.btn-teal{color:#354052;background-color:#2bcbba;border-color:#2bcbba}.btn-teal:hover{color:#354052;background-color:#24ab9d;border-color:#22a193}.btn-teal.focus,.btn-teal:focus{color:#354052;background-color:#24ab9d;border-color:#22a193;box-shadow:0 0 0 .2rem rgba(45,182,170,.5)}.btn-teal.active,.btn-teal:active,.show>.btn-teal.dropdown-toggle{color:#fff;background-color:#22a193;border-color:#20968a}.btn-teal.active:focus,.btn-teal:active:focus,.show>.btn-teal.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(45,182,170,.5)}.btn-teal.disabled,.btn-teal:disabled{color:#354052;background-color:#2bcbba;border-color:#2bcbba}.btn-outline-teal{color:#2bcbba;border-color:#2bcbba}.btn-outline-teal:hover{color:#2bcbba;background-color:#2bcbba;border-color:#2bcbba}.btn-outline-teal.focus,.btn-outline-teal:focus{box-shadow:0 0 0 .2rem rgba(43,203,186,.5)}.btn-outline-teal.active,.btn-outline-teal.dropdown-toggle.show,.btn-outline-teal:active{color:#354052;background-color:#2bcbba;border-color:#2bcbba}.btn-outline-teal.active:focus,.btn-outline-teal.dropdown-toggle.show:focus,.btn-outline-teal:active:focus{box-shadow:0 0 0 .2rem rgba(43,203,186,.5)}.btn-outline-teal.disabled,.btn-outline-teal:disabled{color:#2bcbba;background-color:transparent}.btn-cyan{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-cyan:hover{color:#fff;background-color:#138496;border-color:#117a8b}.btn-cyan.focus,.btn-cyan:focus{color:#fff;background-color:#138496;border-color:#117a8b;box-shadow:0 0 0 .2rem rgba(58,176,195,.5)}.btn-cyan.active,.btn-cyan:active,.show>.btn-cyan.dropdown-toggle{color:#fff;background-color:#117a8b;border-color:#10707f}.btn-cyan.active:focus,.btn-cyan:active:focus,.show>.btn-cyan.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(58,176,195,.5)}.btn-cyan.disabled,.btn-cyan:disabled{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-cyan{color:#17a2b8;border-color:#17a2b8}.btn-outline-cyan:hover{color:#17a2b8;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-cyan.focus,.btn-outline-cyan:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-outline-cyan.active,.btn-outline-cyan.dropdown-toggle.show,.btn-outline-cyan:active{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-cyan.active:focus,.btn-outline-cyan.dropdown-toggle.show:focus,.btn-outline-cyan:active:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-outline-cyan.disabled,.btn-outline-cyan:disabled{color:#17a2b8;background-color:transparent}.btn-white{color:#354052;background-color:#fff;border-color:#fff}.btn-white:hover{color:#354052;background-color:#ececec;border-color:#e6e6e6}.btn-white.focus,.btn-white:focus{color:#354052;background-color:#ececec;border-color:#e6e6e6;box-shadow:0 0 0 .2rem rgba(225,226,229,.5)}.btn-white.active,.btn-white:active,.show>.btn-white.dropdown-toggle{color:#354052;background-color:#e6e6e6;border-color:#dfdfdf}.btn-white.active:focus,.btn-white:active:focus,.show>.btn-white.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(225,226,229,.5)}.btn-white.disabled,.btn-white:disabled{color:#354052;background-color:#fff;border-color:#fff}.btn-outline-white{color:#fff;border-color:#fff}.btn-outline-white:hover{color:#fff;background-color:#fff;border-color:#fff}.btn-outline-white.focus,.btn-outline-white:focus{box-shadow:0 0 0 .2rem rgba(255,255,255,.5)}.btn-outline-white.active,.btn-outline-white.dropdown-toggle.show,.btn-outline-white:active{color:#354052;background-color:#fff;border-color:#fff}.btn-outline-white.active:focus,.btn-outline-white.dropdown-toggle.show:focus,.btn-outline-white:active:focus{box-shadow:0 0 0 .2rem rgba(255,255,255,.5)}.btn-outline-white.disabled,.btn-outline-white:disabled{color:#fff;background-color:transparent}.btn-gray{color:#354052;background-color:#a8aeb7;border-color:#a8aeb7}.btn-gray:hover{color:#354052;background-color:#939ba6;border-color:#8c94a0}.btn-gray.focus,.btn-gray:focus{color:#354052;background-color:#939ba6;border-color:#8c94a0;box-shadow:0 0 0 .2rem rgba(151,158,168,.5)}.btn-gray.active,.btn-gray:active,.show>.btn-gray.dropdown-toggle{color:#fff;background-color:#8c94a0;border-color:#858e9a}.btn-gray.active:focus,.btn-gray:active:focus,.show>.btn-gray.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(151,158,168,.5)}.btn-gray.disabled,.btn-gray:disabled{color:#354052;background-color:#a8aeb7;border-color:#a8aeb7}.btn-outline-gray{color:#a8aeb7;border-color:#a8aeb7}.btn-outline-gray:hover{color:#a8aeb7;background-color:#a8aeb7;border-color:#a8aeb7}.btn-outline-gray.focus,.btn-outline-gray:focus{box-shadow:0 0 0 .2rem rgba(168,174,183,.5)}.btn-outline-gray.active,.btn-outline-gray.dropdown-toggle.show,.btn-outline-gray:active{color:#354052;background-color:#a8aeb7;border-color:#a8aeb7}.btn-outline-gray.active:focus,.btn-outline-gray.dropdown-toggle.show:focus,.btn-outline-gray:active:focus{box-shadow:0 0 0 .2rem rgba(168,174,183,.5)}.btn-outline-gray.disabled,.btn-outline-gray:disabled{color:#a8aeb7;background-color:transparent}.btn-gray-dark{color:#fff;background-color:#545d6d;border-color:#545d6d}.btn-gray-dark:hover{color:#fff;background-color:#434b57;border-color:#3e4450}.btn-gray-dark.focus,.btn-gray-dark:focus{color:#fff;background-color:#434b57;border-color:#3e4450;box-shadow:0 0 0 .2rem rgba(110,117,131,.5)}.btn-gray-dark.active,.btn-gray-dark:active,.show>.btn-gray-dark.dropdown-toggle{color:#fff;background-color:#3e4450;border-color:#383e49}.btn-gray-dark.active:focus,.btn-gray-dark:active:focus,.show>.btn-gray-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(110,117,131,.5)}.btn-gray-dark.disabled,.btn-gray-dark:disabled{color:#fff;background-color:#545d6d;border-color:#545d6d}.btn-outline-gray-dark{color:#545d6d;border-color:#545d6d}.btn-outline-gray-dark:hover{color:#545d6d;background-color:#545d6d;border-color:#545d6d}.btn-outline-gray-dark.focus,.btn-outline-gray-dark:focus{box-shadow:0 0 0 .2rem rgba(84,93,109,.5)}.btn-outline-gray-dark.active,.btn-outline-gray-dark.dropdown-toggle.show,.btn-outline-gray-dark:active{color:#fff;background-color:#545d6d;border-color:#545d6d}.btn-outline-gray-dark.active:focus,.btn-outline-gray-dark.dropdown-toggle.show:focus,.btn-outline-gray-dark:active:focus{box-shadow:0 0 0 .2rem rgba(84,93,109,.5)}.btn-outline-gray-dark.disabled,.btn-outline-gray-dark:disabled{color:#545d6d;background-color:transparent}.btn-dark{color:#fff;background-color:#354052;border-color:#354052}.btn-dark:hover{color:#fff;background-color:#262e3b;border-color:#212833}.btn-dark.focus,.btn-dark:focus{color:#fff;background-color:#262e3b;border-color:#212833;box-shadow:0 0 0 .2rem rgba(83,93,108,.5)}.btn-dark.active,.btn-dark:active,.show>.btn-dark.dropdown-toggle{color:#fff;background-color:#212833;border-color:#1c222b}.btn-dark.active:focus,.btn-dark:active:focus,.show>.btn-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(83,93,108,.5)}.btn-dark.disabled,.btn-dark:disabled{color:#fff;background-color:#354052;border-color:#354052}.btn-outline-dark{color:#354052;border-color:#354052}.btn-outline-dark:hover{color:#354052;background-color:#354052;border-color:#354052}.btn-outline-dark.focus,.btn-outline-dark:focus{box-shadow:0 0 0 .2rem rgba(53,64,82,.5)}.btn-outline-dark.active,.btn-outline-dark.dropdown-toggle.show,.btn-outline-dark:active{color:#fff;background-color:#354052;border-color:#354052}.btn-outline-dark.active:focus,.btn-outline-dark.dropdown-toggle.show:focus,.btn-outline-dark:active:focus{box-shadow:0 0 0 .2rem rgba(53,64,82,.5)}.btn-outline-dark.disabled,.btn-outline-dark:disabled{color:#354052;background-color:transparent}
+ */.btn-ghost-primary{color:#206bc4;background-color:transparent;border-color:transparent}.btn-ghost-primary:hover{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-ghost-primary.focus,.btn-ghost-primary:focus{color:#fff;background-color:#206bc4;border-color:#206bc4;box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-ghost-primary.active,.btn-ghost-primary:active,.show>.btn-ghost-primary.dropdown-toggle{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-ghost-primary.active:focus,.btn-ghost-primary:active:focus,.show>.btn-ghost-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-ghost-primary.disabled,.btn-ghost-primary:disabled{color:#206bc4;background-color:transparent;border-color:transparent}.btn-ghost-secondary{color:#6e7582;background-color:transparent;border-color:transparent}.btn-ghost-secondary:hover{color:#fff;background-color:#6e7582;border-color:#6e7582}.btn-ghost-secondary.focus,.btn-ghost-secondary:focus{color:#fff;background-color:#6e7582;border-color:#6e7582;box-shadow:0 0 0 .2rem rgba(110,117,130,.5)}.btn-ghost-secondary.active,.btn-ghost-secondary:active,.show>.btn-ghost-secondary.dropdown-toggle{color:#fff;background-color:#6e7582;border-color:#6e7582}.btn-ghost-secondary.active:focus,.btn-ghost-secondary:active:focus,.show>.btn-ghost-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(110,117,130,.5)}.btn-ghost-secondary.disabled,.btn-ghost-secondary:disabled{color:#6e7582;background-color:transparent;border-color:transparent}.btn-ghost-success{color:#5eba00;background-color:transparent;border-color:transparent}.btn-ghost-success:hover{color:#fff;background-color:#5eba00;border-color:#5eba00}.btn-ghost-success.focus,.btn-ghost-success:focus{color:#fff;background-color:#5eba00;border-color:#5eba00;box-shadow:0 0 0 .2rem rgba(94,186,0,.5)}.btn-ghost-success.active,.btn-ghost-success:active,.show>.btn-ghost-success.dropdown-toggle{color:#fff;background-color:#5eba00;border-color:#5eba00}.btn-ghost-success.active:focus,.btn-ghost-success:active:focus,.show>.btn-ghost-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(94,186,0,.5)}.btn-ghost-success.disabled,.btn-ghost-success:disabled{color:#5eba00;background-color:transparent;border-color:transparent}.btn-ghost-info{color:#45aaf2;background-color:transparent;border-color:transparent}.btn-ghost-info:hover{color:#fff;background-color:#45aaf2;border-color:#45aaf2}.btn-ghost-info.focus,.btn-ghost-info:focus{color:#fff;background-color:#45aaf2;border-color:#45aaf2;box-shadow:0 0 0 .2rem rgba(69,170,242,.5)}.btn-ghost-info.active,.btn-ghost-info:active,.show>.btn-ghost-info.dropdown-toggle{color:#fff;background-color:#45aaf2;border-color:#45aaf2}.btn-ghost-info.active:focus,.btn-ghost-info:active:focus,.show>.btn-ghost-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(69,170,242,.5)}.btn-ghost-info.disabled,.btn-ghost-info:disabled{color:#45aaf2;background-color:transparent;border-color:transparent}.btn-ghost-warning{color:#fab005;background-color:transparent;border-color:transparent}.btn-ghost-warning:hover{color:#fff;background-color:#fab005;border-color:#fab005}.btn-ghost-warning.focus,.btn-ghost-warning:focus{color:#fff;background-color:#fab005;border-color:#fab005;box-shadow:0 0 0 .2rem rgba(250,176,5,.5)}.btn-ghost-warning.active,.btn-ghost-warning:active,.show>.btn-ghost-warning.dropdown-toggle{color:#fff;background-color:#fab005;border-color:#fab005}.btn-ghost-warning.active:focus,.btn-ghost-warning:active:focus,.show>.btn-ghost-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(250,176,5,.5)}.btn-ghost-warning.disabled,.btn-ghost-warning:disabled{color:#fab005;background-color:transparent;border-color:transparent}.btn-ghost-danger{color:#cd201f;background-color:transparent;border-color:transparent}.btn-ghost-danger:hover{color:#fff;background-color:#cd201f;border-color:#cd201f}.btn-ghost-danger.focus,.btn-ghost-danger:focus{color:#fff;background-color:#cd201f;border-color:#cd201f;box-shadow:0 0 0 .2rem rgba(205,32,31,.5)}.btn-ghost-danger.active,.btn-ghost-danger:active,.show>.btn-ghost-danger.dropdown-toggle{color:#fff;background-color:#cd201f;border-color:#cd201f}.btn-ghost-danger.active:focus,.btn-ghost-danger:active:focus,.show>.btn-ghost-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(205,32,31,.5)}.btn-ghost-danger.disabled,.btn-ghost-danger:disabled{color:#cd201f;background-color:transparent;border-color:transparent}.btn-ghost-light{color:#f5f7fb;background-color:transparent;border-color:transparent}.btn-ghost-light:hover{color:#fff;background-color:#f5f7fb;border-color:#f5f7fb}.btn-ghost-light.focus,.btn-ghost-light:focus{color:#fff;background-color:#f5f7fb;border-color:#f5f7fb;box-shadow:0 0 0 .2rem rgba(245,247,251,.5)}.btn-ghost-light.active,.btn-ghost-light:active,.show>.btn-ghost-light.dropdown-toggle{color:#354052;background-color:#f5f7fb;border-color:#f5f7fb}.btn-ghost-light.active:focus,.btn-ghost-light:active:focus,.show>.btn-ghost-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(245,247,251,.5)}.btn-ghost-light.disabled,.btn-ghost-light:disabled{color:#f5f7fb;background-color:transparent;border-color:transparent}.btn-ghost-dark{color:#354052;background-color:transparent;border-color:transparent}.btn-ghost-dark:hover{color:#fff;background-color:#354052;border-color:#354052}.btn-ghost-dark.focus,.btn-ghost-dark:focus{color:#fff;background-color:#354052;border-color:#354052;box-shadow:0 0 0 .2rem rgba(53,64,82,.5)}.btn-ghost-dark.active,.btn-ghost-dark:active,.show>.btn-ghost-dark.dropdown-toggle{color:#fff;background-color:#354052;border-color:#354052}.btn-ghost-dark.active:focus,.btn-ghost-dark:active:focus,.show>.btn-ghost-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(53,64,82,.5)}.btn-ghost-dark.disabled,.btn-ghost-dark:disabled{color:#354052;background-color:transparent;border-color:transparent}.btn-facebook{color:#fff;background-color:#3b5998;border-color:#3b5998}.btn-facebook:hover{color:#fff;background-color:#30497c;border-color:#2d4373}.btn-facebook.focus,.btn-facebook:focus{color:#fff;background-color:#30497c;border-color:#2d4373;box-shadow:0 0 0 .2rem rgba(88,114,167,.5)}.btn-facebook.active,.btn-facebook:active,.show>.btn-facebook.dropdown-toggle{color:#fff;background-color:#2d4373;border-color:#293e6a}.btn-facebook.active:focus,.btn-facebook:active:focus,.show>.btn-facebook.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(88,114,167,.5)}.btn-facebook.disabled,.btn-facebook:disabled{color:#fff;background-color:#3b5998;border-color:#3b5998}.btn-outline-facebook{color:#3b5998;border-color:#3b5998}.btn-outline-facebook:hover{color:#3b5998;background-color:#3b5998;border-color:#3b5998}.btn-outline-facebook.focus,.btn-outline-facebook:focus{box-shadow:0 0 0 .2rem rgba(59,89,152,.5)}.btn-outline-facebook.active,.btn-outline-facebook.dropdown-toggle.show,.btn-outline-facebook:active{color:#fff;background-color:#3b5998;border-color:#3b5998}.btn-outline-facebook.active:focus,.btn-outline-facebook.dropdown-toggle.show:focus,.btn-outline-facebook:active:focus{box-shadow:0 0 0 .2rem rgba(59,89,152,.5)}.btn-outline-facebook.disabled,.btn-outline-facebook:disabled{color:#3b5998;background-color:transparent}.btn-twitter{color:#fff;background-color:#1da1f2;border-color:#1da1f2}.btn-twitter:hover{color:#fff;background-color:#0d8ddc;border-color:#0c85d0}.btn-twitter.focus,.btn-twitter:focus{color:#fff;background-color:#0d8ddc;border-color:#0c85d0;box-shadow:0 0 0 .2rem rgba(63,175,244,.5)}.btn-twitter.active,.btn-twitter:active,.show>.btn-twitter.dropdown-toggle{color:#fff;background-color:#0c85d0;border-color:#0b7ec4}.btn-twitter.active:focus,.btn-twitter:active:focus,.show>.btn-twitter.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(63,175,244,.5)}.btn-twitter.disabled,.btn-twitter:disabled{color:#fff;background-color:#1da1f2;border-color:#1da1f2}.btn-outline-twitter{color:#1da1f2;border-color:#1da1f2}.btn-outline-twitter:hover{color:#1da1f2;background-color:#1da1f2;border-color:#1da1f2}.btn-outline-twitter.focus,.btn-outline-twitter:focus{box-shadow:0 0 0 .2rem rgba(29,161,242,.5)}.btn-outline-twitter.active,.btn-outline-twitter.dropdown-toggle.show,.btn-outline-twitter:active{color:#fff;background-color:#1da1f2;border-color:#1da1f2}.btn-outline-twitter.active:focus,.btn-outline-twitter.dropdown-toggle.show:focus,.btn-outline-twitter:active:focus{box-shadow:0 0 0 .2rem rgba(29,161,242,.5)}.btn-outline-twitter.disabled,.btn-outline-twitter:disabled{color:#1da1f2;background-color:transparent}.btn-google{color:#fff;background-color:#dc4e41;border-color:#dc4e41}.btn-google:hover{color:#fff;background-color:#d03526;border-color:#c63224}.btn-google.focus,.btn-google:focus{color:#fff;background-color:#d03526;border-color:#c63224;box-shadow:0 0 0 .2rem rgba(225,105,94,.5)}.btn-google.active,.btn-google:active,.show>.btn-google.dropdown-toggle{color:#fff;background-color:#c63224;border-color:#bb2f22}.btn-google.active:focus,.btn-google:active:focus,.show>.btn-google.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(225,105,94,.5)}.btn-google.disabled,.btn-google:disabled{color:#fff;background-color:#dc4e41;border-color:#dc4e41}.btn-outline-google{color:#dc4e41;border-color:#dc4e41}.btn-outline-google:hover{color:#dc4e41;background-color:#dc4e41;border-color:#dc4e41}.btn-outline-google.focus,.btn-outline-google:focus{box-shadow:0 0 0 .2rem rgba(220,78,65,.5)}.btn-outline-google.active,.btn-outline-google.dropdown-toggle.show,.btn-outline-google:active{color:#fff;background-color:#dc4e41;border-color:#dc4e41}.btn-outline-google.active:focus,.btn-outline-google.dropdown-toggle.show:focus,.btn-outline-google:active:focus{box-shadow:0 0 0 .2rem rgba(220,78,65,.5)}.btn-outline-google.disabled,.btn-outline-google:disabled{color:#dc4e41;background-color:transparent}.btn-youtube{color:#fff;background-color:red;border-color:red}.btn-youtube:hover{color:#fff;background-color:#d90000;border-color:#c00}.btn-youtube.focus,.btn-youtube:focus{color:#fff;background-color:#d90000;border-color:#c00;box-shadow:0 0 0 .2rem rgba(255,38,38,.5)}.btn-youtube.active,.btn-youtube:active,.show>.btn-youtube.dropdown-toggle{color:#fff;background-color:#c00;border-color:#bf0000}.btn-youtube.active:focus,.btn-youtube:active:focus,.show>.btn-youtube.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(255,38,38,.5)}.btn-youtube.disabled,.btn-youtube:disabled{color:#fff;background-color:red;border-color:red}.btn-outline-youtube{color:red;border-color:red}.btn-outline-youtube:hover{color:red;background-color:red;border-color:red}.btn-outline-youtube.focus,.btn-outline-youtube:focus{box-shadow:0 0 0 .2rem rgba(255,0,0,.5)}.btn-outline-youtube.active,.btn-outline-youtube.dropdown-toggle.show,.btn-outline-youtube:active{color:#fff;background-color:red;border-color:red}.btn-outline-youtube.active:focus,.btn-outline-youtube.dropdown-toggle.show:focus,.btn-outline-youtube:active:focus{box-shadow:0 0 0 .2rem rgba(255,0,0,.5)}.btn-outline-youtube.disabled,.btn-outline-youtube:disabled{color:red;background-color:transparent}.btn-vimeo{color:#fff;background-color:#1ab7ea;border-color:#1ab7ea}.btn-vimeo:hover{color:#fff;background-color:#139ecb;border-color:#1295bf}.btn-vimeo.focus,.btn-vimeo:focus{color:#fff;background-color:#139ecb;border-color:#1295bf;box-shadow:0 0 0 .2rem rgba(60,194,237,.5)}.btn-vimeo.active,.btn-vimeo:active,.show>.btn-vimeo.dropdown-toggle{color:#fff;background-color:#1295bf;border-color:#108cb4}.btn-vimeo.active:focus,.btn-vimeo:active:focus,.show>.btn-vimeo.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(60,194,237,.5)}.btn-vimeo.disabled,.btn-vimeo:disabled{color:#fff;background-color:#1ab7ea;border-color:#1ab7ea}.btn-outline-vimeo{color:#1ab7ea;border-color:#1ab7ea}.btn-outline-vimeo:hover{color:#1ab7ea;background-color:#1ab7ea;border-color:#1ab7ea}.btn-outline-vimeo.focus,.btn-outline-vimeo:focus{box-shadow:0 0 0 .2rem rgba(26,183,234,.5)}.btn-outline-vimeo.active,.btn-outline-vimeo.dropdown-toggle.show,.btn-outline-vimeo:active{color:#fff;background-color:#1ab7ea;border-color:#1ab7ea}.btn-outline-vimeo.active:focus,.btn-outline-vimeo.dropdown-toggle.show:focus,.btn-outline-vimeo:active:focus{box-shadow:0 0 0 .2rem rgba(26,183,234,.5)}.btn-outline-vimeo.disabled,.btn-outline-vimeo:disabled{color:#1ab7ea;background-color:transparent}.btn-dribbble{color:#fff;background-color:#ea4c89;border-color:#ea4c89}.btn-dribbble:hover{color:#fff;background-color:#e62a72;border-color:#e51e6b}.btn-dribbble.focus,.btn-dribbble:focus{color:#fff;background-color:#e62a72;border-color:#e51e6b;box-shadow:0 0 0 .2rem rgba(237,103,155,.5)}.btn-dribbble.active,.btn-dribbble:active,.show>.btn-dribbble.dropdown-toggle{color:#fff;background-color:#e51e6b;border-color:#dc1a65}.btn-dribbble.active:focus,.btn-dribbble:active:focus,.show>.btn-dribbble.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(237,103,155,.5)}.btn-dribbble.disabled,.btn-dribbble:disabled{color:#fff;background-color:#ea4c89;border-color:#ea4c89}.btn-outline-dribbble{color:#ea4c89;border-color:#ea4c89}.btn-outline-dribbble:hover{color:#ea4c89;background-color:#ea4c89;border-color:#ea4c89}.btn-outline-dribbble.focus,.btn-outline-dribbble:focus{box-shadow:0 0 0 .2rem rgba(234,76,137,.5)}.btn-outline-dribbble.active,.btn-outline-dribbble.dropdown-toggle.show,.btn-outline-dribbble:active{color:#fff;background-color:#ea4c89;border-color:#ea4c89}.btn-outline-dribbble.active:focus,.btn-outline-dribbble.dropdown-toggle.show:focus,.btn-outline-dribbble:active:focus{box-shadow:0 0 0 .2rem rgba(234,76,137,.5)}.btn-outline-dribbble.disabled,.btn-outline-dribbble:disabled{color:#ea4c89;background-color:transparent}.btn-github{color:#fff;background-color:#181717;border-color:#181717}.btn-github:hover{color:#fff;background-color:#040404;border-color:#000}.btn-github.focus,.btn-github:focus{color:#fff;background-color:#040404;border-color:#000;box-shadow:0 0 0 .2rem rgba(59,58,58,.5)}.btn-github.active,.btn-github:active,.show>.btn-github.dropdown-toggle{color:#fff;background-color:#000;border-color:#000}.btn-github.active:focus,.btn-github:active:focus,.show>.btn-github.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(59,58,58,.5)}.btn-github.disabled,.btn-github:disabled{color:#fff;background-color:#181717;border-color:#181717}.btn-outline-github{color:#181717;border-color:#181717}.btn-outline-github:hover{color:#181717;background-color:#181717;border-color:#181717}.btn-outline-github.focus,.btn-outline-github:focus{box-shadow:0 0 0 .2rem rgba(24,23,23,.5)}.btn-outline-github.active,.btn-outline-github.dropdown-toggle.show,.btn-outline-github:active{color:#fff;background-color:#181717;border-color:#181717}.btn-outline-github.active:focus,.btn-outline-github.dropdown-toggle.show:focus,.btn-outline-github:active:focus{box-shadow:0 0 0 .2rem rgba(24,23,23,.5)}.btn-outline-github.disabled,.btn-outline-github:disabled{color:#181717;background-color:transparent}.btn-instagram{color:#fff;background-color:#e4405f;border-color:#e4405f}.btn-instagram:hover{color:#fff;background-color:#de1f44;border-color:#d31e40}.btn-instagram.focus,.btn-instagram:focus{color:#fff;background-color:#de1f44;border-color:#d31e40;box-shadow:0 0 0 .2rem rgba(232,93,119,.5)}.btn-instagram.active,.btn-instagram:active,.show>.btn-instagram.dropdown-toggle{color:#fff;background-color:#d31e40;border-color:#c81c3d}.btn-instagram.active:focus,.btn-instagram:active:focus,.show>.btn-instagram.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(232,93,119,.5)}.btn-instagram.disabled,.btn-instagram:disabled{color:#fff;background-color:#e4405f;border-color:#e4405f}.btn-outline-instagram{color:#e4405f;border-color:#e4405f}.btn-outline-instagram:hover{color:#e4405f;background-color:#e4405f;border-color:#e4405f}.btn-outline-instagram.focus,.btn-outline-instagram:focus{box-shadow:0 0 0 .2rem rgba(228,64,95,.5)}.btn-outline-instagram.active,.btn-outline-instagram.dropdown-toggle.show,.btn-outline-instagram:active{color:#fff;background-color:#e4405f;border-color:#e4405f}.btn-outline-instagram.active:focus,.btn-outline-instagram.dropdown-toggle.show:focus,.btn-outline-instagram:active:focus{box-shadow:0 0 0 .2rem rgba(228,64,95,.5)}.btn-outline-instagram.disabled,.btn-outline-instagram:disabled{color:#e4405f;background-color:transparent}.btn-pinterest{color:#fff;background-color:#bd081c;border-color:#bd081c}.btn-pinterest:hover{color:#fff;background-color:#980617;border-color:#8c0615}.btn-pinterest.focus,.btn-pinterest:focus{color:#fff;background-color:#980617;border-color:#8c0615;box-shadow:0 0 0 .2rem rgba(199,45,62,.5)}.btn-pinterest.active,.btn-pinterest:active,.show>.btn-pinterest.dropdown-toggle{color:#fff;background-color:#8c0615;border-color:#800513}.btn-pinterest.active:focus,.btn-pinterest:active:focus,.show>.btn-pinterest.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(199,45,62,.5)}.btn-pinterest.disabled,.btn-pinterest:disabled{color:#fff;background-color:#bd081c;border-color:#bd081c}.btn-outline-pinterest{color:#bd081c;border-color:#bd081c}.btn-outline-pinterest:hover{color:#bd081c;background-color:#bd081c;border-color:#bd081c}.btn-outline-pinterest.focus,.btn-outline-pinterest:focus{box-shadow:0 0 0 .2rem rgba(189,8,28,.5)}.btn-outline-pinterest.active,.btn-outline-pinterest.dropdown-toggle.show,.btn-outline-pinterest:active{color:#fff;background-color:#bd081c;border-color:#bd081c}.btn-outline-pinterest.active:focus,.btn-outline-pinterest.dropdown-toggle.show:focus,.btn-outline-pinterest:active:focus{box-shadow:0 0 0 .2rem rgba(189,8,28,.5)}.btn-outline-pinterest.disabled,.btn-outline-pinterest:disabled{color:#bd081c;background-color:transparent}.btn-vk{color:#fff;background-color:#6383a8;border-color:#6383a8}.btn-vk:hover{color:#fff;background-color:#527093;border-color:#4d6a8b}.btn-vk.focus,.btn-vk:focus{color:#fff;background-color:#527093;border-color:#4d6a8b;box-shadow:0 0 0 .2rem rgba(122,150,181,.5)}.btn-vk.active,.btn-vk:active,.show>.btn-vk.dropdown-toggle{color:#fff;background-color:#4d6a8b;border-color:#496482}.btn-vk.active:focus,.btn-vk:active:focus,.show>.btn-vk.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(122,150,181,.5)}.btn-vk.disabled,.btn-vk:disabled{color:#fff;background-color:#6383a8;border-color:#6383a8}.btn-outline-vk{color:#6383a8;border-color:#6383a8}.btn-outline-vk:hover{color:#6383a8;background-color:#6383a8;border-color:#6383a8}.btn-outline-vk.focus,.btn-outline-vk:focus{box-shadow:0 0 0 .2rem rgba(99,131,168,.5)}.btn-outline-vk.active,.btn-outline-vk.dropdown-toggle.show,.btn-outline-vk:active{color:#fff;background-color:#6383a8;border-color:#6383a8}.btn-outline-vk.active:focus,.btn-outline-vk.dropdown-toggle.show:focus,.btn-outline-vk:active:focus{box-shadow:0 0 0 .2rem rgba(99,131,168,.5)}.btn-outline-vk.disabled,.btn-outline-vk:disabled{color:#6383a8;background-color:transparent}.btn-rss{color:#fff;background-color:orange;border-color:orange}.btn-rss:hover{color:#fff;background-color:#d98c00;border-color:#cc8400}.btn-rss.focus,.btn-rss:focus{color:#fff;background-color:#d98c00;border-color:#cc8400;box-shadow:0 0 0 .2rem rgba(255,179,38,.5)}.btn-rss.active,.btn-rss:active,.show>.btn-rss.dropdown-toggle{color:#fff;background-color:#cc8400;border-color:#bf7c00}.btn-rss.active:focus,.btn-rss:active:focus,.show>.btn-rss.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(255,179,38,.5)}.btn-rss.disabled,.btn-rss:disabled{color:#fff;background-color:orange;border-color:orange}.btn-outline-rss{color:orange;border-color:orange}.btn-outline-rss:hover{color:orange;background-color:orange;border-color:orange}.btn-outline-rss.focus,.btn-outline-rss:focus{box-shadow:0 0 0 .2rem rgba(255,165,0,.5)}.btn-outline-rss.active,.btn-outline-rss.dropdown-toggle.show,.btn-outline-rss:active{color:#fff;background-color:orange;border-color:orange}.btn-outline-rss.active:focus,.btn-outline-rss.dropdown-toggle.show:focus,.btn-outline-rss:active:focus{box-shadow:0 0 0 .2rem rgba(255,165,0,.5)}.btn-outline-rss.disabled,.btn-outline-rss:disabled{color:orange;background-color:transparent}.btn-flickr{color:#fff;background-color:#0063dc;border-color:#0063dc}.btn-flickr:hover{color:#fff;background-color:#0052b6;border-color:#004ca9}.btn-flickr.focus,.btn-flickr:focus{color:#fff;background-color:#0052b6;border-color:#004ca9;box-shadow:0 0 0 .2rem rgba(38,122,225,.5)}.btn-flickr.active,.btn-flickr:active,.show>.btn-flickr.dropdown-toggle{color:#fff;background-color:#004ca9;border-color:#00469c}.btn-flickr.active:focus,.btn-flickr:active:focus,.show>.btn-flickr.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(38,122,225,.5)}.btn-flickr.disabled,.btn-flickr:disabled{color:#fff;background-color:#0063dc;border-color:#0063dc}.btn-outline-flickr{color:#0063dc;border-color:#0063dc}.btn-outline-flickr:hover{color:#0063dc;background-color:#0063dc;border-color:#0063dc}.btn-outline-flickr.focus,.btn-outline-flickr:focus{box-shadow:0 0 0 .2rem rgba(0,99,220,.5)}.btn-outline-flickr.active,.btn-outline-flickr.dropdown-toggle.show,.btn-outline-flickr:active{color:#fff;background-color:#0063dc;border-color:#0063dc}.btn-outline-flickr.active:focus,.btn-outline-flickr.dropdown-toggle.show:focus,.btn-outline-flickr:active:focus{box-shadow:0 0 0 .2rem rgba(0,99,220,.5)}.btn-outline-flickr.disabled,.btn-outline-flickr:disabled{color:#0063dc;background-color:transparent}.btn-bitbucket{color:#fff;background-color:#0052cc;border-color:#0052cc}.btn-bitbucket:hover{color:#fff;background-color:#0043a6;border-color:#003e99}.btn-bitbucket.focus,.btn-bitbucket:focus{color:#fff;background-color:#0043a6;border-color:#003e99;box-shadow:0 0 0 .2rem rgba(38,108,212,.5)}.btn-bitbucket.active,.btn-bitbucket:active,.show>.btn-bitbucket.dropdown-toggle{color:#fff;background-color:#003e99;border-color:#00388c}.btn-bitbucket.active:focus,.btn-bitbucket:active:focus,.show>.btn-bitbucket.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(38,108,212,.5)}.btn-bitbucket.disabled,.btn-bitbucket:disabled{color:#fff;background-color:#0052cc;border-color:#0052cc}.btn-outline-bitbucket{color:#0052cc;border-color:#0052cc}.btn-outline-bitbucket:hover{color:#0052cc;background-color:#0052cc;border-color:#0052cc}.btn-outline-bitbucket.focus,.btn-outline-bitbucket:focus{box-shadow:0 0 0 .2rem rgba(0,82,204,.5)}.btn-outline-bitbucket.active,.btn-outline-bitbucket.dropdown-toggle.show,.btn-outline-bitbucket:active{color:#fff;background-color:#0052cc;border-color:#0052cc}.btn-outline-bitbucket.active:focus,.btn-outline-bitbucket.dropdown-toggle.show:focus,.btn-outline-bitbucket:active:focus{box-shadow:0 0 0 .2rem rgba(0,82,204,.5)}.btn-outline-bitbucket.disabled,.btn-outline-bitbucket:disabled{color:#0052cc;background-color:transparent}.btn-tabler{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-tabler:hover{color:#fff;background-color:#1b59a3;border-color:#195398}.btn-tabler.focus,.btn-tabler:focus{color:#fff;background-color:#1b59a3;border-color:#195398;box-shadow:0 0 0 .2rem rgba(65,129,205,.5)}.btn-tabler.active,.btn-tabler:active,.show>.btn-tabler.dropdown-toggle{color:#fff;background-color:#195398;border-color:#174d8d}.btn-tabler.active:focus,.btn-tabler:active:focus,.show>.btn-tabler.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(65,129,205,.5)}.btn-tabler.disabled,.btn-tabler:disabled{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-outline-tabler{color:#206bc4;border-color:#206bc4}.btn-outline-tabler:hover{color:#206bc4;background-color:#206bc4;border-color:#206bc4}.btn-outline-tabler.focus,.btn-outline-tabler:focus{box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-outline-tabler.active,.btn-outline-tabler.dropdown-toggle.show,.btn-outline-tabler:active{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-outline-tabler.active:focus,.btn-outline-tabler.dropdown-toggle.show:focus,.btn-outline-tabler:active:focus{box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-outline-tabler.disabled,.btn-outline-tabler:disabled{color:#206bc4;background-color:transparent}.btn-blue{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-blue:hover{color:#fff;background-color:#1b59a3;border-color:#195398}.btn-blue.focus,.btn-blue:focus{color:#fff;background-color:#1b59a3;border-color:#195398;box-shadow:0 0 0 .2rem rgba(65,129,205,.5)}.btn-blue.active,.btn-blue:active,.show>.btn-blue.dropdown-toggle{color:#fff;background-color:#195398;border-color:#174d8d}.btn-blue.active:focus,.btn-blue:active:focus,.show>.btn-blue.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(65,129,205,.5)}.btn-blue.disabled,.btn-blue:disabled{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-outline-blue{color:#206bc4;border-color:#206bc4}.btn-outline-blue:hover{color:#206bc4;background-color:#206bc4;border-color:#206bc4}.btn-outline-blue.focus,.btn-outline-blue:focus{box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-outline-blue.active,.btn-outline-blue.dropdown-toggle.show,.btn-outline-blue:active{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-outline-blue.active:focus,.btn-outline-blue.dropdown-toggle.show:focus,.btn-outline-blue:active:focus{box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-outline-blue.disabled,.btn-outline-blue:disabled{color:#206bc4;background-color:transparent}.btn-azure{color:#fff;background-color:#45aaf2;border-color:#45aaf2}.btn-azure:hover{color:#fff;background-color:#219af0;border-color:#1594ef}.btn-azure.focus,.btn-azure:focus{color:#fff;background-color:#219af0;border-color:#1594ef;box-shadow:0 0 0 .2rem rgba(97,183,244,.5)}.btn-azure.active,.btn-azure:active,.show>.btn-azure.dropdown-toggle{color:#fff;background-color:#1594ef;border-color:#108ee7}.btn-azure.active:focus,.btn-azure:active:focus,.show>.btn-azure.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(97,183,244,.5)}.btn-azure.disabled,.btn-azure:disabled{color:#fff;background-color:#45aaf2;border-color:#45aaf2}.btn-outline-azure{color:#45aaf2;border-color:#45aaf2}.btn-outline-azure:hover{color:#45aaf2;background-color:#45aaf2;border-color:#45aaf2}.btn-outline-azure.focus,.btn-outline-azure:focus{box-shadow:0 0 0 .2rem rgba(69,170,242,.5)}.btn-outline-azure.active,.btn-outline-azure.dropdown-toggle.show,.btn-outline-azure:active{color:#fff;background-color:#45aaf2;border-color:#45aaf2}.btn-outline-azure.active:focus,.btn-outline-azure.dropdown-toggle.show:focus,.btn-outline-azure:active:focus{box-shadow:0 0 0 .2rem rgba(69,170,242,.5)}.btn-outline-azure.disabled,.btn-outline-azure:disabled{color:#45aaf2;background-color:transparent}.btn-indigo{color:#fff;background-color:#6574cd;border-color:#6574cd}.btn-indigo:hover{color:#fff;background-color:#485ac4;border-color:#3f51c1}.btn-indigo.focus,.btn-indigo:focus{color:#fff;background-color:#485ac4;border-color:#3f51c1;box-shadow:0 0 0 .2rem rgba(124,137,213,.5)}.btn-indigo.active,.btn-indigo:active,.show>.btn-indigo.dropdown-toggle{color:#fff;background-color:#3f51c1;border-color:#3b4db7}.btn-indigo.active:focus,.btn-indigo:active:focus,.show>.btn-indigo.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(124,137,213,.5)}.btn-indigo.disabled,.btn-indigo:disabled{color:#fff;background-color:#6574cd;border-color:#6574cd}.btn-outline-indigo{color:#6574cd;border-color:#6574cd}.btn-outline-indigo:hover{color:#6574cd;background-color:#6574cd;border-color:#6574cd}.btn-outline-indigo.focus,.btn-outline-indigo:focus{box-shadow:0 0 0 .2rem rgba(101,116,205,.5)}.btn-outline-indigo.active,.btn-outline-indigo.dropdown-toggle.show,.btn-outline-indigo:active{color:#fff;background-color:#6574cd;border-color:#6574cd}.btn-outline-indigo.active:focus,.btn-outline-indigo.dropdown-toggle.show:focus,.btn-outline-indigo:active:focus{box-shadow:0 0 0 .2rem rgba(101,116,205,.5)}.btn-outline-indigo.disabled,.btn-outline-indigo:disabled{color:#6574cd;background-color:transparent}.btn-purple{color:#fff;background-color:#a55eea;border-color:#a55eea}.btn-purple:hover{color:#fff;background-color:#923ce6;border-color:#8c31e4}.btn-purple.focus,.btn-purple:focus{color:#fff;background-color:#923ce6;border-color:#8c31e4;box-shadow:0 0 0 .2rem rgba(179,118,237,.5)}.btn-purple.active,.btn-purple:active,.show>.btn-purple.dropdown-toggle{color:#fff;background-color:#8c31e4;border-color:#8526e3}.btn-purple.active:focus,.btn-purple:active:focus,.show>.btn-purple.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(179,118,237,.5)}.btn-purple.disabled,.btn-purple:disabled{color:#fff;background-color:#a55eea;border-color:#a55eea}.btn-outline-purple{color:#a55eea;border-color:#a55eea}.btn-outline-purple:hover{color:#a55eea;background-color:#a55eea;border-color:#a55eea}.btn-outline-purple.focus,.btn-outline-purple:focus{box-shadow:0 0 0 .2rem rgba(165,94,234,.5)}.btn-outline-purple.active,.btn-outline-purple.dropdown-toggle.show,.btn-outline-purple:active{color:#fff;background-color:#a55eea;border-color:#a55eea}.btn-outline-purple.active:focus,.btn-outline-purple.dropdown-toggle.show:focus,.btn-outline-purple:active:focus{box-shadow:0 0 0 .2rem rgba(165,94,234,.5)}.btn-outline-purple.disabled,.btn-outline-purple:disabled{color:#a55eea;background-color:transparent}.btn-pink{color:#fff;background-color:#f66d9b;border-color:#f66d9b}.btn-pink:hover{color:#fff;background-color:#f44982;border-color:#f33d7a}.btn-pink.focus,.btn-pink:focus{color:#fff;background-color:#f44982;border-color:#f33d7a;box-shadow:0 0 0 .2rem rgba(247,131,170,.5)}.btn-pink.active,.btn-pink:active,.show>.btn-pink.dropdown-toggle{color:#fff;background-color:#f33d7a;border-color:#f23172}.btn-pink.active:focus,.btn-pink:active:focus,.show>.btn-pink.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(247,131,170,.5)}.btn-pink.disabled,.btn-pink:disabled{color:#fff;background-color:#f66d9b;border-color:#f66d9b}.btn-outline-pink{color:#f66d9b;border-color:#f66d9b}.btn-outline-pink:hover{color:#f66d9b;background-color:#f66d9b;border-color:#f66d9b}.btn-outline-pink.focus,.btn-outline-pink:focus{box-shadow:0 0 0 .2rem rgba(246,109,155,.5)}.btn-outline-pink.active,.btn-outline-pink.dropdown-toggle.show,.btn-outline-pink:active{color:#fff;background-color:#f66d9b;border-color:#f66d9b}.btn-outline-pink.active:focus,.btn-outline-pink.dropdown-toggle.show:focus,.btn-outline-pink:active:focus{box-shadow:0 0 0 .2rem rgba(246,109,155,.5)}.btn-outline-pink.disabled,.btn-outline-pink:disabled{color:#f66d9b;background-color:transparent}.btn-red{color:#fff;background-color:#cd201f;border-color:#cd201f}.btn-red:hover{color:#fff;background-color:#ac1b1a;border-color:#a11918}.btn-red.focus,.btn-red:focus{color:#fff;background-color:#ac1b1a;border-color:#a11918;box-shadow:0 0 0 .2rem rgba(213,65,65,.5)}.btn-red.active,.btn-red:active,.show>.btn-red.dropdown-toggle{color:#fff;background-color:#a11918;border-color:#961717}.btn-red.active:focus,.btn-red:active:focus,.show>.btn-red.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(213,65,65,.5)}.btn-red.disabled,.btn-red:disabled{color:#fff;background-color:#cd201f;border-color:#cd201f}.btn-outline-red{color:#cd201f;border-color:#cd201f}.btn-outline-red:hover{color:#cd201f;background-color:#cd201f;border-color:#cd201f}.btn-outline-red.focus,.btn-outline-red:focus{box-shadow:0 0 0 .2rem rgba(205,32,31,.5)}.btn-outline-red.active,.btn-outline-red.dropdown-toggle.show,.btn-outline-red:active{color:#fff;background-color:#cd201f;border-color:#cd201f}.btn-outline-red.active:focus,.btn-outline-red.dropdown-toggle.show:focus,.btn-outline-red:active:focus{box-shadow:0 0 0 .2rem rgba(205,32,31,.5)}.btn-outline-red.disabled,.btn-outline-red:disabled{color:#cd201f;background-color:transparent}.btn-orange{color:#fff;background-color:#ff922b;border-color:#ff922b}.btn-orange:hover{color:#fff;background-color:#ff7e05;border-color:#f77800}.btn-orange.focus,.btn-orange:focus{color:#fff;background-color:#ff7e05;border-color:#f77800;box-shadow:0 0 0 .2rem rgba(255,162,75,.5)}.btn-orange.active,.btn-orange:active,.show>.btn-orange.dropdown-toggle{color:#fff;background-color:#f77800;border-color:#ea7200}.btn-orange.active:focus,.btn-orange:active:focus,.show>.btn-orange.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(255,162,75,.5)}.btn-orange.disabled,.btn-orange:disabled{color:#fff;background-color:#ff922b;border-color:#ff922b}.btn-outline-orange{color:#ff922b;border-color:#ff922b}.btn-outline-orange:hover{color:#ff922b;background-color:#ff922b;border-color:#ff922b}.btn-outline-orange.focus,.btn-outline-orange:focus{box-shadow:0 0 0 .2rem rgba(255,146,43,.5)}.btn-outline-orange.active,.btn-outline-orange.dropdown-toggle.show,.btn-outline-orange:active{color:#fff;background-color:#ff922b;border-color:#ff922b}.btn-outline-orange.active:focus,.btn-outline-orange.dropdown-toggle.show:focus,.btn-outline-orange:active:focus{box-shadow:0 0 0 .2rem rgba(255,146,43,.5)}.btn-outline-orange.disabled,.btn-outline-orange:disabled{color:#ff922b;background-color:transparent}.btn-yellow{color:#fff;background-color:#fab005;border-color:#fab005}.btn-yellow:hover{color:#fff;background-color:#d59604;border-color:#c88d04}.btn-yellow.focus,.btn-yellow:focus{color:#fff;background-color:#d59604;border-color:#c88d04;box-shadow:0 0 0 .2rem rgba(251,188,43,.5)}.btn-yellow.active,.btn-yellow:active,.show>.btn-yellow.dropdown-toggle{color:#fff;background-color:#c88d04;border-color:#bc8404}.btn-yellow.active:focus,.btn-yellow:active:focus,.show>.btn-yellow.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(251,188,43,.5)}.btn-yellow.disabled,.btn-yellow:disabled{color:#fff;background-color:#fab005;border-color:#fab005}.btn-outline-yellow{color:#fab005;border-color:#fab005}.btn-outline-yellow:hover{color:#fab005;background-color:#fab005;border-color:#fab005}.btn-outline-yellow.focus,.btn-outline-yellow:focus{box-shadow:0 0 0 .2rem rgba(250,176,5,.5)}.btn-outline-yellow.active,.btn-outline-yellow.dropdown-toggle.show,.btn-outline-yellow:active{color:#fff;background-color:#fab005;border-color:#fab005}.btn-outline-yellow.active:focus,.btn-outline-yellow.dropdown-toggle.show:focus,.btn-outline-yellow:active:focus{box-shadow:0 0 0 .2rem rgba(250,176,5,.5)}.btn-outline-yellow.disabled,.btn-outline-yellow:disabled{color:#fab005;background-color:transparent}.btn-lime{color:#fff;background-color:#94d82d;border-color:#94d82d}.btn-lime:hover{color:#fff;background-color:#7fbc23;border-color:#78b121}.btn-lime.focus,.btn-lime:focus{color:#fff;background-color:#7fbc23;border-color:#78b121;box-shadow:0 0 0 .2rem rgba(164,222,77,.5)}.btn-lime.active,.btn-lime:active,.show>.btn-lime.dropdown-toggle{color:#fff;background-color:#78b121;border-color:#70a61f}.btn-lime.active:focus,.btn-lime:active:focus,.show>.btn-lime.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(164,222,77,.5)}.btn-lime.disabled,.btn-lime:disabled{color:#fff;background-color:#94d82d;border-color:#94d82d}.btn-outline-lime{color:#94d82d;border-color:#94d82d}.btn-outline-lime:hover{color:#94d82d;background-color:#94d82d;border-color:#94d82d}.btn-outline-lime.focus,.btn-outline-lime:focus{box-shadow:0 0 0 .2rem rgba(148,216,45,.5)}.btn-outline-lime.active,.btn-outline-lime.dropdown-toggle.show,.btn-outline-lime:active{color:#fff;background-color:#94d82d;border-color:#94d82d}.btn-outline-lime.active:focus,.btn-outline-lime.dropdown-toggle.show:focus,.btn-outline-lime:active:focus{box-shadow:0 0 0 .2rem rgba(148,216,45,.5)}.btn-outline-lime.disabled,.btn-outline-lime:disabled{color:#94d82d;background-color:transparent}.btn-green{color:#fff;background-color:#5eba00;border-color:#5eba00}.btn-green:hover{color:#fff;background-color:#4b9400;border-color:#448700}.btn-green.focus,.btn-green:focus{color:#fff;background-color:#4b9400;border-color:#448700;box-shadow:0 0 0 .2rem rgba(118,196,38,.5)}.btn-green.active,.btn-green:active,.show>.btn-green.dropdown-toggle{color:#fff;background-color:#448700;border-color:#3e7a00}.btn-green.active:focus,.btn-green:active:focus,.show>.btn-green.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(118,196,38,.5)}.btn-green.disabled,.btn-green:disabled{color:#fff;background-color:#5eba00;border-color:#5eba00}.btn-outline-green{color:#5eba00;border-color:#5eba00}.btn-outline-green:hover{color:#5eba00;background-color:#5eba00;border-color:#5eba00}.btn-outline-green.focus,.btn-outline-green:focus{box-shadow:0 0 0 .2rem rgba(94,186,0,.5)}.btn-outline-green.active,.btn-outline-green.dropdown-toggle.show,.btn-outline-green:active{color:#fff;background-color:#5eba00;border-color:#5eba00}.btn-outline-green.active:focus,.btn-outline-green.dropdown-toggle.show:focus,.btn-outline-green:active:focus{box-shadow:0 0 0 .2rem rgba(94,186,0,.5)}.btn-outline-green.disabled,.btn-outline-green:disabled{color:#5eba00;background-color:transparent}.btn-teal{color:#fff;background-color:#2bcbba;border-color:#2bcbba}.btn-teal:hover{color:#fff;background-color:#24ab9d;border-color:#22a193}.btn-teal.focus,.btn-teal:focus{color:#fff;background-color:#24ab9d;border-color:#22a193;box-shadow:0 0 0 .2rem rgba(75,211,196,.5)}.btn-teal.active,.btn-teal:active,.show>.btn-teal.dropdown-toggle{color:#fff;background-color:#22a193;border-color:#20968a}.btn-teal.active:focus,.btn-teal:active:focus,.show>.btn-teal.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(75,211,196,.5)}.btn-teal.disabled,.btn-teal:disabled{color:#fff;background-color:#2bcbba;border-color:#2bcbba}.btn-outline-teal{color:#2bcbba;border-color:#2bcbba}.btn-outline-teal:hover{color:#2bcbba;background-color:#2bcbba;border-color:#2bcbba}.btn-outline-teal.focus,.btn-outline-teal:focus{box-shadow:0 0 0 .2rem rgba(43,203,186,.5)}.btn-outline-teal.active,.btn-outline-teal.dropdown-toggle.show,.btn-outline-teal:active{color:#fff;background-color:#2bcbba;border-color:#2bcbba}.btn-outline-teal.active:focus,.btn-outline-teal.dropdown-toggle.show:focus,.btn-outline-teal:active:focus{box-shadow:0 0 0 .2rem rgba(43,203,186,.5)}.btn-outline-teal.disabled,.btn-outline-teal:disabled{color:#2bcbba;background-color:transparent}.btn-cyan{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-cyan:hover{color:#fff;background-color:#138496;border-color:#117a8b}.btn-cyan.focus,.btn-cyan:focus{color:#fff;background-color:#138496;border-color:#117a8b;box-shadow:0 0 0 .2rem rgba(58,176,195,.5)}.btn-cyan.active,.btn-cyan:active,.show>.btn-cyan.dropdown-toggle{color:#fff;background-color:#117a8b;border-color:#10707f}.btn-cyan.active:focus,.btn-cyan:active:focus,.show>.btn-cyan.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(58,176,195,.5)}.btn-cyan.disabled,.btn-cyan:disabled{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-cyan{color:#17a2b8;border-color:#17a2b8}.btn-outline-cyan:hover{color:#17a2b8;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-cyan.focus,.btn-outline-cyan:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-outline-cyan.active,.btn-outline-cyan.dropdown-toggle.show,.btn-outline-cyan:active{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-cyan.active:focus,.btn-outline-cyan.dropdown-toggle.show:focus,.btn-outline-cyan:active:focus{box-shadow:0 0 0 .2rem rgba(23,162,184,.5)}.btn-outline-cyan.disabled,.btn-outline-cyan:disabled{color:#17a2b8;background-color:transparent}.btn-white{color:#354052;background-color:#fff;border-color:#fff}.btn-white:hover{color:#354052;background-color:#ececec;border-color:#e6e6e6}.btn-white.focus,.btn-white:focus{color:#354052;background-color:#ececec;border-color:#e6e6e6;box-shadow:0 0 0 .2rem rgba(225,226,229,.5)}.btn-white.active,.btn-white:active,.show>.btn-white.dropdown-toggle{color:#354052;background-color:#e6e6e6;border-color:#dfdfdf}.btn-white.active:focus,.btn-white:active:focus,.show>.btn-white.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(225,226,229,.5)}.btn-white.disabled,.btn-white:disabled{color:#354052;background-color:#fff;border-color:#fff}.btn-outline-white{color:#fff;border-color:#fff}.btn-outline-white:hover{color:#fff;background-color:#fff;border-color:#fff}.btn-outline-white.focus,.btn-outline-white:focus{box-shadow:0 0 0 .2rem rgba(255,255,255,.5)}.btn-outline-white.active,.btn-outline-white.dropdown-toggle.show,.btn-outline-white:active{color:#354052;background-color:#fff;border-color:#fff}.btn-outline-white.active:focus,.btn-outline-white.dropdown-toggle.show:focus,.btn-outline-white:active:focus{box-shadow:0 0 0 .2rem rgba(255,255,255,.5)}.btn-outline-white.disabled,.btn-outline-white:disabled{color:#fff;background-color:transparent}.btn-gray{color:#fff;background-color:#a8aeb7;border-color:#a8aeb7}.btn-gray:hover{color:#fff;background-color:#939ba6;border-color:#8c94a0}.btn-gray.focus,.btn-gray:focus{color:#fff;background-color:#939ba6;border-color:#8c94a0;box-shadow:0 0 0 .2rem rgba(181,186,194,.5)}.btn-gray.active,.btn-gray:active,.show>.btn-gray.dropdown-toggle{color:#fff;background-color:#8c94a0;border-color:#858e9a}.btn-gray.active:focus,.btn-gray:active:focus,.show>.btn-gray.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(181,186,194,.5)}.btn-gray.disabled,.btn-gray:disabled{color:#fff;background-color:#a8aeb7;border-color:#a8aeb7}.btn-outline-gray{color:#a8aeb7;border-color:#a8aeb7}.btn-outline-gray:hover{color:#a8aeb7;background-color:#a8aeb7;border-color:#a8aeb7}.btn-outline-gray.focus,.btn-outline-gray:focus{box-shadow:0 0 0 .2rem rgba(168,174,183,.5)}.btn-outline-gray.active,.btn-outline-gray.dropdown-toggle.show,.btn-outline-gray:active{color:#fff;background-color:#a8aeb7;border-color:#a8aeb7}.btn-outline-gray.active:focus,.btn-outline-gray.dropdown-toggle.show:focus,.btn-outline-gray:active:focus{box-shadow:0 0 0 .2rem rgba(168,174,183,.5)}.btn-outline-gray.disabled,.btn-outline-gray:disabled{color:#a8aeb7;background-color:transparent}.btn-gray-dark{color:#fff;background-color:#545d6d;border-color:#545d6d}.btn-gray-dark:hover{color:#fff;background-color:#434b57;border-color:#3e4450}.btn-gray-dark.focus,.btn-gray-dark:focus{color:#fff;background-color:#434b57;border-color:#3e4450;box-shadow:0 0 0 .2rem rgba(110,117,131,.5)}.btn-gray-dark.active,.btn-gray-dark:active,.show>.btn-gray-dark.dropdown-toggle{color:#fff;background-color:#3e4450;border-color:#383e49}.btn-gray-dark.active:focus,.btn-gray-dark:active:focus,.show>.btn-gray-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(110,117,131,.5)}.btn-gray-dark.disabled,.btn-gray-dark:disabled{color:#fff;background-color:#545d6d;border-color:#545d6d}.btn-outline-gray-dark{color:#545d6d;border-color:#545d6d}.btn-outline-gray-dark:hover{color:#545d6d;background-color:#545d6d;border-color:#545d6d}.btn-outline-gray-dark.focus,.btn-outline-gray-dark:focus{box-shadow:0 0 0 .2rem rgba(84,93,109,.5)}.btn-outline-gray-dark.active,.btn-outline-gray-dark.dropdown-toggle.show,.btn-outline-gray-dark:active{color:#fff;background-color:#545d6d;border-color:#545d6d}.btn-outline-gray-dark.active:focus,.btn-outline-gray-dark.dropdown-toggle.show:focus,.btn-outline-gray-dark:active:focus{box-shadow:0 0 0 .2rem rgba(84,93,109,.5)}.btn-outline-gray-dark.disabled,.btn-outline-gray-dark:disabled{color:#545d6d;background-color:transparent}.btn-dark{color:#fff;background-color:#354052;border-color:#354052}.btn-dark:hover{color:#fff;background-color:#262e3b;border-color:#212833}.btn-dark.focus,.btn-dark:focus{color:#fff;background-color:#262e3b;border-color:#212833;box-shadow:0 0 0 .2rem rgba(83,93,108,.5)}.btn-dark.active,.btn-dark:active,.show>.btn-dark.dropdown-toggle{color:#fff;background-color:#212833;border-color:#1c222b}.btn-dark.active:focus,.btn-dark:active:focus,.show>.btn-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(83,93,108,.5)}.btn-dark.disabled,.btn-dark:disabled{color:#fff;background-color:#354052;border-color:#354052}.btn-outline-dark{color:#354052;border-color:#354052}.btn-outline-dark:hover{color:#354052;background-color:#354052;border-color:#354052}.btn-outline-dark.focus,.btn-outline-dark:focus{box-shadow:0 0 0 .2rem rgba(53,64,82,.5)}.btn-outline-dark.active,.btn-outline-dark.dropdown-toggle.show,.btn-outline-dark:active{color:#fff;background-color:#354052;border-color:#354052}.btn-outline-dark.active:focus,.btn-outline-dark.dropdown-toggle.show:focus,.btn-outline-dark:active:focus{box-shadow:0 0 0 .2rem rgba(53,64,82,.5)}.btn-outline-dark.disabled,.btn-outline-dark:disabled{color:#354052;background-color:transparent}
 /*# sourceMappingURL=tabler-buttons.min.css.map */
\ No newline at end of file
diff --git a/dist/css/tabler-buttons.min.css.map b/dist/css/tabler-buttons.min.css.map
index d3e9217cf..7bda26f4a 100644
Binary files a/dist/css/tabler-buttons.min.css.map and b/dist/css/tabler-buttons.min.css.map differ
diff --git a/dist/css/tabler-flags.css b/dist/css/tabler-flags.css
index 33653aec6..ceebd352d 100644
--- a/dist/css/tabler-flags.css
+++ b/dist/css/tabler-flags.css
@@ -1,5 +1,5 @@
 /*!
- * Tabler (v1.0.0-alpha.4)
+ * Tabler (v1.0.0-alpha.5)
  * Copyright 2018-2020 The Tabler Authors
  * Copyright 2018-2020 codecalm
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
@@ -16,7 +16,7 @@ Dark mode
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 3px; }
 
 .flag-country-ad {
diff --git a/dist/css/tabler-flags.css.map b/dist/css/tabler-flags.css.map
index 2f9c4f242..de438f2aa 100644
Binary files a/dist/css/tabler-flags.css.map and b/dist/css/tabler-flags.css.map differ
diff --git a/dist/css/tabler-flags.min.css b/dist/css/tabler-flags.min.css
index 78dc6141a..309f9f1cf 100644
--- a/dist/css/tabler-flags.min.css
+++ b/dist/css/tabler-flags.min.css
@@ -1,7 +1,7 @@
 /*!
- * Tabler (v1.0.0-alpha.4)
+ * Tabler (v1.0.0-alpha.5)
  * Copyright 2018-2020 The Tabler Authors
  * Copyright 2018-2020 codecalm
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */.flag{position:relative;display:inline-block;width:1.33333em;height:1em;vertical-align:-3px;background-repeat:no-repeat;background-position:center;background-size:cover;border:1px solid rgba(134,140,151,.24);border-radius:3px}.flag-country-ad{background-image:url(../img/flags/ad.svg)}.flag-country-ae{background-image:url(../img/flags/ae.svg)}.flag-country-af{background-image:url(../img/flags/af.svg)}.flag-country-ag{background-image:url(../img/flags/ag.svg)}.flag-country-ai{background-image:url(../img/flags/ai.svg)}.flag-country-al{background-image:url(../img/flags/al.svg)}.flag-country-am{background-image:url(../img/flags/am.svg)}.flag-country-ao{background-image:url(../img/flags/ao.svg)}.flag-country-aq{background-image:url(../img/flags/aq.svg)}.flag-country-ar{background-image:url(../img/flags/ar.svg)}.flag-country-as{background-image:url(../img/flags/as.svg)}.flag-country-at{background-image:url(../img/flags/at.svg)}.flag-country-au{background-image:url(../img/flags/au.svg)}.flag-country-aw{background-image:url(../img/flags/aw.svg)}.flag-country-ax{background-image:url(../img/flags/ax.svg)}.flag-country-az{background-image:url(../img/flags/az.svg)}.flag-country-ba{background-image:url(../img/flags/ba.svg)}.flag-country-bb{background-image:url(../img/flags/bb.svg)}.flag-country-bd{background-image:url(../img/flags/bd.svg)}.flag-country-be{background-image:url(../img/flags/be.svg)}.flag-country-bf{background-image:url(../img/flags/bf.svg)}.flag-country-bg{background-image:url(../img/flags/bg.svg)}.flag-country-bh{background-image:url(../img/flags/bh.svg)}.flag-country-bi{background-image:url(../img/flags/bi.svg)}.flag-country-bj{background-image:url(../img/flags/bj.svg)}.flag-country-bl{background-image:url(../img/flags/bl.svg)}.flag-country-bm{background-image:url(../img/flags/bm.svg)}.flag-country-bn{background-image:url(../img/flags/bn.svg)}.flag-country-bo{background-image:url(../img/flags/bo.svg)}.flag-country-bq{background-image:url(../img/flags/bq.svg)}.flag-country-br{background-image:url(../img/flags/br.svg)}.flag-country-bs{background-image:url(../img/flags/bs.svg)}.flag-country-bt{background-image:url(../img/flags/bt.svg)}.flag-country-bv{background-image:url(../img/flags/bv.svg)}.flag-country-bw{background-image:url(../img/flags/bw.svg)}.flag-country-by{background-image:url(../img/flags/by.svg)}.flag-country-bz{background-image:url(../img/flags/bz.svg)}.flag-country-ca{background-image:url(../img/flags/ca.svg)}.flag-country-cc{background-image:url(../img/flags/cc.svg)}.flag-country-cd{background-image:url(../img/flags/cd.svg)}.flag-country-cf{background-image:url(../img/flags/cf.svg)}.flag-country-cg{background-image:url(../img/flags/cg.svg)}.flag-country-ch{background-image:url(../img/flags/ch.svg)}.flag-country-ci{background-image:url(../img/flags/ci.svg)}.flag-country-ck{background-image:url(../img/flags/ck.svg)}.flag-country-cl{background-image:url(../img/flags/cl.svg)}.flag-country-cm{background-image:url(../img/flags/cm.svg)}.flag-country-cn{background-image:url(../img/flags/cn.svg)}.flag-country-co{background-image:url(../img/flags/co.svg)}.flag-country-cr{background-image:url(../img/flags/cr.svg)}.flag-country-cu{background-image:url(../img/flags/cu.svg)}.flag-country-cv{background-image:url(../img/flags/cv.svg)}.flag-country-cw{background-image:url(../img/flags/cw.svg)}.flag-country-cx{background-image:url(../img/flags/cx.svg)}.flag-country-cy{background-image:url(../img/flags/cy.svg)}.flag-country-cz{background-image:url(../img/flags/cz.svg)}.flag-country-de{background-image:url(../img/flags/de.svg)}.flag-country-dj{background-image:url(../img/flags/dj.svg)}.flag-country-dk{background-image:url(../img/flags/dk.svg)}.flag-country-dm{background-image:url(../img/flags/dm.svg)}.flag-country-do{background-image:url(../img/flags/do.svg)}.flag-country-dz{background-image:url(../img/flags/dz.svg)}.flag-country-ec{background-image:url(../img/flags/ec.svg)}.flag-country-ee{background-image:url(../img/flags/ee.svg)}.flag-country-eg{background-image:url(../img/flags/eg.svg)}.flag-country-eh{background-image:url(../img/flags/eh.svg)}.flag-country-er{background-image:url(../img/flags/er.svg)}.flag-country-es{background-image:url(../img/flags/es.svg)}.flag-country-et{background-image:url(../img/flags/et.svg)}.flag-country-fi{background-image:url(../img/flags/fi.svg)}.flag-country-fj{background-image:url(../img/flags/fj.svg)}.flag-country-fk{background-image:url(../img/flags/fk.svg)}.flag-country-fm{background-image:url(../img/flags/fm.svg)}.flag-country-fo{background-image:url(../img/flags/fo.svg)}.flag-country-fr{background-image:url(../img/flags/fr.svg)}.flag-country-ga{background-image:url(../img/flags/ga.svg)}.flag-country-gb{background-image:url(../img/flags/gb.svg)}.flag-country-gd{background-image:url(../img/flags/gd.svg)}.flag-country-ge{background-image:url(../img/flags/ge.svg)}.flag-country-gf{background-image:url(../img/flags/gf.svg)}.flag-country-gg{background-image:url(../img/flags/gg.svg)}.flag-country-gh{background-image:url(../img/flags/gh.svg)}.flag-country-gi{background-image:url(../img/flags/gi.svg)}.flag-country-gl{background-image:url(../img/flags/gl.svg)}.flag-country-gm{background-image:url(../img/flags/gm.svg)}.flag-country-gn{background-image:url(../img/flags/gn.svg)}.flag-country-gp{background-image:url(../img/flags/gp.svg)}.flag-country-gq{background-image:url(../img/flags/gq.svg)}.flag-country-gr{background-image:url(../img/flags/gr.svg)}.flag-country-gs{background-image:url(../img/flags/gs.svg)}.flag-country-gt{background-image:url(../img/flags/gt.svg)}.flag-country-gu{background-image:url(../img/flags/gu.svg)}.flag-country-gw{background-image:url(../img/flags/gw.svg)}.flag-country-gy{background-image:url(../img/flags/gy.svg)}.flag-country-hk{background-image:url(../img/flags/hk.svg)}.flag-country-hm{background-image:url(../img/flags/hm.svg)}.flag-country-hn{background-image:url(../img/flags/hn.svg)}.flag-country-hr{background-image:url(../img/flags/hr.svg)}.flag-country-ht{background-image:url(../img/flags/ht.svg)}.flag-country-hu{background-image:url(../img/flags/hu.svg)}.flag-country-id{background-image:url(../img/flags/id.svg)}.flag-country-ie{background-image:url(../img/flags/ie.svg)}.flag-country-il{background-image:url(../img/flags/il.svg)}.flag-country-im{background-image:url(../img/flags/im.svg)}.flag-country-in{background-image:url(../img/flags/in.svg)}.flag-country-io{background-image:url(../img/flags/io.svg)}.flag-country-iq{background-image:url(../img/flags/iq.svg)}.flag-country-ir{background-image:url(../img/flags/ir.svg)}.flag-country-is{background-image:url(../img/flags/is.svg)}.flag-country-it{background-image:url(../img/flags/it.svg)}.flag-country-je{background-image:url(../img/flags/je.svg)}.flag-country-jm{background-image:url(../img/flags/jm.svg)}.flag-country-jo{background-image:url(../img/flags/jo.svg)}.flag-country-jp{background-image:url(../img/flags/jp.svg)}.flag-country-ke{background-image:url(../img/flags/ke.svg)}.flag-country-kg{background-image:url(../img/flags/kg.svg)}.flag-country-kh{background-image:url(../img/flags/kh.svg)}.flag-country-ki{background-image:url(../img/flags/ki.svg)}.flag-country-km{background-image:url(../img/flags/km.svg)}.flag-country-kn{background-image:url(../img/flags/kn.svg)}.flag-country-kp{background-image:url(../img/flags/kp.svg)}.flag-country-kr{background-image:url(../img/flags/kr.svg)}.flag-country-kw{background-image:url(../img/flags/kw.svg)}.flag-country-ky{background-image:url(../img/flags/ky.svg)}.flag-country-kz{background-image:url(../img/flags/kz.svg)}.flag-country-la{background-image:url(../img/flags/la.svg)}.flag-country-lb{background-image:url(../img/flags/lb.svg)}.flag-country-lc{background-image:url(../img/flags/lc.svg)}.flag-country-li{background-image:url(../img/flags/li.svg)}.flag-country-lk{background-image:url(../img/flags/lk.svg)}.flag-country-lr{background-image:url(../img/flags/lr.svg)}.flag-country-ls{background-image:url(../img/flags/ls.svg)}.flag-country-lt{background-image:url(../img/flags/lt.svg)}.flag-country-lu{background-image:url(../img/flags/lu.svg)}.flag-country-lv{background-image:url(../img/flags/lv.svg)}.flag-country-ly{background-image:url(../img/flags/ly.svg)}.flag-country-ma{background-image:url(../img/flags/ma.svg)}.flag-country-mc{background-image:url(../img/flags/mc.svg)}.flag-country-md{background-image:url(../img/flags/md.svg)}.flag-country-me{background-image:url(../img/flags/me.svg)}.flag-country-mf{background-image:url(../img/flags/mf.svg)}.flag-country-mg{background-image:url(../img/flags/mg.svg)}.flag-country-mh{background-image:url(../img/flags/mh.svg)}.flag-country-mk{background-image:url(../img/flags/mk.svg)}.flag-country-ml{background-image:url(../img/flags/ml.svg)}.flag-country-mm{background-image:url(../img/flags/mm.svg)}.flag-country-mn{background-image:url(../img/flags/mn.svg)}.flag-country-mo{background-image:url(../img/flags/mo.svg)}.flag-country-mp{background-image:url(../img/flags/mp.svg)}.flag-country-mq{background-image:url(../img/flags/mq.svg)}.flag-country-mr{background-image:url(../img/flags/mr.svg)}.flag-country-ms{background-image:url(../img/flags/ms.svg)}.flag-country-mt{background-image:url(../img/flags/mt.svg)}.flag-country-mu{background-image:url(../img/flags/mu.svg)}.flag-country-mv{background-image:url(../img/flags/mv.svg)}.flag-country-mw{background-image:url(../img/flags/mw.svg)}.flag-country-mx{background-image:url(../img/flags/mx.svg)}.flag-country-my{background-image:url(../img/flags/my.svg)}.flag-country-mz{background-image:url(../img/flags/mz.svg)}.flag-country-na{background-image:url(../img/flags/na.svg)}.flag-country-nc{background-image:url(../img/flags/nc.svg)}.flag-country-ne{background-image:url(../img/flags/ne.svg)}.flag-country-nf{background-image:url(../img/flags/nf.svg)}.flag-country-ng{background-image:url(../img/flags/ng.svg)}.flag-country-ni{background-image:url(../img/flags/ni.svg)}.flag-country-nl{background-image:url(../img/flags/nl.svg)}.flag-country-no{background-image:url(../img/flags/no.svg)}.flag-country-np{background-image:url(../img/flags/np.svg)}.flag-country-nr{background-image:url(../img/flags/nr.svg)}.flag-country-nu{background-image:url(../img/flags/nu.svg)}.flag-country-nz{background-image:url(../img/flags/nz.svg)}.flag-country-om{background-image:url(../img/flags/om.svg)}.flag-country-pa{background-image:url(../img/flags/pa.svg)}.flag-country-pe{background-image:url(../img/flags/pe.svg)}.flag-country-pf{background-image:url(../img/flags/pf.svg)}.flag-country-pg{background-image:url(../img/flags/pg.svg)}.flag-country-ph{background-image:url(../img/flags/ph.svg)}.flag-country-pk{background-image:url(../img/flags/pk.svg)}.flag-country-pl{background-image:url(../img/flags/pl.svg)}.flag-country-pm{background-image:url(../img/flags/pm.svg)}.flag-country-pn{background-image:url(../img/flags/pn.svg)}.flag-country-pr{background-image:url(../img/flags/pr.svg)}.flag-country-ps{background-image:url(../img/flags/ps.svg)}.flag-country-pt{background-image:url(../img/flags/pt.svg)}.flag-country-pw{background-image:url(../img/flags/pw.svg)}.flag-country-py{background-image:url(../img/flags/py.svg)}.flag-country-qa{background-image:url(../img/flags/qa.svg)}.flag-country-re{background-image:url(../img/flags/re.svg)}.flag-country-ro{background-image:url(../img/flags/ro.svg)}.flag-country-rs{background-image:url(../img/flags/rs.svg)}.flag-country-ru{background-image:url(../img/flags/ru.svg)}.flag-country-rw{background-image:url(../img/flags/rw.svg)}.flag-country-sa{background-image:url(../img/flags/sa.svg)}.flag-country-sb{background-image:url(../img/flags/sb.svg)}.flag-country-sc{background-image:url(../img/flags/sc.svg)}.flag-country-sd{background-image:url(../img/flags/sd.svg)}.flag-country-se{background-image:url(../img/flags/se.svg)}.flag-country-sg{background-image:url(../img/flags/sg.svg)}.flag-country-sh{background-image:url(../img/flags/sh.svg)}.flag-country-si{background-image:url(../img/flags/si.svg)}.flag-country-sj{background-image:url(../img/flags/sj.svg)}.flag-country-sk{background-image:url(../img/flags/sk.svg)}.flag-country-sl{background-image:url(../img/flags/sl.svg)}.flag-country-sm{background-image:url(../img/flags/sm.svg)}.flag-country-sn{background-image:url(../img/flags/sn.svg)}.flag-country-so{background-image:url(../img/flags/so.svg)}.flag-country-sr{background-image:url(../img/flags/sr.svg)}.flag-country-ss{background-image:url(../img/flags/ss.svg)}.flag-country-st{background-image:url(../img/flags/st.svg)}.flag-country-sv{background-image:url(../img/flags/sv.svg)}.flag-country-sx{background-image:url(../img/flags/sx.svg)}.flag-country-sy{background-image:url(../img/flags/sy.svg)}.flag-country-sz{background-image:url(../img/flags/sz.svg)}.flag-country-tc{background-image:url(../img/flags/tc.svg)}.flag-country-td{background-image:url(../img/flags/td.svg)}.flag-country-tf{background-image:url(../img/flags/tf.svg)}.flag-country-tg{background-image:url(../img/flags/tg.svg)}.flag-country-th{background-image:url(../img/flags/th.svg)}.flag-country-tj{background-image:url(../img/flags/tj.svg)}.flag-country-tk{background-image:url(../img/flags/tk.svg)}.flag-country-tl{background-image:url(../img/flags/tl.svg)}.flag-country-tm{background-image:url(../img/flags/tm.svg)}.flag-country-tn{background-image:url(../img/flags/tn.svg)}.flag-country-to{background-image:url(../img/flags/to.svg)}.flag-country-tr{background-image:url(../img/flags/tr.svg)}.flag-country-tt{background-image:url(../img/flags/tt.svg)}.flag-country-tv{background-image:url(../img/flags/tv.svg)}.flag-country-tw{background-image:url(../img/flags/tw.svg)}.flag-country-tz{background-image:url(../img/flags/tz.svg)}.flag-country-ua{background-image:url(../img/flags/ua.svg)}.flag-country-ug{background-image:url(../img/flags/ug.svg)}.flag-country-um{background-image:url(../img/flags/um.svg)}.flag-country-us{background-image:url(../img/flags/us.svg)}.flag-country-uy{background-image:url(../img/flags/uy.svg)}.flag-country-uz{background-image:url(../img/flags/uz.svg)}.flag-country-va{background-image:url(../img/flags/va.svg)}.flag-country-vc{background-image:url(../img/flags/vc.svg)}.flag-country-ve{background-image:url(../img/flags/ve.svg)}.flag-country-vg{background-image:url(../img/flags/vg.svg)}.flag-country-vi{background-image:url(../img/flags/vi.svg)}.flag-country-vn{background-image:url(../img/flags/vn.svg)}.flag-country-vu{background-image:url(../img/flags/vu.svg)}.flag-country-wf{background-image:url(../img/flags/wf.svg)}.flag-country-ws{background-image:url(../img/flags/ws.svg)}.flag-country-ye{background-image:url(../img/flags/ye.svg)}.flag-country-yt{background-image:url(../img/flags/yt.svg)}.flag-country-za{background-image:url(../img/flags/za.svg)}.flag-country-zm{background-image:url(../img/flags/zm.svg)}.flag-country-zw{background-image:url(../img/flags/zw.svg)}.flag-country-es-ct{background-image:url(../img/flags/es-ct.svg)}.flag-country-eu{background-image:url(../img/flags/eu.svg)}.flag-country-gb-eng{background-image:url(../img/flags/gb-eng.svg)}.flag-country-gb-nir{background-image:url(../img/flags/gb-nir.svg)}.flag-country-gb-sct{background-image:url(../img/flags/gb-sct.svg)}.flag-country-gb-wls{background-image:url(../img/flags/gb-wls.svg)}.flag-country-un{background-image:url(../img/flags/un.svg)}.flag-md{width:2.66666rem;height:2rem}.flag-lg{width:3.99999rem;height:3rem}.flag-xl{width:5.33332rem;height:4rem}
+ */.flag{position:relative;display:inline-block;width:1.33333em;height:1em;vertical-align:-3px;background-repeat:no-repeat;background-position:center;background-size:cover;border:1px solid rgba(110,117,130,.2);border-radius:3px}.flag-country-ad{background-image:url(../img/flags/ad.svg)}.flag-country-ae{background-image:url(../img/flags/ae.svg)}.flag-country-af{background-image:url(../img/flags/af.svg)}.flag-country-ag{background-image:url(../img/flags/ag.svg)}.flag-country-ai{background-image:url(../img/flags/ai.svg)}.flag-country-al{background-image:url(../img/flags/al.svg)}.flag-country-am{background-image:url(../img/flags/am.svg)}.flag-country-ao{background-image:url(../img/flags/ao.svg)}.flag-country-aq{background-image:url(../img/flags/aq.svg)}.flag-country-ar{background-image:url(../img/flags/ar.svg)}.flag-country-as{background-image:url(../img/flags/as.svg)}.flag-country-at{background-image:url(../img/flags/at.svg)}.flag-country-au{background-image:url(../img/flags/au.svg)}.flag-country-aw{background-image:url(../img/flags/aw.svg)}.flag-country-ax{background-image:url(../img/flags/ax.svg)}.flag-country-az{background-image:url(../img/flags/az.svg)}.flag-country-ba{background-image:url(../img/flags/ba.svg)}.flag-country-bb{background-image:url(../img/flags/bb.svg)}.flag-country-bd{background-image:url(../img/flags/bd.svg)}.flag-country-be{background-image:url(../img/flags/be.svg)}.flag-country-bf{background-image:url(../img/flags/bf.svg)}.flag-country-bg{background-image:url(../img/flags/bg.svg)}.flag-country-bh{background-image:url(../img/flags/bh.svg)}.flag-country-bi{background-image:url(../img/flags/bi.svg)}.flag-country-bj{background-image:url(../img/flags/bj.svg)}.flag-country-bl{background-image:url(../img/flags/bl.svg)}.flag-country-bm{background-image:url(../img/flags/bm.svg)}.flag-country-bn{background-image:url(../img/flags/bn.svg)}.flag-country-bo{background-image:url(../img/flags/bo.svg)}.flag-country-bq{background-image:url(../img/flags/bq.svg)}.flag-country-br{background-image:url(../img/flags/br.svg)}.flag-country-bs{background-image:url(../img/flags/bs.svg)}.flag-country-bt{background-image:url(../img/flags/bt.svg)}.flag-country-bv{background-image:url(../img/flags/bv.svg)}.flag-country-bw{background-image:url(../img/flags/bw.svg)}.flag-country-by{background-image:url(../img/flags/by.svg)}.flag-country-bz{background-image:url(../img/flags/bz.svg)}.flag-country-ca{background-image:url(../img/flags/ca.svg)}.flag-country-cc{background-image:url(../img/flags/cc.svg)}.flag-country-cd{background-image:url(../img/flags/cd.svg)}.flag-country-cf{background-image:url(../img/flags/cf.svg)}.flag-country-cg{background-image:url(../img/flags/cg.svg)}.flag-country-ch{background-image:url(../img/flags/ch.svg)}.flag-country-ci{background-image:url(../img/flags/ci.svg)}.flag-country-ck{background-image:url(../img/flags/ck.svg)}.flag-country-cl{background-image:url(../img/flags/cl.svg)}.flag-country-cm{background-image:url(../img/flags/cm.svg)}.flag-country-cn{background-image:url(../img/flags/cn.svg)}.flag-country-co{background-image:url(../img/flags/co.svg)}.flag-country-cr{background-image:url(../img/flags/cr.svg)}.flag-country-cu{background-image:url(../img/flags/cu.svg)}.flag-country-cv{background-image:url(../img/flags/cv.svg)}.flag-country-cw{background-image:url(../img/flags/cw.svg)}.flag-country-cx{background-image:url(../img/flags/cx.svg)}.flag-country-cy{background-image:url(../img/flags/cy.svg)}.flag-country-cz{background-image:url(../img/flags/cz.svg)}.flag-country-de{background-image:url(../img/flags/de.svg)}.flag-country-dj{background-image:url(../img/flags/dj.svg)}.flag-country-dk{background-image:url(../img/flags/dk.svg)}.flag-country-dm{background-image:url(../img/flags/dm.svg)}.flag-country-do{background-image:url(../img/flags/do.svg)}.flag-country-dz{background-image:url(../img/flags/dz.svg)}.flag-country-ec{background-image:url(../img/flags/ec.svg)}.flag-country-ee{background-image:url(../img/flags/ee.svg)}.flag-country-eg{background-image:url(../img/flags/eg.svg)}.flag-country-eh{background-image:url(../img/flags/eh.svg)}.flag-country-er{background-image:url(../img/flags/er.svg)}.flag-country-es{background-image:url(../img/flags/es.svg)}.flag-country-et{background-image:url(../img/flags/et.svg)}.flag-country-fi{background-image:url(../img/flags/fi.svg)}.flag-country-fj{background-image:url(../img/flags/fj.svg)}.flag-country-fk{background-image:url(../img/flags/fk.svg)}.flag-country-fm{background-image:url(../img/flags/fm.svg)}.flag-country-fo{background-image:url(../img/flags/fo.svg)}.flag-country-fr{background-image:url(../img/flags/fr.svg)}.flag-country-ga{background-image:url(../img/flags/ga.svg)}.flag-country-gb{background-image:url(../img/flags/gb.svg)}.flag-country-gd{background-image:url(../img/flags/gd.svg)}.flag-country-ge{background-image:url(../img/flags/ge.svg)}.flag-country-gf{background-image:url(../img/flags/gf.svg)}.flag-country-gg{background-image:url(../img/flags/gg.svg)}.flag-country-gh{background-image:url(../img/flags/gh.svg)}.flag-country-gi{background-image:url(../img/flags/gi.svg)}.flag-country-gl{background-image:url(../img/flags/gl.svg)}.flag-country-gm{background-image:url(../img/flags/gm.svg)}.flag-country-gn{background-image:url(../img/flags/gn.svg)}.flag-country-gp{background-image:url(../img/flags/gp.svg)}.flag-country-gq{background-image:url(../img/flags/gq.svg)}.flag-country-gr{background-image:url(../img/flags/gr.svg)}.flag-country-gs{background-image:url(../img/flags/gs.svg)}.flag-country-gt{background-image:url(../img/flags/gt.svg)}.flag-country-gu{background-image:url(../img/flags/gu.svg)}.flag-country-gw{background-image:url(../img/flags/gw.svg)}.flag-country-gy{background-image:url(../img/flags/gy.svg)}.flag-country-hk{background-image:url(../img/flags/hk.svg)}.flag-country-hm{background-image:url(../img/flags/hm.svg)}.flag-country-hn{background-image:url(../img/flags/hn.svg)}.flag-country-hr{background-image:url(../img/flags/hr.svg)}.flag-country-ht{background-image:url(../img/flags/ht.svg)}.flag-country-hu{background-image:url(../img/flags/hu.svg)}.flag-country-id{background-image:url(../img/flags/id.svg)}.flag-country-ie{background-image:url(../img/flags/ie.svg)}.flag-country-il{background-image:url(../img/flags/il.svg)}.flag-country-im{background-image:url(../img/flags/im.svg)}.flag-country-in{background-image:url(../img/flags/in.svg)}.flag-country-io{background-image:url(../img/flags/io.svg)}.flag-country-iq{background-image:url(../img/flags/iq.svg)}.flag-country-ir{background-image:url(../img/flags/ir.svg)}.flag-country-is{background-image:url(../img/flags/is.svg)}.flag-country-it{background-image:url(../img/flags/it.svg)}.flag-country-je{background-image:url(../img/flags/je.svg)}.flag-country-jm{background-image:url(../img/flags/jm.svg)}.flag-country-jo{background-image:url(../img/flags/jo.svg)}.flag-country-jp{background-image:url(../img/flags/jp.svg)}.flag-country-ke{background-image:url(../img/flags/ke.svg)}.flag-country-kg{background-image:url(../img/flags/kg.svg)}.flag-country-kh{background-image:url(../img/flags/kh.svg)}.flag-country-ki{background-image:url(../img/flags/ki.svg)}.flag-country-km{background-image:url(../img/flags/km.svg)}.flag-country-kn{background-image:url(../img/flags/kn.svg)}.flag-country-kp{background-image:url(../img/flags/kp.svg)}.flag-country-kr{background-image:url(../img/flags/kr.svg)}.flag-country-kw{background-image:url(../img/flags/kw.svg)}.flag-country-ky{background-image:url(../img/flags/ky.svg)}.flag-country-kz{background-image:url(../img/flags/kz.svg)}.flag-country-la{background-image:url(../img/flags/la.svg)}.flag-country-lb{background-image:url(../img/flags/lb.svg)}.flag-country-lc{background-image:url(../img/flags/lc.svg)}.flag-country-li{background-image:url(../img/flags/li.svg)}.flag-country-lk{background-image:url(../img/flags/lk.svg)}.flag-country-lr{background-image:url(../img/flags/lr.svg)}.flag-country-ls{background-image:url(../img/flags/ls.svg)}.flag-country-lt{background-image:url(../img/flags/lt.svg)}.flag-country-lu{background-image:url(../img/flags/lu.svg)}.flag-country-lv{background-image:url(../img/flags/lv.svg)}.flag-country-ly{background-image:url(../img/flags/ly.svg)}.flag-country-ma{background-image:url(../img/flags/ma.svg)}.flag-country-mc{background-image:url(../img/flags/mc.svg)}.flag-country-md{background-image:url(../img/flags/md.svg)}.flag-country-me{background-image:url(../img/flags/me.svg)}.flag-country-mf{background-image:url(../img/flags/mf.svg)}.flag-country-mg{background-image:url(../img/flags/mg.svg)}.flag-country-mh{background-image:url(../img/flags/mh.svg)}.flag-country-mk{background-image:url(../img/flags/mk.svg)}.flag-country-ml{background-image:url(../img/flags/ml.svg)}.flag-country-mm{background-image:url(../img/flags/mm.svg)}.flag-country-mn{background-image:url(../img/flags/mn.svg)}.flag-country-mo{background-image:url(../img/flags/mo.svg)}.flag-country-mp{background-image:url(../img/flags/mp.svg)}.flag-country-mq{background-image:url(../img/flags/mq.svg)}.flag-country-mr{background-image:url(../img/flags/mr.svg)}.flag-country-ms{background-image:url(../img/flags/ms.svg)}.flag-country-mt{background-image:url(../img/flags/mt.svg)}.flag-country-mu{background-image:url(../img/flags/mu.svg)}.flag-country-mv{background-image:url(../img/flags/mv.svg)}.flag-country-mw{background-image:url(../img/flags/mw.svg)}.flag-country-mx{background-image:url(../img/flags/mx.svg)}.flag-country-my{background-image:url(../img/flags/my.svg)}.flag-country-mz{background-image:url(../img/flags/mz.svg)}.flag-country-na{background-image:url(../img/flags/na.svg)}.flag-country-nc{background-image:url(../img/flags/nc.svg)}.flag-country-ne{background-image:url(../img/flags/ne.svg)}.flag-country-nf{background-image:url(../img/flags/nf.svg)}.flag-country-ng{background-image:url(../img/flags/ng.svg)}.flag-country-ni{background-image:url(../img/flags/ni.svg)}.flag-country-nl{background-image:url(../img/flags/nl.svg)}.flag-country-no{background-image:url(../img/flags/no.svg)}.flag-country-np{background-image:url(../img/flags/np.svg)}.flag-country-nr{background-image:url(../img/flags/nr.svg)}.flag-country-nu{background-image:url(../img/flags/nu.svg)}.flag-country-nz{background-image:url(../img/flags/nz.svg)}.flag-country-om{background-image:url(../img/flags/om.svg)}.flag-country-pa{background-image:url(../img/flags/pa.svg)}.flag-country-pe{background-image:url(../img/flags/pe.svg)}.flag-country-pf{background-image:url(../img/flags/pf.svg)}.flag-country-pg{background-image:url(../img/flags/pg.svg)}.flag-country-ph{background-image:url(../img/flags/ph.svg)}.flag-country-pk{background-image:url(../img/flags/pk.svg)}.flag-country-pl{background-image:url(../img/flags/pl.svg)}.flag-country-pm{background-image:url(../img/flags/pm.svg)}.flag-country-pn{background-image:url(../img/flags/pn.svg)}.flag-country-pr{background-image:url(../img/flags/pr.svg)}.flag-country-ps{background-image:url(../img/flags/ps.svg)}.flag-country-pt{background-image:url(../img/flags/pt.svg)}.flag-country-pw{background-image:url(../img/flags/pw.svg)}.flag-country-py{background-image:url(../img/flags/py.svg)}.flag-country-qa{background-image:url(../img/flags/qa.svg)}.flag-country-re{background-image:url(../img/flags/re.svg)}.flag-country-ro{background-image:url(../img/flags/ro.svg)}.flag-country-rs{background-image:url(../img/flags/rs.svg)}.flag-country-ru{background-image:url(../img/flags/ru.svg)}.flag-country-rw{background-image:url(../img/flags/rw.svg)}.flag-country-sa{background-image:url(../img/flags/sa.svg)}.flag-country-sb{background-image:url(../img/flags/sb.svg)}.flag-country-sc{background-image:url(../img/flags/sc.svg)}.flag-country-sd{background-image:url(../img/flags/sd.svg)}.flag-country-se{background-image:url(../img/flags/se.svg)}.flag-country-sg{background-image:url(../img/flags/sg.svg)}.flag-country-sh{background-image:url(../img/flags/sh.svg)}.flag-country-si{background-image:url(../img/flags/si.svg)}.flag-country-sj{background-image:url(../img/flags/sj.svg)}.flag-country-sk{background-image:url(../img/flags/sk.svg)}.flag-country-sl{background-image:url(../img/flags/sl.svg)}.flag-country-sm{background-image:url(../img/flags/sm.svg)}.flag-country-sn{background-image:url(../img/flags/sn.svg)}.flag-country-so{background-image:url(../img/flags/so.svg)}.flag-country-sr{background-image:url(../img/flags/sr.svg)}.flag-country-ss{background-image:url(../img/flags/ss.svg)}.flag-country-st{background-image:url(../img/flags/st.svg)}.flag-country-sv{background-image:url(../img/flags/sv.svg)}.flag-country-sx{background-image:url(../img/flags/sx.svg)}.flag-country-sy{background-image:url(../img/flags/sy.svg)}.flag-country-sz{background-image:url(../img/flags/sz.svg)}.flag-country-tc{background-image:url(../img/flags/tc.svg)}.flag-country-td{background-image:url(../img/flags/td.svg)}.flag-country-tf{background-image:url(../img/flags/tf.svg)}.flag-country-tg{background-image:url(../img/flags/tg.svg)}.flag-country-th{background-image:url(../img/flags/th.svg)}.flag-country-tj{background-image:url(../img/flags/tj.svg)}.flag-country-tk{background-image:url(../img/flags/tk.svg)}.flag-country-tl{background-image:url(../img/flags/tl.svg)}.flag-country-tm{background-image:url(../img/flags/tm.svg)}.flag-country-tn{background-image:url(../img/flags/tn.svg)}.flag-country-to{background-image:url(../img/flags/to.svg)}.flag-country-tr{background-image:url(../img/flags/tr.svg)}.flag-country-tt{background-image:url(../img/flags/tt.svg)}.flag-country-tv{background-image:url(../img/flags/tv.svg)}.flag-country-tw{background-image:url(../img/flags/tw.svg)}.flag-country-tz{background-image:url(../img/flags/tz.svg)}.flag-country-ua{background-image:url(../img/flags/ua.svg)}.flag-country-ug{background-image:url(../img/flags/ug.svg)}.flag-country-um{background-image:url(../img/flags/um.svg)}.flag-country-us{background-image:url(../img/flags/us.svg)}.flag-country-uy{background-image:url(../img/flags/uy.svg)}.flag-country-uz{background-image:url(../img/flags/uz.svg)}.flag-country-va{background-image:url(../img/flags/va.svg)}.flag-country-vc{background-image:url(../img/flags/vc.svg)}.flag-country-ve{background-image:url(../img/flags/ve.svg)}.flag-country-vg{background-image:url(../img/flags/vg.svg)}.flag-country-vi{background-image:url(../img/flags/vi.svg)}.flag-country-vn{background-image:url(../img/flags/vn.svg)}.flag-country-vu{background-image:url(../img/flags/vu.svg)}.flag-country-wf{background-image:url(../img/flags/wf.svg)}.flag-country-ws{background-image:url(../img/flags/ws.svg)}.flag-country-ye{background-image:url(../img/flags/ye.svg)}.flag-country-yt{background-image:url(../img/flags/yt.svg)}.flag-country-za{background-image:url(../img/flags/za.svg)}.flag-country-zm{background-image:url(../img/flags/zm.svg)}.flag-country-zw{background-image:url(../img/flags/zw.svg)}.flag-country-es-ct{background-image:url(../img/flags/es-ct.svg)}.flag-country-eu{background-image:url(../img/flags/eu.svg)}.flag-country-gb-eng{background-image:url(../img/flags/gb-eng.svg)}.flag-country-gb-nir{background-image:url(../img/flags/gb-nir.svg)}.flag-country-gb-sct{background-image:url(../img/flags/gb-sct.svg)}.flag-country-gb-wls{background-image:url(../img/flags/gb-wls.svg)}.flag-country-un{background-image:url(../img/flags/un.svg)}.flag-md{width:2.66666rem;height:2rem}.flag-lg{width:3.99999rem;height:3rem}.flag-xl{width:5.33332rem;height:4rem}
 /*# sourceMappingURL=tabler-flags.min.css.map */
\ No newline at end of file
diff --git a/dist/css/tabler-flags.min.css.map b/dist/css/tabler-flags.min.css.map
index 1becb4165..6f8ede118 100644
Binary files a/dist/css/tabler-flags.min.css.map and b/dist/css/tabler-flags.min.css.map differ
diff --git a/dist/css/tabler-payments.css b/dist/css/tabler-payments.css
index c7718f41c..bd6112a94 100644
--- a/dist/css/tabler-payments.css
+++ b/dist/css/tabler-payments.css
@@ -1,5 +1,5 @@
 /*!
- * Tabler (v1.0.0-alpha.4)
+ * Tabler (v1.0.0-alpha.5)
  * Copyright 2018-2020 The Tabler Authors
  * Copyright 2018-2020 codecalm
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
diff --git a/dist/css/tabler-payments.css.map b/dist/css/tabler-payments.css.map
index 8d6a118a5..a02830c87 100644
Binary files a/dist/css/tabler-payments.css.map and b/dist/css/tabler-payments.css.map differ
diff --git a/dist/css/tabler-payments.min.css b/dist/css/tabler-payments.min.css
index 84e02105d..4e5ddaacf 100644
--- a/dist/css/tabler-payments.min.css
+++ b/dist/css/tabler-payments.min.css
@@ -1,5 +1,5 @@
 /*!
- * Tabler (v1.0.0-alpha.4)
+ * Tabler (v1.0.0-alpha.5)
  * Copyright 2018-2020 The Tabler Authors
  * Copyright 2018-2020 codecalm
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
diff --git a/dist/css/tabler-payments.min.css.map b/dist/css/tabler-payments.min.css.map
index 79034fd14..fc4fd4add 100644
Binary files a/dist/css/tabler-payments.min.css.map and b/dist/css/tabler-payments.min.css.map differ
diff --git a/dist/css/tabler.css b/dist/css/tabler.css
index 82366e23d..91f9be3a9 100644
--- a/dist/css/tabler.css
+++ b/dist/css/tabler.css
@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * Tabler (v1.0.0-alpha.4)
+ * Tabler (v1.0.0-alpha.5)
  * Copyright 2018-2020 The Tabler Authors
  * Copyright 2018-2020 codecalm
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
@@ -8,14 +8,14 @@
 /**
 Dark mode
  */
-@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,500,600,700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;600;700&display=swap");
 :root {
   --blue: #206bc4;
   --azure: #45aaf2;
   --indigo: #6574cd;
   --purple: #a55eea;
   --pink: #f66d9b;
-  --red: #fa4654;
+  --red: #cd201f;
   --orange: #ff922b;
   --yellow: #fab005;
   --lime: #94d82d;
@@ -27,14 +27,14 @@ Dark mode
   --gray-dark: #545d6d;
   --dark: #354052;
   --primary: #206bc4;
-  --secondary: #868c97;
+  --secondary: #6e7582;
   --success: #5eba00;
   --info: #45aaf2;
   --warning: #fab005;
-  --danger: #fa4654;
+  --danger: #cd201f;
   --light: #f5f7fb;
   --dark: #354052;
-  --font-family-sans-serif: "Source Sans Pro", -apple-system, blinkmacsystemfont, segoe ui, helvetica, arial, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol;
+  --font-family-sans-serif: "Ubuntu", system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
   --font-family-monospace: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; }
 
 *,
@@ -44,10 +44,10 @@ Dark mode
 
 body {
   margin: 0;
-  font-family: "Source Sans Pro", -apple-system, blinkmacsystemfont, segoe ui, helvetica, arial, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol;
-  font-size: 0.9375rem;
+  font-family: "Ubuntu", system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+  font-size: 0.875rem;
   font-weight: 400;
-  line-height: 1.6;
+  line-height: 1.7142857;
   color: #354052;
   background-color: #f5f7fb;
   -webkit-text-size-adjust: 100%;
@@ -69,14 +69,14 @@ hr:not([size]), .hr:not([size]) {
 h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
   margin-top: 0;
   margin-bottom: 0.5rem;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 1.2; }
 
 h1, .h1 {
-  font-size: calc(1.2875rem + 0.45vw); }
+  font-size: calc(1.3rem + 0.6vw); }
   @media (min-width: 1200px) {
     h1, .h1 {
-      font-size: 1.625rem; } }
+      font-size: 1.75rem; } }
 
 h2, .h2 {
   font-size: calc(1.2625rem + 0.15vw); }
@@ -88,13 +88,13 @@ h3, .h3 {
   font-size: 1.125rem; }
 
 h4, .h4 {
-  font-size: 0.9375rem; }
+  font-size: 0.875rem; }
 
 h5, .h5 {
-  font-size: 0.8125rem; }
+  font-size: 0.75rem; }
 
 h6, .h6 {
-  font-size: 0.6875rem; }
+  font-size: 0.625rem; }
 
 p {
   margin-top: 0;
@@ -131,7 +131,7 @@ ul ol {
   margin-bottom: 0; }
 
 dt {
-  font-weight: 600; }
+  font-weight: 500; }
 
 dd {
   margin-bottom: .5rem;
@@ -186,14 +186,14 @@ pre {
   margin-top: 0;
   margin-bottom: 1rem;
   overflow: auto;
-  font-size: 0.6875rem; }
+  font-size: 0.625rem; }
   pre code {
     font-size: inherit;
     color: inherit;
     word-break: normal; }
 
 code {
-  font-size: 0.6875rem;
+  font-size: 0.625rem;
   color: #206bc4;
   word-wrap: break-word; }
   a > code {
@@ -201,14 +201,14 @@ code {
 
 kbd {
   padding: 0.2rem 0.4rem;
-  font-size: 0.6875rem;
+  font-size: 0.625rem;
   color: #ffffff;
   background-color: #354052;
   border-radius: 0.2rem; }
   kbd kbd {
     padding: 0;
     font-size: 1em;
-    font-weight: 600; }
+    font-weight: 500; }
 
 figure {
   margin: 0 0 1rem; }
@@ -224,7 +224,7 @@ table {
 caption {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  color: #868c97;
+  color: #6e7582;
   text-align: left; }
 
 th {
@@ -350,7 +350,7 @@ progress {
   display: none !important; }
 
 .lead {
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   font-weight: 400; }
 
 .display-1 {
@@ -404,7 +404,7 @@ progress {
 
 .blockquote {
   margin-bottom: 1rem;
-  font-size: 0.9375rem; }
+  font-size: 0.875rem; }
 
 .blockquote-footer {
   display: block;
@@ -438,8 +438,8 @@ progress {
 
 .container {
   width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
   margin-right: auto;
   margin-left: auto; }
   @media (min-width: 33rem) {
@@ -457,8 +457,8 @@ progress {
 
 .container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
   width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
   margin-right: auto;
   margin-left: auto; }
 
@@ -556,83 +556,51 @@ progress {
 
 .g-4,
 .gx-4 {
-  margin-right: -0.625rem;
-  margin-left: -0.625rem; }
+  margin-right: -0.75rem;
+  margin-left: -0.75rem; }
   .g-4 > *,
   .gx-4 > * {
-    padding-right: 0.625rem;
-    padding-left: 0.625rem; }
+    padding-right: 0.75rem;
+    padding-left: 0.75rem; }
 
 .g-4,
 .gy-4 {
-  margin-top: -1.25rem; }
+  margin-top: -1.5rem; }
   .g-4 > *,
   .gy-4 > * {
-    margin-top: 1.25rem; }
+    margin-top: 1.5rem; }
 
 .g-5,
 .gx-5 {
-  margin-right: -1rem;
-  margin-left: -1rem; }
-  .g-5 > *,
-  .gx-5 > * {
-    padding-right: 1rem;
-    padding-left: 1rem; }
-
-.g-5,
-.gy-5 {
-  margin-top: -2rem; }
-  .g-5 > *,
-  .gy-5 > * {
-    margin-top: 2rem; }
-
-.g-6,
-.gx-6 {
   margin-right: -1.5rem;
   margin-left: -1.5rem; }
-  .g-6 > *,
-  .gx-6 > * {
+  .g-5 > *,
+  .gx-5 > * {
     padding-right: 1.5rem;
     padding-left: 1.5rem; }
 
-.g-6,
-.gy-6 {
+.g-5,
+.gy-5 {
   margin-top: -3rem; }
-  .g-6 > *,
-  .gy-6 > * {
+  .g-5 > *,
+  .gy-5 > * {
     margin-top: 3rem; }
 
-.g-7,
-.gx-7 {
-  margin-right: -3rem;
-  margin-left: -3rem; }
-  .g-7 > *,
-  .gx-7 > * {
-    padding-right: 3rem;
-    padding-left: 3rem; }
+.g-6,
+.gx-6 {
+  margin-right: -2.25rem;
+  margin-left: -2.25rem; }
+  .g-6 > *,
+  .gx-6 > * {
+    padding-right: 2.25rem;
+    padding-left: 2.25rem; }
 
-.g-7,
-.gy-7 {
-  margin-top: -6rem; }
-  .g-7 > *,
-  .gy-7 > * {
-    margin-top: 6rem; }
-
-.g-8,
-.gx-8 {
-  margin-right: -4.5rem;
-  margin-left: -4.5rem; }
-  .g-8 > *,
-  .gx-8 > * {
-    padding-right: 4.5rem;
-    padding-left: 4.5rem; }
-
-.g-8,
-.gy-8 {
-  margin-top: -9rem; }
-  .g-8 > *,
-  .gy-8 > * {
-    margin-top: 9rem; }
+.g-6,
+.gy-6 {
+  margin-top: -4.5rem; }
+  .g-6 > *,
+  .gy-6 > * {
+    margin-top: 4.5rem; }
 
 @media (min-width: 33rem) {
   .g-sm-0,
@@ -693,74 +661,46 @@ progress {
       margin-top: 1rem; }
   .g-sm-4,
   .gx-sm-4 {
-    margin-right: -0.625rem;
-    margin-left: -0.625rem; }
+    margin-right: -0.75rem;
+    margin-left: -0.75rem; }
     .g-sm-4 > *,
     .gx-sm-4 > * {
-      padding-right: 0.625rem;
-      padding-left: 0.625rem; }
+      padding-right: 0.75rem;
+      padding-left: 0.75rem; }
   .g-sm-4,
   .gy-sm-4 {
-    margin-top: -1.25rem; }
+    margin-top: -1.5rem; }
     .g-sm-4 > *,
     .gy-sm-4 > * {
-      margin-top: 1.25rem; }
+      margin-top: 1.5rem; }
   .g-sm-5,
   .gx-sm-5 {
-    margin-right: -1rem;
-    margin-left: -1rem; }
-    .g-sm-5 > *,
-    .gx-sm-5 > * {
-      padding-right: 1rem;
-      padding-left: 1rem; }
-  .g-sm-5,
-  .gy-sm-5 {
-    margin-top: -2rem; }
-    .g-sm-5 > *,
-    .gy-sm-5 > * {
-      margin-top: 2rem; }
-  .g-sm-6,
-  .gx-sm-6 {
     margin-right: -1.5rem;
     margin-left: -1.5rem; }
-    .g-sm-6 > *,
-    .gx-sm-6 > * {
+    .g-sm-5 > *,
+    .gx-sm-5 > * {
       padding-right: 1.5rem;
       padding-left: 1.5rem; }
+  .g-sm-5,
+  .gy-sm-5 {
+    margin-top: -3rem; }
+    .g-sm-5 > *,
+    .gy-sm-5 > * {
+      margin-top: 3rem; }
+  .g-sm-6,
+  .gx-sm-6 {
+    margin-right: -2.25rem;
+    margin-left: -2.25rem; }
+    .g-sm-6 > *,
+    .gx-sm-6 > * {
+      padding-right: 2.25rem;
+      padding-left: 2.25rem; }
   .g-sm-6,
   .gy-sm-6 {
-    margin-top: -3rem; }
+    margin-top: -4.5rem; }
     .g-sm-6 > *,
     .gy-sm-6 > * {
-      margin-top: 3rem; }
-  .g-sm-7,
-  .gx-sm-7 {
-    margin-right: -3rem;
-    margin-left: -3rem; }
-    .g-sm-7 > *,
-    .gx-sm-7 > * {
-      padding-right: 3rem;
-      padding-left: 3rem; }
-  .g-sm-7,
-  .gy-sm-7 {
-    margin-top: -6rem; }
-    .g-sm-7 > *,
-    .gy-sm-7 > * {
-      margin-top: 6rem; }
-  .g-sm-8,
-  .gx-sm-8 {
-    margin-right: -4.5rem;
-    margin-left: -4.5rem; }
-    .g-sm-8 > *,
-    .gx-sm-8 > * {
-      padding-right: 4.5rem;
-      padding-left: 4.5rem; }
-  .g-sm-8,
-  .gy-sm-8 {
-    margin-top: -9rem; }
-    .g-sm-8 > *,
-    .gy-sm-8 > * {
-      margin-top: 9rem; } }
+      margin-top: 4.5rem; } }
 
 @media (min-width: 48rem) {
   .g-md-0,
@@ -821,74 +761,46 @@ progress {
       margin-top: 1rem; }
   .g-md-4,
   .gx-md-4 {
-    margin-right: -0.625rem;
-    margin-left: -0.625rem; }
+    margin-right: -0.75rem;
+    margin-left: -0.75rem; }
     .g-md-4 > *,
     .gx-md-4 > * {
-      padding-right: 0.625rem;
-      padding-left: 0.625rem; }
+      padding-right: 0.75rem;
+      padding-left: 0.75rem; }
   .g-md-4,
   .gy-md-4 {
-    margin-top: -1.25rem; }
+    margin-top: -1.5rem; }
     .g-md-4 > *,
     .gy-md-4 > * {
-      margin-top: 1.25rem; }
+      margin-top: 1.5rem; }
   .g-md-5,
   .gx-md-5 {
-    margin-right: -1rem;
-    margin-left: -1rem; }
-    .g-md-5 > *,
-    .gx-md-5 > * {
-      padding-right: 1rem;
-      padding-left: 1rem; }
-  .g-md-5,
-  .gy-md-5 {
-    margin-top: -2rem; }
-    .g-md-5 > *,
-    .gy-md-5 > * {
-      margin-top: 2rem; }
-  .g-md-6,
-  .gx-md-6 {
     margin-right: -1.5rem;
     margin-left: -1.5rem; }
-    .g-md-6 > *,
-    .gx-md-6 > * {
+    .g-md-5 > *,
+    .gx-md-5 > * {
       padding-right: 1.5rem;
       padding-left: 1.5rem; }
+  .g-md-5,
+  .gy-md-5 {
+    margin-top: -3rem; }
+    .g-md-5 > *,
+    .gy-md-5 > * {
+      margin-top: 3rem; }
+  .g-md-6,
+  .gx-md-6 {
+    margin-right: -2.25rem;
+    margin-left: -2.25rem; }
+    .g-md-6 > *,
+    .gx-md-6 > * {
+      padding-right: 2.25rem;
+      padding-left: 2.25rem; }
   .g-md-6,
   .gy-md-6 {
-    margin-top: -3rem; }
+    margin-top: -4.5rem; }
     .g-md-6 > *,
     .gy-md-6 > * {
-      margin-top: 3rem; }
-  .g-md-7,
-  .gx-md-7 {
-    margin-right: -3rem;
-    margin-left: -3rem; }
-    .g-md-7 > *,
-    .gx-md-7 > * {
-      padding-right: 3rem;
-      padding-left: 3rem; }
-  .g-md-7,
-  .gy-md-7 {
-    margin-top: -6rem; }
-    .g-md-7 > *,
-    .gy-md-7 > * {
-      margin-top: 6rem; }
-  .g-md-8,
-  .gx-md-8 {
-    margin-right: -4.5rem;
-    margin-left: -4.5rem; }
-    .g-md-8 > *,
-    .gx-md-8 > * {
-      padding-right: 4.5rem;
-      padding-left: 4.5rem; }
-  .g-md-8,
-  .gy-md-8 {
-    margin-top: -9rem; }
-    .g-md-8 > *,
-    .gy-md-8 > * {
-      margin-top: 9rem; } }
+      margin-top: 4.5rem; } }
 
 @media (min-width: 64rem) {
   .g-lg-0,
@@ -949,74 +861,46 @@ progress {
       margin-top: 1rem; }
   .g-lg-4,
   .gx-lg-4 {
-    margin-right: -0.625rem;
-    margin-left: -0.625rem; }
+    margin-right: -0.75rem;
+    margin-left: -0.75rem; }
     .g-lg-4 > *,
     .gx-lg-4 > * {
-      padding-right: 0.625rem;
-      padding-left: 0.625rem; }
+      padding-right: 0.75rem;
+      padding-left: 0.75rem; }
   .g-lg-4,
   .gy-lg-4 {
-    margin-top: -1.25rem; }
+    margin-top: -1.5rem; }
     .g-lg-4 > *,
     .gy-lg-4 > * {
-      margin-top: 1.25rem; }
+      margin-top: 1.5rem; }
   .g-lg-5,
   .gx-lg-5 {
-    margin-right: -1rem;
-    margin-left: -1rem; }
-    .g-lg-5 > *,
-    .gx-lg-5 > * {
-      padding-right: 1rem;
-      padding-left: 1rem; }
-  .g-lg-5,
-  .gy-lg-5 {
-    margin-top: -2rem; }
-    .g-lg-5 > *,
-    .gy-lg-5 > * {
-      margin-top: 2rem; }
-  .g-lg-6,
-  .gx-lg-6 {
     margin-right: -1.5rem;
     margin-left: -1.5rem; }
-    .g-lg-6 > *,
-    .gx-lg-6 > * {
+    .g-lg-5 > *,
+    .gx-lg-5 > * {
       padding-right: 1.5rem;
       padding-left: 1.5rem; }
+  .g-lg-5,
+  .gy-lg-5 {
+    margin-top: -3rem; }
+    .g-lg-5 > *,
+    .gy-lg-5 > * {
+      margin-top: 3rem; }
+  .g-lg-6,
+  .gx-lg-6 {
+    margin-right: -2.25rem;
+    margin-left: -2.25rem; }
+    .g-lg-6 > *,
+    .gx-lg-6 > * {
+      padding-right: 2.25rem;
+      padding-left: 2.25rem; }
   .g-lg-6,
   .gy-lg-6 {
-    margin-top: -3rem; }
+    margin-top: -4.5rem; }
     .g-lg-6 > *,
     .gy-lg-6 > * {
-      margin-top: 3rem; }
-  .g-lg-7,
-  .gx-lg-7 {
-    margin-right: -3rem;
-    margin-left: -3rem; }
-    .g-lg-7 > *,
-    .gx-lg-7 > * {
-      padding-right: 3rem;
-      padding-left: 3rem; }
-  .g-lg-7,
-  .gy-lg-7 {
-    margin-top: -6rem; }
-    .g-lg-7 > *,
-    .gy-lg-7 > * {
-      margin-top: 6rem; }
-  .g-lg-8,
-  .gx-lg-8 {
-    margin-right: -4.5rem;
-    margin-left: -4.5rem; }
-    .g-lg-8 > *,
-    .gx-lg-8 > * {
-      padding-right: 4.5rem;
-      padding-left: 4.5rem; }
-  .g-lg-8,
-  .gy-lg-8 {
-    margin-top: -9rem; }
-    .g-lg-8 > *,
-    .gy-lg-8 > * {
-      margin-top: 9rem; } }
+      margin-top: 4.5rem; } }
 
 @media (min-width: 75.25rem) {
   .g-xl-0,
@@ -1077,74 +961,46 @@ progress {
       margin-top: 1rem; }
   .g-xl-4,
   .gx-xl-4 {
-    margin-right: -0.625rem;
-    margin-left: -0.625rem; }
+    margin-right: -0.75rem;
+    margin-left: -0.75rem; }
     .g-xl-4 > *,
     .gx-xl-4 > * {
-      padding-right: 0.625rem;
-      padding-left: 0.625rem; }
+      padding-right: 0.75rem;
+      padding-left: 0.75rem; }
   .g-xl-4,
   .gy-xl-4 {
-    margin-top: -1.25rem; }
+    margin-top: -1.5rem; }
     .g-xl-4 > *,
     .gy-xl-4 > * {
-      margin-top: 1.25rem; }
+      margin-top: 1.5rem; }
   .g-xl-5,
   .gx-xl-5 {
-    margin-right: -1rem;
-    margin-left: -1rem; }
-    .g-xl-5 > *,
-    .gx-xl-5 > * {
-      padding-right: 1rem;
-      padding-left: 1rem; }
-  .g-xl-5,
-  .gy-xl-5 {
-    margin-top: -2rem; }
-    .g-xl-5 > *,
-    .gy-xl-5 > * {
-      margin-top: 2rem; }
-  .g-xl-6,
-  .gx-xl-6 {
     margin-right: -1.5rem;
     margin-left: -1.5rem; }
-    .g-xl-6 > *,
-    .gx-xl-6 > * {
+    .g-xl-5 > *,
+    .gx-xl-5 > * {
       padding-right: 1.5rem;
       padding-left: 1.5rem; }
+  .g-xl-5,
+  .gy-xl-5 {
+    margin-top: -3rem; }
+    .g-xl-5 > *,
+    .gy-xl-5 > * {
+      margin-top: 3rem; }
+  .g-xl-6,
+  .gx-xl-6 {
+    margin-right: -2.25rem;
+    margin-left: -2.25rem; }
+    .g-xl-6 > *,
+    .gx-xl-6 > * {
+      padding-right: 2.25rem;
+      padding-left: 2.25rem; }
   .g-xl-6,
   .gy-xl-6 {
-    margin-top: -3rem; }
+    margin-top: -4.5rem; }
     .g-xl-6 > *,
     .gy-xl-6 > * {
-      margin-top: 3rem; }
-  .g-xl-7,
-  .gx-xl-7 {
-    margin-right: -3rem;
-    margin-left: -3rem; }
-    .g-xl-7 > *,
-    .gx-xl-7 > * {
-      padding-right: 3rem;
-      padding-left: 3rem; }
-  .g-xl-7,
-  .gy-xl-7 {
-    margin-top: -6rem; }
-    .g-xl-7 > *,
-    .gy-xl-7 > * {
-      margin-top: 6rem; }
-  .g-xl-8,
-  .gx-xl-8 {
-    margin-right: -4.5rem;
-    margin-left: -4.5rem; }
-    .g-xl-8 > *,
-    .gx-xl-8 > * {
-      padding-right: 4.5rem;
-      padding-left: 4.5rem; }
-  .g-xl-8,
-  .gy-xl-8 {
-    margin-top: -9rem; }
-    .g-xl-8 > *,
-    .gy-xl-8 > * {
-      margin-top: 9rem; } }
+      margin-top: 4.5rem; } }
 
 .col {
   flex: 1 0 0%;
@@ -1628,14 +1484,14 @@ progress {
   .table td,
   .markdown > table td {
     padding: 0.5rem;
-    border-bottom: 1px solid rgba(134, 140, 151, 0.24); }
+    border-bottom: 1px solid rgba(110, 117, 130, 0.2); }
   .table tbody, .markdown > table tbody {
     vertical-align: inherit; }
   .table thead th, .markdown > table thead th {
     vertical-align: bottom;
-    border-bottom-color: rgba(134, 140, 151, 0.24); }
+    border-bottom-color: rgba(110, 117, 130, 0.2); }
   .table tbody + tbody, .markdown > table tbody + tbody {
-    border-top: 2px solid rgba(134, 140, 151, 0.24); }
+    border-top: 2px solid rgba(110, 117, 130, 0.2); }
 
 .caption-top {
   caption-side: top; }
@@ -1645,11 +1501,11 @@ progress {
   padding: 0.25rem; }
 
 .table-bordered, .markdown > table {
-  border: 1px solid rgba(134, 140, 151, 0.24); }
+  border: 1px solid rgba(110, 117, 130, 0.2); }
   .table-bordered th, .markdown > table th,
   .table-bordered td,
   .markdown > table td {
-    border: 1px solid rgba(134, 140, 151, 0.24); }
+    border: 1px solid rgba(110, 117, 130, 0.2); }
   .table-bordered thead th, .markdown > table thead th,
   .table-bordered thead td,
   .markdown > table thead td {
@@ -1688,19 +1544,19 @@ progress {
 .table-secondary,
 .table-secondary > th,
 .table-secondary > td {
-  background-color: #f3f4f5; }
+  background-color: #f1f1f3; }
 
 .table-secondary th,
 .table-secondary td,
 .table-secondary thead th,
 .table-secondary tbody + tbody {
-  border-color: #cfd1d5; }
+  border-color: #c5c8cd; }
 
 .table-hover .table-secondary:hover {
-  background-color: #e5e7e9; }
+  background-color: #e3e3e7; }
   .table-hover .table-secondary:hover > td,
   .table-hover .table-secondary:hover > th {
-    background-color: #e5e7e9; }
+    background-color: #e3e3e7; }
 
 .table-success,
 .table-success > th,
@@ -1756,19 +1612,19 @@ progress {
 .table-danger,
 .table-danger > th,
 .table-danger > td {
-  background-color: #ffedee; }
+  background-color: #fae9e9; }
 
 .table-danger th,
 .table-danger td,
 .table-danger thead th,
 .table-danger tbody + tbody {
-  border-color: #fdb5bb; }
+  border-color: #eba6a5; }
 
 .table-hover .table-danger:hover {
-  background-color: #ffd4d6; }
+  background-color: #f5d4d4; }
   .table-hover .table-danger:hover > td,
   .table-hover .table-danger:hover > th {
-    background-color: #ffd4d6; }
+    background-color: #f5d4d4; }
 
 .table-light,
 .table-light > th,
@@ -1823,7 +1679,7 @@ progress {
 .table .thead-light th, .markdown > table .thead-light th {
   color: #7a828f;
   background-color: #f1f3f8;
-  border-color: rgba(134, 140, 151, 0.24); }
+  border-color: rgba(110, 117, 130, 0.2); }
 
 .table-dark {
   color: #ffffff;
@@ -1902,20 +1758,20 @@ progress {
 .col-form-label-sm {
   padding-top: calc(0.125rem + 1px);
   padding-bottom: calc(0.125rem + 1px);
-  font-size: 0.8125rem; }
+  font-size: 0.75rem; }
 
 .form-control {
   display: block;
   width: 100%;
   min-height: calc(1.4666667em + 0.75rem + 2px);
   padding: 0.375rem 0.75rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.4666667;
   color: #354052;
   background-color: #ffffff;
   background-clip: padding-box;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 3px;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
   @media (prefers-reduced-motion: reduce) {
@@ -1928,19 +1784,19 @@ progress {
     outline: 0;
     box-shadow: 0 0 0 0.2rem rgba(32, 107, 196, 0.25); }
   .form-control::-webkit-input-placeholder {
-    color: #868c97;
+    color: #6e7582;
     opacity: 1; }
   .form-control::-moz-placeholder {
-    color: #868c97;
+    color: #6e7582;
     opacity: 1; }
   .form-control:-ms-input-placeholder {
-    color: #868c97;
+    color: #6e7582;
     opacity: 1; }
   .form-control::-ms-input-placeholder {
-    color: #868c97;
+    color: #6e7582;
     opacity: 1; }
   .form-control::placeholder {
-    color: #868c97;
+    color: #6e7582;
     opacity: 1; }
   .form-control:disabled, .form-control[readonly] {
     background-color: #f5f7fb;
@@ -1963,7 +1819,7 @@ progress {
 .form-control-sm {
   min-height: calc(1.4666667em + 0.25rem + 2px);
   padding: 0.125rem 0.5rem;
-  font-size: 0.8125rem;
+  font-size: 0.75rem;
   border-radius: 0.2rem; }
 
 .form-control-lg {
@@ -1990,17 +1846,17 @@ progress {
   width: 100%;
   height: calc(1.4666667em + 0.75rem + 2px);
   padding: 0.375rem 1.75rem 0.375rem 0.75rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.4666667;
   color: #354052;
   vertical-align: middle;
   background-color: #ffffff;
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28134, 140, 151, 0.48%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28110, 117, 130, 0.44%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right 0.75rem center;
   background-size: 16px 12px;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 3px;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -2028,7 +1884,7 @@ progress {
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
   padding-left: 0.5rem;
-  font-size: 0.8125rem; }
+  font-size: 0.75rem; }
 
 .form-select-lg {
   height: calc(1.4666667em + 1rem + 2px);
@@ -2052,10 +1908,10 @@ progress {
 .form-check-input {
   width: 1rem;
   height: 1rem;
-  margin-top: 0.3rem;
+  margin-top: 0.3571429rem;
   vertical-align: top;
   background-color: #ffffff;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -2077,7 +1933,7 @@ progress {
     background-repeat: repeat;
     background-position: center center;
     background-size: 1rem;
-    border-color: rgba(134, 140, 151, 0.24); }
+    border-color: rgba(110, 117, 130, 0.2); }
     .form-check-input:checked[type="checkbox"] {
       background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6' transform='scale%28.8%29' transform-origin='50% 50%'/%3e%3c/svg%3e"); }
     .form-check-input:checked[type="radio"] {
@@ -2105,7 +1961,7 @@ progress {
   .form-switch .form-check-input {
     width: 1.75rem;
     margin-left: -2.25rem;
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28134, 140, 151, 0.24%29'/%3e%3c/svg%3e");
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28110, 117, 130, 0.2%29'/%3e%3c/svg%3e");
     background-repeat: no-repeat;
     background-position: left center;
     background-size: auto;
@@ -2148,7 +2004,7 @@ progress {
   z-index: 1;
   display: flex;
   height: 100%;
-  border-color: rgba(134, 140, 151, 0.24);
+  border-color: rgba(110, 117, 130, 0.2);
   border-radius: 3px; }
 
 .form-file-text {
@@ -2184,7 +2040,7 @@ progress {
 
 .form-file-sm {
   height: calc(1.4666667em + 0.25rem + 2px);
-  font-size: 0.8125rem; }
+  font-size: 0.75rem; }
   .form-file-sm .form-file-text,
   .form-file-sm .form-file-button {
     padding: 0.125rem 0.5rem; }
@@ -2344,14 +2200,14 @@ progress {
   align-items: center;
   padding: 0.375rem 0.75rem;
   margin-bottom: 0;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.4666667;
-  color: #868c97;
+  color: #6e7582;
   text-align: center;
   white-space: nowrap;
   background-color: rgba(53, 64, 82, 0.024);
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 3px; }
 
 .input-group-lg > .form-control {
@@ -2385,7 +2241,7 @@ progress {
 .input-group-sm > .input-group-text,
 .input-group-sm > .btn {
   padding: 0.125rem 0.5rem;
-  font-size: 0.8125rem;
+  font-size: 0.75rem;
   border-radius: 0.2rem; }
 
 .input-group-lg > .form-select,
@@ -2417,8 +2273,8 @@ progress {
   max-width: 100%;
   padding: 0.25rem 0.5rem;
   margin-top: .1rem;
-  font-size: 0.8203125rem;
-  color: #354052;
+  font-size: 0.765625rem;
+  color: #ffffff;
   background-color: rgba(94, 186, 0, 0.9);
   border-radius: 3px; }
 
@@ -2446,7 +2302,7 @@ progress {
 .was-validated .form-select:valid, .form-select.is-valid {
   border-color: #5eba00;
   padding-right: calc(0.75em + 2.3125rem);
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28134, 140, 151, 0.48%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235eba00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28110, 117, 130, 0.44%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235eba00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e");
   background-position: right 0.75rem center, center right 1.75rem;
   background-size: 16px 12px, calc(0.7333333em + 0.375rem) calc(0.7333333em + 0.375rem); }
   .was-validated .form-select:valid:focus, .form-select.is-valid:focus {
@@ -2477,7 +2333,7 @@ progress {
   width: 100%;
   margin-top: 0.25rem;
   font-size: 87.5%;
-  color: #fa4654; }
+  color: #cd201f; }
 
 .invalid-tooltip {
   position: absolute;
@@ -2487,9 +2343,9 @@ progress {
   max-width: 100%;
   padding: 0.25rem 0.5rem;
   margin-top: .1rem;
-  font-size: 0.8203125rem;
+  font-size: 0.765625rem;
   color: #ffffff;
-  background-color: rgba(250, 70, 84, 0.9);
+  background-color: rgba(205, 32, 31, 0.9);
   border-radius: 3px; }
 
 .was-validated :invalid ~ .invalid-feedback,
@@ -2499,48 +2355,48 @@ progress {
   display: block; }
 
 .was-validated .form-control:invalid, .form-control.is-invalid {
-  border-color: #fa4654;
+  border-color: #cd201f;
   padding-right: calc(1.4666667em + 0.75rem);
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fa4654' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23cd201f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right calc(0.3666667em + 0.1875rem) center;
   background-size: calc(0.7333333em + 0.375rem) calc(0.7333333em + 0.375rem); }
   .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
-    border-color: #fa4654;
-    box-shadow: 0 0 0 0.2rem rgba(250, 70, 84, 0.25); }
+    border-color: #cd201f;
+    box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.25); }
 
 .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
   padding-right: calc(1.4666667em + 0.75rem);
   background-position: top calc(0.3666667em + 0.1875rem) right calc(0.3666667em + 0.1875rem); }
 
 .was-validated .form-select:invalid, .form-select.is-invalid {
-  border-color: #fa4654;
+  border-color: #cd201f;
   padding-right: calc(0.75em + 2.3125rem);
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28134, 140, 151, 0.48%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fa4654' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28110, 117, 130, 0.44%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"), url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23cd201f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
   background-position: right 0.75rem center, center right 1.75rem;
   background-size: 16px 12px, calc(0.7333333em + 0.375rem) calc(0.7333333em + 0.375rem); }
   .was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {
-    border-color: #fa4654;
-    box-shadow: 0 0 0 0.2rem rgba(250, 70, 84, 0.25); }
+    border-color: #cd201f;
+    box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.25); }
 
 .was-validated .form-check-input:invalid, .form-check-input.is-invalid {
-  border-color: #fa4654; }
+  border-color: #cd201f; }
   .was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked {
-    background-color: #fb7882; }
+    background-color: #e23e3d; }
   .was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus {
-    box-shadow: 0 0 0 0.2rem rgba(250, 70, 84, 0.25); }
+    box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.25); }
   .was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
-    color: #fa4654; }
+    color: #cd201f; }
 
 .form-check-inline .form-check-input ~ .invalid-feedback {
   margin-left: .5em; }
 
 .was-validated .form-file-input:invalid ~ .form-file-label, .form-file-input.is-invalid ~ .form-file-label {
-  border-color: #fa4654; }
+  border-color: #cd201f; }
 
 .was-validated .form-file-input:invalid:focus ~ .form-file-label, .form-file-input.is-invalid:focus ~ .form-file-label {
-  border-color: #fa4654;
-  box-shadow: 0 0 0 0.2rem rgba(250, 70, 84, 0.25); }
+  border-color: #cd201f;
+  box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.25); }
 
 .btn {
   display: inline-block;
@@ -2557,7 +2413,7 @@ progress {
   background-color: transparent;
   border: 1px solid transparent;
   padding: 0.375rem 1rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   border-radius: 3px;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
   @media (prefers-reduced-motion: reduce) {
@@ -2601,32 +2457,32 @@ progress {
 
 .btn-secondary {
   color: #ffffff;
-  background-color: #868c97;
-  border-color: #868c97; }
+  background-color: #6e7582;
+  border-color: #6e7582; }
   .btn-secondary:hover {
     color: #ffffff;
-    background-color: #727985;
-    border-color: #6c727e; }
+    background-color: #5c626d;
+    border-color: #575c66; }
   .btn-secondary:focus, .btn-secondary.focus {
     color: #ffffff;
-    background-color: #727985;
-    border-color: #6c727e;
-    box-shadow: 0 0 0 0.2rem rgba(152, 157, 167, 0.5); }
+    background-color: #5c626d;
+    border-color: #575c66;
+    box-shadow: 0 0 0 0.2rem rgba(132, 138, 149, 0.5); }
   .btn-secondary:active, .btn-secondary.active,
   .show > .btn-secondary.dropdown-toggle {
     color: #ffffff;
-    background-color: #6c727e;
-    border-color: #666c77; }
+    background-color: #575c66;
+    border-color: #51565f; }
     .btn-secondary:active:focus, .btn-secondary.active:focus,
     .show > .btn-secondary.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(152, 157, 167, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(132, 138, 149, 0.5); }
   .btn-secondary:disabled, .btn-secondary.disabled {
     color: #ffffff;
-    background-color: #868c97;
-    border-color: #868c97; }
+    background-color: #6e7582;
+    border-color: #6e7582; }
 
 .btn-success {
-  color: #354052;
+  color: #ffffff;
   background-color: #5eba00;
   border-color: #5eba00; }
   .btn-success:hover {
@@ -2637,7 +2493,7 @@ progress {
     color: #ffffff;
     background-color: #4b9400;
     border-color: #448700;
-    box-shadow: 0 0 0 0.2rem rgba(88, 168, 12, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(118, 196, 38, 0.5); }
   .btn-success:active, .btn-success.active,
   .show > .btn-success.dropdown-toggle {
     color: #ffffff;
@@ -2645,14 +2501,14 @@ progress {
     border-color: #3e7a00; }
     .btn-success:active:focus, .btn-success.active:focus,
     .show > .btn-success.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(88, 168, 12, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(118, 196, 38, 0.5); }
   .btn-success:disabled, .btn-success.disabled {
-    color: #354052;
+    color: #ffffff;
     background-color: #5eba00;
     border-color: #5eba00; }
 
 .btn-info {
-  color: #354052;
+  color: #ffffff;
   background-color: #45aaf2;
   border-color: #45aaf2; }
   .btn-info:hover {
@@ -2663,7 +2519,7 @@ progress {
     color: #ffffff;
     background-color: #219af0;
     border-color: #1594ef;
-    box-shadow: 0 0 0 0.2rem rgba(67, 154, 218, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(97, 183, 244, 0.5); }
   .btn-info:active, .btn-info.active,
   .show > .btn-info.dropdown-toggle {
     color: #ffffff;
@@ -2671,63 +2527,63 @@ progress {
     border-color: #108ee7; }
     .btn-info:active:focus, .btn-info.active:focus,
     .show > .btn-info.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(67, 154, 218, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(97, 183, 244, 0.5); }
   .btn-info:disabled, .btn-info.disabled {
-    color: #354052;
+    color: #ffffff;
     background-color: #45aaf2;
     border-color: #45aaf2; }
 
 .btn-warning {
-  color: #354052;
+  color: #ffffff;
   background-color: #fab005;
   border-color: #fab005; }
   .btn-warning:hover {
-    color: #354052;
+    color: #ffffff;
     background-color: #d59604;
     border-color: #c88d04; }
   .btn-warning:focus, .btn-warning.focus {
-    color: #354052;
+    color: #ffffff;
     background-color: #d59604;
     border-color: #c88d04;
-    box-shadow: 0 0 0 0.2rem rgba(220, 159, 17, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(251, 188, 43, 0.5); }
   .btn-warning:active, .btn-warning.active,
   .show > .btn-warning.dropdown-toggle {
-    color: #354052;
+    color: #ffffff;
     background-color: #c88d04;
     border-color: #bc8404; }
     .btn-warning:active:focus, .btn-warning.active:focus,
     .show > .btn-warning.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(220, 159, 17, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(251, 188, 43, 0.5); }
   .btn-warning:disabled, .btn-warning.disabled {
-    color: #354052;
+    color: #ffffff;
     background-color: #fab005;
     border-color: #fab005; }
 
 .btn-danger {
   color: #ffffff;
-  background-color: #fa4654;
-  border-color: #fa4654; }
+  background-color: #cd201f;
+  border-color: #cd201f; }
   .btn-danger:hover {
     color: #ffffff;
-    background-color: #f92132;
-    border-color: #f91426; }
+    background-color: #ac1b1a;
+    border-color: #a11918; }
   .btn-danger:focus, .btn-danger.focus {
     color: #ffffff;
-    background-color: #f92132;
-    border-color: #f91426;
-    box-shadow: 0 0 0 0.2rem rgba(251, 98, 110, 0.5); }
+    background-color: #ac1b1a;
+    border-color: #a11918;
+    box-shadow: 0 0 0 0.2rem rgba(213, 65, 65, 0.5); }
   .btn-danger:active, .btn-danger.active,
   .show > .btn-danger.dropdown-toggle {
     color: #ffffff;
-    background-color: #f91426;
-    border-color: #f8081b; }
+    background-color: #a11918;
+    border-color: #961717; }
     .btn-danger:active:focus, .btn-danger.active:focus,
     .show > .btn-danger.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(251, 98, 110, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(213, 65, 65, 0.5); }
   .btn-danger:disabled, .btn-danger.disabled {
     color: #ffffff;
-    background-color: #fa4654;
-    border-color: #fa4654; }
+    background-color: #cd201f;
+    border-color: #cd201f; }
 
 .btn-light {
   color: #354052;
@@ -2801,35 +2657,35 @@ progress {
     background-color: transparent; }
 
 .btn-outline-secondary {
-  color: #868c97;
-  border-color: #868c97; }
+  color: #6e7582;
+  border-color: #6e7582; }
   .btn-outline-secondary:hover {
     color: #ffffff;
-    background-color: #868c97;
-    border-color: #868c97; }
+    background-color: #6e7582;
+    border-color: #6e7582; }
   .btn-outline-secondary:focus, .btn-outline-secondary.focus {
-    box-shadow: 0 0 0 0.2rem rgba(134, 140, 151, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(110, 117, 130, 0.5); }
   .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show {
     color: #ffffff;
-    background-color: #868c97;
-    border-color: #868c97; }
+    background-color: #6e7582;
+    border-color: #6e7582; }
     .btn-outline-secondary:active:focus, .btn-outline-secondary.active:focus, .btn-outline-secondary.dropdown-toggle.show:focus {
-      box-shadow: 0 0 0 0.2rem rgba(134, 140, 151, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(110, 117, 130, 0.5); }
   .btn-outline-secondary:disabled, .btn-outline-secondary.disabled {
-    color: #868c97;
+    color: #6e7582;
     background-color: transparent; }
 
 .btn-outline-success {
   color: #5eba00;
   border-color: #5eba00; }
   .btn-outline-success:hover {
-    color: #354052;
+    color: #ffffff;
     background-color: #5eba00;
     border-color: #5eba00; }
   .btn-outline-success:focus, .btn-outline-success.focus {
     box-shadow: 0 0 0 0.2rem rgba(94, 186, 0, 0.5); }
   .btn-outline-success:active, .btn-outline-success.active, .btn-outline-success.dropdown-toggle.show {
-    color: #354052;
+    color: #ffffff;
     background-color: #5eba00;
     border-color: #5eba00; }
     .btn-outline-success:active:focus, .btn-outline-success.active:focus, .btn-outline-success.dropdown-toggle.show:focus {
@@ -2842,13 +2698,13 @@ progress {
   color: #45aaf2;
   border-color: #45aaf2; }
   .btn-outline-info:hover {
-    color: #354052;
+    color: #ffffff;
     background-color: #45aaf2;
     border-color: #45aaf2; }
   .btn-outline-info:focus, .btn-outline-info.focus {
     box-shadow: 0 0 0 0.2rem rgba(69, 170, 242, 0.5); }
   .btn-outline-info:active, .btn-outline-info.active, .btn-outline-info.dropdown-toggle.show {
-    color: #354052;
+    color: #ffffff;
     background-color: #45aaf2;
     border-color: #45aaf2; }
     .btn-outline-info:active:focus, .btn-outline-info.active:focus, .btn-outline-info.dropdown-toggle.show:focus {
@@ -2861,13 +2717,13 @@ progress {
   color: #fab005;
   border-color: #fab005; }
   .btn-outline-warning:hover {
-    color: #354052;
+    color: #ffffff;
     background-color: #fab005;
     border-color: #fab005; }
   .btn-outline-warning:focus, .btn-outline-warning.focus {
     box-shadow: 0 0 0 0.2rem rgba(250, 176, 5, 0.5); }
   .btn-outline-warning:active, .btn-outline-warning.active, .btn-outline-warning.dropdown-toggle.show {
-    color: #354052;
+    color: #ffffff;
     background-color: #fab005;
     border-color: #fab005; }
     .btn-outline-warning:active:focus, .btn-outline-warning.active:focus, .btn-outline-warning.dropdown-toggle.show:focus {
@@ -2877,22 +2733,22 @@ progress {
     background-color: transparent; }
 
 .btn-outline-danger {
-  color: #fa4654;
-  border-color: #fa4654; }
+  color: #cd201f;
+  border-color: #cd201f; }
   .btn-outline-danger:hover {
     color: #ffffff;
-    background-color: #fa4654;
-    border-color: #fa4654; }
+    background-color: #cd201f;
+    border-color: #cd201f; }
   .btn-outline-danger:focus, .btn-outline-danger.focus {
-    box-shadow: 0 0 0 0.2rem rgba(250, 70, 84, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.5); }
   .btn-outline-danger:active, .btn-outline-danger.active, .btn-outline-danger.dropdown-toggle.show {
     color: #ffffff;
-    background-color: #fa4654;
-    border-color: #fa4654; }
+    background-color: #cd201f;
+    border-color: #cd201f; }
     .btn-outline-danger:active:focus, .btn-outline-danger.active:focus, .btn-outline-danger.dropdown-toggle.show:focus {
-      box-shadow: 0 0 0 0.2rem rgba(250, 70, 84, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.5); }
   .btn-outline-danger:disabled, .btn-outline-danger.disabled {
-    color: #fa4654;
+    color: #cd201f;
     background-color: transparent; }
 
 .btn-outline-light {
@@ -2952,7 +2808,7 @@ progress {
 
 .btn-sm, .btn-group-sm > .btn {
   padding: 0.125rem 0.5rem;
-  font-size: 0.8125rem;
+  font-size: 0.75rem;
   border-radius: 0.2rem; }
 
 .btn-block {
@@ -2991,11 +2847,12 @@ progress {
   .dropdown-toggle:after {
     content: "";
     display: inline-block;
-    vertical-align: 0.272em;
-    width: 0.32em;
-    height: 0.32em;
+    vertical-align: 0.306em;
+    width: 0.36em;
+    height: 0.36em;
     border-bottom: 1px solid;
     border-left: 1px solid;
+    margin-right: .1em;
     margin-left: 0.4em;
     transform: rotate(-45deg); }
 
@@ -3008,13 +2865,13 @@ progress {
   min-width: 14rem;
   padding: 0.5rem 0;
   margin: 1px 0 0;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   color: #354052;
   text-align: left;
   list-style: none;
   background-color: #ffffff;
   background-clip: padding-box;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 3px; }
 
 .dropdown-menu-left {
@@ -3066,11 +2923,12 @@ progress {
 .dropup .dropdown-toggle:after {
   content: "";
   display: inline-block;
-  vertical-align: 0.272em;
-  width: 0.32em;
-  height: 0.32em;
+  vertical-align: 0.306em;
+  width: 0.36em;
+  height: 0.36em;
   border-bottom: 1px solid;
   border-left: 1px solid;
+  margin-right: .1em;
   margin-left: 0.4em;
   transform: rotate(135deg); }
 
@@ -3084,11 +2942,12 @@ progress {
 .dropright .dropdown-toggle:after {
   content: "";
   display: inline-block;
-  vertical-align: 0.272em;
-  width: 0.32em;
-  height: 0.32em;
+  vertical-align: 0.306em;
+  width: 0.36em;
+  height: 0.36em;
   border-bottom: 1px solid;
   border-left: 1px solid;
+  margin-right: .1em;
   margin-left: 0.4em;
   transform: rotate(-135deg); }
 
@@ -3105,11 +2964,12 @@ progress {
 .dropleft .dropdown-toggle:before {
   content: "";
   display: inline-block;
-  vertical-align: 0.272em;
-  width: 0.32em;
-  height: 0.32em;
+  vertical-align: 0.306em;
+  width: 0.36em;
+  height: 0.36em;
   border-bottom: 1px solid;
   border-left: 1px solid;
+  margin-right: .1em;
   margin-right: 0.4em;
   transform: rotate(45deg); }
 
@@ -3127,7 +2987,7 @@ progress {
   height: 0;
   margin: 0.5rem 0;
   overflow: hidden;
-  border-top: 1px solid rgba(134, 140, 151, 0.24); }
+  border-top: 1px solid rgba(110, 117, 130, 0.2); }
 
 .dropdown-item {
   display: block;
@@ -3142,7 +3002,7 @@ progress {
   border: 0; }
   .dropdown-item:hover, .dropdown-item:focus {
     color: inherit;
-    background-color: rgba(134, 140, 151, 0.06); }
+    background-color: rgba(110, 117, 130, 0.06); }
   .dropdown-item.active, .dropdown-item:active {
     color: #206bc4;
     text-decoration: none;
@@ -3159,7 +3019,7 @@ progress {
   display: block;
   padding: 0.5rem 1rem;
   margin-bottom: 0;
-  font-size: 0.8203125rem;
+  font-size: 0.765625rem;
   color: #a8aeb7;
   white-space: nowrap; }
 
@@ -3262,7 +3122,7 @@ progress {
 
 .nav-link {
   display: block;
-  padding: 0.5rem 1rem; }
+  padding: 0.25rem 0.75rem; }
   .nav-link.disabled {
     color: #a8aeb7;
     pointer-events: none;
@@ -3320,8 +3180,8 @@ progress {
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem; }
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem; }
   .navbar > .container,
   .navbar > .container-fluid, .navbar > .container-sm, .navbar > .container-md, .navbar > .container-lg, .navbar > .container-xl {
     display: flex;
@@ -3330,10 +3190,10 @@ progress {
     justify-content: space-between; }
 
 .navbar-brand {
-  padding-top: 0.3125rem;
-  padding-bottom: 0.3125rem;
-  margin-right: 1rem;
-  font-size: 1.171875rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  margin-right: 0;
+  font-size: 1.125rem;
   white-space: nowrap; }
   .navbar-brand:hover, .navbar-brand:focus {
     text-decoration: none; }
@@ -3351,15 +3211,15 @@ progress {
     position: static; }
 
 .navbar-text {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem; }
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem; }
 
 .navbar-collapse {
   align-items: center;
   width: 100%; }
 
 .navbar-toggler {
-  padding: 0.75rem 0.75rem;
+  padding: 0 0;
   font-size: 1rem;
   line-height: 1;
   background-color: transparent;
@@ -3374,7 +3234,7 @@ progress {
   .navbar-toggler:focus {
     text-decoration: none;
     outline: 0;
-    box-shadow: 0 0 0 0.2rem; }
+    box-shadow: 0 0 0 0; }
 
 .navbar-toggler-icon {
   display: inline-block;
@@ -3465,36 +3325,36 @@ progress {
     display: none; }
 
 .navbar-light .navbar-brand {
-  color: rgba(0, 0, 0, 0.9); }
+  color: #354052; }
   .navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
-    color: rgba(0, 0, 0, 0.9); }
+    color: #354052; }
 
 .navbar-light .navbar-nav .nav-link {
-  color: rgba(0, 0, 0, 0.55); }
+  color: rgba(53, 64, 82, 0.72); }
   .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
     color: rgba(0, 0, 0, 0.7); }
   .navbar-light .navbar-nav .nav-link.disabled {
-    color: rgba(0, 0, 0, 0.3); }
+    color: rgba(53, 64, 82, 0.3); }
 
 .navbar-light .navbar-nav .show > .nav-link,
 .navbar-light .navbar-nav .active > .nav-link,
 .navbar-light .navbar-nav .nav-link.show,
 .navbar-light .navbar-nav .nav-link.active {
-  color: rgba(0, 0, 0, 0.9); }
+  color: #354052; }
 
 .navbar-light .navbar-toggler {
-  color: rgba(0, 0, 0, 0.55);
+  color: rgba(53, 64, 82, 0.72);
   border-color: rgba(0, 0, 0, 0.1); }
 
 .navbar-light .navbar-toggler-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2853, 64, 82, 0.72%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
 
 .navbar-light .navbar-text {
-  color: rgba(0, 0, 0, 0.55); }
+  color: rgba(53, 64, 82, 0.72); }
   .navbar-light .navbar-text a,
   .navbar-light .navbar-text a:hover,
   .navbar-light .navbar-text a:focus {
-    color: rgba(0, 0, 0, 0.9); }
+    color: #354052; }
 
 .navbar-dark .navbar-brand {
   color: #ffffff; }
@@ -3502,11 +3362,11 @@ progress {
     color: #ffffff; }
 
 .navbar-dark .navbar-nav .nav-link {
-  color: rgba(255, 255, 255, 0.55); }
+  color: rgba(255, 255, 255, 0.72); }
   .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
     color: rgba(255, 255, 255, 0.75); }
   .navbar-dark .navbar-nav .nav-link.disabled {
-    color: rgba(255, 255, 255, 0.25); }
+    color: rgba(255, 255, 255, 0.3); }
 
 .navbar-dark .navbar-nav .show > .nav-link,
 .navbar-dark .navbar-nav .active > .nav-link,
@@ -3515,14 +3375,14 @@ progress {
   color: #ffffff; }
 
 .navbar-dark .navbar-toggler {
-  color: rgba(255, 255, 255, 0.55);
+  color: rgba(255, 255, 255, 0.72);
   border-color: rgba(255, 255, 255, 0.1); }
 
 .navbar-dark .navbar-toggler-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.72%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
 
 .navbar-dark .navbar-text {
-  color: rgba(255, 255, 255, 0.55); }
+  color: rgba(255, 255, 255, 0.72); }
   .navbar-dark .navbar-text a,
   .navbar-dark .navbar-text a:hover,
   .navbar-dark .navbar-text a:focus {
@@ -3536,7 +3396,7 @@ progress {
   word-wrap: break-word;
   background-color: #ffffff;
   background-clip: border-box;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 3px; }
   .card > hr, .card > .hr {
     margin-right: 0;
@@ -3572,7 +3432,7 @@ progress {
   padding: 0.75rem 1.25rem;
   margin-bottom: 0;
   background-color: rgba(53, 64, 82, 0.024);
-  border-bottom: 1px solid rgba(134, 140, 151, 0.24); }
+  border-bottom: 1px solid rgba(110, 117, 130, 0.2); }
   .card-header:first-child {
     border-radius: 2px 2px 0 0; }
   .card-header + .list-group .list-group-item:first-child {
@@ -3581,7 +3441,7 @@ progress {
 .card-footer {
   padding: 0.75rem 1.25rem;
   background-color: rgba(53, 64, 82, 0.024);
-  border-top: 1px solid rgba(134, 140, 151, 0.24); }
+  border-top: 1px solid rgba(110, 117, 130, 0.2); }
   .card-footer:last-child {
     border-radius: 0 0 2px 2px; }
 
@@ -3695,7 +3555,7 @@ progress {
 .page-link {
   position: relative;
   display: block;
-  color: #868c97;
+  color: #6e7582;
   background-color: transparent;
   border: 0 solid #e9ecf1; }
   .page-link:hover {
@@ -3718,7 +3578,7 @@ progress {
   border-color: #206bc4; }
 
 .page-item.disabled .page-link {
-  color: rgba(134, 140, 151, 0.5);
+  color: rgba(110, 117, 130, 0.5);
   pointer-events: none;
   background-color: transparent;
   border-color: #e9ecf1; }
@@ -3736,7 +3596,7 @@ progress {
 
 .pagination-lg .page-link {
   padding: 0.75rem 1.5rem;
-  font-size: 1.171875rem; }
+  font-size: 1.09375rem; }
 
 .pagination-lg .page-item:first-child .page-link {
   border-top-left-radius: 0.3rem;
@@ -3748,7 +3608,7 @@ progress {
 
 .pagination-sm .page-link {
   padding: 0.25rem 0.5rem;
-  font-size: 0.8203125rem; }
+  font-size: 0.765625rem; }
 
 .pagination-sm .page-item:first-child .page-link {
   border-top-left-radius: 0.2rem;
@@ -3760,9 +3620,9 @@ progress {
 
 .badge {
   display: inline-block;
-  padding: 0.25em 0.5em;
-  font-size: 0.75em;
-  font-weight: 600;
+  padding: 0.125rem 0.25rem;
+  font-size: 0.625rem;
+  font-weight: 500;
   line-height: 1;
   color: #ffffff;
   text-align: center;
@@ -3787,7 +3647,7 @@ progress {
   color: inherit; }
 
 .alert-link {
-  font-weight: 600; }
+  font-weight: 500; }
 
 .alert-dismissible {
   padding-right: 4rem; }
@@ -3806,11 +3666,11 @@ progress {
     color: black; }
 
 .alert-secondary {
-  color: #1b1c1e;
-  background-color: #e7e8ea;
-  border-color: #cfd1d5; }
+  color: #16171a;
+  background-color: #e2e3e6;
+  border-color: #c5c8cd; }
   .alert-secondary .alert-link {
-    color: #030303; }
+    color: black; }
 
 .alert-success {
   color: #132500;
@@ -3834,11 +3694,11 @@ progress {
     color: black; }
 
 .alert-danger {
-  color: #320e11;
-  background-color: #fedadd;
-  border-color: #fdb5bb; }
+  color: #290606;
+  background-color: #f5d2d2;
+  border-color: #eba6a5; }
   .alert-danger .alert-link {
-    color: #0a0303; }
+    color: black; }
 
 .alert-light {
   color: #313132;
@@ -3866,7 +3726,7 @@ progress {
   display: flex;
   height: 0.5rem;
   overflow: hidden;
-  font-size: 0.703125rem;
+  font-size: 0.65625rem;
   background-color: rgba(176, 181, 190, 0.24);
   border-radius: 3px; }
 
@@ -3920,8 +3780,8 @@ progress {
   display: block;
   padding: 0.5rem 0.75rem;
   margin-bottom: 0;
-  background-color: #ffffff;
-  border: 1px solid rgba(134, 140, 151, 0.24); }
+  background-color: inherit;
+  border: 1px solid rgba(110, 117, 130, 0.2); }
   .list-group-item:first-child {
     border-top-left-radius: 3px;
     border-top-right-radius: 3px; }
@@ -3931,7 +3791,7 @@ progress {
   .list-group-item.disabled, .list-group-item:disabled {
     color: #a8aeb7;
     pointer-events: none;
-    background-color: #ffffff; }
+    background-color: inherit; }
   .list-group-item.active {
     z-index: 2;
     color: #ffffff;
@@ -4054,15 +3914,15 @@ progress {
     border-color: #0d2b4e; }
 
 .list-group-item-secondary {
-  color: #36383c;
-  background-color: #f3f4f5; }
+  color: #2c2f34;
+  background-color: #f1f1f3; }
   .list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
-    color: #36383c;
-    background-color: #e5e7e9; }
+    color: #2c2f34;
+    background-color: #e3e3e7; }
   .list-group-item-secondary.list-group-item-action.active {
     color: #ffffff;
-    background-color: #36383c;
-    border-color: #36383c; }
+    background-color: #2c2f34;
+    border-color: #2c2f34; }
 
 .list-group-item-success {
   color: #264a00;
@@ -4098,15 +3958,15 @@ progress {
     border-color: #644602; }
 
 .list-group-item-danger {
-  color: #641c22;
-  background-color: #ffedee; }
+  color: #520d0c;
+  background-color: #fae9e9; }
   .list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus {
-    color: #641c22;
-    background-color: #ffd4d6; }
+    color: #520d0c;
+    background-color: #f5d4d4; }
   .list-group-item-danger.list-group-item-action.active {
     color: #ffffff;
-    background-color: #641c22;
-    border-color: #641c22; }
+    background-color: #520d0c;
+    border-color: #520d0c; }
 
 .list-group-item-light {
   color: #626364;
@@ -4162,7 +4022,7 @@ button.close {
   font-size: 0.875rem;
   background-color: rgba(255, 255, 255, 0.85);
   background-clip: padding-box;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
@@ -4182,7 +4042,7 @@ button.close {
   display: flex;
   align-items: center;
   padding: 0.25rem 0.75rem;
-  color: #868c97;
+  color: #6e7582;
   background-color: rgba(255, 255, 255, 0.85);
   background-clip: padding-box;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
@@ -4246,7 +4106,7 @@ button.close {
   pointer-events: auto;
   background-color: #fbfbfb;
   background-clip: padding-box;
-  border: 1px solid rgba(134, 140, 151, 0.12);
+  border: 1px solid rgba(110, 117, 130, 0.1);
   border-radius: 3px;
   outline: 0; }
 
@@ -4268,7 +4128,7 @@ button.close {
   align-items: flex-start;
   justify-content: space-between;
   padding: 1.5rem;
-  border-bottom: 1px solid rgba(134, 140, 151, 0.12);
+  border-bottom: 1px solid rgba(110, 117, 130, 0.1);
   border-top-left-radius: 2px;
   border-top-right-radius: 2px; }
   .modal-header .close {
@@ -4277,7 +4137,7 @@ button.close {
 
 .modal-title {
   margin-bottom: 0;
-  line-height: 1.6; }
+  line-height: 1.7142857; }
 
 .modal-body {
   position: relative;
@@ -4290,7 +4150,7 @@ button.close {
   align-items: center;
   justify-content: flex-end;
   padding: 1.125rem;
-  border-top: 0 solid rgba(134, 140, 151, 0.12);
+  border-top: 0 solid rgba(110, 117, 130, 0.1);
   border-bottom-right-radius: 2px;
   border-bottom-left-radius: 2px; }
   .modal-footer > * {
@@ -4328,10 +4188,10 @@ button.close {
   z-index: 1070;
   display: block;
   margin: 0;
-  font-family: "Source Sans Pro", -apple-system, blinkmacsystemfont, segoe ui, helvetica, arial, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol;
+  font-family: "Ubuntu", system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
   font-style: normal;
   font-weight: 400;
-  line-height: 1.6;
+  line-height: 1.7142857;
   text-align: left;
   text-align: start;
   text-decoration: none;
@@ -4342,7 +4202,7 @@ button.close {
   word-spacing: normal;
   white-space: normal;
   line-break: auto;
-  font-size: 0.8203125rem;
+  font-size: 0.765625rem;
   word-wrap: break-word;
   opacity: 0; }
   .tooltip.show {
@@ -4413,10 +4273,10 @@ button.close {
   z-index: 1060;
   display: block;
   max-width: 276px;
-  font-family: "Source Sans Pro", -apple-system, blinkmacsystemfont, segoe ui, helvetica, arial, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol;
+  font-family: "Ubuntu", system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
   font-style: normal;
   font-weight: 400;
-  line-height: 1.6;
+  line-height: 1.7142857;
   text-align: left;
   text-align: start;
   text-decoration: none;
@@ -4427,11 +4287,11 @@ button.close {
   word-spacing: normal;
   white-space: normal;
   line-break: auto;
-  font-size: 0.8203125rem;
+  font-size: 0.765625rem;
   word-wrap: break-word;
   background-color: #ffffff;
   background-clip: padding-box;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 0.3rem; }
   .popover .popover-arrow {
     position: absolute;
@@ -4453,7 +4313,7 @@ button.close {
     .bs-popover-top > .popover-arrow::before, .bs-popover-auto[x-placement^="top"] > .popover-arrow::before {
       bottom: 0;
       border-width: 0.5rem 0.5rem 0;
-      border-top-color: rgba(134, 140, 151, 0.29); }
+      border-top-color: rgba(110, 117, 130, 0.25); }
     .bs-popover-top > .popover-arrow::after, .bs-popover-auto[x-placement^="top"] > .popover-arrow::after {
       bottom: 1px;
       border-width: 0.5rem 0.5rem 0;
@@ -4469,7 +4329,7 @@ button.close {
     .bs-popover-right > .popover-arrow::before, .bs-popover-auto[x-placement^="right"] > .popover-arrow::before {
       left: 0;
       border-width: 0.5rem 0.5rem 0.5rem 0;
-      border-right-color: rgba(134, 140, 151, 0.29); }
+      border-right-color: rgba(110, 117, 130, 0.25); }
     .bs-popover-right > .popover-arrow::after, .bs-popover-auto[x-placement^="right"] > .popover-arrow::after {
       left: 1px;
       border-width: 0.5rem 0.5rem 0.5rem 0;
@@ -4482,7 +4342,7 @@ button.close {
     .bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[x-placement^="bottom"] > .popover-arrow::before {
       top: 0;
       border-width: 0 0.5rem 0.5rem 0.5rem;
-      border-bottom-color: rgba(134, 140, 151, 0.29); }
+      border-bottom-color: rgba(110, 117, 130, 0.25); }
     .bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[x-placement^="bottom"] > .popover-arrow::after {
       top: 1px;
       border-width: 0 0.5rem 0.5rem 0.5rem;
@@ -4507,7 +4367,7 @@ button.close {
     .bs-popover-left > .popover-arrow::before, .bs-popover-auto[x-placement^="left"] > .popover-arrow::before {
       right: 0;
       border-width: 0.5rem 0 0.5rem 0.5rem;
-      border-left-color: rgba(134, 140, 151, 0.29); }
+      border-left-color: rgba(110, 117, 130, 0.25); }
     .bs-popover-left > .popover-arrow::after, .bs-popover-auto[x-placement^="left"] > .popover-arrow::after {
       right: 1px;
       border-width: 0.5rem 0 0.5rem 0.5rem;
@@ -4516,7 +4376,7 @@ button.close {
 .popover-header {
   padding: 0.5rem 0.75rem;
   margin-bottom: 0;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   background-color: #f7f7f7;
   border-bottom: 1px solid #ebebeb;
   border-top-left-radius: calc(0.3rem - 1px);
@@ -4742,9 +4602,9 @@ button.close {
     color: #154782; }
 
 .link-secondary {
-  color: #868c97; }
+  color: #6e7582; }
   .link-secondary:hover, .link-secondary:focus {
-    color: #606670; }
+    color: #4b5059; }
 
 .link-success {
   color: #5eba00; }
@@ -4762,9 +4622,9 @@ button.close {
     color: #af7b04; }
 
 .link-danger {
-  color: #fa4654; }
+  color: #cd201f; }
   .link-danger:hover, .link-danger:focus {
-    color: #ed0618; }
+    color: #8b1615; }
 
 .link-light {
   color: #f5f7fb; }
@@ -4969,46 +4829,46 @@ button.close {
   position: sticky !important; }
 
 .border {
-  border: 1px solid rgba(134, 140, 151, 0.24) !important; }
+  border: 1px solid rgba(110, 117, 130, 0.2) !important; }
 
 .border-wide {
-  border: 2px solid rgba(134, 140, 151, 0.24) !important; }
+  border: 2px solid rgba(110, 117, 130, 0.2) !important; }
 
 .border-0 {
   border: 0 !important; }
 
 .border-top {
-  border-top: 1px solid rgba(134, 140, 151, 0.24) !important; }
+  border-top: 1px solid rgba(110, 117, 130, 0.2) !important; }
 
 .border-top-wide {
-  border-top: 2px solid rgba(134, 140, 151, 0.24) !important; }
+  border-top: 2px solid rgba(110, 117, 130, 0.2) !important; }
 
 .border-top-0 {
   border-top: 0 !important; }
 
 .border-right {
-  border-right: 1px solid rgba(134, 140, 151, 0.24) !important; }
+  border-right: 1px solid rgba(110, 117, 130, 0.2) !important; }
 
 .border-right-wide {
-  border-right: 2px solid rgba(134, 140, 151, 0.24) !important; }
+  border-right: 2px solid rgba(110, 117, 130, 0.2) !important; }
 
 .border-right-0 {
   border-right: 0 !important; }
 
 .border-bottom {
-  border-bottom: 1px solid rgba(134, 140, 151, 0.24) !important; }
+  border-bottom: 1px solid rgba(110, 117, 130, 0.2) !important; }
 
 .border-bottom-wide {
-  border-bottom: 2px solid rgba(134, 140, 151, 0.24) !important; }
+  border-bottom: 2px solid rgba(110, 117, 130, 0.2) !important; }
 
 .border-bottom-0 {
   border-bottom: 0 !important; }
 
 .border-left {
-  border-left: 1px solid rgba(134, 140, 151, 0.24) !important; }
+  border-left: 1px solid rgba(110, 117, 130, 0.2) !important; }
 
 .border-left-wide {
-  border-left: 2px solid rgba(134, 140, 151, 0.24) !important; }
+  border-left: 2px solid rgba(110, 117, 130, 0.2) !important; }
 
 .border-left-0 {
   border-left: 0 !important; }
@@ -5017,7 +4877,7 @@ button.close {
   border-color: #206bc4 !important; }
 
 .border-secondary {
-  border-color: #868c97 !important; }
+  border-color: #6e7582 !important; }
 
 .border-success {
   border-color: #5eba00 !important; }
@@ -5029,7 +4889,7 @@ button.close {
   border-color: #fab005 !important; }
 
 .border-danger {
-  border-color: #fa4654 !important; }
+  border-color: #cd201f !important; }
 
 .border-light {
   border-color: #f5f7fb !important; }
@@ -5236,19 +5096,13 @@ button.close {
   margin: 1rem !important; }
 
 .m-4 {
-  margin: 1.25rem !important; }
+  margin: 1.5rem !important; }
 
 .m-5 {
-  margin: 2rem !important; }
-
-.m-6 {
   margin: 3rem !important; }
 
-.m-7 {
-  margin: 6rem !important; }
-
-.m-8 {
-  margin: 9rem !important; }
+.m-6 {
+  margin: 4.5rem !important; }
 
 .m-auto {
   margin: auto !important; }
@@ -5270,24 +5124,16 @@ button.close {
   margin-left: 1rem !important; }
 
 .mx-4 {
-  margin-right: 1.25rem !important;
-  margin-left: 1.25rem !important; }
+  margin-right: 1.5rem !important;
+  margin-left: 1.5rem !important; }
 
 .mx-5 {
-  margin-right: 2rem !important;
-  margin-left: 2rem !important; }
-
-.mx-6 {
   margin-right: 3rem !important;
   margin-left: 3rem !important; }
 
-.mx-7 {
-  margin-right: 6rem !important;
-  margin-left: 6rem !important; }
-
-.mx-8 {
-  margin-right: 9rem !important;
-  margin-left: 9rem !important; }
+.mx-6 {
+  margin-right: 4.5rem !important;
+  margin-left: 4.5rem !important; }
 
 .mx-auto {
   margin-right: auto !important;
@@ -5310,24 +5156,16 @@ button.close {
   margin-bottom: 1rem !important; }
 
 .my-4 {
-  margin-top: 1.25rem !important;
-  margin-bottom: 1.25rem !important; }
+  margin-top: 1.5rem !important;
+  margin-bottom: 1.5rem !important; }
 
 .my-5 {
-  margin-top: 2rem !important;
-  margin-bottom: 2rem !important; }
-
-.my-6 {
   margin-top: 3rem !important;
   margin-bottom: 3rem !important; }
 
-.my-7 {
-  margin-top: 6rem !important;
-  margin-bottom: 6rem !important; }
-
-.my-8 {
-  margin-top: 9rem !important;
-  margin-bottom: 9rem !important; }
+.my-6 {
+  margin-top: 4.5rem !important;
+  margin-bottom: 4.5rem !important; }
 
 .my-auto {
   margin-top: auto !important;
@@ -5346,19 +5184,13 @@ button.close {
   margin-top: 1rem !important; }
 
 .mt-4 {
-  margin-top: 1.25rem !important; }
+  margin-top: 1.5rem !important; }
 
 .mt-5 {
-  margin-top: 2rem !important; }
-
-.mt-6 {
   margin-top: 3rem !important; }
 
-.mt-7 {
-  margin-top: 6rem !important; }
-
-.mt-8 {
-  margin-top: 9rem !important; }
+.mt-6 {
+  margin-top: 4.5rem !important; }
 
 .mt-auto {
   margin-top: auto !important; }
@@ -5376,19 +5208,13 @@ button.close {
   margin-right: 1rem !important; }
 
 .mr-4 {
-  margin-right: 1.25rem !important; }
+  margin-right: 1.5rem !important; }
 
 .mr-5 {
-  margin-right: 2rem !important; }
-
-.mr-6 {
   margin-right: 3rem !important; }
 
-.mr-7 {
-  margin-right: 6rem !important; }
-
-.mr-8 {
-  margin-right: 9rem !important; }
+.mr-6 {
+  margin-right: 4.5rem !important; }
 
 .mr-auto {
   margin-right: auto !important; }
@@ -5406,19 +5232,13 @@ button.close {
   margin-bottom: 1rem !important; }
 
 .mb-4 {
-  margin-bottom: 1.25rem !important; }
+  margin-bottom: 1.5rem !important; }
 
 .mb-5 {
-  margin-bottom: 2rem !important; }
-
-.mb-6 {
   margin-bottom: 3rem !important; }
 
-.mb-7 {
-  margin-bottom: 6rem !important; }
-
-.mb-8 {
-  margin-bottom: 9rem !important; }
+.mb-6 {
+  margin-bottom: 4.5rem !important; }
 
 .mb-auto {
   margin-bottom: auto !important; }
@@ -5436,19 +5256,13 @@ button.close {
   margin-left: 1rem !important; }
 
 .ml-4 {
-  margin-left: 1.25rem !important; }
+  margin-left: 1.5rem !important; }
 
 .ml-5 {
-  margin-left: 2rem !important; }
-
-.ml-6 {
   margin-left: 3rem !important; }
 
-.ml-7 {
-  margin-left: 6rem !important; }
-
-.ml-8 {
-  margin-left: 9rem !important; }
+.ml-6 {
+  margin-left: 4.5rem !important; }
 
 .ml-auto {
   margin-left: auto !important; }
@@ -5463,19 +5277,13 @@ button.close {
   margin: -1rem !important; }
 
 .m-n4 {
-  margin: -1.25rem !important; }
+  margin: -1.5rem !important; }
 
 .m-n5 {
-  margin: -2rem !important; }
-
-.m-n6 {
   margin: -3rem !important; }
 
-.m-n7 {
-  margin: -6rem !important; }
-
-.m-n8 {
-  margin: -9rem !important; }
+.m-n6 {
+  margin: -4.5rem !important; }
 
 .mx-n1 {
   margin-right: -0.25rem !important;
@@ -5490,24 +5298,16 @@ button.close {
   margin-left: -1rem !important; }
 
 .mx-n4 {
-  margin-right: -1.25rem !important;
-  margin-left: -1.25rem !important; }
+  margin-right: -1.5rem !important;
+  margin-left: -1.5rem !important; }
 
 .mx-n5 {
-  margin-right: -2rem !important;
-  margin-left: -2rem !important; }
-
-.mx-n6 {
   margin-right: -3rem !important;
   margin-left: -3rem !important; }
 
-.mx-n7 {
-  margin-right: -6rem !important;
-  margin-left: -6rem !important; }
-
-.mx-n8 {
-  margin-right: -9rem !important;
-  margin-left: -9rem !important; }
+.mx-n6 {
+  margin-right: -4.5rem !important;
+  margin-left: -4.5rem !important; }
 
 .my-n1 {
   margin-top: -0.25rem !important;
@@ -5522,24 +5322,16 @@ button.close {
   margin-bottom: -1rem !important; }
 
 .my-n4 {
-  margin-top: -1.25rem !important;
-  margin-bottom: -1.25rem !important; }
+  margin-top: -1.5rem !important;
+  margin-bottom: -1.5rem !important; }
 
 .my-n5 {
-  margin-top: -2rem !important;
-  margin-bottom: -2rem !important; }
-
-.my-n6 {
   margin-top: -3rem !important;
   margin-bottom: -3rem !important; }
 
-.my-n7 {
-  margin-top: -6rem !important;
-  margin-bottom: -6rem !important; }
-
-.my-n8 {
-  margin-top: -9rem !important;
-  margin-bottom: -9rem !important; }
+.my-n6 {
+  margin-top: -4.5rem !important;
+  margin-bottom: -4.5rem !important; }
 
 .mt-n1 {
   margin-top: -0.25rem !important; }
@@ -5551,19 +5343,13 @@ button.close {
   margin-top: -1rem !important; }
 
 .mt-n4 {
-  margin-top: -1.25rem !important; }
+  margin-top: -1.5rem !important; }
 
 .mt-n5 {
-  margin-top: -2rem !important; }
-
-.mt-n6 {
   margin-top: -3rem !important; }
 
-.mt-n7 {
-  margin-top: -6rem !important; }
-
-.mt-n8 {
-  margin-top: -9rem !important; }
+.mt-n6 {
+  margin-top: -4.5rem !important; }
 
 .mr-n1 {
   margin-right: -0.25rem !important; }
@@ -5575,19 +5361,13 @@ button.close {
   margin-right: -1rem !important; }
 
 .mr-n4 {
-  margin-right: -1.25rem !important; }
+  margin-right: -1.5rem !important; }
 
 .mr-n5 {
-  margin-right: -2rem !important; }
-
-.mr-n6 {
   margin-right: -3rem !important; }
 
-.mr-n7 {
-  margin-right: -6rem !important; }
-
-.mr-n8 {
-  margin-right: -9rem !important; }
+.mr-n6 {
+  margin-right: -4.5rem !important; }
 
 .mb-n1 {
   margin-bottom: -0.25rem !important; }
@@ -5599,19 +5379,13 @@ button.close {
   margin-bottom: -1rem !important; }
 
 .mb-n4 {
-  margin-bottom: -1.25rem !important; }
+  margin-bottom: -1.5rem !important; }
 
 .mb-n5 {
-  margin-bottom: -2rem !important; }
-
-.mb-n6 {
   margin-bottom: -3rem !important; }
 
-.mb-n7 {
-  margin-bottom: -6rem !important; }
-
-.mb-n8 {
-  margin-bottom: -9rem !important; }
+.mb-n6 {
+  margin-bottom: -4.5rem !important; }
 
 .ml-n1 {
   margin-left: -0.25rem !important; }
@@ -5623,19 +5397,13 @@ button.close {
   margin-left: -1rem !important; }
 
 .ml-n4 {
-  margin-left: -1.25rem !important; }
+  margin-left: -1.5rem !important; }
 
 .ml-n5 {
-  margin-left: -2rem !important; }
-
-.ml-n6 {
   margin-left: -3rem !important; }
 
-.ml-n7 {
-  margin-left: -6rem !important; }
-
-.ml-n8 {
-  margin-left: -9rem !important; }
+.ml-n6 {
+  margin-left: -4.5rem !important; }
 
 .p-0 {
   padding: 0 !important; }
@@ -5650,19 +5418,13 @@ button.close {
   padding: 1rem !important; }
 
 .p-4 {
-  padding: 1.25rem !important; }
+  padding: 1.5rem !important; }
 
 .p-5 {
-  padding: 2rem !important; }
-
-.p-6 {
   padding: 3rem !important; }
 
-.p-7 {
-  padding: 6rem !important; }
-
-.p-8 {
-  padding: 9rem !important; }
+.p-6 {
+  padding: 4.5rem !important; }
 
 .px-0 {
   padding-right: 0 !important;
@@ -5681,24 +5443,16 @@ button.close {
   padding-left: 1rem !important; }
 
 .px-4 {
-  padding-right: 1.25rem !important;
-  padding-left: 1.25rem !important; }
+  padding-right: 1.5rem !important;
+  padding-left: 1.5rem !important; }
 
 .px-5 {
-  padding-right: 2rem !important;
-  padding-left: 2rem !important; }
-
-.px-6 {
   padding-right: 3rem !important;
   padding-left: 3rem !important; }
 
-.px-7 {
-  padding-right: 6rem !important;
-  padding-left: 6rem !important; }
-
-.px-8 {
-  padding-right: 9rem !important;
-  padding-left: 9rem !important; }
+.px-6 {
+  padding-right: 4.5rem !important;
+  padding-left: 4.5rem !important; }
 
 .py-0 {
   padding-top: 0 !important;
@@ -5717,24 +5471,16 @@ button.close {
   padding-bottom: 1rem !important; }
 
 .py-4 {
-  padding-top: 1.25rem !important;
-  padding-bottom: 1.25rem !important; }
+  padding-top: 1.5rem !important;
+  padding-bottom: 1.5rem !important; }
 
 .py-5 {
-  padding-top: 2rem !important;
-  padding-bottom: 2rem !important; }
-
-.py-6 {
   padding-top: 3rem !important;
   padding-bottom: 3rem !important; }
 
-.py-7 {
-  padding-top: 6rem !important;
-  padding-bottom: 6rem !important; }
-
-.py-8 {
-  padding-top: 9rem !important;
-  padding-bottom: 9rem !important; }
+.py-6 {
+  padding-top: 4.5rem !important;
+  padding-bottom: 4.5rem !important; }
 
 .pt-0 {
   padding-top: 0 !important; }
@@ -5749,19 +5495,13 @@ button.close {
   padding-top: 1rem !important; }
 
 .pt-4 {
-  padding-top: 1.25rem !important; }
+  padding-top: 1.5rem !important; }
 
 .pt-5 {
-  padding-top: 2rem !important; }
-
-.pt-6 {
   padding-top: 3rem !important; }
 
-.pt-7 {
-  padding-top: 6rem !important; }
-
-.pt-8 {
-  padding-top: 9rem !important; }
+.pt-6 {
+  padding-top: 4.5rem !important; }
 
 .pr-0 {
   padding-right: 0 !important; }
@@ -5776,19 +5516,13 @@ button.close {
   padding-right: 1rem !important; }
 
 .pr-4 {
-  padding-right: 1.25rem !important; }
+  padding-right: 1.5rem !important; }
 
 .pr-5 {
-  padding-right: 2rem !important; }
-
-.pr-6 {
   padding-right: 3rem !important; }
 
-.pr-7 {
-  padding-right: 6rem !important; }
-
-.pr-8 {
-  padding-right: 9rem !important; }
+.pr-6 {
+  padding-right: 4.5rem !important; }
 
 .pb-0 {
   padding-bottom: 0 !important; }
@@ -5803,19 +5537,13 @@ button.close {
   padding-bottom: 1rem !important; }
 
 .pb-4 {
-  padding-bottom: 1.25rem !important; }
+  padding-bottom: 1.5rem !important; }
 
 .pb-5 {
-  padding-bottom: 2rem !important; }
-
-.pb-6 {
   padding-bottom: 3rem !important; }
 
-.pb-7 {
-  padding-bottom: 6rem !important; }
-
-.pb-8 {
-  padding-bottom: 9rem !important; }
+.pb-6 {
+  padding-bottom: 4.5rem !important; }
 
 .pl-0 {
   padding-left: 0 !important; }
@@ -5830,19 +5558,13 @@ button.close {
   padding-left: 1rem !important; }
 
 .pl-4 {
-  padding-left: 1.25rem !important; }
+  padding-left: 1.5rem !important; }
 
 .pl-5 {
-  padding-left: 2rem !important; }
-
-.pl-6 {
   padding-left: 3rem !important; }
 
-.pl-7 {
-  padding-left: 6rem !important; }
-
-.pl-8 {
-  padding-left: 9rem !important; }
+.pl-6 {
+  padding-left: 4.5rem !important; }
 
 .font-weight-light {
   font-weight: 300 !important; }
@@ -5887,7 +5609,7 @@ button.close {
   color: #206bc4 !important; }
 
 .text-secondary {
-  color: #868c97 !important; }
+  color: #6e7582 !important; }
 
 .text-success {
   color: #5eba00 !important; }
@@ -5899,7 +5621,7 @@ button.close {
   color: #fab005 !important; }
 
 .text-danger {
-  color: #fa4654 !important; }
+  color: #cd201f !important; }
 
 .text-light {
   color: #f5f7fb !important; }
@@ -5914,7 +5636,7 @@ button.close {
   color: #354052 !important; }
 
 .text-muted {
-  color: #868c97 !important; }
+  color: #6e7582 !important; }
 
 .text-black-50 {
   color: rgba(0, 0, 0, 0.5) !important; }
@@ -5932,7 +5654,7 @@ button.close {
   line-height: 1.3333334 !important; }
 
 .lh-base {
-  line-height: 1.6 !important; }
+  line-height: 1.7142857 !important; }
 
 .lh-lg {
   line-height: 2.1333334 !important; }
@@ -5941,7 +5663,7 @@ button.close {
   background-color: #206bc4 !important; }
 
 .bg-secondary {
-  background-color: #868c97 !important; }
+  background-color: #6e7582 !important; }
 
 .bg-success {
   background-color: #5eba00 !important; }
@@ -5953,7 +5675,7 @@ button.close {
   background-color: #fab005 !important; }
 
 .bg-danger {
-  background-color: #fa4654 !important; }
+  background-color: #cd201f !important; }
 
 .bg-light {
   background-color: #f5f7fb !important; }
@@ -6109,7 +5831,7 @@ button.close {
   cursor: zoom-out !important; }
 
 .text-h1 {
-  font-size: 1.625rem !important; }
+  font-size: 1.75rem !important; }
 
 .text-h2 {
   font-size: 1.375rem !important; }
@@ -6118,13 +5840,13 @@ button.close {
   font-size: 1.125rem !important; }
 
 .text-h4 {
-  font-size: 0.9375rem !important; }
+  font-size: 0.875rem !important; }
 
 .text-h5 {
-  font-size: 0.8125rem !important; }
+  font-size: 0.75rem !important; }
 
 .text-h6 {
-  font-size: 0.6875rem !important; }
+  font-size: 0.625rem !important; }
 
 .leading-0 {
   line-height: 0 !important; }
@@ -6139,19 +5861,13 @@ button.close {
   line-height: 1rem !important; }
 
 .leading-4 {
-  line-height: 1.25rem !important; }
+  line-height: 1.5rem !important; }
 
 .leading-5 {
-  line-height: 2rem !important; }
-
-.leading-6 {
   line-height: 3rem !important; }
 
-.leading-7 {
-  line-height: 6rem !important; }
-
-.leading-8 {
-  line-height: 9rem !important; }
+.leading-6 {
+  line-height: 4.5rem !important; }
 
 @media (min-width: 33rem) {
   .float-sm-left {
@@ -6274,15 +5990,11 @@ button.close {
   .m-sm-3 {
     margin: 1rem !important; }
   .m-sm-4 {
-    margin: 1.25rem !important; }
+    margin: 1.5rem !important; }
   .m-sm-5 {
-    margin: 2rem !important; }
-  .m-sm-6 {
     margin: 3rem !important; }
-  .m-sm-7 {
-    margin: 6rem !important; }
-  .m-sm-8 {
-    margin: 9rem !important; }
+  .m-sm-6 {
+    margin: 4.5rem !important; }
   .m-sm-auto {
     margin: auto !important; }
   .mx-sm-0 {
@@ -6298,20 +6010,14 @@ button.close {
     margin-right: 1rem !important;
     margin-left: 1rem !important; }
   .mx-sm-4 {
-    margin-right: 1.25rem !important;
-    margin-left: 1.25rem !important; }
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important; }
   .mx-sm-5 {
-    margin-right: 2rem !important;
-    margin-left: 2rem !important; }
-  .mx-sm-6 {
     margin-right: 3rem !important;
     margin-left: 3rem !important; }
-  .mx-sm-7 {
-    margin-right: 6rem !important;
-    margin-left: 6rem !important; }
-  .mx-sm-8 {
-    margin-right: 9rem !important;
-    margin-left: 9rem !important; }
+  .mx-sm-6 {
+    margin-right: 4.5rem !important;
+    margin-left: 4.5rem !important; }
   .mx-sm-auto {
     margin-right: auto !important;
     margin-left: auto !important; }
@@ -6328,20 +6034,14 @@ button.close {
     margin-top: 1rem !important;
     margin-bottom: 1rem !important; }
   .my-sm-4 {
-    margin-top: 1.25rem !important;
-    margin-bottom: 1.25rem !important; }
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important; }
   .my-sm-5 {
-    margin-top: 2rem !important;
-    margin-bottom: 2rem !important; }
-  .my-sm-6 {
     margin-top: 3rem !important;
     margin-bottom: 3rem !important; }
-  .my-sm-7 {
-    margin-top: 6rem !important;
-    margin-bottom: 6rem !important; }
-  .my-sm-8 {
-    margin-top: 9rem !important;
-    margin-bottom: 9rem !important; }
+  .my-sm-6 {
+    margin-top: 4.5rem !important;
+    margin-bottom: 4.5rem !important; }
   .my-sm-auto {
     margin-top: auto !important;
     margin-bottom: auto !important; }
@@ -6354,15 +6054,11 @@ button.close {
   .mt-sm-3 {
     margin-top: 1rem !important; }
   .mt-sm-4 {
-    margin-top: 1.25rem !important; }
+    margin-top: 1.5rem !important; }
   .mt-sm-5 {
-    margin-top: 2rem !important; }
-  .mt-sm-6 {
     margin-top: 3rem !important; }
-  .mt-sm-7 {
-    margin-top: 6rem !important; }
-  .mt-sm-8 {
-    margin-top: 9rem !important; }
+  .mt-sm-6 {
+    margin-top: 4.5rem !important; }
   .mt-sm-auto {
     margin-top: auto !important; }
   .mr-sm-0 {
@@ -6374,15 +6070,11 @@ button.close {
   .mr-sm-3 {
     margin-right: 1rem !important; }
   .mr-sm-4 {
-    margin-right: 1.25rem !important; }
+    margin-right: 1.5rem !important; }
   .mr-sm-5 {
-    margin-right: 2rem !important; }
-  .mr-sm-6 {
     margin-right: 3rem !important; }
-  .mr-sm-7 {
-    margin-right: 6rem !important; }
-  .mr-sm-8 {
-    margin-right: 9rem !important; }
+  .mr-sm-6 {
+    margin-right: 4.5rem !important; }
   .mr-sm-auto {
     margin-right: auto !important; }
   .mb-sm-0 {
@@ -6394,15 +6086,11 @@ button.close {
   .mb-sm-3 {
     margin-bottom: 1rem !important; }
   .mb-sm-4 {
-    margin-bottom: 1.25rem !important; }
+    margin-bottom: 1.5rem !important; }
   .mb-sm-5 {
-    margin-bottom: 2rem !important; }
-  .mb-sm-6 {
     margin-bottom: 3rem !important; }
-  .mb-sm-7 {
-    margin-bottom: 6rem !important; }
-  .mb-sm-8 {
-    margin-bottom: 9rem !important; }
+  .mb-sm-6 {
+    margin-bottom: 4.5rem !important; }
   .mb-sm-auto {
     margin-bottom: auto !important; }
   .ml-sm-0 {
@@ -6414,15 +6102,11 @@ button.close {
   .ml-sm-3 {
     margin-left: 1rem !important; }
   .ml-sm-4 {
-    margin-left: 1.25rem !important; }
+    margin-left: 1.5rem !important; }
   .ml-sm-5 {
-    margin-left: 2rem !important; }
-  .ml-sm-6 {
     margin-left: 3rem !important; }
-  .ml-sm-7 {
-    margin-left: 6rem !important; }
-  .ml-sm-8 {
-    margin-left: 9rem !important; }
+  .ml-sm-6 {
+    margin-left: 4.5rem !important; }
   .ml-sm-auto {
     margin-left: auto !important; }
   .m-sm-n1 {
@@ -6432,15 +6116,11 @@ button.close {
   .m-sm-n3 {
     margin: -1rem !important; }
   .m-sm-n4 {
-    margin: -1.25rem !important; }
+    margin: -1.5rem !important; }
   .m-sm-n5 {
-    margin: -2rem !important; }
-  .m-sm-n6 {
     margin: -3rem !important; }
-  .m-sm-n7 {
-    margin: -6rem !important; }
-  .m-sm-n8 {
-    margin: -9rem !important; }
+  .m-sm-n6 {
+    margin: -4.5rem !important; }
   .mx-sm-n1 {
     margin-right: -0.25rem !important;
     margin-left: -0.25rem !important; }
@@ -6451,20 +6131,14 @@ button.close {
     margin-right: -1rem !important;
     margin-left: -1rem !important; }
   .mx-sm-n4 {
-    margin-right: -1.25rem !important;
-    margin-left: -1.25rem !important; }
+    margin-right: -1.5rem !important;
+    margin-left: -1.5rem !important; }
   .mx-sm-n5 {
-    margin-right: -2rem !important;
-    margin-left: -2rem !important; }
-  .mx-sm-n6 {
     margin-right: -3rem !important;
     margin-left: -3rem !important; }
-  .mx-sm-n7 {
-    margin-right: -6rem !important;
-    margin-left: -6rem !important; }
-  .mx-sm-n8 {
-    margin-right: -9rem !important;
-    margin-left: -9rem !important; }
+  .mx-sm-n6 {
+    margin-right: -4.5rem !important;
+    margin-left: -4.5rem !important; }
   .my-sm-n1 {
     margin-top: -0.25rem !important;
     margin-bottom: -0.25rem !important; }
@@ -6475,20 +6149,14 @@ button.close {
     margin-top: -1rem !important;
     margin-bottom: -1rem !important; }
   .my-sm-n4 {
-    margin-top: -1.25rem !important;
-    margin-bottom: -1.25rem !important; }
+    margin-top: -1.5rem !important;
+    margin-bottom: -1.5rem !important; }
   .my-sm-n5 {
-    margin-top: -2rem !important;
-    margin-bottom: -2rem !important; }
-  .my-sm-n6 {
     margin-top: -3rem !important;
     margin-bottom: -3rem !important; }
-  .my-sm-n7 {
-    margin-top: -6rem !important;
-    margin-bottom: -6rem !important; }
-  .my-sm-n8 {
-    margin-top: -9rem !important;
-    margin-bottom: -9rem !important; }
+  .my-sm-n6 {
+    margin-top: -4.5rem !important;
+    margin-bottom: -4.5rem !important; }
   .mt-sm-n1 {
     margin-top: -0.25rem !important; }
   .mt-sm-n2 {
@@ -6496,15 +6164,11 @@ button.close {
   .mt-sm-n3 {
     margin-top: -1rem !important; }
   .mt-sm-n4 {
-    margin-top: -1.25rem !important; }
+    margin-top: -1.5rem !important; }
   .mt-sm-n5 {
-    margin-top: -2rem !important; }
-  .mt-sm-n6 {
     margin-top: -3rem !important; }
-  .mt-sm-n7 {
-    margin-top: -6rem !important; }
-  .mt-sm-n8 {
-    margin-top: -9rem !important; }
+  .mt-sm-n6 {
+    margin-top: -4.5rem !important; }
   .mr-sm-n1 {
     margin-right: -0.25rem !important; }
   .mr-sm-n2 {
@@ -6512,15 +6176,11 @@ button.close {
   .mr-sm-n3 {
     margin-right: -1rem !important; }
   .mr-sm-n4 {
-    margin-right: -1.25rem !important; }
+    margin-right: -1.5rem !important; }
   .mr-sm-n5 {
-    margin-right: -2rem !important; }
-  .mr-sm-n6 {
     margin-right: -3rem !important; }
-  .mr-sm-n7 {
-    margin-right: -6rem !important; }
-  .mr-sm-n8 {
-    margin-right: -9rem !important; }
+  .mr-sm-n6 {
+    margin-right: -4.5rem !important; }
   .mb-sm-n1 {
     margin-bottom: -0.25rem !important; }
   .mb-sm-n2 {
@@ -6528,15 +6188,11 @@ button.close {
   .mb-sm-n3 {
     margin-bottom: -1rem !important; }
   .mb-sm-n4 {
-    margin-bottom: -1.25rem !important; }
+    margin-bottom: -1.5rem !important; }
   .mb-sm-n5 {
-    margin-bottom: -2rem !important; }
-  .mb-sm-n6 {
     margin-bottom: -3rem !important; }
-  .mb-sm-n7 {
-    margin-bottom: -6rem !important; }
-  .mb-sm-n8 {
-    margin-bottom: -9rem !important; }
+  .mb-sm-n6 {
+    margin-bottom: -4.5rem !important; }
   .ml-sm-n1 {
     margin-left: -0.25rem !important; }
   .ml-sm-n2 {
@@ -6544,15 +6200,11 @@ button.close {
   .ml-sm-n3 {
     margin-left: -1rem !important; }
   .ml-sm-n4 {
-    margin-left: -1.25rem !important; }
+    margin-left: -1.5rem !important; }
   .ml-sm-n5 {
-    margin-left: -2rem !important; }
-  .ml-sm-n6 {
     margin-left: -3rem !important; }
-  .ml-sm-n7 {
-    margin-left: -6rem !important; }
-  .ml-sm-n8 {
-    margin-left: -9rem !important; }
+  .ml-sm-n6 {
+    margin-left: -4.5rem !important; }
   .p-sm-0 {
     padding: 0 !important; }
   .p-sm-1 {
@@ -6562,15 +6214,11 @@ button.close {
   .p-sm-3 {
     padding: 1rem !important; }
   .p-sm-4 {
-    padding: 1.25rem !important; }
+    padding: 1.5rem !important; }
   .p-sm-5 {
-    padding: 2rem !important; }
-  .p-sm-6 {
     padding: 3rem !important; }
-  .p-sm-7 {
-    padding: 6rem !important; }
-  .p-sm-8 {
-    padding: 9rem !important; }
+  .p-sm-6 {
+    padding: 4.5rem !important; }
   .px-sm-0 {
     padding-right: 0 !important;
     padding-left: 0 !important; }
@@ -6584,20 +6232,14 @@ button.close {
     padding-right: 1rem !important;
     padding-left: 1rem !important; }
   .px-sm-4 {
-    padding-right: 1.25rem !important;
-    padding-left: 1.25rem !important; }
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important; }
   .px-sm-5 {
-    padding-right: 2rem !important;
-    padding-left: 2rem !important; }
-  .px-sm-6 {
     padding-right: 3rem !important;
     padding-left: 3rem !important; }
-  .px-sm-7 {
-    padding-right: 6rem !important;
-    padding-left: 6rem !important; }
-  .px-sm-8 {
-    padding-right: 9rem !important;
-    padding-left: 9rem !important; }
+  .px-sm-6 {
+    padding-right: 4.5rem !important;
+    padding-left: 4.5rem !important; }
   .py-sm-0 {
     padding-top: 0 !important;
     padding-bottom: 0 !important; }
@@ -6611,20 +6253,14 @@ button.close {
     padding-top: 1rem !important;
     padding-bottom: 1rem !important; }
   .py-sm-4 {
-    padding-top: 1.25rem !important;
-    padding-bottom: 1.25rem !important; }
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important; }
   .py-sm-5 {
-    padding-top: 2rem !important;
-    padding-bottom: 2rem !important; }
-  .py-sm-6 {
     padding-top: 3rem !important;
     padding-bottom: 3rem !important; }
-  .py-sm-7 {
-    padding-top: 6rem !important;
-    padding-bottom: 6rem !important; }
-  .py-sm-8 {
-    padding-top: 9rem !important;
-    padding-bottom: 9rem !important; }
+  .py-sm-6 {
+    padding-top: 4.5rem !important;
+    padding-bottom: 4.5rem !important; }
   .pt-sm-0 {
     padding-top: 0 !important; }
   .pt-sm-1 {
@@ -6634,15 +6270,11 @@ button.close {
   .pt-sm-3 {
     padding-top: 1rem !important; }
   .pt-sm-4 {
-    padding-top: 1.25rem !important; }
+    padding-top: 1.5rem !important; }
   .pt-sm-5 {
-    padding-top: 2rem !important; }
-  .pt-sm-6 {
     padding-top: 3rem !important; }
-  .pt-sm-7 {
-    padding-top: 6rem !important; }
-  .pt-sm-8 {
-    padding-top: 9rem !important; }
+  .pt-sm-6 {
+    padding-top: 4.5rem !important; }
   .pr-sm-0 {
     padding-right: 0 !important; }
   .pr-sm-1 {
@@ -6652,15 +6284,11 @@ button.close {
   .pr-sm-3 {
     padding-right: 1rem !important; }
   .pr-sm-4 {
-    padding-right: 1.25rem !important; }
+    padding-right: 1.5rem !important; }
   .pr-sm-5 {
-    padding-right: 2rem !important; }
-  .pr-sm-6 {
     padding-right: 3rem !important; }
-  .pr-sm-7 {
-    padding-right: 6rem !important; }
-  .pr-sm-8 {
-    padding-right: 9rem !important; }
+  .pr-sm-6 {
+    padding-right: 4.5rem !important; }
   .pb-sm-0 {
     padding-bottom: 0 !important; }
   .pb-sm-1 {
@@ -6670,15 +6298,11 @@ button.close {
   .pb-sm-3 {
     padding-bottom: 1rem !important; }
   .pb-sm-4 {
-    padding-bottom: 1.25rem !important; }
+    padding-bottom: 1.5rem !important; }
   .pb-sm-5 {
-    padding-bottom: 2rem !important; }
-  .pb-sm-6 {
     padding-bottom: 3rem !important; }
-  .pb-sm-7 {
-    padding-bottom: 6rem !important; }
-  .pb-sm-8 {
-    padding-bottom: 9rem !important; }
+  .pb-sm-6 {
+    padding-bottom: 4.5rem !important; }
   .pl-sm-0 {
     padding-left: 0 !important; }
   .pl-sm-1 {
@@ -6688,15 +6312,11 @@ button.close {
   .pl-sm-3 {
     padding-left: 1rem !important; }
   .pl-sm-4 {
-    padding-left: 1.25rem !important; }
+    padding-left: 1.5rem !important; }
   .pl-sm-5 {
-    padding-left: 2rem !important; }
-  .pl-sm-6 {
     padding-left: 3rem !important; }
-  .pl-sm-7 {
-    padding-left: 6rem !important; }
-  .pl-sm-8 {
-    padding-left: 9rem !important; }
+  .pl-sm-6 {
+    padding-left: 4.5rem !important; }
   .text-sm-left {
     text-align: left !important; }
   .text-sm-right {
@@ -6825,15 +6445,11 @@ button.close {
   .m-md-3 {
     margin: 1rem !important; }
   .m-md-4 {
-    margin: 1.25rem !important; }
+    margin: 1.5rem !important; }
   .m-md-5 {
-    margin: 2rem !important; }
-  .m-md-6 {
     margin: 3rem !important; }
-  .m-md-7 {
-    margin: 6rem !important; }
-  .m-md-8 {
-    margin: 9rem !important; }
+  .m-md-6 {
+    margin: 4.5rem !important; }
   .m-md-auto {
     margin: auto !important; }
   .mx-md-0 {
@@ -6849,20 +6465,14 @@ button.close {
     margin-right: 1rem !important;
     margin-left: 1rem !important; }
   .mx-md-4 {
-    margin-right: 1.25rem !important;
-    margin-left: 1.25rem !important; }
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important; }
   .mx-md-5 {
-    margin-right: 2rem !important;
-    margin-left: 2rem !important; }
-  .mx-md-6 {
     margin-right: 3rem !important;
     margin-left: 3rem !important; }
-  .mx-md-7 {
-    margin-right: 6rem !important;
-    margin-left: 6rem !important; }
-  .mx-md-8 {
-    margin-right: 9rem !important;
-    margin-left: 9rem !important; }
+  .mx-md-6 {
+    margin-right: 4.5rem !important;
+    margin-left: 4.5rem !important; }
   .mx-md-auto {
     margin-right: auto !important;
     margin-left: auto !important; }
@@ -6879,20 +6489,14 @@ button.close {
     margin-top: 1rem !important;
     margin-bottom: 1rem !important; }
   .my-md-4 {
-    margin-top: 1.25rem !important;
-    margin-bottom: 1.25rem !important; }
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important; }
   .my-md-5 {
-    margin-top: 2rem !important;
-    margin-bottom: 2rem !important; }
-  .my-md-6 {
     margin-top: 3rem !important;
     margin-bottom: 3rem !important; }
-  .my-md-7 {
-    margin-top: 6rem !important;
-    margin-bottom: 6rem !important; }
-  .my-md-8 {
-    margin-top: 9rem !important;
-    margin-bottom: 9rem !important; }
+  .my-md-6 {
+    margin-top: 4.5rem !important;
+    margin-bottom: 4.5rem !important; }
   .my-md-auto {
     margin-top: auto !important;
     margin-bottom: auto !important; }
@@ -6905,15 +6509,11 @@ button.close {
   .mt-md-3 {
     margin-top: 1rem !important; }
   .mt-md-4 {
-    margin-top: 1.25rem !important; }
+    margin-top: 1.5rem !important; }
   .mt-md-5 {
-    margin-top: 2rem !important; }
-  .mt-md-6 {
     margin-top: 3rem !important; }
-  .mt-md-7 {
-    margin-top: 6rem !important; }
-  .mt-md-8 {
-    margin-top: 9rem !important; }
+  .mt-md-6 {
+    margin-top: 4.5rem !important; }
   .mt-md-auto {
     margin-top: auto !important; }
   .mr-md-0 {
@@ -6925,15 +6525,11 @@ button.close {
   .mr-md-3 {
     margin-right: 1rem !important; }
   .mr-md-4 {
-    margin-right: 1.25rem !important; }
+    margin-right: 1.5rem !important; }
   .mr-md-5 {
-    margin-right: 2rem !important; }
-  .mr-md-6 {
     margin-right: 3rem !important; }
-  .mr-md-7 {
-    margin-right: 6rem !important; }
-  .mr-md-8 {
-    margin-right: 9rem !important; }
+  .mr-md-6 {
+    margin-right: 4.5rem !important; }
   .mr-md-auto {
     margin-right: auto !important; }
   .mb-md-0 {
@@ -6945,15 +6541,11 @@ button.close {
   .mb-md-3 {
     margin-bottom: 1rem !important; }
   .mb-md-4 {
-    margin-bottom: 1.25rem !important; }
+    margin-bottom: 1.5rem !important; }
   .mb-md-5 {
-    margin-bottom: 2rem !important; }
-  .mb-md-6 {
     margin-bottom: 3rem !important; }
-  .mb-md-7 {
-    margin-bottom: 6rem !important; }
-  .mb-md-8 {
-    margin-bottom: 9rem !important; }
+  .mb-md-6 {
+    margin-bottom: 4.5rem !important; }
   .mb-md-auto {
     margin-bottom: auto !important; }
   .ml-md-0 {
@@ -6965,15 +6557,11 @@ button.close {
   .ml-md-3 {
     margin-left: 1rem !important; }
   .ml-md-4 {
-    margin-left: 1.25rem !important; }
+    margin-left: 1.5rem !important; }
   .ml-md-5 {
-    margin-left: 2rem !important; }
-  .ml-md-6 {
     margin-left: 3rem !important; }
-  .ml-md-7 {
-    margin-left: 6rem !important; }
-  .ml-md-8 {
-    margin-left: 9rem !important; }
+  .ml-md-6 {
+    margin-left: 4.5rem !important; }
   .ml-md-auto {
     margin-left: auto !important; }
   .m-md-n1 {
@@ -6983,15 +6571,11 @@ button.close {
   .m-md-n3 {
     margin: -1rem !important; }
   .m-md-n4 {
-    margin: -1.25rem !important; }
+    margin: -1.5rem !important; }
   .m-md-n5 {
-    margin: -2rem !important; }
-  .m-md-n6 {
     margin: -3rem !important; }
-  .m-md-n7 {
-    margin: -6rem !important; }
-  .m-md-n8 {
-    margin: -9rem !important; }
+  .m-md-n6 {
+    margin: -4.5rem !important; }
   .mx-md-n1 {
     margin-right: -0.25rem !important;
     margin-left: -0.25rem !important; }
@@ -7002,20 +6586,14 @@ button.close {
     margin-right: -1rem !important;
     margin-left: -1rem !important; }
   .mx-md-n4 {
-    margin-right: -1.25rem !important;
-    margin-left: -1.25rem !important; }
+    margin-right: -1.5rem !important;
+    margin-left: -1.5rem !important; }
   .mx-md-n5 {
-    margin-right: -2rem !important;
-    margin-left: -2rem !important; }
-  .mx-md-n6 {
     margin-right: -3rem !important;
     margin-left: -3rem !important; }
-  .mx-md-n7 {
-    margin-right: -6rem !important;
-    margin-left: -6rem !important; }
-  .mx-md-n8 {
-    margin-right: -9rem !important;
-    margin-left: -9rem !important; }
+  .mx-md-n6 {
+    margin-right: -4.5rem !important;
+    margin-left: -4.5rem !important; }
   .my-md-n1 {
     margin-top: -0.25rem !important;
     margin-bottom: -0.25rem !important; }
@@ -7026,20 +6604,14 @@ button.close {
     margin-top: -1rem !important;
     margin-bottom: -1rem !important; }
   .my-md-n4 {
-    margin-top: -1.25rem !important;
-    margin-bottom: -1.25rem !important; }
+    margin-top: -1.5rem !important;
+    margin-bottom: -1.5rem !important; }
   .my-md-n5 {
-    margin-top: -2rem !important;
-    margin-bottom: -2rem !important; }
-  .my-md-n6 {
     margin-top: -3rem !important;
     margin-bottom: -3rem !important; }
-  .my-md-n7 {
-    margin-top: -6rem !important;
-    margin-bottom: -6rem !important; }
-  .my-md-n8 {
-    margin-top: -9rem !important;
-    margin-bottom: -9rem !important; }
+  .my-md-n6 {
+    margin-top: -4.5rem !important;
+    margin-bottom: -4.5rem !important; }
   .mt-md-n1 {
     margin-top: -0.25rem !important; }
   .mt-md-n2 {
@@ -7047,15 +6619,11 @@ button.close {
   .mt-md-n3 {
     margin-top: -1rem !important; }
   .mt-md-n4 {
-    margin-top: -1.25rem !important; }
+    margin-top: -1.5rem !important; }
   .mt-md-n5 {
-    margin-top: -2rem !important; }
-  .mt-md-n6 {
     margin-top: -3rem !important; }
-  .mt-md-n7 {
-    margin-top: -6rem !important; }
-  .mt-md-n8 {
-    margin-top: -9rem !important; }
+  .mt-md-n6 {
+    margin-top: -4.5rem !important; }
   .mr-md-n1 {
     margin-right: -0.25rem !important; }
   .mr-md-n2 {
@@ -7063,15 +6631,11 @@ button.close {
   .mr-md-n3 {
     margin-right: -1rem !important; }
   .mr-md-n4 {
-    margin-right: -1.25rem !important; }
+    margin-right: -1.5rem !important; }
   .mr-md-n5 {
-    margin-right: -2rem !important; }
-  .mr-md-n6 {
     margin-right: -3rem !important; }
-  .mr-md-n7 {
-    margin-right: -6rem !important; }
-  .mr-md-n8 {
-    margin-right: -9rem !important; }
+  .mr-md-n6 {
+    margin-right: -4.5rem !important; }
   .mb-md-n1 {
     margin-bottom: -0.25rem !important; }
   .mb-md-n2 {
@@ -7079,15 +6643,11 @@ button.close {
   .mb-md-n3 {
     margin-bottom: -1rem !important; }
   .mb-md-n4 {
-    margin-bottom: -1.25rem !important; }
+    margin-bottom: -1.5rem !important; }
   .mb-md-n5 {
-    margin-bottom: -2rem !important; }
-  .mb-md-n6 {
     margin-bottom: -3rem !important; }
-  .mb-md-n7 {
-    margin-bottom: -6rem !important; }
-  .mb-md-n8 {
-    margin-bottom: -9rem !important; }
+  .mb-md-n6 {
+    margin-bottom: -4.5rem !important; }
   .ml-md-n1 {
     margin-left: -0.25rem !important; }
   .ml-md-n2 {
@@ -7095,15 +6655,11 @@ button.close {
   .ml-md-n3 {
     margin-left: -1rem !important; }
   .ml-md-n4 {
-    margin-left: -1.25rem !important; }
+    margin-left: -1.5rem !important; }
   .ml-md-n5 {
-    margin-left: -2rem !important; }
-  .ml-md-n6 {
     margin-left: -3rem !important; }
-  .ml-md-n7 {
-    margin-left: -6rem !important; }
-  .ml-md-n8 {
-    margin-left: -9rem !important; }
+  .ml-md-n6 {
+    margin-left: -4.5rem !important; }
   .p-md-0 {
     padding: 0 !important; }
   .p-md-1 {
@@ -7113,15 +6669,11 @@ button.close {
   .p-md-3 {
     padding: 1rem !important; }
   .p-md-4 {
-    padding: 1.25rem !important; }
+    padding: 1.5rem !important; }
   .p-md-5 {
-    padding: 2rem !important; }
-  .p-md-6 {
     padding: 3rem !important; }
-  .p-md-7 {
-    padding: 6rem !important; }
-  .p-md-8 {
-    padding: 9rem !important; }
+  .p-md-6 {
+    padding: 4.5rem !important; }
   .px-md-0 {
     padding-right: 0 !important;
     padding-left: 0 !important; }
@@ -7135,20 +6687,14 @@ button.close {
     padding-right: 1rem !important;
     padding-left: 1rem !important; }
   .px-md-4 {
-    padding-right: 1.25rem !important;
-    padding-left: 1.25rem !important; }
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important; }
   .px-md-5 {
-    padding-right: 2rem !important;
-    padding-left: 2rem !important; }
-  .px-md-6 {
     padding-right: 3rem !important;
     padding-left: 3rem !important; }
-  .px-md-7 {
-    padding-right: 6rem !important;
-    padding-left: 6rem !important; }
-  .px-md-8 {
-    padding-right: 9rem !important;
-    padding-left: 9rem !important; }
+  .px-md-6 {
+    padding-right: 4.5rem !important;
+    padding-left: 4.5rem !important; }
   .py-md-0 {
     padding-top: 0 !important;
     padding-bottom: 0 !important; }
@@ -7162,20 +6708,14 @@ button.close {
     padding-top: 1rem !important;
     padding-bottom: 1rem !important; }
   .py-md-4 {
-    padding-top: 1.25rem !important;
-    padding-bottom: 1.25rem !important; }
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important; }
   .py-md-5 {
-    padding-top: 2rem !important;
-    padding-bottom: 2rem !important; }
-  .py-md-6 {
     padding-top: 3rem !important;
     padding-bottom: 3rem !important; }
-  .py-md-7 {
-    padding-top: 6rem !important;
-    padding-bottom: 6rem !important; }
-  .py-md-8 {
-    padding-top: 9rem !important;
-    padding-bottom: 9rem !important; }
+  .py-md-6 {
+    padding-top: 4.5rem !important;
+    padding-bottom: 4.5rem !important; }
   .pt-md-0 {
     padding-top: 0 !important; }
   .pt-md-1 {
@@ -7185,15 +6725,11 @@ button.close {
   .pt-md-3 {
     padding-top: 1rem !important; }
   .pt-md-4 {
-    padding-top: 1.25rem !important; }
+    padding-top: 1.5rem !important; }
   .pt-md-5 {
-    padding-top: 2rem !important; }
-  .pt-md-6 {
     padding-top: 3rem !important; }
-  .pt-md-7 {
-    padding-top: 6rem !important; }
-  .pt-md-8 {
-    padding-top: 9rem !important; }
+  .pt-md-6 {
+    padding-top: 4.5rem !important; }
   .pr-md-0 {
     padding-right: 0 !important; }
   .pr-md-1 {
@@ -7203,15 +6739,11 @@ button.close {
   .pr-md-3 {
     padding-right: 1rem !important; }
   .pr-md-4 {
-    padding-right: 1.25rem !important; }
+    padding-right: 1.5rem !important; }
   .pr-md-5 {
-    padding-right: 2rem !important; }
-  .pr-md-6 {
     padding-right: 3rem !important; }
-  .pr-md-7 {
-    padding-right: 6rem !important; }
-  .pr-md-8 {
-    padding-right: 9rem !important; }
+  .pr-md-6 {
+    padding-right: 4.5rem !important; }
   .pb-md-0 {
     padding-bottom: 0 !important; }
   .pb-md-1 {
@@ -7221,15 +6753,11 @@ button.close {
   .pb-md-3 {
     padding-bottom: 1rem !important; }
   .pb-md-4 {
-    padding-bottom: 1.25rem !important; }
+    padding-bottom: 1.5rem !important; }
   .pb-md-5 {
-    padding-bottom: 2rem !important; }
-  .pb-md-6 {
     padding-bottom: 3rem !important; }
-  .pb-md-7 {
-    padding-bottom: 6rem !important; }
-  .pb-md-8 {
-    padding-bottom: 9rem !important; }
+  .pb-md-6 {
+    padding-bottom: 4.5rem !important; }
   .pl-md-0 {
     padding-left: 0 !important; }
   .pl-md-1 {
@@ -7239,15 +6767,11 @@ button.close {
   .pl-md-3 {
     padding-left: 1rem !important; }
   .pl-md-4 {
-    padding-left: 1.25rem !important; }
+    padding-left: 1.5rem !important; }
   .pl-md-5 {
-    padding-left: 2rem !important; }
-  .pl-md-6 {
     padding-left: 3rem !important; }
-  .pl-md-7 {
-    padding-left: 6rem !important; }
-  .pl-md-8 {
-    padding-left: 9rem !important; }
+  .pl-md-6 {
+    padding-left: 4.5rem !important; }
   .text-md-left {
     text-align: left !important; }
   .text-md-right {
@@ -7376,15 +6900,11 @@ button.close {
   .m-lg-3 {
     margin: 1rem !important; }
   .m-lg-4 {
-    margin: 1.25rem !important; }
+    margin: 1.5rem !important; }
   .m-lg-5 {
-    margin: 2rem !important; }
-  .m-lg-6 {
     margin: 3rem !important; }
-  .m-lg-7 {
-    margin: 6rem !important; }
-  .m-lg-8 {
-    margin: 9rem !important; }
+  .m-lg-6 {
+    margin: 4.5rem !important; }
   .m-lg-auto {
     margin: auto !important; }
   .mx-lg-0 {
@@ -7400,20 +6920,14 @@ button.close {
     margin-right: 1rem !important;
     margin-left: 1rem !important; }
   .mx-lg-4 {
-    margin-right: 1.25rem !important;
-    margin-left: 1.25rem !important; }
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important; }
   .mx-lg-5 {
-    margin-right: 2rem !important;
-    margin-left: 2rem !important; }
-  .mx-lg-6 {
     margin-right: 3rem !important;
     margin-left: 3rem !important; }
-  .mx-lg-7 {
-    margin-right: 6rem !important;
-    margin-left: 6rem !important; }
-  .mx-lg-8 {
-    margin-right: 9rem !important;
-    margin-left: 9rem !important; }
+  .mx-lg-6 {
+    margin-right: 4.5rem !important;
+    margin-left: 4.5rem !important; }
   .mx-lg-auto {
     margin-right: auto !important;
     margin-left: auto !important; }
@@ -7430,20 +6944,14 @@ button.close {
     margin-top: 1rem !important;
     margin-bottom: 1rem !important; }
   .my-lg-4 {
-    margin-top: 1.25rem !important;
-    margin-bottom: 1.25rem !important; }
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important; }
   .my-lg-5 {
-    margin-top: 2rem !important;
-    margin-bottom: 2rem !important; }
-  .my-lg-6 {
     margin-top: 3rem !important;
     margin-bottom: 3rem !important; }
-  .my-lg-7 {
-    margin-top: 6rem !important;
-    margin-bottom: 6rem !important; }
-  .my-lg-8 {
-    margin-top: 9rem !important;
-    margin-bottom: 9rem !important; }
+  .my-lg-6 {
+    margin-top: 4.5rem !important;
+    margin-bottom: 4.5rem !important; }
   .my-lg-auto {
     margin-top: auto !important;
     margin-bottom: auto !important; }
@@ -7456,15 +6964,11 @@ button.close {
   .mt-lg-3 {
     margin-top: 1rem !important; }
   .mt-lg-4 {
-    margin-top: 1.25rem !important; }
+    margin-top: 1.5rem !important; }
   .mt-lg-5 {
-    margin-top: 2rem !important; }
-  .mt-lg-6 {
     margin-top: 3rem !important; }
-  .mt-lg-7 {
-    margin-top: 6rem !important; }
-  .mt-lg-8 {
-    margin-top: 9rem !important; }
+  .mt-lg-6 {
+    margin-top: 4.5rem !important; }
   .mt-lg-auto {
     margin-top: auto !important; }
   .mr-lg-0 {
@@ -7476,15 +6980,11 @@ button.close {
   .mr-lg-3 {
     margin-right: 1rem !important; }
   .mr-lg-4 {
-    margin-right: 1.25rem !important; }
+    margin-right: 1.5rem !important; }
   .mr-lg-5 {
-    margin-right: 2rem !important; }
-  .mr-lg-6 {
     margin-right: 3rem !important; }
-  .mr-lg-7 {
-    margin-right: 6rem !important; }
-  .mr-lg-8 {
-    margin-right: 9rem !important; }
+  .mr-lg-6 {
+    margin-right: 4.5rem !important; }
   .mr-lg-auto {
     margin-right: auto !important; }
   .mb-lg-0 {
@@ -7496,15 +6996,11 @@ button.close {
   .mb-lg-3 {
     margin-bottom: 1rem !important; }
   .mb-lg-4 {
-    margin-bottom: 1.25rem !important; }
+    margin-bottom: 1.5rem !important; }
   .mb-lg-5 {
-    margin-bottom: 2rem !important; }
-  .mb-lg-6 {
     margin-bottom: 3rem !important; }
-  .mb-lg-7 {
-    margin-bottom: 6rem !important; }
-  .mb-lg-8 {
-    margin-bottom: 9rem !important; }
+  .mb-lg-6 {
+    margin-bottom: 4.5rem !important; }
   .mb-lg-auto {
     margin-bottom: auto !important; }
   .ml-lg-0 {
@@ -7516,15 +7012,11 @@ button.close {
   .ml-lg-3 {
     margin-left: 1rem !important; }
   .ml-lg-4 {
-    margin-left: 1.25rem !important; }
+    margin-left: 1.5rem !important; }
   .ml-lg-5 {
-    margin-left: 2rem !important; }
-  .ml-lg-6 {
     margin-left: 3rem !important; }
-  .ml-lg-7 {
-    margin-left: 6rem !important; }
-  .ml-lg-8 {
-    margin-left: 9rem !important; }
+  .ml-lg-6 {
+    margin-left: 4.5rem !important; }
   .ml-lg-auto {
     margin-left: auto !important; }
   .m-lg-n1 {
@@ -7534,15 +7026,11 @@ button.close {
   .m-lg-n3 {
     margin: -1rem !important; }
   .m-lg-n4 {
-    margin: -1.25rem !important; }
+    margin: -1.5rem !important; }
   .m-lg-n5 {
-    margin: -2rem !important; }
-  .m-lg-n6 {
     margin: -3rem !important; }
-  .m-lg-n7 {
-    margin: -6rem !important; }
-  .m-lg-n8 {
-    margin: -9rem !important; }
+  .m-lg-n6 {
+    margin: -4.5rem !important; }
   .mx-lg-n1 {
     margin-right: -0.25rem !important;
     margin-left: -0.25rem !important; }
@@ -7553,20 +7041,14 @@ button.close {
     margin-right: -1rem !important;
     margin-left: -1rem !important; }
   .mx-lg-n4 {
-    margin-right: -1.25rem !important;
-    margin-left: -1.25rem !important; }
+    margin-right: -1.5rem !important;
+    margin-left: -1.5rem !important; }
   .mx-lg-n5 {
-    margin-right: -2rem !important;
-    margin-left: -2rem !important; }
-  .mx-lg-n6 {
     margin-right: -3rem !important;
     margin-left: -3rem !important; }
-  .mx-lg-n7 {
-    margin-right: -6rem !important;
-    margin-left: -6rem !important; }
-  .mx-lg-n8 {
-    margin-right: -9rem !important;
-    margin-left: -9rem !important; }
+  .mx-lg-n6 {
+    margin-right: -4.5rem !important;
+    margin-left: -4.5rem !important; }
   .my-lg-n1 {
     margin-top: -0.25rem !important;
     margin-bottom: -0.25rem !important; }
@@ -7577,20 +7059,14 @@ button.close {
     margin-top: -1rem !important;
     margin-bottom: -1rem !important; }
   .my-lg-n4 {
-    margin-top: -1.25rem !important;
-    margin-bottom: -1.25rem !important; }
+    margin-top: -1.5rem !important;
+    margin-bottom: -1.5rem !important; }
   .my-lg-n5 {
-    margin-top: -2rem !important;
-    margin-bottom: -2rem !important; }
-  .my-lg-n6 {
     margin-top: -3rem !important;
     margin-bottom: -3rem !important; }
-  .my-lg-n7 {
-    margin-top: -6rem !important;
-    margin-bottom: -6rem !important; }
-  .my-lg-n8 {
-    margin-top: -9rem !important;
-    margin-bottom: -9rem !important; }
+  .my-lg-n6 {
+    margin-top: -4.5rem !important;
+    margin-bottom: -4.5rem !important; }
   .mt-lg-n1 {
     margin-top: -0.25rem !important; }
   .mt-lg-n2 {
@@ -7598,15 +7074,11 @@ button.close {
   .mt-lg-n3 {
     margin-top: -1rem !important; }
   .mt-lg-n4 {
-    margin-top: -1.25rem !important; }
+    margin-top: -1.5rem !important; }
   .mt-lg-n5 {
-    margin-top: -2rem !important; }
-  .mt-lg-n6 {
     margin-top: -3rem !important; }
-  .mt-lg-n7 {
-    margin-top: -6rem !important; }
-  .mt-lg-n8 {
-    margin-top: -9rem !important; }
+  .mt-lg-n6 {
+    margin-top: -4.5rem !important; }
   .mr-lg-n1 {
     margin-right: -0.25rem !important; }
   .mr-lg-n2 {
@@ -7614,15 +7086,11 @@ button.close {
   .mr-lg-n3 {
     margin-right: -1rem !important; }
   .mr-lg-n4 {
-    margin-right: -1.25rem !important; }
+    margin-right: -1.5rem !important; }
   .mr-lg-n5 {
-    margin-right: -2rem !important; }
-  .mr-lg-n6 {
     margin-right: -3rem !important; }
-  .mr-lg-n7 {
-    margin-right: -6rem !important; }
-  .mr-lg-n8 {
-    margin-right: -9rem !important; }
+  .mr-lg-n6 {
+    margin-right: -4.5rem !important; }
   .mb-lg-n1 {
     margin-bottom: -0.25rem !important; }
   .mb-lg-n2 {
@@ -7630,15 +7098,11 @@ button.close {
   .mb-lg-n3 {
     margin-bottom: -1rem !important; }
   .mb-lg-n4 {
-    margin-bottom: -1.25rem !important; }
+    margin-bottom: -1.5rem !important; }
   .mb-lg-n5 {
-    margin-bottom: -2rem !important; }
-  .mb-lg-n6 {
     margin-bottom: -3rem !important; }
-  .mb-lg-n7 {
-    margin-bottom: -6rem !important; }
-  .mb-lg-n8 {
-    margin-bottom: -9rem !important; }
+  .mb-lg-n6 {
+    margin-bottom: -4.5rem !important; }
   .ml-lg-n1 {
     margin-left: -0.25rem !important; }
   .ml-lg-n2 {
@@ -7646,15 +7110,11 @@ button.close {
   .ml-lg-n3 {
     margin-left: -1rem !important; }
   .ml-lg-n4 {
-    margin-left: -1.25rem !important; }
+    margin-left: -1.5rem !important; }
   .ml-lg-n5 {
-    margin-left: -2rem !important; }
-  .ml-lg-n6 {
     margin-left: -3rem !important; }
-  .ml-lg-n7 {
-    margin-left: -6rem !important; }
-  .ml-lg-n8 {
-    margin-left: -9rem !important; }
+  .ml-lg-n6 {
+    margin-left: -4.5rem !important; }
   .p-lg-0 {
     padding: 0 !important; }
   .p-lg-1 {
@@ -7664,15 +7124,11 @@ button.close {
   .p-lg-3 {
     padding: 1rem !important; }
   .p-lg-4 {
-    padding: 1.25rem !important; }
+    padding: 1.5rem !important; }
   .p-lg-5 {
-    padding: 2rem !important; }
-  .p-lg-6 {
     padding: 3rem !important; }
-  .p-lg-7 {
-    padding: 6rem !important; }
-  .p-lg-8 {
-    padding: 9rem !important; }
+  .p-lg-6 {
+    padding: 4.5rem !important; }
   .px-lg-0 {
     padding-right: 0 !important;
     padding-left: 0 !important; }
@@ -7686,20 +7142,14 @@ button.close {
     padding-right: 1rem !important;
     padding-left: 1rem !important; }
   .px-lg-4 {
-    padding-right: 1.25rem !important;
-    padding-left: 1.25rem !important; }
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important; }
   .px-lg-5 {
-    padding-right: 2rem !important;
-    padding-left: 2rem !important; }
-  .px-lg-6 {
     padding-right: 3rem !important;
     padding-left: 3rem !important; }
-  .px-lg-7 {
-    padding-right: 6rem !important;
-    padding-left: 6rem !important; }
-  .px-lg-8 {
-    padding-right: 9rem !important;
-    padding-left: 9rem !important; }
+  .px-lg-6 {
+    padding-right: 4.5rem !important;
+    padding-left: 4.5rem !important; }
   .py-lg-0 {
     padding-top: 0 !important;
     padding-bottom: 0 !important; }
@@ -7713,20 +7163,14 @@ button.close {
     padding-top: 1rem !important;
     padding-bottom: 1rem !important; }
   .py-lg-4 {
-    padding-top: 1.25rem !important;
-    padding-bottom: 1.25rem !important; }
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important; }
   .py-lg-5 {
-    padding-top: 2rem !important;
-    padding-bottom: 2rem !important; }
-  .py-lg-6 {
     padding-top: 3rem !important;
     padding-bottom: 3rem !important; }
-  .py-lg-7 {
-    padding-top: 6rem !important;
-    padding-bottom: 6rem !important; }
-  .py-lg-8 {
-    padding-top: 9rem !important;
-    padding-bottom: 9rem !important; }
+  .py-lg-6 {
+    padding-top: 4.5rem !important;
+    padding-bottom: 4.5rem !important; }
   .pt-lg-0 {
     padding-top: 0 !important; }
   .pt-lg-1 {
@@ -7736,15 +7180,11 @@ button.close {
   .pt-lg-3 {
     padding-top: 1rem !important; }
   .pt-lg-4 {
-    padding-top: 1.25rem !important; }
+    padding-top: 1.5rem !important; }
   .pt-lg-5 {
-    padding-top: 2rem !important; }
-  .pt-lg-6 {
     padding-top: 3rem !important; }
-  .pt-lg-7 {
-    padding-top: 6rem !important; }
-  .pt-lg-8 {
-    padding-top: 9rem !important; }
+  .pt-lg-6 {
+    padding-top: 4.5rem !important; }
   .pr-lg-0 {
     padding-right: 0 !important; }
   .pr-lg-1 {
@@ -7754,15 +7194,11 @@ button.close {
   .pr-lg-3 {
     padding-right: 1rem !important; }
   .pr-lg-4 {
-    padding-right: 1.25rem !important; }
+    padding-right: 1.5rem !important; }
   .pr-lg-5 {
-    padding-right: 2rem !important; }
-  .pr-lg-6 {
     padding-right: 3rem !important; }
-  .pr-lg-7 {
-    padding-right: 6rem !important; }
-  .pr-lg-8 {
-    padding-right: 9rem !important; }
+  .pr-lg-6 {
+    padding-right: 4.5rem !important; }
   .pb-lg-0 {
     padding-bottom: 0 !important; }
   .pb-lg-1 {
@@ -7772,15 +7208,11 @@ button.close {
   .pb-lg-3 {
     padding-bottom: 1rem !important; }
   .pb-lg-4 {
-    padding-bottom: 1.25rem !important; }
+    padding-bottom: 1.5rem !important; }
   .pb-lg-5 {
-    padding-bottom: 2rem !important; }
-  .pb-lg-6 {
     padding-bottom: 3rem !important; }
-  .pb-lg-7 {
-    padding-bottom: 6rem !important; }
-  .pb-lg-8 {
-    padding-bottom: 9rem !important; }
+  .pb-lg-6 {
+    padding-bottom: 4.5rem !important; }
   .pl-lg-0 {
     padding-left: 0 !important; }
   .pl-lg-1 {
@@ -7790,15 +7222,11 @@ button.close {
   .pl-lg-3 {
     padding-left: 1rem !important; }
   .pl-lg-4 {
-    padding-left: 1.25rem !important; }
+    padding-left: 1.5rem !important; }
   .pl-lg-5 {
-    padding-left: 2rem !important; }
-  .pl-lg-6 {
     padding-left: 3rem !important; }
-  .pl-lg-7 {
-    padding-left: 6rem !important; }
-  .pl-lg-8 {
-    padding-left: 9rem !important; }
+  .pl-lg-6 {
+    padding-left: 4.5rem !important; }
   .text-lg-left {
     text-align: left !important; }
   .text-lg-right {
@@ -7927,15 +7355,11 @@ button.close {
   .m-xl-3 {
     margin: 1rem !important; }
   .m-xl-4 {
-    margin: 1.25rem !important; }
+    margin: 1.5rem !important; }
   .m-xl-5 {
-    margin: 2rem !important; }
-  .m-xl-6 {
     margin: 3rem !important; }
-  .m-xl-7 {
-    margin: 6rem !important; }
-  .m-xl-8 {
-    margin: 9rem !important; }
+  .m-xl-6 {
+    margin: 4.5rem !important; }
   .m-xl-auto {
     margin: auto !important; }
   .mx-xl-0 {
@@ -7951,20 +7375,14 @@ button.close {
     margin-right: 1rem !important;
     margin-left: 1rem !important; }
   .mx-xl-4 {
-    margin-right: 1.25rem !important;
-    margin-left: 1.25rem !important; }
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important; }
   .mx-xl-5 {
-    margin-right: 2rem !important;
-    margin-left: 2rem !important; }
-  .mx-xl-6 {
     margin-right: 3rem !important;
     margin-left: 3rem !important; }
-  .mx-xl-7 {
-    margin-right: 6rem !important;
-    margin-left: 6rem !important; }
-  .mx-xl-8 {
-    margin-right: 9rem !important;
-    margin-left: 9rem !important; }
+  .mx-xl-6 {
+    margin-right: 4.5rem !important;
+    margin-left: 4.5rem !important; }
   .mx-xl-auto {
     margin-right: auto !important;
     margin-left: auto !important; }
@@ -7981,20 +7399,14 @@ button.close {
     margin-top: 1rem !important;
     margin-bottom: 1rem !important; }
   .my-xl-4 {
-    margin-top: 1.25rem !important;
-    margin-bottom: 1.25rem !important; }
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important; }
   .my-xl-5 {
-    margin-top: 2rem !important;
-    margin-bottom: 2rem !important; }
-  .my-xl-6 {
     margin-top: 3rem !important;
     margin-bottom: 3rem !important; }
-  .my-xl-7 {
-    margin-top: 6rem !important;
-    margin-bottom: 6rem !important; }
-  .my-xl-8 {
-    margin-top: 9rem !important;
-    margin-bottom: 9rem !important; }
+  .my-xl-6 {
+    margin-top: 4.5rem !important;
+    margin-bottom: 4.5rem !important; }
   .my-xl-auto {
     margin-top: auto !important;
     margin-bottom: auto !important; }
@@ -8007,15 +7419,11 @@ button.close {
   .mt-xl-3 {
     margin-top: 1rem !important; }
   .mt-xl-4 {
-    margin-top: 1.25rem !important; }
+    margin-top: 1.5rem !important; }
   .mt-xl-5 {
-    margin-top: 2rem !important; }
-  .mt-xl-6 {
     margin-top: 3rem !important; }
-  .mt-xl-7 {
-    margin-top: 6rem !important; }
-  .mt-xl-8 {
-    margin-top: 9rem !important; }
+  .mt-xl-6 {
+    margin-top: 4.5rem !important; }
   .mt-xl-auto {
     margin-top: auto !important; }
   .mr-xl-0 {
@@ -8027,15 +7435,11 @@ button.close {
   .mr-xl-3 {
     margin-right: 1rem !important; }
   .mr-xl-4 {
-    margin-right: 1.25rem !important; }
+    margin-right: 1.5rem !important; }
   .mr-xl-5 {
-    margin-right: 2rem !important; }
-  .mr-xl-6 {
     margin-right: 3rem !important; }
-  .mr-xl-7 {
-    margin-right: 6rem !important; }
-  .mr-xl-8 {
-    margin-right: 9rem !important; }
+  .mr-xl-6 {
+    margin-right: 4.5rem !important; }
   .mr-xl-auto {
     margin-right: auto !important; }
   .mb-xl-0 {
@@ -8047,15 +7451,11 @@ button.close {
   .mb-xl-3 {
     margin-bottom: 1rem !important; }
   .mb-xl-4 {
-    margin-bottom: 1.25rem !important; }
+    margin-bottom: 1.5rem !important; }
   .mb-xl-5 {
-    margin-bottom: 2rem !important; }
-  .mb-xl-6 {
     margin-bottom: 3rem !important; }
-  .mb-xl-7 {
-    margin-bottom: 6rem !important; }
-  .mb-xl-8 {
-    margin-bottom: 9rem !important; }
+  .mb-xl-6 {
+    margin-bottom: 4.5rem !important; }
   .mb-xl-auto {
     margin-bottom: auto !important; }
   .ml-xl-0 {
@@ -8067,15 +7467,11 @@ button.close {
   .ml-xl-3 {
     margin-left: 1rem !important; }
   .ml-xl-4 {
-    margin-left: 1.25rem !important; }
+    margin-left: 1.5rem !important; }
   .ml-xl-5 {
-    margin-left: 2rem !important; }
-  .ml-xl-6 {
     margin-left: 3rem !important; }
-  .ml-xl-7 {
-    margin-left: 6rem !important; }
-  .ml-xl-8 {
-    margin-left: 9rem !important; }
+  .ml-xl-6 {
+    margin-left: 4.5rem !important; }
   .ml-xl-auto {
     margin-left: auto !important; }
   .m-xl-n1 {
@@ -8085,15 +7481,11 @@ button.close {
   .m-xl-n3 {
     margin: -1rem !important; }
   .m-xl-n4 {
-    margin: -1.25rem !important; }
+    margin: -1.5rem !important; }
   .m-xl-n5 {
-    margin: -2rem !important; }
-  .m-xl-n6 {
     margin: -3rem !important; }
-  .m-xl-n7 {
-    margin: -6rem !important; }
-  .m-xl-n8 {
-    margin: -9rem !important; }
+  .m-xl-n6 {
+    margin: -4.5rem !important; }
   .mx-xl-n1 {
     margin-right: -0.25rem !important;
     margin-left: -0.25rem !important; }
@@ -8104,20 +7496,14 @@ button.close {
     margin-right: -1rem !important;
     margin-left: -1rem !important; }
   .mx-xl-n4 {
-    margin-right: -1.25rem !important;
-    margin-left: -1.25rem !important; }
+    margin-right: -1.5rem !important;
+    margin-left: -1.5rem !important; }
   .mx-xl-n5 {
-    margin-right: -2rem !important;
-    margin-left: -2rem !important; }
-  .mx-xl-n6 {
     margin-right: -3rem !important;
     margin-left: -3rem !important; }
-  .mx-xl-n7 {
-    margin-right: -6rem !important;
-    margin-left: -6rem !important; }
-  .mx-xl-n8 {
-    margin-right: -9rem !important;
-    margin-left: -9rem !important; }
+  .mx-xl-n6 {
+    margin-right: -4.5rem !important;
+    margin-left: -4.5rem !important; }
   .my-xl-n1 {
     margin-top: -0.25rem !important;
     margin-bottom: -0.25rem !important; }
@@ -8128,20 +7514,14 @@ button.close {
     margin-top: -1rem !important;
     margin-bottom: -1rem !important; }
   .my-xl-n4 {
-    margin-top: -1.25rem !important;
-    margin-bottom: -1.25rem !important; }
+    margin-top: -1.5rem !important;
+    margin-bottom: -1.5rem !important; }
   .my-xl-n5 {
-    margin-top: -2rem !important;
-    margin-bottom: -2rem !important; }
-  .my-xl-n6 {
     margin-top: -3rem !important;
     margin-bottom: -3rem !important; }
-  .my-xl-n7 {
-    margin-top: -6rem !important;
-    margin-bottom: -6rem !important; }
-  .my-xl-n8 {
-    margin-top: -9rem !important;
-    margin-bottom: -9rem !important; }
+  .my-xl-n6 {
+    margin-top: -4.5rem !important;
+    margin-bottom: -4.5rem !important; }
   .mt-xl-n1 {
     margin-top: -0.25rem !important; }
   .mt-xl-n2 {
@@ -8149,15 +7529,11 @@ button.close {
   .mt-xl-n3 {
     margin-top: -1rem !important; }
   .mt-xl-n4 {
-    margin-top: -1.25rem !important; }
+    margin-top: -1.5rem !important; }
   .mt-xl-n5 {
-    margin-top: -2rem !important; }
-  .mt-xl-n6 {
     margin-top: -3rem !important; }
-  .mt-xl-n7 {
-    margin-top: -6rem !important; }
-  .mt-xl-n8 {
-    margin-top: -9rem !important; }
+  .mt-xl-n6 {
+    margin-top: -4.5rem !important; }
   .mr-xl-n1 {
     margin-right: -0.25rem !important; }
   .mr-xl-n2 {
@@ -8165,15 +7541,11 @@ button.close {
   .mr-xl-n3 {
     margin-right: -1rem !important; }
   .mr-xl-n4 {
-    margin-right: -1.25rem !important; }
+    margin-right: -1.5rem !important; }
   .mr-xl-n5 {
-    margin-right: -2rem !important; }
-  .mr-xl-n6 {
     margin-right: -3rem !important; }
-  .mr-xl-n7 {
-    margin-right: -6rem !important; }
-  .mr-xl-n8 {
-    margin-right: -9rem !important; }
+  .mr-xl-n6 {
+    margin-right: -4.5rem !important; }
   .mb-xl-n1 {
     margin-bottom: -0.25rem !important; }
   .mb-xl-n2 {
@@ -8181,15 +7553,11 @@ button.close {
   .mb-xl-n3 {
     margin-bottom: -1rem !important; }
   .mb-xl-n4 {
-    margin-bottom: -1.25rem !important; }
+    margin-bottom: -1.5rem !important; }
   .mb-xl-n5 {
-    margin-bottom: -2rem !important; }
-  .mb-xl-n6 {
     margin-bottom: -3rem !important; }
-  .mb-xl-n7 {
-    margin-bottom: -6rem !important; }
-  .mb-xl-n8 {
-    margin-bottom: -9rem !important; }
+  .mb-xl-n6 {
+    margin-bottom: -4.5rem !important; }
   .ml-xl-n1 {
     margin-left: -0.25rem !important; }
   .ml-xl-n2 {
@@ -8197,15 +7565,11 @@ button.close {
   .ml-xl-n3 {
     margin-left: -1rem !important; }
   .ml-xl-n4 {
-    margin-left: -1.25rem !important; }
+    margin-left: -1.5rem !important; }
   .ml-xl-n5 {
-    margin-left: -2rem !important; }
-  .ml-xl-n6 {
     margin-left: -3rem !important; }
-  .ml-xl-n7 {
-    margin-left: -6rem !important; }
-  .ml-xl-n8 {
-    margin-left: -9rem !important; }
+  .ml-xl-n6 {
+    margin-left: -4.5rem !important; }
   .p-xl-0 {
     padding: 0 !important; }
   .p-xl-1 {
@@ -8215,15 +7579,11 @@ button.close {
   .p-xl-3 {
     padding: 1rem !important; }
   .p-xl-4 {
-    padding: 1.25rem !important; }
+    padding: 1.5rem !important; }
   .p-xl-5 {
-    padding: 2rem !important; }
-  .p-xl-6 {
     padding: 3rem !important; }
-  .p-xl-7 {
-    padding: 6rem !important; }
-  .p-xl-8 {
-    padding: 9rem !important; }
+  .p-xl-6 {
+    padding: 4.5rem !important; }
   .px-xl-0 {
     padding-right: 0 !important;
     padding-left: 0 !important; }
@@ -8237,20 +7597,14 @@ button.close {
     padding-right: 1rem !important;
     padding-left: 1rem !important; }
   .px-xl-4 {
-    padding-right: 1.25rem !important;
-    padding-left: 1.25rem !important; }
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important; }
   .px-xl-5 {
-    padding-right: 2rem !important;
-    padding-left: 2rem !important; }
-  .px-xl-6 {
     padding-right: 3rem !important;
     padding-left: 3rem !important; }
-  .px-xl-7 {
-    padding-right: 6rem !important;
-    padding-left: 6rem !important; }
-  .px-xl-8 {
-    padding-right: 9rem !important;
-    padding-left: 9rem !important; }
+  .px-xl-6 {
+    padding-right: 4.5rem !important;
+    padding-left: 4.5rem !important; }
   .py-xl-0 {
     padding-top: 0 !important;
     padding-bottom: 0 !important; }
@@ -8264,20 +7618,14 @@ button.close {
     padding-top: 1rem !important;
     padding-bottom: 1rem !important; }
   .py-xl-4 {
-    padding-top: 1.25rem !important;
-    padding-bottom: 1.25rem !important; }
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important; }
   .py-xl-5 {
-    padding-top: 2rem !important;
-    padding-bottom: 2rem !important; }
-  .py-xl-6 {
     padding-top: 3rem !important;
     padding-bottom: 3rem !important; }
-  .py-xl-7 {
-    padding-top: 6rem !important;
-    padding-bottom: 6rem !important; }
-  .py-xl-8 {
-    padding-top: 9rem !important;
-    padding-bottom: 9rem !important; }
+  .py-xl-6 {
+    padding-top: 4.5rem !important;
+    padding-bottom: 4.5rem !important; }
   .pt-xl-0 {
     padding-top: 0 !important; }
   .pt-xl-1 {
@@ -8287,15 +7635,11 @@ button.close {
   .pt-xl-3 {
     padding-top: 1rem !important; }
   .pt-xl-4 {
-    padding-top: 1.25rem !important; }
+    padding-top: 1.5rem !important; }
   .pt-xl-5 {
-    padding-top: 2rem !important; }
-  .pt-xl-6 {
     padding-top: 3rem !important; }
-  .pt-xl-7 {
-    padding-top: 6rem !important; }
-  .pt-xl-8 {
-    padding-top: 9rem !important; }
+  .pt-xl-6 {
+    padding-top: 4.5rem !important; }
   .pr-xl-0 {
     padding-right: 0 !important; }
   .pr-xl-1 {
@@ -8305,15 +7649,11 @@ button.close {
   .pr-xl-3 {
     padding-right: 1rem !important; }
   .pr-xl-4 {
-    padding-right: 1.25rem !important; }
+    padding-right: 1.5rem !important; }
   .pr-xl-5 {
-    padding-right: 2rem !important; }
-  .pr-xl-6 {
     padding-right: 3rem !important; }
-  .pr-xl-7 {
-    padding-right: 6rem !important; }
-  .pr-xl-8 {
-    padding-right: 9rem !important; }
+  .pr-xl-6 {
+    padding-right: 4.5rem !important; }
   .pb-xl-0 {
     padding-bottom: 0 !important; }
   .pb-xl-1 {
@@ -8323,15 +7663,11 @@ button.close {
   .pb-xl-3 {
     padding-bottom: 1rem !important; }
   .pb-xl-4 {
-    padding-bottom: 1.25rem !important; }
+    padding-bottom: 1.5rem !important; }
   .pb-xl-5 {
-    padding-bottom: 2rem !important; }
-  .pb-xl-6 {
     padding-bottom: 3rem !important; }
-  .pb-xl-7 {
-    padding-bottom: 6rem !important; }
-  .pb-xl-8 {
-    padding-bottom: 9rem !important; }
+  .pb-xl-6 {
+    padding-bottom: 4.5rem !important; }
   .pl-xl-0 {
     padding-left: 0 !important; }
   .pl-xl-1 {
@@ -8341,15 +7677,11 @@ button.close {
   .pl-xl-3 {
     padding-left: 1rem !important; }
   .pl-xl-4 {
-    padding-left: 1.25rem !important; }
+    padding-left: 1.5rem !important; }
   .pl-xl-5 {
-    padding-left: 2rem !important; }
-  .pl-xl-6 {
     padding-left: 3rem !important; }
-  .pl-xl-7 {
-    padding-left: 6rem !important; }
-  .pl-xl-8 {
-    padding-left: 9rem !important; }
+  .pl-xl-6 {
+    padding-left: 4.5rem !important; }
   .text-xl-left {
     text-align: left !important; }
   .text-xl-right {
@@ -8383,9 +7715,11 @@ html {
 
 body {
   overflow-y: scroll;
+  letter-spacing: -0.01em;
   touch-action: manipulation;
   text-rendering: optimizeLegibility;
-  font-feature-settings: "liga" 0; }
+  font-feature-settings: "liga" 0;
+  position: relative; }
   body .content *::-webkit-scrollbar {
     width: 6px;
     height: 6px;
@@ -8403,135 +7737,604 @@ body {
     body {
       background: transparent; } }
 
-/*
-Horizontal navbar
- */
-/*
-Vertical narrow navbar
- */
-/*
-Vertical navbar
- */
-/*
-All navbars
+/**
+Navbar
  */
 .navbar {
-  padding-top: 0;
-  padding-bottom: 0;
   min-height: 3.5rem;
-  box-shadow: 0 0 0 1px rgba(134, 140, 151, 0.24);
-  z-index: 1030; }
-  @media print {
-    .navbar {
-      display: none;
-      margin: 0 !important; } }
-  .navbar .nav-link {
-    line-height: 1;
-    min-width: 2rem;
-    min-height: 2rem;
-    position: relative;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    text-align: center; }
-  .navbar .nav-link-icon {
-    font-size: 1rem;
-    width: 1rem;
-    height: 1rem;
-    display: block;
-    margin-right: .5rem;
-    line-height: .99; }
+  align-items: stretch;
+  background: transparent;
+  color: rgba(53, 64, 82, 0.72); }
+  .navbar::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    -webkit-transition: .3s background;
+    transition: .3s background; }
+  .navbar::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background: #dee1e7; }
+  .navbar::-webkit-scrollbar-corner {
+    background: transparent; }
+  .navbar:hover::-webkit-scrollbar-thumb {
+    background: #cbcfd6;
+    background: #cbcfd6; }
+  .navbar .text-muted {
+    color: rgba(53, 64, 82, 0.5184) !important; }
+  .navbar .navbar-brand {
+    color: #354052; }
+    .navbar .navbar-brand:hover, .navbar .navbar-brand:focus {
+      color: #354052;
+      opacity: .8; }
+  .navbar .navbar-nav .nav-link {
+    color: rgba(53, 64, 82, 0.72); }
+    .navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link:focus {
+      color: #354052; }
+    .navbar .navbar-nav .nav-link.disabled {
+      color: rgba(53, 64, 82, 0.3); }
+  .navbar .navbar-nav .show > .nav-link,
+  .navbar .navbar-nav .active > .nav-link,
+  .navbar .navbar-nav .nav-link.show,
+  .navbar .navbar-nav .nav-link.active {
+    color: #354052; }
+  .navbar .navbar-toggler {
+    color: #354052;
+    border-color: transparent; }
+  .navbar .navbar-text {
+    color: rgba(53, 64, 82, 0.72); }
+    .navbar .navbar-text a,
+    .navbar .navbar-text a:hover,
+    .navbar .navbar-text a:focus {
+      color: rgba(53, 64, 82, 0.72); }
+  @media not print {
+    .theme-dark .navbar {
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+      background: #354052;
+      color: rgba(255, 255, 255, 0.72); }
+      .theme-dark .navbar::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+        -webkit-transition: .3s background;
+        transition: .3s background; }
+      .theme-dark .navbar::-webkit-scrollbar-thumb {
+        border-radius: 5px;
+        background: #dee1e7; }
+      .theme-dark .navbar::-webkit-scrollbar-corner {
+        background: transparent; }
+      .theme-dark .navbar:hover::-webkit-scrollbar-thumb {
+        background: #cbcfd6;
+        background: #cbcfd6; }
+      .theme-dark .navbar .text-muted {
+        color: rgba(255, 255, 255, 0.5184) !important; }
+      .theme-dark .navbar .navbar-brand {
+        color: #ffffff; }
+        .theme-dark .navbar .navbar-brand:hover, .theme-dark .navbar .navbar-brand:focus {
+          color: #ffffff;
+          opacity: .8; }
+      .theme-dark .navbar .navbar-nav .nav-link {
+        color: rgba(255, 255, 255, 0.72); }
+        .theme-dark .navbar .navbar-nav .nav-link:hover, .theme-dark .navbar .navbar-nav .nav-link:focus {
+          color: #ffffff; }
+        .theme-dark .navbar .navbar-nav .nav-link.disabled {
+          color: rgba(255, 255, 255, 0.3); }
+      .theme-dark .navbar .navbar-nav .show > .nav-link,
+      .theme-dark .navbar .navbar-nav .active > .nav-link,
+      .theme-dark .navbar .navbar-nav .nav-link.show,
+      .theme-dark .navbar .navbar-nav .nav-link.active {
+        color: #ffffff; }
+      .theme-dark .navbar .navbar-toggler {
+        color: #ffffff;
+        border-color: transparent; }
+      .theme-dark .navbar .navbar-text {
+        color: rgba(255, 255, 255, 0.72); }
+        .theme-dark .navbar .navbar-text a,
+        .theme-dark .navbar .navbar-text a:hover,
+        .theme-dark .navbar .navbar-text a:focus {
+          color: rgba(255, 255, 255, 0.72); }
+      .theme-dark .navbar::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+        -webkit-transition: .3s background;
+        transition: .3s background; }
+      .theme-dark .navbar::-webkit-scrollbar-thumb {
+        border-radius: 5px;
+        background: transparent; }
+      .theme-dark .navbar::-webkit-scrollbar-corner {
+        background: transparent; }
+      .theme-dark .navbar:hover::-webkit-scrollbar-thumb {
+        background: #cbcfd6;
+        background: #5d6675; }
+      .theme-dark .navbar .input-icon-addon {
+        color: rgba(245, 247, 251, 0.64); }
+      .theme-dark .navbar .form-control {
+        border-color: transparent;
+        background-color: rgba(0, 0, 0, 0.1); }
+        .theme-dark .navbar .form-control::-webkit-input-placeholder {
+          color: rgba(245, 247, 251, 0.64); }
+        .theme-dark .navbar .form-control::-moz-placeholder {
+          color: rgba(245, 247, 251, 0.64); }
+        .theme-dark .navbar .form-control:-ms-input-placeholder {
+          color: rgba(245, 247, 251, 0.64); }
+        .theme-dark .navbar .form-control::-ms-input-placeholder {
+          color: rgba(245, 247, 251, 0.64); }
+        .theme-dark .navbar .form-control::placeholder {
+          color: rgba(245, 247, 251, 0.64); } }
+  @media not print and (prefers-color-scheme: dark) {
+    .theme-dark-auto .navbar {
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+      background: #354052;
+      color: rgba(255, 255, 255, 0.72); }
+      .theme-dark-auto .navbar::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+        -webkit-transition: .3s background;
+        transition: .3s background; }
+      .theme-dark-auto .navbar::-webkit-scrollbar-thumb {
+        border-radius: 5px;
+        background: #dee1e7; }
+      .theme-dark-auto .navbar::-webkit-scrollbar-corner {
+        background: transparent; }
+      .theme-dark-auto .navbar:hover::-webkit-scrollbar-thumb {
+        background: #cbcfd6;
+        background: #cbcfd6; }
+      .theme-dark-auto .navbar .text-muted {
+        color: rgba(255, 255, 255, 0.5184) !important; }
+      .theme-dark-auto .navbar .navbar-brand {
+        color: #ffffff; }
+        .theme-dark-auto .navbar .navbar-brand:hover, .theme-dark-auto .navbar .navbar-brand:focus {
+          color: #ffffff;
+          opacity: .8; }
+      .theme-dark-auto .navbar .navbar-nav .nav-link {
+        color: rgba(255, 255, 255, 0.72); }
+        .theme-dark-auto .navbar .navbar-nav .nav-link:hover, .theme-dark-auto .navbar .navbar-nav .nav-link:focus {
+          color: #ffffff; }
+        .theme-dark-auto .navbar .navbar-nav .nav-link.disabled {
+          color: rgba(255, 255, 255, 0.3); }
+      .theme-dark-auto .navbar .navbar-nav .show > .nav-link,
+      .theme-dark-auto .navbar .navbar-nav .active > .nav-link,
+      .theme-dark-auto .navbar .navbar-nav .nav-link.show,
+      .theme-dark-auto .navbar .navbar-nav .nav-link.active {
+        color: #ffffff; }
+      .theme-dark-auto .navbar .navbar-toggler {
+        color: #ffffff;
+        border-color: transparent; }
+      .theme-dark-auto .navbar .navbar-text {
+        color: rgba(255, 255, 255, 0.72); }
+        .theme-dark-auto .navbar .navbar-text a,
+        .theme-dark-auto .navbar .navbar-text a:hover,
+        .theme-dark-auto .navbar .navbar-text a:focus {
+          color: rgba(255, 255, 255, 0.72); }
+      .theme-dark-auto .navbar::-webkit-scrollbar {
+        width: 6px;
+        height: 6px;
+        -webkit-transition: .3s background;
+        transition: .3s background; }
+      .theme-dark-auto .navbar::-webkit-scrollbar-thumb {
+        border-radius: 5px;
+        background: transparent; }
+      .theme-dark-auto .navbar::-webkit-scrollbar-corner {
+        background: transparent; }
+      .theme-dark-auto .navbar:hover::-webkit-scrollbar-thumb {
+        background: #cbcfd6;
+        background: #5d6675; }
+      .theme-dark-auto .navbar .input-icon-addon {
+        color: rgba(245, 247, 251, 0.64); }
+      .theme-dark-auto .navbar .form-control {
+        border-color: transparent;
+        background-color: rgba(0, 0, 0, 0.1); }
+        .theme-dark-auto .navbar .form-control::-webkit-input-placeholder {
+          color: rgba(245, 247, 251, 0.64); }
+        .theme-dark-auto .navbar .form-control::-moz-placeholder {
+          color: rgba(245, 247, 251, 0.64); }
+        .theme-dark-auto .navbar .form-control:-ms-input-placeholder {
+          color: rgba(245, 247, 251, 0.64); }
+        .theme-dark-auto .navbar .form-control::-ms-input-placeholder {
+          color: rgba(245, 247, 251, 0.64); }
+        .theme-dark-auto .navbar .form-control::placeholder {
+          color: rgba(245, 247, 251, 0.64); } }
+  .navbar .dropdown-menu {
+    position: absolute; }
   .navbar .navbar-nav {
-    align-items: center; }
+    min-height: 3rem; }
     .navbar .navbar-nav .nav-link {
-      color: inherit;
-      opacity: 0.6;
-      transition: .3s opacity;
+      position: relative;
+      min-width: 2rem;
+      min-height: 2rem;
       justify-content: center; }
-      .navbar .navbar-nav .nav-link:hover {
-        color: inherit;
-        opacity: 1; }
-      .navbar .navbar-nav .nav-link.disabled {
-        color: inherit;
-        opacity: 0.2; }
-    .navbar .navbar-nav .show > .nav-link,
-    .navbar .navbar-nav .active > .nav-link,
-    .navbar .navbar-nav .nav-link.show,
-    .navbar .navbar-nav .nav-link.active {
-      color: inherit;
-      opacity: 1; }
+      .navbar .navbar-nav .nav-link .badge {
+        position: absolute;
+        top: .375rem;
+        right: .375rem;
+        transform: translate(50%, -50%); }
 
-.navbar-expand-xs .navbar-nav {
-  margin-left: -0.75rem; }
-  .navbar-expand-xs .navbar-nav .nav-item {
-    position: relative; }
+@media (max-width: 32.98rem) {
+  .navbar-expand-sm .navbar-collapse {
+    flex-direction: column; }
+    .navbar-expand-sm .navbar-collapse [class*="container"] {
+      flex-direction: column;
+      align-items: stretch; }
+    .navbar-expand-sm .navbar-collapse .navbar-nav {
+      margin-left: -0.75rem;
+      margin-right: -0.75rem; }
+      .navbar-expand-sm .navbar-collapse .navbar-nav .nav-link {
+        padding: 0.5rem 0.75rem;
+        justify-content: flex-start; }
+    .navbar-expand-sm .navbar-collapse .dropdown-menu {
+      padding: 0;
+      background: transparent;
+      position: static;
+      color: inherit;
+      box-shadow: none;
+      border: none;
+      -moz-columns: 1;
+      columns: 1;
+      min-width: 0; }
+      .navbar-expand-sm .navbar-collapse .dropdown-menu .dropdown-item {
+        min-width: 0;
+        display: flex;
+        width: auto;
+        padding-left: 2.25rem; }
+    .navbar-expand-sm .navbar-collapse .dropdown-toggle:after {
+      margin-left: auto; }
+    .navbar-expand-sm .navbar-collapse .nav-item.active:after {
+      border-bottom-width: 0;
+      border-left-width: 2px;
+      right: auto;
+      top: 0;
+      bottom: 0; } }
 
 @media (min-width: 33rem) {
-  .navbar-expand-sm .navbar-nav {
-    margin-left: -0.75rem; }
-    .navbar-expand-sm .navbar-nav .nav-item {
-      position: relative; } }
+  .navbar-expand-sm .navbar-collapse {
+    width: auto;
+    flex: 1 1 auto; }
+  .navbar-expand-sm.navbar-dark .nav-item.active .nav-link,
+  .navbar-expand-sm .navbar-dark .nav-item.active .nav-link {
+    background-color: rgba(0, 0, 0, 0.1); }
+  .navbar-expand-sm.navbar-light .nav-item.active,
+  .navbar-expand-sm .navbar-light .nav-item.active {
+    position: relative; }
+    .navbar-expand-sm.navbar-light .nav-item.active:after,
+    .navbar-expand-sm .navbar-light .nav-item.active:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: calc(-0.25rem - 1px);
+      border: 0 solid #206bc4;
+      border-bottom-width: 2px; } }
+
+@media (max-width: 47.98rem) {
+  .navbar-expand-md .navbar-collapse {
+    flex-direction: column; }
+    .navbar-expand-md .navbar-collapse [class*="container"] {
+      flex-direction: column;
+      align-items: stretch; }
+    .navbar-expand-md .navbar-collapse .navbar-nav {
+      margin-left: -0.75rem;
+      margin-right: -0.75rem; }
+      .navbar-expand-md .navbar-collapse .navbar-nav .nav-link {
+        padding: 0.5rem 0.75rem;
+        justify-content: flex-start; }
+    .navbar-expand-md .navbar-collapse .dropdown-menu {
+      padding: 0;
+      background: transparent;
+      position: static;
+      color: inherit;
+      box-shadow: none;
+      border: none;
+      -moz-columns: 1;
+      columns: 1;
+      min-width: 0; }
+      .navbar-expand-md .navbar-collapse .dropdown-menu .dropdown-item {
+        min-width: 0;
+        display: flex;
+        width: auto;
+        padding-left: 2.25rem; }
+    .navbar-expand-md .navbar-collapse .dropdown-toggle:after {
+      margin-left: auto; }
+    .navbar-expand-md .navbar-collapse .nav-item.active:after {
+      border-bottom-width: 0;
+      border-left-width: 2px;
+      right: auto;
+      top: 0;
+      bottom: 0; } }
 
 @media (min-width: 48rem) {
-  .navbar-expand-md .navbar-nav {
-    margin-left: -0.75rem; }
-    .navbar-expand-md .navbar-nav .nav-item {
-      position: relative; } }
+  .navbar-expand-md .navbar-collapse {
+    width: auto;
+    flex: 1 1 auto; }
+  .navbar-expand-md.navbar-dark .nav-item.active .nav-link,
+  .navbar-expand-md .navbar-dark .nav-item.active .nav-link {
+    background-color: rgba(0, 0, 0, 0.1); }
+  .navbar-expand-md.navbar-light .nav-item.active,
+  .navbar-expand-md .navbar-light .nav-item.active {
+    position: relative; }
+    .navbar-expand-md.navbar-light .nav-item.active:after,
+    .navbar-expand-md .navbar-light .nav-item.active:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: calc(-0.25rem - 1px);
+      border: 0 solid #206bc4;
+      border-bottom-width: 2px; } }
+
+@media (max-width: 63.98rem) {
+  .navbar-expand-lg .navbar-collapse {
+    flex-direction: column; }
+    .navbar-expand-lg .navbar-collapse [class*="container"] {
+      flex-direction: column;
+      align-items: stretch; }
+    .navbar-expand-lg .navbar-collapse .navbar-nav {
+      margin-left: -0.75rem;
+      margin-right: -0.75rem; }
+      .navbar-expand-lg .navbar-collapse .navbar-nav .nav-link {
+        padding: 0.5rem 0.75rem;
+        justify-content: flex-start; }
+    .navbar-expand-lg .navbar-collapse .dropdown-menu {
+      padding: 0;
+      background: transparent;
+      position: static;
+      color: inherit;
+      box-shadow: none;
+      border: none;
+      -moz-columns: 1;
+      columns: 1;
+      min-width: 0; }
+      .navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item {
+        min-width: 0;
+        display: flex;
+        width: auto;
+        padding-left: 2.25rem; }
+    .navbar-expand-lg .navbar-collapse .dropdown-toggle:after {
+      margin-left: auto; }
+    .navbar-expand-lg .navbar-collapse .nav-item.active:after {
+      border-bottom-width: 0;
+      border-left-width: 2px;
+      right: auto;
+      top: 0;
+      bottom: 0; } }
 
 @media (min-width: 64rem) {
-  .navbar-expand-lg .navbar-nav {
-    margin-left: -0.75rem; }
-    .navbar-expand-lg .navbar-nav .nav-item {
-      position: relative; } }
+  .navbar-expand-lg .navbar-collapse {
+    width: auto;
+    flex: 1 1 auto; }
+  .navbar-expand-lg.navbar-dark .nav-item.active .nav-link,
+  .navbar-expand-lg .navbar-dark .nav-item.active .nav-link {
+    background-color: rgba(0, 0, 0, 0.1); }
+  .navbar-expand-lg.navbar-light .nav-item.active,
+  .navbar-expand-lg .navbar-light .nav-item.active {
+    position: relative; }
+    .navbar-expand-lg.navbar-light .nav-item.active:after,
+    .navbar-expand-lg .navbar-light .nav-item.active:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: calc(-0.25rem - 1px);
+      border: 0 solid #206bc4;
+      border-bottom-width: 2px; } }
+
+@media (max-width: 75.23rem) {
+  .navbar-expand-xl .navbar-collapse {
+    flex-direction: column; }
+    .navbar-expand-xl .navbar-collapse [class*="container"] {
+      flex-direction: column;
+      align-items: stretch; }
+    .navbar-expand-xl .navbar-collapse .navbar-nav {
+      margin-left: -0.75rem;
+      margin-right: -0.75rem; }
+      .navbar-expand-xl .navbar-collapse .navbar-nav .nav-link {
+        padding: 0.5rem 0.75rem;
+        justify-content: flex-start; }
+    .navbar-expand-xl .navbar-collapse .dropdown-menu {
+      padding: 0;
+      background: transparent;
+      position: static;
+      color: inherit;
+      box-shadow: none;
+      border: none;
+      -moz-columns: 1;
+      columns: 1;
+      min-width: 0; }
+      .navbar-expand-xl .navbar-collapse .dropdown-menu .dropdown-item {
+        min-width: 0;
+        display: flex;
+        width: auto;
+        padding-left: 2.25rem; }
+    .navbar-expand-xl .navbar-collapse .dropdown-toggle:after {
+      margin-left: auto; }
+    .navbar-expand-xl .navbar-collapse .nav-item.active:after {
+      border-bottom-width: 0;
+      border-left-width: 2px;
+      right: auto;
+      top: 0;
+      bottom: 0; } }
 
 @media (min-width: 75.25rem) {
-  .navbar-expand-xl .navbar-nav {
-    margin-left: -0.75rem; }
-    .navbar-expand-xl .navbar-nav .nav-item {
-      position: relative; } }
+  .navbar-expand-xl .navbar-collapse {
+    width: auto;
+    flex: 1 1 auto; }
+  .navbar-expand-xl.navbar-dark .nav-item.active .nav-link,
+  .navbar-expand-xl .navbar-dark .nav-item.active .nav-link {
+    background-color: rgba(0, 0, 0, 0.1); }
+  .navbar-expand-xl.navbar-light .nav-item.active,
+  .navbar-expand-xl .navbar-light .nav-item.active {
+    position: relative; }
+    .navbar-expand-xl.navbar-light .nav-item.active:after,
+    .navbar-expand-xl .navbar-light .nav-item.active:after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: calc(-0.25rem - 1px);
+      border: 0 solid #206bc4;
+      border-bottom-width: 2px; } }
 
-.navbar-side {
-  margin-left: auto;
-  padding-left: 1.5rem; }
-  .navbar-side > * {
-    margin-left: 1rem; }
+.navbar-expand .navbar-collapse {
+  flex-direction: column; }
+  .navbar-expand .navbar-collapse [class*="container"] {
+    flex-direction: column;
+    align-items: stretch; }
+  .navbar-expand .navbar-collapse .navbar-nav {
+    margin-left: -0.75rem;
+    margin-right: -0.75rem; }
+    .navbar-expand .navbar-collapse .navbar-nav .nav-link {
+      padding: 0.5rem 0.75rem;
+      justify-content: flex-start; }
+  .navbar-expand .navbar-collapse .dropdown-menu {
+    padding: 0;
+    background: transparent;
+    position: static;
+    color: inherit;
+    box-shadow: none;
+    border: none;
+    -moz-columns: 1;
+    columns: 1;
+    min-width: 0; }
+    .navbar-expand .navbar-collapse .dropdown-menu .dropdown-item {
+      min-width: 0;
+      display: flex;
+      width: auto;
+      padding-left: 2.25rem; }
+  .navbar-expand .navbar-collapse .dropdown-toggle:after {
+    margin-left: auto; }
+  .navbar-expand .navbar-collapse .nav-item.active:after {
+    border-bottom-width: 0;
+    border-left-width: 2px;
+    right: auto;
+    top: 0;
+    bottom: 0; }
 
-.navbar-heading {
-  display: none; }
+.navbar-expand .navbar-collapse {
+  width: auto;
+  flex: 1 1 auto; }
+
+.navbar-expand.navbar-dark .nav-item.active .nav-link,
+.navbar-expand .navbar-dark .nav-item.active .nav-link {
+  background-color: rgba(0, 0, 0, 0.1); }
+
+.navbar-expand.navbar-light .nav-item.active,
+.navbar-expand .navbar-light .nav-item.active {
+  position: relative; }
+  .navbar-expand.navbar-light .nav-item.active:after,
+  .navbar-expand .navbar-light .nav-item.active:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: calc(-0.25rem - 1px);
+    border: 0 solid #206bc4;
+    border-bottom-width: 2px; }
 
 /**
 Navbar brand
  */
 .navbar-brand {
-  padding: 0; }
+  display: inline-flex;
+  align-items: center;
+  font-weight: 500; }
 
-.navbar-brand-logo {
+.navbar-brand-image {
+  display: block;
   height: 2rem; }
 
-.navbar-brand-logo-small {
-  display: none; }
+/**
+Navbar toggler
+ */
+.navbar-toggler {
+  border: 0;
+  width: 2rem;
+  height: 2rem;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center; }
 
+.navbar-toggler-icon {
+  height: 2px;
+  width: 1.25em;
+  background: currentColor;
+  border-radius: 10px;
+  transition: 0.2s 0.2s top, 0.2s 0.2s bottom, 0.2s transform, 0s 0.2s opacity;
+  position: relative; }
+  .navbar-toggler-icon:before, .navbar-toggler-icon:after {
+    content: '';
+    display: block;
+    height: inherit;
+    width: inherit;
+    border-radius: inherit;
+    background: inherit;
+    position: absolute;
+    left: 0;
+    transition: inherit; }
+  .navbar-toggler-icon:before {
+    top: -.45em; }
+  .navbar-toggler-icon:after {
+    bottom: -.45em; }
+  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
+    transform: rotate(45deg);
+    transition: .3s top, .3s bottom, .3s .3s transform, 0s .3s opacity; }
+    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
+      top: 0;
+      transform: rotate(-90deg); }
+    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
+      bottom: 0;
+      opacity: 0; }
+
+/**
+Navbar light
+ */
 .navbar-light {
-  background: #ffffff; }
-  .navbar-light::-webkit-scrollbar {
+  box-shadow: 0 0 0 1px rgba(110, 117, 130, 0.2);
+  background-color: #ffffff; }
+
+/**
+Navbar dark
+ */
+.navbar-dark {
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+  background: #354052;
+  color: rgba(255, 255, 255, 0.72); }
+  .navbar-dark::-webkit-scrollbar {
     width: 6px;
     height: 6px;
     -webkit-transition: .3s background;
     transition: .3s background; }
-  .navbar-light::-webkit-scrollbar-thumb {
+  .navbar-dark::-webkit-scrollbar-thumb {
     border-radius: 5px;
     background: #dee1e7; }
-  .navbar-light::-webkit-scrollbar-corner {
+  .navbar-dark::-webkit-scrollbar-corner {
     background: transparent; }
-  .navbar-light:hover::-webkit-scrollbar-thumb {
+  .navbar-dark:hover::-webkit-scrollbar-thumb {
     background: #cbcfd6;
     background: #cbcfd6; }
-
-.navbar-dark {
-  background: #354052;
-  color: #ffffff;
-  box-shadow: 0 0 0 1px #2f3949; }
+  .navbar-dark .text-muted {
+    color: rgba(255, 255, 255, 0.5184) !important; }
+  .navbar-dark .navbar-brand {
+    color: #ffffff; }
+    .navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
+      color: #ffffff;
+      opacity: .8; }
+  .navbar-dark .navbar-nav .nav-link {
+    color: rgba(255, 255, 255, 0.72); }
+    .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
+      color: #ffffff; }
+    .navbar-dark .navbar-nav .nav-link.disabled {
+      color: rgba(255, 255, 255, 0.3); }
+  .navbar-dark .navbar-nav .show > .nav-link,
+  .navbar-dark .navbar-nav .active > .nav-link,
+  .navbar-dark .navbar-nav .nav-link.show,
+  .navbar-dark .navbar-nav .nav-link.active {
+    color: #ffffff; }
+  .navbar-dark .navbar-toggler {
+    color: #ffffff;
+    border-color: transparent; }
+  .navbar-dark .navbar-text {
+    color: rgba(255, 255, 255, 0.72); }
+    .navbar-dark .navbar-text a,
+    .navbar-dark .navbar-text a:hover,
+    .navbar-dark .navbar-text a:focus {
+      color: rgba(255, 255, 255, 0.72); }
   .navbar-dark::-webkit-scrollbar {
     width: 6px;
     height: 6px;
@@ -8545,854 +8348,413 @@ Navbar brand
   .navbar-dark:hover::-webkit-scrollbar-thumb {
     background: #cbcfd6;
     background: #5d6675; }
-  .navbar-dark .text-muted {
-    color: inherit !important;
-    opacity: 0.6; }
-  .navbar-dark .navbar-brand-autodark {
-    -webkit-filter: brightness(0) invert(1);
-    filter: brightness(0) invert(1); }
+  .navbar-dark .input-icon-addon {
+    color: rgba(245, 247, 251, 0.64); }
   .navbar-dark .form-control {
     border-color: transparent;
-    background: #3b475b;
-    color: #ffffff; }
+    background-color: rgba(0, 0, 0, 0.1); }
+    .navbar-dark .form-control::-webkit-input-placeholder {
+      color: rgba(245, 247, 251, 0.64); }
+    .navbar-dark .form-control::-moz-placeholder {
+      color: rgba(245, 247, 251, 0.64); }
+    .navbar-dark .form-control:-ms-input-placeholder {
+      color: rgba(245, 247, 251, 0.64); }
+    .navbar-dark .form-control::-ms-input-placeholder {
+      color: rgba(245, 247, 251, 0.64); }
+    .navbar-dark .form-control::placeholder {
+      color: rgba(245, 247, 251, 0.64); }
+
+/**
+Navbar nav
+ */
+.navbar-nav {
+  align-items: stretch; }
+  .navbar-nav .nav-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center; }
+
+/**
+Navbar side
+ */
+.navbar-side {
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around; }
 
 /**
 Navbar vertical
  */
-.navbar:not(.navbar-vertical) .d-none-navbar-horizontal,
-.navbar:not(.navbar-vertical) ~ * .d-none-navbar-vertical-narrow {
-  display: none !important; }
-
-.navbar:not(.navbar-vertical) .dropdown-menu {
-  margin-right: -.25rem; }
-
-.navbar-vertical.navbar-expand-xs {
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 15.625rem;
-  z-index: 1030;
-  min-height: auto;
-  align-items: start;
-  overflow: auto; }
-  .navbar-vertical.navbar-expand-xs > [class*="container"] {
-    flex-direction: column;
-    align-items: stretch;
-    padding-left: 0;
-    padding-right: 0;
-    min-height: 100%; }
-  .navbar-vertical.navbar-expand-xs ~ .navbar,
-  .navbar-vertical.navbar-expand-xs ~ .content {
-    margin-left: 15.625rem; }
-    .navbar-vertical.navbar-expand-xs ~ .navbar [class*="container"],
-    .navbar-vertical.navbar-expand-xs ~ .content [class*="container"] {
-      padding-left: 1.25rem;
-      padding-right: 1.25rem; }
-  .navbar-vertical.navbar-expand-xs .d-none-navbar-vertical,
-  .navbar-vertical.navbar-expand-xs ~ * .d-none-navbar-vertical {
-    display: none !important; }
-  .navbar-vertical.navbar-expand-xs .navbar-brand {
-    display: flex;
-    width: 100%;
-    margin: 0;
-    text-align: center;
-    height: 3.5rem;
-    align-items: center;
-    justify-content: center; }
-  .navbar-vertical.navbar-expand-xs .navbar-heading {
-    font-size: 0.6875rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: .04em;
-    color: #868c97;
-    display: block;
-    margin-bottom: .5rem; }
-  .navbar-vertical.navbar-expand-xs .navbar-collapse {
-    flex-direction: column;
-    text-align: left;
-    align-items: normal;
-    padding: 1rem 1rem; }
-  .navbar-vertical.navbar-expand-xs .navbar-nav {
-    flex-direction: column;
-    align-items: normal;
-    margin-left: -1rem;
-    margin-right: -1rem; }
-    .navbar-vertical.navbar-expand-xs .navbar-nav .nav-link {
-      min-height: 0;
-      height: 2.5rem;
-      padding-left: 1rem;
-      padding-right: 1rem;
-      justify-content: start; }
-    .navbar-vertical.navbar-expand-xs .navbar-nav .nav-item.active {
-      font-weight: 600; }
-      .navbar-vertical.navbar-expand-xs .navbar-nav .nav-item.active > .nav-link:before {
-        left: 0;
-        right: auto;
-        top: 0;
-        bottom: 0;
-        height: auto;
-        width: 2px; }
-  .navbar-vertical.navbar-expand-xs .navbar-side {
-    margin-left: 0;
-    margin-top: auto;
-    padding-left: 0;
-    padding-top: 1rem; }
-    .navbar-vertical.navbar-expand-xs .navbar-side > * {
-      margin-left: 0;
-      margin-top: 1rem; }
-  .navbar-vertical.navbar-expand-xs.navbar-right {
-    left: auto;
-    right: 0; }
-    .navbar-vertical.navbar-expand-xs.navbar-right ~ .navbar,
-    .navbar-vertical.navbar-expand-xs.navbar-right ~ .content {
-      margin-left: 0;
-      margin-right: 15.625rem; }
-  .navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .d-none-navbar-vertical-wide,
-  .navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) ~ * .d-none-navbar-vertical-wide {
-    display: none !important; }
-  .navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .nav-item.active > .dropdown-menu {
-    display: block; }
-  .navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .dropdown-menu {
-    position: static;
-    background: inherit;
-    border: 0;
-    box-shadow: none;
-    padding: 0;
-    margin: 0;
-    color: inherit;
-    -moz-columns: 1;
-    columns: 1; }
-    .navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .dropdown-menu:before, .navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .dropdown-menu:after {
-      content: none; }
-  .navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .dropdown-item {
-    padding-left: 2.5rem;
-    opacity: 0.6;
-    color: inherit;
-    background: transparent; }
-    .navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .dropdown-item.active {
-      font-weight: 600;
-      opacity: 1; }
-    .navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .dropdown-item:hover {
-      opacity: 1; }
-  .navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .dropdown-toggle:after {
-    margin-left: auto; }
-  .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow {
-    width: 4rem;
-    overflow: visible; }
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .d-none-navbar-vertical-narrow,
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow ~ * .d-none-navbar-vertical-narrow {
-      display: none !important; }
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .navbar-nav {
-      margin-top: 0; }
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .nav-link {
-      height: 3rem; }
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .nav-link-title,
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .navbar-heading {
-      display: none; }
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .nav-link-icon {
-      margin: 0 auto;
-      font-size: 1.125rem;
-      width: 1.125rem;
-      height: 1.125rem; }
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .navbar-brand-logo-large {
-      display: none; }
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .navbar-brand-logo-small {
-      display: inline-block; }
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow ~ .navbar,
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow ~ .content {
-      margin-left: 4rem; }
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .dropdown-toggle:after {
-      content: none; }
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .dropdown-menu {
-      left: 100%;
-      top: 0;
-      margin: 0 0 0 -4px; }
-      .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .dropdown-menu:before, .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .dropdown-menu:after {
-        content: none; }
-      .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .dropdown-menu.dropdown-menu-right {
-        top: auto;
-        bottom: 0;
-        right: auto; }
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow.navbar-right ~ .navbar,
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow.navbar-right ~ .content {
-      margin-left: 0;
-      margin-right: 4rem; }
-    .navbar-vertical.navbar-expand-xs.navbar-vertical-narrow.navbar-right .dropdown-menu {
-      margin: 0 -4px 0 0;
-      left: auto;
-      right: 100%; }
-  .navbar-vertical.navbar-expand-xs .d-none-navbar-horizontal,
-  .navbar-vertical.navbar-expand-xs ~ * .d-none-navbar-vertical-narrow {
-    display: none !important; }
-  .navbar-vertical.navbar-expand-xs .dropdown-menu {
-    margin-right: -.25rem; }
-
 @media (min-width: 33rem) {
   .navbar-vertical.navbar-expand-sm {
+    width: 15rem;
     position: fixed;
-    left: 0;
     top: 0;
+    left: 0;
     bottom: 0;
-    width: 15.625rem;
     z-index: 1030;
-    min-height: auto;
-    align-items: start;
-    overflow: auto; }
-    .navbar-vertical.navbar-expand-sm > [class*="container"] {
-      flex-direction: column;
-      align-items: stretch;
-      padding-left: 0;
-      padding-right: 0;
-      min-height: 100%; }
-    .navbar-vertical.navbar-expand-sm ~ .navbar,
-    .navbar-vertical.navbar-expand-sm ~ .content {
-      margin-left: 15.625rem; }
-      .navbar-vertical.navbar-expand-sm ~ .navbar [class*="container"],
-      .navbar-vertical.navbar-expand-sm ~ .content [class*="container"] {
-        padding-left: 1.25rem;
-        padding-right: 1.25rem; }
-    .navbar-vertical.navbar-expand-sm .d-none-navbar-vertical,
-    .navbar-vertical.navbar-expand-sm ~ * .d-none-navbar-vertical {
-      display: none !important; }
-    .navbar-vertical.navbar-expand-sm .navbar-brand {
-      display: flex;
-      width: 100%;
-      margin: 0;
-      text-align: center;
-      height: 3.5rem;
-      align-items: center;
-      justify-content: center; }
-    .navbar-vertical.navbar-expand-sm .navbar-heading {
-      font-size: 0.6875rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: .04em;
-      color: #868c97;
-      display: block;
-      margin-bottom: .5rem; }
-    .navbar-vertical.navbar-expand-sm .navbar-collapse {
-      flex-direction: column;
-      text-align: left;
-      align-items: normal;
-      padding: 1rem 1rem; }
-    .navbar-vertical.navbar-expand-sm .navbar-nav {
-      flex-direction: column;
-      align-items: normal;
-      margin-left: -1rem;
-      margin-right: -1rem; }
-      .navbar-vertical.navbar-expand-sm .navbar-nav .nav-link {
-        min-height: 0;
-        height: 2.5rem;
-        padding-left: 1rem;
-        padding-right: 1rem;
-        justify-content: start; }
-      .navbar-vertical.navbar-expand-sm .navbar-nav .nav-item.active {
-        font-weight: 600; }
-        .navbar-vertical.navbar-expand-sm .navbar-nav .nav-item.active > .nav-link:before {
-          left: 0;
-          right: auto;
-          top: 0;
-          bottom: 0;
-          height: auto;
-          width: 2px; }
-    .navbar-vertical.navbar-expand-sm .navbar-side {
-      margin-left: 0;
-      margin-top: auto;
-      padding-left: 0;
-      padding-top: 1rem; }
-      .navbar-vertical.navbar-expand-sm .navbar-side > * {
-        margin-left: 0;
-        margin-top: 1rem; }
+    align-items: flex-start;
+    transition: .3s transform;
+    overflow-x: auto; }
     .navbar-vertical.navbar-expand-sm.navbar-right {
       left: auto;
       right: 0; }
-      .navbar-vertical.navbar-expand-sm.navbar-right ~ .navbar,
-      .navbar-vertical.navbar-expand-sm.navbar-right ~ .content {
-        margin-left: 0;
-        margin-right: 15.625rem; }
-    .navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .d-none-navbar-vertical-wide,
-    .navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) ~ * .d-none-navbar-vertical-wide {
-      display: none !important; }
-    .navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .nav-item.active > .dropdown-menu {
-      display: block; }
-    .navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .dropdown-menu {
-      position: static;
-      background: inherit;
-      border: 0;
-      box-shadow: none;
-      padding: 0;
-      margin: 0;
-      color: inherit;
-      -moz-columns: 1;
-      columns: 1; }
-      .navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .dropdown-menu:before, .navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .dropdown-menu:after {
-        content: none; }
-    .navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .dropdown-item {
-      padding-left: 2.5rem;
-      opacity: 0.6;
-      color: inherit;
-      background: transparent; }
-      .navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .dropdown-item.active {
-        font-weight: 600;
-        opacity: 1; }
-      .navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .dropdown-item:hover {
-        opacity: 1; }
-    .navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .dropdown-toggle:after {
-      margin-left: auto; }
-    .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow {
-      width: 4rem;
-      overflow: visible; }
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .d-none-navbar-vertical-narrow,
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow ~ * .d-none-navbar-vertical-narrow {
-        display: none !important; }
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .navbar-nav {
-        margin-top: 0; }
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .nav-link {
-        height: 3rem; }
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .nav-link-title,
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .navbar-heading {
-        display: none; }
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .nav-link-icon {
-        margin: 0 auto;
-        font-size: 1.125rem;
-        width: 1.125rem;
-        height: 1.125rem; }
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .navbar-brand-logo-large {
-        display: none; }
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .navbar-brand-logo-small {
-        display: inline-block; }
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow ~ .navbar,
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow ~ .content {
-        margin-left: 4rem; }
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .dropdown-toggle:after {
-        content: none; }
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .dropdown-menu {
-        left: 100%;
+    .navbar-vertical.navbar-expand-sm .navbar-brand {
+      padding: 0.75rem 0;
+      justify-content: center; }
+    .navbar-vertical.navbar-expand-sm .navbar-collapse {
+      align-items: stretch; }
+    .navbar-vertical.navbar-expand-sm .navbar-nav {
+      flex-direction: column;
+      flex-grow: 1;
+      min-height: auto; }
+      .navbar-vertical.navbar-expand-sm .navbar-nav .nav-link {
+        padding-top: .5rem;
+        padding-bottom: .5rem; }
+    .navbar-vertical.navbar-expand-sm > [class*="container"] {
+      flex-direction: column;
+      align-items: stretch;
+      min-height: 100%;
+      justify-content: flex-start; }
+    .navbar-vertical.navbar-expand-sm ~ .page {
+      padding-left: 15rem; }
+      .navbar-vertical.navbar-expand-sm ~ .page [class*="container"] {
+        padding-left: 1.5rem;
+        padding-right: 1.5rem; }
+    .navbar-vertical.navbar-expand-sm.navbar-right ~ .page {
+      padding-left: 0;
+      padding-right: 15rem; }
+    .navbar-vertical.navbar-expand-sm .navbar-collapse {
+      flex-direction: column; }
+      .navbar-vertical.navbar-expand-sm .navbar-collapse [class*="container"] {
+        flex-direction: column;
+        align-items: stretch; }
+      .navbar-vertical.navbar-expand-sm .navbar-collapse .navbar-nav {
+        margin-left: -0.75rem;
+        margin-right: -0.75rem; }
+        .navbar-vertical.navbar-expand-sm .navbar-collapse .navbar-nav .nav-link {
+          padding: 0.5rem 0.75rem;
+          justify-content: flex-start; }
+      .navbar-vertical.navbar-expand-sm .navbar-collapse .dropdown-menu {
+        padding: 0;
+        background: transparent;
+        position: static;
+        color: inherit;
+        box-shadow: none;
+        border: none;
+        -moz-columns: 1;
+        columns: 1;
+        min-width: 0; }
+        .navbar-vertical.navbar-expand-sm .navbar-collapse .dropdown-menu .dropdown-item {
+          min-width: 0;
+          display: flex;
+          width: auto;
+          padding-left: 2.25rem; }
+      .navbar-vertical.navbar-expand-sm .navbar-collapse .dropdown-toggle:after {
+        margin-left: auto; }
+      .navbar-vertical.navbar-expand-sm .navbar-collapse .nav-item.active:after {
+        border-bottom-width: 0;
+        border-left-width: 2px;
+        right: auto;
         top: 0;
-        margin: 0 0 0 -4px; }
-        .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .dropdown-menu:before, .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .dropdown-menu:after {
-          content: none; }
-        .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .dropdown-menu.dropdown-menu-right {
-          top: auto;
-          bottom: 0;
-          right: auto; }
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow.navbar-right ~ .navbar,
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow.navbar-right ~ .content {
-        margin-left: 0;
-        margin-right: 4rem; }
-      .navbar-vertical.navbar-expand-sm.navbar-vertical-narrow.navbar-right .dropdown-menu {
-        margin: 0 -4px 0 0;
-        left: auto;
-        right: 100%; } }
-
-@media (max-width: 32.98rem) {
-  .navbar-vertical.navbar-expand-sm .d-none-navbar-horizontal,
-  .navbar-vertical.navbar-expand-sm ~ * .d-none-navbar-vertical-narrow {
-    display: none !important; }
-  .navbar-vertical.navbar-expand-sm .dropdown-menu {
-    margin-right: -.25rem; } }
+        bottom: 0; } }
 
 @media (min-width: 48rem) {
   .navbar-vertical.navbar-expand-md {
+    width: 15rem;
     position: fixed;
-    left: 0;
     top: 0;
+    left: 0;
     bottom: 0;
-    width: 15.625rem;
     z-index: 1030;
-    min-height: auto;
-    align-items: start;
-    overflow: auto; }
-    .navbar-vertical.navbar-expand-md > [class*="container"] {
-      flex-direction: column;
-      align-items: stretch;
-      padding-left: 0;
-      padding-right: 0;
-      min-height: 100%; }
-    .navbar-vertical.navbar-expand-md ~ .navbar,
-    .navbar-vertical.navbar-expand-md ~ .content {
-      margin-left: 15.625rem; }
-      .navbar-vertical.navbar-expand-md ~ .navbar [class*="container"],
-      .navbar-vertical.navbar-expand-md ~ .content [class*="container"] {
-        padding-left: 1.25rem;
-        padding-right: 1.25rem; }
-    .navbar-vertical.navbar-expand-md .d-none-navbar-vertical,
-    .navbar-vertical.navbar-expand-md ~ * .d-none-navbar-vertical {
-      display: none !important; }
-    .navbar-vertical.navbar-expand-md .navbar-brand {
-      display: flex;
-      width: 100%;
-      margin: 0;
-      text-align: center;
-      height: 3.5rem;
-      align-items: center;
-      justify-content: center; }
-    .navbar-vertical.navbar-expand-md .navbar-heading {
-      font-size: 0.6875rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: .04em;
-      color: #868c97;
-      display: block;
-      margin-bottom: .5rem; }
-    .navbar-vertical.navbar-expand-md .navbar-collapse {
-      flex-direction: column;
-      text-align: left;
-      align-items: normal;
-      padding: 1rem 1rem; }
-    .navbar-vertical.navbar-expand-md .navbar-nav {
-      flex-direction: column;
-      align-items: normal;
-      margin-left: -1rem;
-      margin-right: -1rem; }
-      .navbar-vertical.navbar-expand-md .navbar-nav .nav-link {
-        min-height: 0;
-        height: 2.5rem;
-        padding-left: 1rem;
-        padding-right: 1rem;
-        justify-content: start; }
-      .navbar-vertical.navbar-expand-md .navbar-nav .nav-item.active {
-        font-weight: 600; }
-        .navbar-vertical.navbar-expand-md .navbar-nav .nav-item.active > .nav-link:before {
-          left: 0;
-          right: auto;
-          top: 0;
-          bottom: 0;
-          height: auto;
-          width: 2px; }
-    .navbar-vertical.navbar-expand-md .navbar-side {
-      margin-left: 0;
-      margin-top: auto;
-      padding-left: 0;
-      padding-top: 1rem; }
-      .navbar-vertical.navbar-expand-md .navbar-side > * {
-        margin-left: 0;
-        margin-top: 1rem; }
+    align-items: flex-start;
+    transition: .3s transform;
+    overflow-x: auto; }
     .navbar-vertical.navbar-expand-md.navbar-right {
       left: auto;
       right: 0; }
-      .navbar-vertical.navbar-expand-md.navbar-right ~ .navbar,
-      .navbar-vertical.navbar-expand-md.navbar-right ~ .content {
-        margin-left: 0;
-        margin-right: 15.625rem; }
-    .navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .d-none-navbar-vertical-wide,
-    .navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) ~ * .d-none-navbar-vertical-wide {
-      display: none !important; }
-    .navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .nav-item.active > .dropdown-menu {
-      display: block; }
-    .navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .dropdown-menu {
-      position: static;
-      background: inherit;
-      border: 0;
-      box-shadow: none;
-      padding: 0;
-      margin: 0;
-      color: inherit;
-      -moz-columns: 1;
-      columns: 1; }
-      .navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .dropdown-menu:before, .navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .dropdown-menu:after {
-        content: none; }
-    .navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .dropdown-item {
-      padding-left: 2.5rem;
-      opacity: 0.6;
-      color: inherit;
-      background: transparent; }
-      .navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .dropdown-item.active {
-        font-weight: 600;
-        opacity: 1; }
-      .navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .dropdown-item:hover {
-        opacity: 1; }
-    .navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .dropdown-toggle:after {
-      margin-left: auto; }
-    .navbar-vertical.navbar-expand-md.navbar-vertical-narrow {
-      width: 4rem;
-      overflow: visible; }
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow .d-none-navbar-vertical-narrow,
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow ~ * .d-none-navbar-vertical-narrow {
-        display: none !important; }
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow .navbar-nav {
-        margin-top: 0; }
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow .nav-link {
-        height: 3rem; }
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow .nav-link-title,
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow .navbar-heading {
-        display: none; }
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow .nav-link-icon {
-        margin: 0 auto;
-        font-size: 1.125rem;
-        width: 1.125rem;
-        height: 1.125rem; }
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow .navbar-brand-logo-large {
-        display: none; }
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow .navbar-brand-logo-small {
-        display: inline-block; }
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow ~ .navbar,
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow ~ .content {
-        margin-left: 4rem; }
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow .dropdown-toggle:after {
-        content: none; }
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow .dropdown-menu {
-        left: 100%;
+    .navbar-vertical.navbar-expand-md .navbar-brand {
+      padding: 0.75rem 0;
+      justify-content: center; }
+    .navbar-vertical.navbar-expand-md .navbar-collapse {
+      align-items: stretch; }
+    .navbar-vertical.navbar-expand-md .navbar-nav {
+      flex-direction: column;
+      flex-grow: 1;
+      min-height: auto; }
+      .navbar-vertical.navbar-expand-md .navbar-nav .nav-link {
+        padding-top: .5rem;
+        padding-bottom: .5rem; }
+    .navbar-vertical.navbar-expand-md > [class*="container"] {
+      flex-direction: column;
+      align-items: stretch;
+      min-height: 100%;
+      justify-content: flex-start; }
+    .navbar-vertical.navbar-expand-md ~ .page {
+      padding-left: 15rem; }
+      .navbar-vertical.navbar-expand-md ~ .page [class*="container"] {
+        padding-left: 1.5rem;
+        padding-right: 1.5rem; }
+    .navbar-vertical.navbar-expand-md.navbar-right ~ .page {
+      padding-left: 0;
+      padding-right: 15rem; }
+    .navbar-vertical.navbar-expand-md .navbar-collapse {
+      flex-direction: column; }
+      .navbar-vertical.navbar-expand-md .navbar-collapse [class*="container"] {
+        flex-direction: column;
+        align-items: stretch; }
+      .navbar-vertical.navbar-expand-md .navbar-collapse .navbar-nav {
+        margin-left: -0.75rem;
+        margin-right: -0.75rem; }
+        .navbar-vertical.navbar-expand-md .navbar-collapse .navbar-nav .nav-link {
+          padding: 0.5rem 0.75rem;
+          justify-content: flex-start; }
+      .navbar-vertical.navbar-expand-md .navbar-collapse .dropdown-menu {
+        padding: 0;
+        background: transparent;
+        position: static;
+        color: inherit;
+        box-shadow: none;
+        border: none;
+        -moz-columns: 1;
+        columns: 1;
+        min-width: 0; }
+        .navbar-vertical.navbar-expand-md .navbar-collapse .dropdown-menu .dropdown-item {
+          min-width: 0;
+          display: flex;
+          width: auto;
+          padding-left: 2.25rem; }
+      .navbar-vertical.navbar-expand-md .navbar-collapse .dropdown-toggle:after {
+        margin-left: auto; }
+      .navbar-vertical.navbar-expand-md .navbar-collapse .nav-item.active:after {
+        border-bottom-width: 0;
+        border-left-width: 2px;
+        right: auto;
         top: 0;
-        margin: 0 0 0 -4px; }
-        .navbar-vertical.navbar-expand-md.navbar-vertical-narrow .dropdown-menu:before, .navbar-vertical.navbar-expand-md.navbar-vertical-narrow .dropdown-menu:after {
-          content: none; }
-        .navbar-vertical.navbar-expand-md.navbar-vertical-narrow .dropdown-menu.dropdown-menu-right {
-          top: auto;
-          bottom: 0;
-          right: auto; }
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow.navbar-right ~ .navbar,
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow.navbar-right ~ .content {
-        margin-left: 0;
-        margin-right: 4rem; }
-      .navbar-vertical.navbar-expand-md.navbar-vertical-narrow.navbar-right .dropdown-menu {
-        margin: 0 -4px 0 0;
-        left: auto;
-        right: 100%; } }
-
-@media (max-width: 47.98rem) {
-  .navbar-vertical.navbar-expand-md .d-none-navbar-horizontal,
-  .navbar-vertical.navbar-expand-md ~ * .d-none-navbar-vertical-narrow {
-    display: none !important; }
-  .navbar-vertical.navbar-expand-md .dropdown-menu {
-    margin-right: -.25rem; } }
+        bottom: 0; } }
 
 @media (min-width: 64rem) {
   .navbar-vertical.navbar-expand-lg {
+    width: 15rem;
     position: fixed;
-    left: 0;
     top: 0;
+    left: 0;
     bottom: 0;
-    width: 15.625rem;
     z-index: 1030;
-    min-height: auto;
-    align-items: start;
-    overflow: auto; }
-    .navbar-vertical.navbar-expand-lg > [class*="container"] {
-      flex-direction: column;
-      align-items: stretch;
-      padding-left: 0;
-      padding-right: 0;
-      min-height: 100%; }
-    .navbar-vertical.navbar-expand-lg ~ .navbar,
-    .navbar-vertical.navbar-expand-lg ~ .content {
-      margin-left: 15.625rem; }
-      .navbar-vertical.navbar-expand-lg ~ .navbar [class*="container"],
-      .navbar-vertical.navbar-expand-lg ~ .content [class*="container"] {
-        padding-left: 1.25rem;
-        padding-right: 1.25rem; }
-    .navbar-vertical.navbar-expand-lg .d-none-navbar-vertical,
-    .navbar-vertical.navbar-expand-lg ~ * .d-none-navbar-vertical {
-      display: none !important; }
-    .navbar-vertical.navbar-expand-lg .navbar-brand {
-      display: flex;
-      width: 100%;
-      margin: 0;
-      text-align: center;
-      height: 3.5rem;
-      align-items: center;
-      justify-content: center; }
-    .navbar-vertical.navbar-expand-lg .navbar-heading {
-      font-size: 0.6875rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: .04em;
-      color: #868c97;
-      display: block;
-      margin-bottom: .5rem; }
-    .navbar-vertical.navbar-expand-lg .navbar-collapse {
-      flex-direction: column;
-      text-align: left;
-      align-items: normal;
-      padding: 1rem 1rem; }
-    .navbar-vertical.navbar-expand-lg .navbar-nav {
-      flex-direction: column;
-      align-items: normal;
-      margin-left: -1rem;
-      margin-right: -1rem; }
-      .navbar-vertical.navbar-expand-lg .navbar-nav .nav-link {
-        min-height: 0;
-        height: 2.5rem;
-        padding-left: 1rem;
-        padding-right: 1rem;
-        justify-content: start; }
-      .navbar-vertical.navbar-expand-lg .navbar-nav .nav-item.active {
-        font-weight: 600; }
-        .navbar-vertical.navbar-expand-lg .navbar-nav .nav-item.active > .nav-link:before {
-          left: 0;
-          right: auto;
-          top: 0;
-          bottom: 0;
-          height: auto;
-          width: 2px; }
-    .navbar-vertical.navbar-expand-lg .navbar-side {
-      margin-left: 0;
-      margin-top: auto;
-      padding-left: 0;
-      padding-top: 1rem; }
-      .navbar-vertical.navbar-expand-lg .navbar-side > * {
-        margin-left: 0;
-        margin-top: 1rem; }
+    align-items: flex-start;
+    transition: .3s transform;
+    overflow-x: auto; }
     .navbar-vertical.navbar-expand-lg.navbar-right {
       left: auto;
       right: 0; }
-      .navbar-vertical.navbar-expand-lg.navbar-right ~ .navbar,
-      .navbar-vertical.navbar-expand-lg.navbar-right ~ .content {
-        margin-left: 0;
-        margin-right: 15.625rem; }
-    .navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .d-none-navbar-vertical-wide,
-    .navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) ~ * .d-none-navbar-vertical-wide {
-      display: none !important; }
-    .navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .nav-item.active > .dropdown-menu {
-      display: block; }
-    .navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .dropdown-menu {
-      position: static;
-      background: inherit;
-      border: 0;
-      box-shadow: none;
-      padding: 0;
-      margin: 0;
-      color: inherit;
-      -moz-columns: 1;
-      columns: 1; }
-      .navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .dropdown-menu:before, .navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .dropdown-menu:after {
-        content: none; }
-    .navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .dropdown-item {
-      padding-left: 2.5rem;
-      opacity: 0.6;
-      color: inherit;
-      background: transparent; }
-      .navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .dropdown-item.active {
-        font-weight: 600;
-        opacity: 1; }
-      .navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .dropdown-item:hover {
-        opacity: 1; }
-    .navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .dropdown-toggle:after {
-      margin-left: auto; }
-    .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow {
-      width: 4rem;
-      overflow: visible; }
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .d-none-navbar-vertical-narrow,
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow ~ * .d-none-navbar-vertical-narrow {
-        display: none !important; }
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .navbar-nav {
-        margin-top: 0; }
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .nav-link {
-        height: 3rem; }
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .nav-link-title,
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .navbar-heading {
-        display: none; }
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .nav-link-icon {
-        margin: 0 auto;
-        font-size: 1.125rem;
-        width: 1.125rem;
-        height: 1.125rem; }
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .navbar-brand-logo-large {
-        display: none; }
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .navbar-brand-logo-small {
-        display: inline-block; }
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow ~ .navbar,
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow ~ .content {
-        margin-left: 4rem; }
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .dropdown-toggle:after {
-        content: none; }
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .dropdown-menu {
-        left: 100%;
+    .navbar-vertical.navbar-expand-lg .navbar-brand {
+      padding: 0.75rem 0;
+      justify-content: center; }
+    .navbar-vertical.navbar-expand-lg .navbar-collapse {
+      align-items: stretch; }
+    .navbar-vertical.navbar-expand-lg .navbar-nav {
+      flex-direction: column;
+      flex-grow: 1;
+      min-height: auto; }
+      .navbar-vertical.navbar-expand-lg .navbar-nav .nav-link {
+        padding-top: .5rem;
+        padding-bottom: .5rem; }
+    .navbar-vertical.navbar-expand-lg > [class*="container"] {
+      flex-direction: column;
+      align-items: stretch;
+      min-height: 100%;
+      justify-content: flex-start; }
+    .navbar-vertical.navbar-expand-lg ~ .page {
+      padding-left: 15rem; }
+      .navbar-vertical.navbar-expand-lg ~ .page [class*="container"] {
+        padding-left: 1.5rem;
+        padding-right: 1.5rem; }
+    .navbar-vertical.navbar-expand-lg.navbar-right ~ .page {
+      padding-left: 0;
+      padding-right: 15rem; }
+    .navbar-vertical.navbar-expand-lg .navbar-collapse {
+      flex-direction: column; }
+      .navbar-vertical.navbar-expand-lg .navbar-collapse [class*="container"] {
+        flex-direction: column;
+        align-items: stretch; }
+      .navbar-vertical.navbar-expand-lg .navbar-collapse .navbar-nav {
+        margin-left: -0.75rem;
+        margin-right: -0.75rem; }
+        .navbar-vertical.navbar-expand-lg .navbar-collapse .navbar-nav .nav-link {
+          padding: 0.5rem 0.75rem;
+          justify-content: flex-start; }
+      .navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu {
+        padding: 0;
+        background: transparent;
+        position: static;
+        color: inherit;
+        box-shadow: none;
+        border: none;
+        -moz-columns: 1;
+        columns: 1;
+        min-width: 0; }
+        .navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item {
+          min-width: 0;
+          display: flex;
+          width: auto;
+          padding-left: 2.25rem; }
+      .navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-toggle:after {
+        margin-left: auto; }
+      .navbar-vertical.navbar-expand-lg .navbar-collapse .nav-item.active:after {
+        border-bottom-width: 0;
+        border-left-width: 2px;
+        right: auto;
         top: 0;
-        margin: 0 0 0 -4px; }
-        .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .dropdown-menu:before, .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .dropdown-menu:after {
-          content: none; }
-        .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .dropdown-menu.dropdown-menu-right {
-          top: auto;
-          bottom: 0;
-          right: auto; }
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow.navbar-right ~ .navbar,
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow.navbar-right ~ .content {
-        margin-left: 0;
-        margin-right: 4rem; }
-      .navbar-vertical.navbar-expand-lg.navbar-vertical-narrow.navbar-right .dropdown-menu {
-        margin: 0 -4px 0 0;
-        left: auto;
-        right: 100%; } }
-
-@media (max-width: 63.98rem) {
-  .navbar-vertical.navbar-expand-lg .d-none-navbar-horizontal,
-  .navbar-vertical.navbar-expand-lg ~ * .d-none-navbar-vertical-narrow {
-    display: none !important; }
-  .navbar-vertical.navbar-expand-lg .dropdown-menu {
-    margin-right: -.25rem; } }
+        bottom: 0; } }
 
 @media (min-width: 75.25rem) {
   .navbar-vertical.navbar-expand-xl {
+    width: 15rem;
     position: fixed;
-    left: 0;
     top: 0;
+    left: 0;
     bottom: 0;
-    width: 15.625rem;
     z-index: 1030;
-    min-height: auto;
-    align-items: start;
-    overflow: auto; }
-    .navbar-vertical.navbar-expand-xl > [class*="container"] {
-      flex-direction: column;
-      align-items: stretch;
-      padding-left: 0;
-      padding-right: 0;
-      min-height: 100%; }
-    .navbar-vertical.navbar-expand-xl ~ .navbar,
-    .navbar-vertical.navbar-expand-xl ~ .content {
-      margin-left: 15.625rem; }
-      .navbar-vertical.navbar-expand-xl ~ .navbar [class*="container"],
-      .navbar-vertical.navbar-expand-xl ~ .content [class*="container"] {
-        padding-left: 1.25rem;
-        padding-right: 1.25rem; }
-    .navbar-vertical.navbar-expand-xl .d-none-navbar-vertical,
-    .navbar-vertical.navbar-expand-xl ~ * .d-none-navbar-vertical {
-      display: none !important; }
-    .navbar-vertical.navbar-expand-xl .navbar-brand {
-      display: flex;
-      width: 100%;
-      margin: 0;
-      text-align: center;
-      height: 3.5rem;
-      align-items: center;
-      justify-content: center; }
-    .navbar-vertical.navbar-expand-xl .navbar-heading {
-      font-size: 0.6875rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: .04em;
-      color: #868c97;
-      display: block;
-      margin-bottom: .5rem; }
-    .navbar-vertical.navbar-expand-xl .navbar-collapse {
-      flex-direction: column;
-      text-align: left;
-      align-items: normal;
-      padding: 1rem 1rem; }
-    .navbar-vertical.navbar-expand-xl .navbar-nav {
-      flex-direction: column;
-      align-items: normal;
-      margin-left: -1rem;
-      margin-right: -1rem; }
-      .navbar-vertical.navbar-expand-xl .navbar-nav .nav-link {
-        min-height: 0;
-        height: 2.5rem;
-        padding-left: 1rem;
-        padding-right: 1rem;
-        justify-content: start; }
-      .navbar-vertical.navbar-expand-xl .navbar-nav .nav-item.active {
-        font-weight: 600; }
-        .navbar-vertical.navbar-expand-xl .navbar-nav .nav-item.active > .nav-link:before {
-          left: 0;
-          right: auto;
-          top: 0;
-          bottom: 0;
-          height: auto;
-          width: 2px; }
-    .navbar-vertical.navbar-expand-xl .navbar-side {
-      margin-left: 0;
-      margin-top: auto;
-      padding-left: 0;
-      padding-top: 1rem; }
-      .navbar-vertical.navbar-expand-xl .navbar-side > * {
-        margin-left: 0;
-        margin-top: 1rem; }
+    align-items: flex-start;
+    transition: .3s transform;
+    overflow-x: auto; }
     .navbar-vertical.navbar-expand-xl.navbar-right {
       left: auto;
       right: 0; }
-      .navbar-vertical.navbar-expand-xl.navbar-right ~ .navbar,
-      .navbar-vertical.navbar-expand-xl.navbar-right ~ .content {
-        margin-left: 0;
-        margin-right: 15.625rem; }
-    .navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .d-none-navbar-vertical-wide,
-    .navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) ~ * .d-none-navbar-vertical-wide {
-      display: none !important; }
-    .navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .nav-item.active > .dropdown-menu {
-      display: block; }
-    .navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .dropdown-menu {
-      position: static;
-      background: inherit;
-      border: 0;
-      box-shadow: none;
-      padding: 0;
-      margin: 0;
-      color: inherit;
-      -moz-columns: 1;
-      columns: 1; }
-      .navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .dropdown-menu:before, .navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .dropdown-menu:after {
-        content: none; }
-    .navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .dropdown-item {
-      padding-left: 2.5rem;
-      opacity: 0.6;
-      color: inherit;
-      background: transparent; }
-      .navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .dropdown-item.active {
-        font-weight: 600;
-        opacity: 1; }
-      .navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .dropdown-item:hover {
-        opacity: 1; }
-    .navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .dropdown-toggle:after {
-      margin-left: auto; }
-    .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow {
-      width: 4rem;
-      overflow: visible; }
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .d-none-navbar-vertical-narrow,
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow ~ * .d-none-navbar-vertical-narrow {
-        display: none !important; }
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .navbar-nav {
-        margin-top: 0; }
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .nav-link {
-        height: 3rem; }
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .nav-link-title,
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .navbar-heading {
-        display: none; }
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .nav-link-icon {
-        margin: 0 auto;
-        font-size: 1.125rem;
-        width: 1.125rem;
-        height: 1.125rem; }
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .navbar-brand-logo-large {
-        display: none; }
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .navbar-brand-logo-small {
-        display: inline-block; }
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow ~ .navbar,
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow ~ .content {
-        margin-left: 4rem; }
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .dropdown-toggle:after {
-        content: none; }
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .dropdown-menu {
-        left: 100%;
+    .navbar-vertical.navbar-expand-xl .navbar-brand {
+      padding: 0.75rem 0;
+      justify-content: center; }
+    .navbar-vertical.navbar-expand-xl .navbar-collapse {
+      align-items: stretch; }
+    .navbar-vertical.navbar-expand-xl .navbar-nav {
+      flex-direction: column;
+      flex-grow: 1;
+      min-height: auto; }
+      .navbar-vertical.navbar-expand-xl .navbar-nav .nav-link {
+        padding-top: .5rem;
+        padding-bottom: .5rem; }
+    .navbar-vertical.navbar-expand-xl > [class*="container"] {
+      flex-direction: column;
+      align-items: stretch;
+      min-height: 100%;
+      justify-content: flex-start; }
+    .navbar-vertical.navbar-expand-xl ~ .page {
+      padding-left: 15rem; }
+      .navbar-vertical.navbar-expand-xl ~ .page [class*="container"] {
+        padding-left: 1.5rem;
+        padding-right: 1.5rem; }
+    .navbar-vertical.navbar-expand-xl.navbar-right ~ .page {
+      padding-left: 0;
+      padding-right: 15rem; }
+    .navbar-vertical.navbar-expand-xl .navbar-collapse {
+      flex-direction: column; }
+      .navbar-vertical.navbar-expand-xl .navbar-collapse [class*="container"] {
+        flex-direction: column;
+        align-items: stretch; }
+      .navbar-vertical.navbar-expand-xl .navbar-collapse .navbar-nav {
+        margin-left: -0.75rem;
+        margin-right: -0.75rem; }
+        .navbar-vertical.navbar-expand-xl .navbar-collapse .navbar-nav .nav-link {
+          padding: 0.5rem 0.75rem;
+          justify-content: flex-start; }
+      .navbar-vertical.navbar-expand-xl .navbar-collapse .dropdown-menu {
+        padding: 0;
+        background: transparent;
+        position: static;
+        color: inherit;
+        box-shadow: none;
+        border: none;
+        -moz-columns: 1;
+        columns: 1;
+        min-width: 0; }
+        .navbar-vertical.navbar-expand-xl .navbar-collapse .dropdown-menu .dropdown-item {
+          min-width: 0;
+          display: flex;
+          width: auto;
+          padding-left: 2.25rem; }
+      .navbar-vertical.navbar-expand-xl .navbar-collapse .dropdown-toggle:after {
+        margin-left: auto; }
+      .navbar-vertical.navbar-expand-xl .navbar-collapse .nav-item.active:after {
+        border-bottom-width: 0;
+        border-left-width: 2px;
+        right: auto;
         top: 0;
-        margin: 0 0 0 -4px; }
-        .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .dropdown-menu:before, .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .dropdown-menu:after {
-          content: none; }
-        .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .dropdown-menu.dropdown-menu-right {
-          top: auto;
-          bottom: 0;
-          right: auto; }
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow.navbar-right ~ .navbar,
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow.navbar-right ~ .content {
-        margin-left: 0;
-        margin-right: 4rem; }
-      .navbar-vertical.navbar-expand-xl.navbar-vertical-narrow.navbar-right .dropdown-menu {
-        margin: 0 -4px 0 0;
-        left: auto;
-        right: 100%; } }
+        bottom: 0; } }
 
-@media (max-width: 75.23rem) {
-  .navbar-vertical.navbar-expand-xl .d-none-navbar-horizontal,
-  .navbar-vertical.navbar-expand-xl ~ * .d-none-navbar-vertical-narrow {
-    display: none !important; }
-  .navbar-vertical.navbar-expand-xl .dropdown-menu {
-    margin-right: -.25rem; } }
-
-/**
-Navbar secondary
- */
-.navbar-secondary {
-  order: -1; }
+.navbar-vertical.navbar-expand {
+  width: 15rem;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 1030;
+  align-items: flex-start;
+  transition: .3s transform;
+  overflow-x: auto; }
+  .navbar-vertical.navbar-expand.navbar-right {
+    left: auto;
+    right: 0; }
+  .navbar-vertical.navbar-expand .navbar-brand {
+    padding: 0.75rem 0;
+    justify-content: center; }
+  .navbar-vertical.navbar-expand .navbar-collapse {
+    align-items: stretch; }
+  .navbar-vertical.navbar-expand .navbar-nav {
+    flex-direction: column;
+    flex-grow: 1;
+    min-height: auto; }
+    .navbar-vertical.navbar-expand .navbar-nav .nav-link {
+      padding-top: .5rem;
+      padding-bottom: .5rem; }
+  .navbar-vertical.navbar-expand > [class*="container"] {
+    flex-direction: column;
+    align-items: stretch;
+    min-height: 100%;
+    justify-content: flex-start; }
+  .navbar-vertical.navbar-expand ~ .page {
+    padding-left: 15rem; }
+    .navbar-vertical.navbar-expand ~ .page [class*="container"] {
+      padding-left: 1.5rem;
+      padding-right: 1.5rem; }
+  .navbar-vertical.navbar-expand.navbar-right ~ .page {
+    padding-left: 0;
+    padding-right: 15rem; }
+  .navbar-vertical.navbar-expand .navbar-collapse {
+    flex-direction: column; }
+    .navbar-vertical.navbar-expand .navbar-collapse [class*="container"] {
+      flex-direction: column;
+      align-items: stretch; }
+    .navbar-vertical.navbar-expand .navbar-collapse .navbar-nav {
+      margin-left: -0.75rem;
+      margin-right: -0.75rem; }
+      .navbar-vertical.navbar-expand .navbar-collapse .navbar-nav .nav-link {
+        padding: 0.5rem 0.75rem;
+        justify-content: flex-start; }
+    .navbar-vertical.navbar-expand .navbar-collapse .dropdown-menu {
+      padding: 0;
+      background: transparent;
+      position: static;
+      color: inherit;
+      box-shadow: none;
+      border: none;
+      -moz-columns: 1;
+      columns: 1;
+      min-width: 0; }
+      .navbar-vertical.navbar-expand .navbar-collapse .dropdown-menu .dropdown-item {
+        min-width: 0;
+        display: flex;
+        width: auto;
+        padding-left: 2.25rem; }
+    .navbar-vertical.navbar-expand .navbar-collapse .dropdown-toggle:after {
+      margin-left: auto; }
+    .navbar-vertical.navbar-expand .navbar-collapse .nav-item.active:after {
+      border-bottom-width: 0;
+      border-left-width: 2px;
+      right: auto;
+      top: 0;
+      bottom: 0; }
 
 .page {
   display: flex;
@@ -9421,11 +8783,11 @@ Navbar secondary
     flex: 1; }
 
 .page-pretitle {
-  font-size: 0.6875rem;
-  font-weight: 600;
+  font-size: 0.625rem;
+  font-weight: 500;
   text-transform: uppercase;
   letter-spacing: .04em;
-  color: #868c97; }
+  color: #6e7582; }
 
 .page-title {
   margin: 0;
@@ -9435,10 +8797,10 @@ Navbar secondary
   color: inherit; }
 
 .footer {
-  border-top: 1px solid rgba(134, 140, 151, 0.24);
+  border-top: 1px solid rgba(110, 117, 130, 0.2);
   background-color: #ffffff;
   padding: 1rem 0;
-  color: #868c97;
+  color: #6e7582;
   margin-bottom: -1.25rem;
   margin-top: 1.25rem; }
 
@@ -9465,12 +8827,12 @@ Navbar secondary
   position: relative;
   width: 2rem;
   height: 2rem;
-  font-size: 0.8125rem;
+  font-size: 0.75rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-weight: 400;
-  color: #868c97;
+  color: #6e7582;
   text-align: center;
   text-transform: uppercase;
   vertical-align: bottom;
@@ -9535,7 +8897,7 @@ Navbar secondary
 .avatar-upload {
   width: 4rem;
   height: 4rem;
-  border: 1px dashed rgba(134, 140, 151, 0.24);
+  border: 1px dashed rgba(110, 117, 130, 0.2);
   background: #ffffff;
   flex-direction: column;
   transition: .3s color, .3s background-color; }
@@ -9549,22 +8911,24 @@ Navbar secondary
     text-decoration: none; }
 
 .avatar-upload-text {
-  font-size: 0.6875rem;
+  font-size: 0.625rem;
   line-height: 1;
   margin-top: .25rem; }
 
 .badge {
-  font-size: 0.6875rem;
-  font-weight: 600;
+  font-size: 0.625rem;
+  font-weight: 500;
   text-transform: uppercase;
   letter-spacing: .04em;
   display: inline-flex;
   justify-content: center;
-  padding: 0 .5em;
-  line-height: 1.75em;
   background: #cbcfd6;
   overflow: hidden;
-  vertical-align: text-bottom; }
+  vertical-align: text-bottom;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none; }
   a.badge {
     color: #ffffff; }
   .badge:empty {
@@ -9631,13 +8995,13 @@ Navbar secondary
   content: "•"; }
 
 .breadcrumb-alternate a {
-  color: #868c97; }
+  color: #6e7582; }
 
 .breadcrumb-alternate .breadcrumb-item.active {
   color: inherit; }
 
 .btn {
-  font-weight: 600;
+  font-weight: 500;
   display: inline-flex;
   align-items: center;
   justify-content: center; }
@@ -9669,30 +9033,30 @@ Navbar secondary
 .btn-secondary {
   color: #354052;
   background-color: #ffffff;
-  border-color: rgba(134, 140, 151, 0.24);
+  border-color: rgba(110, 117, 130, 0.2);
   background-image: linear-gradient(-180deg, rgba(53, 64, 82, 0), rgba(53, 64, 82, 0.04) 100%);
   box-shadow: none !important; }
   .btn-secondary:hover {
     color: #354052;
     background-color: #ececec;
-    border-color: rgba(108, 114, 126, 0.24); }
+    border-color: rgba(87, 92, 102, 0.2); }
   .btn-secondary:focus, .btn-secondary.focus {
     color: #354052;
     background-color: #ececec;
-    border-color: rgba(108, 114, 126, 0.24);
-    box-shadow: 0 0 0 0.2rem rgba(88, 97, 112, 0.5); }
+    border-color: rgba(87, 92, 102, 0.2);
+    box-shadow: 0 0 0 0.2rem rgba(75, 84, 101, 0.5); }
   .btn-secondary:active, .btn-secondary.active,
   .show > .btn-secondary.dropdown-toggle {
     color: #354052;
     background-color: #e6e6e6;
-    border-color: rgba(102, 108, 119, 0.24); }
+    border-color: rgba(81, 86, 95, 0.2); }
     .btn-secondary:active:focus, .btn-secondary.active:focus,
     .show > .btn-secondary.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(88, 97, 112, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(75, 84, 101, 0.5); }
   .btn-secondary:disabled, .btn-secondary.disabled {
     color: #354052;
     background-color: #ffffff;
-    border-color: rgba(134, 140, 151, 0.24); }
+    border-color: rgba(110, 117, 130, 0.2); }
   .btn-secondary.active {
     background: #206bc4;
     color: #ffffff;
@@ -9709,9 +9073,9 @@ Navbar secondary
     padding: 0.375rem 15px; }
 
 .btn-icon {
-  min-width: calc(2.125rem + 2px); }
+  min-width: calc(2.0333333rem + 2px); }
   .btn-icon.btn-sm, .btn-group-sm > .btn-icon.btn {
-    min-width: calc(1.4416667rem + 2px); }
+    min-width: calc(1.35rem + 2px); }
   .btn-icon .icon {
     margin: 0 -1em; }
 
@@ -9738,7 +9102,7 @@ Navbar secondary
   display: flex;
   align-items: center;
   padding: 0;
-  color: #868c97;
+  color: #6e7582;
   cursor: pointer;
   background: none;
   border: none; }
@@ -9778,8 +9142,8 @@ Navbar secondary
 
 .calendar {
   display: block;
-  font-size: 0.8203125rem;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  font-size: 0.765625rem;
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 3px; }
 
 .calendar-nav {
@@ -9798,7 +9162,7 @@ Navbar secondary
   padding: .5rem 0; }
 
 .calendar-header {
-  color: #868c97; }
+  color: #6e7582; }
 
 .calendar-date {
   flex: 0 0 14.2857143%;
@@ -9829,10 +9193,10 @@ Navbar secondary
       color: #206bc4;
       text-decoration: none;
       background: #fefeff;
-      border-color: rgba(134, 140, 151, 0.24); }
+      border-color: rgba(110, 117, 130, 0.2); }
   .calendar-date .date-today {
     color: #206bc4;
-    border-color: rgba(134, 140, 151, 0.24); }
+    border-color: rgba(110, 117, 130, 0.2); }
 
 .calendar-range {
   position: relative; }
@@ -9919,7 +9283,7 @@ Navbar secondary
     height: 5px;
     content: "";
     background: #ffffff;
-    border: 1px solid rgba(134, 140, 151, 0.24);
+    border: 1px solid rgba(110, 117, 130, 0.2);
     border-radius: 3px 3px 0 0; }
 
 .card-cover {
@@ -9943,7 +9307,7 @@ Navbar secondary
 
 .card-actions {
   margin-left: auto;
-  font-size: 0.8125rem; }
+  font-size: 0.75rem; }
   .card-actions a {
     text-decoration: none; }
 
@@ -9960,7 +9324,7 @@ Navbar secondary
   flex: 1; }
 
 .card-footer {
-  color: #868c97; }
+  color: #6e7582; }
 
 .card-progress {
   height: .25rem; }
@@ -9970,13 +9334,13 @@ Navbar secondary
     border-radius: 2px 2px 0 0; }
 
 .card-meta {
-  color: #868c97; }
+  color: #6e7582; }
 
 .card-title {
   display: block;
   margin: 0 0 1rem;
   font-size: 1.125rem;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 1.3333333; }
   a.card-title:hover {
     color: inherit; }
@@ -9987,7 +9351,7 @@ Navbar secondary
   margin-top: -1.25rem;
   margin-bottom: 0.625rem;
   font-size: 87.5%;
-  color: #868c97; }
+  color: #6e7582; }
 
 .card-body > :last-child {
   margin-bottom: 0; }
@@ -10012,7 +9376,7 @@ Navbar secondary
     padding: 0; } }
 
 .card-body + .card-body {
-  border-top: 1px solid rgba(134, 140, 151, 0.24); }
+  border-top: 1px solid rgba(110, 117, 130, 0.2); }
 
 .card-body-scrollable {
   overflow: auto; }
@@ -10030,11 +9394,11 @@ Card optinos
   display: inline-block;
   min-width: 1rem;
   margin-left: .25rem;
-  color: #868c97; }
+  color: #6e7582; }
 
 .card-drop {
   line-height: 1;
-  color: #868c97; }
+  color: #6e7582; }
   .card-drop .icon {
     width: 1.5rem;
     height: 1.5rem;
@@ -10085,7 +9449,7 @@ Card table
   .card-table tbody tr:last-child th {
     border-bottom: 0; }
   .card-body + .card-table {
-    border-top: 1px solid rgba(134, 140, 151, 0.24); }
+    border-top: 1px solid rgba(110, 117, 130, 0.2); }
 
 /*
 Card code
@@ -10119,7 +9483,7 @@ Card avatar
 Card list group
  */
 .card-body + .card-list-group {
-  border-top: 1px solid rgba(134, 140, 151, 0.24); }
+  border-top: 1px solid rgba(110, 117, 130, 0.2); }
 
 .card-list-group .list-group-item {
   padding-right: 1.25rem;
@@ -10143,10 +9507,10 @@ Card tabs
     border-bottom: 0; }
     .card-tabs .nav-tabs .nav-link {
       background: rgba(53, 64, 82, 0.024);
-      border: 1px solid rgba(134, 140, 151, 0.24);
+      border: 1px solid rgba(110, 117, 130, 0.2);
       border-bottom: 0; }
       .card-tabs .nav-tabs .nav-link.active, .card-tabs .nav-tabs .nav-link:active, .card-tabs .nav-tabs .nav-link:hover {
-        border-color: rgba(134, 140, 151, 0.24); }
+        border-color: rgba(110, 117, 130, 0.2); }
       .card-tabs .nav-tabs .nav-link.active {
         background: #ffffff; }
     .card-tabs .nav-tabs .nav-item:not(:first-child) .nav-link {
@@ -10162,7 +9526,7 @@ Card tabs
       margin-bottom: 0; }
       .card-tabs .nav-tabs-bottom .nav-item .nav-link {
         border-top-width: 0;
-        border-bottom: 1px solid rgba(134, 140, 151, 0.24);
+        border-bottom: 1px solid rgba(110, 117, 130, 0.2);
         border-top-left-radius: 0;
         border-top-right-radius: 0; }
   .card-tabs .card {
@@ -10195,19 +9559,19 @@ Card tabs
   margin: 0; }
 
 .dropdown-item-icon {
-  width: 1rem;
-  font-size: 1rem;
+  width: 1rem !important;
+  font-size: 1rem !important;
   margin-right: .5rem;
   opacity: .64;
   text-align: center;
   stroke-width: 2px; }
 
 .dropdown-header {
-  font-size: 0.6875rem;
-  font-weight: 600;
+  font-size: 0.625rem;
+  font-weight: 500;
   text-transform: uppercase;
   letter-spacing: .04em;
-  color: #868c97;
+  color: #6e7582;
   padding-bottom: .25rem;
   pointer-events: none; }
 
@@ -10295,24 +9659,24 @@ Card tabs
     margin-top: 1.5rem; }
 
 .empty-bordered {
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 3px; }
 
 .col-separator {
-  border-left: 1px solid rgba(134, 140, 151, 0.24); }
+  border-left: 1px solid rgba(110, 117, 130, 0.2); }
 
 .container-tight {
   width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
   margin-right: auto;
   margin-left: auto;
   max-width: 30rem; }
 
 .container-narrow {
   width: 100%;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
   margin-right: auto;
   margin-left: auto;
   max-width: 45rem; }
@@ -10422,8 +9786,8 @@ Card tabs
   justify-content: center;
   height: 4rem;
   text-align: center;
-  border-right: 1px solid rgba(134, 140, 151, 0.24);
-  border-bottom: 1px solid rgba(134, 140, 151, 0.24); }
+  border-right: 1px solid rgba(110, 117, 130, 0.2);
+  border-bottom: 1px solid rgba(110, 117, 130, 0.2); }
   .icons-list-item i {
     font-size: 1.25rem; }
 
@@ -10434,16 +9798,20 @@ textarea[cols] {
 Form label
  */
 .form-label {
-  font-size: 0.9375rem;
-  font-weight: 600;
+  font-size: 0.875rem;
+  font-weight: 500;
   display: block;
   margin-bottom: .5rem; }
+  .form-label.required:after {
+    content: "*";
+    margin-left: .25rem;
+    color: #cd201f; }
 
 .form-label-description {
   float: right;
   font-weight: 400;
-  color: #868c97;
-  line-height: 1.8285714;
+  color: #6e7582;
+  line-height: 1.9591837;
   font-size: 87.5%; }
 
 /**
@@ -10452,7 +9820,7 @@ Form hint
 .form-hint {
   display: block;
   font-size: 87.5%;
-  color: #868c97;
+  color: #6e7582;
   line-height: 1.3333334; }
   .form-hint:last-child {
     margin-bottom: 0; }
@@ -10471,7 +9839,7 @@ Form control
   box-shadow: 0 0 0 1000px #ffffff inset; }
 
 .form-control:disabled, .form-control.disabled {
-  color: #868c97;
+  color: #6e7582;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -10484,6 +9852,25 @@ Form control
   background-color: #f5f7fb;
   border-color: transparent; }
 
+.form-control-dark {
+  background-color: rgba(0, 0, 0, 0.1);
+  color: #ffffff;
+  border-color: transparent; }
+  .form-control-dark:focus {
+    background-color: rgba(0, 0, 0, 0.1);
+    box-shadow: none;
+    border-color: rgba(255, 255, 255, 0.24); }
+  .form-control-dark::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.6); }
+  .form-control-dark::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6); }
+  .form-control-dark:-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6); }
+  .form-control-dark::-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6); }
+  .form-control-dark::placeholder {
+    color: rgba(255, 255, 255, 0.6); }
+
 .form-control-rounded {
   border-radius: 10rem; }
 
@@ -10502,24 +9889,21 @@ Form control
   padding: 1rem;
   margin-bottom: 1rem;
   background: rgba(53, 64, 82, 0.024);
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 3px; }
 
-.form-required {
-  color: #fa4654; }
-
 /**
 Form help
  */
 .form-help {
   display: inline-flex;
-  font-weight: 600;
+  font-weight: 500;
   align-items: center;
   justify-content: center;
   width: 1.125rem;
   height: 1.125rem;
   font-size: .75rem;
-  color: #868c97;
+  color: #6e7582;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
@@ -10555,21 +9939,15 @@ Form switch
   padding: .125rem 0; }
 
 .form-check-description {
-  color: #868c97;
-  font-size: 0.8125rem;
+  color: #6e7582;
+  font-size: 0.75rem;
   line-height: 1.3333334; }
 
 /**
 Input group
  */
-.input-group-prepend .input-group-text {
-  border-right: 0; }
-
-.input-group-append .input-group-text {
-  border-left: 0; }
-
 .input-group-link {
-  font-size: 0.8125rem; }
+  font-size: 0.75rem; }
 
 .input-group-flat:focus-within {
   box-shadow: 0 0 0 0.2rem rgba(32, 107, 196, 0.25);
@@ -10579,7 +9957,7 @@ Input group
     border-color: #7aade9 !important; }
 
 .input-group-flat .form-control:focus {
-  border-color: rgba(134, 140, 151, 0.24);
+  border-color: rgba(110, 117, 130, 0.2);
   box-shadow: none; }
 
 .input-group-flat .form-control:not(:last-child) {
@@ -10588,23 +9966,13 @@ Input group
 .input-group-flat .form-control:not(:first-child) {
   border-left: 0; }
 
-.input-group-flat .input-group-prepend {
-  margin-right: 0;
-  border-right: 0;
-  background: #ffffff; }
-  .input-group-flat .input-group-prepend .input-group-text {
-    padding-right: 0; }
-
-.input-group-flat .input-group-append {
-  margin-left: 0; }
-  .input-group-flat .input-group-append:not(:last-child) .input-group-text {
-    border-right: 0; }
-  .input-group-flat .input-group-append .input-group-text {
-    padding-left: 0; }
-
 .input-group-flat .input-group-text {
   background: transparent;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
+  .input-group-flat .input-group-text:first-child {
+    padding-right: 0; }
+  .input-group-flat .input-group-text:last-child {
+    padding-left: 0; }
 
 /**
 Upload files
@@ -10632,7 +10000,7 @@ Icon input
   align-items: center;
   justify-content: center;
   min-width: 2.5rem;
-  color: #868c97;
+  color: #6e7582;
   pointer-events: none;
   font-size: 1.2em; }
   .input-icon-addon:last-child {
@@ -10659,7 +10027,7 @@ Color Input
   width: 1.5rem;
   height: 1.5rem;
   color: #fff;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 3px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
   .form-colorinput-color:before {
@@ -10702,13 +10070,13 @@ Image check
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 3px; }
   .form-imagecheck-input:focus ~ .form-imagecheck-figure {
     border-color: #206bc4;
     box-shadow: 0 0 0 0.2rem rgba(32, 107, 196, 0.25); }
   .form-imagecheck-input:checked ~ .form-imagecheck-figure {
-    border-color: rgba(134, 140, 151, 0.24); }
+    border-color: rgba(110, 117, 130, 0.2); }
   .form-imagecheck-figure:before {
     position: absolute;
     top: .25rem;
@@ -10725,7 +10093,7 @@ Image check
     -ms-user-select: none;
     user-select: none;
     background: #ffffff;
-    border: 1px solid rgba(134, 140, 151, 0.24);
+    border: 1px solid rgba(110, 117, 130, 0.2);
     border-radius: 3px;
     transition: .3s opacity; }
     .form-imagecheck-input:checked ~ .form-imagecheck-figure:before {
@@ -10734,7 +10102,7 @@ Image check
       background-repeat: repeat;
       background-position: center center;
       background-size: 1rem;
-      border-color: rgba(134, 140, 151, 0.24); }
+      border-color: rgba(110, 117, 130, 0.2); }
 
 .form-imagecheck-image {
   max-width: 100%;
@@ -10754,8 +10122,8 @@ Image check
 
 .form-imagecheck-caption {
   padding: .25rem;
-  font-size: 0.8203125rem;
-  color: #868c97;
+  font-size: 0.765625rem;
+  color: #6e7582;
   text-align: center;
   transition: .3s color; }
   .form-imagecheck:hover .form-imagecheck-caption,
@@ -10787,14 +10155,15 @@ Select group
   z-index: -1;
   opacity: 0; }
 
-.form-selectgroup-box {
+.form-selectgroup-label {
   position: relative;
   display: block;
   min-width: calc(1.4666667em + 0.75rem + 2px);
+  margin: 0;
   padding: 0.375rem 0.75rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   line-height: 1.4666667;
-  color: #868c97;
+  color: #6e7582;
   background: #ffffff;
   text-align: center;
   cursor: pointer;
@@ -10802,64 +10171,64 @@ Select group
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 3px;
   transition: border-color .3s, background .3s, color .3s; }
-  .form-selectgroup-box .icon:only-child {
+  .form-selectgroup-label .icon:only-child {
     margin: 0 -.25rem; }
-  .form-selectgroup-box:hover {
+  .form-selectgroup-label:hover {
     color: #354052; }
 
 .form-selectgroup-check {
   display: inline-block;
   width: 1rem;
   height: 1rem;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   vertical-align: middle; }
-  .form-selectgroup-input[type="checkbox"] + .form-selectgroup-box .form-selectgroup-check {
+  .form-selectgroup-input[type="checkbox"] + .form-selectgroup-label .form-selectgroup-check {
     border-radius: 3px; }
-  .form-selectgroup-input[type="radio"] + .form-selectgroup-box .form-selectgroup-check {
+  .form-selectgroup-input[type="radio"] + .form-selectgroup-label .form-selectgroup-check {
     border-radius: 50%; }
-  .form-selectgroup-input:checked + .form-selectgroup-box .form-selectgroup-check {
+  .form-selectgroup-input:checked + .form-selectgroup-label .form-selectgroup-check {
     background-color: #206bc4;
     background-repeat: repeat;
     background-position: center center;
     background-size: 1rem;
-    border-color: rgba(134, 140, 151, 0.24); }
-  .form-selectgroup-input[type="checkbox"]:checked + .form-selectgroup-box .form-selectgroup-check {
+    border-color: rgba(110, 117, 130, 0.2); }
+  .form-selectgroup-input[type="checkbox"]:checked + .form-selectgroup-label .form-selectgroup-check {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6' transform='scale%28.8%29' transform-origin='50% 50%'/%3e%3c/svg%3e"); }
-  .form-selectgroup-input[type="radio"]:checked + .form-selectgroup-box .form-selectgroup-check {
+  .form-selectgroup-input[type="radio"]:checked + .form-selectgroup-label .form-selectgroup-check {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3' fill='%23ffffff' cx='8' cy='8' /%3e%3c/svg%3e"); }
 
-.form-selectgroup-input:checked + .form-selectgroup-box {
+.form-selectgroup-input:checked + .form-selectgroup-label {
   z-index: 1;
   color: #206bc4;
   background: rgba(32, 107, 196, 0.04);
   border-color: #7aade9;
   box-shadow: 0 1px 1px 0 rgba(32, 107, 196, 0.2); }
 
-.form-selectgroup-input:focus + .form-selectgroup-box {
+.form-selectgroup-input:focus + .form-selectgroup-label {
   z-index: 2;
   color: #206bc4;
   border-color: #7aade9;
   box-shadow: 0 0 0 0.2rem rgba(32, 107, 196, 0.25); }
 
-.form-selectgroup-box-content {
+.form-selectgroup-label-content {
   line-height: 1.3333334; }
 
 /**
 Alternate version of form select group
  */
-.form-selectgroup-boxes .form-selectgroup-box {
+.form-selectgroup-boxes .form-selectgroup-label {
   text-align: left;
   padding: 1.25rem 1.25rem;
   color: inherit; }
 
-.form-selectgroup-boxes .form-selectgroup-input:checked + .form-selectgroup-box {
+.form-selectgroup-boxes .form-selectgroup-input:checked + .form-selectgroup-label {
   color: inherit; }
-  .form-selectgroup-boxes .form-selectgroup-input:checked + .form-selectgroup-box .form-selectgroup-title {
+  .form-selectgroup-boxes .form-selectgroup-input:checked + .form-selectgroup-label .form-selectgroup-title {
     color: #206bc4; }
-  .form-selectgroup-boxes .form-selectgroup-input:checked + .form-selectgroup-box .form-selectgroup-box-content {
+  .form-selectgroup-boxes .form-selectgroup-input:checked + .form-selectgroup-label .form-selectgroup-label-content {
     opacity: 1; }
 
 /**
@@ -10870,7 +10239,7 @@ Select group
   align-items: flex-start; }
   .form-selectgroup-pills .form-selectgroup-item {
     flex-grow: 0; }
-  .form-selectgroup-pills .form-selectgroup-box {
+  .form-selectgroup-pills .form-selectgroup-label {
     border-radius: 50px; }
 
 /**
@@ -10886,7 +10255,7 @@ Remove the cancel buttons in Chrome and Safari on macOS.
   -webkit-appearance: none; }
 
 .form-control.is-valid-lite, .form-control.is-invalid-lite {
-  border-color: rgba(134, 140, 151, 0.24); }
+  border-color: rgba(110, 117, 130, 0.2); }
 
 .legend {
   display: inline-block;
@@ -10906,7 +10275,7 @@ Remove the cancel buttons in Chrome and Safari on macOS.
   margin-left: auto; }
 
 .list-bordered .list-item, .list-row .list-item {
-  border-top: 1px solid rgba(134, 140, 151, 0.24);
+  border-top: 1px solid rgba(110, 117, 130, 0.2);
   margin-top: -1px; }
   .list-bordered .list-item:first-child, .list-row .list-item:first-child {
     border-top: none; }
@@ -10941,7 +10310,7 @@ Remove the cancel buttons in Chrome and Safari on macOS.
 .list-timeline-time {
   float: right;
   margin-left: 1rem;
-  color: #868c97; }
+  color: #6e7582; }
 
 .list-timeline-icon {
   position: absolute;
@@ -10954,7 +10323,7 @@ Remove the cancel buttons in Chrome and Safari on macOS.
   height: 2.5rem;
   color: #ffffff;
   text-align: center;
-  background: #868c97;
+  background: #6e7582;
   border-radius: 50%; }
   .list-timeline-icon .icon {
     width: 1rem;
@@ -10962,7 +10331,7 @@ Remove the cancel buttons in Chrome and Safari on macOS.
 
 .list-timeline-title {
   margin: 0;
-  font-weight: 600; }
+  font-weight: 500; }
 
 .list-timeline-content {
   margin-left: 3.5rem; }
@@ -11002,9 +10371,9 @@ Remove the cancel buttons in Chrome and Safari on macOS.
     border: 0;
     border-radius: 3px; }
     .list-group-transparent .list-group-item .icon {
-      color: #868c97; }
+      color: #6e7582; }
     .list-group-transparent .list-group-item.active {
-      font-weight: 600;
+      font-weight: 500;
       color: inherit;
       background: rgba(32, 107, 196, 0.06); }
       .list-group-transparent .list-group-item.active .icon {
@@ -11017,7 +10386,7 @@ Remove the cancel buttons in Chrome and Safari on macOS.
   .list-separated-item:last-child {
     padding-bottom: 0; }
   .list-separated-item + .list-separated-item {
-    border-top: 1px solid rgba(134, 140, 151, 0.24); }
+    border-top: 1px solid rgba(110, 117, 130, 0.2); }
 
 /**
 Inline list
@@ -11113,7 +10482,7 @@ Dimmer
   margin-bottom: 1rem; }
 
 .modal-body + .modal-body {
-  border-top: 1px solid rgba(134, 140, 151, 0.12); }
+  border-top: 1px solid rgba(110, 117, 130, 0.1); }
 
 .modal-header {
   align-items: center;
@@ -11123,7 +10492,7 @@ Dimmer
 
 .modal-title {
   font-size: 1.125rem;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 1.3333333; }
 
 .modal-footer {
@@ -11139,12 +10508,12 @@ Dimmer
   margin: 0 0.5rem; }
 
 .nav-tabs .icon {
-  color: #868c97; }
+  color: #6e7582; }
 
 .nav-tabs .nav-link {
   padding: 0.75rem 1.25rem;
   line-height: 20px;
-  color: #868c97;
+  color: #6e7582;
   cursor: pointer;
   background: transparent;
   border: none;
@@ -11154,7 +10523,7 @@ Dimmer
     color: #354052;
     border-color: transparent; }
   .nav-tabs .nav-link.disabled {
-    color: rgba(134, 140, 151, 0.2); }
+    color: rgba(110, 117, 130, 0.2); }
   .nav-tabs .nav-link.active {
     color: #354052;
     background: inherit;
@@ -11163,7 +10532,7 @@ Dimmer
 
 .nav-tabs-alt .nav-link {
   font-size: 13px;
-  font-weight: 600;
+  font-weight: 500;
   text-transform: uppercase; }
 
 .nav-icon {
@@ -11174,14 +10543,25 @@ Dimmer
     stroke-width: 1.5; }
 
 .nav-link {
+  border-radius: 3px;
   display: flex;
-  align-items: center;
-  transition: .3s color; }
+  transition: .3s color;
+  align-items: center; }
+  .nav-link .icon {
+    display: inline-block;
+    font-size: 1rem; }
+
+.nav-link-icon {
+  width: 1.25rem;
+  height: 1rem;
+  font-size: 1rem; }
+  .nav-link-icon .icon {
+    display: block; }
 
 .stars {
   display: inline-flex;
   color: #dee1e7;
-  font-size: 0.8125rem; }
+  font-size: 0.75rem; }
   .stars .star:not(:first-child) {
     margin-left: .25rem; }
 
@@ -11209,10 +10589,10 @@ Dimmer
 .page-item-subtitle {
   margin-bottom: 2px;
   font-size: 12px;
-  color: #868c97;
+  color: #6e7582;
   text-transform: uppercase; }
   .page-item.disabled .page-item-subtitle {
-    color: rgba(134, 140, 151, 0.5); }
+    color: rgba(110, 117, 130, 0.5); }
 
 .page-item-title {
   font-size: 1.125rem;
@@ -11221,7 +10601,7 @@ Dimmer
   .page-link:hover .page-item-title {
     color: #206bc4; }
   .page-item.disabled .page-item-title {
-    color: rgba(134, 140, 151, 0.5); }
+    color: rgba(110, 117, 130, 0.5); }
 
 @-webkit-keyframes progress-indeterminate {
   0% {
@@ -11283,8 +10663,8 @@ Dimmer
   right: -0.25rem;
   z-index: 1;
   padding: .25rem .75rem;
-  font-size: 0.6875rem;
-  font-weight: 600;
+  font-size: 0.625rem;
+  font-weight: 500;
   line-height: 1.5rem;
   color: #fff;
   text-align: center;
@@ -11325,9 +10705,9 @@ Dimmer
   .ribbon.bg-pink-lt {
     border-color: #fde2eb !important; }
   .ribbon.bg-red {
-    border-color: #fa4654; }
+    border-color: #cd201f; }
   .ribbon.bg-red-lt {
-    border-color: #fedadd !important; }
+    border-color: #f5d2d2 !important; }
   .ribbon.bg-orange {
     border-color: #ff922b; }
   .ribbon.bg-orange-lt {
@@ -11453,9 +10833,9 @@ Dimmer
   height: 2.5rem;
   line-height: 2.5rem;
   padding: 0 .25rem;
-  font-size: 0.9375rem;
-  font-weight: 600;
-  color: #868c97;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #6e7582;
   text-align: center;
   background: #f1f3f8;
   border-radius: 3px; }
@@ -11527,11 +10907,11 @@ Dimmer
 
 .steps-red .step-item:after, .steps-red .step-item:before {
   color: #ffffff;
-  background: #fa4654; }
+  background: #cd201f; }
 
 .steps-red .step-item.active:before {
   color: inherit;
-  border-color: #fa4654; }
+  border-color: #cd201f; }
 
 .steps-orange .step-item:after, .steps-orange .step-item:before {
   color: #ffffff;
@@ -11643,15 +11023,15 @@ Dimmer
     border-radius: 50%;
     transform: translateX(-50%); }
   .step-item.active {
-    font-weight: 600; }
+    font-weight: 500; }
     .step-item.active:before {
       background: #fff; }
     .step-item.active ~ .step-item {
-      color: #868c97; }
+      color: #6e7582; }
       .step-item.active ~ .step-item:after, .step-item.active ~ .step-item:before {
         background: #f3f5f5; }
       .step-item.active ~ .step-item:before {
-        color: #868c97 !important; }
+        color: #6e7582 !important; }
 
 .steps-counter {
   counter-reset: steps; }
@@ -11677,18 +11057,18 @@ Dimmer
   .table thead th, .markdown > table thead th {
     background: rgba(53, 64, 82, 0.024);
     border-width: 1px;
-    font-size: 0.6875rem;
-    font-weight: 600;
+    font-size: 0.625rem;
+    font-weight: 500;
     text-transform: uppercase;
     letter-spacing: .04em;
-    color: #868c97;
+    color: #6e7582;
     padding-top: .5rem;
     padding-bottom: .5rem; }
     @media print {
       .table thead th, .markdown > table thead th {
         background: transparent; } }
   .table th, .markdown > table th {
-    color: #868c97; }
+    color: #6e7582; }
 
 .table-nowrap th,
 .table-nowrap td {
@@ -11725,15 +11105,15 @@ Dimmer
       border: none;
       color: #354052 !important; }
       .table-mobile td[data-label]:before {
-        font-size: 0.6875rem;
-        font-weight: 600;
+        font-size: 0.625rem;
+        font-weight: 500;
         text-transform: uppercase;
         letter-spacing: .04em;
-        color: #868c97;
+        color: #6e7582;
         content: attr(data-label);
         display: block; }
     .table-mobile tr {
-      border-bottom: 1px solid rgba(134, 140, 151, 0.24); }
+      border-bottom: 1px solid rgba(110, 117, 130, 0.2); }
     .table-mobile .btn {
       display: block; } }
 
@@ -11752,15 +11132,15 @@ Dimmer
       border: none;
       color: #354052 !important; }
       .table-mobile-sm td[data-label]:before {
-        font-size: 0.6875rem;
-        font-weight: 600;
+        font-size: 0.625rem;
+        font-weight: 500;
         text-transform: uppercase;
         letter-spacing: .04em;
-        color: #868c97;
+        color: #6e7582;
         content: attr(data-label);
         display: block; }
     .table-mobile-sm tr {
-      border-bottom: 1px solid rgba(134, 140, 151, 0.24); }
+      border-bottom: 1px solid rgba(110, 117, 130, 0.2); }
     .table-mobile-sm .btn {
       display: block; } }
 
@@ -11779,15 +11159,15 @@ Dimmer
       border: none;
       color: #354052 !important; }
       .table-mobile-md td[data-label]:before {
-        font-size: 0.6875rem;
-        font-weight: 600;
+        font-size: 0.625rem;
+        font-weight: 500;
         text-transform: uppercase;
         letter-spacing: .04em;
-        color: #868c97;
+        color: #6e7582;
         content: attr(data-label);
         display: block; }
     .table-mobile-md tr {
-      border-bottom: 1px solid rgba(134, 140, 151, 0.24); }
+      border-bottom: 1px solid rgba(110, 117, 130, 0.2); }
     .table-mobile-md .btn {
       display: block; } }
 
@@ -11806,15 +11186,15 @@ Dimmer
       border: none;
       color: #354052 !important; }
       .table-mobile-lg td[data-label]:before {
-        font-size: 0.6875rem;
-        font-weight: 600;
+        font-size: 0.625rem;
+        font-weight: 500;
         text-transform: uppercase;
         letter-spacing: .04em;
-        color: #868c97;
+        color: #6e7582;
         content: attr(data-label);
         display: block; }
     .table-mobile-lg tr {
-      border-bottom: 1px solid rgba(134, 140, 151, 0.24); }
+      border-bottom: 1px solid rgba(110, 117, 130, 0.2); }
     .table-mobile-lg .btn {
       display: block; } }
 
@@ -11832,15 +11212,15 @@ Dimmer
     border: none;
     color: #354052 !important; }
     .table-mobile-xl td[data-label]:before {
-      font-size: 0.6875rem;
-      font-weight: 600;
+      font-size: 0.625rem;
+      font-weight: 500;
       text-transform: uppercase;
       letter-spacing: .04em;
-      color: #868c97;
+      color: #6e7582;
       content: attr(data-label);
       display: block; }
   .table-mobile-xl tr {
-    border-bottom: 1px solid rgba(134, 140, 151, 0.24); }
+    border-bottom: 1px solid rgba(110, 117, 130, 0.2); }
   .table-mobile-xl .btn {
     display: block; }
 
@@ -11871,11 +11251,11 @@ Hr text
   display: flex;
   align-items: center;
   margin: 2rem 0;
-  font-size: 0.6875rem;
-  font-weight: 600;
+  font-size: 0.625rem;
+  font-weight: 500;
   text-transform: uppercase;
   letter-spacing: .04em;
-  color: #868c97;
+  color: #6e7582;
   height: 1px; }
   .hr-text:after, .hr-text:before {
     flex: 1 1 auto;
@@ -11891,7 +11271,7 @@ Hr text
   .hr-text > *:first-child {
     padding-right: .5rem;
     padding-left: 0;
-    color: #868c97; }
+    color: #6e7582; }
   .hr-text.hr-text-left:before {
     content: none; }
   .hr-text.hr-text-left > *:first-child {
@@ -11939,12 +11319,12 @@ h6 a,
 strong,
 .strong,
 b {
-  font-weight: 600; }
+  font-weight: 500; }
 
 blockquote {
   padding-left: 1rem;
-  color: #868c97;
-  border-left: 2px solid rgba(134, 140, 151, 0.24); }
+  color: #6e7582;
+  border-left: 2px solid rgba(110, 117, 130, 0.2); }
   blockquote p {
     margin-bottom: 1rem; }
   blockquote cite {
@@ -11968,11 +11348,11 @@ code {
 pre {
   padding: 1rem;
   overflow: auto;
-  font-size: 0.6875rem;
+  font-size: 0.625rem;
   -webkit-hyphens: none;
   -ms-hyphens: none;
   hyphens: none;
-  line-height: 1.6;
+  line-height: 1.7142857;
   -moz-tab-size: 3;
   -o-tab-size: 3;
   tab-size: 3;
@@ -12008,19 +11388,15 @@ Links
 Subheader
  */
 .subheader {
-  font-size: 0.6875rem;
-  font-weight: 600;
+  font-size: 0.625rem;
+  font-weight: 500;
   text-transform: uppercase;
   letter-spacing: .04em;
-  color: #868c97; }
+  color: #6e7582; }
 
 /**
 Markdown
  */
-@media (min-width: 48rem) {
-  .markdown {
-    font-size: 1rem; } }
-
 .markdown > :first-child {
   margin-top: 0; }
 
@@ -12083,7 +11459,7 @@ Chart sparkline
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.6875rem; }
+  font-size: 0.625rem; }
   .chart-sparkline-label .icon {
     width: 1rem;
     height: 1rem; }
@@ -12253,14 +11629,14 @@ SOCIAL COLORS
   background: #fde2eb !important; }
 
 .bg-red {
-  background: #fa4654; }
+  background: #cd201f; }
 
 .text-red {
-  color: #fa4654 !important; }
+  color: #cd201f !important; }
 
 .bg-red-lt {
-  color: #fa4654 !important;
-  background: #fedadd !important; }
+  color: #cd201f !important;
+  background: #f5d2d2 !important; }
 
 .bg-orange {
   background: #ff922b; }
@@ -12418,34 +11794,22 @@ Scrollable
   height: 1rem !important; }
 
 .w-4 {
-  width: 1.25rem !important; }
+  width: 1.5rem !important; }
 
 .h-4 {
-  height: 1.25rem !important; }
+  height: 1.5rem !important; }
 
 .w-5 {
-  width: 2rem !important; }
-
-.h-5 {
-  height: 2rem !important; }
-
-.w-6 {
   width: 3rem !important; }
 
-.h-6 {
+.h-5 {
   height: 3rem !important; }
 
-.w-7 {
-  width: 6rem !important; }
+.w-6 {
+  width: 4.5rem !important; }
 
-.h-7 {
-  height: 6rem !important; }
-
-.w-8 {
-  width: 9rem !important; }
-
-.h-8 {
-  height: 9rem !important; }
+.h-6 {
+  height: 4.5rem !important; }
 
 .w-auto {
   width: auto !important; }
@@ -12556,11 +11920,11 @@ Antialiasing
     color: #f5f7fb;
     background-color: #2f3949; }
   .theme-dark .card,
-  .theme-dark .navbar-light,
   .theme-dark .footer,
   .theme-dark .modal-content,
   .theme-dark .modal-header,
-  .theme-dark .dropdown-menu {
+  .theme-dark .dropdown-menu,
+  .theme-dark .flatpickr-calendar {
     background-color: #354052;
     color: inherit; }
   .theme-dark .card {
@@ -12569,20 +11933,20 @@ Antialiasing
   .theme-dark .form-file-button {
     color: #f5f7fb;
     background-color: #3b475b;
-    border-color: rgba(134, 140, 151, 0.24);
+    border-color: rgba(110, 117, 130, 0.2);
     background-image: none; }
     .theme-dark .btn-secondary:hover,
     .theme-dark .form-file-button:hover {
       color: #f5f7fb;
       background-color: rgba(53, 64, 82, 0);
-      border-color: rgba(134, 140, 151, 0.24); }
+      border-color: rgba(110, 117, 130, 0.2); }
     .theme-dark .btn-secondary:focus, .theme-dark .btn-secondary.focus,
     .theme-dark .form-file-button:focus,
     .theme-dark .form-file-button.focus {
       color: #f5f7fb;
       background-color: rgba(53, 64, 82, 0);
-      border-color: rgba(134, 140, 151, 0.24);
-      box-shadow: 0 0 0 0.2rem rgba(197, 200, 207, 0.5); }
+      border-color: rgba(110, 117, 130, 0.2);
+      box-shadow: 0 0 0 0.2rem rgba(193, 197, 204, 0.5); }
     .theme-dark .btn-secondary:active, .theme-dark .btn-secondary.active,
     .show > .theme-dark .btn-secondary.dropdown-toggle,
     .theme-dark .form-file-button:active,
@@ -12591,25 +11955,25 @@ Antialiasing
     .theme-dark .form-file-button.dropdown-toggle {
       color: #ffffff;
       background-color: #272f3c;
-      border-color: rgba(102, 108, 119, 0.24); }
+      border-color: rgba(81, 86, 95, 0.2); }
       .theme-dark .btn-secondary:active:focus, .theme-dark .btn-secondary.active:focus,
       .show > .theme-dark .btn-secondary.dropdown-toggle:focus,
       .theme-dark .form-file-button:active:focus,
       .theme-dark .form-file-button.active:focus,
       .show >
       .theme-dark .form-file-button.dropdown-toggle:focus {
-        box-shadow: 0 0 0 0.2rem rgba(197, 200, 207, 0.5); }
+        box-shadow: 0 0 0 0.2rem rgba(193, 197, 204, 0.5); }
     .theme-dark .btn-secondary:disabled, .theme-dark .btn-secondary.disabled,
     .theme-dark .form-file-button:disabled,
     .theme-dark .form-file-button.disabled {
       color: #f5f7fb;
       background-color: #3b475b;
-      border-color: rgba(134, 140, 151, 0.24); }
+      border-color: rgba(110, 117, 130, 0.2); }
   .theme-dark .form-check-input:not(:checked),
   .theme-dark .form-select,
   .theme-dark .form-file-text,
   .theme-dark .form-control,
-  .theme-dark .form-selectgroup-box,
+  .theme-dark .form-selectgroup-label,
   .theme-dark .flatpickr-input.flatpickr-input,
   .theme-dark .form-selectgroup-check,
   .theme-dark .form-imagecheck-figure:before {
@@ -12619,8 +11983,6 @@ Antialiasing
     color: #f5f7fb; }
   .theme-dark .input-group-flat .input-group-text {
     background-color: #2f3949; }
-  .theme-dark .navbar {
-    box-shadow: 0 0 0 1px #2f3949; }
   .theme-dark .highlight {
     background-color: #2f3949; }
   .theme-dark .avatar {
@@ -12644,11 +12006,11 @@ Antialiasing
     color: #f5f7fb;
     background-color: #2f3949; }
   .theme-dark-auto .card,
-  .theme-dark-auto .navbar-light,
   .theme-dark-auto .footer,
   .theme-dark-auto .modal-content,
   .theme-dark-auto .modal-header,
-  .theme-dark-auto .dropdown-menu {
+  .theme-dark-auto .dropdown-menu,
+  .theme-dark-auto .flatpickr-calendar {
     background-color: #354052;
     color: inherit; }
   .theme-dark-auto .card {
@@ -12657,20 +12019,20 @@ Antialiasing
   .theme-dark-auto .form-file-button {
     color: #f5f7fb;
     background-color: #3b475b;
-    border-color: rgba(134, 140, 151, 0.24);
+    border-color: rgba(110, 117, 130, 0.2);
     background-image: none; }
     .theme-dark-auto .btn-secondary:hover,
     .theme-dark-auto .form-file-button:hover {
       color: #f5f7fb;
       background-color: rgba(53, 64, 82, 0);
-      border-color: rgba(134, 140, 151, 0.24); }
+      border-color: rgba(110, 117, 130, 0.2); }
     .theme-dark-auto .btn-secondary:focus, .theme-dark-auto .btn-secondary.focus,
     .theme-dark-auto .form-file-button:focus,
     .theme-dark-auto .form-file-button.focus {
       color: #f5f7fb;
       background-color: rgba(53, 64, 82, 0);
-      border-color: rgba(134, 140, 151, 0.24);
-      box-shadow: 0 0 0 0.2rem rgba(197, 200, 207, 0.5); }
+      border-color: rgba(110, 117, 130, 0.2);
+      box-shadow: 0 0 0 0.2rem rgba(193, 197, 204, 0.5); }
     .theme-dark-auto .btn-secondary:active, .theme-dark-auto .btn-secondary.active,
     .show > .theme-dark-auto .btn-secondary.dropdown-toggle,
     .theme-dark-auto .form-file-button:active,
@@ -12679,25 +12041,25 @@ Antialiasing
     .theme-dark-auto .form-file-button.dropdown-toggle {
       color: #ffffff;
       background-color: #272f3c;
-      border-color: rgba(102, 108, 119, 0.24); }
+      border-color: rgba(81, 86, 95, 0.2); }
       .theme-dark-auto .btn-secondary:active:focus, .theme-dark-auto .btn-secondary.active:focus,
       .show > .theme-dark-auto .btn-secondary.dropdown-toggle:focus,
       .theme-dark-auto .form-file-button:active:focus,
       .theme-dark-auto .form-file-button.active:focus,
       .show >
       .theme-dark-auto .form-file-button.dropdown-toggle:focus {
-        box-shadow: 0 0 0 0.2rem rgba(197, 200, 207, 0.5); }
+        box-shadow: 0 0 0 0.2rem rgba(193, 197, 204, 0.5); }
     .theme-dark-auto .btn-secondary:disabled, .theme-dark-auto .btn-secondary.disabled,
     .theme-dark-auto .form-file-button:disabled,
     .theme-dark-auto .form-file-button.disabled {
       color: #f5f7fb;
       background-color: #3b475b;
-      border-color: rgba(134, 140, 151, 0.24); }
+      border-color: rgba(110, 117, 130, 0.2); }
   .theme-dark-auto .form-check-input:not(:checked),
   .theme-dark-auto .form-select,
   .theme-dark-auto .form-file-text,
   .theme-dark-auto .form-control,
-  .theme-dark-auto .form-selectgroup-box,
+  .theme-dark-auto .form-selectgroup-label,
   .theme-dark-auto .flatpickr-input.flatpickr-input,
   .theme-dark-auto .form-selectgroup-check,
   .theme-dark-auto .form-imagecheck-figure:before {
@@ -12707,8 +12069,6 @@ Antialiasing
     color: #f5f7fb; }
   .theme-dark-auto .input-group-flat .input-group-text {
     background-color: #2f3949; }
-  .theme-dark-auto .navbar {
-    box-shadow: 0 0 0 1px #2f3949; }
   .theme-dark-auto .highlight {
     background-color: #2f3949; }
   .theme-dark-auto .avatar {
@@ -12733,11 +12093,12 @@ Antialiasing
 
 .selectize-control {
   padding: 0;
-  border: 0; }
+  border: 0;
+  height: auto; }
   .selectize-control.multi .selectize-input.has-items {
     padding-left: 6px; }
   .selectize-control.multi .selectize-input > div {
-    font-size: 0.8125rem;
+    font-size: 0.75rem;
     margin: 0 6px 2px 0;
     padding: 2px 8px;
     border-radius: 3px;
@@ -12747,7 +12108,7 @@ Antialiasing
     font-size: inherit !important;
     font-weight: normal !important;
     border-left: 0 !important;
-    color: #868c97 !important; }
+    color: #6e7582 !important; }
   .selectize-control.is-valid {
     padding: 0; }
     .selectize-control.is-valid .selectize-input {
@@ -12757,36 +12118,36 @@ Antialiasing
     .selectize-control.is-valid .selectize-dropdown {
       background: none;
       background-color: inherit;
-      border-color: rgba(134, 140, 151, 0.24);
+      border-color: rgba(110, 117, 130, 0.2);
       padding-right: 0; }
   .selectize-control.is-invalid {
     padding: 0; }
     .selectize-control.is-invalid .selectize-input {
-      border-color: #fa4654; }
+      border-color: #cd201f; }
       .selectize-control.is-invalid .selectize-input.focus {
-        box-shadow: 0 0 0 0.2rem rgba(250, 70, 84, 0.25); }
+        box-shadow: 0 0 0 0.2rem rgba(205, 32, 31, 0.25); }
     .selectize-control.is-invalid .selectize-dropdown {
       background: none;
       background-color: inherit;
-      border-color: rgba(134, 140, 151, 0.24);
+      border-color: rgba(110, 117, 130, 0.2);
       padding-right: 0; }
 
 .selectize-input {
   display: flex !important;
-  height: 100%;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   padding: 0.375rem 0.75rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   box-shadow: none;
   line-height: 1.4666667;
-  background-color: inherit;
-  color: inherit !important; }
+  background-color: inherit !important;
+  color: inherit !important;
+  flex-wrap: wrap; }
   .selectize-input.full {
     background-color: inherit; }
   .selectize-input.dropdown-active {
     border-radius: 3px; }
   .selectize-control.single .selectize-input {
-    background: #ffffff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28134, 140, 151, 0.48%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.75rem center/16px 12px; }
+    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28110, 117, 130, 0.44%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.75rem center/16px 12px; }
   .selectize-input.focus {
     border-color: #7aade9;
     box-shadow: 0 0 0 0.2rem rgba(32, 107, 196, 0.25); }
@@ -12802,7 +12163,7 @@ Antialiasing
   .selectize-dropdown .option-header {
     padding: 0.25rem 0.75rem; }
   .selectize-dropdown .active {
-    background: rgba(134, 140, 151, 0.06);
+    background: rgba(110, 117, 130, 0.06);
     color: inherit;
     cursor: pointer; }
 
@@ -12811,7 +12172,7 @@ Antialiasing
   height: auto;
   width: auto;
   left: .5rem;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   background: #ffffff;
   color: #354052; }
 
@@ -12823,22 +12184,22 @@ Antialiasing
 
 .jqvmap-label {
   font-family: inherit;
-  font-size: 0.6875rem;
+  font-size: 0.625rem;
   line-height: 1;
   padding: .25rem;
   background: #354052; }
 
 .apexcharts-title-text {
-  font-weight: 600 !important; }
+  font-weight: 500 !important; }
 
 .apexcharts-tooltip-title {
-  font-weight: 600 !important;
+  font-weight: 500 !important;
   padding-bottom: .25rem !important; }
 
 .apexcharts-gridline,
 .apexcharts-ycrosshairs,
 .apexcharts-xaxis-tick {
-  stroke: rgba(134, 140, 151, 0.24) !important; }
+  stroke: rgba(110, 117, 130, 0.2) !important; }
 
 .apexcharts-tooltip {
   line-height: 1;
@@ -12874,41 +12235,41 @@ Antialiasing
 .fc-unthemed td,
 .fc-unthemed th,
 .fc-unthemed thead {
-  border-color: rgba(134, 140, 151, 0.24); }
+  border-color: rgba(110, 117, 130, 0.2); }
 
 .fc-unthemed .fc-toolbar h2, .fc-unthemed .fc-toolbar .h2 {
   font-size: 1.375rem;
   margin: 0; }
 
 .fc-unthemed .fc-button {
-  color: #868c97;
+  color: #6e7582;
   background-color: #ffffff;
-  border-color: rgba(134, 140, 151, 0.24);
+  border-color: rgba(110, 117, 130, 0.2);
   padding: 0.375rem 1rem;
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   border-radius: 3px;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
   .fc-unthemed .fc-button:hover {
     color: #354052;
     background-color: #ececec;
-    border-color: rgba(108, 114, 126, 0.24); }
+    border-color: rgba(87, 92, 102, 0.2); }
   .fc-unthemed .fc-button:focus, .fc-unthemed .fc-button.focus {
     color: #354052;
     background-color: #ececec;
-    border-color: rgba(108, 114, 126, 0.24);
-    box-shadow: 0 0 0 0.2rem rgba(134, 140, 151, 0.5); }
+    border-color: rgba(87, 92, 102, 0.2);
+    box-shadow: 0 0 0 0.2rem rgba(110, 117, 130, 0.5); }
   .fc-unthemed .fc-button:active, .fc-unthemed .fc-button.active,
   .show > .fc-unthemed .fc-button.dropdown-toggle {
     color: #354052;
     background-color: #e6e6e6;
-    border-color: rgba(102, 108, 119, 0.24); }
+    border-color: rgba(81, 86, 95, 0.2); }
     .fc-unthemed .fc-button:active:focus, .fc-unthemed .fc-button.active:focus,
     .show > .fc-unthemed .fc-button.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(134, 140, 151, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(110, 117, 130, 0.5); }
   .fc-unthemed .fc-button:disabled, .fc-unthemed .fc-button.disabled {
-    color: #868c97;
+    color: #6e7582;
     background-color: #ffffff;
-    border-color: rgba(134, 140, 151, 0.24); }
+    border-color: rgba(110, 117, 130, 0.2); }
   @media (prefers-reduced-motion: reduce) {
     .fc-unthemed .fc-button {
       transition: none; } }
@@ -12918,14 +12279,14 @@ Antialiasing
 
 .fc-unthemed .fc-day-header {
   padding-bottom: .25rem;
-  font-weight: 600; }
+  font-weight: 500; }
 
 .fc-unthemed.card-calendar .fc-day-grid-container {
   border-bottom: 0;
   border-left: 0; }
 
 .fc-unthemed .fc-time {
-  font-weight: 600; }
+  font-weight: 500; }
 
 .fc-unthemed .fc-event {
   border-color: rgba(0, 0, 0, 0.05);
@@ -12941,7 +12302,7 @@ Antialiasing
 
 .flatpickr-calendar {
   background: #ffffff;
-  border: 1px solid rgba(134, 140, 151, 0.24);
+  border: 1px solid rgba(110, 117, 130, 0.2);
   border-radius: 3px;
   padding: .5rem;
   font-size: inherit;
@@ -12977,16 +12338,16 @@ Antialiasing
     color: inherit;
     opacity: .2; }
   .flatpickr-day.today {
-    border-color: rgba(134, 140, 151, 0.24); }
+    border-color: rgba(110, 117, 130, 0.2); }
   .flatpickr-day.selected {
     background-color: #206bc4; }
 
 span.flatpickr-weekday {
-  font-size: 0.6875rem;
-  font-weight: 600;
+  font-size: 0.625rem;
+  font-weight: 500;
   text-transform: uppercase;
   letter-spacing: .04em;
-  color: #868c97; }
+  color: #6e7582; }
 
 .flatpickr-months {
   margin-bottom: .5rem; }
@@ -13003,7 +12364,7 @@ span.flatpickr-weekday {
   .flatpickr-months .flatpickr-prev-month,
   .flatpickr-months .flatpickr-next-month {
     position: static;
-    color: #868c97; }
+    color: #6e7582; }
     .flatpickr-months .flatpickr-prev-month:hover,
     .flatpickr-months .flatpickr-next-month:hover {
       color: #354052; }
@@ -13029,7 +12390,7 @@ span.flatpickr-weekday {
 .flatpickr-day:focus,
 .flatpickr-day.prevMonthDay:focus,
 .flatpickr-day.nextMonthDay:focus {
-  background: rgba(134, 140, 151, 0.06);
+  background: rgba(110, 117, 130, 0.06);
   border-color: transparent; }
 
 .noUi-target {
diff --git a/dist/css/tabler.css.map b/dist/css/tabler.css.map
index c6bb53ec7..27eb01db6 100644
Binary files a/dist/css/tabler.css.map and b/dist/css/tabler.css.map differ
diff --git a/dist/css/tabler.min.css b/dist/css/tabler.min.css
index c1dd91e55..e82265ec8 100644
--- a/dist/css/tabler.min.css
+++ b/dist/css/tabler.min.css
@@ -1,7 +1,7 @@
 @charset "UTF-8";/*!
- * Tabler (v1.0.0-alpha.4)
+ * Tabler (v1.0.0-alpha.5)
  * Copyright 2018-2020 The Tabler Authors
  * Copyright 2018-2020 codecalm
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
- */@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,500,600,700&display=swap);:root{--blue:#206bc4;--azure:#45aaf2;--indigo:#6574cd;--purple:#a55eea;--pink:#f66d9b;--red:#fa4654;--orange:#ff922b;--yellow:#fab005;--lime:#94d82d;--green:#5eba00;--teal:#2bcbba;--cyan:#17a2b8;--white:#ffffff;--gray:#a8aeb7;--gray-dark:#545d6d;--dark:#354052;--primary:#206bc4;--secondary:#868c97;--success:#5eba00;--info:#45aaf2;--warning:#fab005;--danger:#fa4654;--light:#f5f7fb;--dark:#354052;--font-family-sans-serif:"Source Sans Pro",-apple-system,blinkmacsystemfont,segoe ui,helvetica,arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;--font-family-monospace:Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}*,::after,::before{box-sizing:border-box}body{margin:0;font-family:"Source Sans Pro",-apple-system,blinkmacsystemfont,segoe ui,helvetica,arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;font-size:.9375rem;font-weight:400;line-height:1.6;color:#354052;background-color:#f5f7fb;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}.hr,hr{margin:2rem 0;color:inherit;background-color:currentColor;border:0;opacity:.1}.hr:not([size]),hr:not([size]){height:1px}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:600;line-height:1.2}.h1,h1{font-size:calc(1.2875rem + .45vw)}@media (min-width:1200px){.h1,h1{font-size:1.625rem}}.h2,h2{font-size:calc(1.2625rem + .15vw)}@media (min-width:1200px){.h2,h2{font-size:1.375rem}}.h3,h3{font-size:1.125rem}.h4,h4{font-size:.9375rem}.h5,h5{font-size:.8125rem}.h6,h6{font-size:.6875rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:600}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}.small,small{font-size:87.5%}.mark,mark{padding:.2em;background-color:#fcf8e3}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#206bc4;text-decoration:none}a:hover{color:#154782}a:not([href]),a:not([href]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.6875rem}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.6875rem;color:#206bc4;word-wrap:break-word}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:.6875rem;color:#fff;background-color:#354052;border-radius:.2rem}kbd kbd{padding:0;font-size:1em;font-weight:600}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:#868c97;text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[list]::-webkit-calendar-picker-indicator{display:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:textfield}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit;white-space:normal}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}.lead{font-size:.9375rem;font-weight:400}.display-1{font-size:calc(1.725rem + 5.7vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-1{font-size:6rem}}.display-2{font-size:calc(1.675rem + 5.1vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-2{font-size:5.5rem}}.display-3{font-size:calc(1.575rem + 3.9vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-3{font-size:4.5rem}}.display-4{font-size:calc(1.475rem + 2.7vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-4{font-size:3.5rem}}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}.initialism{font-size:87.5%;text-transform:uppercase}.blockquote{margin-bottom:1rem;font-size:.9375rem}.blockquote-footer{display:block;font-size:87.5%;color:#a8aeb7}.blockquote-footer::before{content:"\2014\00A0"}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:#f5f7fb;border:1px solid #e9ecf1;border-radius:3px;max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:.5rem;line-height:1}.figure-caption{font-size:87.5%;color:#a8aeb7}.container{width:100%;padding-right:1rem;padding-left:1rem;margin-right:auto;margin-left:auto}@media (min-width:33rem){.container{max-width:32.5rem}}@media (min-width:48rem){.container{max-width:47.5rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:75.25rem){.container{max-width:75.25rem}}.container-fluid,.container-lg,.container-md,.container-sm,.container-xl{width:100%;padding-right:1rem;padding-left:1rem;margin-right:auto;margin-left:auto}@media (min-width:33rem){.container,.container-sm{max-width:32.5rem}}@media (min-width:48rem){.container,.container-md,.container-sm{max-width:47.5rem}}@media (min-width:64rem){.container,.container-lg,.container-md,.container-sm{max-width:64rem}}@media (min-width:75.25rem){.container,.container-lg,.container-md,.container-sm,.container-xl{max-width:75.25rem}}.row{display:flex;flex-wrap:wrap;margin-right:-.75rem;margin-left:-.75rem}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:.75rem;padding-left:.75rem}.g-0,.gx-0{margin-right:0;margin-left:0}.g-0>*,.gx-0>*{padding-right:0;padding-left:0}.g-0,.gy-0{margin-top:0}.g-0>*,.gy-0>*{margin-top:0}.g-1,.gx-1{margin-right:-.125rem;margin-left:-.125rem}.g-1>*,.gx-1>*{padding-right:.125rem;padding-left:.125rem}.g-1,.gy-1{margin-top:-.25rem}.g-1>*,.gy-1>*{margin-top:.25rem}.g-2,.gx-2{margin-right:-.25rem;margin-left:-.25rem}.g-2>*,.gx-2>*{padding-right:.25rem;padding-left:.25rem}.g-2,.gy-2{margin-top:-.5rem}.g-2>*,.gy-2>*{margin-top:.5rem}.g-3,.gx-3{margin-right:-.5rem;margin-left:-.5rem}.g-3>*,.gx-3>*{padding-right:.5rem;padding-left:.5rem}.g-3,.gy-3{margin-top:-1rem}.g-3>*,.gy-3>*{margin-top:1rem}.g-4,.gx-4{margin-right:-.625rem;margin-left:-.625rem}.g-4>*,.gx-4>*{padding-right:.625rem;padding-left:.625rem}.g-4,.gy-4{margin-top:-1.25rem}.g-4>*,.gy-4>*{margin-top:1.25rem}.g-5,.gx-5{margin-right:-1rem;margin-left:-1rem}.g-5>*,.gx-5>*{padding-right:1rem;padding-left:1rem}.g-5,.gy-5{margin-top:-2rem}.g-5>*,.gy-5>*{margin-top:2rem}.g-6,.gx-6{margin-right:-1.5rem;margin-left:-1.5rem}.g-6>*,.gx-6>*{padding-right:1.5rem;padding-left:1.5rem}.g-6,.gy-6{margin-top:-3rem}.g-6>*,.gy-6>*{margin-top:3rem}.g-7,.gx-7{margin-right:-3rem;margin-left:-3rem}.g-7>*,.gx-7>*{padding-right:3rem;padding-left:3rem}.g-7,.gy-7{margin-top:-6rem}.g-7>*,.gy-7>*{margin-top:6rem}.g-8,.gx-8{margin-right:-4.5rem;margin-left:-4.5rem}.g-8>*,.gx-8>*{padding-right:4.5rem;padding-left:4.5rem}.g-8,.gy-8{margin-top:-9rem}.g-8>*,.gy-8>*{margin-top:9rem}@media (min-width:33rem){.g-sm-0,.gx-sm-0{margin-right:0;margin-left:0}.g-sm-0>*,.gx-sm-0>*{padding-right:0;padding-left:0}.g-sm-0,.gy-sm-0{margin-top:0}.g-sm-0>*,.gy-sm-0>*{margin-top:0}.g-sm-1,.gx-sm-1{margin-right:-.125rem;margin-left:-.125rem}.g-sm-1>*,.gx-sm-1>*{padding-right:.125rem;padding-left:.125rem}.g-sm-1,.gy-sm-1{margin-top:-.25rem}.g-sm-1>*,.gy-sm-1>*{margin-top:.25rem}.g-sm-2,.gx-sm-2{margin-right:-.25rem;margin-left:-.25rem}.g-sm-2>*,.gx-sm-2>*{padding-right:.25rem;padding-left:.25rem}.g-sm-2,.gy-sm-2{margin-top:-.5rem}.g-sm-2>*,.gy-sm-2>*{margin-top:.5rem}.g-sm-3,.gx-sm-3{margin-right:-.5rem;margin-left:-.5rem}.g-sm-3>*,.gx-sm-3>*{padding-right:.5rem;padding-left:.5rem}.g-sm-3,.gy-sm-3{margin-top:-1rem}.g-sm-3>*,.gy-sm-3>*{margin-top:1rem}.g-sm-4,.gx-sm-4{margin-right:-.625rem;margin-left:-.625rem}.g-sm-4>*,.gx-sm-4>*{padding-right:.625rem;padding-left:.625rem}.g-sm-4,.gy-sm-4{margin-top:-1.25rem}.g-sm-4>*,.gy-sm-4>*{margin-top:1.25rem}.g-sm-5,.gx-sm-5{margin-right:-1rem;margin-left:-1rem}.g-sm-5>*,.gx-sm-5>*{padding-right:1rem;padding-left:1rem}.g-sm-5,.gy-sm-5{margin-top:-2rem}.g-sm-5>*,.gy-sm-5>*{margin-top:2rem}.g-sm-6,.gx-sm-6{margin-right:-1.5rem;margin-left:-1.5rem}.g-sm-6>*,.gx-sm-6>*{padding-right:1.5rem;padding-left:1.5rem}.g-sm-6,.gy-sm-6{margin-top:-3rem}.g-sm-6>*,.gy-sm-6>*{margin-top:3rem}.g-sm-7,.gx-sm-7{margin-right:-3rem;margin-left:-3rem}.g-sm-7>*,.gx-sm-7>*{padding-right:3rem;padding-left:3rem}.g-sm-7,.gy-sm-7{margin-top:-6rem}.g-sm-7>*,.gy-sm-7>*{margin-top:6rem}.g-sm-8,.gx-sm-8{margin-right:-4.5rem;margin-left:-4.5rem}.g-sm-8>*,.gx-sm-8>*{padding-right:4.5rem;padding-left:4.5rem}.g-sm-8,.gy-sm-8{margin-top:-9rem}.g-sm-8>*,.gy-sm-8>*{margin-top:9rem}}@media (min-width:48rem){.g-md-0,.gx-md-0{margin-right:0;margin-left:0}.g-md-0>*,.gx-md-0>*{padding-right:0;padding-left:0}.g-md-0,.gy-md-0{margin-top:0}.g-md-0>*,.gy-md-0>*{margin-top:0}.g-md-1,.gx-md-1{margin-right:-.125rem;margin-left:-.125rem}.g-md-1>*,.gx-md-1>*{padding-right:.125rem;padding-left:.125rem}.g-md-1,.gy-md-1{margin-top:-.25rem}.g-md-1>*,.gy-md-1>*{margin-top:.25rem}.g-md-2,.gx-md-2{margin-right:-.25rem;margin-left:-.25rem}.g-md-2>*,.gx-md-2>*{padding-right:.25rem;padding-left:.25rem}.g-md-2,.gy-md-2{margin-top:-.5rem}.g-md-2>*,.gy-md-2>*{margin-top:.5rem}.g-md-3,.gx-md-3{margin-right:-.5rem;margin-left:-.5rem}.g-md-3>*,.gx-md-3>*{padding-right:.5rem;padding-left:.5rem}.g-md-3,.gy-md-3{margin-top:-1rem}.g-md-3>*,.gy-md-3>*{margin-top:1rem}.g-md-4,.gx-md-4{margin-right:-.625rem;margin-left:-.625rem}.g-md-4>*,.gx-md-4>*{padding-right:.625rem;padding-left:.625rem}.g-md-4,.gy-md-4{margin-top:-1.25rem}.g-md-4>*,.gy-md-4>*{margin-top:1.25rem}.g-md-5,.gx-md-5{margin-right:-1rem;margin-left:-1rem}.g-md-5>*,.gx-md-5>*{padding-right:1rem;padding-left:1rem}.g-md-5,.gy-md-5{margin-top:-2rem}.g-md-5>*,.gy-md-5>*{margin-top:2rem}.g-md-6,.gx-md-6{margin-right:-1.5rem;margin-left:-1.5rem}.g-md-6>*,.gx-md-6>*{padding-right:1.5rem;padding-left:1.5rem}.g-md-6,.gy-md-6{margin-top:-3rem}.g-md-6>*,.gy-md-6>*{margin-top:3rem}.g-md-7,.gx-md-7{margin-right:-3rem;margin-left:-3rem}.g-md-7>*,.gx-md-7>*{padding-right:3rem;padding-left:3rem}.g-md-7,.gy-md-7{margin-top:-6rem}.g-md-7>*,.gy-md-7>*{margin-top:6rem}.g-md-8,.gx-md-8{margin-right:-4.5rem;margin-left:-4.5rem}.g-md-8>*,.gx-md-8>*{padding-right:4.5rem;padding-left:4.5rem}.g-md-8,.gy-md-8{margin-top:-9rem}.g-md-8>*,.gy-md-8>*{margin-top:9rem}}@media (min-width:64rem){.g-lg-0,.gx-lg-0{margin-right:0;margin-left:0}.g-lg-0>*,.gx-lg-0>*{padding-right:0;padding-left:0}.g-lg-0,.gy-lg-0{margin-top:0}.g-lg-0>*,.gy-lg-0>*{margin-top:0}.g-lg-1,.gx-lg-1{margin-right:-.125rem;margin-left:-.125rem}.g-lg-1>*,.gx-lg-1>*{padding-right:.125rem;padding-left:.125rem}.g-lg-1,.gy-lg-1{margin-top:-.25rem}.g-lg-1>*,.gy-lg-1>*{margin-top:.25rem}.g-lg-2,.gx-lg-2{margin-right:-.25rem;margin-left:-.25rem}.g-lg-2>*,.gx-lg-2>*{padding-right:.25rem;padding-left:.25rem}.g-lg-2,.gy-lg-2{margin-top:-.5rem}.g-lg-2>*,.gy-lg-2>*{margin-top:.5rem}.g-lg-3,.gx-lg-3{margin-right:-.5rem;margin-left:-.5rem}.g-lg-3>*,.gx-lg-3>*{padding-right:.5rem;padding-left:.5rem}.g-lg-3,.gy-lg-3{margin-top:-1rem}.g-lg-3>*,.gy-lg-3>*{margin-top:1rem}.g-lg-4,.gx-lg-4{margin-right:-.625rem;margin-left:-.625rem}.g-lg-4>*,.gx-lg-4>*{padding-right:.625rem;padding-left:.625rem}.g-lg-4,.gy-lg-4{margin-top:-1.25rem}.g-lg-4>*,.gy-lg-4>*{margin-top:1.25rem}.g-lg-5,.gx-lg-5{margin-right:-1rem;margin-left:-1rem}.g-lg-5>*,.gx-lg-5>*{padding-right:1rem;padding-left:1rem}.g-lg-5,.gy-lg-5{margin-top:-2rem}.g-lg-5>*,.gy-lg-5>*{margin-top:2rem}.g-lg-6,.gx-lg-6{margin-right:-1.5rem;margin-left:-1.5rem}.g-lg-6>*,.gx-lg-6>*{padding-right:1.5rem;padding-left:1.5rem}.g-lg-6,.gy-lg-6{margin-top:-3rem}.g-lg-6>*,.gy-lg-6>*{margin-top:3rem}.g-lg-7,.gx-lg-7{margin-right:-3rem;margin-left:-3rem}.g-lg-7>*,.gx-lg-7>*{padding-right:3rem;padding-left:3rem}.g-lg-7,.gy-lg-7{margin-top:-6rem}.g-lg-7>*,.gy-lg-7>*{margin-top:6rem}.g-lg-8,.gx-lg-8{margin-right:-4.5rem;margin-left:-4.5rem}.g-lg-8>*,.gx-lg-8>*{padding-right:4.5rem;padding-left:4.5rem}.g-lg-8,.gy-lg-8{margin-top:-9rem}.g-lg-8>*,.gy-lg-8>*{margin-top:9rem}}@media (min-width:75.25rem){.g-xl-0,.gx-xl-0{margin-right:0;margin-left:0}.g-xl-0>*,.gx-xl-0>*{padding-right:0;padding-left:0}.g-xl-0,.gy-xl-0{margin-top:0}.g-xl-0>*,.gy-xl-0>*{margin-top:0}.g-xl-1,.gx-xl-1{margin-right:-.125rem;margin-left:-.125rem}.g-xl-1>*,.gx-xl-1>*{padding-right:.125rem;padding-left:.125rem}.g-xl-1,.gy-xl-1{margin-top:-.25rem}.g-xl-1>*,.gy-xl-1>*{margin-top:.25rem}.g-xl-2,.gx-xl-2{margin-right:-.25rem;margin-left:-.25rem}.g-xl-2>*,.gx-xl-2>*{padding-right:.25rem;padding-left:.25rem}.g-xl-2,.gy-xl-2{margin-top:-.5rem}.g-xl-2>*,.gy-xl-2>*{margin-top:.5rem}.g-xl-3,.gx-xl-3{margin-right:-.5rem;margin-left:-.5rem}.g-xl-3>*,.gx-xl-3>*{padding-right:.5rem;padding-left:.5rem}.g-xl-3,.gy-xl-3{margin-top:-1rem}.g-xl-3>*,.gy-xl-3>*{margin-top:1rem}.g-xl-4,.gx-xl-4{margin-right:-.625rem;margin-left:-.625rem}.g-xl-4>*,.gx-xl-4>*{padding-right:.625rem;padding-left:.625rem}.g-xl-4,.gy-xl-4{margin-top:-1.25rem}.g-xl-4>*,.gy-xl-4>*{margin-top:1.25rem}.g-xl-5,.gx-xl-5{margin-right:-1rem;margin-left:-1rem}.g-xl-5>*,.gx-xl-5>*{padding-right:1rem;padding-left:1rem}.g-xl-5,.gy-xl-5{margin-top:-2rem}.g-xl-5>*,.gy-xl-5>*{margin-top:2rem}.g-xl-6,.gx-xl-6{margin-right:-1.5rem;margin-left:-1.5rem}.g-xl-6>*,.gx-xl-6>*{padding-right:1.5rem;padding-left:1.5rem}.g-xl-6,.gy-xl-6{margin-top:-3rem}.g-xl-6>*,.gy-xl-6>*{margin-top:3rem}.g-xl-7,.gx-xl-7{margin-right:-3rem;margin-left:-3rem}.g-xl-7>*,.gx-xl-7>*{padding-right:3rem;padding-left:3rem}.g-xl-7,.gy-xl-7{margin-top:-6rem}.g-xl-7>*,.gy-xl-7>*{margin-top:6rem}.g-xl-8,.gx-xl-8{margin-right:-4.5rem;margin-left:-4.5rem}.g-xl-8>*,.gx-xl-8>*{padding-right:4.5rem;padding-left:4.5rem}.g-xl-8,.gy-xl-8{margin-top:-9rem}.g-xl-8>*,.gy-xl-8>*{margin-top:9rem}}.col{flex:1 0 0%;min-width:0}.row-cols-auto>*{flex:0 0 auto;width:auto}.row-cols-1>*{flex:0 0 auto;width:100%}.row-cols-2>*{flex:0 0 auto;width:50%}.row-cols-3>*{flex:0 0 auto;width:33.3333333%}.row-cols-4>*{flex:0 0 auto;width:25%}.row-cols-5>*{flex:0 0 auto;width:20%}.row-cols-6>*{flex:0 0 auto;width:16.6666667%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.3333333%}.col-2{flex:0 0 auto;width:16.6666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.3333333%}.col-5{flex:0 0 auto;width:41.6666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.3333333%}.col-8{flex:0 0 auto;width:66.6666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.3333333%}.col-11{flex:0 0 auto;width:91.6666667%}.col-12{flex:0 0 auto;width:100%}.offset-1{margin-left:8.3333333%}.offset-2{margin-left:16.6666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.3333333%}.offset-5{margin-left:41.6666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.3333333%}.offset-8{margin-left:66.6666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.3333333%}.offset-11{margin-left:91.6666667%}@media (min-width:33rem){.col-sm{flex:1 0 0%;min-width:0}.row-cols-sm-auto>*{flex:0 0 auto;width:auto}.row-cols-sm-1>*{flex:0 0 auto;width:100%}.row-cols-sm-2>*{flex:0 0 auto;width:50%}.row-cols-sm-3>*{flex:0 0 auto;width:33.3333333%}.row-cols-sm-4>*{flex:0 0 auto;width:25%}.row-cols-sm-5>*{flex:0 0 auto;width:20%}.row-cols-sm-6>*{flex:0 0 auto;width:16.6666667%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.3333333%}.col-sm-2{flex:0 0 auto;width:16.6666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.3333333%}.col-sm-5{flex:0 0 auto;width:41.6666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.3333333%}.col-sm-8{flex:0 0 auto;width:66.6666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.3333333%}.col-sm-11{flex:0 0 auto;width:91.6666667%}.col-sm-12{flex:0 0 auto;width:100%}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.3333333%}.offset-sm-2{margin-left:16.6666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.3333333%}.offset-sm-5{margin-left:41.6666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.3333333%}.offset-sm-8{margin-left:66.6666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.3333333%}.offset-sm-11{margin-left:91.6666667%}}@media (min-width:48rem){.col-md{flex:1 0 0%;min-width:0}.row-cols-md-auto>*{flex:0 0 auto;width:auto}.row-cols-md-1>*{flex:0 0 auto;width:100%}.row-cols-md-2>*{flex:0 0 auto;width:50%}.row-cols-md-3>*{flex:0 0 auto;width:33.3333333%}.row-cols-md-4>*{flex:0 0 auto;width:25%}.row-cols-md-5>*{flex:0 0 auto;width:20%}.row-cols-md-6>*{flex:0 0 auto;width:16.6666667%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.3333333%}.col-md-2{flex:0 0 auto;width:16.6666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.3333333%}.col-md-5{flex:0 0 auto;width:41.6666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.3333333%}.col-md-8{flex:0 0 auto;width:66.6666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.3333333%}.col-md-11{flex:0 0 auto;width:91.6666667%}.col-md-12{flex:0 0 auto;width:100%}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.3333333%}.offset-md-2{margin-left:16.6666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.3333333%}.offset-md-5{margin-left:41.6666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.3333333%}.offset-md-8{margin-left:66.6666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.3333333%}.offset-md-11{margin-left:91.6666667%}}@media (min-width:64rem){.col-lg{flex:1 0 0%;min-width:0}.row-cols-lg-auto>*{flex:0 0 auto;width:auto}.row-cols-lg-1>*{flex:0 0 auto;width:100%}.row-cols-lg-2>*{flex:0 0 auto;width:50%}.row-cols-lg-3>*{flex:0 0 auto;width:33.3333333%}.row-cols-lg-4>*{flex:0 0 auto;width:25%}.row-cols-lg-5>*{flex:0 0 auto;width:20%}.row-cols-lg-6>*{flex:0 0 auto;width:16.6666667%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.3333333%}.col-lg-2{flex:0 0 auto;width:16.6666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.3333333%}.col-lg-5{flex:0 0 auto;width:41.6666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.3333333%}.col-lg-8{flex:0 0 auto;width:66.6666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.3333333%}.col-lg-11{flex:0 0 auto;width:91.6666667%}.col-lg-12{flex:0 0 auto;width:100%}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.3333333%}.offset-lg-2{margin-left:16.6666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.3333333%}.offset-lg-5{margin-left:41.6666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.3333333%}.offset-lg-8{margin-left:66.6666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.3333333%}.offset-lg-11{margin-left:91.6666667%}}@media (min-width:75.25rem){.col-xl{flex:1 0 0%;min-width:0}.row-cols-xl-auto>*{flex:0 0 auto;width:auto}.row-cols-xl-1>*{flex:0 0 auto;width:100%}.row-cols-xl-2>*{flex:0 0 auto;width:50%}.row-cols-xl-3>*{flex:0 0 auto;width:33.3333333%}.row-cols-xl-4>*{flex:0 0 auto;width:25%}.row-cols-xl-5>*{flex:0 0 auto;width:20%}.row-cols-xl-6>*{flex:0 0 auto;width:16.6666667%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.3333333%}.col-xl-2{flex:0 0 auto;width:16.6666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.3333333%}.col-xl-5{flex:0 0 auto;width:41.6666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.3333333%}.col-xl-8{flex:0 0 auto;width:66.6666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.3333333%}.col-xl-11{flex:0 0 auto;width:91.6666667%}.col-xl-12{flex:0 0 auto;width:100%}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.3333333%}.offset-xl-2{margin-left:16.6666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.3333333%}.offset-xl-5{margin-left:41.6666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.3333333%}.offset-xl-8{margin-left:66.6666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.3333333%}.offset-xl-11{margin-left:91.6666667%}}.markdown>table,.table{width:100%;margin-bottom:1rem;color:#354052;vertical-align:top}.markdown>table td,.markdown>table th,.table td,.table th{padding:.5rem;border-bottom:1px solid rgba(134,140,151,.24)}.markdown>table tbody,.table tbody{vertical-align:inherit}.markdown>table thead th,.table thead th{vertical-align:bottom;border-bottom-color:rgba(134,140,151,.24)}.markdown>table tbody+tbody,.table tbody+tbody{border-top:2px solid rgba(134,140,151,.24)}.caption-top{caption-side:top}.table-sm td,.table-sm th{padding:.25rem}.markdown>table,.table-bordered{border:1px solid rgba(134,140,151,.24)}.markdown>table td,.markdown>table th,.table-bordered td,.table-bordered th{border:1px solid rgba(134,140,151,.24)}.markdown>table thead td,.markdown>table thead th,.table-bordered thead td,.table-bordered thead th{border-bottom-width:2px}.table-borderless tbody+tbody,.table-borderless td,.table-borderless th,.table-borderless thead th{border:0}.table-striped tbody tr:nth-of-type(even){background-color:rgba(53,64,82,.024)}.table-hover tbody tr:hover{color:#354052;background-color:rgba(0,0,0,.075)}.table-primary,.table-primary>td,.table-primary>th{background-color:#e9f0f9}.table-primary tbody+tbody,.table-primary td,.table-primary th,.table-primary thead th{border-color:#a6c4e7}.table-hover .table-primary:hover{background-color:#d5e2f4}.table-hover .table-primary:hover>td,.table-hover .table-primary:hover>th{background-color:#d5e2f4}.table-secondary,.table-secondary>td,.table-secondary>th{background-color:#f3f4f5}.table-secondary tbody+tbody,.table-secondary td,.table-secondary th,.table-secondary thead th{border-color:#cfd1d5}.table-hover .table-secondary:hover{background-color:#e5e7e9}.table-hover .table-secondary:hover>td,.table-hover .table-secondary:hover>th{background-color:#e5e7e9}.table-success,.table-success>td,.table-success>th{background-color:#eff8e6}.table-success tbody+tbody,.table-success td,.table-success th,.table-success thead th{border-color:#bfe399}.table-hover .table-success:hover{background-color:#e2f2d2}.table-hover .table-success:hover>td,.table-hover .table-success:hover>th{background-color:#e2f2d2}.table-info,.table-info>td,.table-info>th{background-color:#ecf7fe}.table-info tbody+tbody,.table-info td,.table-info th,.table-info thead th{border-color:#b5ddfa}.table-hover .table-info:hover{background-color:#d4edfd}.table-hover .table-info:hover>td,.table-hover .table-info:hover>th{background-color:#d4edfd}.table-warning,.table-warning>td,.table-warning>th{background-color:#fff7e6}.table-warning tbody+tbody,.table-warning td,.table-warning th,.table-warning thead th{border-color:#fddf9b}.table-hover .table-warning:hover{background-color:#ffefcd}.table-hover .table-warning:hover>td,.table-hover .table-warning:hover>th{background-color:#ffefcd}.table-danger,.table-danger>td,.table-danger>th{background-color:#ffedee}.table-danger tbody+tbody,.table-danger td,.table-danger th,.table-danger thead th{border-color:#fdb5bb}.table-hover .table-danger:hover{background-color:#ffd4d6}.table-hover .table-danger:hover>td,.table-hover .table-danger:hover>th{background-color:#ffd4d6}.table-light,.table-light>td,.table-light>th{background-color:#fefeff}.table-light tbody+tbody,.table-light td,.table-light th,.table-light thead th{border-color:#fbfcfd}.table-hover .table-light:hover{background-color:#e5e5ff}.table-hover .table-light:hover>td,.table-hover .table-light:hover>th{background-color:#e5e5ff}.table-dark,.table-dark>td,.table-dark>th{background-color:#ebecee}.table-dark tbody+tbody,.table-dark td,.table-dark th,.table-dark thead th{border-color:#aeb3ba}.table-hover .table-dark:hover{background-color:#dddfe2}.table-hover .table-dark:hover>td,.table-hover .table-dark:hover>th{background-color:#dddfe2}.table-active,.table-active>td,.table-active>th{background-color:rgba(0,0,0,.075)}.table-hover .table-active:hover{background-color:rgba(0,0,0,.075)}.table-hover .table-active:hover>td,.table-hover .table-active:hover>th{background-color:rgba(0,0,0,.075)}.markdown>table .thead-dark th,.table .thead-dark th{color:#fff;background-color:#545d6d;border-color:#656f83}.markdown>table .thead-light th,.table .thead-light th{color:#7a828f;background-color:#f1f3f8;border-color:rgba(134,140,151,.24)}.table-dark{color:#fff;background-color:#545d6d}.table-dark td,.table-dark th,.table-dark thead th{border-color:#656f83}.markdown>table.table-dark,.table-dark.table-bordered{border:0}.table-dark.table-striped tbody tr:nth-of-type(even){background-color:rgba(255,255,255,.05)}.table-dark.table-hover tbody tr:hover{color:#fff;background-color:rgba(255,255,255,.075)}@media (max-width:32.98rem){.table-responsive-sm{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.markdown.table-responsive-sm>table,.table-responsive-sm>.table-bordered{border:0}}@media (max-width:47.98rem){.table-responsive-md{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.markdown.table-responsive-md>table,.table-responsive-md>.table-bordered{border:0}}@media (max-width:63.98rem){.table-responsive-lg{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.markdown.table-responsive-lg>table,.table-responsive-lg>.table-bordered{border:0}}@media (max-width:75.23rem){.table-responsive-xl{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.markdown.table-responsive-xl>table,.table-responsive-xl>.table-bordered{border:0}}.table-responsive{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.markdown.table-responsive>table,.table-responsive>.table-bordered{border:0}.col-form-label{padding-top:calc(.375rem + 1px);padding-bottom:calc(.375rem + 1px);margin-bottom:0;font-size:inherit;line-height:1.4666667}.col-form-label-lg{padding-top:calc(.5rem + 1px);padding-bottom:calc(.5rem + 1px);font-size:calc(1.2625rem + .15vw)}@media (min-width:1200px){.col-form-label-lg{font-size:1.375rem}}.col-form-label-sm{padding-top:calc(.125rem + 1px);padding-bottom:calc(.125rem + 1px);font-size:.8125rem}.form-control{display:block;width:100%;min-height:calc(1.4666667em + .75rem + 2px);padding:.375rem .75rem;font-size:.9375rem;font-weight:400;line-height:1.4666667;color:#354052;background-color:#fff;background-clip:padding-box;border:1px solid rgba(134,140,151,.24);border-radius:3px;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control:focus{color:inherit;background-color:#fff;border-color:#7aade9;outline:0;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.form-control::-webkit-input-placeholder{color:#868c97;opacity:1}.form-control::-moz-placeholder{color:#868c97;opacity:1}.form-control:-ms-input-placeholder{color:#868c97;opacity:1}.form-control::-ms-input-placeholder{color:#868c97;opacity:1}.form-control::placeholder{color:#868c97;opacity:1}.form-control:disabled,.form-control[readonly]{background-color:#f5f7fb;opacity:1}.form-control-plaintext{display:block;width:100%;padding:.375rem 0;margin-bottom:0;line-height:1.4666667;color:#354052;background-color:transparent;border:solid transparent;border-width:1px 0}.form-control-plaintext.form-control-lg,.form-control-plaintext.form-control-sm{padding-right:0;padding-left:0}.form-control-sm{min-height:calc(1.4666667em + .25rem + 2px);padding:.125rem .5rem;font-size:.8125rem;border-radius:.2rem}.form-control-lg{min-height:calc(1.4666667em + 1rem + 2px);padding:.5rem 1.5rem;font-size:calc(1.2625rem + .15vw);border-radius:.3rem}@media (min-width:1200px){.form-control-lg{font-size:1.375rem}}.form-control-color{max-width:3rem;padding:.375rem}.form-control-color::-moz-color-swatch{border-radius:3px}.form-control-color::-webkit-color-swatch{border-radius:3px}.form-select{display:block;width:100%;height:calc(1.4666667em + .75rem + 2px);padding:.375rem 1.75rem .375rem .75rem;font-size:.9375rem;font-weight:400;line-height:1.4666667;color:#354052;vertical-align:middle;background-color:#fff;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28134, 140, 151, 0.48%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px;border:1px solid rgba(134,140,151,.24);border-radius:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-select:focus{border-color:#7aade9;outline:0;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.form-select:focus::-ms-value{color:#354052;background-color:#fff}.form-select[multiple],.form-select[size]:not([size="1"]){height:auto;padding-right:.75rem;background-image:none}.form-select:disabled{color:#a8aeb7;background-color:#f1f3f8}.form-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #354052}.form-select-sm{height:calc(1.4666667em + .25rem + 2px);padding-top:.125rem;padding-bottom:.125rem;padding-left:.5rem;font-size:.8125rem}.form-select-lg{height:calc(1.4666667em + 1rem + 2px);padding-top:.5rem;padding-bottom:.5rem;padding-left:1.5rem;font-size:calc(1.2625rem + .15vw)}@media (min-width:1200px){.form-select-lg{font-size:1.375rem}}.form-check{display:block;min-height:1.5rem;padding-left:1.5rem;margin-bottom:.125rem}.form-check .form-check-input{float:left;margin-left:-1.5rem}.form-check-input{width:1rem;height:1rem;margin-top:.3rem;vertical-align:top;background-color:#fff;border:1px solid rgba(134,140,151,.24);-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-print-color-adjust:exact;color-adjust:exact}.form-check-input[type=checkbox]{border-radius:3px}.form-check-input[type=radio]{border-radius:50%}.form-check-input:active{-webkit-filter:brightness(90%);filter:brightness(90%)}.form-check-input:focus{border-color:#7aade9;outline:0;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.form-check-input:checked{background-color:#206bc4;background-repeat:repeat;background-position:center center;background-size:1rem;border-color:rgba(134,140,151,.24)}.form-check-input:checked[type=checkbox]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6' transform='scale%28.8%29' transform-origin='50% 50%'/%3e%3c/svg%3e")}.form-check-input:checked[type=radio]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3' fill='%23ffffff' cx='8' cy='8' /%3e%3c/svg%3e")}.form-check-input[type=checkbox]:indeterminate{background-color:#206bc4;background-repeat:no-repeat;background-position:center center;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5 8h6'/%3e%3c/svg%3e");background-size:1em;border-color:#206bc4}.form-check-input:disabled{pointer-events:none;-webkit-filter:none;filter:none;opacity:.5}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{opacity:.5}.form-check-label{margin-bottom:0}.form-switch{padding-left:2.25rem}.form-switch .form-check-input{width:1.75rem;margin-left:-2.25rem;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28134, 140, 151, 0.24%29'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:left center;background-size:auto;border-radius:1.75rem;-webkit-print-color-adjust:exact;color-adjust:exact}.form-switch .form-check-input:focus{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2380bdff'/%3e%3c/svg%3e")}.form-switch .form-check-input:checked{background-position:right center;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e")}.form-check-inline{display:inline-block;margin-right:1rem}.form-file{position:relative;height:calc(1.4666667em + .75rem + 2px)}.form-file-input{position:relative;z-index:2;width:100%;height:100%;margin:0;opacity:0}.form-file-input:focus-within~.form-file-label{border-color:#7aade9;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.form-file-input:disabled~.form-file-label .form-file-text,.form-file-input[disabled]~.form-file-label .form-file-text{background-color:#f5f7fb}.form-file-label{position:absolute;top:0;right:0;left:0;z-index:1;display:flex;height:100%;border-color:rgba(134,140,151,.24);border-radius:3px}.form-file-text{display:block;flex-grow:1;padding:.375rem .75rem;overflow:hidden;font-weight:400;line-height:1.4666667;color:#354052;text-overflow:ellipsis;white-space:nowrap;background-color:#fff;border-color:inherit;border-style:solid;border-width:1px;border-top-left-radius:inherit;border-bottom-left-radius:inherit}.form-file-button{display:block;flex-shrink:0;padding:.375rem .75rem;margin-left:-1px;line-height:1.4666667;color:#354052;background-color:rgba(53,64,82,.024);border-color:inherit;border-style:solid;border-width:1px;border-top-right-radius:inherit;border-bottom-right-radius:inherit}.form-file-sm{height:calc(1.4666667em + .25rem + 2px);font-size:.8125rem}.form-file-sm .form-file-button,.form-file-sm .form-file-text{padding:.125rem .5rem}.form-file-lg{height:calc(1.4666667em + 1rem + 2px);font-size:calc(1.2625rem + .15vw)}@media (min-width:1200px){.form-file-lg{font-size:1.375rem}}.form-file-lg .form-file-button,.form-file-lg .form-file-text{padding:.5rem 1.5rem}.form-range{width:100%;height:1.25rem;padding:0;background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-range:focus{outline:0}.form-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 1px #f5f7fb,0 0 0 .2rem rgba(32,107,196,.25)}.form-range:focus::-moz-range-thumb{box-shadow:0 0 0 1px #f5f7fb,0 0 0 .2rem rgba(32,107,196,.25)}.form-range:focus::-ms-thumb{box-shadow:0 0 0 1px #f5f7fb,0 0 0 .2rem rgba(32,107,196,.25)}.form-range::-moz-focus-outer{border:0}.form-range::-webkit-slider-thumb{width:1rem;height:1rem;margin-top:-.375rem;background-color:#206bc4;border:2px solid #fff;border-radius:1rem;-webkit-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-appearance:none;appearance:none}@media (prefers-reduced-motion:reduce){.form-range::-webkit-slider-thumb{-webkit-transition:none;transition:none}}.form-range::-webkit-slider-thumb:active{background-color:#a6c8f0}.form-range::-webkit-slider-runnable-track{width:100%;height:.25rem;color:transparent;cursor:pointer;background-color:rgba(176,181,190,.24);border-color:transparent;border-radius:1rem}.form-range::-moz-range-thumb{width:1rem;height:1rem;background-color:#206bc4;border:2px solid #fff;border-radius:1rem;-moz-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-moz-appearance:none;appearance:none}@media (prefers-reduced-motion:reduce){.form-range::-moz-range-thumb{-moz-transition:none;transition:none}}.form-range::-moz-range-thumb:active{background-color:#a6c8f0}.form-range::-moz-range-track{width:100%;height:.25rem;color:transparent;cursor:pointer;background-color:rgba(176,181,190,.24);border-color:transparent;border-radius:1rem}.form-range::-ms-thumb{width:1rem;height:1rem;margin-top:0;margin-right:.125rem;margin-left:.125rem;background-color:#206bc4;border:2px solid #fff;border-radius:1rem;-ms-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;appearance:none}@media (prefers-reduced-motion:reduce){.form-range::-ms-thumb{-ms-transition:none;transition:none}}.form-range::-ms-thumb:active{background-color:#a6c8f0}.form-range::-ms-track{width:100%;height:.25rem;color:transparent;cursor:pointer;background-color:transparent;border-color:transparent;border-width:.5rem}.form-range::-ms-fill-lower{background-color:rgba(176,181,190,.24);border-radius:1rem}.form-range::-ms-fill-upper{margin-right:15px;background-color:rgba(176,181,190,.24);border-radius:1rem}.form-range:disabled{pointer-events:none}.form-range:disabled::-webkit-slider-thumb{background-color:#cbcfd6}.form-range:disabled::-moz-range-thumb{background-color:#cbcfd6}.form-range:disabled::-ms-thumb{background-color:#cbcfd6}.input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.input-group>.form-control,.input-group>.form-file,.input-group>.form-select{position:relative;flex:1 1 auto;width:1%;min-width:0}.input-group>.form-control:focus,.input-group>.form-file .form-file-input:focus~.form-file-label,.input-group>.form-select:focus{z-index:3}.input-group>.form-file>.form-file-input:focus{z-index:4}.input-group>.form-file:not(:last-child)>.form-file-label{border-top-right-radius:0;border-bottom-right-radius:0}.input-group>.form-file:not(:first-child)>.form-file-label{border-top-left-radius:0;border-bottom-left-radius:0}.input-group .btn{position:relative;z-index:2}.input-group .btn:focus{z-index:3}.input-group-text{display:flex;align-items:center;padding:.375rem .75rem;margin-bottom:0;font-size:.9375rem;font-weight:400;line-height:1.4666667;color:#868c97;text-align:center;white-space:nowrap;background-color:rgba(53,64,82,.024);border:1px solid rgba(134,140,151,.24);border-radius:3px}.input-group-lg>.form-control{min-height:calc(1.4666667em + 1rem + 2px)}.input-group-lg>.form-select{height:calc(1.4666667em + 1rem + 2px)}.input-group-lg>.btn,.input-group-lg>.form-control,.input-group-lg>.form-select,.input-group-lg>.input-group-text{padding:.5rem 1.5rem;font-size:calc(1.2625rem + .15vw);border-radius:.3rem}@media (min-width:1200px){.input-group-lg>.btn,.input-group-lg>.form-control,.input-group-lg>.form-select,.input-group-lg>.input-group-text{font-size:1.375rem}}.input-group-sm>.form-control{min-height:calc(1.4666667em + .25rem + 2px)}.input-group-sm>.form-select{height:calc(1.4666667em + .25rem + 2px)}.input-group-sm>.btn,.input-group-sm>.form-control,.input-group-sm>.form-select,.input-group-sm>.input-group-text{padding:.125rem .5rem;font-size:.8125rem;border-radius:.2rem}.input-group-lg>.form-select,.input-group-sm>.form-select{padding-right:1.75rem}.input-group>.dropdown-toggle:nth-last-child(n+3),.input-group>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu){border-top-right-radius:0;border-bottom-right-radius:0}.input-group>:not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}.valid-feedback{display:none;width:100%;margin-top:.25rem;font-size:87.5%;color:#5eba00}.valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.8203125rem;color:#354052;background-color:rgba(94,186,0,.9);border-radius:3px}.is-valid~.valid-feedback,.is-valid~.valid-tooltip,.was-validated :valid~.valid-feedback,.was-validated :valid~.valid-tooltip{display:block}.form-control.is-valid,.was-validated .form-control:valid{border-color:#5eba00;padding-right:calc(1.4666667em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235eba00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.3666667em + .1875rem) center;background-size:calc(.7333333em + .375rem) calc(.7333333em + .375rem)}.form-control.is-valid:focus,.was-validated .form-control:valid:focus{border-color:#5eba00;box-shadow:0 0 0 .2rem rgba(94,186,0,.25)}.was-validated textarea.form-control:valid,textarea.form-control.is-valid{padding-right:calc(1.4666667em + .75rem);background-position:top calc(.3666667em + .1875rem) right calc(.3666667em + .1875rem)}.form-select.is-valid,.was-validated .form-select:valid{border-color:#5eba00;padding-right:calc(.75em + 2.3125rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28134, 140, 151, 0.48%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235eba00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e");background-position:right .75rem center,center right 1.75rem;background-size:16px 12px,calc(.7333333em + .375rem) calc(.7333333em + .375rem)}.form-select.is-valid:focus,.was-validated .form-select:valid:focus{border-color:#5eba00;box-shadow:0 0 0 .2rem rgba(94,186,0,.25)}.form-check-input.is-valid,.was-validated .form-check-input:valid{border-color:#5eba00}.form-check-input.is-valid:checked,.was-validated .form-check-input:valid:checked{background-color:#78ed00}.form-check-input.is-valid:focus,.was-validated .form-check-input:valid:focus{box-shadow:0 0 0 .2rem rgba(94,186,0,.25)}.form-check-input.is-valid~.form-check-label,.was-validated .form-check-input:valid~.form-check-label{color:#5eba00}.form-check-inline .form-check-input~.valid-feedback{margin-left:.5em}.form-file-input.is-valid~.form-file-label,.was-validated .form-file-input:valid~.form-file-label{border-color:#5eba00}.form-file-input.is-valid:focus~.form-file-label,.was-validated .form-file-input:valid:focus~.form-file-label{border-color:#5eba00;box-shadow:0 0 0 .2rem rgba(94,186,0,.25)}.invalid-feedback{display:none;width:100%;margin-top:.25rem;font-size:87.5%;color:#fa4654}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.8203125rem;color:#fff;background-color:rgba(250,70,84,.9);border-radius:3px}.is-invalid~.invalid-feedback,.is-invalid~.invalid-tooltip,.was-validated :invalid~.invalid-feedback,.was-validated :invalid~.invalid-tooltip{display:block}.form-control.is-invalid,.was-validated .form-control:invalid{border-color:#fa4654;padding-right:calc(1.4666667em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fa4654' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.3666667em + .1875rem) center;background-size:calc(.7333333em + .375rem) calc(.7333333em + .375rem)}.form-control.is-invalid:focus,.was-validated .form-control:invalid:focus{border-color:#fa4654;box-shadow:0 0 0 .2rem rgba(250,70,84,.25)}.was-validated textarea.form-control:invalid,textarea.form-control.is-invalid{padding-right:calc(1.4666667em + .75rem);background-position:top calc(.3666667em + .1875rem) right calc(.3666667em + .1875rem)}.form-select.is-invalid,.was-validated .form-select:invalid{border-color:#fa4654;padding-right:calc(.75em + 2.3125rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28134, 140, 151, 0.48%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fa4654' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");background-position:right .75rem center,center right 1.75rem;background-size:16px 12px,calc(.7333333em + .375rem) calc(.7333333em + .375rem)}.form-select.is-invalid:focus,.was-validated .form-select:invalid:focus{border-color:#fa4654;box-shadow:0 0 0 .2rem rgba(250,70,84,.25)}.form-check-input.is-invalid,.was-validated .form-check-input:invalid{border-color:#fa4654}.form-check-input.is-invalid:checked,.was-validated .form-check-input:invalid:checked{background-color:#fb7882}.form-check-input.is-invalid:focus,.was-validated .form-check-input:invalid:focus{box-shadow:0 0 0 .2rem rgba(250,70,84,.25)}.form-check-input.is-invalid~.form-check-label,.was-validated .form-check-input:invalid~.form-check-label{color:#fa4654}.form-check-inline .form-check-input~.invalid-feedback{margin-left:.5em}.form-file-input.is-invalid~.form-file-label,.was-validated .form-file-input:invalid~.form-file-label{border-color:#fa4654}.form-file-input.is-invalid:focus~.form-file-label,.was-validated .form-file-input:invalid:focus~.form-file-label{border-color:#fa4654;box-shadow:0 0 0 .2rem rgba(250,70,84,.25)}.btn{display:inline-block;font-weight:500;line-height:1.4666667;color:#354052;text-align:center;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent;border:1px solid transparent;padding:.375rem 1rem;font-size:.9375rem;border-radius:3px;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:#354052}.btn.focus,.btn:focus{outline:0;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.btn.disabled,.btn:disabled,fieldset:disabled .btn{pointer-events:none;opacity:.65}.btn-primary{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-primary:hover{color:#fff;background-color:#1b59a3;border-color:#195398}.btn-primary.focus,.btn-primary:focus{color:#fff;background-color:#1b59a3;border-color:#195398;box-shadow:0 0 0 .2rem rgba(65,129,205,.5)}.btn-primary.active,.btn-primary:active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#195398;border-color:#174d8d}.btn-primary.active:focus,.btn-primary:active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(65,129,205,.5)}.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-secondary{color:#fff;background-color:#868c97;border-color:#868c97}.btn-secondary:hover{color:#fff;background-color:#727985;border-color:#6c727e}.btn-secondary.focus,.btn-secondary:focus{color:#fff;background-color:#727985;border-color:#6c727e;box-shadow:0 0 0 .2rem rgba(152,157,167,.5)}.btn-secondary.active,.btn-secondary:active,.show>.btn-secondary.dropdown-toggle{color:#fff;background-color:#6c727e;border-color:#666c77}.btn-secondary.active:focus,.btn-secondary:active:focus,.show>.btn-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(152,157,167,.5)}.btn-secondary.disabled,.btn-secondary:disabled{color:#fff;background-color:#868c97;border-color:#868c97}.btn-success{color:#354052;background-color:#5eba00;border-color:#5eba00}.btn-success:hover{color:#fff;background-color:#4b9400;border-color:#448700}.btn-success.focus,.btn-success:focus{color:#fff;background-color:#4b9400;border-color:#448700;box-shadow:0 0 0 .2rem rgba(88,168,12,.5)}.btn-success.active,.btn-success:active,.show>.btn-success.dropdown-toggle{color:#fff;background-color:#448700;border-color:#3e7a00}.btn-success.active:focus,.btn-success:active:focus,.show>.btn-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(88,168,12,.5)}.btn-success.disabled,.btn-success:disabled{color:#354052;background-color:#5eba00;border-color:#5eba00}.btn-info{color:#354052;background-color:#45aaf2;border-color:#45aaf2}.btn-info:hover{color:#fff;background-color:#219af0;border-color:#1594ef}.btn-info.focus,.btn-info:focus{color:#fff;background-color:#219af0;border-color:#1594ef;box-shadow:0 0 0 .2rem rgba(67,154,218,.5)}.btn-info.active,.btn-info:active,.show>.btn-info.dropdown-toggle{color:#fff;background-color:#1594ef;border-color:#108ee7}.btn-info.active:focus,.btn-info:active:focus,.show>.btn-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(67,154,218,.5)}.btn-info.disabled,.btn-info:disabled{color:#354052;background-color:#45aaf2;border-color:#45aaf2}.btn-warning{color:#354052;background-color:#fab005;border-color:#fab005}.btn-warning:hover{color:#354052;background-color:#d59604;border-color:#c88d04}.btn-warning.focus,.btn-warning:focus{color:#354052;background-color:#d59604;border-color:#c88d04;box-shadow:0 0 0 .2rem rgba(220,159,17,.5)}.btn-warning.active,.btn-warning:active,.show>.btn-warning.dropdown-toggle{color:#354052;background-color:#c88d04;border-color:#bc8404}.btn-warning.active:focus,.btn-warning:active:focus,.show>.btn-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(220,159,17,.5)}.btn-warning.disabled,.btn-warning:disabled{color:#354052;background-color:#fab005;border-color:#fab005}.btn-danger{color:#fff;background-color:#fa4654;border-color:#fa4654}.btn-danger:hover{color:#fff;background-color:#f92132;border-color:#f91426}.btn-danger.focus,.btn-danger:focus{color:#fff;background-color:#f92132;border-color:#f91426;box-shadow:0 0 0 .2rem rgba(251,98,110,.5)}.btn-danger.active,.btn-danger:active,.show>.btn-danger.dropdown-toggle{color:#fff;background-color:#f91426;border-color:#f8081b}.btn-danger.active:focus,.btn-danger:active:focus,.show>.btn-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(251,98,110,.5)}.btn-danger.disabled,.btn-danger:disabled{color:#fff;background-color:#fa4654;border-color:#fa4654}.btn-light{color:#354052;background-color:#f5f7fb;border-color:#f5f7fb}.btn-light:hover{color:#354052;background-color:#dae1f0;border-color:#d1daec}.btn-light.focus,.btn-light:focus{color:#354052;background-color:#dae1f0;border-color:#d1daec;box-shadow:0 0 0 .2rem rgba(216,220,226,.5)}.btn-light.active,.btn-light:active,.show>.btn-light.dropdown-toggle{color:#354052;background-color:#d1daec;border-color:#c7d3e9}.btn-light.active:focus,.btn-light:active:focus,.show>.btn-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(216,220,226,.5)}.btn-light.disabled,.btn-light:disabled{color:#354052;background-color:#f5f7fb;border-color:#f5f7fb}.btn-dark{color:#fff;background-color:#354052;border-color:#354052}.btn-dark:hover{color:#fff;background-color:#262e3b;border-color:#212833}.btn-dark.focus,.btn-dark:focus{color:#fff;background-color:#262e3b;border-color:#212833;box-shadow:0 0 0 .2rem rgba(83,93,108,.5)}.btn-dark.active,.btn-dark:active,.show>.btn-dark.dropdown-toggle{color:#fff;background-color:#212833;border-color:#1c222b}.btn-dark.active:focus,.btn-dark:active:focus,.show>.btn-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(83,93,108,.5)}.btn-dark.disabled,.btn-dark:disabled{color:#fff;background-color:#354052;border-color:#354052}.btn-outline-primary{color:#206bc4;border-color:#206bc4}.btn-outline-primary:hover{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-outline-primary.focus,.btn-outline-primary:focus{box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-outline-primary.active,.btn-outline-primary.dropdown-toggle.show,.btn-outline-primary:active{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-outline-primary.active:focus,.btn-outline-primary.dropdown-toggle.show:focus,.btn-outline-primary:active:focus{box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:#206bc4;background-color:transparent}.btn-outline-secondary{color:#868c97;border-color:#868c97}.btn-outline-secondary:hover{color:#fff;background-color:#868c97;border-color:#868c97}.btn-outline-secondary.focus,.btn-outline-secondary:focus{box-shadow:0 0 0 .2rem rgba(134,140,151,.5)}.btn-outline-secondary.active,.btn-outline-secondary.dropdown-toggle.show,.btn-outline-secondary:active{color:#fff;background-color:#868c97;border-color:#868c97}.btn-outline-secondary.active:focus,.btn-outline-secondary.dropdown-toggle.show:focus,.btn-outline-secondary:active:focus{box-shadow:0 0 0 .2rem rgba(134,140,151,.5)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{color:#868c97;background-color:transparent}.btn-outline-success{color:#5eba00;border-color:#5eba00}.btn-outline-success:hover{color:#354052;background-color:#5eba00;border-color:#5eba00}.btn-outline-success.focus,.btn-outline-success:focus{box-shadow:0 0 0 .2rem rgba(94,186,0,.5)}.btn-outline-success.active,.btn-outline-success.dropdown-toggle.show,.btn-outline-success:active{color:#354052;background-color:#5eba00;border-color:#5eba00}.btn-outline-success.active:focus,.btn-outline-success.dropdown-toggle.show:focus,.btn-outline-success:active:focus{box-shadow:0 0 0 .2rem rgba(94,186,0,.5)}.btn-outline-success.disabled,.btn-outline-success:disabled{color:#5eba00;background-color:transparent}.btn-outline-info{color:#45aaf2;border-color:#45aaf2}.btn-outline-info:hover{color:#354052;background-color:#45aaf2;border-color:#45aaf2}.btn-outline-info.focus,.btn-outline-info:focus{box-shadow:0 0 0 .2rem rgba(69,170,242,.5)}.btn-outline-info.active,.btn-outline-info.dropdown-toggle.show,.btn-outline-info:active{color:#354052;background-color:#45aaf2;border-color:#45aaf2}.btn-outline-info.active:focus,.btn-outline-info.dropdown-toggle.show:focus,.btn-outline-info:active:focus{box-shadow:0 0 0 .2rem rgba(69,170,242,.5)}.btn-outline-info.disabled,.btn-outline-info:disabled{color:#45aaf2;background-color:transparent}.btn-outline-warning{color:#fab005;border-color:#fab005}.btn-outline-warning:hover{color:#354052;background-color:#fab005;border-color:#fab005}.btn-outline-warning.focus,.btn-outline-warning:focus{box-shadow:0 0 0 .2rem rgba(250,176,5,.5)}.btn-outline-warning.active,.btn-outline-warning.dropdown-toggle.show,.btn-outline-warning:active{color:#354052;background-color:#fab005;border-color:#fab005}.btn-outline-warning.active:focus,.btn-outline-warning.dropdown-toggle.show:focus,.btn-outline-warning:active:focus{box-shadow:0 0 0 .2rem rgba(250,176,5,.5)}.btn-outline-warning.disabled,.btn-outline-warning:disabled{color:#fab005;background-color:transparent}.btn-outline-danger{color:#fa4654;border-color:#fa4654}.btn-outline-danger:hover{color:#fff;background-color:#fa4654;border-color:#fa4654}.btn-outline-danger.focus,.btn-outline-danger:focus{box-shadow:0 0 0 .2rem rgba(250,70,84,.5)}.btn-outline-danger.active,.btn-outline-danger.dropdown-toggle.show,.btn-outline-danger:active{color:#fff;background-color:#fa4654;border-color:#fa4654}.btn-outline-danger.active:focus,.btn-outline-danger.dropdown-toggle.show:focus,.btn-outline-danger:active:focus{box-shadow:0 0 0 .2rem rgba(250,70,84,.5)}.btn-outline-danger.disabled,.btn-outline-danger:disabled{color:#fa4654;background-color:transparent}.btn-outline-light{color:#f5f7fb;border-color:#f5f7fb}.btn-outline-light:hover{color:#354052;background-color:#f5f7fb;border-color:#f5f7fb}.btn-outline-light.focus,.btn-outline-light:focus{box-shadow:0 0 0 .2rem rgba(245,247,251,.5)}.btn-outline-light.active,.btn-outline-light.dropdown-toggle.show,.btn-outline-light:active{color:#354052;background-color:#f5f7fb;border-color:#f5f7fb}.btn-outline-light.active:focus,.btn-outline-light.dropdown-toggle.show:focus,.btn-outline-light:active:focus{box-shadow:0 0 0 .2rem rgba(245,247,251,.5)}.btn-outline-light.disabled,.btn-outline-light:disabled{color:#f5f7fb;background-color:transparent}.btn-outline-dark{color:#354052;border-color:#354052}.btn-outline-dark:hover{color:#fff;background-color:#354052;border-color:#354052}.btn-outline-dark.focus,.btn-outline-dark:focus{box-shadow:0 0 0 .2rem rgba(53,64,82,.5)}.btn-outline-dark.active,.btn-outline-dark.dropdown-toggle.show,.btn-outline-dark:active{color:#fff;background-color:#354052;border-color:#354052}.btn-outline-dark.active:focus,.btn-outline-dark.dropdown-toggle.show:focus,.btn-outline-dark:active:focus{box-shadow:0 0 0 .2rem rgba(53,64,82,.5)}.btn-outline-dark.disabled,.btn-outline-dark:disabled{color:#354052;background-color:transparent}.btn-link{font-weight:400;color:#206bc4;text-decoration:none}.btn-link:hover{color:#154782}.btn-link.disabled,.btn-link:disabled{color:#a8aeb7}.btn-group-lg>.btn,.btn-lg{padding:.5rem 1.5rem;font-size:calc(1.2625rem + .15vw);border-radius:.3rem}@media (min-width:1200px){.btn-group-lg>.btn,.btn-lg{font-size:1.375rem}}.btn-group-sm>.btn,.btn-sm{padding:.125rem .5rem;font-size:.8125rem;border-radius:.2rem}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:.5rem}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{height:0;overflow:hidden;transition:height .35s ease}@media (prefers-reduced-motion:reduce){.collapsing{transition:none}}.dropdown,.dropleft,.dropright,.dropup{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle:after{content:"";display:inline-block;vertical-align:.272em;width:.32em;height:.32em;border-bottom:1px solid;border-left:1px solid;margin-left:.4em;transform:rotate(-45deg)}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;min-width:14rem;padding:.5rem 0;margin:1px 0 0;font-size:.9375rem;color:#354052;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(134,140,151,.24);border-radius:3px}.dropdown-menu-left{right:auto;left:0}.dropdown-menu-right{right:0;left:auto}@media (min-width:33rem){.dropdown-menu-sm-left{right:auto;left:0}.dropdown-menu-sm-right{right:0;left:auto}}@media (min-width:48rem){.dropdown-menu-md-left{right:auto;left:0}.dropdown-menu-md-right{right:0;left:auto}}@media (min-width:64rem){.dropdown-menu-lg-left{right:auto;left:0}.dropdown-menu-lg-right{right:0;left:auto}}@media (min-width:75.25rem){.dropdown-menu-xl-left{right:auto;left:0}.dropdown-menu-xl-right{right:0;left:auto}}.dropup .dropdown-menu{top:auto;bottom:100%;margin-top:0;margin-bottom:1px}.dropup .dropdown-toggle:after{content:"";display:inline-block;vertical-align:.272em;width:.32em;height:.32em;border-bottom:1px solid;border-left:1px solid;margin-left:.4em;transform:rotate(135deg)}.dropright .dropdown-menu{top:0;right:auto;left:100%;margin-top:0;margin-left:1px}.dropright .dropdown-toggle:after{content:"";display:inline-block;vertical-align:.272em;width:.32em;height:.32em;border-bottom:1px solid;border-left:1px solid;margin-left:.4em;transform:rotate(-135deg)}.dropright .dropdown-toggle::after{vertical-align:0}.dropleft .dropdown-menu{top:0;right:100%;left:auto;margin-top:0;margin-right:1px}.dropleft .dropdown-toggle:before{content:"";display:inline-block;vertical-align:.272em;width:.32em;height:.32em;border-bottom:1px solid;border-left:1px solid;margin-right:.4em;transform:rotate(45deg)}.dropleft .dropdown-toggle:after{content:none}.dropleft .dropdown-toggle::before{vertical-align:0}.dropdown-menu[x-placement^=bottom],.dropdown-menu[x-placement^=left],.dropdown-menu[x-placement^=right],.dropdown-menu[x-placement^=top]{right:auto;bottom:auto}.dropdown-divider{height:0;margin:.5rem 0;overflow:hidden;border-top:1px solid rgba(134,140,151,.24)}.dropdown-item{display:block;width:100%;padding:.25rem 1rem;clear:both;font-weight:400;color:#354052;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}.dropdown-item:focus,.dropdown-item:hover{color:inherit;background-color:rgba(134,140,151,.06)}.dropdown-item.active,.dropdown-item:active{color:#206bc4;text-decoration:none;background-color:rgba(32,107,196,.06)}.dropdown-item.disabled,.dropdown-item:disabled{color:#a8aeb7;pointer-events:none;background-color:transparent}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:.5rem 1rem;margin-bottom:0;font-size:.8203125rem;color:#a8aeb7;white-space:nowrap}.dropdown-item-text{display:block;padding:.25rem 1rem;color:#354052}.btn-group,.btn-group-vertical{position:relative;display:inline-flex;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;flex:1 1 auto}.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:hover,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover{z-index:1}.btn-toolbar{display:flex;flex-wrap:wrap;justify-content:flex-start}.btn-toolbar .input-group{width:auto}.btn-group>.btn-group:not(:first-child),.btn-group>.btn:not(:first-child){margin-left:-1px}.btn-group>.btn-group:not(:last-child)>.btn,.btn-group>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:not(:first-child)>.btn,.btn-group>.btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.dropdown-toggle-split::after,.dropright .dropdown-toggle-split::after,.dropup .dropdown-toggle-split::after{margin-left:0}.dropleft .dropdown-toggle-split::before{margin-right:0}.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split{padding-right:.375rem;padding-left:.375rem}.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split{padding-right:1.125rem;padding-left:1.125rem}.btn-group-vertical{flex-direction:column;align-items:flex-start;justify-content:center}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group{width:100%}.btn-group-vertical>.btn-group:not(:first-child),.btn-group-vertical>.btn:not(:first-child){margin-top:-1px}.btn-group-vertical>.btn-group:not(:last-child)>.btn,.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:not(:first-child)>.btn,.btn-group-vertical>.btn:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.btn-group-toggle>.btn,.btn-group-toggle>.btn-group>.btn{margin-bottom:0}.btn-group-toggle>.btn input[type=checkbox],.btn-group-toggle>.btn input[type=radio],.btn-group-toggle>.btn-group>.btn input[type=checkbox],.btn-group-toggle>.btn-group>.btn input[type=radio]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.nav{display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:.5rem 1rem}.nav-link.disabled{color:#a8aeb7;pointer-events:none;cursor:default}.nav-tabs{border-bottom:1px solid #e9ecf1}.nav-tabs .nav-link{margin-bottom:-1px;border:1px solid transparent;border-top-left-radius:3px;border-top-right-radius:3px}.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover{border-color:#f1f3f8 #f1f3f8 #e9ecf1}.nav-tabs .nav-link.disabled{color:#a8aeb7;background-color:transparent;border-color:transparent}.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{color:#7a828f;background-color:#f5f7fb;border-color:#e9ecf1 #e9ecf1 #f5f7fb}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}.nav-pills .nav-link{border-radius:3px}.nav-pills .nav-link.active,.nav-pills .show>.nav-link{color:#fff;background-color:#206bc4}.nav-fill .nav-item{flex:1 1 auto;text-align:center}.nav-justified .nav-item{flex-basis:0;flex-grow:1;text-align:center}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.navbar{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-top:.5rem;padding-bottom:.5rem}.navbar>.container,.navbar>.container-fluid,.navbar>.container-lg,.navbar>.container-md,.navbar>.container-sm,.navbar>.container-xl{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}.navbar-brand{padding-top:.3125rem;padding-bottom:.3125rem;margin-right:1rem;font-size:1.171875rem;white-space:nowrap}.navbar-brand:focus,.navbar-brand:hover{text-decoration:none}.navbar-nav{display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link{padding-right:0;padding-left:0}.navbar-nav .dropdown-menu{position:static}.navbar-text{padding-top:.5rem;padding-bottom:.5rem}.navbar-collapse{align-items:center;width:100%}.navbar-toggler{padding:.75rem .75rem;font-size:1rem;line-height:1;background-color:transparent;border:1px solid transparent;border-radius:3px;transition:box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-toggler:hover{text-decoration:none}.navbar-toggler:focus{text-decoration:none;outline:0;box-shadow:0 0 0 .2rem}.navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;background-repeat:no-repeat;background-position:center;background-size:100%}@media (min-width:33rem){.navbar-expand-sm{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm .navbar-nav .nav-link{padding-right:.75rem;padding-left:.75rem}.navbar-expand-sm .navbar-collapse{display:flex!important}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:48rem){.navbar-expand-md{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-md .navbar-nav .nav-link{padding-right:.75rem;padding-left:.75rem}.navbar-expand-md .navbar-collapse{display:flex!important}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:64rem){.navbar-expand-lg{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-lg .navbar-nav .nav-link{padding-right:.75rem;padding-left:.75rem}.navbar-expand-lg .navbar-collapse{display:flex!important}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:75.25rem){.navbar-expand-xl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xl .navbar-nav .nav-link{padding-right:.75rem;padding-left:.75rem}.navbar-expand-xl .navbar-collapse{display:flex!important}.navbar-expand-xl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.navbar-expand .navbar-nav .nav-link{padding-right:.75rem;padding-left:.75rem}.navbar-expand .navbar-collapse{display:flex!important}.navbar-expand .navbar-toggler{display:none}.navbar-light .navbar-brand{color:rgba(0,0,0,.9)}.navbar-light .navbar-brand:focus,.navbar-light .navbar-brand:hover{color:rgba(0,0,0,.9)}.navbar-light .navbar-nav .nav-link{color:rgba(0,0,0,.55)}.navbar-light .navbar-nav .nav-link:focus,.navbar-light .navbar-nav .nav-link:hover{color:rgba(0,0,0,.7)}.navbar-light .navbar-nav .nav-link.disabled{color:rgba(0,0,0,.3)}.navbar-light .navbar-nav .active>.nav-link,.navbar-light .navbar-nav .nav-link.active,.navbar-light .navbar-nav .nav-link.show,.navbar-light .navbar-nav .show>.nav-link{color:rgba(0,0,0,.9)}.navbar-light .navbar-toggler{color:rgba(0,0,0,.55);border-color:rgba(0,0,0,.1)}.navbar-light .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.navbar-light .navbar-text{color:rgba(0,0,0,.55)}.navbar-light .navbar-text a,.navbar-light .navbar-text a:focus,.navbar-light .navbar-text a:hover{color:rgba(0,0,0,.9)}.navbar-dark .navbar-brand{color:#fff}.navbar-dark .navbar-brand:focus,.navbar-dark .navbar-brand:hover{color:#fff}.navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,.55)}.navbar-dark .navbar-nav .nav-link:focus,.navbar-dark .navbar-nav .nav-link:hover{color:rgba(255,255,255,.75)}.navbar-dark .navbar-nav .nav-link.disabled{color:rgba(255,255,255,.25)}.navbar-dark .navbar-nav .active>.nav-link,.navbar-dark .navbar-nav .nav-link.active,.navbar-dark .navbar-nav .nav-link.show,.navbar-dark .navbar-nav .show>.nav-link{color:#fff}.navbar-dark .navbar-toggler{color:rgba(255,255,255,.55);border-color:rgba(255,255,255,.1)}.navbar-dark .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.navbar-dark .navbar-text{color:rgba(255,255,255,.55)}.navbar-dark .navbar-text a,.navbar-dark .navbar-text a:focus,.navbar-dark .navbar-text a:hover{color:#fff}.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(134,140,151,.24);border-radius:3px}.card>.hr,.card>hr{margin-right:0;margin-left:0}.card>.list-group:first-child .list-group-item:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.card>.list-group:last-child .list-group-item:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.card-body{flex:1 1 auto;padding:1.25rem 1.25rem}.card-title{margin-bottom:.75rem}.card-subtitle{margin-top:-.375rem;margin-bottom:0}.card-text:last-child{margin-bottom:0}.card-link:hover{text-decoration:none}.card-link+.card-link{margin-left:1.25rem}.card-header{padding:.75rem 1.25rem;margin-bottom:0;background-color:rgba(53,64,82,.024);border-bottom:1px solid rgba(134,140,151,.24)}.card-header:first-child{border-radius:2px 2px 0 0}.card-header+.list-group .list-group-item:first-child{border-top:0}.card-footer{padding:.75rem 1.25rem;background-color:rgba(53,64,82,.024);border-top:1px solid rgba(134,140,151,.24)}.card-footer:last-child{border-radius:0 0 2px 2px}.card-header-tabs{margin-right:-.625rem;margin-bottom:-.75rem;margin-left:-.625rem;border-bottom:0}.card-header-tabs .nav-link.active{background-color:#fff;border-bottom-color:#fff}.card-header-pills{margin-right:-.625rem;margin-left:-.625rem}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:1.25rem}.card-img,.card-img-bottom,.card-img-top{width:100%}.card-img,.card-img-top{border-top-left-radius:2px;border-top-right-radius:2px}.card-img,.card-img-bottom{border-bottom-right-radius:2px;border-bottom-left-radius:2px}.card-group>.card{margin-bottom:1.5rem}@media (min-width:33rem){.card-group{display:flex;flex-flow:row wrap}.card-group>.card{flex:1 0 0%;margin-bottom:0}.card-group>.card+.card{margin-left:0;border-left:0}.card-group>.card:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.card-group>.card:not(:last-child) .card-header,.card-group>.card:not(:last-child) .card-img-top{border-top-right-radius:0}.card-group>.card:not(:last-child) .card-footer,.card-group>.card:not(:last-child) .card-img-bottom{border-bottom-right-radius:0}.card-group>.card:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.card-group>.card:not(:first-child) .card-header,.card-group>.card:not(:first-child) .card-img-top{border-top-left-radius:0}.card-group>.card:not(:first-child) .card-footer,.card-group>.card:not(:first-child) .card-img-bottom{border-bottom-left-radius:0}}.accordion>.card{overflow:hidden}.accordion>.card:not(:last-of-type){border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.accordion>.card:not(:first-of-type){border-top-left-radius:0;border-top-right-radius:0}.accordion>.card>.card-header{border-radius:0;margin-bottom:-1px}.breadcrumb{display:flex;flex-wrap:wrap;padding:.75rem 1rem;margin-bottom:1rem;list-style:none;background-color:#f1f3f8;border-radius:3px}.breadcrumb-item{display:flex}.breadcrumb-item+.breadcrumb-item{padding-left:.5rem}.breadcrumb-item+.breadcrumb-item::before{display:inline-block;padding-right:.5rem;color:#a8aeb7;content:"/"}.breadcrumb-item.active{color:#a8aeb7}.pagination{display:flex;padding-left:0;list-style:none}.page-link{position:relative;display:block;color:#868c97;background-color:transparent;border:0 solid #e9ecf1}.page-link:hover{z-index:2;color:#154782;background-color:#f1f3f8;border-color:#e9ecf1}.page-link:focus{z-index:3;outline:0;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.page-item:not(:first-child) .page-link{margin-left:0}.page-item.active .page-link{z-index:3;color:#fff;background-color:#206bc4;border-color:#206bc4}.page-item.disabled .page-link{color:rgba(134,140,151,.5);pointer-events:none;background-color:transparent;border-color:#e9ecf1}.page-link{padding:.25rem .25rem}.page-item:first-child .page-link{border-top-left-radius:3px;border-bottom-left-radius:3px}.page-item:last-child .page-link{border-top-right-radius:3px;border-bottom-right-radius:3px}.pagination-lg .page-link{padding:.75rem 1.5rem;font-size:1.171875rem}.pagination-lg .page-item:first-child .page-link{border-top-left-radius:.3rem;border-bottom-left-radius:.3rem}.pagination-lg .page-item:last-child .page-link{border-top-right-radius:.3rem;border-bottom-right-radius:.3rem}.pagination-sm .page-link{padding:.25rem .5rem;font-size:.8203125rem}.pagination-sm .page-item:first-child .page-link{border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}.pagination-sm .page-item:last-child .page-link{border-top-right-radius:.2rem;border-bottom-right-radius:.2rem}.badge{display:inline-block;padding:.25em .5em;font-size:.75em;font-weight:600;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:3px}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.alert{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:3px}.alert-heading{color:inherit}.alert-link{font-weight:600}.alert-dismissible{padding-right:4rem}.alert-dismissible .close{position:absolute;top:0;right:0;padding:.75rem 1.25rem;color:inherit}.alert-primary{color:#061527;background-color:#d2e1f3;border-color:#a6c4e7}.alert-primary .alert-link{color:#000}.alert-secondary{color:#1b1c1e;background-color:#e7e8ea;border-color:#cfd1d5}.alert-secondary .alert-link{color:#030303}.alert-success{color:#132500;background-color:#dff1cc;border-color:#bfe399}.alert-success .alert-link{color:#000}.alert-info{color:#0e2230;background-color:#daeefc;border-color:#b5ddfa}.alert-info .alert-link{color:#020609}.alert-warning{color:#322301;background-color:#feefcd;border-color:#fddf9b}.alert-warning .alert-link{color:#000}.alert-danger{color:#320e11;background-color:#fedadd;border-color:#fdb5bb}.alert-danger .alert-link{color:#0a0303}.alert-light{color:#313132;background-color:#fdfdfe;border-color:#fbfcfd}.alert-light .alert-link{color:#181818}.alert-dark{color:#0b0d10;background-color:#d7d9dc;border-color:#aeb3ba}.alert-dark .alert-link{color:#000}@-webkit-keyframes progress-bar-stripes{0%{background-position-x:.5rem}}@keyframes progress-bar-stripes{0%{background-position-x:.5rem}}.progress{display:flex;height:.5rem;overflow:hidden;font-size:.703125rem;background-color:rgba(176,181,190,.24);border-radius:3px}.progress-bar{display:flex;flex-direction:column;justify-content:center;overflow:hidden;color:#fff;text-align:center;white-space:nowrap;background-color:#206bc4;transition:width .6s ease}@media (prefers-reduced-motion:reduce){.progress-bar{transition:none}}.progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:.5rem .5rem}.progress-bar-animated{-webkit-animation:progress-bar-stripes 1s linear infinite;animation:progress-bar-stripes 1s linear infinite}@media (prefers-reduced-motion:reduce){.progress-bar-animated{-webkit-animation:none;animation:none}}.list-group{display:flex;flex-direction:column;padding-left:0;margin-bottom:0}.list-group-item-action{width:100%;color:inherit;text-align:inherit}.list-group-item-action:focus,.list-group-item-action:hover{z-index:1;color:inherit;text-decoration:none;background-color:#f5f7fb}.list-group-item-action:active{color:#354052;background-color:#f1f3f8}.list-group-item{position:relative;display:block;padding:.5rem .75rem;margin-bottom:0;background-color:#fff;border:1px solid rgba(134,140,151,.24)}.list-group-item:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.list-group-item:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.list-group-item.disabled,.list-group-item:disabled{color:#a8aeb7;pointer-events:none;background-color:#fff}.list-group-item.active{z-index:2;color:#fff;background-color:#206bc4;border-color:#206bc4}.list-group-item+.list-group-item{border-top-width:0}.list-group-item+.list-group-item.active{margin-top:-1px;border-top-width:1px}.list-group-horizontal{flex-direction:row}.list-group-horizontal .list-group-item:first-child{border-bottom-left-radius:3px;border-top-right-radius:0}.list-group-horizontal .list-group-item:last-child{border-top-right-radius:3px;border-bottom-left-radius:0}.list-group-horizontal .list-group-item.active{margin-top:0}.list-group-horizontal .list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal .list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}@media (min-width:33rem){.list-group-horizontal-sm{flex-direction:row}.list-group-horizontal-sm .list-group-item:first-child{border-bottom-left-radius:3px;border-top-right-radius:0}.list-group-horizontal-sm .list-group-item:last-child{border-top-right-radius:3px;border-bottom-left-radius:0}.list-group-horizontal-sm .list-group-item.active{margin-top:0}.list-group-horizontal-sm .list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-sm .list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media (min-width:48rem){.list-group-horizontal-md{flex-direction:row}.list-group-horizontal-md .list-group-item:first-child{border-bottom-left-radius:3px;border-top-right-radius:0}.list-group-horizontal-md .list-group-item:last-child{border-top-right-radius:3px;border-bottom-left-radius:0}.list-group-horizontal-md .list-group-item.active{margin-top:0}.list-group-horizontal-md .list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-md .list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media (min-width:64rem){.list-group-horizontal-lg{flex-direction:row}.list-group-horizontal-lg .list-group-item:first-child{border-bottom-left-radius:3px;border-top-right-radius:0}.list-group-horizontal-lg .list-group-item:last-child{border-top-right-radius:3px;border-bottom-left-radius:0}.list-group-horizontal-lg .list-group-item.active{margin-top:0}.list-group-horizontal-lg .list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-lg .list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media (min-width:75.25rem){.list-group-horizontal-xl{flex-direction:row}.list-group-horizontal-xl .list-group-item:first-child{border-bottom-left-radius:3px;border-top-right-radius:0}.list-group-horizontal-xl .list-group-item:last-child{border-top-right-radius:3px;border-bottom-left-radius:0}.list-group-horizontal-xl .list-group-item.active{margin-top:0}.list-group-horizontal-xl .list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-xl .list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}.list-group-flush .list-group-item{border-right-width:0;border-left-width:0;border-radius:0}.list-group-flush .list-group-item:first-child{border-top-width:0}.list-group-flush:last-child .list-group-item:last-child{border-bottom-width:0}.list-group-item-primary{color:#0d2b4e;background-color:#e9f0f9}.list-group-item-primary.list-group-item-action:focus,.list-group-item-primary.list-group-item-action:hover{color:#0d2b4e;background-color:#d5e2f4}.list-group-item-primary.list-group-item-action.active{color:#fff;background-color:#0d2b4e;border-color:#0d2b4e}.list-group-item-secondary{color:#36383c;background-color:#f3f4f5}.list-group-item-secondary.list-group-item-action:focus,.list-group-item-secondary.list-group-item-action:hover{color:#36383c;background-color:#e5e7e9}.list-group-item-secondary.list-group-item-action.active{color:#fff;background-color:#36383c;border-color:#36383c}.list-group-item-success{color:#264a00;background-color:#eff8e6}.list-group-item-success.list-group-item-action:focus,.list-group-item-success.list-group-item-action:hover{color:#264a00;background-color:#e2f2d2}.list-group-item-success.list-group-item-action.active{color:#fff;background-color:#264a00;border-color:#264a00}.list-group-item-info{color:#1c4461;background-color:#ecf7fe}.list-group-item-info.list-group-item-action:focus,.list-group-item-info.list-group-item-action:hover{color:#1c4461;background-color:#d4edfd}.list-group-item-info.list-group-item-action.active{color:#fff;background-color:#1c4461;border-color:#1c4461}.list-group-item-warning{color:#644602;background-color:#fff7e6}.list-group-item-warning.list-group-item-action:focus,.list-group-item-warning.list-group-item-action:hover{color:#644602;background-color:#ffefcd}.list-group-item-warning.list-group-item-action.active{color:#fff;background-color:#644602;border-color:#644602}.list-group-item-danger{color:#641c22;background-color:#ffedee}.list-group-item-danger.list-group-item-action:focus,.list-group-item-danger.list-group-item-action:hover{color:#641c22;background-color:#ffd4d6}.list-group-item-danger.list-group-item-action.active{color:#fff;background-color:#641c22;border-color:#641c22}.list-group-item-light{color:#626364;background-color:#fefeff}.list-group-item-light.list-group-item-action:focus,.list-group-item-light.list-group-item-action:hover{color:#626364;background-color:#e5e5ff}.list-group-item-light.list-group-item-action.active{color:#fff;background-color:#626364;border-color:#626364}.list-group-item-dark{color:#151a21;background-color:#ebecee}.list-group-item-dark.list-group-item-action:focus,.list-group-item-dark.list-group-item-action:hover{color:#151a21;background-color:#dddfe2}.list-group-item-dark.list-group-item-action.active{color:#fff;background-color:#151a21;border-color:#151a21}.close{font-size:calc(1.275rem + .3vw);font-weight:400;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}@media (min-width:1200px){.close{font-size:1.5rem}}.close:hover{color:#000;text-decoration:none}.close:focus,.close:hover{opacity:.75}.close.disabled,.close:disabled{pointer-events:none}button.close{padding:0;background-color:transparent;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.toast{max-width:350px;overflow:hidden;font-size:.875rem;background-color:rgba(255,255,255,.85);background-clip:padding-box;border:1px solid rgba(134,140,151,.24);box-shadow:0 .5rem 1rem rgba(0,0,0,.15);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;border-radius:3px}.toast:not(:last-child){margin-bottom:.75rem}.toast.showing{opacity:1}.toast.show{display:block;opacity:1}.toast.hide{display:none}.toast-header{display:flex;align-items:center;padding:.25rem .75rem;color:#868c97;background-color:rgba(255,255,255,.85);background-clip:padding-box;border-bottom:1px solid rgba(0,0,0,.05)}.toast-body{padding:.75rem}.modal-open{overflow:hidden}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal{position:fixed;top:0;left:0;z-index:1050;display:none;width:100%;height:100%;overflow:hidden;outline:0}.modal-dialog{position:relative;width:auto;margin:.5rem;pointer-events:none}.modal.fade .modal-dialog{transition:transform .3s ease-out;transform:translate(0,-1rem)}@media (prefers-reduced-motion:reduce){.modal.fade .modal-dialog{transition:none}}.modal.show .modal-dialog{transform:none}.modal.modal-static .modal-dialog{transform:scale(1.02)}.modal-dialog-scrollable{max-height:calc(100% - 1rem)}.modal-dialog-scrollable .modal-content{overflow:hidden}.modal-dialog-scrollable .modal-footer,.modal-dialog-scrollable .modal-header{flex-shrink:0}.modal-dialog-scrollable .modal-body{overflow-y:auto}.modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - 1rem)}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background-color:#fbfbfb;background-clip:padding-box;border:1px solid rgba(134,140,151,.12);border-radius:3px;outline:0}.modal-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#354052}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:.24}.modal-header{display:flex;align-items:flex-start;justify-content:space-between;padding:1.5rem;border-bottom:1px solid rgba(134,140,151,.12);border-top-left-radius:2px;border-top-right-radius:2px}.modal-header .close{padding:1.5rem;margin:-1rem -1rem -1rem auto}.modal-title{margin-bottom:0;line-height:1.6}.modal-body{position:relative;flex:1 1 auto;padding:1.5rem}.modal-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;padding:1.125rem;border-top:0 solid rgba(134,140,151,.12);border-bottom-right-radius:2px;border-bottom-left-radius:2px}.modal-footer>*{margin:.375rem}.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media (min-width:33rem){.modal-dialog{max-width:540px;margin:1.75rem auto}.modal-dialog-scrollable{max-height:calc(100% - 3.5rem)}.modal-dialog-centered{min-height:calc(100% - 3.5rem)}.modal-sm{max-width:380px}}@media (min-width:64rem){.modal-lg,.modal-xl{max-width:720px}}@media (min-width:75.25rem){.modal-xl{max-width:1140px}}.tooltip{position:absolute;z-index:1070;display:block;margin:0;font-family:"Source Sans Pro",-apple-system,blinkmacsystemfont,segoe ui,helvetica,arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;font-style:normal;font-weight:400;line-height:1.6;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.8203125rem;word-wrap:break-word;opacity:0}.tooltip.show{opacity:.9}.tooltip .tooltip-arrow{position:absolute;display:block;width:.8rem;height:.4rem}.tooltip .tooltip-arrow::before{position:absolute;content:"";border-color:transparent;border-style:solid}.bs-tooltip-auto[x-placement^=top],.bs-tooltip-top{padding:.4rem 0}.bs-tooltip-auto[x-placement^=top] .tooltip-arrow,.bs-tooltip-top .tooltip-arrow{bottom:0}.bs-tooltip-auto[x-placement^=top] .tooltip-arrow::before,.bs-tooltip-top .tooltip-arrow::before{top:0;border-width:.4rem .4rem 0;border-top-color:#000}.bs-tooltip-auto[x-placement^=right],.bs-tooltip-right{padding:0 .4rem}.bs-tooltip-auto[x-placement^=right] .tooltip-arrow,.bs-tooltip-right .tooltip-arrow{left:0;width:.4rem;height:.8rem}.bs-tooltip-auto[x-placement^=right] .tooltip-arrow::before,.bs-tooltip-right .tooltip-arrow::before{right:0;border-width:.4rem .4rem .4rem 0;border-right-color:#000}.bs-tooltip-auto[x-placement^=bottom],.bs-tooltip-bottom{padding:.4rem 0}.bs-tooltip-auto[x-placement^=bottom] .tooltip-arrow,.bs-tooltip-bottom .tooltip-arrow{top:0}.bs-tooltip-auto[x-placement^=bottom] .tooltip-arrow::before,.bs-tooltip-bottom .tooltip-arrow::before{bottom:0;border-width:0 .4rem .4rem;border-bottom-color:#000}.bs-tooltip-auto[x-placement^=left],.bs-tooltip-left{padding:0 .4rem}.bs-tooltip-auto[x-placement^=left] .tooltip-arrow,.bs-tooltip-left .tooltip-arrow{right:0;width:.4rem;height:.8rem}.bs-tooltip-auto[x-placement^=left] .tooltip-arrow::before,.bs-tooltip-left .tooltip-arrow::before{left:0;border-width:.4rem 0 .4rem .4rem;border-left-color:#000}.tooltip-inner{max-width:200px;padding:.25rem .5rem;color:#fff;text-align:center;background-color:#000;border-radius:3px}.popover{position:absolute;top:0;left:0;z-index:1060;display:block;max-width:276px;font-family:"Source Sans Pro",-apple-system,blinkmacsystemfont,segoe ui,helvetica,arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;font-style:normal;font-weight:400;line-height:1.6;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.8203125rem;word-wrap:break-word;background-color:#fff;background-clip:padding-box;border:1px solid rgba(134,140,151,.24);border-radius:.3rem}.popover .popover-arrow{position:absolute;display:block;width:1rem;height:.5rem;margin:0 .3rem}.popover .popover-arrow::after,.popover .popover-arrow::before{position:absolute;display:block;content:"";border-color:transparent;border-style:solid}.bs-popover-auto[x-placement^=top],.bs-popover-top{margin-bottom:.5rem}.bs-popover-auto[x-placement^=top]>.popover-arrow,.bs-popover-top>.popover-arrow{bottom:calc(-.5rem - 1px)}.bs-popover-auto[x-placement^=top]>.popover-arrow::before,.bs-popover-top>.popover-arrow::before{bottom:0;border-width:.5rem .5rem 0;border-top-color:rgba(134,140,151,.29)}.bs-popover-auto[x-placement^=top]>.popover-arrow::after,.bs-popover-top>.popover-arrow::after{bottom:1px;border-width:.5rem .5rem 0;border-top-color:#fff}.bs-popover-auto[x-placement^=right],.bs-popover-right{margin-left:.5rem}.bs-popover-auto[x-placement^=right]>.popover-arrow,.bs-popover-right>.popover-arrow{left:calc(-.5rem - 1px);width:.5rem;height:1rem;margin:.3rem 0}.bs-popover-auto[x-placement^=right]>.popover-arrow::before,.bs-popover-right>.popover-arrow::before{left:0;border-width:.5rem .5rem .5rem 0;border-right-color:rgba(134,140,151,.29)}.bs-popover-auto[x-placement^=right]>.popover-arrow::after,.bs-popover-right>.popover-arrow::after{left:1px;border-width:.5rem .5rem .5rem 0;border-right-color:#fff}.bs-popover-auto[x-placement^=bottom],.bs-popover-bottom{margin-top:.5rem}.bs-popover-auto[x-placement^=bottom]>.popover-arrow,.bs-popover-bottom>.popover-arrow{top:calc(-.5rem - 1px)}.bs-popover-auto[x-placement^=bottom]>.popover-arrow::before,.bs-popover-bottom>.popover-arrow::before{top:0;border-width:0 .5rem .5rem .5rem;border-bottom-color:rgba(134,140,151,.29)}.bs-popover-auto[x-placement^=bottom]>.popover-arrow::after,.bs-popover-bottom>.popover-arrow::after{top:1px;border-width:0 .5rem .5rem .5rem;border-bottom-color:#fff}.bs-popover-auto[x-placement^=bottom] .popover-header::before,.bs-popover-bottom .popover-header::before{position:absolute;top:0;left:50%;display:block;width:1rem;margin-left:-.5rem;content:"";border-bottom:1px solid #f7f7f7}.bs-popover-auto[x-placement^=left],.bs-popover-left{margin-right:.5rem}.bs-popover-auto[x-placement^=left]>.popover-arrow,.bs-popover-left>.popover-arrow{right:calc(-.5rem - 1px);width:.5rem;height:1rem;margin:.3rem 0}.bs-popover-auto[x-placement^=left]>.popover-arrow::before,.bs-popover-left>.popover-arrow::before{right:0;border-width:.5rem 0 .5rem .5rem;border-left-color:rgba(134,140,151,.29)}.bs-popover-auto[x-placement^=left]>.popover-arrow::after,.bs-popover-left>.popover-arrow::after{right:1px;border-width:.5rem 0 .5rem .5rem;border-left-color:#fff}.popover-header{padding:.5rem .75rem;margin-bottom:0;font-size:.9375rem;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px)}.popover-header:empty{display:none}.popover-body{padding:.5rem .75rem;color:#354052}.carousel{position:relative}.carousel.pointer-event{touch-action:pan-y}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner::after{display:block;clear:both;content:""}.carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .6s ease-in-out}@media (prefers-reduced-motion:reduce){.carousel-item{transition:none}}.carousel-item-next,.carousel-item-prev,.carousel-item.active{display:block}.active.carousel-item-right,.carousel-item-next:not(.carousel-item-left){transform:translateX(100%)}.active.carousel-item-left,.carousel-item-prev:not(.carousel-item-right){transform:translateX(-100%)}.carousel-fade .carousel-item{opacity:0;transition-property:opacity;transform:none}.carousel-fade .carousel-item-next.carousel-item-left,.carousel-fade .carousel-item-prev.carousel-item-right,.carousel-fade .carousel-item.active{z-index:1;opacity:1}.carousel-fade .active.carousel-item-left,.carousel-fade .active.carousel-item-right{z-index:0;opacity:0;transition:opacity 0s .6s}@media (prefers-reduced-motion:reduce){.carousel-fade .active.carousel-item-left,.carousel-fade .active.carousel-item-right{transition:none}}.carousel-control-next,.carousel-control-prev{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;color:#fff;text-align:center;opacity:.5;transition:opacity .15s ease}@media (prefers-reduced-motion:reduce){.carousel-control-next,.carousel-control-prev{transition:none}}.carousel-control-next:focus,.carousel-control-next:hover,.carousel-control-prev:focus,.carousel-control-prev:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-next-icon,.carousel-control-prev-icon{display:inline-block;width:1.5rem;height:1.5rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.carousel-control-prev-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='15 18 9 12 15 6'%3e%3c/polyline%3e%3c/svg%3e")}.carousel-control-next-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='9 18 15 12 9 6'%3e%3c/polyline%3e%3c/svg%3e")}.carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding-left:0;margin-right:15%;margin-left:15%;list-style:none}.carousel-indicators li{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#fff;background-clip:padding-box;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}@media (prefers-reduced-motion:reduce){.carousel-indicators li{transition:none}}.carousel-indicators .active{opacity:1}.carousel-caption{position:absolute;right:15%;bottom:1.25rem;left:15%;padding-top:1.25rem;padding-bottom:1.25rem;color:#fff;text-align:center}@-webkit-keyframes spinner-border{to{transform:rotate(360deg)}}@keyframes spinner-border{to{transform:rotate(360deg)}}.spinner-border{display:inline-block;width:1.5rem;height:1.5rem;vertical-align:text-bottom;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;-webkit-animation:spinner-border .75s linear infinite;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:1rem;height:1rem;border-width:1px}@-webkit-keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1}}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1}}.spinner-grow{display:inline-block;width:1.5rem;height:1.5rem;vertical-align:text-bottom;background-color:currentColor;border-radius:50%;opacity:0;-webkit-animation:spinner-grow .75s linear infinite;animation:spinner-grow .75s linear infinite}.spinner-grow-sm{width:1rem;height:1rem}.clearfix::after{display:block;clear:both;content:""}.link-primary{color:#206bc4}.link-primary:focus,.link-primary:hover{color:#154782}.link-secondary{color:#868c97}.link-secondary:focus,.link-secondary:hover{color:#606670}.link-success{color:#5eba00}.link-success:focus,.link-success:hover{color:#376e00}.link-info{color:#45aaf2}.link-info:focus,.link-info:hover{color:#0f86db}.link-warning{color:#fab005}.link-warning:focus,.link-warning:hover{color:#af7b04}.link-danger{color:#fa4654}.link-danger:focus,.link-danger:hover{color:#ed0618}.link-light{color:#f5f7fb}.link-light:focus,.link-light:hover{color:#becbe5}.link-dark{color:#354052}.link-dark:focus,.link-dark:hover{color:#171c24}.embed-responsive{position:relative;width:100%}.embed-responsive::before{display:block;content:""}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.embed-responsive-21by9::before{padding-top:42.8571429%}.embed-responsive-16by9::before{padding-top:56.25%}.embed-responsive-4by3::before{padding-top:75%}.embed-responsive-1by1::before{padding-top:100%}.embed-responsive-2by1::before{padding-top:50%}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}.fixed-bottom{position:fixed;right:0;bottom:0;left:0;z-index:1030}@supports ((position:-webkit-sticky) or (position:sticky)){.sticky-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}@media (min-width:33rem){.sticky-sm-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}@media (min-width:48rem){.sticky-md-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}@media (min-width:64rem){.sticky-lg-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}@media (min-width:75.25rem){.sticky-xl-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}}.sr-only,.sr-only-focusable:not(:focus){position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.stretched-link::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;content:""}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.align-baseline{vertical-align:baseline!important}.align-top{vertical-align:top!important}.align-middle{vertical-align:middle!important}.align-bottom{vertical-align:bottom!important}.align-text-bottom{vertical-align:text-bottom!important}.align-text-top{vertical-align:text-top!important}.float-left{float:left!important}.float-right{float:right!important}.float-none{float:none!important}.overflow-auto{overflow:auto!important}.overflow-hidden{overflow:hidden!important}.d-none{display:none!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.shadow{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}.shadow-sm{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}.shadow-lg{box-shadow:0 1rem 3rem rgba(0,0,0,.175)!important}.shadow-none{box-shadow:none!important}.position-static{position:static!important}.position-relative{position:relative!important}.position-absolute{position:absolute!important}.position-fixed{position:fixed!important}.position-sticky{position:-webkit-sticky!important;position:sticky!important}.border{border:1px solid rgba(134,140,151,.24)!important}.border-wide{border:2px solid rgba(134,140,151,.24)!important}.border-0{border:0!important}.border-top{border-top:1px solid rgba(134,140,151,.24)!important}.border-top-wide{border-top:2px solid rgba(134,140,151,.24)!important}.border-top-0{border-top:0!important}.border-right{border-right:1px solid rgba(134,140,151,.24)!important}.border-right-wide{border-right:2px solid rgba(134,140,151,.24)!important}.border-right-0{border-right:0!important}.border-bottom{border-bottom:1px solid rgba(134,140,151,.24)!important}.border-bottom-wide{border-bottom:2px solid rgba(134,140,151,.24)!important}.border-bottom-0{border-bottom:0!important}.border-left{border-left:1px solid rgba(134,140,151,.24)!important}.border-left-wide{border-left:2px solid rgba(134,140,151,.24)!important}.border-left-0{border-left:0!important}.border-primary{border-color:#206bc4!important}.border-secondary{border-color:#868c97!important}.border-success{border-color:#5eba00!important}.border-info{border-color:#45aaf2!important}.border-warning{border-color:#fab005!important}.border-danger{border-color:#fa4654!important}.border-light{border-color:#f5f7fb!important}.border-dark{border-color:#354052!important}.border-white{border-color:#fff!important}.w-1{width:1%!important}.w-25{width:25%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.w-auto{width:auto!important}.mw-100{max-width:100%!important}.vw-100{width:100vw!important}.min-vw-100{min-width:100vw!important}.h-1{height:1%!important}.h-25{height:25%!important}.h-50{height:50%!important}.h-75{height:75%!important}.h-100{height:100%!important}.h-auto{height:auto!important}.mh-100{max-height:100%!important}.vh-100{height:100vh!important}.min-vh-100{min-height:100vh!important}.flex-fill{flex:1 1 auto!important}.flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important}.flex-row-reverse{flex-direction:row-reverse!important}.flex-column-reverse{flex-direction:column-reverse!important}.flex-grow-0{flex-grow:0!important}.flex-grow-1{flex-grow:1!important}.flex-shrink-0{flex-shrink:0!important}.flex-shrink-1{flex-shrink:1!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}.flex-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-start{justify-content:flex-start!important}.justify-content-end{justify-content:flex-end!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}.align-items-start{align-items:flex-start!important}.align-items-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.align-items-baseline{align-items:baseline!important}.align-items-stretch{align-items:stretch!important}.align-content-start{align-content:flex-start!important}.align-content-end{align-content:flex-end!important}.align-content-center{align-content:center!important}.align-content-between{align-content:space-between!important}.align-content-around{align-content:space-around!important}.align-content-stretch{align-content:stretch!important}.align-self-auto{-ms-grid-row-align:auto!important;align-self:auto!important}.align-self-start{align-self:flex-start!important}.align-self-end{align-self:flex-end!important}.align-self-center{-ms-grid-row-align:center!important;align-self:center!important}.align-self-baseline{align-self:baseline!important}.align-self-stretch{-ms-grid-row-align:stretch!important;align-self:stretch!important}.order-first{order:-1!important}.order-0{order:0!important}.order-1{order:1!important}.order-2{order:2!important}.order-3{order:3!important}.order-4{order:4!important}.order-5{order:5!important}.order-last{order:6!important}.m-0{margin:0!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}.m-3{margin:1rem!important}.m-4{margin:1.25rem!important}.m-5{margin:2rem!important}.m-6{margin:3rem!important}.m-7{margin:6rem!important}.m-8{margin:9rem!important}.m-auto{margin:auto!important}.mx-0{margin-right:0!important;margin-left:0!important}.mx-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-3{margin-right:1rem!important;margin-left:1rem!important}.mx-4{margin-right:1.25rem!important;margin-left:1.25rem!important}.mx-5{margin-right:2rem!important;margin-left:2rem!important}.mx-6{margin-right:3rem!important;margin-left:3rem!important}.mx-7{margin-right:6rem!important;margin-left:6rem!important}.mx-8{margin-right:9rem!important;margin-left:9rem!important}.mx-auto{margin-right:auto!important;margin-left:auto!important}.my-0{margin-top:0!important;margin-bottom:0!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-4{margin-top:1.25rem!important;margin-bottom:1.25rem!important}.my-5{margin-top:2rem!important;margin-bottom:2rem!important}.my-6{margin-top:3rem!important;margin-bottom:3rem!important}.my-7{margin-top:6rem!important;margin-bottom:6rem!important}.my-8{margin-top:9rem!important;margin-bottom:9rem!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.25rem!important}.mt-5{margin-top:2rem!important}.mt-6{margin-top:3rem!important}.mt-7{margin-top:6rem!important}.mt-8{margin-top:9rem!important}.mt-auto{margin-top:auto!important}.mr-0{margin-right:0!important}.mr-1{margin-right:.25rem!important}.mr-2{margin-right:.5rem!important}.mr-3{margin-right:1rem!important}.mr-4{margin-right:1.25rem!important}.mr-5{margin-right:2rem!important}.mr-6{margin-right:3rem!important}.mr-7{margin-right:6rem!important}.mr-8{margin-right:9rem!important}.mr-auto{margin-right:auto!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.25rem!important}.mb-5{margin-bottom:2rem!important}.mb-6{margin-bottom:3rem!important}.mb-7{margin-bottom:6rem!important}.mb-8{margin-bottom:9rem!important}.mb-auto{margin-bottom:auto!important}.ml-0{margin-left:0!important}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.ml-3{margin-left:1rem!important}.ml-4{margin-left:1.25rem!important}.ml-5{margin-left:2rem!important}.ml-6{margin-left:3rem!important}.ml-7{margin-left:6rem!important}.ml-8{margin-left:9rem!important}.ml-auto{margin-left:auto!important}.m-n1{margin:-.25rem!important}.m-n2{margin:-.5rem!important}.m-n3{margin:-1rem!important}.m-n4{margin:-1.25rem!important}.m-n5{margin:-2rem!important}.m-n6{margin:-3rem!important}.m-n7{margin:-6rem!important}.m-n8{margin:-9rem!important}.mx-n1{margin-right:-.25rem!important;margin-left:-.25rem!important}.mx-n2{margin-right:-.5rem!important;margin-left:-.5rem!important}.mx-n3{margin-right:-1rem!important;margin-left:-1rem!important}.mx-n4{margin-right:-1.25rem!important;margin-left:-1.25rem!important}.mx-n5{margin-right:-2rem!important;margin-left:-2rem!important}.mx-n6{margin-right:-3rem!important;margin-left:-3rem!important}.mx-n7{margin-right:-6rem!important;margin-left:-6rem!important}.mx-n8{margin-right:-9rem!important;margin-left:-9rem!important}.my-n1{margin-top:-.25rem!important;margin-bottom:-.25rem!important}.my-n2{margin-top:-.5rem!important;margin-bottom:-.5rem!important}.my-n3{margin-top:-1rem!important;margin-bottom:-1rem!important}.my-n4{margin-top:-1.25rem!important;margin-bottom:-1.25rem!important}.my-n5{margin-top:-2rem!important;margin-bottom:-2rem!important}.my-n6{margin-top:-3rem!important;margin-bottom:-3rem!important}.my-n7{margin-top:-6rem!important;margin-bottom:-6rem!important}.my-n8{margin-top:-9rem!important;margin-bottom:-9rem!important}.mt-n1{margin-top:-.25rem!important}.mt-n2{margin-top:-.5rem!important}.mt-n3{margin-top:-1rem!important}.mt-n4{margin-top:-1.25rem!important}.mt-n5{margin-top:-2rem!important}.mt-n6{margin-top:-3rem!important}.mt-n7{margin-top:-6rem!important}.mt-n8{margin-top:-9rem!important}.mr-n1{margin-right:-.25rem!important}.mr-n2{margin-right:-.5rem!important}.mr-n3{margin-right:-1rem!important}.mr-n4{margin-right:-1.25rem!important}.mr-n5{margin-right:-2rem!important}.mr-n6{margin-right:-3rem!important}.mr-n7{margin-right:-6rem!important}.mr-n8{margin-right:-9rem!important}.mb-n1{margin-bottom:-.25rem!important}.mb-n2{margin-bottom:-.5rem!important}.mb-n3{margin-bottom:-1rem!important}.mb-n4{margin-bottom:-1.25rem!important}.mb-n5{margin-bottom:-2rem!important}.mb-n6{margin-bottom:-3rem!important}.mb-n7{margin-bottom:-6rem!important}.mb-n8{margin-bottom:-9rem!important}.ml-n1{margin-left:-.25rem!important}.ml-n2{margin-left:-.5rem!important}.ml-n3{margin-left:-1rem!important}.ml-n4{margin-left:-1.25rem!important}.ml-n5{margin-left:-2rem!important}.ml-n6{margin-left:-3rem!important}.ml-n7{margin-left:-6rem!important}.ml-n8{margin-left:-9rem!important}.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.25rem!important}.p-5{padding:2rem!important}.p-6{padding:3rem!important}.p-7{padding:6rem!important}.p-8{padding:9rem!important}.px-0{padding-right:0!important;padding-left:0!important}.px-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-3{padding-right:1rem!important;padding-left:1rem!important}.px-4{padding-right:1.25rem!important;padding-left:1.25rem!important}.px-5{padding-right:2rem!important;padding-left:2rem!important}.px-6{padding-right:3rem!important;padding-left:3rem!important}.px-7{padding-right:6rem!important;padding-left:6rem!important}.px-8{padding-right:9rem!important;padding-left:9rem!important}.py-0{padding-top:0!important;padding-bottom:0!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-4{padding-top:1.25rem!important;padding-bottom:1.25rem!important}.py-5{padding-top:2rem!important;padding-bottom:2rem!important}.py-6{padding-top:3rem!important;padding-bottom:3rem!important}.py-7{padding-top:6rem!important;padding-bottom:6rem!important}.py-8{padding-top:9rem!important;padding-bottom:9rem!important}.pt-0{padding-top:0!important}.pt-1{padding-top:.25rem!important}.pt-2{padding-top:.5rem!important}.pt-3{padding-top:1rem!important}.pt-4{padding-top:1.25rem!important}.pt-5{padding-top:2rem!important}.pt-6{padding-top:3rem!important}.pt-7{padding-top:6rem!important}.pt-8{padding-top:9rem!important}.pr-0{padding-right:0!important}.pr-1{padding-right:.25rem!important}.pr-2{padding-right:.5rem!important}.pr-3{padding-right:1rem!important}.pr-4{padding-right:1.25rem!important}.pr-5{padding-right:2rem!important}.pr-6{padding-right:3rem!important}.pr-7{padding-right:6rem!important}.pr-8{padding-right:9rem!important}.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:.25rem!important}.pb-2{padding-bottom:.5rem!important}.pb-3{padding-bottom:1rem!important}.pb-4{padding-bottom:1.25rem!important}.pb-5{padding-bottom:2rem!important}.pb-6{padding-bottom:3rem!important}.pb-7{padding-bottom:6rem!important}.pb-8{padding-bottom:9rem!important}.pl-0{padding-left:0!important}.pl-1{padding-left:.25rem!important}.pl-2{padding-left:.5rem!important}.pl-3{padding-left:1rem!important}.pl-4{padding-left:1.25rem!important}.pl-5{padding-left:2rem!important}.pl-6{padding-left:3rem!important}.pl-7{padding-left:6rem!important}.pl-8{padding-left:9rem!important}.font-weight-light{font-weight:300!important}.font-weight-normal{font-weight:400!important}.font-weight-medium{font-weight:500!important}.font-weight-semibold{font-weight:600!important}.font-weight-bold{font-weight:700!important}.font-weight-extrabold{font-weight:800!important}.font-weight-black{font-weight:900!important}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-primary{color:#206bc4!important}.text-secondary{color:#868c97!important}.text-success{color:#5eba00!important}.text-info{color:#45aaf2!important}.text-warning{color:#fab005!important}.text-danger{color:#fa4654!important}.text-light{color:#f5f7fb!important}.text-dark{color:#354052!important}.text-white{color:#fff!important}.text-body{color:#354052!important}.text-muted{color:#868c97!important}.text-black-50{color:rgba(0,0,0,.5)!important}.text-white-50{color:rgba(255,255,255,.5)!important}.text-reset{color:inherit!important}.lh-1{line-height:1!important}.lh-sm{line-height:1.3333334!important}.lh-base{line-height:1.6!important}.lh-lg{line-height:2.1333334!important}.bg-primary{background-color:#206bc4!important}.bg-secondary{background-color:#868c97!important}.bg-success{background-color:#5eba00!important}.bg-info{background-color:#45aaf2!important}.bg-warning{background-color:#fab005!important}.bg-danger{background-color:#fa4654!important}.bg-light{background-color:#f5f7fb!important}.bg-dark{background-color:#354052!important}.bg-body{background-color:#f5f7fb!important}.bg-white{background-color:#fff!important}.bg-transparent{background-color:transparent!important}.text-wrap{white-space:normal!important}.text-nowrap{white-space:nowrap!important}.text-decoration-none{text-decoration:none!important}.text-decoration-underline{text-decoration:underline!important}.text-decoration-line-through{text-decoration:line-through!important}.font-italic{font-style:italic!important}.font-normal{font-style:normal!important}.text-break{word-wrap:break-word!important}.font-monospace{font-family:Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace!important}.user-select-all{-webkit-user-select:all!important;-moz-user-select:all!important;-ms-user-select:all!important;user-select:all!important}.user-select-auto{-webkit-user-select:auto!important;-moz-user-select:auto!important;-ms-user-select:auto!important;user-select:auto!important}.user-select-none{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.pe-none{pointer-events:none!important}.pe-auto{pointer-events:auto!important}.rounded{border-radius:3px!important}.rounded-sm{border-radius:.2rem!important}.rounded-lg{border-radius:.3rem!important}.rounded-circle{border-radius:50%!important}.rounded-pill{border-radius:50rem!important}.rounded-0{border-radius:0!important}.rounded-top{border-top-left-radius:3px!important;border-top-right-radius:3px!important}.rounded-right{border-top-right-radius:3px!important;border-bottom-right-radius:3px!important}.rounded-bottom{border-bottom-right-radius:3px!important;border-bottom-left-radius:3px!important}.rounded-left{border-bottom-left-radius:3px!important;border-top-left-radius:3px!important}.visible{visibility:visible!important}.invisible{visibility:hidden!important}.object-contain{-o-object-fit:contain!important;object-fit:contain!important}.object-cover{-o-object-fit:cover!important;object-fit:cover!important}.object-fill{-o-object-fit:fill!important;object-fit:fill!important}.object-scale-down{-o-object-fit:scale-down!important;object-fit:scale-down!important}.object-none{-o-object-fit:none!important;object-fit:none!important}.tracking-tight{letter-spacing:-.05em!important}.tracking-normal{letter-spacing:0!important}.tracking-wide{letter-spacing:.05em!important}.cursor-auto{cursor:auto!important}.cursor-pointer{cursor:pointer!important}.cursor-move{cursor:move!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-zoom-in{cursor:zoom-in!important}.cursor-zoom-out{cursor:zoom-out!important}.text-h1{font-size:1.625rem!important}.text-h2{font-size:1.375rem!important}.text-h3{font-size:1.125rem!important}.text-h4{font-size:.9375rem!important}.text-h5{font-size:.8125rem!important}.text-h6{font-size:.6875rem!important}.leading-0{line-height:0!important}.leading-1{line-height:.25rem!important}.leading-2{line-height:.5rem!important}.leading-3{line-height:1rem!important}.leading-4{line-height:1.25rem!important}.leading-5{line-height:2rem!important}.leading-6{line-height:3rem!important}.leading-7{line-height:6rem!important}.leading-8{line-height:9rem!important}@media (min-width:33rem){.float-sm-left{float:left!important}.float-sm-right{float:right!important}.float-sm-none{float:none!important}.d-sm-none{display:none!important}.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:flex!important}.d-sm-inline-flex{display:inline-flex!important}.flex-sm-fill{flex:1 1 auto!important}.flex-sm-row{flex-direction:row!important}.flex-sm-column{flex-direction:column!important}.flex-sm-row-reverse{flex-direction:row-reverse!important}.flex-sm-column-reverse{flex-direction:column-reverse!important}.flex-sm-grow-0{flex-grow:0!important}.flex-sm-grow-1{flex-grow:1!important}.flex-sm-shrink-0{flex-shrink:0!important}.flex-sm-shrink-1{flex-shrink:1!important}.flex-sm-wrap{flex-wrap:wrap!important}.flex-sm-nowrap{flex-wrap:nowrap!important}.flex-sm-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-sm-start{justify-content:flex-start!important}.justify-content-sm-end{justify-content:flex-end!important}.justify-content-sm-center{justify-content:center!important}.justify-content-sm-between{justify-content:space-between!important}.justify-content-sm-around{justify-content:space-around!important}.align-items-sm-start{align-items:flex-start!important}.align-items-sm-end{align-items:flex-end!important}.align-items-sm-center{align-items:center!important}.align-items-sm-baseline{align-items:baseline!important}.align-items-sm-stretch{align-items:stretch!important}.align-content-sm-start{align-content:flex-start!important}.align-content-sm-end{align-content:flex-end!important}.align-content-sm-center{align-content:center!important}.align-content-sm-between{align-content:space-between!important}.align-content-sm-around{align-content:space-around!important}.align-content-sm-stretch{align-content:stretch!important}.align-self-sm-auto{-ms-grid-row-align:auto!important;align-self:auto!important}.align-self-sm-start{align-self:flex-start!important}.align-self-sm-end{align-self:flex-end!important}.align-self-sm-center{-ms-grid-row-align:center!important;align-self:center!important}.align-self-sm-baseline{align-self:baseline!important}.align-self-sm-stretch{-ms-grid-row-align:stretch!important;align-self:stretch!important}.order-sm-first{order:-1!important}.order-sm-0{order:0!important}.order-sm-1{order:1!important}.order-sm-2{order:2!important}.order-sm-3{order:3!important}.order-sm-4{order:4!important}.order-sm-5{order:5!important}.order-sm-last{order:6!important}.m-sm-0{margin:0!important}.m-sm-1{margin:.25rem!important}.m-sm-2{margin:.5rem!important}.m-sm-3{margin:1rem!important}.m-sm-4{margin:1.25rem!important}.m-sm-5{margin:2rem!important}.m-sm-6{margin:3rem!important}.m-sm-7{margin:6rem!important}.m-sm-8{margin:9rem!important}.m-sm-auto{margin:auto!important}.mx-sm-0{margin-right:0!important;margin-left:0!important}.mx-sm-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-sm-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-sm-3{margin-right:1rem!important;margin-left:1rem!important}.mx-sm-4{margin-right:1.25rem!important;margin-left:1.25rem!important}.mx-sm-5{margin-right:2rem!important;margin-left:2rem!important}.mx-sm-6{margin-right:3rem!important;margin-left:3rem!important}.mx-sm-7{margin-right:6rem!important;margin-left:6rem!important}.mx-sm-8{margin-right:9rem!important;margin-left:9rem!important}.mx-sm-auto{margin-right:auto!important;margin-left:auto!important}.my-sm-0{margin-top:0!important;margin-bottom:0!important}.my-sm-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-sm-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-sm-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-sm-4{margin-top:1.25rem!important;margin-bottom:1.25rem!important}.my-sm-5{margin-top:2rem!important;margin-bottom:2rem!important}.my-sm-6{margin-top:3rem!important;margin-bottom:3rem!important}.my-sm-7{margin-top:6rem!important;margin-bottom:6rem!important}.my-sm-8{margin-top:9rem!important;margin-bottom:9rem!important}.my-sm-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-sm-0{margin-top:0!important}.mt-sm-1{margin-top:.25rem!important}.mt-sm-2{margin-top:.5rem!important}.mt-sm-3{margin-top:1rem!important}.mt-sm-4{margin-top:1.25rem!important}.mt-sm-5{margin-top:2rem!important}.mt-sm-6{margin-top:3rem!important}.mt-sm-7{margin-top:6rem!important}.mt-sm-8{margin-top:9rem!important}.mt-sm-auto{margin-top:auto!important}.mr-sm-0{margin-right:0!important}.mr-sm-1{margin-right:.25rem!important}.mr-sm-2{margin-right:.5rem!important}.mr-sm-3{margin-right:1rem!important}.mr-sm-4{margin-right:1.25rem!important}.mr-sm-5{margin-right:2rem!important}.mr-sm-6{margin-right:3rem!important}.mr-sm-7{margin-right:6rem!important}.mr-sm-8{margin-right:9rem!important}.mr-sm-auto{margin-right:auto!important}.mb-sm-0{margin-bottom:0!important}.mb-sm-1{margin-bottom:.25rem!important}.mb-sm-2{margin-bottom:.5rem!important}.mb-sm-3{margin-bottom:1rem!important}.mb-sm-4{margin-bottom:1.25rem!important}.mb-sm-5{margin-bottom:2rem!important}.mb-sm-6{margin-bottom:3rem!important}.mb-sm-7{margin-bottom:6rem!important}.mb-sm-8{margin-bottom:9rem!important}.mb-sm-auto{margin-bottom:auto!important}.ml-sm-0{margin-left:0!important}.ml-sm-1{margin-left:.25rem!important}.ml-sm-2{margin-left:.5rem!important}.ml-sm-3{margin-left:1rem!important}.ml-sm-4{margin-left:1.25rem!important}.ml-sm-5{margin-left:2rem!important}.ml-sm-6{margin-left:3rem!important}.ml-sm-7{margin-left:6rem!important}.ml-sm-8{margin-left:9rem!important}.ml-sm-auto{margin-left:auto!important}.m-sm-n1{margin:-.25rem!important}.m-sm-n2{margin:-.5rem!important}.m-sm-n3{margin:-1rem!important}.m-sm-n4{margin:-1.25rem!important}.m-sm-n5{margin:-2rem!important}.m-sm-n6{margin:-3rem!important}.m-sm-n7{margin:-6rem!important}.m-sm-n8{margin:-9rem!important}.mx-sm-n1{margin-right:-.25rem!important;margin-left:-.25rem!important}.mx-sm-n2{margin-right:-.5rem!important;margin-left:-.5rem!important}.mx-sm-n3{margin-right:-1rem!important;margin-left:-1rem!important}.mx-sm-n4{margin-right:-1.25rem!important;margin-left:-1.25rem!important}.mx-sm-n5{margin-right:-2rem!important;margin-left:-2rem!important}.mx-sm-n6{margin-right:-3rem!important;margin-left:-3rem!important}.mx-sm-n7{margin-right:-6rem!important;margin-left:-6rem!important}.mx-sm-n8{margin-right:-9rem!important;margin-left:-9rem!important}.my-sm-n1{margin-top:-.25rem!important;margin-bottom:-.25rem!important}.my-sm-n2{margin-top:-.5rem!important;margin-bottom:-.5rem!important}.my-sm-n3{margin-top:-1rem!important;margin-bottom:-1rem!important}.my-sm-n4{margin-top:-1.25rem!important;margin-bottom:-1.25rem!important}.my-sm-n5{margin-top:-2rem!important;margin-bottom:-2rem!important}.my-sm-n6{margin-top:-3rem!important;margin-bottom:-3rem!important}.my-sm-n7{margin-top:-6rem!important;margin-bottom:-6rem!important}.my-sm-n8{margin-top:-9rem!important;margin-bottom:-9rem!important}.mt-sm-n1{margin-top:-.25rem!important}.mt-sm-n2{margin-top:-.5rem!important}.mt-sm-n3{margin-top:-1rem!important}.mt-sm-n4{margin-top:-1.25rem!important}.mt-sm-n5{margin-top:-2rem!important}.mt-sm-n6{margin-top:-3rem!important}.mt-sm-n7{margin-top:-6rem!important}.mt-sm-n8{margin-top:-9rem!important}.mr-sm-n1{margin-right:-.25rem!important}.mr-sm-n2{margin-right:-.5rem!important}.mr-sm-n3{margin-right:-1rem!important}.mr-sm-n4{margin-right:-1.25rem!important}.mr-sm-n5{margin-right:-2rem!important}.mr-sm-n6{margin-right:-3rem!important}.mr-sm-n7{margin-right:-6rem!important}.mr-sm-n8{margin-right:-9rem!important}.mb-sm-n1{margin-bottom:-.25rem!important}.mb-sm-n2{margin-bottom:-.5rem!important}.mb-sm-n3{margin-bottom:-1rem!important}.mb-sm-n4{margin-bottom:-1.25rem!important}.mb-sm-n5{margin-bottom:-2rem!important}.mb-sm-n6{margin-bottom:-3rem!important}.mb-sm-n7{margin-bottom:-6rem!important}.mb-sm-n8{margin-bottom:-9rem!important}.ml-sm-n1{margin-left:-.25rem!important}.ml-sm-n2{margin-left:-.5rem!important}.ml-sm-n3{margin-left:-1rem!important}.ml-sm-n4{margin-left:-1.25rem!important}.ml-sm-n5{margin-left:-2rem!important}.ml-sm-n6{margin-left:-3rem!important}.ml-sm-n7{margin-left:-6rem!important}.ml-sm-n8{margin-left:-9rem!important}.p-sm-0{padding:0!important}.p-sm-1{padding:.25rem!important}.p-sm-2{padding:.5rem!important}.p-sm-3{padding:1rem!important}.p-sm-4{padding:1.25rem!important}.p-sm-5{padding:2rem!important}.p-sm-6{padding:3rem!important}.p-sm-7{padding:6rem!important}.p-sm-8{padding:9rem!important}.px-sm-0{padding-right:0!important;padding-left:0!important}.px-sm-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-sm-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-sm-3{padding-right:1rem!important;padding-left:1rem!important}.px-sm-4{padding-right:1.25rem!important;padding-left:1.25rem!important}.px-sm-5{padding-right:2rem!important;padding-left:2rem!important}.px-sm-6{padding-right:3rem!important;padding-left:3rem!important}.px-sm-7{padding-right:6rem!important;padding-left:6rem!important}.px-sm-8{padding-right:9rem!important;padding-left:9rem!important}.py-sm-0{padding-top:0!important;padding-bottom:0!important}.py-sm-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-sm-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-sm-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-sm-4{padding-top:1.25rem!important;padding-bottom:1.25rem!important}.py-sm-5{padding-top:2rem!important;padding-bottom:2rem!important}.py-sm-6{padding-top:3rem!important;padding-bottom:3rem!important}.py-sm-7{padding-top:6rem!important;padding-bottom:6rem!important}.py-sm-8{padding-top:9rem!important;padding-bottom:9rem!important}.pt-sm-0{padding-top:0!important}.pt-sm-1{padding-top:.25rem!important}.pt-sm-2{padding-top:.5rem!important}.pt-sm-3{padding-top:1rem!important}.pt-sm-4{padding-top:1.25rem!important}.pt-sm-5{padding-top:2rem!important}.pt-sm-6{padding-top:3rem!important}.pt-sm-7{padding-top:6rem!important}.pt-sm-8{padding-top:9rem!important}.pr-sm-0{padding-right:0!important}.pr-sm-1{padding-right:.25rem!important}.pr-sm-2{padding-right:.5rem!important}.pr-sm-3{padding-right:1rem!important}.pr-sm-4{padding-right:1.25rem!important}.pr-sm-5{padding-right:2rem!important}.pr-sm-6{padding-right:3rem!important}.pr-sm-7{padding-right:6rem!important}.pr-sm-8{padding-right:9rem!important}.pb-sm-0{padding-bottom:0!important}.pb-sm-1{padding-bottom:.25rem!important}.pb-sm-2{padding-bottom:.5rem!important}.pb-sm-3{padding-bottom:1rem!important}.pb-sm-4{padding-bottom:1.25rem!important}.pb-sm-5{padding-bottom:2rem!important}.pb-sm-6{padding-bottom:3rem!important}.pb-sm-7{padding-bottom:6rem!important}.pb-sm-8{padding-bottom:9rem!important}.pl-sm-0{padding-left:0!important}.pl-sm-1{padding-left:.25rem!important}.pl-sm-2{padding-left:.5rem!important}.pl-sm-3{padding-left:1rem!important}.pl-sm-4{padding-left:1.25rem!important}.pl-sm-5{padding-left:2rem!important}.pl-sm-6{padding-left:3rem!important}.pl-sm-7{padding-left:6rem!important}.pl-sm-8{padding-left:9rem!important}.text-sm-left{text-align:left!important}.text-sm-right{text-align:right!important}.text-sm-center{text-align:center!important}}@media (min-width:48rem){.float-md-left{float:left!important}.float-md-right{float:right!important}.float-md-none{float:none!important}.d-md-none{display:none!important}.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:flex!important}.d-md-inline-flex{display:inline-flex!important}.flex-md-fill{flex:1 1 auto!important}.flex-md-row{flex-direction:row!important}.flex-md-column{flex-direction:column!important}.flex-md-row-reverse{flex-direction:row-reverse!important}.flex-md-column-reverse{flex-direction:column-reverse!important}.flex-md-grow-0{flex-grow:0!important}.flex-md-grow-1{flex-grow:1!important}.flex-md-shrink-0{flex-shrink:0!important}.flex-md-shrink-1{flex-shrink:1!important}.flex-md-wrap{flex-wrap:wrap!important}.flex-md-nowrap{flex-wrap:nowrap!important}.flex-md-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-md-start{justify-content:flex-start!important}.justify-content-md-end{justify-content:flex-end!important}.justify-content-md-center{justify-content:center!important}.justify-content-md-between{justify-content:space-between!important}.justify-content-md-around{justify-content:space-around!important}.align-items-md-start{align-items:flex-start!important}.align-items-md-end{align-items:flex-end!important}.align-items-md-center{align-items:center!important}.align-items-md-baseline{align-items:baseline!important}.align-items-md-stretch{align-items:stretch!important}.align-content-md-start{align-content:flex-start!important}.align-content-md-end{align-content:flex-end!important}.align-content-md-center{align-content:center!important}.align-content-md-between{align-content:space-between!important}.align-content-md-around{align-content:space-around!important}.align-content-md-stretch{align-content:stretch!important}.align-self-md-auto{-ms-grid-row-align:auto!important;align-self:auto!important}.align-self-md-start{align-self:flex-start!important}.align-self-md-end{align-self:flex-end!important}.align-self-md-center{-ms-grid-row-align:center!important;align-self:center!important}.align-self-md-baseline{align-self:baseline!important}.align-self-md-stretch{-ms-grid-row-align:stretch!important;align-self:stretch!important}.order-md-first{order:-1!important}.order-md-0{order:0!important}.order-md-1{order:1!important}.order-md-2{order:2!important}.order-md-3{order:3!important}.order-md-4{order:4!important}.order-md-5{order:5!important}.order-md-last{order:6!important}.m-md-0{margin:0!important}.m-md-1{margin:.25rem!important}.m-md-2{margin:.5rem!important}.m-md-3{margin:1rem!important}.m-md-4{margin:1.25rem!important}.m-md-5{margin:2rem!important}.m-md-6{margin:3rem!important}.m-md-7{margin:6rem!important}.m-md-8{margin:9rem!important}.m-md-auto{margin:auto!important}.mx-md-0{margin-right:0!important;margin-left:0!important}.mx-md-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-md-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-md-3{margin-right:1rem!important;margin-left:1rem!important}.mx-md-4{margin-right:1.25rem!important;margin-left:1.25rem!important}.mx-md-5{margin-right:2rem!important;margin-left:2rem!important}.mx-md-6{margin-right:3rem!important;margin-left:3rem!important}.mx-md-7{margin-right:6rem!important;margin-left:6rem!important}.mx-md-8{margin-right:9rem!important;margin-left:9rem!important}.mx-md-auto{margin-right:auto!important;margin-left:auto!important}.my-md-0{margin-top:0!important;margin-bottom:0!important}.my-md-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-md-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-md-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-md-4{margin-top:1.25rem!important;margin-bottom:1.25rem!important}.my-md-5{margin-top:2rem!important;margin-bottom:2rem!important}.my-md-6{margin-top:3rem!important;margin-bottom:3rem!important}.my-md-7{margin-top:6rem!important;margin-bottom:6rem!important}.my-md-8{margin-top:9rem!important;margin-bottom:9rem!important}.my-md-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-md-0{margin-top:0!important}.mt-md-1{margin-top:.25rem!important}.mt-md-2{margin-top:.5rem!important}.mt-md-3{margin-top:1rem!important}.mt-md-4{margin-top:1.25rem!important}.mt-md-5{margin-top:2rem!important}.mt-md-6{margin-top:3rem!important}.mt-md-7{margin-top:6rem!important}.mt-md-8{margin-top:9rem!important}.mt-md-auto{margin-top:auto!important}.mr-md-0{margin-right:0!important}.mr-md-1{margin-right:.25rem!important}.mr-md-2{margin-right:.5rem!important}.mr-md-3{margin-right:1rem!important}.mr-md-4{margin-right:1.25rem!important}.mr-md-5{margin-right:2rem!important}.mr-md-6{margin-right:3rem!important}.mr-md-7{margin-right:6rem!important}.mr-md-8{margin-right:9rem!important}.mr-md-auto{margin-right:auto!important}.mb-md-0{margin-bottom:0!important}.mb-md-1{margin-bottom:.25rem!important}.mb-md-2{margin-bottom:.5rem!important}.mb-md-3{margin-bottom:1rem!important}.mb-md-4{margin-bottom:1.25rem!important}.mb-md-5{margin-bottom:2rem!important}.mb-md-6{margin-bottom:3rem!important}.mb-md-7{margin-bottom:6rem!important}.mb-md-8{margin-bottom:9rem!important}.mb-md-auto{margin-bottom:auto!important}.ml-md-0{margin-left:0!important}.ml-md-1{margin-left:.25rem!important}.ml-md-2{margin-left:.5rem!important}.ml-md-3{margin-left:1rem!important}.ml-md-4{margin-left:1.25rem!important}.ml-md-5{margin-left:2rem!important}.ml-md-6{margin-left:3rem!important}.ml-md-7{margin-left:6rem!important}.ml-md-8{margin-left:9rem!important}.ml-md-auto{margin-left:auto!important}.m-md-n1{margin:-.25rem!important}.m-md-n2{margin:-.5rem!important}.m-md-n3{margin:-1rem!important}.m-md-n4{margin:-1.25rem!important}.m-md-n5{margin:-2rem!important}.m-md-n6{margin:-3rem!important}.m-md-n7{margin:-6rem!important}.m-md-n8{margin:-9rem!important}.mx-md-n1{margin-right:-.25rem!important;margin-left:-.25rem!important}.mx-md-n2{margin-right:-.5rem!important;margin-left:-.5rem!important}.mx-md-n3{margin-right:-1rem!important;margin-left:-1rem!important}.mx-md-n4{margin-right:-1.25rem!important;margin-left:-1.25rem!important}.mx-md-n5{margin-right:-2rem!important;margin-left:-2rem!important}.mx-md-n6{margin-right:-3rem!important;margin-left:-3rem!important}.mx-md-n7{margin-right:-6rem!important;margin-left:-6rem!important}.mx-md-n8{margin-right:-9rem!important;margin-left:-9rem!important}.my-md-n1{margin-top:-.25rem!important;margin-bottom:-.25rem!important}.my-md-n2{margin-top:-.5rem!important;margin-bottom:-.5rem!important}.my-md-n3{margin-top:-1rem!important;margin-bottom:-1rem!important}.my-md-n4{margin-top:-1.25rem!important;margin-bottom:-1.25rem!important}.my-md-n5{margin-top:-2rem!important;margin-bottom:-2rem!important}.my-md-n6{margin-top:-3rem!important;margin-bottom:-3rem!important}.my-md-n7{margin-top:-6rem!important;margin-bottom:-6rem!important}.my-md-n8{margin-top:-9rem!important;margin-bottom:-9rem!important}.mt-md-n1{margin-top:-.25rem!important}.mt-md-n2{margin-top:-.5rem!important}.mt-md-n3{margin-top:-1rem!important}.mt-md-n4{margin-top:-1.25rem!important}.mt-md-n5{margin-top:-2rem!important}.mt-md-n6{margin-top:-3rem!important}.mt-md-n7{margin-top:-6rem!important}.mt-md-n8{margin-top:-9rem!important}.mr-md-n1{margin-right:-.25rem!important}.mr-md-n2{margin-right:-.5rem!important}.mr-md-n3{margin-right:-1rem!important}.mr-md-n4{margin-right:-1.25rem!important}.mr-md-n5{margin-right:-2rem!important}.mr-md-n6{margin-right:-3rem!important}.mr-md-n7{margin-right:-6rem!important}.mr-md-n8{margin-right:-9rem!important}.mb-md-n1{margin-bottom:-.25rem!important}.mb-md-n2{margin-bottom:-.5rem!important}.mb-md-n3{margin-bottom:-1rem!important}.mb-md-n4{margin-bottom:-1.25rem!important}.mb-md-n5{margin-bottom:-2rem!important}.mb-md-n6{margin-bottom:-3rem!important}.mb-md-n7{margin-bottom:-6rem!important}.mb-md-n8{margin-bottom:-9rem!important}.ml-md-n1{margin-left:-.25rem!important}.ml-md-n2{margin-left:-.5rem!important}.ml-md-n3{margin-left:-1rem!important}.ml-md-n4{margin-left:-1.25rem!important}.ml-md-n5{margin-left:-2rem!important}.ml-md-n6{margin-left:-3rem!important}.ml-md-n7{margin-left:-6rem!important}.ml-md-n8{margin-left:-9rem!important}.p-md-0{padding:0!important}.p-md-1{padding:.25rem!important}.p-md-2{padding:.5rem!important}.p-md-3{padding:1rem!important}.p-md-4{padding:1.25rem!important}.p-md-5{padding:2rem!important}.p-md-6{padding:3rem!important}.p-md-7{padding:6rem!important}.p-md-8{padding:9rem!important}.px-md-0{padding-right:0!important;padding-left:0!important}.px-md-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-md-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-md-3{padding-right:1rem!important;padding-left:1rem!important}.px-md-4{padding-right:1.25rem!important;padding-left:1.25rem!important}.px-md-5{padding-right:2rem!important;padding-left:2rem!important}.px-md-6{padding-right:3rem!important;padding-left:3rem!important}.px-md-7{padding-right:6rem!important;padding-left:6rem!important}.px-md-8{padding-right:9rem!important;padding-left:9rem!important}.py-md-0{padding-top:0!important;padding-bottom:0!important}.py-md-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-md-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-md-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-md-4{padding-top:1.25rem!important;padding-bottom:1.25rem!important}.py-md-5{padding-top:2rem!important;padding-bottom:2rem!important}.py-md-6{padding-top:3rem!important;padding-bottom:3rem!important}.py-md-7{padding-top:6rem!important;padding-bottom:6rem!important}.py-md-8{padding-top:9rem!important;padding-bottom:9rem!important}.pt-md-0{padding-top:0!important}.pt-md-1{padding-top:.25rem!important}.pt-md-2{padding-top:.5rem!important}.pt-md-3{padding-top:1rem!important}.pt-md-4{padding-top:1.25rem!important}.pt-md-5{padding-top:2rem!important}.pt-md-6{padding-top:3rem!important}.pt-md-7{padding-top:6rem!important}.pt-md-8{padding-top:9rem!important}.pr-md-0{padding-right:0!important}.pr-md-1{padding-right:.25rem!important}.pr-md-2{padding-right:.5rem!important}.pr-md-3{padding-right:1rem!important}.pr-md-4{padding-right:1.25rem!important}.pr-md-5{padding-right:2rem!important}.pr-md-6{padding-right:3rem!important}.pr-md-7{padding-right:6rem!important}.pr-md-8{padding-right:9rem!important}.pb-md-0{padding-bottom:0!important}.pb-md-1{padding-bottom:.25rem!important}.pb-md-2{padding-bottom:.5rem!important}.pb-md-3{padding-bottom:1rem!important}.pb-md-4{padding-bottom:1.25rem!important}.pb-md-5{padding-bottom:2rem!important}.pb-md-6{padding-bottom:3rem!important}.pb-md-7{padding-bottom:6rem!important}.pb-md-8{padding-bottom:9rem!important}.pl-md-0{padding-left:0!important}.pl-md-1{padding-left:.25rem!important}.pl-md-2{padding-left:.5rem!important}.pl-md-3{padding-left:1rem!important}.pl-md-4{padding-left:1.25rem!important}.pl-md-5{padding-left:2rem!important}.pl-md-6{padding-left:3rem!important}.pl-md-7{padding-left:6rem!important}.pl-md-8{padding-left:9rem!important}.text-md-left{text-align:left!important}.text-md-right{text-align:right!important}.text-md-center{text-align:center!important}}@media (min-width:64rem){.float-lg-left{float:left!important}.float-lg-right{float:right!important}.float-lg-none{float:none!important}.d-lg-none{display:none!important}.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:flex!important}.d-lg-inline-flex{display:inline-flex!important}.flex-lg-fill{flex:1 1 auto!important}.flex-lg-row{flex-direction:row!important}.flex-lg-column{flex-direction:column!important}.flex-lg-row-reverse{flex-direction:row-reverse!important}.flex-lg-column-reverse{flex-direction:column-reverse!important}.flex-lg-grow-0{flex-grow:0!important}.flex-lg-grow-1{flex-grow:1!important}.flex-lg-shrink-0{flex-shrink:0!important}.flex-lg-shrink-1{flex-shrink:1!important}.flex-lg-wrap{flex-wrap:wrap!important}.flex-lg-nowrap{flex-wrap:nowrap!important}.flex-lg-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-lg-start{justify-content:flex-start!important}.justify-content-lg-end{justify-content:flex-end!important}.justify-content-lg-center{justify-content:center!important}.justify-content-lg-between{justify-content:space-between!important}.justify-content-lg-around{justify-content:space-around!important}.align-items-lg-start{align-items:flex-start!important}.align-items-lg-end{align-items:flex-end!important}.align-items-lg-center{align-items:center!important}.align-items-lg-baseline{align-items:baseline!important}.align-items-lg-stretch{align-items:stretch!important}.align-content-lg-start{align-content:flex-start!important}.align-content-lg-end{align-content:flex-end!important}.align-content-lg-center{align-content:center!important}.align-content-lg-between{align-content:space-between!important}.align-content-lg-around{align-content:space-around!important}.align-content-lg-stretch{align-content:stretch!important}.align-self-lg-auto{-ms-grid-row-align:auto!important;align-self:auto!important}.align-self-lg-start{align-self:flex-start!important}.align-self-lg-end{align-self:flex-end!important}.align-self-lg-center{-ms-grid-row-align:center!important;align-self:center!important}.align-self-lg-baseline{align-self:baseline!important}.align-self-lg-stretch{-ms-grid-row-align:stretch!important;align-self:stretch!important}.order-lg-first{order:-1!important}.order-lg-0{order:0!important}.order-lg-1{order:1!important}.order-lg-2{order:2!important}.order-lg-3{order:3!important}.order-lg-4{order:4!important}.order-lg-5{order:5!important}.order-lg-last{order:6!important}.m-lg-0{margin:0!important}.m-lg-1{margin:.25rem!important}.m-lg-2{margin:.5rem!important}.m-lg-3{margin:1rem!important}.m-lg-4{margin:1.25rem!important}.m-lg-5{margin:2rem!important}.m-lg-6{margin:3rem!important}.m-lg-7{margin:6rem!important}.m-lg-8{margin:9rem!important}.m-lg-auto{margin:auto!important}.mx-lg-0{margin-right:0!important;margin-left:0!important}.mx-lg-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-lg-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-lg-3{margin-right:1rem!important;margin-left:1rem!important}.mx-lg-4{margin-right:1.25rem!important;margin-left:1.25rem!important}.mx-lg-5{margin-right:2rem!important;margin-left:2rem!important}.mx-lg-6{margin-right:3rem!important;margin-left:3rem!important}.mx-lg-7{margin-right:6rem!important;margin-left:6rem!important}.mx-lg-8{margin-right:9rem!important;margin-left:9rem!important}.mx-lg-auto{margin-right:auto!important;margin-left:auto!important}.my-lg-0{margin-top:0!important;margin-bottom:0!important}.my-lg-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-lg-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-lg-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-lg-4{margin-top:1.25rem!important;margin-bottom:1.25rem!important}.my-lg-5{margin-top:2rem!important;margin-bottom:2rem!important}.my-lg-6{margin-top:3rem!important;margin-bottom:3rem!important}.my-lg-7{margin-top:6rem!important;margin-bottom:6rem!important}.my-lg-8{margin-top:9rem!important;margin-bottom:9rem!important}.my-lg-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-lg-0{margin-top:0!important}.mt-lg-1{margin-top:.25rem!important}.mt-lg-2{margin-top:.5rem!important}.mt-lg-3{margin-top:1rem!important}.mt-lg-4{margin-top:1.25rem!important}.mt-lg-5{margin-top:2rem!important}.mt-lg-6{margin-top:3rem!important}.mt-lg-7{margin-top:6rem!important}.mt-lg-8{margin-top:9rem!important}.mt-lg-auto{margin-top:auto!important}.mr-lg-0{margin-right:0!important}.mr-lg-1{margin-right:.25rem!important}.mr-lg-2{margin-right:.5rem!important}.mr-lg-3{margin-right:1rem!important}.mr-lg-4{margin-right:1.25rem!important}.mr-lg-5{margin-right:2rem!important}.mr-lg-6{margin-right:3rem!important}.mr-lg-7{margin-right:6rem!important}.mr-lg-8{margin-right:9rem!important}.mr-lg-auto{margin-right:auto!important}.mb-lg-0{margin-bottom:0!important}.mb-lg-1{margin-bottom:.25rem!important}.mb-lg-2{margin-bottom:.5rem!important}.mb-lg-3{margin-bottom:1rem!important}.mb-lg-4{margin-bottom:1.25rem!important}.mb-lg-5{margin-bottom:2rem!important}.mb-lg-6{margin-bottom:3rem!important}.mb-lg-7{margin-bottom:6rem!important}.mb-lg-8{margin-bottom:9rem!important}.mb-lg-auto{margin-bottom:auto!important}.ml-lg-0{margin-left:0!important}.ml-lg-1{margin-left:.25rem!important}.ml-lg-2{margin-left:.5rem!important}.ml-lg-3{margin-left:1rem!important}.ml-lg-4{margin-left:1.25rem!important}.ml-lg-5{margin-left:2rem!important}.ml-lg-6{margin-left:3rem!important}.ml-lg-7{margin-left:6rem!important}.ml-lg-8{margin-left:9rem!important}.ml-lg-auto{margin-left:auto!important}.m-lg-n1{margin:-.25rem!important}.m-lg-n2{margin:-.5rem!important}.m-lg-n3{margin:-1rem!important}.m-lg-n4{margin:-1.25rem!important}.m-lg-n5{margin:-2rem!important}.m-lg-n6{margin:-3rem!important}.m-lg-n7{margin:-6rem!important}.m-lg-n8{margin:-9rem!important}.mx-lg-n1{margin-right:-.25rem!important;margin-left:-.25rem!important}.mx-lg-n2{margin-right:-.5rem!important;margin-left:-.5rem!important}.mx-lg-n3{margin-right:-1rem!important;margin-left:-1rem!important}.mx-lg-n4{margin-right:-1.25rem!important;margin-left:-1.25rem!important}.mx-lg-n5{margin-right:-2rem!important;margin-left:-2rem!important}.mx-lg-n6{margin-right:-3rem!important;margin-left:-3rem!important}.mx-lg-n7{margin-right:-6rem!important;margin-left:-6rem!important}.mx-lg-n8{margin-right:-9rem!important;margin-left:-9rem!important}.my-lg-n1{margin-top:-.25rem!important;margin-bottom:-.25rem!important}.my-lg-n2{margin-top:-.5rem!important;margin-bottom:-.5rem!important}.my-lg-n3{margin-top:-1rem!important;margin-bottom:-1rem!important}.my-lg-n4{margin-top:-1.25rem!important;margin-bottom:-1.25rem!important}.my-lg-n5{margin-top:-2rem!important;margin-bottom:-2rem!important}.my-lg-n6{margin-top:-3rem!important;margin-bottom:-3rem!important}.my-lg-n7{margin-top:-6rem!important;margin-bottom:-6rem!important}.my-lg-n8{margin-top:-9rem!important;margin-bottom:-9rem!important}.mt-lg-n1{margin-top:-.25rem!important}.mt-lg-n2{margin-top:-.5rem!important}.mt-lg-n3{margin-top:-1rem!important}.mt-lg-n4{margin-top:-1.25rem!important}.mt-lg-n5{margin-top:-2rem!important}.mt-lg-n6{margin-top:-3rem!important}.mt-lg-n7{margin-top:-6rem!important}.mt-lg-n8{margin-top:-9rem!important}.mr-lg-n1{margin-right:-.25rem!important}.mr-lg-n2{margin-right:-.5rem!important}.mr-lg-n3{margin-right:-1rem!important}.mr-lg-n4{margin-right:-1.25rem!important}.mr-lg-n5{margin-right:-2rem!important}.mr-lg-n6{margin-right:-3rem!important}.mr-lg-n7{margin-right:-6rem!important}.mr-lg-n8{margin-right:-9rem!important}.mb-lg-n1{margin-bottom:-.25rem!important}.mb-lg-n2{margin-bottom:-.5rem!important}.mb-lg-n3{margin-bottom:-1rem!important}.mb-lg-n4{margin-bottom:-1.25rem!important}.mb-lg-n5{margin-bottom:-2rem!important}.mb-lg-n6{margin-bottom:-3rem!important}.mb-lg-n7{margin-bottom:-6rem!important}.mb-lg-n8{margin-bottom:-9rem!important}.ml-lg-n1{margin-left:-.25rem!important}.ml-lg-n2{margin-left:-.5rem!important}.ml-lg-n3{margin-left:-1rem!important}.ml-lg-n4{margin-left:-1.25rem!important}.ml-lg-n5{margin-left:-2rem!important}.ml-lg-n6{margin-left:-3rem!important}.ml-lg-n7{margin-left:-6rem!important}.ml-lg-n8{margin-left:-9rem!important}.p-lg-0{padding:0!important}.p-lg-1{padding:.25rem!important}.p-lg-2{padding:.5rem!important}.p-lg-3{padding:1rem!important}.p-lg-4{padding:1.25rem!important}.p-lg-5{padding:2rem!important}.p-lg-6{padding:3rem!important}.p-lg-7{padding:6rem!important}.p-lg-8{padding:9rem!important}.px-lg-0{padding-right:0!important;padding-left:0!important}.px-lg-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-lg-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-lg-3{padding-right:1rem!important;padding-left:1rem!important}.px-lg-4{padding-right:1.25rem!important;padding-left:1.25rem!important}.px-lg-5{padding-right:2rem!important;padding-left:2rem!important}.px-lg-6{padding-right:3rem!important;padding-left:3rem!important}.px-lg-7{padding-right:6rem!important;padding-left:6rem!important}.px-lg-8{padding-right:9rem!important;padding-left:9rem!important}.py-lg-0{padding-top:0!important;padding-bottom:0!important}.py-lg-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-lg-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-lg-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-lg-4{padding-top:1.25rem!important;padding-bottom:1.25rem!important}.py-lg-5{padding-top:2rem!important;padding-bottom:2rem!important}.py-lg-6{padding-top:3rem!important;padding-bottom:3rem!important}.py-lg-7{padding-top:6rem!important;padding-bottom:6rem!important}.py-lg-8{padding-top:9rem!important;padding-bottom:9rem!important}.pt-lg-0{padding-top:0!important}.pt-lg-1{padding-top:.25rem!important}.pt-lg-2{padding-top:.5rem!important}.pt-lg-3{padding-top:1rem!important}.pt-lg-4{padding-top:1.25rem!important}.pt-lg-5{padding-top:2rem!important}.pt-lg-6{padding-top:3rem!important}.pt-lg-7{padding-top:6rem!important}.pt-lg-8{padding-top:9rem!important}.pr-lg-0{padding-right:0!important}.pr-lg-1{padding-right:.25rem!important}.pr-lg-2{padding-right:.5rem!important}.pr-lg-3{padding-right:1rem!important}.pr-lg-4{padding-right:1.25rem!important}.pr-lg-5{padding-right:2rem!important}.pr-lg-6{padding-right:3rem!important}.pr-lg-7{padding-right:6rem!important}.pr-lg-8{padding-right:9rem!important}.pb-lg-0{padding-bottom:0!important}.pb-lg-1{padding-bottom:.25rem!important}.pb-lg-2{padding-bottom:.5rem!important}.pb-lg-3{padding-bottom:1rem!important}.pb-lg-4{padding-bottom:1.25rem!important}.pb-lg-5{padding-bottom:2rem!important}.pb-lg-6{padding-bottom:3rem!important}.pb-lg-7{padding-bottom:6rem!important}.pb-lg-8{padding-bottom:9rem!important}.pl-lg-0{padding-left:0!important}.pl-lg-1{padding-left:.25rem!important}.pl-lg-2{padding-left:.5rem!important}.pl-lg-3{padding-left:1rem!important}.pl-lg-4{padding-left:1.25rem!important}.pl-lg-5{padding-left:2rem!important}.pl-lg-6{padding-left:3rem!important}.pl-lg-7{padding-left:6rem!important}.pl-lg-8{padding-left:9rem!important}.text-lg-left{text-align:left!important}.text-lg-right{text-align:right!important}.text-lg-center{text-align:center!important}}@media (min-width:75.25rem){.float-xl-left{float:left!important}.float-xl-right{float:right!important}.float-xl-none{float:none!important}.d-xl-none{display:none!important}.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:flex!important}.d-xl-inline-flex{display:inline-flex!important}.flex-xl-fill{flex:1 1 auto!important}.flex-xl-row{flex-direction:row!important}.flex-xl-column{flex-direction:column!important}.flex-xl-row-reverse{flex-direction:row-reverse!important}.flex-xl-column-reverse{flex-direction:column-reverse!important}.flex-xl-grow-0{flex-grow:0!important}.flex-xl-grow-1{flex-grow:1!important}.flex-xl-shrink-0{flex-shrink:0!important}.flex-xl-shrink-1{flex-shrink:1!important}.flex-xl-wrap{flex-wrap:wrap!important}.flex-xl-nowrap{flex-wrap:nowrap!important}.flex-xl-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-xl-start{justify-content:flex-start!important}.justify-content-xl-end{justify-content:flex-end!important}.justify-content-xl-center{justify-content:center!important}.justify-content-xl-between{justify-content:space-between!important}.justify-content-xl-around{justify-content:space-around!important}.align-items-xl-start{align-items:flex-start!important}.align-items-xl-end{align-items:flex-end!important}.align-items-xl-center{align-items:center!important}.align-items-xl-baseline{align-items:baseline!important}.align-items-xl-stretch{align-items:stretch!important}.align-content-xl-start{align-content:flex-start!important}.align-content-xl-end{align-content:flex-end!important}.align-content-xl-center{align-content:center!important}.align-content-xl-between{align-content:space-between!important}.align-content-xl-around{align-content:space-around!important}.align-content-xl-stretch{align-content:stretch!important}.align-self-xl-auto{-ms-grid-row-align:auto!important;align-self:auto!important}.align-self-xl-start{align-self:flex-start!important}.align-self-xl-end{align-self:flex-end!important}.align-self-xl-center{-ms-grid-row-align:center!important;align-self:center!important}.align-self-xl-baseline{align-self:baseline!important}.align-self-xl-stretch{-ms-grid-row-align:stretch!important;align-self:stretch!important}.order-xl-first{order:-1!important}.order-xl-0{order:0!important}.order-xl-1{order:1!important}.order-xl-2{order:2!important}.order-xl-3{order:3!important}.order-xl-4{order:4!important}.order-xl-5{order:5!important}.order-xl-last{order:6!important}.m-xl-0{margin:0!important}.m-xl-1{margin:.25rem!important}.m-xl-2{margin:.5rem!important}.m-xl-3{margin:1rem!important}.m-xl-4{margin:1.25rem!important}.m-xl-5{margin:2rem!important}.m-xl-6{margin:3rem!important}.m-xl-7{margin:6rem!important}.m-xl-8{margin:9rem!important}.m-xl-auto{margin:auto!important}.mx-xl-0{margin-right:0!important;margin-left:0!important}.mx-xl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xl-4{margin-right:1.25rem!important;margin-left:1.25rem!important}.mx-xl-5{margin-right:2rem!important;margin-left:2rem!important}.mx-xl-6{margin-right:3rem!important;margin-left:3rem!important}.mx-xl-7{margin-right:6rem!important;margin-left:6rem!important}.mx-xl-8{margin-right:9rem!important;margin-left:9rem!important}.mx-xl-auto{margin-right:auto!important;margin-left:auto!important}.my-xl-0{margin-top:0!important;margin-bottom:0!important}.my-xl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xl-4{margin-top:1.25rem!important;margin-bottom:1.25rem!important}.my-xl-5{margin-top:2rem!important;margin-bottom:2rem!important}.my-xl-6{margin-top:3rem!important;margin-bottom:3rem!important}.my-xl-7{margin-top:6rem!important;margin-bottom:6rem!important}.my-xl-8{margin-top:9rem!important;margin-bottom:9rem!important}.my-xl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xl-0{margin-top:0!important}.mt-xl-1{margin-top:.25rem!important}.mt-xl-2{margin-top:.5rem!important}.mt-xl-3{margin-top:1rem!important}.mt-xl-4{margin-top:1.25rem!important}.mt-xl-5{margin-top:2rem!important}.mt-xl-6{margin-top:3rem!important}.mt-xl-7{margin-top:6rem!important}.mt-xl-8{margin-top:9rem!important}.mt-xl-auto{margin-top:auto!important}.mr-xl-0{margin-right:0!important}.mr-xl-1{margin-right:.25rem!important}.mr-xl-2{margin-right:.5rem!important}.mr-xl-3{margin-right:1rem!important}.mr-xl-4{margin-right:1.25rem!important}.mr-xl-5{margin-right:2rem!important}.mr-xl-6{margin-right:3rem!important}.mr-xl-7{margin-right:6rem!important}.mr-xl-8{margin-right:9rem!important}.mr-xl-auto{margin-right:auto!important}.mb-xl-0{margin-bottom:0!important}.mb-xl-1{margin-bottom:.25rem!important}.mb-xl-2{margin-bottom:.5rem!important}.mb-xl-3{margin-bottom:1rem!important}.mb-xl-4{margin-bottom:1.25rem!important}.mb-xl-5{margin-bottom:2rem!important}.mb-xl-6{margin-bottom:3rem!important}.mb-xl-7{margin-bottom:6rem!important}.mb-xl-8{margin-bottom:9rem!important}.mb-xl-auto{margin-bottom:auto!important}.ml-xl-0{margin-left:0!important}.ml-xl-1{margin-left:.25rem!important}.ml-xl-2{margin-left:.5rem!important}.ml-xl-3{margin-left:1rem!important}.ml-xl-4{margin-left:1.25rem!important}.ml-xl-5{margin-left:2rem!important}.ml-xl-6{margin-left:3rem!important}.ml-xl-7{margin-left:6rem!important}.ml-xl-8{margin-left:9rem!important}.ml-xl-auto{margin-left:auto!important}.m-xl-n1{margin:-.25rem!important}.m-xl-n2{margin:-.5rem!important}.m-xl-n3{margin:-1rem!important}.m-xl-n4{margin:-1.25rem!important}.m-xl-n5{margin:-2rem!important}.m-xl-n6{margin:-3rem!important}.m-xl-n7{margin:-6rem!important}.m-xl-n8{margin:-9rem!important}.mx-xl-n1{margin-right:-.25rem!important;margin-left:-.25rem!important}.mx-xl-n2{margin-right:-.5rem!important;margin-left:-.5rem!important}.mx-xl-n3{margin-right:-1rem!important;margin-left:-1rem!important}.mx-xl-n4{margin-right:-1.25rem!important;margin-left:-1.25rem!important}.mx-xl-n5{margin-right:-2rem!important;margin-left:-2rem!important}.mx-xl-n6{margin-right:-3rem!important;margin-left:-3rem!important}.mx-xl-n7{margin-right:-6rem!important;margin-left:-6rem!important}.mx-xl-n8{margin-right:-9rem!important;margin-left:-9rem!important}.my-xl-n1{margin-top:-.25rem!important;margin-bottom:-.25rem!important}.my-xl-n2{margin-top:-.5rem!important;margin-bottom:-.5rem!important}.my-xl-n3{margin-top:-1rem!important;margin-bottom:-1rem!important}.my-xl-n4{margin-top:-1.25rem!important;margin-bottom:-1.25rem!important}.my-xl-n5{margin-top:-2rem!important;margin-bottom:-2rem!important}.my-xl-n6{margin-top:-3rem!important;margin-bottom:-3rem!important}.my-xl-n7{margin-top:-6rem!important;margin-bottom:-6rem!important}.my-xl-n8{margin-top:-9rem!important;margin-bottom:-9rem!important}.mt-xl-n1{margin-top:-.25rem!important}.mt-xl-n2{margin-top:-.5rem!important}.mt-xl-n3{margin-top:-1rem!important}.mt-xl-n4{margin-top:-1.25rem!important}.mt-xl-n5{margin-top:-2rem!important}.mt-xl-n6{margin-top:-3rem!important}.mt-xl-n7{margin-top:-6rem!important}.mt-xl-n8{margin-top:-9rem!important}.mr-xl-n1{margin-right:-.25rem!important}.mr-xl-n2{margin-right:-.5rem!important}.mr-xl-n3{margin-right:-1rem!important}.mr-xl-n4{margin-right:-1.25rem!important}.mr-xl-n5{margin-right:-2rem!important}.mr-xl-n6{margin-right:-3rem!important}.mr-xl-n7{margin-right:-6rem!important}.mr-xl-n8{margin-right:-9rem!important}.mb-xl-n1{margin-bottom:-.25rem!important}.mb-xl-n2{margin-bottom:-.5rem!important}.mb-xl-n3{margin-bottom:-1rem!important}.mb-xl-n4{margin-bottom:-1.25rem!important}.mb-xl-n5{margin-bottom:-2rem!important}.mb-xl-n6{margin-bottom:-3rem!important}.mb-xl-n7{margin-bottom:-6rem!important}.mb-xl-n8{margin-bottom:-9rem!important}.ml-xl-n1{margin-left:-.25rem!important}.ml-xl-n2{margin-left:-.5rem!important}.ml-xl-n3{margin-left:-1rem!important}.ml-xl-n4{margin-left:-1.25rem!important}.ml-xl-n5{margin-left:-2rem!important}.ml-xl-n6{margin-left:-3rem!important}.ml-xl-n7{margin-left:-6rem!important}.ml-xl-n8{margin-left:-9rem!important}.p-xl-0{padding:0!important}.p-xl-1{padding:.25rem!important}.p-xl-2{padding:.5rem!important}.p-xl-3{padding:1rem!important}.p-xl-4{padding:1.25rem!important}.p-xl-5{padding:2rem!important}.p-xl-6{padding:3rem!important}.p-xl-7{padding:6rem!important}.p-xl-8{padding:9rem!important}.px-xl-0{padding-right:0!important;padding-left:0!important}.px-xl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xl-4{padding-right:1.25rem!important;padding-left:1.25rem!important}.px-xl-5{padding-right:2rem!important;padding-left:2rem!important}.px-xl-6{padding-right:3rem!important;padding-left:3rem!important}.px-xl-7{padding-right:6rem!important;padding-left:6rem!important}.px-xl-8{padding-right:9rem!important;padding-left:9rem!important}.py-xl-0{padding-top:0!important;padding-bottom:0!important}.py-xl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xl-4{padding-top:1.25rem!important;padding-bottom:1.25rem!important}.py-xl-5{padding-top:2rem!important;padding-bottom:2rem!important}.py-xl-6{padding-top:3rem!important;padding-bottom:3rem!important}.py-xl-7{padding-top:6rem!important;padding-bottom:6rem!important}.py-xl-8{padding-top:9rem!important;padding-bottom:9rem!important}.pt-xl-0{padding-top:0!important}.pt-xl-1{padding-top:.25rem!important}.pt-xl-2{padding-top:.5rem!important}.pt-xl-3{padding-top:1rem!important}.pt-xl-4{padding-top:1.25rem!important}.pt-xl-5{padding-top:2rem!important}.pt-xl-6{padding-top:3rem!important}.pt-xl-7{padding-top:6rem!important}.pt-xl-8{padding-top:9rem!important}.pr-xl-0{padding-right:0!important}.pr-xl-1{padding-right:.25rem!important}.pr-xl-2{padding-right:.5rem!important}.pr-xl-3{padding-right:1rem!important}.pr-xl-4{padding-right:1.25rem!important}.pr-xl-5{padding-right:2rem!important}.pr-xl-6{padding-right:3rem!important}.pr-xl-7{padding-right:6rem!important}.pr-xl-8{padding-right:9rem!important}.pb-xl-0{padding-bottom:0!important}.pb-xl-1{padding-bottom:.25rem!important}.pb-xl-2{padding-bottom:.5rem!important}.pb-xl-3{padding-bottom:1rem!important}.pb-xl-4{padding-bottom:1.25rem!important}.pb-xl-5{padding-bottom:2rem!important}.pb-xl-6{padding-bottom:3rem!important}.pb-xl-7{padding-bottom:6rem!important}.pb-xl-8{padding-bottom:9rem!important}.pl-xl-0{padding-left:0!important}.pl-xl-1{padding-left:.25rem!important}.pl-xl-2{padding-left:.5rem!important}.pl-xl-3{padding-left:1rem!important}.pl-xl-4{padding-left:1.25rem!important}.pl-xl-5{padding-left:2rem!important}.pl-xl-6{padding-left:3rem!important}.pl-xl-7{padding-left:6rem!important}.pl-xl-8{padding-left:9rem!important}.text-xl-left{text-align:left!important}.text-xl-right{text-align:right!important}.text-xl-center{text-align:center!important}}@media print{.d-print-none{display:none!important}.d-print-inline{display:inline!important}.d-print-inline-block{display:inline-block!important}.d-print-block{display:block!important}.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}.d-print-flex{display:flex!important}.d-print-inline-flex{display:inline-flex!important}}html{font-size:16px;scroll-behavior:smooth}body{overflow-y:scroll;touch-action:manipulation;text-rendering:optimizeLegibility;font-feature-settings:"liga" 0}body .content ::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}body .content ::-webkit-scrollbar-thumb{border-radius:5px;background:#dee1e7}body .content ::-webkit-scrollbar-corner{background:0 0}body .content :hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#cbcfd6}@media print{body{background:0 0}}.navbar{padding-top:0;padding-bottom:0;min-height:3.5rem;box-shadow:0 0 0 1px rgba(134,140,151,.24);z-index:1030}@media print{.navbar{display:none;margin:0!important}}.navbar .nav-link{line-height:1;min-width:2rem;min-height:2rem;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center}.navbar .nav-link-icon{font-size:1rem;width:1rem;height:1rem;display:block;margin-right:.5rem;line-height:.99}.navbar .navbar-nav{align-items:center}.navbar .navbar-nav .nav-link{color:inherit;opacity:.6;transition:.3s opacity;justify-content:center}.navbar .navbar-nav .nav-link:hover{color:inherit;opacity:1}.navbar .navbar-nav .nav-link.disabled{color:inherit;opacity:.2}.navbar .navbar-nav .active>.nav-link,.navbar .navbar-nav .nav-link.active,.navbar .navbar-nav .nav-link.show,.navbar .navbar-nav .show>.nav-link{color:inherit;opacity:1}.navbar-expand-xs .navbar-nav{margin-left:-.75rem}.navbar-expand-xs .navbar-nav .nav-item{position:relative}@media (min-width:33rem){.navbar-expand-sm .navbar-nav{margin-left:-.75rem}.navbar-expand-sm .navbar-nav .nav-item{position:relative}}@media (min-width:48rem){.navbar-expand-md .navbar-nav{margin-left:-.75rem}.navbar-expand-md .navbar-nav .nav-item{position:relative}}@media (min-width:64rem){.navbar-expand-lg .navbar-nav{margin-left:-.75rem}.navbar-expand-lg .navbar-nav .nav-item{position:relative}}@media (min-width:75.25rem){.navbar-expand-xl .navbar-nav{margin-left:-.75rem}.navbar-expand-xl .navbar-nav .nav-item{position:relative}}.navbar-side{margin-left:auto;padding-left:1.5rem}.navbar-side>*{margin-left:1rem}.navbar-heading{display:none}.navbar-brand{padding:0}.navbar-brand-logo{height:2rem}.navbar-brand-logo-small{display:none}.navbar-light{background:#fff}.navbar-light::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.navbar-light::-webkit-scrollbar-thumb{border-radius:5px;background:#dee1e7}.navbar-light::-webkit-scrollbar-corner{background:0 0}.navbar-light:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#cbcfd6}.navbar-dark{background:#354052;color:#fff;box-shadow:0 0 0 1px #2f3949}.navbar-dark::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.navbar-dark::-webkit-scrollbar-thumb{border-radius:5px;background:0 0}.navbar-dark::-webkit-scrollbar-corner{background:0 0}.navbar-dark:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#5d6675}.navbar-dark .text-muted{color:inherit!important;opacity:.6}.navbar-dark .navbar-brand-autodark{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}.navbar-dark .form-control{border-color:transparent;background:#3b475b;color:#fff}.navbar:not(.navbar-vertical) .d-none-navbar-horizontal,.navbar:not(.navbar-vertical)~* .d-none-navbar-vertical-narrow{display:none!important}.navbar:not(.navbar-vertical) .dropdown-menu{margin-right:-.25rem}.navbar-vertical.navbar-expand-xs{position:fixed;left:0;top:0;bottom:0;width:15.625rem;z-index:1030;min-height:auto;align-items:start;overflow:auto}.navbar-vertical.navbar-expand-xs>[class*=container]{flex-direction:column;align-items:stretch;padding-left:0;padding-right:0;min-height:100%}.navbar-vertical.navbar-expand-xs~.content,.navbar-vertical.navbar-expand-xs~.navbar{margin-left:15.625rem}.navbar-vertical.navbar-expand-xs~.content [class*=container],.navbar-vertical.navbar-expand-xs~.navbar [class*=container]{padding-left:1.25rem;padding-right:1.25rem}.navbar-vertical.navbar-expand-xs .d-none-navbar-vertical,.navbar-vertical.navbar-expand-xs~* .d-none-navbar-vertical{display:none!important}.navbar-vertical.navbar-expand-xs .navbar-brand{display:flex;width:100%;margin:0;text-align:center;height:3.5rem;align-items:center;justify-content:center}.navbar-vertical.navbar-expand-xs .navbar-heading{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97;display:block;margin-bottom:.5rem}.navbar-vertical.navbar-expand-xs .navbar-collapse{flex-direction:column;text-align:left;align-items:normal;padding:1rem 1rem}.navbar-vertical.navbar-expand-xs .navbar-nav{flex-direction:column;align-items:normal;margin-left:-1rem;margin-right:-1rem}.navbar-vertical.navbar-expand-xs .navbar-nav .nav-link{min-height:0;height:2.5rem;padding-left:1rem;padding-right:1rem;justify-content:start}.navbar-vertical.navbar-expand-xs .navbar-nav .nav-item.active{font-weight:600}.navbar-vertical.navbar-expand-xs .navbar-nav .nav-item.active>.nav-link:before{left:0;right:auto;top:0;bottom:0;height:auto;width:2px}.navbar-vertical.navbar-expand-xs .navbar-side{margin-left:0;margin-top:auto;padding-left:0;padding-top:1rem}.navbar-vertical.navbar-expand-xs .navbar-side>*{margin-left:0;margin-top:1rem}.navbar-vertical.navbar-expand-xs.navbar-right{left:auto;right:0}.navbar-vertical.navbar-expand-xs.navbar-right~.content,.navbar-vertical.navbar-expand-xs.navbar-right~.navbar{margin-left:0;margin-right:15.625rem}.navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .d-none-navbar-vertical-wide,.navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow)~* .d-none-navbar-vertical-wide{display:none!important}.navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .nav-item.active>.dropdown-menu{display:block}.navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .dropdown-menu{position:static;background:inherit;border:0;box-shadow:none;padding:0;margin:0;color:inherit;-moz-columns:1;columns:1}.navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .dropdown-menu:after,.navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .dropdown-menu:before{content:none}.navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .dropdown-item{padding-left:2.5rem;opacity:.6;color:inherit;background:0 0}.navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .dropdown-item.active{font-weight:600;opacity:1}.navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .dropdown-item:hover{opacity:1}.navbar-vertical.navbar-expand-xs:not(.navbar-vertical-narrow) .dropdown-toggle:after{margin-left:auto}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow{width:4rem;overflow:visible}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .d-none-navbar-vertical-narrow,.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow~* .d-none-navbar-vertical-narrow{display:none!important}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .navbar-nav{margin-top:0}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .nav-link{height:3rem}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .nav-link-title,.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .navbar-heading{display:none}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .nav-link-icon{margin:0 auto;font-size:1.125rem;width:1.125rem;height:1.125rem}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .navbar-brand-logo-large{display:none}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .navbar-brand-logo-small{display:inline-block}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow~.content,.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow~.navbar{margin-left:4rem}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .dropdown-toggle:after{content:none}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .dropdown-menu{left:100%;top:0;margin:0 0 0 -4px}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .dropdown-menu:after,.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .dropdown-menu:before{content:none}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow .dropdown-menu.dropdown-menu-right{top:auto;bottom:0;right:auto}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow.navbar-right~.content,.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow.navbar-right~.navbar{margin-left:0;margin-right:4rem}.navbar-vertical.navbar-expand-xs.navbar-vertical-narrow.navbar-right .dropdown-menu{margin:0 -4px 0 0;left:auto;right:100%}.navbar-vertical.navbar-expand-xs .d-none-navbar-horizontal,.navbar-vertical.navbar-expand-xs~* .d-none-navbar-vertical-narrow{display:none!important}.navbar-vertical.navbar-expand-xs .dropdown-menu{margin-right:-.25rem}@media (min-width:33rem){.navbar-vertical.navbar-expand-sm{position:fixed;left:0;top:0;bottom:0;width:15.625rem;z-index:1030;min-height:auto;align-items:start;overflow:auto}.navbar-vertical.navbar-expand-sm>[class*=container]{flex-direction:column;align-items:stretch;padding-left:0;padding-right:0;min-height:100%}.navbar-vertical.navbar-expand-sm~.content,.navbar-vertical.navbar-expand-sm~.navbar{margin-left:15.625rem}.navbar-vertical.navbar-expand-sm~.content [class*=container],.navbar-vertical.navbar-expand-sm~.navbar [class*=container]{padding-left:1.25rem;padding-right:1.25rem}.navbar-vertical.navbar-expand-sm .d-none-navbar-vertical,.navbar-vertical.navbar-expand-sm~* .d-none-navbar-vertical{display:none!important}.navbar-vertical.navbar-expand-sm .navbar-brand{display:flex;width:100%;margin:0;text-align:center;height:3.5rem;align-items:center;justify-content:center}.navbar-vertical.navbar-expand-sm .navbar-heading{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97;display:block;margin-bottom:.5rem}.navbar-vertical.navbar-expand-sm .navbar-collapse{flex-direction:column;text-align:left;align-items:normal;padding:1rem 1rem}.navbar-vertical.navbar-expand-sm .navbar-nav{flex-direction:column;align-items:normal;margin-left:-1rem;margin-right:-1rem}.navbar-vertical.navbar-expand-sm .navbar-nav .nav-link{min-height:0;height:2.5rem;padding-left:1rem;padding-right:1rem;justify-content:start}.navbar-vertical.navbar-expand-sm .navbar-nav .nav-item.active{font-weight:600}.navbar-vertical.navbar-expand-sm .navbar-nav .nav-item.active>.nav-link:before{left:0;right:auto;top:0;bottom:0;height:auto;width:2px}.navbar-vertical.navbar-expand-sm .navbar-side{margin-left:0;margin-top:auto;padding-left:0;padding-top:1rem}.navbar-vertical.navbar-expand-sm .navbar-side>*{margin-left:0;margin-top:1rem}.navbar-vertical.navbar-expand-sm.navbar-right{left:auto;right:0}.navbar-vertical.navbar-expand-sm.navbar-right~.content,.navbar-vertical.navbar-expand-sm.navbar-right~.navbar{margin-left:0;margin-right:15.625rem}.navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .d-none-navbar-vertical-wide,.navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow)~* .d-none-navbar-vertical-wide{display:none!important}.navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .nav-item.active>.dropdown-menu{display:block}.navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .dropdown-menu{position:static;background:inherit;border:0;box-shadow:none;padding:0;margin:0;color:inherit;-moz-columns:1;columns:1}.navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .dropdown-menu:after,.navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .dropdown-menu:before{content:none}.navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .dropdown-item{padding-left:2.5rem;opacity:.6;color:inherit;background:0 0}.navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .dropdown-item.active{font-weight:600;opacity:1}.navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .dropdown-item:hover{opacity:1}.navbar-vertical.navbar-expand-sm:not(.navbar-vertical-narrow) .dropdown-toggle:after{margin-left:auto}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow{width:4rem;overflow:visible}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .d-none-navbar-vertical-narrow,.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow~* .d-none-navbar-vertical-narrow{display:none!important}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .navbar-nav{margin-top:0}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .nav-link{height:3rem}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .nav-link-title,.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .navbar-heading{display:none}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .nav-link-icon{margin:0 auto;font-size:1.125rem;width:1.125rem;height:1.125rem}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .navbar-brand-logo-large{display:none}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .navbar-brand-logo-small{display:inline-block}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow~.content,.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow~.navbar{margin-left:4rem}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .dropdown-toggle:after{content:none}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .dropdown-menu{left:100%;top:0;margin:0 0 0 -4px}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .dropdown-menu:after,.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .dropdown-menu:before{content:none}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow .dropdown-menu.dropdown-menu-right{top:auto;bottom:0;right:auto}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow.navbar-right~.content,.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow.navbar-right~.navbar{margin-left:0;margin-right:4rem}.navbar-vertical.navbar-expand-sm.navbar-vertical-narrow.navbar-right .dropdown-menu{margin:0 -4px 0 0;left:auto;right:100%}}@media (max-width:32.98rem){.navbar-vertical.navbar-expand-sm .d-none-navbar-horizontal,.navbar-vertical.navbar-expand-sm~* .d-none-navbar-vertical-narrow{display:none!important}.navbar-vertical.navbar-expand-sm .dropdown-menu{margin-right:-.25rem}}@media (min-width:48rem){.navbar-vertical.navbar-expand-md{position:fixed;left:0;top:0;bottom:0;width:15.625rem;z-index:1030;min-height:auto;align-items:start;overflow:auto}.navbar-vertical.navbar-expand-md>[class*=container]{flex-direction:column;align-items:stretch;padding-left:0;padding-right:0;min-height:100%}.navbar-vertical.navbar-expand-md~.content,.navbar-vertical.navbar-expand-md~.navbar{margin-left:15.625rem}.navbar-vertical.navbar-expand-md~.content [class*=container],.navbar-vertical.navbar-expand-md~.navbar [class*=container]{padding-left:1.25rem;padding-right:1.25rem}.navbar-vertical.navbar-expand-md .d-none-navbar-vertical,.navbar-vertical.navbar-expand-md~* .d-none-navbar-vertical{display:none!important}.navbar-vertical.navbar-expand-md .navbar-brand{display:flex;width:100%;margin:0;text-align:center;height:3.5rem;align-items:center;justify-content:center}.navbar-vertical.navbar-expand-md .navbar-heading{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97;display:block;margin-bottom:.5rem}.navbar-vertical.navbar-expand-md .navbar-collapse{flex-direction:column;text-align:left;align-items:normal;padding:1rem 1rem}.navbar-vertical.navbar-expand-md .navbar-nav{flex-direction:column;align-items:normal;margin-left:-1rem;margin-right:-1rem}.navbar-vertical.navbar-expand-md .navbar-nav .nav-link{min-height:0;height:2.5rem;padding-left:1rem;padding-right:1rem;justify-content:start}.navbar-vertical.navbar-expand-md .navbar-nav .nav-item.active{font-weight:600}.navbar-vertical.navbar-expand-md .navbar-nav .nav-item.active>.nav-link:before{left:0;right:auto;top:0;bottom:0;height:auto;width:2px}.navbar-vertical.navbar-expand-md .navbar-side{margin-left:0;margin-top:auto;padding-left:0;padding-top:1rem}.navbar-vertical.navbar-expand-md .navbar-side>*{margin-left:0;margin-top:1rem}.navbar-vertical.navbar-expand-md.navbar-right{left:auto;right:0}.navbar-vertical.navbar-expand-md.navbar-right~.content,.navbar-vertical.navbar-expand-md.navbar-right~.navbar{margin-left:0;margin-right:15.625rem}.navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .d-none-navbar-vertical-wide,.navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow)~* .d-none-navbar-vertical-wide{display:none!important}.navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .nav-item.active>.dropdown-menu{display:block}.navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .dropdown-menu{position:static;background:inherit;border:0;box-shadow:none;padding:0;margin:0;color:inherit;-moz-columns:1;columns:1}.navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .dropdown-menu:after,.navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .dropdown-menu:before{content:none}.navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .dropdown-item{padding-left:2.5rem;opacity:.6;color:inherit;background:0 0}.navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .dropdown-item.active{font-weight:600;opacity:1}.navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .dropdown-item:hover{opacity:1}.navbar-vertical.navbar-expand-md:not(.navbar-vertical-narrow) .dropdown-toggle:after{margin-left:auto}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow{width:4rem;overflow:visible}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow .d-none-navbar-vertical-narrow,.navbar-vertical.navbar-expand-md.navbar-vertical-narrow~* .d-none-navbar-vertical-narrow{display:none!important}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow .navbar-nav{margin-top:0}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow .nav-link{height:3rem}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow .nav-link-title,.navbar-vertical.navbar-expand-md.navbar-vertical-narrow .navbar-heading{display:none}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow .nav-link-icon{margin:0 auto;font-size:1.125rem;width:1.125rem;height:1.125rem}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow .navbar-brand-logo-large{display:none}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow .navbar-brand-logo-small{display:inline-block}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow~.content,.navbar-vertical.navbar-expand-md.navbar-vertical-narrow~.navbar{margin-left:4rem}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow .dropdown-toggle:after{content:none}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow .dropdown-menu{left:100%;top:0;margin:0 0 0 -4px}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow .dropdown-menu:after,.navbar-vertical.navbar-expand-md.navbar-vertical-narrow .dropdown-menu:before{content:none}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow .dropdown-menu.dropdown-menu-right{top:auto;bottom:0;right:auto}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow.navbar-right~.content,.navbar-vertical.navbar-expand-md.navbar-vertical-narrow.navbar-right~.navbar{margin-left:0;margin-right:4rem}.navbar-vertical.navbar-expand-md.navbar-vertical-narrow.navbar-right .dropdown-menu{margin:0 -4px 0 0;left:auto;right:100%}}@media (max-width:47.98rem){.navbar-vertical.navbar-expand-md .d-none-navbar-horizontal,.navbar-vertical.navbar-expand-md~* .d-none-navbar-vertical-narrow{display:none!important}.navbar-vertical.navbar-expand-md .dropdown-menu{margin-right:-.25rem}}@media (min-width:64rem){.navbar-vertical.navbar-expand-lg{position:fixed;left:0;top:0;bottom:0;width:15.625rem;z-index:1030;min-height:auto;align-items:start;overflow:auto}.navbar-vertical.navbar-expand-lg>[class*=container]{flex-direction:column;align-items:stretch;padding-left:0;padding-right:0;min-height:100%}.navbar-vertical.navbar-expand-lg~.content,.navbar-vertical.navbar-expand-lg~.navbar{margin-left:15.625rem}.navbar-vertical.navbar-expand-lg~.content [class*=container],.navbar-vertical.navbar-expand-lg~.navbar [class*=container]{padding-left:1.25rem;padding-right:1.25rem}.navbar-vertical.navbar-expand-lg .d-none-navbar-vertical,.navbar-vertical.navbar-expand-lg~* .d-none-navbar-vertical{display:none!important}.navbar-vertical.navbar-expand-lg .navbar-brand{display:flex;width:100%;margin:0;text-align:center;height:3.5rem;align-items:center;justify-content:center}.navbar-vertical.navbar-expand-lg .navbar-heading{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97;display:block;margin-bottom:.5rem}.navbar-vertical.navbar-expand-lg .navbar-collapse{flex-direction:column;text-align:left;align-items:normal;padding:1rem 1rem}.navbar-vertical.navbar-expand-lg .navbar-nav{flex-direction:column;align-items:normal;margin-left:-1rem;margin-right:-1rem}.navbar-vertical.navbar-expand-lg .navbar-nav .nav-link{min-height:0;height:2.5rem;padding-left:1rem;padding-right:1rem;justify-content:start}.navbar-vertical.navbar-expand-lg .navbar-nav .nav-item.active{font-weight:600}.navbar-vertical.navbar-expand-lg .navbar-nav .nav-item.active>.nav-link:before{left:0;right:auto;top:0;bottom:0;height:auto;width:2px}.navbar-vertical.navbar-expand-lg .navbar-side{margin-left:0;margin-top:auto;padding-left:0;padding-top:1rem}.navbar-vertical.navbar-expand-lg .navbar-side>*{margin-left:0;margin-top:1rem}.navbar-vertical.navbar-expand-lg.navbar-right{left:auto;right:0}.navbar-vertical.navbar-expand-lg.navbar-right~.content,.navbar-vertical.navbar-expand-lg.navbar-right~.navbar{margin-left:0;margin-right:15.625rem}.navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .d-none-navbar-vertical-wide,.navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow)~* .d-none-navbar-vertical-wide{display:none!important}.navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .nav-item.active>.dropdown-menu{display:block}.navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .dropdown-menu{position:static;background:inherit;border:0;box-shadow:none;padding:0;margin:0;color:inherit;-moz-columns:1;columns:1}.navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .dropdown-menu:after,.navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .dropdown-menu:before{content:none}.navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .dropdown-item{padding-left:2.5rem;opacity:.6;color:inherit;background:0 0}.navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .dropdown-item.active{font-weight:600;opacity:1}.navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .dropdown-item:hover{opacity:1}.navbar-vertical.navbar-expand-lg:not(.navbar-vertical-narrow) .dropdown-toggle:after{margin-left:auto}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow{width:4rem;overflow:visible}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .d-none-navbar-vertical-narrow,.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow~* .d-none-navbar-vertical-narrow{display:none!important}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .navbar-nav{margin-top:0}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .nav-link{height:3rem}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .nav-link-title,.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .navbar-heading{display:none}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .nav-link-icon{margin:0 auto;font-size:1.125rem;width:1.125rem;height:1.125rem}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .navbar-brand-logo-large{display:none}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .navbar-brand-logo-small{display:inline-block}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow~.content,.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow~.navbar{margin-left:4rem}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .dropdown-toggle:after{content:none}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .dropdown-menu{left:100%;top:0;margin:0 0 0 -4px}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .dropdown-menu:after,.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .dropdown-menu:before{content:none}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow .dropdown-menu.dropdown-menu-right{top:auto;bottom:0;right:auto}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow.navbar-right~.content,.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow.navbar-right~.navbar{margin-left:0;margin-right:4rem}.navbar-vertical.navbar-expand-lg.navbar-vertical-narrow.navbar-right .dropdown-menu{margin:0 -4px 0 0;left:auto;right:100%}}@media (max-width:63.98rem){.navbar-vertical.navbar-expand-lg .d-none-navbar-horizontal,.navbar-vertical.navbar-expand-lg~* .d-none-navbar-vertical-narrow{display:none!important}.navbar-vertical.navbar-expand-lg .dropdown-menu{margin-right:-.25rem}}@media (min-width:75.25rem){.navbar-vertical.navbar-expand-xl{position:fixed;left:0;top:0;bottom:0;width:15.625rem;z-index:1030;min-height:auto;align-items:start;overflow:auto}.navbar-vertical.navbar-expand-xl>[class*=container]{flex-direction:column;align-items:stretch;padding-left:0;padding-right:0;min-height:100%}.navbar-vertical.navbar-expand-xl~.content,.navbar-vertical.navbar-expand-xl~.navbar{margin-left:15.625rem}.navbar-vertical.navbar-expand-xl~.content [class*=container],.navbar-vertical.navbar-expand-xl~.navbar [class*=container]{padding-left:1.25rem;padding-right:1.25rem}.navbar-vertical.navbar-expand-xl .d-none-navbar-vertical,.navbar-vertical.navbar-expand-xl~* .d-none-navbar-vertical{display:none!important}.navbar-vertical.navbar-expand-xl .navbar-brand{display:flex;width:100%;margin:0;text-align:center;height:3.5rem;align-items:center;justify-content:center}.navbar-vertical.navbar-expand-xl .navbar-heading{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97;display:block;margin-bottom:.5rem}.navbar-vertical.navbar-expand-xl .navbar-collapse{flex-direction:column;text-align:left;align-items:normal;padding:1rem 1rem}.navbar-vertical.navbar-expand-xl .navbar-nav{flex-direction:column;align-items:normal;margin-left:-1rem;margin-right:-1rem}.navbar-vertical.navbar-expand-xl .navbar-nav .nav-link{min-height:0;height:2.5rem;padding-left:1rem;padding-right:1rem;justify-content:start}.navbar-vertical.navbar-expand-xl .navbar-nav .nav-item.active{font-weight:600}.navbar-vertical.navbar-expand-xl .navbar-nav .nav-item.active>.nav-link:before{left:0;right:auto;top:0;bottom:0;height:auto;width:2px}.navbar-vertical.navbar-expand-xl .navbar-side{margin-left:0;margin-top:auto;padding-left:0;padding-top:1rem}.navbar-vertical.navbar-expand-xl .navbar-side>*{margin-left:0;margin-top:1rem}.navbar-vertical.navbar-expand-xl.navbar-right{left:auto;right:0}.navbar-vertical.navbar-expand-xl.navbar-right~.content,.navbar-vertical.navbar-expand-xl.navbar-right~.navbar{margin-left:0;margin-right:15.625rem}.navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .d-none-navbar-vertical-wide,.navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow)~* .d-none-navbar-vertical-wide{display:none!important}.navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .nav-item.active>.dropdown-menu{display:block}.navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .dropdown-menu{position:static;background:inherit;border:0;box-shadow:none;padding:0;margin:0;color:inherit;-moz-columns:1;columns:1}.navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .dropdown-menu:after,.navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .dropdown-menu:before{content:none}.navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .dropdown-item{padding-left:2.5rem;opacity:.6;color:inherit;background:0 0}.navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .dropdown-item.active{font-weight:600;opacity:1}.navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .dropdown-item:hover{opacity:1}.navbar-vertical.navbar-expand-xl:not(.navbar-vertical-narrow) .dropdown-toggle:after{margin-left:auto}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow{width:4rem;overflow:visible}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .d-none-navbar-vertical-narrow,.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow~* .d-none-navbar-vertical-narrow{display:none!important}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .navbar-nav{margin-top:0}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .nav-link{height:3rem}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .nav-link-title,.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .navbar-heading{display:none}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .nav-link-icon{margin:0 auto;font-size:1.125rem;width:1.125rem;height:1.125rem}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .navbar-brand-logo-large{display:none}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .navbar-brand-logo-small{display:inline-block}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow~.content,.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow~.navbar{margin-left:4rem}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .dropdown-toggle:after{content:none}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .dropdown-menu{left:100%;top:0;margin:0 0 0 -4px}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .dropdown-menu:after,.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .dropdown-menu:before{content:none}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow .dropdown-menu.dropdown-menu-right{top:auto;bottom:0;right:auto}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow.navbar-right~.content,.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow.navbar-right~.navbar{margin-left:0;margin-right:4rem}.navbar-vertical.navbar-expand-xl.navbar-vertical-narrow.navbar-right .dropdown-menu{margin:0 -4px 0 0;left:auto;right:100%}}@media (max-width:75.23rem){.navbar-vertical.navbar-expand-xl .d-none-navbar-horizontal,.navbar-vertical.navbar-expand-xl~* .d-none-navbar-vertical-narrow{display:none!important}.navbar-vertical.navbar-expand-xl .dropdown-menu{margin-right:-.25rem}}.navbar-secondary{order:-1}.page{display:flex;flex-direction:column;position:relative;min-height:100vh}.content{padding-top:1.25rem;padding-bottom:1.25rem;flex:1;display:flex;flex-direction:column}.content>[class*=container]{flex:1}@media print{.content{margin:0!important}}.page-header{display:flex;align-items:center;min-height:2.25rem;margin:0 0 1.25rem}.page-header>*{flex:1}.page-pretitle{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97}.page-title{margin:0;font-size:1.375rem;font-weight:400;line-height:1;color:inherit}.footer{border-top:1px solid rgba(134,140,151,.24);background-color:#fff;padding:1rem 0;color:#868c97;margin-bottom:-1.25rem;margin-top:1.25rem}.footer-transparent{margin-top:0;background-color:transparent;border-top:0}.alert-avatar{padding-left:3.75rem}.alert-avatar .avatar{position:absolute;top:.5rem;left:.75rem}.alert a{display:inline-block;height:100%;vertical-align:middle}.alert a .icon{height:100%}.avatar{position:relative;width:2rem;height:2rem;font-size:.8125rem;display:inline-flex;align-items:center;justify-content:center;font-weight:400;color:#868c97;text-align:center;text-transform:uppercase;vertical-align:bottom;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:#f1f3f8 no-repeat center/cover;border-radius:50%}.avatar .icon{font-size:1.25em}.avatar .badge{position:absolute;right:0;bottom:0;border-radius:50%;box-shadow:0 0 0 2px #fff}a.avatar{cursor:pointer}.avatar-sm{width:1.25rem;height:1.25rem;font-size:.625rem;line-height:1.25rem}.avatar-md{width:2.5rem;height:2.5rem;font-size:1.25rem;line-height:2.5rem}.avatar-lg{width:4.5rem;height:4.5rem;font-size:2.25rem;line-height:4.5rem}.avatar-xl{width:6rem;height:6rem;font-size:3rem;line-height:6rem}.avatar-list{display:inline-flex;padding:0;margin:0 0 -.5rem}.avatar-list .avatar{margin-bottom:.5rem}.avatar-list .avatar:not(:last-child){margin-right:.5rem}.avatar-list a.avatar:hover{z-index:1}.avatar-list-stacked .avatar{margin-right:-.5rem!important;box-shadow:0 0 0 2px #fff}.card-footer .avatar-list-stacked .avatar{box-shadow:0 0 0 2px rgba(53,64,82,.024)}.avatar-upload{width:4rem;height:4rem;border:1px dashed rgba(134,140,151,.24);background:#fff;flex-direction:column;transition:.3s color,.3s background-color}.avatar-upload svg{width:1.5rem;height:1.5rem;stroke-width:1}.avatar-upload:hover{border-color:#206bc4;color:#206bc4;text-decoration:none}.avatar-upload-text{font-size:.6875rem;line-height:1;margin-top:.25rem}.badge{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;display:inline-flex;justify-content:center;padding:0 .5em;line-height:1.75em;background:#cbcfd6;overflow:hidden;vertical-align:text-bottom}a.badge{color:#fff}.badge:empty{display:inline-block;width:.5rem;height:.5rem;min-width:0;min-height:auto;padding:0;border-radius:50%}.badge-up{position:absolute;top:25%;right:0;min-width:1.75em;min-height:1.75em;padding:0 .25rem;line-height:1rem;background-clip:padding-box;transform:translate(0,-50%)}.badge-outline{background-color:transparent;border:1px solid currentColor}.badge-pill{border-radius:100px;min-width:1.75em}.badge-avatar{box-sizing:content-box;width:1.75em;margin:0 .5em 0 -.5em;color:rgba(245,247,251,.24);background:rgba(53,64,82,.24) no-repeat center/cover;vertical-align:text-bottom}.badge-addon{padding:0 .5rem;margin:0 -.5em 0 .5em;min-width:1.75em;background:rgba(53,64,82,.24);text-align:center;color:#fff;text-decoration:none}.breadcrumb{padding:0;margin:0;background:0 0}.breadcrumb-item.active a{color:inherit;pointer-events:none}.breadcrumb-dots .breadcrumb-item+.breadcrumb-item:before{content:"·"}.breadcrumb-arrows .breadcrumb-item+.breadcrumb-item:before{content:"›"}.breadcrumb-bullets .breadcrumb-item+.breadcrumb-item:before{content:"•"}.breadcrumb-alternate a{color:#868c97}.breadcrumb-alternate .breadcrumb-item.active{color:inherit}.btn{font-weight:600;display:inline-flex;align-items:center;justify-content:center}.btn:not([class^=btn-outline]):not([class*=" btn-outline"]):not([class^=btn-ghost]):not([class*=" btn-ghost"]):not(.btn-secondary){text-shadow:1px 1px 0 rgba(0,0,0,.02)}.btn:not([class^=btn-outline]):not([class*=" btn-outline"]):not([class^=btn-ghost]):not([class*=" btn-ghost"]):not(:focus):not(.focus){box-shadow:0 1px 3px 0 rgba(0,0,0,.05),inset 0 2px 0 -1px rgba(255,255,255,.1)}.btn:not([class^=btn-outline]):not([class*=" btn-outline"]):not([class^=btn-ghost]):not([class*=" btn-ghost"]) svg.icon{-webkit-filter:drop-shadow(1px 1px 0 rgba(0, 0, 0, .05));filter:drop-shadow(1px 1px 0 rgba(0, 0, 0, .05))}.btn.disabled,.btn:disabled{cursor:not-allowed}.btn .icon{margin:0 .25em 0 -.25em;font-size:1.2em;vertical-align:sub}.btn .avatar{width:1.25rem;height:1.25rem;vertical-align:text-top;margin:0 .5em 0 -.25em}.btn .icon-right{margin:0 -.25em 0 .5em}.btn svg.icon{width:1em;height:1em;stroke-width:1.75}.btn-secondary{color:#354052;background-color:#fff;border-color:rgba(134,140,151,.24);background-image:linear-gradient(-180deg,rgba(53,64,82,0),rgba(53,64,82,.04) 100%);box-shadow:none!important}.btn-secondary:hover{color:#354052;background-color:#ececec;border-color:rgba(108,114,126,.24)}.btn-secondary.focus,.btn-secondary:focus{color:#354052;background-color:#ececec;border-color:rgba(108,114,126,.24);box-shadow:0 0 0 .2rem rgba(88,97,112,.5)}.btn-secondary.active,.btn-secondary:active,.show>.btn-secondary.dropdown-toggle{color:#354052;background-color:#e6e6e6;border-color:rgba(102,108,119,.24)}.btn-secondary.active:focus,.btn-secondary:active:focus,.show>.btn-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(88,97,112,.5)}.btn-secondary.disabled,.btn-secondary:disabled{color:#354052;background-color:#fff;border-color:rgba(134,140,151,.24)}.btn-secondary.active{background:#206bc4;color:#fff;z-index:3!important}.btn-group-lg>.btn svg.icon,.btn-lg svg.icon{stroke-width:2}.btn-pill{padding-right:1.5em;padding-left:1.5em;border-radius:10rem}.btn-pill[class*=btn-icon]{padding:.375rem 15px}.btn-icon{min-width:calc(2.125rem + 2px)}.btn-group-sm>.btn-icon.btn,.btn-icon.btn-sm{min-width:calc(1.4416667rem + 2px)}.btn-icon .icon{margin:0 -1em}.btn-link{box-shadow:none!important}.btn-square{border-radius:0}.btn-list{display:flex;flex-wrap:wrap;margin-bottom:-.5rem!important;margin-right:-.5rem;line-height:1}.btn-list>.btn,.btn-list>.dropdown{margin:0 .5rem .5rem 0}.btn-list>.btn-block{flex:1;white-space:nowrap}.btn-options{display:flex;align-items:center;padding:0;color:#868c97;cursor:pointer;background:0 0;border:none}.btn-options:focus{outline:0}.btn-options .icon{width:1rem;height:1rem}.btn-floating{position:fixed;z-index:1030;bottom:1.5rem;right:1.5rem;border-radius:50%}.btn-loading{position:relative;color:transparent!important;text-shadow:none!important;pointer-events:none}.btn-loading:after{content:'';display:inline-block;vertical-align:text-bottom;border:1px solid currentColor;border-right-color:transparent;border-radius:50%;color:#fff;position:absolute;width:1rem;height:1rem;left:calc(50% - .5rem);top:calc(50% - .5rem);-webkit-animation:spinner-border .75s linear infinite;animation:spinner-border .75s linear infinite}.calendar{display:block;font-size:.8203125rem;border:1px solid rgba(134,140,151,.24);border-radius:3px}.calendar-nav{display:flex;align-items:center}.calendar-title{flex:1;text-align:center}.calendar-body,.calendar-header{display:flex;flex-wrap:wrap;justify-content:flex-start;padding:.5rem 0}.calendar-header{color:#868c97}.calendar-date{flex:0 0 14.2857143%;max-width:14.2857143%;padding:.2rem;text-align:center;border:0}.calendar-date.next-month,.calendar-date.prev-month{opacity:.25}.calendar-date .date-item{position:relative;display:inline-block;width:1.4rem;height:1.4rem;line-height:1.4rem;color:#66758c;text-align:center;text-decoration:none;white-space:nowrap;vertical-align:middle;cursor:pointer;background:0 0;border:1px solid transparent;border-radius:50%;outline:0;transition:background .3s,border .3s,box-shadow .32s,color .3s}.calendar-date .date-item:hover{color:#206bc4;text-decoration:none;background:#fefeff;border-color:rgba(134,140,151,.24)}.calendar-date .date-today{color:#206bc4;border-color:rgba(134,140,151,.24)}.calendar-range{position:relative}.calendar-range:before{position:absolute;top:50%;right:0;left:0;height:1.4rem;content:"";background:rgba(32,107,196,.1);transform:translateY(-50%)}.calendar-range.range-end .date-item,.calendar-range.range-start .date-item{color:#fff;background:#206bc4;border-color:#206bc4}.calendar-range.range-start:before{left:50%}.calendar-range.range-end:before{right:50%}.card{margin-bottom:1.25rem;box-shadow:rgba(53,64,82,.04) 0 2px 4px 0}@media (max-width:75.23rem){.card{margin-bottom:.75rem}}@media print{.card{border:none;box-shadow:none}}a.card{color:inherit;transition:.3s box-shadow}a.card:hover{text-decoration:none;box-shadow:rgba(53,64,82,.16) 0 2px 16px 0}.card-group{margin-bottom:1.5rem}.card-inactive{pointer-events:none;box-shadow:none}.card-inactive .card-body{opacity:.64}.card-active{position:relative;background-color:rgba(32,107,196,.03)}.card-active:before{position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;content:"";border:1px solid #206bc4;border-radius:inherit}.card-link{color:inherit}.card-link:hover{color:inherit;text-decoration:none;box-shadow:0 1px 6px 0 rgba(0,0,0,.08)}.card-btn{padding:1.25rem 1.25rem;text-align:center;background:rgba(32,107,196,.02);transition:.3s background}.card-btn:hover{text-decoration:none;background:rgba(32,107,196,.06)}.card-stacked{position:relative}.card-stacked:after{position:absolute;top:-5px;right:5px;left:5px;height:5px;content:"";background:#fff;border:1px solid rgba(134,140,151,.24);border-radius:3px 3px 0 0}.card-cover{position:relative;padding:1.25rem 1.25rem;background:#666 no-repeat center/cover}.card-cover:before{position:absolute;top:0;right:0;bottom:0;left:0;content:"";background:rgba(53,64,82,.24)}.card-cover:first-child,.card-cover:first-child:before{border-radius:3px 3px 0 0}.card-cover-blurred:before{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.card-actions{margin-left:auto;font-size:.8125rem}.card-actions a{text-decoration:none}.card-header{display:flex;align-items:center;background:0 0}.card-header-tabs{flex:1;margin:-1.25rem -1.25rem}.card-header-pills{flex:1}.card-footer{color:#868c97}.card-progress{height:.25rem}.card-progress:last-child{border-radius:0 0 2px 2px}.card-progress:first-child{border-radius:2px 2px 0 0}.card-meta{color:#868c97}.card-title{display:block;margin:0 0 1rem;font-size:1.125rem;font-weight:600;line-height:1.3333333}a.card-title:hover{color:inherit}.card-header .card-title{margin:.125rem 0}.card-subtitle{margin-top:-1.25rem;margin-bottom:.625rem;font-size:87.5%;color:#868c97}.card-body>:last-child{margin-bottom:0}.card-sm>.card-body{padding:.75rem}@media (min-width:48rem){.card-md>.card-body{padding:1.5rem}}@media (min-width:48rem){.card-lg>.card-body{padding:2rem}}@media (min-width:64rem){.card-lg>.card-body{padding:4rem}}@media print{.card-body{padding:0}}.card-body+.card-body{border-top:1px solid rgba(134,140,151,.24)}.card-body-scrollable{overflow:auto}.card-options{top:1.5rem;right:.75rem;display:flex;margin-left:auto}.card-options-link{display:inline-block;min-width:1rem;margin-left:.25rem;color:#868c97}.card-drop{line-height:1;color:#868c97}.card-drop .icon{width:1.5rem;height:1.5rem;stroke-width:1}.card-status-top{position:absolute;top:0;right:0;left:0;height:2px;border-radius:3px 3px 0 0}.card-status-left{position:absolute;right:auto;bottom:0;width:2px;height:100%;border-radius:3px 0 0 3px}.card-status-bottom{position:absolute;top:initial;bottom:0;width:100%;height:2px;border-radius:0 0 3px 3px}.card-table{margin-bottom:0}.card-table tr td:first-child,.card-table tr th:first-child{padding-left:1.25rem}.card-table tr td:last-child,.card-table tr th:last-child{padding-right:1.25rem}.card-table thead tr:first-child td,.card-table thead tr:first-child th{border-top:0}.card-table tbody tr:last-child td,.card-table tbody tr:last-child th{border-bottom:0}.card-body+.card-table{border-top:1px solid rgba(134,140,151,.24)}.card-code{padding:0}.card-code .highlight{margin:0;border:0}.card-code pre{margin:0;color:#fff;text-shadow:none;background:0 0}.card-chart{position:relative;z-index:1;height:3.5rem}.card-avatar{box-shadow:0 0 0 .5rem #fff}.card-body+.card-list-group{border-top:1px solid rgba(134,140,151,.24)}.card-list-group .list-group-item{padding-right:1.25rem;padding-left:1.25rem;border-right:0;border-left:0;border-radius:0}.card-list-group .list-group-item:last-child{border-bottom:0}.card-list-group .list-group-item:first-child{border-top:0}.card-tabs{margin-bottom:1.5rem}.card-tabs .nav-tabs{position:relative;z-index:1000;border-bottom:0}.card-tabs .nav-tabs .nav-link{background:rgba(53,64,82,.024);border:1px solid rgba(134,140,151,.24);border-bottom:0}.card-tabs .nav-tabs .nav-link.active,.card-tabs .nav-tabs .nav-link:active,.card-tabs .nav-tabs .nav-link:hover{border-color:rgba(134,140,151,.24)}.card-tabs .nav-tabs .nav-link.active{background:#fff}.card-tabs .nav-tabs .nav-item:not(:first-child) .nav-link{border-top-left-radius:0}.card-tabs .nav-tabs .nav-item:not(:last-child) .nav-link{border-top-right-radius:0}.card-tabs .nav-tabs .nav-item+.nav-item{margin-left:-1px}.card-tabs .nav-tabs-bottom{margin-bottom:0}.card-tabs .nav-tabs-bottom .nav-item{margin-top:-1px;margin-bottom:0}.card-tabs .nav-tabs-bottom .nav-item .nav-link{border-top-width:0;border-bottom:1px solid rgba(134,140,151,.24);border-top-left-radius:0;border-top-right-radius:0}.card-tabs .card{margin:0;border-top-left-radius:0}.close:focus{outline:0;color:#354052}.dropdown-menu{box-shadow:0 .5rem 1rem rgba(0,0,0,.15);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:0}.dropdown-menu.card{padding:0;min-width:25rem;display:none}.dropdown-menu.card.show{display:flex}.dropdown-item{min-width:14rem;color:inherit;display:flex;align-items:center;margin:0}.dropdown-item-icon{width:1rem;font-size:1rem;margin-right:.5rem;opacity:.64;text-align:center;stroke-width:2px}.dropdown-header{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97;padding-bottom:.25rem;pointer-events:none}.dropdown-menu-scrollable{height:auto;max-height:12rem;overflow-x:hidden}.dropdown-menu-columns{-moz-columns:2;columns:2;-moz-column-gap:0;column-gap:0}.dropdown-menu-columns .dropdown-item{display:inline-flex;min-width:10rem}.dropdown-menu-columns-2{-moz-columns:2;columns:2}.dropdown-menu-columns-3{-moz-columns:3;columns:3}.dropdown-menu-columns-4{-moz-columns:4;columns:4}.dropdown-menu-arrow{margin-top:.5rem}.dropdown-menu-arrow:before{content:"";position:absolute;top:-4px;left:12px;display:block;background:inherit;width:14px;height:14px;transform:rotate(45deg);transform-origin:center;border:1px solid;border-color:inherit;z-index:-1;clip:rect(0,9px,9px,0)}.dropdown-menu-arrow.dropdown-menu-right:before{right:12px;left:auto}.dropright>.dropdown-menu{margin-top:calc(-.5rem - 1px);margin-left:0}.dropright .dropdown-toggle:after{margin-left:auto}.dropdown-menu-card{padding:0}.dropdown-menu-card>.card{margin:0;border:0;box-shadow:none}.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:1rem;text-align:center}@media (min-width:48rem){.empty{padding:3rem}}.empty .empty-icon{margin:0 0 1rem;font-size:2rem;font-weight:400;line-height:1}.empty .empty-subtitle,.empty .empty-title{margin:0 0 .5rem}.empty .empty-action{margin-top:1.5rem}.empty-bordered{border:1px solid rgba(134,140,151,.24);border-radius:3px}.col-separator{border-left:1px solid rgba(134,140,151,.24)}.container-tight{width:100%;padding-right:1rem;padding-left:1rem;margin-right:auto;margin-left:auto;max-width:30rem}.container-narrow{width:100%;padding-right:1rem;padding-left:1rem;margin-right:auto;margin-left:auto;max-width:45rem}.row-0{margin-right:0;margin-left:0}.row-0>.col,.row-0>[class*=col-]{padding-right:0;padding-left:0}.row-0 .card{margin-bottom:0}.row-sm{margin-right:-.375rem;margin-left:-.375rem}.row-sm>.col,.row-sm>[class*=col-]{padding-right:.375rem;padding-left:.375rem}.row-sm .card{margin-bottom:.75rem}.row-md{margin-right:-1.5rem;margin-left:-1.5rem}.row-md>.col,.row-md>[class*=col-]{padding-right:1.5rem;padding-left:1.5rem}.row-md .card{margin-bottom:3rem}.row-lg{margin-right:-3rem;margin-left:-3rem}.row-lg>.col,.row-lg>[class*=col-]{padding-right:3rem;padding-left:3rem}.row-lg .card{margin-bottom:6rem}.row-deck>.col,.row-deck>[class*=col-]{display:flex;align-items:stretch}.row-deck>.col .card,.row-deck>[class*=col-] .card{flex:1 1 auto}.row-cards{margin-left:-.625rem;margin-right:-.625rem}.row-cards .row-cards{flex:1}.row-cards>*{padding-left:.625rem;padding-right:.625rem}@media (max-width:75.23rem){.row-cards{margin-left:-.375rem;margin-right:-.375rem}.row-cards>*{padding-left:.375rem;padding-right:.375rem}}.icon{width:1em;height:1em;font-size:1em;vertical-align:-.2em}.icon:hover{text-decoration:none}.icon-filled{fill:currentColor}.icon-thin{stroke-width:1.5}.icon-md{font-size:1.5rem}.icon-lg{font-size:2rem}.icon-xl{font-size:4rem}.icons-list{display:flex;flex-wrap:wrap;padding:0;margin:0 -2px -1px 0;list-style:none}.icons-list>li{flex:1 0 4rem}.icons-list-wrap{overflow:hidden}.icons-list-item{display:flex;align-items:center;justify-content:center;height:4rem;text-align:center;border-right:1px solid rgba(134,140,151,.24);border-bottom:1px solid rgba(134,140,151,.24)}.icons-list-item i{font-size:1.25rem}textarea[cols]{height:auto}.form-label{font-size:.9375rem;font-weight:600;display:block;margin-bottom:.5rem}.form-label-description{float:right;font-weight:400;color:#868c97;line-height:1.8285714;font-size:87.5%}.form-hint{display:block;font-size:87.5%;color:#868c97;line-height:1.3333334}.form-hint:last-child{margin-bottom:0}.form-hint+.form-control{margin-top:.25rem}.form-label+.form-hint{margin-top:-.5rem}.form-control+.form-hint,.form-select+.form-hint{margin-top:.25rem}.form-control:-webkit-autofill{box-shadow:0 0 0 1000px #fff inset}.form-control.disabled,.form-control:disabled{color:#868c97;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-control[size]{width:auto}.form-control-light{background-color:#f5f7fb;border-color:transparent}.form-control-rounded{border-radius:10rem}.form-control-flush{padding:0;background:0 0!important;border-color:transparent!important;resize:none;box-shadow:none!important;line-height:inherit}.form-footer{margin-top:2rem}.form-fieldset{padding:1rem;margin-bottom:1rem;background:rgba(53,64,82,.024);border:1px solid rgba(134,140,151,.24);border-radius:3px}.form-required{color:#fa4654}.form-help{display:inline-flex;font-weight:600;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;font-size:.75rem;color:#868c97;text-align:center;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:rgba(145,152,163,.1);border-radius:50%;transition:.3s background-color,.3s color}.form-help:hover,.form-help[aria-describedby]{color:#fff;background:#206bc4}.form-check{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-check.form-check-highlight .form-check-input:not(:checked)~.form-check-label{opacity:.64}.form-check-input{margin-top:.25rem}.form-switch .form-check-input{transition:.3s background-color,.3s background-position}.form-check-label{line-height:1.3333334;padding:.125rem 0}.form-check-description{color:#868c97;font-size:.8125rem;line-height:1.3333334}.input-group-prepend .input-group-text{border-right:0}.input-group-append .input-group-text{border-left:0}.input-group-link{font-size:.8125rem}.input-group-flat:focus-within{box-shadow:0 0 0 .2rem rgba(32,107,196,.25);border-radius:3px}.input-group-flat:focus-within .form-control,.input-group-flat:focus-within .input-group-text{border-color:#7aade9!important}.input-group-flat .form-control:focus{border-color:rgba(134,140,151,.24);box-shadow:none}.input-group-flat .form-control:not(:last-child){border-right:0}.input-group-flat .form-control:not(:first-child){border-left:0}.input-group-flat .input-group-prepend{margin-right:0;border-right:0;background:#fff}.input-group-flat .input-group-prepend .input-group-text{padding-right:0}.input-group-flat .input-group-append{margin-left:0}.input-group-flat .input-group-append:not(:last-child) .input-group-text{border-right:0}.input-group-flat .input-group-append .input-group-text{padding-left:0}.input-group-flat .input-group-text{background:0 0;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-file-button{margin-left:0;border-left:0}.input-icon{position:relative}.input-icon .form-control:not(:last-child){padding-right:2.5rem}.input-icon .form-control:not(:first-child){padding-left:2.5rem}.input-icon-addon{position:absolute;top:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;min-width:2.5rem;color:#868c97;pointer-events:none;font-size:1.2em}.input-icon-addon:last-child{right:0;left:auto}.form-colorinput{position:relative;display:inline-block;margin:0;line-height:1;cursor:pointer}.form-colorinput-input{position:absolute;z-index:-1;opacity:0}.form-colorinput-color{display:block;width:1.5rem;height:1.5rem;color:#fff;border:1px solid rgba(134,140,151,.24);border-radius:3px;box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}.form-colorinput-color:before{position:absolute;top:0;left:0;width:100%;height:100%;content:"";background:no-repeat center center/1rem;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6' transform='scale%28.8%29' transform-origin='50% 50%'/%3e%3c/svg%3e");opacity:0;transition:.3s opacity}.form-colorinput-input:checked~.form-colorinput-color:before{opacity:1}.form-colorinput-input:focus~.form-colorinput-color{border-color:#206bc4;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.form-colorinput-light .form-colorinput-color:before{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23354052' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6' transform='scale%28.8%29' transform-origin='50% 50%'/%3e%3c/svg%3e")}.form-imagecheck{position:relative;margin:0;cursor:pointer}.form-imagecheck-input{position:absolute;z-index:-1;opacity:0}.form-imagecheck-figure{position:relative;display:block;margin:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid rgba(134,140,151,.24);border-radius:3px}.form-imagecheck-input:focus~.form-imagecheck-figure{border-color:#206bc4;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.form-imagecheck-input:checked~.form-imagecheck-figure{border-color:rgba(134,140,151,.24)}.form-imagecheck-figure:before{position:absolute;top:.25rem;left:.25rem;z-index:1;display:block;width:1rem;height:1rem;color:#fff;pointer-events:none;content:"";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:#fff;border:1px solid rgba(134,140,151,.24);border-radius:3px;transition:.3s opacity}.form-imagecheck-input:checked~.form-imagecheck-figure:before{background-color:#206bc4;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6' transform='scale%28.8%29' transform-origin='50% 50%'/%3e%3c/svg%3e");background-repeat:repeat;background-position:center center;background-size:1rem;border-color:rgba(134,140,151,.24)}.form-imagecheck-image{max-width:100%;display:block;opacity:.64;transition:.3s opacity}.form-imagecheck-image:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.form-imagecheck-image:last-child{border-bottom-right-radius:2px;border-bottom-left-radius:2px}.form-imagecheck-input:checked~.form-imagecheck-figure .form-imagecheck-image,.form-imagecheck-input:focus~.form-imagecheck-figure .form-imagecheck-image,.form-imagecheck:hover .form-imagecheck-image{opacity:1}.form-imagecheck-caption{padding:.25rem;font-size:.8203125rem;color:#868c97;text-align:center;transition:.3s color}.form-imagecheck-input:checked~.form-imagecheck-figure .form-imagecheck-caption,.form-imagecheck-input:focus~.form-imagecheck-figure .form-imagecheck-caption,.form-imagecheck:hover .form-imagecheck-caption{color:#354052}.form-selectgroup{display:inline-flex;margin:0 -.5rem -.5rem 0;flex-wrap:wrap}.form-selectgroup .form-selectgroup-item{margin:0 .5rem .5rem 0}.form-selectgroup-vertical{flex-direction:column}.form-selectgroup-item{display:block;position:relative}.form-selectgroup-input{position:absolute;top:0;left:0;z-index:-1;opacity:0}.form-selectgroup-box{position:relative;display:block;min-width:calc(1.4666667em + .75rem + 2px);padding:.375rem .75rem;font-size:.9375rem;line-height:1.4666667;color:#868c97;background:#fff;text-align:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid rgba(134,140,151,.24);border-radius:3px;transition:border-color .3s,background .3s,color .3s}.form-selectgroup-box .icon:only-child{margin:0 -.25rem}.form-selectgroup-box:hover{color:#354052}.form-selectgroup-check{display:inline-block;width:1rem;height:1rem;border:1px solid rgba(134,140,151,.24);vertical-align:middle}.form-selectgroup-input[type=checkbox]+.form-selectgroup-box .form-selectgroup-check{border-radius:3px}.form-selectgroup-input[type=radio]+.form-selectgroup-box .form-selectgroup-check{border-radius:50%}.form-selectgroup-input:checked+.form-selectgroup-box .form-selectgroup-check{background-color:#206bc4;background-repeat:repeat;background-position:center center;background-size:1rem;border-color:rgba(134,140,151,.24)}.form-selectgroup-input[type=checkbox]:checked+.form-selectgroup-box .form-selectgroup-check{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6' transform='scale%28.8%29' transform-origin='50% 50%'/%3e%3c/svg%3e")}.form-selectgroup-input[type=radio]:checked+.form-selectgroup-box .form-selectgroup-check{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3' fill='%23ffffff' cx='8' cy='8' /%3e%3c/svg%3e")}.form-selectgroup-input:checked+.form-selectgroup-box{z-index:1;color:#206bc4;background:rgba(32,107,196,.04);border-color:#7aade9;box-shadow:0 1px 1px 0 rgba(32,107,196,.2)}.form-selectgroup-input:focus+.form-selectgroup-box{z-index:2;color:#206bc4;border-color:#7aade9;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.form-selectgroup-box-content{line-height:1.3333334}.form-selectgroup-boxes .form-selectgroup-box{text-align:left;padding:1.25rem 1.25rem;color:inherit}.form-selectgroup-boxes .form-selectgroup-input:checked+.form-selectgroup-box{color:inherit}.form-selectgroup-boxes .form-selectgroup-input:checked+.form-selectgroup-box .form-selectgroup-title{color:#206bc4}.form-selectgroup-boxes .form-selectgroup-input:checked+.form-selectgroup-box .form-selectgroup-box-content{opacity:1}.form-selectgroup-pills{flex-wrap:wrap;align-items:flex-start}.form-selectgroup-pills .form-selectgroup-item{flex-grow:0}.form-selectgroup-pills .form-selectgroup-box{border-radius:50px}.form-control-color::-webkit-color-swatch{border:none}[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.form-control.is-invalid-lite,.form-control.is-valid-lite{border-color:rgba(134,140,151,.24)}.legend{display:inline-block;background:#e9ecf1;width:.75em;height:.75em;border-radius:3px}.list-item{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word}.list-item-actions{margin-left:auto}.list-bordered .list-item,.list-row .list-item{border-top:1px solid rgba(134,140,151,.24);margin-top:-1px}.list-bordered .list-item:first-child,.list-row .list-item:first-child{border-top:none}.list-hoverable .list-item-actions{opacity:0;transition:.3s opacity}.list-hoverable .list-item-actions.show,.list-hoverable .list-item:hover .list-item-actions{opacity:1}.list-row .list-item{flex-direction:row;align-items:center;padding:.5rem .625rem}.list-row .list-item>*{padding-left:.625rem;padding-right:.625rem}.list-timeline{position:relative;padding:0;margin:0;list-style:none}.list-timeline>li{position:relative;margin-bottom:1.5rem}.list-timeline>li:last-child{margin-bottom:0}.list-timeline-time{float:right;margin-left:1rem;color:#868c97}.list-timeline-icon{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;color:#fff;text-align:center;background:#868c97;border-radius:50%}.list-timeline-icon .icon{width:1rem;height:1rem}.list-timeline-title{margin:0;font-weight:600}.list-timeline-content{margin-left:3.5rem}@media screen and (min-width:768px){.list-timeline:not(.list-timeline-simple):before{position:absolute;top:0;bottom:0;left:calc(7.5rem + 2px);z-index:1;display:block;width:4px;content:"";background-color:#f5f7fb}.list-timeline:not(.list-timeline-simple)>li{z-index:2;min-height:40px}.list-timeline:not(.list-timeline-simple) .list-timeline-time{position:absolute;top:.5rem;left:0;width:5.5rem;margin:0;text-align:right}.list-timeline:not(.list-timeline-simple) .list-timeline-icon{top:0;left:6.5rem}.list-timeline:not(.list-timeline-simple) .list-timeline-content{padding:.625rem 0 0 10rem;margin:0}}.list-group-transparent{margin:0 -.75rem}.list-group-transparent .list-group-item{background:0 0;border:0;border-radius:3px}.list-group-transparent .list-group-item .icon{color:#868c97}.list-group-transparent .list-group-item.active{font-weight:600;color:inherit;background:rgba(32,107,196,.06)}.list-group-transparent .list-group-item.active .icon{color:inherit}.list-separated-item{padding:1rem 0}.list-separated-item:first-child{padding-top:0}.list-separated-item:last-child{padding-bottom:0}.list-separated-item+.list-separated-item{border-top:1px solid rgba(134,140,151,.24)}.list-inline-dots .list-inline-item+.list-inline-item:before{content:'· ';margin-right:.5rem}@-webkit-keyframes loader{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes loader{from{transform:rotate(0)}to{transform:rotate(360deg)}}.loader{position:relative;display:block;width:2.5rem;height:2.5rem;color:#206bc4;vertical-align:middle}.loader:after{position:absolute;top:0;left:0;width:100%;height:100%;content:"";border:1px solid;border-color:transparent;border-top-color:currentColor;border-left-color:currentColor;border-radius:50%;-webkit-animation:loader .6s linear;animation:loader .6s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.dimmer{position:relative}.dimmer .loader{position:absolute;top:50%;right:0;left:0;display:none;margin:0 auto;transform:translateY(-50%)}.dimmer.active .loader{display:block}.dimmer.active .dimmer-content{pointer-events:none;opacity:.1}.modal-content .close{position:absolute;top:0;right:0;font-size:1rem;width:3.5rem;height:3.5rem;margin:0;padding:0;z-index:10}.modal-body::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.modal-body::-webkit-scrollbar-thumb{border-radius:5px;background:#dee1e7}.modal-body::-webkit-scrollbar-corner{background:0 0}.modal-body:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#cbcfd6}.modal-body .modal-title{margin-bottom:1rem}.modal-body+.modal-body{border-top:1px solid rgba(134,140,151,.12)}.modal-header{align-items:center;min-height:3.5rem;background:#fff;padding:0 3.5rem 0 1.5rem}.modal-title{font-size:1.125rem;font-weight:600;line-height:1.3333333}.modal-footer{padding-top:0;padding-bottom:.75rem}.modal-blur{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-full-width{max-width:none;margin:0 .5rem}.nav-tabs .icon{color:#868c97}.nav-tabs .nav-link{padding:.75rem 1.25rem;line-height:20px;color:#868c97;cursor:pointer;background:0 0;border:none;border-bottom:1px solid transparent;transition:.3s color,.3s border-color}.nav-tabs .nav-link:hover{color:#354052;border-color:transparent}.nav-tabs .nav-link.disabled{color:rgba(134,140,151,.2)}.nav-tabs .nav-link.active{color:#354052;background:inherit;border-color:transparent;border-bottom-color:#206bc4}.nav-tabs-alt .nav-link{font-size:13px;font-weight:600;text-transform:uppercase}.nav-icon{line-height:1;margin-right:.25rem}.nav-icon .icon{display:block;stroke-width:1.5}.nav-link{display:flex;align-items:center;transition:.3s color}.stars{display:inline-flex;color:#dee1e7;font-size:.8125rem}.stars .star:not(:first-child){margin-left:.25rem}.pagination{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.page-link{min-width:1.5rem;border-radius:3px}.page-link:hover{background:0 0}.page-item{text-align:center}.page-item.page-next,.page-item.page-prev{flex:0 0 50%;text-align:left}.page-item.page-next{margin-left:auto;text-align:right}.page-item-subtitle{margin-bottom:2px;font-size:12px;color:#868c97;text-transform:uppercase}.page-item.disabled .page-item-subtitle{color:rgba(134,140,151,.5)}.page-item-title{font-size:1.125rem;font-weight:400;color:#354052}.page-link:hover .page-item-title{color:#206bc4}.page-item.disabled .page-item-title{color:rgba(134,140,151,.5)}@-webkit-keyframes progress-indeterminate{0%{right:100%;left:-35%}100%,60%{right:-90%;left:100%}}@keyframes progress-indeterminate{0%{right:100%;left:-35%}100%,60%{right:-90%;left:100%}}.progress{position:relative;width:100%;line-height:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress::-webkit-progress-bar{background:#f5f7fb}.progress::-webkit-progress-value{background-color:#206bc4}.progress::-moz-progress-bar{background-color:#206bc4}.progress::-ms-fill{background-color:#206bc4;border:none}.progress-sm{height:.25rem}.progress-bar{height:100%}.progress-bar-indeterminate:after,.progress-bar-indeterminate:before{position:absolute;top:0;bottom:0;left:0;content:"";background-color:inherit;will-change:left,right}.progress-bar-indeterminate:before{-webkit-animation:progress-indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite;animation:progress-indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite}.ribbon{position:absolute;top:.75rem;right:-.25rem;z-index:1;padding:.25rem .75rem;font-size:.6875rem;font-weight:600;line-height:1.5rem;color:#fff;text-align:center;text-transform:uppercase;background:#206bc4;border-color:#206bc4}.ribbon:before{position:absolute;right:0;bottom:100%;width:0;height:0;content:"";-webkit-filter:brightness(70%);filter:brightness(70%);border:.125rem solid;border-color:inherit;border-top-color:transparent;border-right-color:transparent}.ribbon.bg-blue{border-color:#206bc4}.ribbon.bg-blue-lt{border-color:#d2e1f3!important}.ribbon.bg-azure{border-color:#45aaf2}.ribbon.bg-azure-lt{border-color:#daeefc!important}.ribbon.bg-indigo{border-color:#6574cd}.ribbon.bg-indigo-lt{border-color:#e0e3f5!important}.ribbon.bg-purple{border-color:#a55eea}.ribbon.bg-purple-lt{border-color:#eddffb!important}.ribbon.bg-pink{border-color:#f66d9b}.ribbon.bg-pink-lt{border-color:#fde2eb!important}.ribbon.bg-red{border-color:#fa4654}.ribbon.bg-red-lt{border-color:#fedadd!important}.ribbon.bg-orange{border-color:#ff922b}.ribbon.bg-orange-lt{border-color:#ffe9d5!important}.ribbon.bg-yellow{border-color:#fab005}.ribbon.bg-yellow-lt{border-color:#feefcd!important}.ribbon.bg-lime{border-color:#94d82d}.ribbon.bg-lime-lt{border-color:#eaf7d5!important}.ribbon.bg-green{border-color:#5eba00}.ribbon.bg-green-lt{border-color:#dff1cc!important}.ribbon.bg-teal{border-color:#2bcbba}.ribbon.bg-teal-lt{border-color:#d5f5f1!important}.ribbon.bg-cyan{border-color:#17a2b8}.ribbon.bg-cyan-lt{border-color:#d1ecf1!important}.ribbon.bg-white{border-color:#fff}.ribbon.bg-white-lt{border-color:#fff!important}.ribbon.bg-gray{border-color:#a8aeb7}.ribbon.bg-gray-lt{border-color:#eeeff1!important}.ribbon.bg-gray-dark{border-color:#545d6d}.ribbon.bg-gray-dark-lt{border-color:#dddfe2!important}.ribbon.bg-dark{border-color:#354052}.ribbon.bg-dark-lt{border-color:#d7d9dc!important}.ribbon .icon{width:1rem;height:1rem}.ribbon-top{top:-.25rem;right:.75rem;width:2rem;padding:.25rem 0}.ribbon-top:before{top:0;right:100%;bottom:auto;border-color:inherit;border-top-color:transparent;border-left-color:transparent}.ribbon-top.ribbon-left{right:auto;left:.75rem}.ribbon-top.ribbon-left:before{top:0;right:100%;left:auto}.ribbon-left{right:auto;left:-.25rem}.ribbon-left:before{top:auto;bottom:100%;left:0;border-color:inherit;border-top-color:transparent;border-left-color:transparent}.ribbon-bottom{top:auto;bottom:.75rem}.ribbon-bookmark{padding-left:.25rem}.ribbon-bookmark:after{position:absolute;top:0;right:100%;display:block;width:0;height:0;content:"";border:1rem solid;border-color:inherit;border-right-width:0;border-left-color:transparent;border-left-width:.5rem}.ribbon-bookmark.ribbon-left{padding-right:.5rem;padding-left:.5rem}.ribbon-bookmark.ribbon-left:after{right:auto;left:100%;border-right-color:transparent;border-right-width:.5rem;border-left-width:0}.ribbon-bookmark.ribbon-top{padding-right:0;padding-bottom:.25rem;padding-left:0}.ribbon-bookmark.ribbon-top:after{top:100%;right:0;left:0;border-color:inherit;border-width:1rem;border-top-width:0;border-bottom-color:transparent;border-bottom-width:.5rem}.stamp{display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;height:2.5rem;line-height:2.5rem;padding:0 .25rem;font-size:.9375rem;font-weight:600;color:#868c97;text-align:center;background:#f1f3f8;border-radius:3px}.stamp .icon{font-size:1.25rem;vertical-align:middle}.steps{display:flex;flex-wrap:nowrap;width:100%;padding:0;margin:2rem 0;list-style:none}.steps .step-item{padding-top:calc(.5rem + 4px)}.steps .step-item:after{top:calc(.25rem + 2px);height:2px}.steps .step-item:before{width:.5rem;height:.5rem}.steps .step-item:after,.steps .step-item:before{color:#fff;background:#206bc4}.steps .step-item.active:before{color:inherit;border-color:#206bc4}.steps-blue .step-item:after,.steps-blue .step-item:before{color:#fff;background:#206bc4}.steps-blue .step-item.active:before{color:inherit;border-color:#206bc4}.steps-azure .step-item:after,.steps-azure .step-item:before{color:#fff;background:#45aaf2}.steps-azure .step-item.active:before{color:inherit;border-color:#45aaf2}.steps-indigo .step-item:after,.steps-indigo .step-item:before{color:#fff;background:#6574cd}.steps-indigo .step-item.active:before{color:inherit;border-color:#6574cd}.steps-purple .step-item:after,.steps-purple .step-item:before{color:#fff;background:#a55eea}.steps-purple .step-item.active:before{color:inherit;border-color:#a55eea}.steps-pink .step-item:after,.steps-pink .step-item:before{color:#fff;background:#f66d9b}.steps-pink .step-item.active:before{color:inherit;border-color:#f66d9b}.steps-red .step-item:after,.steps-red .step-item:before{color:#fff;background:#fa4654}.steps-red .step-item.active:before{color:inherit;border-color:#fa4654}.steps-orange .step-item:after,.steps-orange .step-item:before{color:#fff;background:#ff922b}.steps-orange .step-item.active:before{color:inherit;border-color:#ff922b}.steps-yellow .step-item:after,.steps-yellow .step-item:before{color:#fff;background:#fab005}.steps-yellow .step-item.active:before{color:inherit;border-color:#fab005}.steps-lime .step-item:after,.steps-lime .step-item:before{color:#fff;background:#94d82d}.steps-lime .step-item.active:before{color:inherit;border-color:#94d82d}.steps-green .step-item:after,.steps-green .step-item:before{color:#fff;background:#5eba00}.steps-green .step-item.active:before{color:inherit;border-color:#5eba00}.steps-teal .step-item:after,.steps-teal .step-item:before{color:#fff;background:#2bcbba}.steps-teal .step-item.active:before{color:inherit;border-color:#2bcbba}.steps-cyan .step-item:after,.steps-cyan .step-item:before{color:#fff;background:#17a2b8}.steps-cyan .step-item.active:before{color:inherit;border-color:#17a2b8}.steps-white .step-item:after,.steps-white .step-item:before{color:#fff;background:#fff}.steps-white .step-item.active:before{color:inherit;border-color:#fff}.steps-gray .step-item:after,.steps-gray .step-item:before{color:#fff;background:#a8aeb7}.steps-gray .step-item.active:before{color:inherit;border-color:#a8aeb7}.steps-gray-dark .step-item:after,.steps-gray-dark .step-item:before{color:#fff;background:#545d6d}.steps-gray-dark .step-item.active:before{color:inherit;border-color:#545d6d}.steps-dark .step-item:after,.steps-dark .step-item:before{color:#fff;background:#354052}.steps-dark .step-item.active:before{color:inherit;border-color:#354052}.step-item{position:relative;flex:1 1 0;min-height:1rem;margin-top:0;color:inherit;text-align:center;cursor:default}a.step-item{cursor:pointer}a.step-item:hover{color:inherit}.step-item:not(:first-child):after{position:absolute;left:-50%;width:100%;content:"";transform:translateY(-50%)}.step-item:before{position:absolute;top:0;left:50%;z-index:1;box-sizing:content-box;display:block;content:"";border:2px solid #fff;border-radius:50%;transform:translateX(-50%)}.step-item.active{font-weight:600}.step-item.active:before{background:#fff}.step-item.active~.step-item{color:#868c97}.step-item.active~.step-item:after,.step-item.active~.step-item:before{background:#f3f5f5}.step-item.active~.step-item:before{color:#868c97!important}.steps-counter{counter-reset:steps}.steps-counter .step-item{padding-top:calc(1.5rem + 4px)}.steps-counter .step-item:after{top:calc(.75rem + 2px);height:2px}.steps-counter .step-item:before{width:1.5rem;height:1.5rem}.steps-counter .step-item{counter-increment:steps}.steps-counter .step-item:before{font-size:1rem;line-height:1.5rem;content:counter(steps)}.steps-counter .step-item.active~.step-item:before{background:#fff}.markdown>table,.table{color:inherit}.markdown>table thead th,.table thead th{background:rgba(53,64,82,.024);border-width:1px;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97;padding-top:.5rem;padding-bottom:.5rem}@media print{.markdown>table thead th,.table thead th{background:0 0}}.markdown>table th,.table th{color:#868c97}.table-nowrap td,.table-nowrap th{white-space:nowrap}.table-md td,.table-md th{padding:.5rem}.table-vcenter td,.table-vcenter th{vertical-align:middle}.table-center td,.table-center th{text-align:center}.td-truncate{max-width:1px;width:100%}@media (max-width:32.98rem){.table-mobile{display:block}.table-mobile thead{display:none}.table-mobile tbody,.table-mobile tr{display:flex;flex-direction:column}.table-mobile td{display:block;padding:.5rem!important;border:none;color:#354052!important}.table-mobile td[data-label]:before{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97;content:attr(data-label);display:block}.table-mobile tr{border-bottom:1px solid rgba(134,140,151,.24)}.table-mobile .btn{display:block}}@media (max-width:47.98rem){.table-mobile-sm{display:block}.table-mobile-sm thead{display:none}.table-mobile-sm tbody,.table-mobile-sm tr{display:flex;flex-direction:column}.table-mobile-sm td{display:block;padding:.5rem!important;border:none;color:#354052!important}.table-mobile-sm td[data-label]:before{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97;content:attr(data-label);display:block}.table-mobile-sm tr{border-bottom:1px solid rgba(134,140,151,.24)}.table-mobile-sm .btn{display:block}}@media (max-width:63.98rem){.table-mobile-md{display:block}.table-mobile-md thead{display:none}.table-mobile-md tbody,.table-mobile-md tr{display:flex;flex-direction:column}.table-mobile-md td{display:block;padding:.5rem!important;border:none;color:#354052!important}.table-mobile-md td[data-label]:before{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97;content:attr(data-label);display:block}.table-mobile-md tr{border-bottom:1px solid rgba(134,140,151,.24)}.table-mobile-md .btn{display:block}}@media (max-width:75.23rem){.table-mobile-lg{display:block}.table-mobile-lg thead{display:none}.table-mobile-lg tbody,.table-mobile-lg tr{display:flex;flex-direction:column}.table-mobile-lg td{display:block;padding:.5rem!important;border:none;color:#354052!important}.table-mobile-lg td[data-label]:before{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97;content:attr(data-label);display:block}.table-mobile-lg tr{border-bottom:1px solid rgba(134,140,151,.24)}.table-mobile-lg .btn{display:block}}.table-mobile-xl{display:block}.table-mobile-xl thead{display:none}.table-mobile-xl tbody,.table-mobile-xl tr{display:flex;flex-direction:column}.table-mobile-xl td{display:block;padding:.5rem!important;border:none;color:#354052!important}.table-mobile-xl td[data-label]:before{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97;content:attr(data-label);display:block}.table-mobile-xl tr{border-bottom:1px solid rgba(134,140,151,.24)}.table-mobile-xl .btn{display:block}.toast-header{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.toast button[data-dismiss=toast]{outline:0}.toolbar{display:flex;flex-wrap:nowrap;flex-shrink:0;margin:0 -.5rem}.toolbar>*{margin:0 .5rem}.hr-text{display:flex;align-items:center;margin:2rem 0;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97;height:1px}.hr-text:after,.hr-text:before{flex:1 1 auto;height:1px;background-color:currentColor;opacity:.1}.hr-text:before{content:"";margin-right:.5rem}.hr-text:after{content:"";margin-left:.5rem}.hr-text>:first-child{padding-right:.5rem;padding-left:0;color:#868c97}.hr-text.hr-text-left:before{content:none}.hr-text.hr-text-left>:first-child{padding-right:.5rem;padding-left:.5rem}.hr-text.hr-text-right:before{content:""}.hr-text.hr-text-right:after{content:none}.hr-text.hr-text-right>:first-child{padding-right:0;padding-left:.5rem}.card>.hr-text{margin:0}.hr-text-spaceless{margin:-.5rem 0}.lead{line-height:1.4}a{-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}.h1 a,.h2 a,.h3 a,.h4 a,.h5 a,.h6 a,h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:inherit}.strong,b,strong{font-weight:600}blockquote{padding-left:1rem;color:#868c97;border-left:2px solid rgba(134,140,151,.24)}blockquote p{margin-bottom:1rem}blockquote cite{display:block;text-align:right}blockquote cite:before{content:"— "}.hr,hr{margin:2rem 0}dl dd:last-child{margin-bottom:0}code{padding:2px 4px;background:rgba(32,107,196,.03);border:1px solid rgba(32,107,196,.064);border-radius:3px}pre{padding:1rem;overflow:auto;font-size:.6875rem;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;line-height:1.6;-moz-tab-size:3;-o-tab-size:3;tab-size:3;border-radius:3px;white-space:pre-wrap}pre code{padding:0;background:0 0;border:none;border-radius:0}img{max-width:100%}::-moz-selection{color:#fff;background-color:#307fdd}::selection{color:#fff;background-color:#307fdd}[class*=" link-"].disabled,[class^=link-].disabled{color:#a8aeb7;pointer-events:none}.subheader{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97}@media (min-width:48rem){.markdown{font-size:1rem}}.markdown>:first-child{margin-top:0}.markdown>:last-child,.markdown>:last-child .highlight{margin-bottom:0}.markdown>.h1,.markdown>.h2,.markdown>.h3,.markdown>.h4,.markdown>.h5,.markdown>.h6,.markdown>h1,.markdown>h2,.markdown>h3,.markdown>h4,.markdown>h5,.markdown>h6{margin-top:2rem}.markdown>.h2,.markdown>h2{margin-bottom:1rem}.markdown>.h2:before,.markdown>h2:before{content:'';padding-top:1em;margin-top:-1em;display:block}@media (min-width:48rem){.markdown>.hr,.markdown>hr{margin-top:3em;margin-bottom:3em}}.chart{display:block;min-height:10rem}.chart text{font-family:inherit}.chart-sm{height:2.5rem}.chart-lg{height:15rem}.chart-square{height:5.75rem}.chart-sparkline{position:relative;width:4rem;height:2.5rem;line-height:1}.chart-sparkline-square{width:2.5rem}.chart-sparkline-wide{width:6rem}.chart-sparkline-label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:.6875rem}.chart-sparkline-label .icon{width:1rem;height:1rem}.bg-white-overlay{color:#fff;background-color:rgba(245,247,251,.24)}.bg-dark-overlay{color:#fff;background-color:rgba(53,64,82,.24)}.bg-cover{background-repeat:no-repeat;background-size:cover;background-position:center}.bg-facebook{color:#fff!important;background:#3b5998!important}.text-facebook{color:#3b5998!important}.bg-twitter{color:#fff!important;background:#1da1f2!important}.text-twitter{color:#1da1f2!important}.bg-google{color:#fff!important;background:#dc4e41!important}.text-google{color:#dc4e41!important}.bg-youtube{color:#fff!important;background:red!important}.text-youtube{color:red!important}.bg-vimeo{color:#fff!important;background:#1ab7ea!important}.text-vimeo{color:#1ab7ea!important}.bg-dribbble{color:#fff!important;background:#ea4c89!important}.text-dribbble{color:#ea4c89!important}.bg-github{color:#fff!important;background:#181717!important}.text-github{color:#181717!important}.bg-instagram{color:#fff!important;background:#e4405f!important}.text-instagram{color:#e4405f!important}.bg-pinterest{color:#fff!important;background:#bd081c!important}.text-pinterest{color:#bd081c!important}.bg-vk{color:#fff!important;background:#6383a8!important}.text-vk{color:#6383a8!important}.bg-rss{color:#fff!important;background:orange!important}.text-rss{color:orange!important}.bg-flickr{color:#fff!important;background:#0063dc!important}.text-flickr{color:#0063dc!important}.bg-bitbucket{color:#fff!important;background:#0052cc!important}.text-bitbucket{color:#0052cc!important}.bg-tabler{color:#fff!important;background:#206bc4!important}.text-tabler{color:#206bc4!important}.bg-blue{background:#206bc4}.text-blue{color:#206bc4!important}.bg-blue-lt{color:#206bc4!important;background:#d2e1f3!important}.bg-azure{background:#45aaf2}.text-azure{color:#45aaf2!important}.bg-azure-lt{color:#45aaf2!important;background:#daeefc!important}.bg-indigo{background:#6574cd}.text-indigo{color:#6574cd!important}.bg-indigo-lt{color:#6574cd!important;background:#e0e3f5!important}.bg-purple{background:#a55eea}.text-purple{color:#a55eea!important}.bg-purple-lt{color:#a55eea!important;background:#eddffb!important}.bg-pink{background:#f66d9b}.text-pink{color:#f66d9b!important}.bg-pink-lt{color:#f66d9b!important;background:#fde2eb!important}.bg-red{background:#fa4654}.text-red{color:#fa4654!important}.bg-red-lt{color:#fa4654!important;background:#fedadd!important}.bg-orange{background:#ff922b}.text-orange{color:#ff922b!important}.bg-orange-lt{color:#ff922b!important;background:#ffe9d5!important}.bg-yellow{background:#fab005}.text-yellow{color:#fab005!important}.bg-yellow-lt{color:#fab005!important;background:#feefcd!important}.bg-lime{background:#94d82d}.text-lime{color:#94d82d!important}.bg-lime-lt{color:#94d82d!important;background:#eaf7d5!important}.bg-green{background:#5eba00}.text-green{color:#5eba00!important}.bg-green-lt{color:#5eba00!important;background:#dff1cc!important}.bg-teal{background:#2bcbba}.text-teal{color:#2bcbba!important}.bg-teal-lt{color:#2bcbba!important;background:#d5f5f1!important}.bg-cyan{background:#17a2b8}.text-cyan{color:#17a2b8!important}.bg-cyan-lt{color:#17a2b8!important;background:#d1ecf1!important}.bg-white{background:#fff}.text-white{color:#fff!important}.bg-white-lt{color:#fff!important;background:#fff!important}.bg-gray{background:#a8aeb7}.text-gray{color:#a8aeb7!important}.bg-gray-lt{color:#a8aeb7!important;background:#eeeff1!important}.bg-gray-dark{background:#545d6d}.text-gray-dark{color:#545d6d!important}.bg-gray-dark-lt{color:#545d6d!important;background:#dddfe2!important}.bg-dark{background:#354052}.text-dark{color:#354052!important}.bg-dark-lt{color:#354052!important;background:#d7d9dc!important}.scrollable{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.scrollable.hover{overflow-y:hidden}.scrollable.hover>*{margin-top:-1px}.scrollable.hover:active,.scrollable.hover:focus,.scrollable.hover:hover{overflow:visible;overflow-y:auto}.touch .scrollable{overflow-y:auto!important}.scroll-x,.scroll-y{overflow:hidden;-webkit-overflow-scrolling:touch}.scroll-y{overflow-y:auto}.scroll-x{overflow-x:auto}.no-scroll{overflow:hidden}.w-0{width:0!important}.h-0{height:0!important}.w-1{width:.25rem!important}.h-1{height:.25rem!important}.w-2{width:.5rem!important}.h-2{height:.5rem!important}.w-3{width:1rem!important}.h-3{height:1rem!important}.w-4{width:1.25rem!important}.h-4{height:1.25rem!important}.w-5{width:2rem!important}.h-5{height:2rem!important}.w-6{width:3rem!important}.h-6{height:3rem!important}.w-7{width:6rem!important}.h-7{height:6rem!important}.w-8{width:9rem!important}.h-8{height:9rem!important}.w-auto{width:auto!important}.h-auto{height:auto!important}.w-px{width:1px!important}.h-px{height:1px!important}.w-full{width:100%!important}.h-full{height:100%!important}.opacity-0{opacity:0!important}.opacity-5{opacity:.05!important}.opacity-10{opacity:.1!important}.opacity-15{opacity:.15!important}.opacity-20{opacity:.2!important}.opacity-25{opacity:.25!important}.opacity-30{opacity:.3!important}.opacity-35{opacity:.35!important}.opacity-40{opacity:.4!important}.opacity-45{opacity:.45!important}.opacity-50{opacity:.5!important}.opacity-55{opacity:.55!important}.opacity-60{opacity:.6!important}.opacity-65{opacity:.65!important}.opacity-70{opacity:.7!important}.opacity-75{opacity:.75!important}.opacity-80{opacity:.8!important}.opacity-85{opacity:.85!important}.opacity-90{opacity:.9!important}.opacity-95{opacity:.95!important}.opacity-100{opacity:1!important}.hover-shadow-sm:hover{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}.hover-shadow:hover{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}.hover-shadow-lg:hover{box-shadow:0 1rem 3rem rgba(0,0,0,.175)!important}.hover-shadow-none:hover{box-shadow:none!important}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.subpixel-antialiased{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}@media not print{.theme-dark{color:#f5f7fb;background-color:#2f3949}.theme-dark .card,.theme-dark .dropdown-menu,.theme-dark .footer,.theme-dark .modal-content,.theme-dark .modal-header,.theme-dark .navbar-light{background-color:#354052;color:inherit}.theme-dark .card{border-color:transparent}.theme-dark .btn-secondary,.theme-dark .form-file-button{color:#f5f7fb;background-color:#3b475b;border-color:rgba(134,140,151,.24);background-image:none}.theme-dark .btn-secondary:hover,.theme-dark .form-file-button:hover{color:#f5f7fb;background-color:rgba(53,64,82,0);border-color:rgba(134,140,151,.24)}.theme-dark .btn-secondary.focus,.theme-dark .btn-secondary:focus,.theme-dark .form-file-button.focus,.theme-dark .form-file-button:focus{color:#f5f7fb;background-color:rgba(53,64,82,0);border-color:rgba(134,140,151,.24);box-shadow:0 0 0 .2rem rgba(197,200,207,.5)}.show>.theme-dark .btn-secondary.dropdown-toggle,.show>.theme-dark .form-file-button.dropdown-toggle,.theme-dark .btn-secondary.active,.theme-dark .btn-secondary:active,.theme-dark .form-file-button.active,.theme-dark .form-file-button:active{color:#fff;background-color:#272f3c;border-color:rgba(102,108,119,.24)}.show>.theme-dark .btn-secondary.dropdown-toggle:focus,.show>.theme-dark .form-file-button.dropdown-toggle:focus,.theme-dark .btn-secondary.active:focus,.theme-dark .btn-secondary:active:focus,.theme-dark .form-file-button.active:focus,.theme-dark .form-file-button:active:focus{box-shadow:0 0 0 .2rem rgba(197,200,207,.5)}.theme-dark .btn-secondary.disabled,.theme-dark .btn-secondary:disabled,.theme-dark .form-file-button.disabled,.theme-dark .form-file-button:disabled{color:#f5f7fb;background-color:#3b475b;border-color:rgba(134,140,151,.24)}.theme-dark .flatpickr-input.flatpickr-input,.theme-dark .form-check-input:not(:checked),.theme-dark .form-control,.theme-dark .form-file-text,.theme-dark .form-imagecheck-figure:before,.theme-dark .form-select,.theme-dark .form-selectgroup-box,.theme-dark .form-selectgroup-check{background-color:#2f3949;color:#f5f7fb}.theme-dark .form-control-plaintext{color:#f5f7fb}.theme-dark .input-group-flat .input-group-text{background-color:#2f3949}.theme-dark .navbar{box-shadow:0 0 0 1px #2f3949}.theme-dark .highlight{background-color:#2f3949}.theme-dark .avatar{background-color:#3b475b}.theme-dark .avatar-list-stacked .avatar{box-shadow:0 0 0 2px #354052}.theme-dark .close,.theme-dark .markdown,.theme-dark .markdown>*{color:inherit}.theme-dark .apexcharts-text{fill:#f5f7fb}.theme-dark .apexcharts-legend-text{color:inherit!important}.theme-dark .navbar-brand-autodark{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}}@media not print and (prefers-color-scheme:dark){.theme-dark-auto{color:#f5f7fb;background-color:#2f3949}.theme-dark-auto .card,.theme-dark-auto .dropdown-menu,.theme-dark-auto .footer,.theme-dark-auto .modal-content,.theme-dark-auto .modal-header,.theme-dark-auto .navbar-light{background-color:#354052;color:inherit}.theme-dark-auto .card{border-color:transparent}.theme-dark-auto .btn-secondary,.theme-dark-auto .form-file-button{color:#f5f7fb;background-color:#3b475b;border-color:rgba(134,140,151,.24);background-image:none}.theme-dark-auto .btn-secondary:hover,.theme-dark-auto .form-file-button:hover{color:#f5f7fb;background-color:rgba(53,64,82,0);border-color:rgba(134,140,151,.24)}.theme-dark-auto .btn-secondary.focus,.theme-dark-auto .btn-secondary:focus,.theme-dark-auto .form-file-button.focus,.theme-dark-auto .form-file-button:focus{color:#f5f7fb;background-color:rgba(53,64,82,0);border-color:rgba(134,140,151,.24);box-shadow:0 0 0 .2rem rgba(197,200,207,.5)}.show>.theme-dark-auto .btn-secondary.dropdown-toggle,.show>.theme-dark-auto .form-file-button.dropdown-toggle,.theme-dark-auto .btn-secondary.active,.theme-dark-auto .btn-secondary:active,.theme-dark-auto .form-file-button.active,.theme-dark-auto .form-file-button:active{color:#fff;background-color:#272f3c;border-color:rgba(102,108,119,.24)}.show>.theme-dark-auto .btn-secondary.dropdown-toggle:focus,.show>.theme-dark-auto .form-file-button.dropdown-toggle:focus,.theme-dark-auto .btn-secondary.active:focus,.theme-dark-auto .btn-secondary:active:focus,.theme-dark-auto .form-file-button.active:focus,.theme-dark-auto .form-file-button:active:focus{box-shadow:0 0 0 .2rem rgba(197,200,207,.5)}.theme-dark-auto .btn-secondary.disabled,.theme-dark-auto .btn-secondary:disabled,.theme-dark-auto .form-file-button.disabled,.theme-dark-auto .form-file-button:disabled{color:#f5f7fb;background-color:#3b475b;border-color:rgba(134,140,151,.24)}.theme-dark-auto .flatpickr-input.flatpickr-input,.theme-dark-auto .form-check-input:not(:checked),.theme-dark-auto .form-control,.theme-dark-auto .form-file-text,.theme-dark-auto .form-imagecheck-figure:before,.theme-dark-auto .form-select,.theme-dark-auto .form-selectgroup-box,.theme-dark-auto .form-selectgroup-check{background-color:#2f3949;color:#f5f7fb}.theme-dark-auto .form-control-plaintext{color:#f5f7fb}.theme-dark-auto .input-group-flat .input-group-text{background-color:#2f3949}.theme-dark-auto .navbar{box-shadow:0 0 0 1px #2f3949}.theme-dark-auto .highlight{background-color:#2f3949}.theme-dark-auto .avatar{background-color:#3b475b}.theme-dark-auto .avatar-list-stacked .avatar{box-shadow:0 0 0 2px #354052}.theme-dark-auto .close,.theme-dark-auto .markdown,.theme-dark-auto .markdown>*{color:inherit}.theme-dark-auto .apexcharts-text{fill:#f5f7fb}.theme-dark-auto .apexcharts-legend-text{color:inherit!important}.theme-dark-auto .navbar-brand-autodark{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}}.peity{stroke-linejoin:round;stroke-linecap:round}.selectize-control{padding:0;border:0}.selectize-control.multi .selectize-input.has-items{padding-left:6px}.selectize-control.multi .selectize-input>div{font-size:.8125rem;margin:0 6px 2px 0;padding:2px 8px;border-radius:3px;background-color:rgba(145,152,163,.1);color:inherit}.selectize-control .remove{font-size:inherit!important;font-weight:400!important;border-left:0!important;color:#868c97!important}.selectize-control.is-valid{padding:0}.selectize-control.is-valid .selectize-input{border-color:#5eba00}.selectize-control.is-valid .selectize-input.focus{box-shadow:0 0 0 .2rem rgba(94,186,0,.25)}.selectize-control.is-valid .selectize-dropdown{background:0 0;background-color:inherit;border-color:rgba(134,140,151,.24);padding-right:0}.selectize-control.is-invalid{padding:0}.selectize-control.is-invalid .selectize-input{border-color:#fa4654}.selectize-control.is-invalid .selectize-input.focus{box-shadow:0 0 0 .2rem rgba(250,70,84,.25)}.selectize-control.is-invalid .selectize-dropdown{background:0 0;background-color:inherit;border-color:rgba(134,140,151,.24);padding-right:0}.selectize-input{display:flex!important;height:100%;border:1px solid rgba(134,140,151,.24);padding:.375rem .75rem;font-size:.9375rem;box-shadow:none;line-height:1.4666667;background-color:inherit;color:inherit!important}.selectize-input.full{background-color:inherit}.selectize-input.dropdown-active{border-radius:3px}.selectize-control.single .selectize-input{background:#fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28134, 140, 151, 0.48%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right .75rem center/16px 12px}.selectize-input.focus{border-color:#7aade9;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.selectize-input:after{content:none!important}.selectize-dropdown{height:auto;background:#fff;padding:.375rem 0;margin-top:1px}.selectize-dropdown .option,.selectize-dropdown .option-header{padding:.25rem .75rem}.selectize-dropdown .active{background:rgba(134,140,151,.06);color:inherit;cursor:pointer}.jqvmap-zoomin,.jqvmap-zoomout{height:auto;width:auto;left:.5rem;border:1px solid rgba(134,140,151,.24);background:#fff;color:#354052}.jqvmap-zoomin{top:.5rem}.jqvmap-zoomout{top:2rem}.jqvmap-label{font-family:inherit;font-size:.6875rem;line-height:1;padding:.25rem;background:#354052}.apexcharts-title-text{font-weight:600!important}.apexcharts-tooltip-title{font-weight:600!important;padding-bottom:.25rem!important}.apexcharts-gridline,.apexcharts-xaxis-tick,.apexcharts-ycrosshairs{stroke:rgba(134,140,151,.24)!important}.apexcharts-tooltip{line-height:1;color:#fff;background:#354052!important;border:0!important;border-radius:3px!important}.apexcharts-tooltip-title{margin:0!important;background:0 0!important;border:0!important}.apexcharts-tooltip-series-group{padding:0 8px!important}.apexcharts-tooltip-marker{width:.5rem;height:.5rem}.apexcharts-gridline,.apexcharts-xaxis-tick,.apexcharts-ycrosshairs{stroke:#e9ecf1}.fc-unthemed .fc-content,.fc-unthemed .fc-divider,.fc-unthemed .fc-list-heading td,.fc-unthemed .fc-list-view,.fc-unthemed .fc-popover,.fc-unthemed .fc-row,.fc-unthemed tbody,.fc-unthemed td,.fc-unthemed th,.fc-unthemed thead{border-color:rgba(134,140,151,.24)}.fc-unthemed .fc-toolbar .h2,.fc-unthemed .fc-toolbar h2{font-size:1.375rem;margin:0}.fc-unthemed .fc-button{color:#868c97;background-color:#fff;border-color:rgba(134,140,151,.24);padding:.375rem 1rem;font-size:.9375rem;border-radius:3px;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.fc-unthemed .fc-button:hover{color:#354052;background-color:#ececec;border-color:rgba(108,114,126,.24)}.fc-unthemed .fc-button.focus,.fc-unthemed .fc-button:focus{color:#354052;background-color:#ececec;border-color:rgba(108,114,126,.24);box-shadow:0 0 0 .2rem rgba(134,140,151,.5)}.fc-unthemed .fc-button.active,.fc-unthemed .fc-button:active,.show>.fc-unthemed .fc-button.dropdown-toggle{color:#354052;background-color:#e6e6e6;border-color:rgba(102,108,119,.24)}.fc-unthemed .fc-button.active:focus,.fc-unthemed .fc-button:active:focus,.show>.fc-unthemed .fc-button.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(134,140,151,.5)}.fc-unthemed .fc-button.disabled,.fc-unthemed .fc-button:disabled{color:#868c97;background-color:#fff;border-color:rgba(134,140,151,.24)}@media (prefers-reduced-motion:reduce){.fc-unthemed .fc-button{transition:none}}.fc-unthemed .fc-widget-header{border:0}.fc-unthemed .fc-day-header{padding-bottom:.25rem;font-weight:600}.fc-unthemed.card-calendar .fc-day-grid-container{border-bottom:0;border-left:0}.fc-unthemed .fc-time{font-weight:600}.fc-unthemed .fc-event{border-color:rgba(0,0,0,.05);color:#206bc4;background-color:#d2e1f3;padding:0 .25rem}.flatpickr-input.flatpickr-input{background:#fff}.flatpickr-input.flatpickr-input.active{border-color:#7aade9;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.flatpickr-calendar{background:#fff;border:1px solid rgba(134,140,151,.24);border-radius:3px;padding:.5rem;font-size:inherit;box-shadow:0 .5rem 1rem rgba(0,0,0,.15);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-top:-1px}.flatpickr-calendar:after,.flatpickr-calendar:before{content:none}.flatpickr-calendar .dayContainer,.flatpickr-calendar .flatpickr-days,.flatpickr-calendar .flatpickr-innerContainer,.flatpickr-calendar .flatpickr-rContainer{width:100%}.flatpickr-calendar .dayContainer,.flatpickr-calendar .flatpickr-day{max-width:100%;min-width:0}.flatpickr-calendar.inline{width:100%;box-shadow:none;margin:0}.flatpickr-day{color:inherit;border-radius:3px;display:flex;align-items:center;line-height:1}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.nextMonthDay,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.prevMonthDay{color:inherit;opacity:.2}.flatpickr-day.today{border-color:rgba(134,140,151,.24)}.flatpickr-day.selected{background-color:#206bc4}span.flatpickr-weekday{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#868c97}.flatpickr-months{margin-bottom:.5rem}.flatpickr-months .flatpickr-month{color:currentColor;fill:currentColor}.flatpickr-months .flatpickr-current-month{font-weight:400}.flatpickr-months .flatpickr-monthDropdown-months{-webkit-appearance:none;-moz-appearance:none;appearance:none;font-weight:inherit}.flatpickr-months .flatpickr-next-month,.flatpickr-months .flatpickr-prev-month{position:static;color:#868c97}.flatpickr-months .flatpickr-next-month:hover,.flatpickr-months .flatpickr-prev-month:hover{color:#354052}.flatpickr-months .flatpickr-next-month svg,.flatpickr-months .flatpickr-prev-month svg{display:block;fill:currentColor!important}.flatpickr-months .numInputWrapper .cur-year{font-weight:inherit}.flatpickr-months .numInputWrapper .arrowDown,.flatpickr-months .numInputWrapper .arrowUp{display:none}.flatpickr-day.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day.nextMonthDay:focus,.flatpickr-day.nextMonthDay:hover,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.today.inRange,.flatpickr-day:focus,.flatpickr-day:hover{background:rgba(134,140,151,.06);border-color:transparent}.noUi-target{border:0;box-shadow:none;background:0 0;border-radius:0;color:#206bc4}.noUi-horizontal{height:1.25rem;padding:.5rem 0}.noUi-base{background:rgba(176,181,190,.24);border-radius:1rem}.noUi-handle{width:1rem;height:1rem;border:2px solid #fff;box-shadow:0 .1rem .25rem rgba(0,0,0,.1);border-radius:1rem;background:currentColor;outline:0}.noUi-handle:after,.noUi-handle:before{content:none}.noUi-horizontal .noUi-handle{width:1rem;height:1rem;top:-.5rem;right:-.5rem;margin:1px 1px 0 0}.noUi-handle.noUi-active,.noUi-handle:focus{box-shadow:0 0 0 1px #f5f7fb,0 0 0 .2rem rgba(32,107,196,.25)}.noUi-connect{background:currentColor}
+ */@import url(https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;600;700&display=swap);:root{--blue:#206bc4;--azure:#45aaf2;--indigo:#6574cd;--purple:#a55eea;--pink:#f66d9b;--red:#cd201f;--orange:#ff922b;--yellow:#fab005;--lime:#94d82d;--green:#5eba00;--teal:#2bcbba;--cyan:#17a2b8;--white:#ffffff;--gray:#a8aeb7;--gray-dark:#545d6d;--dark:#354052;--primary:#206bc4;--secondary:#6e7582;--success:#5eba00;--info:#45aaf2;--warning:#fab005;--danger:#cd201f;--light:#f5f7fb;--dark:#354052;--font-family-sans-serif:"Ubuntu",system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;--font-family-monospace:Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}*,::after,::before{box-sizing:border-box}body{margin:0;font-family:Ubuntu,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:.875rem;font-weight:400;line-height:1.7142857;color:#354052;background-color:#f5f7fb;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}.hr,hr{margin:2rem 0;color:inherit;background-color:currentColor;border:0;opacity:.1}.hr:not([size]),hr:not([size]){height:1px}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}.h1,h1{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){.h1,h1{font-size:1.75rem}}.h2,h2{font-size:calc(1.2625rem + .15vw)}@media (min-width:1200px){.h2,h2{font-size:1.375rem}}.h3,h3{font-size:1.125rem}.h4,h4{font-size:.875rem}.h5,h5{font-size:.75rem}.h6,h6{font-size:.625rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:500}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}.small,small{font-size:87.5%}.mark,mark{padding:.2em;background-color:#fcf8e3}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#206bc4;text-decoration:none}a:hover{color:#154782}a:not([href]),a:not([href]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.625rem}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.625rem;color:#206bc4;word-wrap:break-word}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:.625rem;color:#fff;background-color:#354052;border-radius:.2rem}kbd kbd{padding:0;font-size:1em;font-weight:500}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:#6e7582;text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[list]::-webkit-calendar-picker-indicator{display:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:textfield}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit;white-space:normal}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}.lead{font-size:.875rem;font-weight:400}.display-1{font-size:calc(1.725rem + 5.7vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-1{font-size:6rem}}.display-2{font-size:calc(1.675rem + 5.1vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-2{font-size:5.5rem}}.display-3{font-size:calc(1.575rem + 3.9vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-3{font-size:4.5rem}}.display-4{font-size:calc(1.475rem + 2.7vw);font-weight:300;line-height:1.2}@media (min-width:1200px){.display-4{font-size:3.5rem}}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}.initialism{font-size:87.5%;text-transform:uppercase}.blockquote{margin-bottom:1rem;font-size:.875rem}.blockquote-footer{display:block;font-size:87.5%;color:#a8aeb7}.blockquote-footer::before{content:"\2014\00A0"}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:#f5f7fb;border:1px solid #e9ecf1;border-radius:3px;max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:.5rem;line-height:1}.figure-caption{font-size:87.5%;color:#a8aeb7}.container{width:100%;padding-right:.75rem;padding-left:.75rem;margin-right:auto;margin-left:auto}@media (min-width:33rem){.container{max-width:32.5rem}}@media (min-width:48rem){.container{max-width:47.5rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:75.25rem){.container{max-width:75.25rem}}.container-fluid,.container-lg,.container-md,.container-sm,.container-xl{width:100%;padding-right:.75rem;padding-left:.75rem;margin-right:auto;margin-left:auto}@media (min-width:33rem){.container,.container-sm{max-width:32.5rem}}@media (min-width:48rem){.container,.container-md,.container-sm{max-width:47.5rem}}@media (min-width:64rem){.container,.container-lg,.container-md,.container-sm{max-width:64rem}}@media (min-width:75.25rem){.container,.container-lg,.container-md,.container-sm,.container-xl{max-width:75.25rem}}.row{display:flex;flex-wrap:wrap;margin-right:-.75rem;margin-left:-.75rem}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:.75rem;padding-left:.75rem}.g-0,.gx-0{margin-right:0;margin-left:0}.g-0>*,.gx-0>*{padding-right:0;padding-left:0}.g-0,.gy-0{margin-top:0}.g-0>*,.gy-0>*{margin-top:0}.g-1,.gx-1{margin-right:-.125rem;margin-left:-.125rem}.g-1>*,.gx-1>*{padding-right:.125rem;padding-left:.125rem}.g-1,.gy-1{margin-top:-.25rem}.g-1>*,.gy-1>*{margin-top:.25rem}.g-2,.gx-2{margin-right:-.25rem;margin-left:-.25rem}.g-2>*,.gx-2>*{padding-right:.25rem;padding-left:.25rem}.g-2,.gy-2{margin-top:-.5rem}.g-2>*,.gy-2>*{margin-top:.5rem}.g-3,.gx-3{margin-right:-.5rem;margin-left:-.5rem}.g-3>*,.gx-3>*{padding-right:.5rem;padding-left:.5rem}.g-3,.gy-3{margin-top:-1rem}.g-3>*,.gy-3>*{margin-top:1rem}.g-4,.gx-4{margin-right:-.75rem;margin-left:-.75rem}.g-4>*,.gx-4>*{padding-right:.75rem;padding-left:.75rem}.g-4,.gy-4{margin-top:-1.5rem}.g-4>*,.gy-4>*{margin-top:1.5rem}.g-5,.gx-5{margin-right:-1.5rem;margin-left:-1.5rem}.g-5>*,.gx-5>*{padding-right:1.5rem;padding-left:1.5rem}.g-5,.gy-5{margin-top:-3rem}.g-5>*,.gy-5>*{margin-top:3rem}.g-6,.gx-6{margin-right:-2.25rem;margin-left:-2.25rem}.g-6>*,.gx-6>*{padding-right:2.25rem;padding-left:2.25rem}.g-6,.gy-6{margin-top:-4.5rem}.g-6>*,.gy-6>*{margin-top:4.5rem}@media (min-width:33rem){.g-sm-0,.gx-sm-0{margin-right:0;margin-left:0}.g-sm-0>*,.gx-sm-0>*{padding-right:0;padding-left:0}.g-sm-0,.gy-sm-0{margin-top:0}.g-sm-0>*,.gy-sm-0>*{margin-top:0}.g-sm-1,.gx-sm-1{margin-right:-.125rem;margin-left:-.125rem}.g-sm-1>*,.gx-sm-1>*{padding-right:.125rem;padding-left:.125rem}.g-sm-1,.gy-sm-1{margin-top:-.25rem}.g-sm-1>*,.gy-sm-1>*{margin-top:.25rem}.g-sm-2,.gx-sm-2{margin-right:-.25rem;margin-left:-.25rem}.g-sm-2>*,.gx-sm-2>*{padding-right:.25rem;padding-left:.25rem}.g-sm-2,.gy-sm-2{margin-top:-.5rem}.g-sm-2>*,.gy-sm-2>*{margin-top:.5rem}.g-sm-3,.gx-sm-3{margin-right:-.5rem;margin-left:-.5rem}.g-sm-3>*,.gx-sm-3>*{padding-right:.5rem;padding-left:.5rem}.g-sm-3,.gy-sm-3{margin-top:-1rem}.g-sm-3>*,.gy-sm-3>*{margin-top:1rem}.g-sm-4,.gx-sm-4{margin-right:-.75rem;margin-left:-.75rem}.g-sm-4>*,.gx-sm-4>*{padding-right:.75rem;padding-left:.75rem}.g-sm-4,.gy-sm-4{margin-top:-1.5rem}.g-sm-4>*,.gy-sm-4>*{margin-top:1.5rem}.g-sm-5,.gx-sm-5{margin-right:-1.5rem;margin-left:-1.5rem}.g-sm-5>*,.gx-sm-5>*{padding-right:1.5rem;padding-left:1.5rem}.g-sm-5,.gy-sm-5{margin-top:-3rem}.g-sm-5>*,.gy-sm-5>*{margin-top:3rem}.g-sm-6,.gx-sm-6{margin-right:-2.25rem;margin-left:-2.25rem}.g-sm-6>*,.gx-sm-6>*{padding-right:2.25rem;padding-left:2.25rem}.g-sm-6,.gy-sm-6{margin-top:-4.5rem}.g-sm-6>*,.gy-sm-6>*{margin-top:4.5rem}}@media (min-width:48rem){.g-md-0,.gx-md-0{margin-right:0;margin-left:0}.g-md-0>*,.gx-md-0>*{padding-right:0;padding-left:0}.g-md-0,.gy-md-0{margin-top:0}.g-md-0>*,.gy-md-0>*{margin-top:0}.g-md-1,.gx-md-1{margin-right:-.125rem;margin-left:-.125rem}.g-md-1>*,.gx-md-1>*{padding-right:.125rem;padding-left:.125rem}.g-md-1,.gy-md-1{margin-top:-.25rem}.g-md-1>*,.gy-md-1>*{margin-top:.25rem}.g-md-2,.gx-md-2{margin-right:-.25rem;margin-left:-.25rem}.g-md-2>*,.gx-md-2>*{padding-right:.25rem;padding-left:.25rem}.g-md-2,.gy-md-2{margin-top:-.5rem}.g-md-2>*,.gy-md-2>*{margin-top:.5rem}.g-md-3,.gx-md-3{margin-right:-.5rem;margin-left:-.5rem}.g-md-3>*,.gx-md-3>*{padding-right:.5rem;padding-left:.5rem}.g-md-3,.gy-md-3{margin-top:-1rem}.g-md-3>*,.gy-md-3>*{margin-top:1rem}.g-md-4,.gx-md-4{margin-right:-.75rem;margin-left:-.75rem}.g-md-4>*,.gx-md-4>*{padding-right:.75rem;padding-left:.75rem}.g-md-4,.gy-md-4{margin-top:-1.5rem}.g-md-4>*,.gy-md-4>*{margin-top:1.5rem}.g-md-5,.gx-md-5{margin-right:-1.5rem;margin-left:-1.5rem}.g-md-5>*,.gx-md-5>*{padding-right:1.5rem;padding-left:1.5rem}.g-md-5,.gy-md-5{margin-top:-3rem}.g-md-5>*,.gy-md-5>*{margin-top:3rem}.g-md-6,.gx-md-6{margin-right:-2.25rem;margin-left:-2.25rem}.g-md-6>*,.gx-md-6>*{padding-right:2.25rem;padding-left:2.25rem}.g-md-6,.gy-md-6{margin-top:-4.5rem}.g-md-6>*,.gy-md-6>*{margin-top:4.5rem}}@media (min-width:64rem){.g-lg-0,.gx-lg-0{margin-right:0;margin-left:0}.g-lg-0>*,.gx-lg-0>*{padding-right:0;padding-left:0}.g-lg-0,.gy-lg-0{margin-top:0}.g-lg-0>*,.gy-lg-0>*{margin-top:0}.g-lg-1,.gx-lg-1{margin-right:-.125rem;margin-left:-.125rem}.g-lg-1>*,.gx-lg-1>*{padding-right:.125rem;padding-left:.125rem}.g-lg-1,.gy-lg-1{margin-top:-.25rem}.g-lg-1>*,.gy-lg-1>*{margin-top:.25rem}.g-lg-2,.gx-lg-2{margin-right:-.25rem;margin-left:-.25rem}.g-lg-2>*,.gx-lg-2>*{padding-right:.25rem;padding-left:.25rem}.g-lg-2,.gy-lg-2{margin-top:-.5rem}.g-lg-2>*,.gy-lg-2>*{margin-top:.5rem}.g-lg-3,.gx-lg-3{margin-right:-.5rem;margin-left:-.5rem}.g-lg-3>*,.gx-lg-3>*{padding-right:.5rem;padding-left:.5rem}.g-lg-3,.gy-lg-3{margin-top:-1rem}.g-lg-3>*,.gy-lg-3>*{margin-top:1rem}.g-lg-4,.gx-lg-4{margin-right:-.75rem;margin-left:-.75rem}.g-lg-4>*,.gx-lg-4>*{padding-right:.75rem;padding-left:.75rem}.g-lg-4,.gy-lg-4{margin-top:-1.5rem}.g-lg-4>*,.gy-lg-4>*{margin-top:1.5rem}.g-lg-5,.gx-lg-5{margin-right:-1.5rem;margin-left:-1.5rem}.g-lg-5>*,.gx-lg-5>*{padding-right:1.5rem;padding-left:1.5rem}.g-lg-5,.gy-lg-5{margin-top:-3rem}.g-lg-5>*,.gy-lg-5>*{margin-top:3rem}.g-lg-6,.gx-lg-6{margin-right:-2.25rem;margin-left:-2.25rem}.g-lg-6>*,.gx-lg-6>*{padding-right:2.25rem;padding-left:2.25rem}.g-lg-6,.gy-lg-6{margin-top:-4.5rem}.g-lg-6>*,.gy-lg-6>*{margin-top:4.5rem}}@media (min-width:75.25rem){.g-xl-0,.gx-xl-0{margin-right:0;margin-left:0}.g-xl-0>*,.gx-xl-0>*{padding-right:0;padding-left:0}.g-xl-0,.gy-xl-0{margin-top:0}.g-xl-0>*,.gy-xl-0>*{margin-top:0}.g-xl-1,.gx-xl-1{margin-right:-.125rem;margin-left:-.125rem}.g-xl-1>*,.gx-xl-1>*{padding-right:.125rem;padding-left:.125rem}.g-xl-1,.gy-xl-1{margin-top:-.25rem}.g-xl-1>*,.gy-xl-1>*{margin-top:.25rem}.g-xl-2,.gx-xl-2{margin-right:-.25rem;margin-left:-.25rem}.g-xl-2>*,.gx-xl-2>*{padding-right:.25rem;padding-left:.25rem}.g-xl-2,.gy-xl-2{margin-top:-.5rem}.g-xl-2>*,.gy-xl-2>*{margin-top:.5rem}.g-xl-3,.gx-xl-3{margin-right:-.5rem;margin-left:-.5rem}.g-xl-3>*,.gx-xl-3>*{padding-right:.5rem;padding-left:.5rem}.g-xl-3,.gy-xl-3{margin-top:-1rem}.g-xl-3>*,.gy-xl-3>*{margin-top:1rem}.g-xl-4,.gx-xl-4{margin-right:-.75rem;margin-left:-.75rem}.g-xl-4>*,.gx-xl-4>*{padding-right:.75rem;padding-left:.75rem}.g-xl-4,.gy-xl-4{margin-top:-1.5rem}.g-xl-4>*,.gy-xl-4>*{margin-top:1.5rem}.g-xl-5,.gx-xl-5{margin-right:-1.5rem;margin-left:-1.5rem}.g-xl-5>*,.gx-xl-5>*{padding-right:1.5rem;padding-left:1.5rem}.g-xl-5,.gy-xl-5{margin-top:-3rem}.g-xl-5>*,.gy-xl-5>*{margin-top:3rem}.g-xl-6,.gx-xl-6{margin-right:-2.25rem;margin-left:-2.25rem}.g-xl-6>*,.gx-xl-6>*{padding-right:2.25rem;padding-left:2.25rem}.g-xl-6,.gy-xl-6{margin-top:-4.5rem}.g-xl-6>*,.gy-xl-6>*{margin-top:4.5rem}}.col{flex:1 0 0%;min-width:0}.row-cols-auto>*{flex:0 0 auto;width:auto}.row-cols-1>*{flex:0 0 auto;width:100%}.row-cols-2>*{flex:0 0 auto;width:50%}.row-cols-3>*{flex:0 0 auto;width:33.3333333%}.row-cols-4>*{flex:0 0 auto;width:25%}.row-cols-5>*{flex:0 0 auto;width:20%}.row-cols-6>*{flex:0 0 auto;width:16.6666667%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.3333333%}.col-2{flex:0 0 auto;width:16.6666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.3333333%}.col-5{flex:0 0 auto;width:41.6666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.3333333%}.col-8{flex:0 0 auto;width:66.6666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.3333333%}.col-11{flex:0 0 auto;width:91.6666667%}.col-12{flex:0 0 auto;width:100%}.offset-1{margin-left:8.3333333%}.offset-2{margin-left:16.6666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.3333333%}.offset-5{margin-left:41.6666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.3333333%}.offset-8{margin-left:66.6666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.3333333%}.offset-11{margin-left:91.6666667%}@media (min-width:33rem){.col-sm{flex:1 0 0%;min-width:0}.row-cols-sm-auto>*{flex:0 0 auto;width:auto}.row-cols-sm-1>*{flex:0 0 auto;width:100%}.row-cols-sm-2>*{flex:0 0 auto;width:50%}.row-cols-sm-3>*{flex:0 0 auto;width:33.3333333%}.row-cols-sm-4>*{flex:0 0 auto;width:25%}.row-cols-sm-5>*{flex:0 0 auto;width:20%}.row-cols-sm-6>*{flex:0 0 auto;width:16.6666667%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.3333333%}.col-sm-2{flex:0 0 auto;width:16.6666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.3333333%}.col-sm-5{flex:0 0 auto;width:41.6666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.3333333%}.col-sm-8{flex:0 0 auto;width:66.6666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.3333333%}.col-sm-11{flex:0 0 auto;width:91.6666667%}.col-sm-12{flex:0 0 auto;width:100%}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.3333333%}.offset-sm-2{margin-left:16.6666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.3333333%}.offset-sm-5{margin-left:41.6666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.3333333%}.offset-sm-8{margin-left:66.6666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.3333333%}.offset-sm-11{margin-left:91.6666667%}}@media (min-width:48rem){.col-md{flex:1 0 0%;min-width:0}.row-cols-md-auto>*{flex:0 0 auto;width:auto}.row-cols-md-1>*{flex:0 0 auto;width:100%}.row-cols-md-2>*{flex:0 0 auto;width:50%}.row-cols-md-3>*{flex:0 0 auto;width:33.3333333%}.row-cols-md-4>*{flex:0 0 auto;width:25%}.row-cols-md-5>*{flex:0 0 auto;width:20%}.row-cols-md-6>*{flex:0 0 auto;width:16.6666667%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.3333333%}.col-md-2{flex:0 0 auto;width:16.6666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.3333333%}.col-md-5{flex:0 0 auto;width:41.6666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.3333333%}.col-md-8{flex:0 0 auto;width:66.6666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.3333333%}.col-md-11{flex:0 0 auto;width:91.6666667%}.col-md-12{flex:0 0 auto;width:100%}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.3333333%}.offset-md-2{margin-left:16.6666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.3333333%}.offset-md-5{margin-left:41.6666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.3333333%}.offset-md-8{margin-left:66.6666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.3333333%}.offset-md-11{margin-left:91.6666667%}}@media (min-width:64rem){.col-lg{flex:1 0 0%;min-width:0}.row-cols-lg-auto>*{flex:0 0 auto;width:auto}.row-cols-lg-1>*{flex:0 0 auto;width:100%}.row-cols-lg-2>*{flex:0 0 auto;width:50%}.row-cols-lg-3>*{flex:0 0 auto;width:33.3333333%}.row-cols-lg-4>*{flex:0 0 auto;width:25%}.row-cols-lg-5>*{flex:0 0 auto;width:20%}.row-cols-lg-6>*{flex:0 0 auto;width:16.6666667%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.3333333%}.col-lg-2{flex:0 0 auto;width:16.6666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.3333333%}.col-lg-5{flex:0 0 auto;width:41.6666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.3333333%}.col-lg-8{flex:0 0 auto;width:66.6666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.3333333%}.col-lg-11{flex:0 0 auto;width:91.6666667%}.col-lg-12{flex:0 0 auto;width:100%}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.3333333%}.offset-lg-2{margin-left:16.6666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.3333333%}.offset-lg-5{margin-left:41.6666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.3333333%}.offset-lg-8{margin-left:66.6666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.3333333%}.offset-lg-11{margin-left:91.6666667%}}@media (min-width:75.25rem){.col-xl{flex:1 0 0%;min-width:0}.row-cols-xl-auto>*{flex:0 0 auto;width:auto}.row-cols-xl-1>*{flex:0 0 auto;width:100%}.row-cols-xl-2>*{flex:0 0 auto;width:50%}.row-cols-xl-3>*{flex:0 0 auto;width:33.3333333%}.row-cols-xl-4>*{flex:0 0 auto;width:25%}.row-cols-xl-5>*{flex:0 0 auto;width:20%}.row-cols-xl-6>*{flex:0 0 auto;width:16.6666667%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.3333333%}.col-xl-2{flex:0 0 auto;width:16.6666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.3333333%}.col-xl-5{flex:0 0 auto;width:41.6666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.3333333%}.col-xl-8{flex:0 0 auto;width:66.6666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.3333333%}.col-xl-11{flex:0 0 auto;width:91.6666667%}.col-xl-12{flex:0 0 auto;width:100%}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.3333333%}.offset-xl-2{margin-left:16.6666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.3333333%}.offset-xl-5{margin-left:41.6666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.3333333%}.offset-xl-8{margin-left:66.6666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.3333333%}.offset-xl-11{margin-left:91.6666667%}}.markdown>table,.table{width:100%;margin-bottom:1rem;color:#354052;vertical-align:top}.markdown>table td,.markdown>table th,.table td,.table th{padding:.5rem;border-bottom:1px solid rgba(110,117,130,.2)}.markdown>table tbody,.table tbody{vertical-align:inherit}.markdown>table thead th,.table thead th{vertical-align:bottom;border-bottom-color:rgba(110,117,130,.2)}.markdown>table tbody+tbody,.table tbody+tbody{border-top:2px solid rgba(110,117,130,.2)}.caption-top{caption-side:top}.table-sm td,.table-sm th{padding:.25rem}.markdown>table,.table-bordered{border:1px solid rgba(110,117,130,.2)}.markdown>table td,.markdown>table th,.table-bordered td,.table-bordered th{border:1px solid rgba(110,117,130,.2)}.markdown>table thead td,.markdown>table thead th,.table-bordered thead td,.table-bordered thead th{border-bottom-width:2px}.table-borderless tbody+tbody,.table-borderless td,.table-borderless th,.table-borderless thead th{border:0}.table-striped tbody tr:nth-of-type(even){background-color:rgba(53,64,82,.024)}.table-hover tbody tr:hover{color:#354052;background-color:rgba(0,0,0,.075)}.table-primary,.table-primary>td,.table-primary>th{background-color:#e9f0f9}.table-primary tbody+tbody,.table-primary td,.table-primary th,.table-primary thead th{border-color:#a6c4e7}.table-hover .table-primary:hover{background-color:#d5e2f4}.table-hover .table-primary:hover>td,.table-hover .table-primary:hover>th{background-color:#d5e2f4}.table-secondary,.table-secondary>td,.table-secondary>th{background-color:#f1f1f3}.table-secondary tbody+tbody,.table-secondary td,.table-secondary th,.table-secondary thead th{border-color:#c5c8cd}.table-hover .table-secondary:hover{background-color:#e3e3e7}.table-hover .table-secondary:hover>td,.table-hover .table-secondary:hover>th{background-color:#e3e3e7}.table-success,.table-success>td,.table-success>th{background-color:#eff8e6}.table-success tbody+tbody,.table-success td,.table-success th,.table-success thead th{border-color:#bfe399}.table-hover .table-success:hover{background-color:#e2f2d2}.table-hover .table-success:hover>td,.table-hover .table-success:hover>th{background-color:#e2f2d2}.table-info,.table-info>td,.table-info>th{background-color:#ecf7fe}.table-info tbody+tbody,.table-info td,.table-info th,.table-info thead th{border-color:#b5ddfa}.table-hover .table-info:hover{background-color:#d4edfd}.table-hover .table-info:hover>td,.table-hover .table-info:hover>th{background-color:#d4edfd}.table-warning,.table-warning>td,.table-warning>th{background-color:#fff7e6}.table-warning tbody+tbody,.table-warning td,.table-warning th,.table-warning thead th{border-color:#fddf9b}.table-hover .table-warning:hover{background-color:#ffefcd}.table-hover .table-warning:hover>td,.table-hover .table-warning:hover>th{background-color:#ffefcd}.table-danger,.table-danger>td,.table-danger>th{background-color:#fae9e9}.table-danger tbody+tbody,.table-danger td,.table-danger th,.table-danger thead th{border-color:#eba6a5}.table-hover .table-danger:hover{background-color:#f5d4d4}.table-hover .table-danger:hover>td,.table-hover .table-danger:hover>th{background-color:#f5d4d4}.table-light,.table-light>td,.table-light>th{background-color:#fefeff}.table-light tbody+tbody,.table-light td,.table-light th,.table-light thead th{border-color:#fbfcfd}.table-hover .table-light:hover{background-color:#e5e5ff}.table-hover .table-light:hover>td,.table-hover .table-light:hover>th{background-color:#e5e5ff}.table-dark,.table-dark>td,.table-dark>th{background-color:#ebecee}.table-dark tbody+tbody,.table-dark td,.table-dark th,.table-dark thead th{border-color:#aeb3ba}.table-hover .table-dark:hover{background-color:#dddfe2}.table-hover .table-dark:hover>td,.table-hover .table-dark:hover>th{background-color:#dddfe2}.table-active,.table-active>td,.table-active>th{background-color:rgba(0,0,0,.075)}.table-hover .table-active:hover{background-color:rgba(0,0,0,.075)}.table-hover .table-active:hover>td,.table-hover .table-active:hover>th{background-color:rgba(0,0,0,.075)}.markdown>table .thead-dark th,.table .thead-dark th{color:#fff;background-color:#545d6d;border-color:#656f83}.markdown>table .thead-light th,.table .thead-light th{color:#7a828f;background-color:#f1f3f8;border-color:rgba(110,117,130,.2)}.table-dark{color:#fff;background-color:#545d6d}.table-dark td,.table-dark th,.table-dark thead th{border-color:#656f83}.markdown>table.table-dark,.table-dark.table-bordered{border:0}.table-dark.table-striped tbody tr:nth-of-type(even){background-color:rgba(255,255,255,.05)}.table-dark.table-hover tbody tr:hover{color:#fff;background-color:rgba(255,255,255,.075)}@media (max-width:32.98rem){.table-responsive-sm{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.markdown.table-responsive-sm>table,.table-responsive-sm>.table-bordered{border:0}}@media (max-width:47.98rem){.table-responsive-md{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.markdown.table-responsive-md>table,.table-responsive-md>.table-bordered{border:0}}@media (max-width:63.98rem){.table-responsive-lg{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.markdown.table-responsive-lg>table,.table-responsive-lg>.table-bordered{border:0}}@media (max-width:75.23rem){.table-responsive-xl{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.markdown.table-responsive-xl>table,.table-responsive-xl>.table-bordered{border:0}}.table-responsive{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.markdown.table-responsive>table,.table-responsive>.table-bordered{border:0}.col-form-label{padding-top:calc(.375rem + 1px);padding-bottom:calc(.375rem + 1px);margin-bottom:0;font-size:inherit;line-height:1.4666667}.col-form-label-lg{padding-top:calc(.5rem + 1px);padding-bottom:calc(.5rem + 1px);font-size:calc(1.2625rem + .15vw)}@media (min-width:1200px){.col-form-label-lg{font-size:1.375rem}}.col-form-label-sm{padding-top:calc(.125rem + 1px);padding-bottom:calc(.125rem + 1px);font-size:.75rem}.form-control{display:block;width:100%;min-height:calc(1.4666667em + .75rem + 2px);padding:.375rem .75rem;font-size:.875rem;font-weight:400;line-height:1.4666667;color:#354052;background-color:#fff;background-clip:padding-box;border:1px solid rgba(110,117,130,.2);border-radius:3px;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control:focus{color:inherit;background-color:#fff;border-color:#7aade9;outline:0;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.form-control::-webkit-input-placeholder{color:#6e7582;opacity:1}.form-control::-moz-placeholder{color:#6e7582;opacity:1}.form-control:-ms-input-placeholder{color:#6e7582;opacity:1}.form-control::-ms-input-placeholder{color:#6e7582;opacity:1}.form-control::placeholder{color:#6e7582;opacity:1}.form-control:disabled,.form-control[readonly]{background-color:#f5f7fb;opacity:1}.form-control-plaintext{display:block;width:100%;padding:.375rem 0;margin-bottom:0;line-height:1.4666667;color:#354052;background-color:transparent;border:solid transparent;border-width:1px 0}.form-control-plaintext.form-control-lg,.form-control-plaintext.form-control-sm{padding-right:0;padding-left:0}.form-control-sm{min-height:calc(1.4666667em + .25rem + 2px);padding:.125rem .5rem;font-size:.75rem;border-radius:.2rem}.form-control-lg{min-height:calc(1.4666667em + 1rem + 2px);padding:.5rem 1.5rem;font-size:calc(1.2625rem + .15vw);border-radius:.3rem}@media (min-width:1200px){.form-control-lg{font-size:1.375rem}}.form-control-color{max-width:3rem;padding:.375rem}.form-control-color::-moz-color-swatch{border-radius:3px}.form-control-color::-webkit-color-swatch{border-radius:3px}.form-select{display:block;width:100%;height:calc(1.4666667em + .75rem + 2px);padding:.375rem 1.75rem .375rem .75rem;font-size:.875rem;font-weight:400;line-height:1.4666667;color:#354052;vertical-align:middle;background-color:#fff;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28110, 117, 130, 0.44%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px;border:1px solid rgba(110,117,130,.2);border-radius:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-select:focus{border-color:#7aade9;outline:0;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.form-select:focus::-ms-value{color:#354052;background-color:#fff}.form-select[multiple],.form-select[size]:not([size="1"]){height:auto;padding-right:.75rem;background-image:none}.form-select:disabled{color:#a8aeb7;background-color:#f1f3f8}.form-select:-moz-focusring{color:transparent;text-shadow:0 0 0 #354052}.form-select-sm{height:calc(1.4666667em + .25rem + 2px);padding-top:.125rem;padding-bottom:.125rem;padding-left:.5rem;font-size:.75rem}.form-select-lg{height:calc(1.4666667em + 1rem + 2px);padding-top:.5rem;padding-bottom:.5rem;padding-left:1.5rem;font-size:calc(1.2625rem + .15vw)}@media (min-width:1200px){.form-select-lg{font-size:1.375rem}}.form-check{display:block;min-height:1.5rem;padding-left:1.5rem;margin-bottom:.125rem}.form-check .form-check-input{float:left;margin-left:-1.5rem}.form-check-input{width:1rem;height:1rem;margin-top:.3571429rem;vertical-align:top;background-color:#fff;border:1px solid rgba(110,117,130,.2);-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-print-color-adjust:exact;color-adjust:exact}.form-check-input[type=checkbox]{border-radius:3px}.form-check-input[type=radio]{border-radius:50%}.form-check-input:active{-webkit-filter:brightness(90%);filter:brightness(90%)}.form-check-input:focus{border-color:#7aade9;outline:0;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.form-check-input:checked{background-color:#206bc4;background-repeat:repeat;background-position:center center;background-size:1rem;border-color:rgba(110,117,130,.2)}.form-check-input:checked[type=checkbox]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6' transform='scale%28.8%29' transform-origin='50% 50%'/%3e%3c/svg%3e")}.form-check-input:checked[type=radio]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3' fill='%23ffffff' cx='8' cy='8' /%3e%3c/svg%3e")}.form-check-input[type=checkbox]:indeterminate{background-color:#206bc4;background-repeat:no-repeat;background-position:center center;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5 8h6'/%3e%3c/svg%3e");background-size:1em;border-color:#206bc4}.form-check-input:disabled{pointer-events:none;-webkit-filter:none;filter:none;opacity:.5}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{opacity:.5}.form-check-label{margin-bottom:0}.form-switch{padding-left:2.25rem}.form-switch .form-check-input{width:1.75rem;margin-left:-2.25rem;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28110, 117, 130, 0.2%29'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:left center;background-size:auto;border-radius:1.75rem;-webkit-print-color-adjust:exact;color-adjust:exact}.form-switch .form-check-input:focus{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2380bdff'/%3e%3c/svg%3e")}.form-switch .form-check-input:checked{background-position:right center;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e")}.form-check-inline{display:inline-block;margin-right:1rem}.form-file{position:relative;height:calc(1.4666667em + .75rem + 2px)}.form-file-input{position:relative;z-index:2;width:100%;height:100%;margin:0;opacity:0}.form-file-input:focus-within~.form-file-label{border-color:#7aade9;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.form-file-input:disabled~.form-file-label .form-file-text,.form-file-input[disabled]~.form-file-label .form-file-text{background-color:#f5f7fb}.form-file-label{position:absolute;top:0;right:0;left:0;z-index:1;display:flex;height:100%;border-color:rgba(110,117,130,.2);border-radius:3px}.form-file-text{display:block;flex-grow:1;padding:.375rem .75rem;overflow:hidden;font-weight:400;line-height:1.4666667;color:#354052;text-overflow:ellipsis;white-space:nowrap;background-color:#fff;border-color:inherit;border-style:solid;border-width:1px;border-top-left-radius:inherit;border-bottom-left-radius:inherit}.form-file-button{display:block;flex-shrink:0;padding:.375rem .75rem;margin-left:-1px;line-height:1.4666667;color:#354052;background-color:rgba(53,64,82,.024);border-color:inherit;border-style:solid;border-width:1px;border-top-right-radius:inherit;border-bottom-right-radius:inherit}.form-file-sm{height:calc(1.4666667em + .25rem + 2px);font-size:.75rem}.form-file-sm .form-file-button,.form-file-sm .form-file-text{padding:.125rem .5rem}.form-file-lg{height:calc(1.4666667em + 1rem + 2px);font-size:calc(1.2625rem + .15vw)}@media (min-width:1200px){.form-file-lg{font-size:1.375rem}}.form-file-lg .form-file-button,.form-file-lg .form-file-text{padding:.5rem 1.5rem}.form-range{width:100%;height:1.25rem;padding:0;background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-range:focus{outline:0}.form-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 1px #f5f7fb,0 0 0 .2rem rgba(32,107,196,.25)}.form-range:focus::-moz-range-thumb{box-shadow:0 0 0 1px #f5f7fb,0 0 0 .2rem rgba(32,107,196,.25)}.form-range:focus::-ms-thumb{box-shadow:0 0 0 1px #f5f7fb,0 0 0 .2rem rgba(32,107,196,.25)}.form-range::-moz-focus-outer{border:0}.form-range::-webkit-slider-thumb{width:1rem;height:1rem;margin-top:-.375rem;background-color:#206bc4;border:2px solid #fff;border-radius:1rem;-webkit-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-appearance:none;appearance:none}@media (prefers-reduced-motion:reduce){.form-range::-webkit-slider-thumb{-webkit-transition:none;transition:none}}.form-range::-webkit-slider-thumb:active{background-color:#a6c8f0}.form-range::-webkit-slider-runnable-track{width:100%;height:.25rem;color:transparent;cursor:pointer;background-color:rgba(176,181,190,.24);border-color:transparent;border-radius:1rem}.form-range::-moz-range-thumb{width:1rem;height:1rem;background-color:#206bc4;border:2px solid #fff;border-radius:1rem;-moz-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-moz-appearance:none;appearance:none}@media (prefers-reduced-motion:reduce){.form-range::-moz-range-thumb{-moz-transition:none;transition:none}}.form-range::-moz-range-thumb:active{background-color:#a6c8f0}.form-range::-moz-range-track{width:100%;height:.25rem;color:transparent;cursor:pointer;background-color:rgba(176,181,190,.24);border-color:transparent;border-radius:1rem}.form-range::-ms-thumb{width:1rem;height:1rem;margin-top:0;margin-right:.125rem;margin-left:.125rem;background-color:#206bc4;border:2px solid #fff;border-radius:1rem;-ms-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;appearance:none}@media (prefers-reduced-motion:reduce){.form-range::-ms-thumb{-ms-transition:none;transition:none}}.form-range::-ms-thumb:active{background-color:#a6c8f0}.form-range::-ms-track{width:100%;height:.25rem;color:transparent;cursor:pointer;background-color:transparent;border-color:transparent;border-width:.5rem}.form-range::-ms-fill-lower{background-color:rgba(176,181,190,.24);border-radius:1rem}.form-range::-ms-fill-upper{margin-right:15px;background-color:rgba(176,181,190,.24);border-radius:1rem}.form-range:disabled{pointer-events:none}.form-range:disabled::-webkit-slider-thumb{background-color:#cbcfd6}.form-range:disabled::-moz-range-thumb{background-color:#cbcfd6}.form-range:disabled::-ms-thumb{background-color:#cbcfd6}.input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.input-group>.form-control,.input-group>.form-file,.input-group>.form-select{position:relative;flex:1 1 auto;width:1%;min-width:0}.input-group>.form-control:focus,.input-group>.form-file .form-file-input:focus~.form-file-label,.input-group>.form-select:focus{z-index:3}.input-group>.form-file>.form-file-input:focus{z-index:4}.input-group>.form-file:not(:last-child)>.form-file-label{border-top-right-radius:0;border-bottom-right-radius:0}.input-group>.form-file:not(:first-child)>.form-file-label{border-top-left-radius:0;border-bottom-left-radius:0}.input-group .btn{position:relative;z-index:2}.input-group .btn:focus{z-index:3}.input-group-text{display:flex;align-items:center;padding:.375rem .75rem;margin-bottom:0;font-size:.875rem;font-weight:400;line-height:1.4666667;color:#6e7582;text-align:center;white-space:nowrap;background-color:rgba(53,64,82,.024);border:1px solid rgba(110,117,130,.2);border-radius:3px}.input-group-lg>.form-control{min-height:calc(1.4666667em + 1rem + 2px)}.input-group-lg>.form-select{height:calc(1.4666667em + 1rem + 2px)}.input-group-lg>.btn,.input-group-lg>.form-control,.input-group-lg>.form-select,.input-group-lg>.input-group-text{padding:.5rem 1.5rem;font-size:calc(1.2625rem + .15vw);border-radius:.3rem}@media (min-width:1200px){.input-group-lg>.btn,.input-group-lg>.form-control,.input-group-lg>.form-select,.input-group-lg>.input-group-text{font-size:1.375rem}}.input-group-sm>.form-control{min-height:calc(1.4666667em + .25rem + 2px)}.input-group-sm>.form-select{height:calc(1.4666667em + .25rem + 2px)}.input-group-sm>.btn,.input-group-sm>.form-control,.input-group-sm>.form-select,.input-group-sm>.input-group-text{padding:.125rem .5rem;font-size:.75rem;border-radius:.2rem}.input-group-lg>.form-select,.input-group-sm>.form-select{padding-right:1.75rem}.input-group>.dropdown-toggle:nth-last-child(n+3),.input-group>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu){border-top-right-radius:0;border-bottom-right-radius:0}.input-group>:not(:first-child):not(.dropdown-menu){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}.valid-feedback{display:none;width:100%;margin-top:.25rem;font-size:87.5%;color:#5eba00}.valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.765625rem;color:#fff;background-color:rgba(94,186,0,.9);border-radius:3px}.is-valid~.valid-feedback,.is-valid~.valid-tooltip,.was-validated :valid~.valid-feedback,.was-validated :valid~.valid-tooltip{display:block}.form-control.is-valid,.was-validated .form-control:valid{border-color:#5eba00;padding-right:calc(1.4666667em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235eba00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.3666667em + .1875rem) center;background-size:calc(.7333333em + .375rem) calc(.7333333em + .375rem)}.form-control.is-valid:focus,.was-validated .form-control:valid:focus{border-color:#5eba00;box-shadow:0 0 0 .2rem rgba(94,186,0,.25)}.was-validated textarea.form-control:valid,textarea.form-control.is-valid{padding-right:calc(1.4666667em + .75rem);background-position:top calc(.3666667em + .1875rem) right calc(.3666667em + .1875rem)}.form-select.is-valid,.was-validated .form-select:valid{border-color:#5eba00;padding-right:calc(.75em + 2.3125rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28110, 117, 130, 0.44%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235eba00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e");background-position:right .75rem center,center right 1.75rem;background-size:16px 12px,calc(.7333333em + .375rem) calc(.7333333em + .375rem)}.form-select.is-valid:focus,.was-validated .form-select:valid:focus{border-color:#5eba00;box-shadow:0 0 0 .2rem rgba(94,186,0,.25)}.form-check-input.is-valid,.was-validated .form-check-input:valid{border-color:#5eba00}.form-check-input.is-valid:checked,.was-validated .form-check-input:valid:checked{background-color:#78ed00}.form-check-input.is-valid:focus,.was-validated .form-check-input:valid:focus{box-shadow:0 0 0 .2rem rgba(94,186,0,.25)}.form-check-input.is-valid~.form-check-label,.was-validated .form-check-input:valid~.form-check-label{color:#5eba00}.form-check-inline .form-check-input~.valid-feedback{margin-left:.5em}.form-file-input.is-valid~.form-file-label,.was-validated .form-file-input:valid~.form-file-label{border-color:#5eba00}.form-file-input.is-valid:focus~.form-file-label,.was-validated .form-file-input:valid:focus~.form-file-label{border-color:#5eba00;box-shadow:0 0 0 .2rem rgba(94,186,0,.25)}.invalid-feedback{display:none;width:100%;margin-top:.25rem;font-size:87.5%;color:#cd201f}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:.765625rem;color:#fff;background-color:rgba(205,32,31,.9);border-radius:3px}.is-invalid~.invalid-feedback,.is-invalid~.invalid-tooltip,.was-validated :invalid~.invalid-feedback,.was-validated :invalid~.invalid-tooltip{display:block}.form-control.is-invalid,.was-validated .form-control:invalid{border-color:#cd201f;padding-right:calc(1.4666667em + .75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23cd201f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(.3666667em + .1875rem) center;background-size:calc(.7333333em + .375rem) calc(.7333333em + .375rem)}.form-control.is-invalid:focus,.was-validated .form-control:invalid:focus{border-color:#cd201f;box-shadow:0 0 0 .2rem rgba(205,32,31,.25)}.was-validated textarea.form-control:invalid,textarea.form-control.is-invalid{padding-right:calc(1.4666667em + .75rem);background-position:top calc(.3666667em + .1875rem) right calc(.3666667em + .1875rem)}.form-select.is-invalid,.was-validated .form-select:invalid{border-color:#cd201f;padding-right:calc(.75em + 2.3125rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28110, 117, 130, 0.44%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23cd201f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");background-position:right .75rem center,center right 1.75rem;background-size:16px 12px,calc(.7333333em + .375rem) calc(.7333333em + .375rem)}.form-select.is-invalid:focus,.was-validated .form-select:invalid:focus{border-color:#cd201f;box-shadow:0 0 0 .2rem rgba(205,32,31,.25)}.form-check-input.is-invalid,.was-validated .form-check-input:invalid{border-color:#cd201f}.form-check-input.is-invalid:checked,.was-validated .form-check-input:invalid:checked{background-color:#e23e3d}.form-check-input.is-invalid:focus,.was-validated .form-check-input:invalid:focus{box-shadow:0 0 0 .2rem rgba(205,32,31,.25)}.form-check-input.is-invalid~.form-check-label,.was-validated .form-check-input:invalid~.form-check-label{color:#cd201f}.form-check-inline .form-check-input~.invalid-feedback{margin-left:.5em}.form-file-input.is-invalid~.form-file-label,.was-validated .form-file-input:invalid~.form-file-label{border-color:#cd201f}.form-file-input.is-invalid:focus~.form-file-label,.was-validated .form-file-input:invalid:focus~.form-file-label{border-color:#cd201f;box-shadow:0 0 0 .2rem rgba(205,32,31,.25)}.btn{display:inline-block;font-weight:500;line-height:1.4666667;color:#354052;text-align:center;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent;border:1px solid transparent;padding:.375rem 1rem;font-size:.875rem;border-radius:3px;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:#354052}.btn.focus,.btn:focus{outline:0;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.btn.disabled,.btn:disabled,fieldset:disabled .btn{pointer-events:none;opacity:.65}.btn-primary{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-primary:hover{color:#fff;background-color:#1b59a3;border-color:#195398}.btn-primary.focus,.btn-primary:focus{color:#fff;background-color:#1b59a3;border-color:#195398;box-shadow:0 0 0 .2rem rgba(65,129,205,.5)}.btn-primary.active,.btn-primary:active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#195398;border-color:#174d8d}.btn-primary.active:focus,.btn-primary:active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(65,129,205,.5)}.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-secondary{color:#fff;background-color:#6e7582;border-color:#6e7582}.btn-secondary:hover{color:#fff;background-color:#5c626d;border-color:#575c66}.btn-secondary.focus,.btn-secondary:focus{color:#fff;background-color:#5c626d;border-color:#575c66;box-shadow:0 0 0 .2rem rgba(132,138,149,.5)}.btn-secondary.active,.btn-secondary:active,.show>.btn-secondary.dropdown-toggle{color:#fff;background-color:#575c66;border-color:#51565f}.btn-secondary.active:focus,.btn-secondary:active:focus,.show>.btn-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(132,138,149,.5)}.btn-secondary.disabled,.btn-secondary:disabled{color:#fff;background-color:#6e7582;border-color:#6e7582}.btn-success{color:#fff;background-color:#5eba00;border-color:#5eba00}.btn-success:hover{color:#fff;background-color:#4b9400;border-color:#448700}.btn-success.focus,.btn-success:focus{color:#fff;background-color:#4b9400;border-color:#448700;box-shadow:0 0 0 .2rem rgba(118,196,38,.5)}.btn-success.active,.btn-success:active,.show>.btn-success.dropdown-toggle{color:#fff;background-color:#448700;border-color:#3e7a00}.btn-success.active:focus,.btn-success:active:focus,.show>.btn-success.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(118,196,38,.5)}.btn-success.disabled,.btn-success:disabled{color:#fff;background-color:#5eba00;border-color:#5eba00}.btn-info{color:#fff;background-color:#45aaf2;border-color:#45aaf2}.btn-info:hover{color:#fff;background-color:#219af0;border-color:#1594ef}.btn-info.focus,.btn-info:focus{color:#fff;background-color:#219af0;border-color:#1594ef;box-shadow:0 0 0 .2rem rgba(97,183,244,.5)}.btn-info.active,.btn-info:active,.show>.btn-info.dropdown-toggle{color:#fff;background-color:#1594ef;border-color:#108ee7}.btn-info.active:focus,.btn-info:active:focus,.show>.btn-info.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(97,183,244,.5)}.btn-info.disabled,.btn-info:disabled{color:#fff;background-color:#45aaf2;border-color:#45aaf2}.btn-warning{color:#fff;background-color:#fab005;border-color:#fab005}.btn-warning:hover{color:#fff;background-color:#d59604;border-color:#c88d04}.btn-warning.focus,.btn-warning:focus{color:#fff;background-color:#d59604;border-color:#c88d04;box-shadow:0 0 0 .2rem rgba(251,188,43,.5)}.btn-warning.active,.btn-warning:active,.show>.btn-warning.dropdown-toggle{color:#fff;background-color:#c88d04;border-color:#bc8404}.btn-warning.active:focus,.btn-warning:active:focus,.show>.btn-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(251,188,43,.5)}.btn-warning.disabled,.btn-warning:disabled{color:#fff;background-color:#fab005;border-color:#fab005}.btn-danger{color:#fff;background-color:#cd201f;border-color:#cd201f}.btn-danger:hover{color:#fff;background-color:#ac1b1a;border-color:#a11918}.btn-danger.focus,.btn-danger:focus{color:#fff;background-color:#ac1b1a;border-color:#a11918;box-shadow:0 0 0 .2rem rgba(213,65,65,.5)}.btn-danger.active,.btn-danger:active,.show>.btn-danger.dropdown-toggle{color:#fff;background-color:#a11918;border-color:#961717}.btn-danger.active:focus,.btn-danger:active:focus,.show>.btn-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(213,65,65,.5)}.btn-danger.disabled,.btn-danger:disabled{color:#fff;background-color:#cd201f;border-color:#cd201f}.btn-light{color:#354052;background-color:#f5f7fb;border-color:#f5f7fb}.btn-light:hover{color:#354052;background-color:#dae1f0;border-color:#d1daec}.btn-light.focus,.btn-light:focus{color:#354052;background-color:#dae1f0;border-color:#d1daec;box-shadow:0 0 0 .2rem rgba(216,220,226,.5)}.btn-light.active,.btn-light:active,.show>.btn-light.dropdown-toggle{color:#354052;background-color:#d1daec;border-color:#c7d3e9}.btn-light.active:focus,.btn-light:active:focus,.show>.btn-light.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(216,220,226,.5)}.btn-light.disabled,.btn-light:disabled{color:#354052;background-color:#f5f7fb;border-color:#f5f7fb}.btn-dark{color:#fff;background-color:#354052;border-color:#354052}.btn-dark:hover{color:#fff;background-color:#262e3b;border-color:#212833}.btn-dark.focus,.btn-dark:focus{color:#fff;background-color:#262e3b;border-color:#212833;box-shadow:0 0 0 .2rem rgba(83,93,108,.5)}.btn-dark.active,.btn-dark:active,.show>.btn-dark.dropdown-toggle{color:#fff;background-color:#212833;border-color:#1c222b}.btn-dark.active:focus,.btn-dark:active:focus,.show>.btn-dark.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(83,93,108,.5)}.btn-dark.disabled,.btn-dark:disabled{color:#fff;background-color:#354052;border-color:#354052}.btn-outline-primary{color:#206bc4;border-color:#206bc4}.btn-outline-primary:hover{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-outline-primary.focus,.btn-outline-primary:focus{box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-outline-primary.active,.btn-outline-primary.dropdown-toggle.show,.btn-outline-primary:active{color:#fff;background-color:#206bc4;border-color:#206bc4}.btn-outline-primary.active:focus,.btn-outline-primary.dropdown-toggle.show:focus,.btn-outline-primary:active:focus{box-shadow:0 0 0 .2rem rgba(32,107,196,.5)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:#206bc4;background-color:transparent}.btn-outline-secondary{color:#6e7582;border-color:#6e7582}.btn-outline-secondary:hover{color:#fff;background-color:#6e7582;border-color:#6e7582}.btn-outline-secondary.focus,.btn-outline-secondary:focus{box-shadow:0 0 0 .2rem rgba(110,117,130,.5)}.btn-outline-secondary.active,.btn-outline-secondary.dropdown-toggle.show,.btn-outline-secondary:active{color:#fff;background-color:#6e7582;border-color:#6e7582}.btn-outline-secondary.active:focus,.btn-outline-secondary.dropdown-toggle.show:focus,.btn-outline-secondary:active:focus{box-shadow:0 0 0 .2rem rgba(110,117,130,.5)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{color:#6e7582;background-color:transparent}.btn-outline-success{color:#5eba00;border-color:#5eba00}.btn-outline-success:hover{color:#fff;background-color:#5eba00;border-color:#5eba00}.btn-outline-success.focus,.btn-outline-success:focus{box-shadow:0 0 0 .2rem rgba(94,186,0,.5)}.btn-outline-success.active,.btn-outline-success.dropdown-toggle.show,.btn-outline-success:active{color:#fff;background-color:#5eba00;border-color:#5eba00}.btn-outline-success.active:focus,.btn-outline-success.dropdown-toggle.show:focus,.btn-outline-success:active:focus{box-shadow:0 0 0 .2rem rgba(94,186,0,.5)}.btn-outline-success.disabled,.btn-outline-success:disabled{color:#5eba00;background-color:transparent}.btn-outline-info{color:#45aaf2;border-color:#45aaf2}.btn-outline-info:hover{color:#fff;background-color:#45aaf2;border-color:#45aaf2}.btn-outline-info.focus,.btn-outline-info:focus{box-shadow:0 0 0 .2rem rgba(69,170,242,.5)}.btn-outline-info.active,.btn-outline-info.dropdown-toggle.show,.btn-outline-info:active{color:#fff;background-color:#45aaf2;border-color:#45aaf2}.btn-outline-info.active:focus,.btn-outline-info.dropdown-toggle.show:focus,.btn-outline-info:active:focus{box-shadow:0 0 0 .2rem rgba(69,170,242,.5)}.btn-outline-info.disabled,.btn-outline-info:disabled{color:#45aaf2;background-color:transparent}.btn-outline-warning{color:#fab005;border-color:#fab005}.btn-outline-warning:hover{color:#fff;background-color:#fab005;border-color:#fab005}.btn-outline-warning.focus,.btn-outline-warning:focus{box-shadow:0 0 0 .2rem rgba(250,176,5,.5)}.btn-outline-warning.active,.btn-outline-warning.dropdown-toggle.show,.btn-outline-warning:active{color:#fff;background-color:#fab005;border-color:#fab005}.btn-outline-warning.active:focus,.btn-outline-warning.dropdown-toggle.show:focus,.btn-outline-warning:active:focus{box-shadow:0 0 0 .2rem rgba(250,176,5,.5)}.btn-outline-warning.disabled,.btn-outline-warning:disabled{color:#fab005;background-color:transparent}.btn-outline-danger{color:#cd201f;border-color:#cd201f}.btn-outline-danger:hover{color:#fff;background-color:#cd201f;border-color:#cd201f}.btn-outline-danger.focus,.btn-outline-danger:focus{box-shadow:0 0 0 .2rem rgba(205,32,31,.5)}.btn-outline-danger.active,.btn-outline-danger.dropdown-toggle.show,.btn-outline-danger:active{color:#fff;background-color:#cd201f;border-color:#cd201f}.btn-outline-danger.active:focus,.btn-outline-danger.dropdown-toggle.show:focus,.btn-outline-danger:active:focus{box-shadow:0 0 0 .2rem rgba(205,32,31,.5)}.btn-outline-danger.disabled,.btn-outline-danger:disabled{color:#cd201f;background-color:transparent}.btn-outline-light{color:#f5f7fb;border-color:#f5f7fb}.btn-outline-light:hover{color:#354052;background-color:#f5f7fb;border-color:#f5f7fb}.btn-outline-light.focus,.btn-outline-light:focus{box-shadow:0 0 0 .2rem rgba(245,247,251,.5)}.btn-outline-light.active,.btn-outline-light.dropdown-toggle.show,.btn-outline-light:active{color:#354052;background-color:#f5f7fb;border-color:#f5f7fb}.btn-outline-light.active:focus,.btn-outline-light.dropdown-toggle.show:focus,.btn-outline-light:active:focus{box-shadow:0 0 0 .2rem rgba(245,247,251,.5)}.btn-outline-light.disabled,.btn-outline-light:disabled{color:#f5f7fb;background-color:transparent}.btn-outline-dark{color:#354052;border-color:#354052}.btn-outline-dark:hover{color:#fff;background-color:#354052;border-color:#354052}.btn-outline-dark.focus,.btn-outline-dark:focus{box-shadow:0 0 0 .2rem rgba(53,64,82,.5)}.btn-outline-dark.active,.btn-outline-dark.dropdown-toggle.show,.btn-outline-dark:active{color:#fff;background-color:#354052;border-color:#354052}.btn-outline-dark.active:focus,.btn-outline-dark.dropdown-toggle.show:focus,.btn-outline-dark:active:focus{box-shadow:0 0 0 .2rem rgba(53,64,82,.5)}.btn-outline-dark.disabled,.btn-outline-dark:disabled{color:#354052;background-color:transparent}.btn-link{font-weight:400;color:#206bc4;text-decoration:none}.btn-link:hover{color:#154782}.btn-link.disabled,.btn-link:disabled{color:#a8aeb7}.btn-group-lg>.btn,.btn-lg{padding:.5rem 1.5rem;font-size:calc(1.2625rem + .15vw);border-radius:.3rem}@media (min-width:1200px){.btn-group-lg>.btn,.btn-lg{font-size:1.375rem}}.btn-group-sm>.btn,.btn-sm{padding:.125rem .5rem;font-size:.75rem;border-radius:.2rem}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:.5rem}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{height:0;overflow:hidden;transition:height .35s ease}@media (prefers-reduced-motion:reduce){.collapsing{transition:none}}.dropdown,.dropleft,.dropright,.dropup{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle:after{content:"";display:inline-block;vertical-align:.306em;width:.36em;height:.36em;border-bottom:1px solid;border-left:1px solid;margin-right:.1em;margin-left:.4em;transform:rotate(-45deg)}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;min-width:14rem;padding:.5rem 0;margin:1px 0 0;font-size:.875rem;color:#354052;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(110,117,130,.2);border-radius:3px}.dropdown-menu-left{right:auto;left:0}.dropdown-menu-right{right:0;left:auto}@media (min-width:33rem){.dropdown-menu-sm-left{right:auto;left:0}.dropdown-menu-sm-right{right:0;left:auto}}@media (min-width:48rem){.dropdown-menu-md-left{right:auto;left:0}.dropdown-menu-md-right{right:0;left:auto}}@media (min-width:64rem){.dropdown-menu-lg-left{right:auto;left:0}.dropdown-menu-lg-right{right:0;left:auto}}@media (min-width:75.25rem){.dropdown-menu-xl-left{right:auto;left:0}.dropdown-menu-xl-right{right:0;left:auto}}.dropup .dropdown-menu{top:auto;bottom:100%;margin-top:0;margin-bottom:1px}.dropup .dropdown-toggle:after{content:"";display:inline-block;vertical-align:.306em;width:.36em;height:.36em;border-bottom:1px solid;border-left:1px solid;margin-right:.1em;margin-left:.4em;transform:rotate(135deg)}.dropright .dropdown-menu{top:0;right:auto;left:100%;margin-top:0;margin-left:1px}.dropright .dropdown-toggle:after{content:"";display:inline-block;vertical-align:.306em;width:.36em;height:.36em;border-bottom:1px solid;border-left:1px solid;margin-right:.1em;margin-left:.4em;transform:rotate(-135deg)}.dropright .dropdown-toggle::after{vertical-align:0}.dropleft .dropdown-menu{top:0;right:100%;left:auto;margin-top:0;margin-right:1px}.dropleft .dropdown-toggle:before{content:"";display:inline-block;vertical-align:.306em;width:.36em;height:.36em;border-bottom:1px solid;border-left:1px solid;margin-right:.1em;margin-right:.4em;transform:rotate(45deg)}.dropleft .dropdown-toggle:after{content:none}.dropleft .dropdown-toggle::before{vertical-align:0}.dropdown-menu[x-placement^=bottom],.dropdown-menu[x-placement^=left],.dropdown-menu[x-placement^=right],.dropdown-menu[x-placement^=top]{right:auto;bottom:auto}.dropdown-divider{height:0;margin:.5rem 0;overflow:hidden;border-top:1px solid rgba(110,117,130,.2)}.dropdown-item{display:block;width:100%;padding:.25rem 1rem;clear:both;font-weight:400;color:#354052;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}.dropdown-item:focus,.dropdown-item:hover{color:inherit;background-color:rgba(110,117,130,.06)}.dropdown-item.active,.dropdown-item:active{color:#206bc4;text-decoration:none;background-color:rgba(32,107,196,.06)}.dropdown-item.disabled,.dropdown-item:disabled{color:#a8aeb7;pointer-events:none;background-color:transparent}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:.5rem 1rem;margin-bottom:0;font-size:.765625rem;color:#a8aeb7;white-space:nowrap}.dropdown-item-text{display:block;padding:.25rem 1rem;color:#354052}.btn-group,.btn-group-vertical{position:relative;display:inline-flex;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;flex:1 1 auto}.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:hover,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover{z-index:1}.btn-toolbar{display:flex;flex-wrap:wrap;justify-content:flex-start}.btn-toolbar .input-group{width:auto}.btn-group>.btn-group:not(:first-child),.btn-group>.btn:not(:first-child){margin-left:-1px}.btn-group>.btn-group:not(:last-child)>.btn,.btn-group>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:not(:first-child)>.btn,.btn-group>.btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.dropdown-toggle-split::after,.dropright .dropdown-toggle-split::after,.dropup .dropdown-toggle-split::after{margin-left:0}.dropleft .dropdown-toggle-split::before{margin-right:0}.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split{padding-right:.375rem;padding-left:.375rem}.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split{padding-right:1.125rem;padding-left:1.125rem}.btn-group-vertical{flex-direction:column;align-items:flex-start;justify-content:center}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group{width:100%}.btn-group-vertical>.btn-group:not(:first-child),.btn-group-vertical>.btn:not(:first-child){margin-top:-1px}.btn-group-vertical>.btn-group:not(:last-child)>.btn,.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle){border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:not(:first-child)>.btn,.btn-group-vertical>.btn:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.btn-group-toggle>.btn,.btn-group-toggle>.btn-group>.btn{margin-bottom:0}.btn-group-toggle>.btn input[type=checkbox],.btn-group-toggle>.btn input[type=radio],.btn-group-toggle>.btn-group>.btn input[type=checkbox],.btn-group-toggle>.btn-group>.btn input[type=radio]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.nav{display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:.25rem .75rem}.nav-link.disabled{color:#a8aeb7;pointer-events:none;cursor:default}.nav-tabs{border-bottom:1px solid #e9ecf1}.nav-tabs .nav-link{margin-bottom:-1px;border:1px solid transparent;border-top-left-radius:3px;border-top-right-radius:3px}.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover{border-color:#f1f3f8 #f1f3f8 #e9ecf1}.nav-tabs .nav-link.disabled{color:#a8aeb7;background-color:transparent;border-color:transparent}.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{color:#7a828f;background-color:#f5f7fb;border-color:#e9ecf1 #e9ecf1 #f5f7fb}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}.nav-pills .nav-link{border-radius:3px}.nav-pills .nav-link.active,.nav-pills .show>.nav-link{color:#fff;background-color:#206bc4}.nav-fill .nav-item{flex:1 1 auto;text-align:center}.nav-justified .nav-item{flex-basis:0;flex-grow:1;text-align:center}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.navbar{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-top:.25rem;padding-bottom:.25rem}.navbar>.container,.navbar>.container-fluid,.navbar>.container-lg,.navbar>.container-md,.navbar>.container-sm,.navbar>.container-xl{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}.navbar-brand{padding-top:.25rem;padding-bottom:.25rem;margin-right:0;font-size:1.125rem;white-space:nowrap}.navbar-brand:focus,.navbar-brand:hover{text-decoration:none}.navbar-nav{display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link{padding-right:0;padding-left:0}.navbar-nav .dropdown-menu{position:static}.navbar-text{padding-top:.25rem;padding-bottom:.25rem}.navbar-collapse{align-items:center;width:100%}.navbar-toggler{padding:0 0;font-size:1rem;line-height:1;background-color:transparent;border:1px solid transparent;border-radius:3px;transition:box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-toggler:hover{text-decoration:none}.navbar-toggler:focus{text-decoration:none;outline:0;box-shadow:0 0}.navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;background-repeat:no-repeat;background-position:center;background-size:100%}@media (min-width:33rem){.navbar-expand-sm{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm .navbar-nav .nav-link{padding-right:.75rem;padding-left:.75rem}.navbar-expand-sm .navbar-collapse{display:flex!important}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:48rem){.navbar-expand-md{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-md .navbar-nav .nav-link{padding-right:.75rem;padding-left:.75rem}.navbar-expand-md .navbar-collapse{display:flex!important}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:64rem){.navbar-expand-lg{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-lg .navbar-nav .nav-link{padding-right:.75rem;padding-left:.75rem}.navbar-expand-lg .navbar-collapse{display:flex!important}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:75.25rem){.navbar-expand-xl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xl .navbar-nav .nav-link{padding-right:.75rem;padding-left:.75rem}.navbar-expand-xl .navbar-collapse{display:flex!important}.navbar-expand-xl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.navbar-expand .navbar-nav .nav-link{padding-right:.75rem;padding-left:.75rem}.navbar-expand .navbar-collapse{display:flex!important}.navbar-expand .navbar-toggler{display:none}.navbar-light .navbar-brand{color:#354052}.navbar-light .navbar-brand:focus,.navbar-light .navbar-brand:hover{color:#354052}.navbar-light .navbar-nav .nav-link{color:rgba(53,64,82,.72)}.navbar-light .navbar-nav .nav-link:focus,.navbar-light .navbar-nav .nav-link:hover{color:rgba(0,0,0,.7)}.navbar-light .navbar-nav .nav-link.disabled{color:rgba(53,64,82,.3)}.navbar-light .navbar-nav .active>.nav-link,.navbar-light .navbar-nav .nav-link.active,.navbar-light .navbar-nav .nav-link.show,.navbar-light .navbar-nav .show>.nav-link{color:#354052}.navbar-light .navbar-toggler{color:rgba(53,64,82,.72);border-color:rgba(0,0,0,.1)}.navbar-light .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2853, 64, 82, 0.72%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.navbar-light .navbar-text{color:rgba(53,64,82,.72)}.navbar-light .navbar-text a,.navbar-light .navbar-text a:focus,.navbar-light .navbar-text a:hover{color:#354052}.navbar-dark .navbar-brand{color:#fff}.navbar-dark .navbar-brand:focus,.navbar-dark .navbar-brand:hover{color:#fff}.navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,.72)}.navbar-dark .navbar-nav .nav-link:focus,.navbar-dark .navbar-nav .nav-link:hover{color:rgba(255,255,255,.75)}.navbar-dark .navbar-nav .nav-link.disabled{color:rgba(255,255,255,.3)}.navbar-dark .navbar-nav .active>.nav-link,.navbar-dark .navbar-nav .nav-link.active,.navbar-dark .navbar-nav .nav-link.show,.navbar-dark .navbar-nav .show>.nav-link{color:#fff}.navbar-dark .navbar-toggler{color:rgba(255,255,255,.72);border-color:rgba(255,255,255,.1)}.navbar-dark .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.72%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.navbar-dark .navbar-text{color:rgba(255,255,255,.72)}.navbar-dark .navbar-text a,.navbar-dark .navbar-text a:focus,.navbar-dark .navbar-text a:hover{color:#fff}.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(110,117,130,.2);border-radius:3px}.card>.hr,.card>hr{margin-right:0;margin-left:0}.card>.list-group:first-child .list-group-item:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.card>.list-group:last-child .list-group-item:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.card-body{flex:1 1 auto;padding:1.25rem 1.25rem}.card-title{margin-bottom:.75rem}.card-subtitle{margin-top:-.375rem;margin-bottom:0}.card-text:last-child{margin-bottom:0}.card-link:hover{text-decoration:none}.card-link+.card-link{margin-left:1.25rem}.card-header{padding:.75rem 1.25rem;margin-bottom:0;background-color:rgba(53,64,82,.024);border-bottom:1px solid rgba(110,117,130,.2)}.card-header:first-child{border-radius:2px 2px 0 0}.card-header+.list-group .list-group-item:first-child{border-top:0}.card-footer{padding:.75rem 1.25rem;background-color:rgba(53,64,82,.024);border-top:1px solid rgba(110,117,130,.2)}.card-footer:last-child{border-radius:0 0 2px 2px}.card-header-tabs{margin-right:-.625rem;margin-bottom:-.75rem;margin-left:-.625rem;border-bottom:0}.card-header-tabs .nav-link.active{background-color:#fff;border-bottom-color:#fff}.card-header-pills{margin-right:-.625rem;margin-left:-.625rem}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:1.25rem}.card-img,.card-img-bottom,.card-img-top{width:100%}.card-img,.card-img-top{border-top-left-radius:2px;border-top-right-radius:2px}.card-img,.card-img-bottom{border-bottom-right-radius:2px;border-bottom-left-radius:2px}.card-group>.card{margin-bottom:1.5rem}@media (min-width:33rem){.card-group{display:flex;flex-flow:row wrap}.card-group>.card{flex:1 0 0%;margin-bottom:0}.card-group>.card+.card{margin-left:0;border-left:0}.card-group>.card:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.card-group>.card:not(:last-child) .card-header,.card-group>.card:not(:last-child) .card-img-top{border-top-right-radius:0}.card-group>.card:not(:last-child) .card-footer,.card-group>.card:not(:last-child) .card-img-bottom{border-bottom-right-radius:0}.card-group>.card:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.card-group>.card:not(:first-child) .card-header,.card-group>.card:not(:first-child) .card-img-top{border-top-left-radius:0}.card-group>.card:not(:first-child) .card-footer,.card-group>.card:not(:first-child) .card-img-bottom{border-bottom-left-radius:0}}.accordion>.card{overflow:hidden}.accordion>.card:not(:last-of-type){border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.accordion>.card:not(:first-of-type){border-top-left-radius:0;border-top-right-radius:0}.accordion>.card>.card-header{border-radius:0;margin-bottom:-1px}.breadcrumb{display:flex;flex-wrap:wrap;padding:.75rem 1rem;margin-bottom:1rem;list-style:none;background-color:#f1f3f8;border-radius:3px}.breadcrumb-item{display:flex}.breadcrumb-item+.breadcrumb-item{padding-left:.5rem}.breadcrumb-item+.breadcrumb-item::before{display:inline-block;padding-right:.5rem;color:#a8aeb7;content:"/"}.breadcrumb-item.active{color:#a8aeb7}.pagination{display:flex;padding-left:0;list-style:none}.page-link{position:relative;display:block;color:#6e7582;background-color:transparent;border:0 solid #e9ecf1}.page-link:hover{z-index:2;color:#154782;background-color:#f1f3f8;border-color:#e9ecf1}.page-link:focus{z-index:3;outline:0;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.page-item:not(:first-child) .page-link{margin-left:0}.page-item.active .page-link{z-index:3;color:#fff;background-color:#206bc4;border-color:#206bc4}.page-item.disabled .page-link{color:rgba(110,117,130,.5);pointer-events:none;background-color:transparent;border-color:#e9ecf1}.page-link{padding:.25rem .25rem}.page-item:first-child .page-link{border-top-left-radius:3px;border-bottom-left-radius:3px}.page-item:last-child .page-link{border-top-right-radius:3px;border-bottom-right-radius:3px}.pagination-lg .page-link{padding:.75rem 1.5rem;font-size:1.09375rem}.pagination-lg .page-item:first-child .page-link{border-top-left-radius:.3rem;border-bottom-left-radius:.3rem}.pagination-lg .page-item:last-child .page-link{border-top-right-radius:.3rem;border-bottom-right-radius:.3rem}.pagination-sm .page-link{padding:.25rem .5rem;font-size:.765625rem}.pagination-sm .page-item:first-child .page-link{border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}.pagination-sm .page-item:last-child .page-link{border-top-right-radius:.2rem;border-bottom-right-radius:.2rem}.badge{display:inline-block;padding:.125rem .25rem;font-size:.625rem;font-weight:500;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:3px}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.alert{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:3px}.alert-heading{color:inherit}.alert-link{font-weight:500}.alert-dismissible{padding-right:4rem}.alert-dismissible .close{position:absolute;top:0;right:0;padding:.75rem 1.25rem;color:inherit}.alert-primary{color:#061527;background-color:#d2e1f3;border-color:#a6c4e7}.alert-primary .alert-link{color:#000}.alert-secondary{color:#16171a;background-color:#e2e3e6;border-color:#c5c8cd}.alert-secondary .alert-link{color:#000}.alert-success{color:#132500;background-color:#dff1cc;border-color:#bfe399}.alert-success .alert-link{color:#000}.alert-info{color:#0e2230;background-color:#daeefc;border-color:#b5ddfa}.alert-info .alert-link{color:#020609}.alert-warning{color:#322301;background-color:#feefcd;border-color:#fddf9b}.alert-warning .alert-link{color:#000}.alert-danger{color:#290606;background-color:#f5d2d2;border-color:#eba6a5}.alert-danger .alert-link{color:#000}.alert-light{color:#313132;background-color:#fdfdfe;border-color:#fbfcfd}.alert-light .alert-link{color:#181818}.alert-dark{color:#0b0d10;background-color:#d7d9dc;border-color:#aeb3ba}.alert-dark .alert-link{color:#000}@-webkit-keyframes progress-bar-stripes{0%{background-position-x:.5rem}}@keyframes progress-bar-stripes{0%{background-position-x:.5rem}}.progress{display:flex;height:.5rem;overflow:hidden;font-size:.65625rem;background-color:rgba(176,181,190,.24);border-radius:3px}.progress-bar{display:flex;flex-direction:column;justify-content:center;overflow:hidden;color:#fff;text-align:center;white-space:nowrap;background-color:#206bc4;transition:width .6s ease}@media (prefers-reduced-motion:reduce){.progress-bar{transition:none}}.progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:.5rem .5rem}.progress-bar-animated{-webkit-animation:progress-bar-stripes 1s linear infinite;animation:progress-bar-stripes 1s linear infinite}@media (prefers-reduced-motion:reduce){.progress-bar-animated{-webkit-animation:none;animation:none}}.list-group{display:flex;flex-direction:column;padding-left:0;margin-bottom:0}.list-group-item-action{width:100%;color:inherit;text-align:inherit}.list-group-item-action:focus,.list-group-item-action:hover{z-index:1;color:inherit;text-decoration:none;background-color:#f5f7fb}.list-group-item-action:active{color:#354052;background-color:#f1f3f8}.list-group-item{position:relative;display:block;padding:.5rem .75rem;margin-bottom:0;background-color:inherit;border:1px solid rgba(110,117,130,.2)}.list-group-item:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.list-group-item:last-child{border-bottom-right-radius:3px;border-bottom-left-radius:3px}.list-group-item.disabled,.list-group-item:disabled{color:#a8aeb7;pointer-events:none;background-color:inherit}.list-group-item.active{z-index:2;color:#fff;background-color:#206bc4;border-color:#206bc4}.list-group-item+.list-group-item{border-top-width:0}.list-group-item+.list-group-item.active{margin-top:-1px;border-top-width:1px}.list-group-horizontal{flex-direction:row}.list-group-horizontal .list-group-item:first-child{border-bottom-left-radius:3px;border-top-right-radius:0}.list-group-horizontal .list-group-item:last-child{border-top-right-radius:3px;border-bottom-left-radius:0}.list-group-horizontal .list-group-item.active{margin-top:0}.list-group-horizontal .list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal .list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}@media (min-width:33rem){.list-group-horizontal-sm{flex-direction:row}.list-group-horizontal-sm .list-group-item:first-child{border-bottom-left-radius:3px;border-top-right-radius:0}.list-group-horizontal-sm .list-group-item:last-child{border-top-right-radius:3px;border-bottom-left-radius:0}.list-group-horizontal-sm .list-group-item.active{margin-top:0}.list-group-horizontal-sm .list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-sm .list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media (min-width:48rem){.list-group-horizontal-md{flex-direction:row}.list-group-horizontal-md .list-group-item:first-child{border-bottom-left-radius:3px;border-top-right-radius:0}.list-group-horizontal-md .list-group-item:last-child{border-top-right-radius:3px;border-bottom-left-radius:0}.list-group-horizontal-md .list-group-item.active{margin-top:0}.list-group-horizontal-md .list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-md .list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media (min-width:64rem){.list-group-horizontal-lg{flex-direction:row}.list-group-horizontal-lg .list-group-item:first-child{border-bottom-left-radius:3px;border-top-right-radius:0}.list-group-horizontal-lg .list-group-item:last-child{border-top-right-radius:3px;border-bottom-left-radius:0}.list-group-horizontal-lg .list-group-item.active{margin-top:0}.list-group-horizontal-lg .list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-lg .list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media (min-width:75.25rem){.list-group-horizontal-xl{flex-direction:row}.list-group-horizontal-xl .list-group-item:first-child{border-bottom-left-radius:3px;border-top-right-radius:0}.list-group-horizontal-xl .list-group-item:last-child{border-top-right-radius:3px;border-bottom-left-radius:0}.list-group-horizontal-xl .list-group-item.active{margin-top:0}.list-group-horizontal-xl .list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-xl .list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}.list-group-flush .list-group-item{border-right-width:0;border-left-width:0;border-radius:0}.list-group-flush .list-group-item:first-child{border-top-width:0}.list-group-flush:last-child .list-group-item:last-child{border-bottom-width:0}.list-group-item-primary{color:#0d2b4e;background-color:#e9f0f9}.list-group-item-primary.list-group-item-action:focus,.list-group-item-primary.list-group-item-action:hover{color:#0d2b4e;background-color:#d5e2f4}.list-group-item-primary.list-group-item-action.active{color:#fff;background-color:#0d2b4e;border-color:#0d2b4e}.list-group-item-secondary{color:#2c2f34;background-color:#f1f1f3}.list-group-item-secondary.list-group-item-action:focus,.list-group-item-secondary.list-group-item-action:hover{color:#2c2f34;background-color:#e3e3e7}.list-group-item-secondary.list-group-item-action.active{color:#fff;background-color:#2c2f34;border-color:#2c2f34}.list-group-item-success{color:#264a00;background-color:#eff8e6}.list-group-item-success.list-group-item-action:focus,.list-group-item-success.list-group-item-action:hover{color:#264a00;background-color:#e2f2d2}.list-group-item-success.list-group-item-action.active{color:#fff;background-color:#264a00;border-color:#264a00}.list-group-item-info{color:#1c4461;background-color:#ecf7fe}.list-group-item-info.list-group-item-action:focus,.list-group-item-info.list-group-item-action:hover{color:#1c4461;background-color:#d4edfd}.list-group-item-info.list-group-item-action.active{color:#fff;background-color:#1c4461;border-color:#1c4461}.list-group-item-warning{color:#644602;background-color:#fff7e6}.list-group-item-warning.list-group-item-action:focus,.list-group-item-warning.list-group-item-action:hover{color:#644602;background-color:#ffefcd}.list-group-item-warning.list-group-item-action.active{color:#fff;background-color:#644602;border-color:#644602}.list-group-item-danger{color:#520d0c;background-color:#fae9e9}.list-group-item-danger.list-group-item-action:focus,.list-group-item-danger.list-group-item-action:hover{color:#520d0c;background-color:#f5d4d4}.list-group-item-danger.list-group-item-action.active{color:#fff;background-color:#520d0c;border-color:#520d0c}.list-group-item-light{color:#626364;background-color:#fefeff}.list-group-item-light.list-group-item-action:focus,.list-group-item-light.list-group-item-action:hover{color:#626364;background-color:#e5e5ff}.list-group-item-light.list-group-item-action.active{color:#fff;background-color:#626364;border-color:#626364}.list-group-item-dark{color:#151a21;background-color:#ebecee}.list-group-item-dark.list-group-item-action:focus,.list-group-item-dark.list-group-item-action:hover{color:#151a21;background-color:#dddfe2}.list-group-item-dark.list-group-item-action.active{color:#fff;background-color:#151a21;border-color:#151a21}.close{font-size:calc(1.275rem + .3vw);font-weight:400;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}@media (min-width:1200px){.close{font-size:1.5rem}}.close:hover{color:#000;text-decoration:none}.close:focus,.close:hover{opacity:.75}.close.disabled,.close:disabled{pointer-events:none}button.close{padding:0;background-color:transparent;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.toast{max-width:350px;overflow:hidden;font-size:.875rem;background-color:rgba(255,255,255,.85);background-clip:padding-box;border:1px solid rgba(110,117,130,.2);box-shadow:0 .5rem 1rem rgba(0,0,0,.15);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;border-radius:3px}.toast:not(:last-child){margin-bottom:.75rem}.toast.showing{opacity:1}.toast.show{display:block;opacity:1}.toast.hide{display:none}.toast-header{display:flex;align-items:center;padding:.25rem .75rem;color:#6e7582;background-color:rgba(255,255,255,.85);background-clip:padding-box;border-bottom:1px solid rgba(0,0,0,.05)}.toast-body{padding:.75rem}.modal-open{overflow:hidden}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal{position:fixed;top:0;left:0;z-index:1050;display:none;width:100%;height:100%;overflow:hidden;outline:0}.modal-dialog{position:relative;width:auto;margin:.5rem;pointer-events:none}.modal.fade .modal-dialog{transition:transform .3s ease-out;transform:translate(0,-1rem)}@media (prefers-reduced-motion:reduce){.modal.fade .modal-dialog{transition:none}}.modal.show .modal-dialog{transform:none}.modal.modal-static .modal-dialog{transform:scale(1.02)}.modal-dialog-scrollable{max-height:calc(100% - 1rem)}.modal-dialog-scrollable .modal-content{overflow:hidden}.modal-dialog-scrollable .modal-footer,.modal-dialog-scrollable .modal-header{flex-shrink:0}.modal-dialog-scrollable .modal-body{overflow-y:auto}.modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - 1rem)}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background-color:#fbfbfb;background-clip:padding-box;border:1px solid rgba(110,117,130,.1);border-radius:3px;outline:0}.modal-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#354052}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:.24}.modal-header{display:flex;align-items:flex-start;justify-content:space-between;padding:1.5rem;border-bottom:1px solid rgba(110,117,130,.1);border-top-left-radius:2px;border-top-right-radius:2px}.modal-header .close{padding:1.5rem;margin:-1rem -1rem -1rem auto}.modal-title{margin-bottom:0;line-height:1.7142857}.modal-body{position:relative;flex:1 1 auto;padding:1.5rem}.modal-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;padding:1.125rem;border-top:0 solid rgba(110,117,130,.1);border-bottom-right-radius:2px;border-bottom-left-radius:2px}.modal-footer>*{margin:.375rem}.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media (min-width:33rem){.modal-dialog{max-width:540px;margin:1.75rem auto}.modal-dialog-scrollable{max-height:calc(100% - 3.5rem)}.modal-dialog-centered{min-height:calc(100% - 3.5rem)}.modal-sm{max-width:380px}}@media (min-width:64rem){.modal-lg,.modal-xl{max-width:720px}}@media (min-width:75.25rem){.modal-xl{max-width:1140px}}.tooltip{position:absolute;z-index:1070;display:block;margin:0;font-family:Ubuntu,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-style:normal;font-weight:400;line-height:1.7142857;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.765625rem;word-wrap:break-word;opacity:0}.tooltip.show{opacity:.9}.tooltip .tooltip-arrow{position:absolute;display:block;width:.8rem;height:.4rem}.tooltip .tooltip-arrow::before{position:absolute;content:"";border-color:transparent;border-style:solid}.bs-tooltip-auto[x-placement^=top],.bs-tooltip-top{padding:.4rem 0}.bs-tooltip-auto[x-placement^=top] .tooltip-arrow,.bs-tooltip-top .tooltip-arrow{bottom:0}.bs-tooltip-auto[x-placement^=top] .tooltip-arrow::before,.bs-tooltip-top .tooltip-arrow::before{top:0;border-width:.4rem .4rem 0;border-top-color:#000}.bs-tooltip-auto[x-placement^=right],.bs-tooltip-right{padding:0 .4rem}.bs-tooltip-auto[x-placement^=right] .tooltip-arrow,.bs-tooltip-right .tooltip-arrow{left:0;width:.4rem;height:.8rem}.bs-tooltip-auto[x-placement^=right] .tooltip-arrow::before,.bs-tooltip-right .tooltip-arrow::before{right:0;border-width:.4rem .4rem .4rem 0;border-right-color:#000}.bs-tooltip-auto[x-placement^=bottom],.bs-tooltip-bottom{padding:.4rem 0}.bs-tooltip-auto[x-placement^=bottom] .tooltip-arrow,.bs-tooltip-bottom .tooltip-arrow{top:0}.bs-tooltip-auto[x-placement^=bottom] .tooltip-arrow::before,.bs-tooltip-bottom .tooltip-arrow::before{bottom:0;border-width:0 .4rem .4rem;border-bottom-color:#000}.bs-tooltip-auto[x-placement^=left],.bs-tooltip-left{padding:0 .4rem}.bs-tooltip-auto[x-placement^=left] .tooltip-arrow,.bs-tooltip-left .tooltip-arrow{right:0;width:.4rem;height:.8rem}.bs-tooltip-auto[x-placement^=left] .tooltip-arrow::before,.bs-tooltip-left .tooltip-arrow::before{left:0;border-width:.4rem 0 .4rem .4rem;border-left-color:#000}.tooltip-inner{max-width:200px;padding:.25rem .5rem;color:#fff;text-align:center;background-color:#000;border-radius:3px}.popover{position:absolute;top:0;left:0;z-index:1060;display:block;max-width:276px;font-family:Ubuntu,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-style:normal;font-weight:400;line-height:1.7142857;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.765625rem;word-wrap:break-word;background-color:#fff;background-clip:padding-box;border:1px solid rgba(110,117,130,.2);border-radius:.3rem}.popover .popover-arrow{position:absolute;display:block;width:1rem;height:.5rem;margin:0 .3rem}.popover .popover-arrow::after,.popover .popover-arrow::before{position:absolute;display:block;content:"";border-color:transparent;border-style:solid}.bs-popover-auto[x-placement^=top],.bs-popover-top{margin-bottom:.5rem}.bs-popover-auto[x-placement^=top]>.popover-arrow,.bs-popover-top>.popover-arrow{bottom:calc(-.5rem - 1px)}.bs-popover-auto[x-placement^=top]>.popover-arrow::before,.bs-popover-top>.popover-arrow::before{bottom:0;border-width:.5rem .5rem 0;border-top-color:rgba(110,117,130,.25)}.bs-popover-auto[x-placement^=top]>.popover-arrow::after,.bs-popover-top>.popover-arrow::after{bottom:1px;border-width:.5rem .5rem 0;border-top-color:#fff}.bs-popover-auto[x-placement^=right],.bs-popover-right{margin-left:.5rem}.bs-popover-auto[x-placement^=right]>.popover-arrow,.bs-popover-right>.popover-arrow{left:calc(-.5rem - 1px);width:.5rem;height:1rem;margin:.3rem 0}.bs-popover-auto[x-placement^=right]>.popover-arrow::before,.bs-popover-right>.popover-arrow::before{left:0;border-width:.5rem .5rem .5rem 0;border-right-color:rgba(110,117,130,.25)}.bs-popover-auto[x-placement^=right]>.popover-arrow::after,.bs-popover-right>.popover-arrow::after{left:1px;border-width:.5rem .5rem .5rem 0;border-right-color:#fff}.bs-popover-auto[x-placement^=bottom],.bs-popover-bottom{margin-top:.5rem}.bs-popover-auto[x-placement^=bottom]>.popover-arrow,.bs-popover-bottom>.popover-arrow{top:calc(-.5rem - 1px)}.bs-popover-auto[x-placement^=bottom]>.popover-arrow::before,.bs-popover-bottom>.popover-arrow::before{top:0;border-width:0 .5rem .5rem .5rem;border-bottom-color:rgba(110,117,130,.25)}.bs-popover-auto[x-placement^=bottom]>.popover-arrow::after,.bs-popover-bottom>.popover-arrow::after{top:1px;border-width:0 .5rem .5rem .5rem;border-bottom-color:#fff}.bs-popover-auto[x-placement^=bottom] .popover-header::before,.bs-popover-bottom .popover-header::before{position:absolute;top:0;left:50%;display:block;width:1rem;margin-left:-.5rem;content:"";border-bottom:1px solid #f7f7f7}.bs-popover-auto[x-placement^=left],.bs-popover-left{margin-right:.5rem}.bs-popover-auto[x-placement^=left]>.popover-arrow,.bs-popover-left>.popover-arrow{right:calc(-.5rem - 1px);width:.5rem;height:1rem;margin:.3rem 0}.bs-popover-auto[x-placement^=left]>.popover-arrow::before,.bs-popover-left>.popover-arrow::before{right:0;border-width:.5rem 0 .5rem .5rem;border-left-color:rgba(110,117,130,.25)}.bs-popover-auto[x-placement^=left]>.popover-arrow::after,.bs-popover-left>.popover-arrow::after{right:1px;border-width:.5rem 0 .5rem .5rem;border-left-color:#fff}.popover-header{padding:.5rem .75rem;margin-bottom:0;font-size:.875rem;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px)}.popover-header:empty{display:none}.popover-body{padding:.5rem .75rem;color:#354052}.carousel{position:relative}.carousel.pointer-event{touch-action:pan-y}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner::after{display:block;clear:both;content:""}.carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .6s ease-in-out}@media (prefers-reduced-motion:reduce){.carousel-item{transition:none}}.carousel-item-next,.carousel-item-prev,.carousel-item.active{display:block}.active.carousel-item-right,.carousel-item-next:not(.carousel-item-left){transform:translateX(100%)}.active.carousel-item-left,.carousel-item-prev:not(.carousel-item-right){transform:translateX(-100%)}.carousel-fade .carousel-item{opacity:0;transition-property:opacity;transform:none}.carousel-fade .carousel-item-next.carousel-item-left,.carousel-fade .carousel-item-prev.carousel-item-right,.carousel-fade .carousel-item.active{z-index:1;opacity:1}.carousel-fade .active.carousel-item-left,.carousel-fade .active.carousel-item-right{z-index:0;opacity:0;transition:opacity 0s .6s}@media (prefers-reduced-motion:reduce){.carousel-fade .active.carousel-item-left,.carousel-fade .active.carousel-item-right{transition:none}}.carousel-control-next,.carousel-control-prev{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;color:#fff;text-align:center;opacity:.5;transition:opacity .15s ease}@media (prefers-reduced-motion:reduce){.carousel-control-next,.carousel-control-prev{transition:none}}.carousel-control-next:focus,.carousel-control-next:hover,.carousel-control-prev:focus,.carousel-control-prev:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-next-icon,.carousel-control-prev-icon{display:inline-block;width:1.5rem;height:1.5rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.carousel-control-prev-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='15 18 9 12 15 6'%3e%3c/polyline%3e%3c/svg%3e")}.carousel-control-next-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='9 18 15 12 9 6'%3e%3c/polyline%3e%3c/svg%3e")}.carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding-left:0;margin-right:15%;margin-left:15%;list-style:none}.carousel-indicators li{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#fff;background-clip:padding-box;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}@media (prefers-reduced-motion:reduce){.carousel-indicators li{transition:none}}.carousel-indicators .active{opacity:1}.carousel-caption{position:absolute;right:15%;bottom:1.25rem;left:15%;padding-top:1.25rem;padding-bottom:1.25rem;color:#fff;text-align:center}@-webkit-keyframes spinner-border{to{transform:rotate(360deg)}}@keyframes spinner-border{to{transform:rotate(360deg)}}.spinner-border{display:inline-block;width:1.5rem;height:1.5rem;vertical-align:text-bottom;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;-webkit-animation:spinner-border .75s linear infinite;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:1rem;height:1rem;border-width:1px}@-webkit-keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1}}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1}}.spinner-grow{display:inline-block;width:1.5rem;height:1.5rem;vertical-align:text-bottom;background-color:currentColor;border-radius:50%;opacity:0;-webkit-animation:spinner-grow .75s linear infinite;animation:spinner-grow .75s linear infinite}.spinner-grow-sm{width:1rem;height:1rem}.clearfix::after{display:block;clear:both;content:""}.link-primary{color:#206bc4}.link-primary:focus,.link-primary:hover{color:#154782}.link-secondary{color:#6e7582}.link-secondary:focus,.link-secondary:hover{color:#4b5059}.link-success{color:#5eba00}.link-success:focus,.link-success:hover{color:#376e00}.link-info{color:#45aaf2}.link-info:focus,.link-info:hover{color:#0f86db}.link-warning{color:#fab005}.link-warning:focus,.link-warning:hover{color:#af7b04}.link-danger{color:#cd201f}.link-danger:focus,.link-danger:hover{color:#8b1615}.link-light{color:#f5f7fb}.link-light:focus,.link-light:hover{color:#becbe5}.link-dark{color:#354052}.link-dark:focus,.link-dark:hover{color:#171c24}.embed-responsive{position:relative;width:100%}.embed-responsive::before{display:block;content:""}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;left:0;width:100%;height:100%;border:0}.embed-responsive-21by9::before{padding-top:42.8571429%}.embed-responsive-16by9::before{padding-top:56.25%}.embed-responsive-4by3::before{padding-top:75%}.embed-responsive-1by1::before{padding-top:100%}.embed-responsive-2by1::before{padding-top:50%}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}.fixed-bottom{position:fixed;right:0;bottom:0;left:0;z-index:1030}@supports ((position:-webkit-sticky) or (position:sticky)){.sticky-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}@media (min-width:33rem){.sticky-sm-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}@media (min-width:48rem){.sticky-md-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}@media (min-width:64rem){.sticky-lg-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}@media (min-width:75.25rem){.sticky-xl-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}}.sr-only,.sr-only-focusable:not(:focus){position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.stretched-link::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;content:""}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.align-baseline{vertical-align:baseline!important}.align-top{vertical-align:top!important}.align-middle{vertical-align:middle!important}.align-bottom{vertical-align:bottom!important}.align-text-bottom{vertical-align:text-bottom!important}.align-text-top{vertical-align:text-top!important}.float-left{float:left!important}.float-right{float:right!important}.float-none{float:none!important}.overflow-auto{overflow:auto!important}.overflow-hidden{overflow:hidden!important}.d-none{display:none!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-table{display:table!important}.d-table-row{display:table-row!important}.d-table-cell{display:table-cell!important}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.shadow{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}.shadow-sm{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}.shadow-lg{box-shadow:0 1rem 3rem rgba(0,0,0,.175)!important}.shadow-none{box-shadow:none!important}.position-static{position:static!important}.position-relative{position:relative!important}.position-absolute{position:absolute!important}.position-fixed{position:fixed!important}.position-sticky{position:-webkit-sticky!important;position:sticky!important}.border{border:1px solid rgba(110,117,130,.2)!important}.border-wide{border:2px solid rgba(110,117,130,.2)!important}.border-0{border:0!important}.border-top{border-top:1px solid rgba(110,117,130,.2)!important}.border-top-wide{border-top:2px solid rgba(110,117,130,.2)!important}.border-top-0{border-top:0!important}.border-right{border-right:1px solid rgba(110,117,130,.2)!important}.border-right-wide{border-right:2px solid rgba(110,117,130,.2)!important}.border-right-0{border-right:0!important}.border-bottom{border-bottom:1px solid rgba(110,117,130,.2)!important}.border-bottom-wide{border-bottom:2px solid rgba(110,117,130,.2)!important}.border-bottom-0{border-bottom:0!important}.border-left{border-left:1px solid rgba(110,117,130,.2)!important}.border-left-wide{border-left:2px solid rgba(110,117,130,.2)!important}.border-left-0{border-left:0!important}.border-primary{border-color:#206bc4!important}.border-secondary{border-color:#6e7582!important}.border-success{border-color:#5eba00!important}.border-info{border-color:#45aaf2!important}.border-warning{border-color:#fab005!important}.border-danger{border-color:#cd201f!important}.border-light{border-color:#f5f7fb!important}.border-dark{border-color:#354052!important}.border-white{border-color:#fff!important}.w-1{width:1%!important}.w-25{width:25%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.w-auto{width:auto!important}.mw-100{max-width:100%!important}.vw-100{width:100vw!important}.min-vw-100{min-width:100vw!important}.h-1{height:1%!important}.h-25{height:25%!important}.h-50{height:50%!important}.h-75{height:75%!important}.h-100{height:100%!important}.h-auto{height:auto!important}.mh-100{max-height:100%!important}.vh-100{height:100vh!important}.min-vh-100{min-height:100vh!important}.flex-fill{flex:1 1 auto!important}.flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important}.flex-row-reverse{flex-direction:row-reverse!important}.flex-column-reverse{flex-direction:column-reverse!important}.flex-grow-0{flex-grow:0!important}.flex-grow-1{flex-grow:1!important}.flex-shrink-0{flex-shrink:0!important}.flex-shrink-1{flex-shrink:1!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}.flex-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-start{justify-content:flex-start!important}.justify-content-end{justify-content:flex-end!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.justify-content-around{justify-content:space-around!important}.align-items-start{align-items:flex-start!important}.align-items-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.align-items-baseline{align-items:baseline!important}.align-items-stretch{align-items:stretch!important}.align-content-start{align-content:flex-start!important}.align-content-end{align-content:flex-end!important}.align-content-center{align-content:center!important}.align-content-between{align-content:space-between!important}.align-content-around{align-content:space-around!important}.align-content-stretch{align-content:stretch!important}.align-self-auto{-ms-grid-row-align:auto!important;align-self:auto!important}.align-self-start{align-self:flex-start!important}.align-self-end{align-self:flex-end!important}.align-self-center{-ms-grid-row-align:center!important;align-self:center!important}.align-self-baseline{align-self:baseline!important}.align-self-stretch{-ms-grid-row-align:stretch!important;align-self:stretch!important}.order-first{order:-1!important}.order-0{order:0!important}.order-1{order:1!important}.order-2{order:2!important}.order-3{order:3!important}.order-4{order:4!important}.order-5{order:5!important}.order-last{order:6!important}.m-0{margin:0!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}.m-3{margin:1rem!important}.m-4{margin:1.5rem!important}.m-5{margin:3rem!important}.m-6{margin:4.5rem!important}.m-auto{margin:auto!important}.mx-0{margin-right:0!important;margin-left:0!important}.mx-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-3{margin-right:1rem!important;margin-left:1rem!important}.mx-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-5{margin-right:3rem!important;margin-left:3rem!important}.mx-6{margin-right:4.5rem!important;margin-left:4.5rem!important}.mx-auto{margin-right:auto!important;margin-left:auto!important}.my-0{margin-top:0!important;margin-bottom:0!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-6{margin-top:4.5rem!important;margin-bottom:4.5rem!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}.mt-6{margin-top:4.5rem!important}.mt-auto{margin-top:auto!important}.mr-0{margin-right:0!important}.mr-1{margin-right:.25rem!important}.mr-2{margin-right:.5rem!important}.mr-3{margin-right:1rem!important}.mr-4{margin-right:1.5rem!important}.mr-5{margin-right:3rem!important}.mr-6{margin-right:4.5rem!important}.mr-auto{margin-right:auto!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}.mb-6{margin-bottom:4.5rem!important}.mb-auto{margin-bottom:auto!important}.ml-0{margin-left:0!important}.ml-1{margin-left:.25rem!important}.ml-2{margin-left:.5rem!important}.ml-3{margin-left:1rem!important}.ml-4{margin-left:1.5rem!important}.ml-5{margin-left:3rem!important}.ml-6{margin-left:4.5rem!important}.ml-auto{margin-left:auto!important}.m-n1{margin:-.25rem!important}.m-n2{margin:-.5rem!important}.m-n3{margin:-1rem!important}.m-n4{margin:-1.5rem!important}.m-n5{margin:-3rem!important}.m-n6{margin:-4.5rem!important}.mx-n1{margin-right:-.25rem!important;margin-left:-.25rem!important}.mx-n2{margin-right:-.5rem!important;margin-left:-.5rem!important}.mx-n3{margin-right:-1rem!important;margin-left:-1rem!important}.mx-n4{margin-right:-1.5rem!important;margin-left:-1.5rem!important}.mx-n5{margin-right:-3rem!important;margin-left:-3rem!important}.mx-n6{margin-right:-4.5rem!important;margin-left:-4.5rem!important}.my-n1{margin-top:-.25rem!important;margin-bottom:-.25rem!important}.my-n2{margin-top:-.5rem!important;margin-bottom:-.5rem!important}.my-n3{margin-top:-1rem!important;margin-bottom:-1rem!important}.my-n4{margin-top:-1.5rem!important;margin-bottom:-1.5rem!important}.my-n5{margin-top:-3rem!important;margin-bottom:-3rem!important}.my-n6{margin-top:-4.5rem!important;margin-bottom:-4.5rem!important}.mt-n1{margin-top:-.25rem!important}.mt-n2{margin-top:-.5rem!important}.mt-n3{margin-top:-1rem!important}.mt-n4{margin-top:-1.5rem!important}.mt-n5{margin-top:-3rem!important}.mt-n6{margin-top:-4.5rem!important}.mr-n1{margin-right:-.25rem!important}.mr-n2{margin-right:-.5rem!important}.mr-n3{margin-right:-1rem!important}.mr-n4{margin-right:-1.5rem!important}.mr-n5{margin-right:-3rem!important}.mr-n6{margin-right:-4.5rem!important}.mb-n1{margin-bottom:-.25rem!important}.mb-n2{margin-bottom:-.5rem!important}.mb-n3{margin-bottom:-1rem!important}.mb-n4{margin-bottom:-1.5rem!important}.mb-n5{margin-bottom:-3rem!important}.mb-n6{margin-bottom:-4.5rem!important}.ml-n1{margin-left:-.25rem!important}.ml-n2{margin-left:-.5rem!important}.ml-n3{margin-left:-1rem!important}.ml-n4{margin-left:-1.5rem!important}.ml-n5{margin-left:-3rem!important}.ml-n6{margin-left:-4.5rem!important}.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.p-5{padding:3rem!important}.p-6{padding:4.5rem!important}.px-0{padding-right:0!important;padding-left:0!important}.px-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-3{padding-right:1rem!important;padding-left:1rem!important}.px-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-5{padding-right:3rem!important;padding-left:3rem!important}.px-6{padding-right:4.5rem!important;padding-left:4.5rem!important}.py-0{padding-top:0!important;padding-bottom:0!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}.py-6{padding-top:4.5rem!important;padding-bottom:4.5rem!important}.pt-0{padding-top:0!important}.pt-1{padding-top:.25rem!important}.pt-2{padding-top:.5rem!important}.pt-3{padding-top:1rem!important}.pt-4{padding-top:1.5rem!important}.pt-5{padding-top:3rem!important}.pt-6{padding-top:4.5rem!important}.pr-0{padding-right:0!important}.pr-1{padding-right:.25rem!important}.pr-2{padding-right:.5rem!important}.pr-3{padding-right:1rem!important}.pr-4{padding-right:1.5rem!important}.pr-5{padding-right:3rem!important}.pr-6{padding-right:4.5rem!important}.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:.25rem!important}.pb-2{padding-bottom:.5rem!important}.pb-3{padding-bottom:1rem!important}.pb-4{padding-bottom:1.5rem!important}.pb-5{padding-bottom:3rem!important}.pb-6{padding-bottom:4.5rem!important}.pl-0{padding-left:0!important}.pl-1{padding-left:.25rem!important}.pl-2{padding-left:.5rem!important}.pl-3{padding-left:1rem!important}.pl-4{padding-left:1.5rem!important}.pl-5{padding-left:3rem!important}.pl-6{padding-left:4.5rem!important}.font-weight-light{font-weight:300!important}.font-weight-normal{font-weight:400!important}.font-weight-medium{font-weight:500!important}.font-weight-semibold{font-weight:600!important}.font-weight-bold{font-weight:700!important}.font-weight-extrabold{font-weight:800!important}.font-weight-black{font-weight:900!important}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-primary{color:#206bc4!important}.text-secondary{color:#6e7582!important}.text-success{color:#5eba00!important}.text-info{color:#45aaf2!important}.text-warning{color:#fab005!important}.text-danger{color:#cd201f!important}.text-light{color:#f5f7fb!important}.text-dark{color:#354052!important}.text-white{color:#fff!important}.text-body{color:#354052!important}.text-muted{color:#6e7582!important}.text-black-50{color:rgba(0,0,0,.5)!important}.text-white-50{color:rgba(255,255,255,.5)!important}.text-reset{color:inherit!important}.lh-1{line-height:1!important}.lh-sm{line-height:1.3333334!important}.lh-base{line-height:1.7142857!important}.lh-lg{line-height:2.1333334!important}.bg-primary{background-color:#206bc4!important}.bg-secondary{background-color:#6e7582!important}.bg-success{background-color:#5eba00!important}.bg-info{background-color:#45aaf2!important}.bg-warning{background-color:#fab005!important}.bg-danger{background-color:#cd201f!important}.bg-light{background-color:#f5f7fb!important}.bg-dark{background-color:#354052!important}.bg-body{background-color:#f5f7fb!important}.bg-white{background-color:#fff!important}.bg-transparent{background-color:transparent!important}.text-wrap{white-space:normal!important}.text-nowrap{white-space:nowrap!important}.text-decoration-none{text-decoration:none!important}.text-decoration-underline{text-decoration:underline!important}.text-decoration-line-through{text-decoration:line-through!important}.font-italic{font-style:italic!important}.font-normal{font-style:normal!important}.text-break{word-wrap:break-word!important}.font-monospace{font-family:Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace!important}.user-select-all{-webkit-user-select:all!important;-moz-user-select:all!important;-ms-user-select:all!important;user-select:all!important}.user-select-auto{-webkit-user-select:auto!important;-moz-user-select:auto!important;-ms-user-select:auto!important;user-select:auto!important}.user-select-none{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.pe-none{pointer-events:none!important}.pe-auto{pointer-events:auto!important}.rounded{border-radius:3px!important}.rounded-sm{border-radius:.2rem!important}.rounded-lg{border-radius:.3rem!important}.rounded-circle{border-radius:50%!important}.rounded-pill{border-radius:50rem!important}.rounded-0{border-radius:0!important}.rounded-top{border-top-left-radius:3px!important;border-top-right-radius:3px!important}.rounded-right{border-top-right-radius:3px!important;border-bottom-right-radius:3px!important}.rounded-bottom{border-bottom-right-radius:3px!important;border-bottom-left-radius:3px!important}.rounded-left{border-bottom-left-radius:3px!important;border-top-left-radius:3px!important}.visible{visibility:visible!important}.invisible{visibility:hidden!important}.object-contain{-o-object-fit:contain!important;object-fit:contain!important}.object-cover{-o-object-fit:cover!important;object-fit:cover!important}.object-fill{-o-object-fit:fill!important;object-fit:fill!important}.object-scale-down{-o-object-fit:scale-down!important;object-fit:scale-down!important}.object-none{-o-object-fit:none!important;object-fit:none!important}.tracking-tight{letter-spacing:-.05em!important}.tracking-normal{letter-spacing:0!important}.tracking-wide{letter-spacing:.05em!important}.cursor-auto{cursor:auto!important}.cursor-pointer{cursor:pointer!important}.cursor-move{cursor:move!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-zoom-in{cursor:zoom-in!important}.cursor-zoom-out{cursor:zoom-out!important}.text-h1{font-size:1.75rem!important}.text-h2{font-size:1.375rem!important}.text-h3{font-size:1.125rem!important}.text-h4{font-size:.875rem!important}.text-h5{font-size:.75rem!important}.text-h6{font-size:.625rem!important}.leading-0{line-height:0!important}.leading-1{line-height:.25rem!important}.leading-2{line-height:.5rem!important}.leading-3{line-height:1rem!important}.leading-4{line-height:1.5rem!important}.leading-5{line-height:3rem!important}.leading-6{line-height:4.5rem!important}@media (min-width:33rem){.float-sm-left{float:left!important}.float-sm-right{float:right!important}.float-sm-none{float:none!important}.d-sm-none{display:none!important}.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:flex!important}.d-sm-inline-flex{display:inline-flex!important}.flex-sm-fill{flex:1 1 auto!important}.flex-sm-row{flex-direction:row!important}.flex-sm-column{flex-direction:column!important}.flex-sm-row-reverse{flex-direction:row-reverse!important}.flex-sm-column-reverse{flex-direction:column-reverse!important}.flex-sm-grow-0{flex-grow:0!important}.flex-sm-grow-1{flex-grow:1!important}.flex-sm-shrink-0{flex-shrink:0!important}.flex-sm-shrink-1{flex-shrink:1!important}.flex-sm-wrap{flex-wrap:wrap!important}.flex-sm-nowrap{flex-wrap:nowrap!important}.flex-sm-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-sm-start{justify-content:flex-start!important}.justify-content-sm-end{justify-content:flex-end!important}.justify-content-sm-center{justify-content:center!important}.justify-content-sm-between{justify-content:space-between!important}.justify-content-sm-around{justify-content:space-around!important}.align-items-sm-start{align-items:flex-start!important}.align-items-sm-end{align-items:flex-end!important}.align-items-sm-center{align-items:center!important}.align-items-sm-baseline{align-items:baseline!important}.align-items-sm-stretch{align-items:stretch!important}.align-content-sm-start{align-content:flex-start!important}.align-content-sm-end{align-content:flex-end!important}.align-content-sm-center{align-content:center!important}.align-content-sm-between{align-content:space-between!important}.align-content-sm-around{align-content:space-around!important}.align-content-sm-stretch{align-content:stretch!important}.align-self-sm-auto{-ms-grid-row-align:auto!important;align-self:auto!important}.align-self-sm-start{align-self:flex-start!important}.align-self-sm-end{align-self:flex-end!important}.align-self-sm-center{-ms-grid-row-align:center!important;align-self:center!important}.align-self-sm-baseline{align-self:baseline!important}.align-self-sm-stretch{-ms-grid-row-align:stretch!important;align-self:stretch!important}.order-sm-first{order:-1!important}.order-sm-0{order:0!important}.order-sm-1{order:1!important}.order-sm-2{order:2!important}.order-sm-3{order:3!important}.order-sm-4{order:4!important}.order-sm-5{order:5!important}.order-sm-last{order:6!important}.m-sm-0{margin:0!important}.m-sm-1{margin:.25rem!important}.m-sm-2{margin:.5rem!important}.m-sm-3{margin:1rem!important}.m-sm-4{margin:1.5rem!important}.m-sm-5{margin:3rem!important}.m-sm-6{margin:4.5rem!important}.m-sm-auto{margin:auto!important}.mx-sm-0{margin-right:0!important;margin-left:0!important}.mx-sm-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-sm-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-sm-3{margin-right:1rem!important;margin-left:1rem!important}.mx-sm-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-sm-5{margin-right:3rem!important;margin-left:3rem!important}.mx-sm-6{margin-right:4.5rem!important;margin-left:4.5rem!important}.mx-sm-auto{margin-right:auto!important;margin-left:auto!important}.my-sm-0{margin-top:0!important;margin-bottom:0!important}.my-sm-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-sm-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-sm-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-sm-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-sm-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-sm-6{margin-top:4.5rem!important;margin-bottom:4.5rem!important}.my-sm-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-sm-0{margin-top:0!important}.mt-sm-1{margin-top:.25rem!important}.mt-sm-2{margin-top:.5rem!important}.mt-sm-3{margin-top:1rem!important}.mt-sm-4{margin-top:1.5rem!important}.mt-sm-5{margin-top:3rem!important}.mt-sm-6{margin-top:4.5rem!important}.mt-sm-auto{margin-top:auto!important}.mr-sm-0{margin-right:0!important}.mr-sm-1{margin-right:.25rem!important}.mr-sm-2{margin-right:.5rem!important}.mr-sm-3{margin-right:1rem!important}.mr-sm-4{margin-right:1.5rem!important}.mr-sm-5{margin-right:3rem!important}.mr-sm-6{margin-right:4.5rem!important}.mr-sm-auto{margin-right:auto!important}.mb-sm-0{margin-bottom:0!important}.mb-sm-1{margin-bottom:.25rem!important}.mb-sm-2{margin-bottom:.5rem!important}.mb-sm-3{margin-bottom:1rem!important}.mb-sm-4{margin-bottom:1.5rem!important}.mb-sm-5{margin-bottom:3rem!important}.mb-sm-6{margin-bottom:4.5rem!important}.mb-sm-auto{margin-bottom:auto!important}.ml-sm-0{margin-left:0!important}.ml-sm-1{margin-left:.25rem!important}.ml-sm-2{margin-left:.5rem!important}.ml-sm-3{margin-left:1rem!important}.ml-sm-4{margin-left:1.5rem!important}.ml-sm-5{margin-left:3rem!important}.ml-sm-6{margin-left:4.5rem!important}.ml-sm-auto{margin-left:auto!important}.m-sm-n1{margin:-.25rem!important}.m-sm-n2{margin:-.5rem!important}.m-sm-n3{margin:-1rem!important}.m-sm-n4{margin:-1.5rem!important}.m-sm-n5{margin:-3rem!important}.m-sm-n6{margin:-4.5rem!important}.mx-sm-n1{margin-right:-.25rem!important;margin-left:-.25rem!important}.mx-sm-n2{margin-right:-.5rem!important;margin-left:-.5rem!important}.mx-sm-n3{margin-right:-1rem!important;margin-left:-1rem!important}.mx-sm-n4{margin-right:-1.5rem!important;margin-left:-1.5rem!important}.mx-sm-n5{margin-right:-3rem!important;margin-left:-3rem!important}.mx-sm-n6{margin-right:-4.5rem!important;margin-left:-4.5rem!important}.my-sm-n1{margin-top:-.25rem!important;margin-bottom:-.25rem!important}.my-sm-n2{margin-top:-.5rem!important;margin-bottom:-.5rem!important}.my-sm-n3{margin-top:-1rem!important;margin-bottom:-1rem!important}.my-sm-n4{margin-top:-1.5rem!important;margin-bottom:-1.5rem!important}.my-sm-n5{margin-top:-3rem!important;margin-bottom:-3rem!important}.my-sm-n6{margin-top:-4.5rem!important;margin-bottom:-4.5rem!important}.mt-sm-n1{margin-top:-.25rem!important}.mt-sm-n2{margin-top:-.5rem!important}.mt-sm-n3{margin-top:-1rem!important}.mt-sm-n4{margin-top:-1.5rem!important}.mt-sm-n5{margin-top:-3rem!important}.mt-sm-n6{margin-top:-4.5rem!important}.mr-sm-n1{margin-right:-.25rem!important}.mr-sm-n2{margin-right:-.5rem!important}.mr-sm-n3{margin-right:-1rem!important}.mr-sm-n4{margin-right:-1.5rem!important}.mr-sm-n5{margin-right:-3rem!important}.mr-sm-n6{margin-right:-4.5rem!important}.mb-sm-n1{margin-bottom:-.25rem!important}.mb-sm-n2{margin-bottom:-.5rem!important}.mb-sm-n3{margin-bottom:-1rem!important}.mb-sm-n4{margin-bottom:-1.5rem!important}.mb-sm-n5{margin-bottom:-3rem!important}.mb-sm-n6{margin-bottom:-4.5rem!important}.ml-sm-n1{margin-left:-.25rem!important}.ml-sm-n2{margin-left:-.5rem!important}.ml-sm-n3{margin-left:-1rem!important}.ml-sm-n4{margin-left:-1.5rem!important}.ml-sm-n5{margin-left:-3rem!important}.ml-sm-n6{margin-left:-4.5rem!important}.p-sm-0{padding:0!important}.p-sm-1{padding:.25rem!important}.p-sm-2{padding:.5rem!important}.p-sm-3{padding:1rem!important}.p-sm-4{padding:1.5rem!important}.p-sm-5{padding:3rem!important}.p-sm-6{padding:4.5rem!important}.px-sm-0{padding-right:0!important;padding-left:0!important}.px-sm-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-sm-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-sm-3{padding-right:1rem!important;padding-left:1rem!important}.px-sm-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-sm-5{padding-right:3rem!important;padding-left:3rem!important}.px-sm-6{padding-right:4.5rem!important;padding-left:4.5rem!important}.py-sm-0{padding-top:0!important;padding-bottom:0!important}.py-sm-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-sm-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-sm-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-sm-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-sm-5{padding-top:3rem!important;padding-bottom:3rem!important}.py-sm-6{padding-top:4.5rem!important;padding-bottom:4.5rem!important}.pt-sm-0{padding-top:0!important}.pt-sm-1{padding-top:.25rem!important}.pt-sm-2{padding-top:.5rem!important}.pt-sm-3{padding-top:1rem!important}.pt-sm-4{padding-top:1.5rem!important}.pt-sm-5{padding-top:3rem!important}.pt-sm-6{padding-top:4.5rem!important}.pr-sm-0{padding-right:0!important}.pr-sm-1{padding-right:.25rem!important}.pr-sm-2{padding-right:.5rem!important}.pr-sm-3{padding-right:1rem!important}.pr-sm-4{padding-right:1.5rem!important}.pr-sm-5{padding-right:3rem!important}.pr-sm-6{padding-right:4.5rem!important}.pb-sm-0{padding-bottom:0!important}.pb-sm-1{padding-bottom:.25rem!important}.pb-sm-2{padding-bottom:.5rem!important}.pb-sm-3{padding-bottom:1rem!important}.pb-sm-4{padding-bottom:1.5rem!important}.pb-sm-5{padding-bottom:3rem!important}.pb-sm-6{padding-bottom:4.5rem!important}.pl-sm-0{padding-left:0!important}.pl-sm-1{padding-left:.25rem!important}.pl-sm-2{padding-left:.5rem!important}.pl-sm-3{padding-left:1rem!important}.pl-sm-4{padding-left:1.5rem!important}.pl-sm-5{padding-left:3rem!important}.pl-sm-6{padding-left:4.5rem!important}.text-sm-left{text-align:left!important}.text-sm-right{text-align:right!important}.text-sm-center{text-align:center!important}}@media (min-width:48rem){.float-md-left{float:left!important}.float-md-right{float:right!important}.float-md-none{float:none!important}.d-md-none{display:none!important}.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:flex!important}.d-md-inline-flex{display:inline-flex!important}.flex-md-fill{flex:1 1 auto!important}.flex-md-row{flex-direction:row!important}.flex-md-column{flex-direction:column!important}.flex-md-row-reverse{flex-direction:row-reverse!important}.flex-md-column-reverse{flex-direction:column-reverse!important}.flex-md-grow-0{flex-grow:0!important}.flex-md-grow-1{flex-grow:1!important}.flex-md-shrink-0{flex-shrink:0!important}.flex-md-shrink-1{flex-shrink:1!important}.flex-md-wrap{flex-wrap:wrap!important}.flex-md-nowrap{flex-wrap:nowrap!important}.flex-md-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-md-start{justify-content:flex-start!important}.justify-content-md-end{justify-content:flex-end!important}.justify-content-md-center{justify-content:center!important}.justify-content-md-between{justify-content:space-between!important}.justify-content-md-around{justify-content:space-around!important}.align-items-md-start{align-items:flex-start!important}.align-items-md-end{align-items:flex-end!important}.align-items-md-center{align-items:center!important}.align-items-md-baseline{align-items:baseline!important}.align-items-md-stretch{align-items:stretch!important}.align-content-md-start{align-content:flex-start!important}.align-content-md-end{align-content:flex-end!important}.align-content-md-center{align-content:center!important}.align-content-md-between{align-content:space-between!important}.align-content-md-around{align-content:space-around!important}.align-content-md-stretch{align-content:stretch!important}.align-self-md-auto{-ms-grid-row-align:auto!important;align-self:auto!important}.align-self-md-start{align-self:flex-start!important}.align-self-md-end{align-self:flex-end!important}.align-self-md-center{-ms-grid-row-align:center!important;align-self:center!important}.align-self-md-baseline{align-self:baseline!important}.align-self-md-stretch{-ms-grid-row-align:stretch!important;align-self:stretch!important}.order-md-first{order:-1!important}.order-md-0{order:0!important}.order-md-1{order:1!important}.order-md-2{order:2!important}.order-md-3{order:3!important}.order-md-4{order:4!important}.order-md-5{order:5!important}.order-md-last{order:6!important}.m-md-0{margin:0!important}.m-md-1{margin:.25rem!important}.m-md-2{margin:.5rem!important}.m-md-3{margin:1rem!important}.m-md-4{margin:1.5rem!important}.m-md-5{margin:3rem!important}.m-md-6{margin:4.5rem!important}.m-md-auto{margin:auto!important}.mx-md-0{margin-right:0!important;margin-left:0!important}.mx-md-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-md-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-md-3{margin-right:1rem!important;margin-left:1rem!important}.mx-md-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-md-5{margin-right:3rem!important;margin-left:3rem!important}.mx-md-6{margin-right:4.5rem!important;margin-left:4.5rem!important}.mx-md-auto{margin-right:auto!important;margin-left:auto!important}.my-md-0{margin-top:0!important;margin-bottom:0!important}.my-md-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-md-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-md-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-md-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-md-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-md-6{margin-top:4.5rem!important;margin-bottom:4.5rem!important}.my-md-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-md-0{margin-top:0!important}.mt-md-1{margin-top:.25rem!important}.mt-md-2{margin-top:.5rem!important}.mt-md-3{margin-top:1rem!important}.mt-md-4{margin-top:1.5rem!important}.mt-md-5{margin-top:3rem!important}.mt-md-6{margin-top:4.5rem!important}.mt-md-auto{margin-top:auto!important}.mr-md-0{margin-right:0!important}.mr-md-1{margin-right:.25rem!important}.mr-md-2{margin-right:.5rem!important}.mr-md-3{margin-right:1rem!important}.mr-md-4{margin-right:1.5rem!important}.mr-md-5{margin-right:3rem!important}.mr-md-6{margin-right:4.5rem!important}.mr-md-auto{margin-right:auto!important}.mb-md-0{margin-bottom:0!important}.mb-md-1{margin-bottom:.25rem!important}.mb-md-2{margin-bottom:.5rem!important}.mb-md-3{margin-bottom:1rem!important}.mb-md-4{margin-bottom:1.5rem!important}.mb-md-5{margin-bottom:3rem!important}.mb-md-6{margin-bottom:4.5rem!important}.mb-md-auto{margin-bottom:auto!important}.ml-md-0{margin-left:0!important}.ml-md-1{margin-left:.25rem!important}.ml-md-2{margin-left:.5rem!important}.ml-md-3{margin-left:1rem!important}.ml-md-4{margin-left:1.5rem!important}.ml-md-5{margin-left:3rem!important}.ml-md-6{margin-left:4.5rem!important}.ml-md-auto{margin-left:auto!important}.m-md-n1{margin:-.25rem!important}.m-md-n2{margin:-.5rem!important}.m-md-n3{margin:-1rem!important}.m-md-n4{margin:-1.5rem!important}.m-md-n5{margin:-3rem!important}.m-md-n6{margin:-4.5rem!important}.mx-md-n1{margin-right:-.25rem!important;margin-left:-.25rem!important}.mx-md-n2{margin-right:-.5rem!important;margin-left:-.5rem!important}.mx-md-n3{margin-right:-1rem!important;margin-left:-1rem!important}.mx-md-n4{margin-right:-1.5rem!important;margin-left:-1.5rem!important}.mx-md-n5{margin-right:-3rem!important;margin-left:-3rem!important}.mx-md-n6{margin-right:-4.5rem!important;margin-left:-4.5rem!important}.my-md-n1{margin-top:-.25rem!important;margin-bottom:-.25rem!important}.my-md-n2{margin-top:-.5rem!important;margin-bottom:-.5rem!important}.my-md-n3{margin-top:-1rem!important;margin-bottom:-1rem!important}.my-md-n4{margin-top:-1.5rem!important;margin-bottom:-1.5rem!important}.my-md-n5{margin-top:-3rem!important;margin-bottom:-3rem!important}.my-md-n6{margin-top:-4.5rem!important;margin-bottom:-4.5rem!important}.mt-md-n1{margin-top:-.25rem!important}.mt-md-n2{margin-top:-.5rem!important}.mt-md-n3{margin-top:-1rem!important}.mt-md-n4{margin-top:-1.5rem!important}.mt-md-n5{margin-top:-3rem!important}.mt-md-n6{margin-top:-4.5rem!important}.mr-md-n1{margin-right:-.25rem!important}.mr-md-n2{margin-right:-.5rem!important}.mr-md-n3{margin-right:-1rem!important}.mr-md-n4{margin-right:-1.5rem!important}.mr-md-n5{margin-right:-3rem!important}.mr-md-n6{margin-right:-4.5rem!important}.mb-md-n1{margin-bottom:-.25rem!important}.mb-md-n2{margin-bottom:-.5rem!important}.mb-md-n3{margin-bottom:-1rem!important}.mb-md-n4{margin-bottom:-1.5rem!important}.mb-md-n5{margin-bottom:-3rem!important}.mb-md-n6{margin-bottom:-4.5rem!important}.ml-md-n1{margin-left:-.25rem!important}.ml-md-n2{margin-left:-.5rem!important}.ml-md-n3{margin-left:-1rem!important}.ml-md-n4{margin-left:-1.5rem!important}.ml-md-n5{margin-left:-3rem!important}.ml-md-n6{margin-left:-4.5rem!important}.p-md-0{padding:0!important}.p-md-1{padding:.25rem!important}.p-md-2{padding:.5rem!important}.p-md-3{padding:1rem!important}.p-md-4{padding:1.5rem!important}.p-md-5{padding:3rem!important}.p-md-6{padding:4.5rem!important}.px-md-0{padding-right:0!important;padding-left:0!important}.px-md-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-md-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-md-3{padding-right:1rem!important;padding-left:1rem!important}.px-md-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-md-5{padding-right:3rem!important;padding-left:3rem!important}.px-md-6{padding-right:4.5rem!important;padding-left:4.5rem!important}.py-md-0{padding-top:0!important;padding-bottom:0!important}.py-md-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-md-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-md-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-md-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-md-5{padding-top:3rem!important;padding-bottom:3rem!important}.py-md-6{padding-top:4.5rem!important;padding-bottom:4.5rem!important}.pt-md-0{padding-top:0!important}.pt-md-1{padding-top:.25rem!important}.pt-md-2{padding-top:.5rem!important}.pt-md-3{padding-top:1rem!important}.pt-md-4{padding-top:1.5rem!important}.pt-md-5{padding-top:3rem!important}.pt-md-6{padding-top:4.5rem!important}.pr-md-0{padding-right:0!important}.pr-md-1{padding-right:.25rem!important}.pr-md-2{padding-right:.5rem!important}.pr-md-3{padding-right:1rem!important}.pr-md-4{padding-right:1.5rem!important}.pr-md-5{padding-right:3rem!important}.pr-md-6{padding-right:4.5rem!important}.pb-md-0{padding-bottom:0!important}.pb-md-1{padding-bottom:.25rem!important}.pb-md-2{padding-bottom:.5rem!important}.pb-md-3{padding-bottom:1rem!important}.pb-md-4{padding-bottom:1.5rem!important}.pb-md-5{padding-bottom:3rem!important}.pb-md-6{padding-bottom:4.5rem!important}.pl-md-0{padding-left:0!important}.pl-md-1{padding-left:.25rem!important}.pl-md-2{padding-left:.5rem!important}.pl-md-3{padding-left:1rem!important}.pl-md-4{padding-left:1.5rem!important}.pl-md-5{padding-left:3rem!important}.pl-md-6{padding-left:4.5rem!important}.text-md-left{text-align:left!important}.text-md-right{text-align:right!important}.text-md-center{text-align:center!important}}@media (min-width:64rem){.float-lg-left{float:left!important}.float-lg-right{float:right!important}.float-lg-none{float:none!important}.d-lg-none{display:none!important}.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:flex!important}.d-lg-inline-flex{display:inline-flex!important}.flex-lg-fill{flex:1 1 auto!important}.flex-lg-row{flex-direction:row!important}.flex-lg-column{flex-direction:column!important}.flex-lg-row-reverse{flex-direction:row-reverse!important}.flex-lg-column-reverse{flex-direction:column-reverse!important}.flex-lg-grow-0{flex-grow:0!important}.flex-lg-grow-1{flex-grow:1!important}.flex-lg-shrink-0{flex-shrink:0!important}.flex-lg-shrink-1{flex-shrink:1!important}.flex-lg-wrap{flex-wrap:wrap!important}.flex-lg-nowrap{flex-wrap:nowrap!important}.flex-lg-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-lg-start{justify-content:flex-start!important}.justify-content-lg-end{justify-content:flex-end!important}.justify-content-lg-center{justify-content:center!important}.justify-content-lg-between{justify-content:space-between!important}.justify-content-lg-around{justify-content:space-around!important}.align-items-lg-start{align-items:flex-start!important}.align-items-lg-end{align-items:flex-end!important}.align-items-lg-center{align-items:center!important}.align-items-lg-baseline{align-items:baseline!important}.align-items-lg-stretch{align-items:stretch!important}.align-content-lg-start{align-content:flex-start!important}.align-content-lg-end{align-content:flex-end!important}.align-content-lg-center{align-content:center!important}.align-content-lg-between{align-content:space-between!important}.align-content-lg-around{align-content:space-around!important}.align-content-lg-stretch{align-content:stretch!important}.align-self-lg-auto{-ms-grid-row-align:auto!important;align-self:auto!important}.align-self-lg-start{align-self:flex-start!important}.align-self-lg-end{align-self:flex-end!important}.align-self-lg-center{-ms-grid-row-align:center!important;align-self:center!important}.align-self-lg-baseline{align-self:baseline!important}.align-self-lg-stretch{-ms-grid-row-align:stretch!important;align-self:stretch!important}.order-lg-first{order:-1!important}.order-lg-0{order:0!important}.order-lg-1{order:1!important}.order-lg-2{order:2!important}.order-lg-3{order:3!important}.order-lg-4{order:4!important}.order-lg-5{order:5!important}.order-lg-last{order:6!important}.m-lg-0{margin:0!important}.m-lg-1{margin:.25rem!important}.m-lg-2{margin:.5rem!important}.m-lg-3{margin:1rem!important}.m-lg-4{margin:1.5rem!important}.m-lg-5{margin:3rem!important}.m-lg-6{margin:4.5rem!important}.m-lg-auto{margin:auto!important}.mx-lg-0{margin-right:0!important;margin-left:0!important}.mx-lg-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-lg-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-lg-3{margin-right:1rem!important;margin-left:1rem!important}.mx-lg-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-lg-5{margin-right:3rem!important;margin-left:3rem!important}.mx-lg-6{margin-right:4.5rem!important;margin-left:4.5rem!important}.mx-lg-auto{margin-right:auto!important;margin-left:auto!important}.my-lg-0{margin-top:0!important;margin-bottom:0!important}.my-lg-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-lg-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-lg-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-lg-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-lg-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-lg-6{margin-top:4.5rem!important;margin-bottom:4.5rem!important}.my-lg-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-lg-0{margin-top:0!important}.mt-lg-1{margin-top:.25rem!important}.mt-lg-2{margin-top:.5rem!important}.mt-lg-3{margin-top:1rem!important}.mt-lg-4{margin-top:1.5rem!important}.mt-lg-5{margin-top:3rem!important}.mt-lg-6{margin-top:4.5rem!important}.mt-lg-auto{margin-top:auto!important}.mr-lg-0{margin-right:0!important}.mr-lg-1{margin-right:.25rem!important}.mr-lg-2{margin-right:.5rem!important}.mr-lg-3{margin-right:1rem!important}.mr-lg-4{margin-right:1.5rem!important}.mr-lg-5{margin-right:3rem!important}.mr-lg-6{margin-right:4.5rem!important}.mr-lg-auto{margin-right:auto!important}.mb-lg-0{margin-bottom:0!important}.mb-lg-1{margin-bottom:.25rem!important}.mb-lg-2{margin-bottom:.5rem!important}.mb-lg-3{margin-bottom:1rem!important}.mb-lg-4{margin-bottom:1.5rem!important}.mb-lg-5{margin-bottom:3rem!important}.mb-lg-6{margin-bottom:4.5rem!important}.mb-lg-auto{margin-bottom:auto!important}.ml-lg-0{margin-left:0!important}.ml-lg-1{margin-left:.25rem!important}.ml-lg-2{margin-left:.5rem!important}.ml-lg-3{margin-left:1rem!important}.ml-lg-4{margin-left:1.5rem!important}.ml-lg-5{margin-left:3rem!important}.ml-lg-6{margin-left:4.5rem!important}.ml-lg-auto{margin-left:auto!important}.m-lg-n1{margin:-.25rem!important}.m-lg-n2{margin:-.5rem!important}.m-lg-n3{margin:-1rem!important}.m-lg-n4{margin:-1.5rem!important}.m-lg-n5{margin:-3rem!important}.m-lg-n6{margin:-4.5rem!important}.mx-lg-n1{margin-right:-.25rem!important;margin-left:-.25rem!important}.mx-lg-n2{margin-right:-.5rem!important;margin-left:-.5rem!important}.mx-lg-n3{margin-right:-1rem!important;margin-left:-1rem!important}.mx-lg-n4{margin-right:-1.5rem!important;margin-left:-1.5rem!important}.mx-lg-n5{margin-right:-3rem!important;margin-left:-3rem!important}.mx-lg-n6{margin-right:-4.5rem!important;margin-left:-4.5rem!important}.my-lg-n1{margin-top:-.25rem!important;margin-bottom:-.25rem!important}.my-lg-n2{margin-top:-.5rem!important;margin-bottom:-.5rem!important}.my-lg-n3{margin-top:-1rem!important;margin-bottom:-1rem!important}.my-lg-n4{margin-top:-1.5rem!important;margin-bottom:-1.5rem!important}.my-lg-n5{margin-top:-3rem!important;margin-bottom:-3rem!important}.my-lg-n6{margin-top:-4.5rem!important;margin-bottom:-4.5rem!important}.mt-lg-n1{margin-top:-.25rem!important}.mt-lg-n2{margin-top:-.5rem!important}.mt-lg-n3{margin-top:-1rem!important}.mt-lg-n4{margin-top:-1.5rem!important}.mt-lg-n5{margin-top:-3rem!important}.mt-lg-n6{margin-top:-4.5rem!important}.mr-lg-n1{margin-right:-.25rem!important}.mr-lg-n2{margin-right:-.5rem!important}.mr-lg-n3{margin-right:-1rem!important}.mr-lg-n4{margin-right:-1.5rem!important}.mr-lg-n5{margin-right:-3rem!important}.mr-lg-n6{margin-right:-4.5rem!important}.mb-lg-n1{margin-bottom:-.25rem!important}.mb-lg-n2{margin-bottom:-.5rem!important}.mb-lg-n3{margin-bottom:-1rem!important}.mb-lg-n4{margin-bottom:-1.5rem!important}.mb-lg-n5{margin-bottom:-3rem!important}.mb-lg-n6{margin-bottom:-4.5rem!important}.ml-lg-n1{margin-left:-.25rem!important}.ml-lg-n2{margin-left:-.5rem!important}.ml-lg-n3{margin-left:-1rem!important}.ml-lg-n4{margin-left:-1.5rem!important}.ml-lg-n5{margin-left:-3rem!important}.ml-lg-n6{margin-left:-4.5rem!important}.p-lg-0{padding:0!important}.p-lg-1{padding:.25rem!important}.p-lg-2{padding:.5rem!important}.p-lg-3{padding:1rem!important}.p-lg-4{padding:1.5rem!important}.p-lg-5{padding:3rem!important}.p-lg-6{padding:4.5rem!important}.px-lg-0{padding-right:0!important;padding-left:0!important}.px-lg-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-lg-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-lg-3{padding-right:1rem!important;padding-left:1rem!important}.px-lg-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-lg-5{padding-right:3rem!important;padding-left:3rem!important}.px-lg-6{padding-right:4.5rem!important;padding-left:4.5rem!important}.py-lg-0{padding-top:0!important;padding-bottom:0!important}.py-lg-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-lg-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-lg-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-lg-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-lg-5{padding-top:3rem!important;padding-bottom:3rem!important}.py-lg-6{padding-top:4.5rem!important;padding-bottom:4.5rem!important}.pt-lg-0{padding-top:0!important}.pt-lg-1{padding-top:.25rem!important}.pt-lg-2{padding-top:.5rem!important}.pt-lg-3{padding-top:1rem!important}.pt-lg-4{padding-top:1.5rem!important}.pt-lg-5{padding-top:3rem!important}.pt-lg-6{padding-top:4.5rem!important}.pr-lg-0{padding-right:0!important}.pr-lg-1{padding-right:.25rem!important}.pr-lg-2{padding-right:.5rem!important}.pr-lg-3{padding-right:1rem!important}.pr-lg-4{padding-right:1.5rem!important}.pr-lg-5{padding-right:3rem!important}.pr-lg-6{padding-right:4.5rem!important}.pb-lg-0{padding-bottom:0!important}.pb-lg-1{padding-bottom:.25rem!important}.pb-lg-2{padding-bottom:.5rem!important}.pb-lg-3{padding-bottom:1rem!important}.pb-lg-4{padding-bottom:1.5rem!important}.pb-lg-5{padding-bottom:3rem!important}.pb-lg-6{padding-bottom:4.5rem!important}.pl-lg-0{padding-left:0!important}.pl-lg-1{padding-left:.25rem!important}.pl-lg-2{padding-left:.5rem!important}.pl-lg-3{padding-left:1rem!important}.pl-lg-4{padding-left:1.5rem!important}.pl-lg-5{padding-left:3rem!important}.pl-lg-6{padding-left:4.5rem!important}.text-lg-left{text-align:left!important}.text-lg-right{text-align:right!important}.text-lg-center{text-align:center!important}}@media (min-width:75.25rem){.float-xl-left{float:left!important}.float-xl-right{float:right!important}.float-xl-none{float:none!important}.d-xl-none{display:none!important}.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:flex!important}.d-xl-inline-flex{display:inline-flex!important}.flex-xl-fill{flex:1 1 auto!important}.flex-xl-row{flex-direction:row!important}.flex-xl-column{flex-direction:column!important}.flex-xl-row-reverse{flex-direction:row-reverse!important}.flex-xl-column-reverse{flex-direction:column-reverse!important}.flex-xl-grow-0{flex-grow:0!important}.flex-xl-grow-1{flex-grow:1!important}.flex-xl-shrink-0{flex-shrink:0!important}.flex-xl-shrink-1{flex-shrink:1!important}.flex-xl-wrap{flex-wrap:wrap!important}.flex-xl-nowrap{flex-wrap:nowrap!important}.flex-xl-wrap-reverse{flex-wrap:wrap-reverse!important}.justify-content-xl-start{justify-content:flex-start!important}.justify-content-xl-end{justify-content:flex-end!important}.justify-content-xl-center{justify-content:center!important}.justify-content-xl-between{justify-content:space-between!important}.justify-content-xl-around{justify-content:space-around!important}.align-items-xl-start{align-items:flex-start!important}.align-items-xl-end{align-items:flex-end!important}.align-items-xl-center{align-items:center!important}.align-items-xl-baseline{align-items:baseline!important}.align-items-xl-stretch{align-items:stretch!important}.align-content-xl-start{align-content:flex-start!important}.align-content-xl-end{align-content:flex-end!important}.align-content-xl-center{align-content:center!important}.align-content-xl-between{align-content:space-between!important}.align-content-xl-around{align-content:space-around!important}.align-content-xl-stretch{align-content:stretch!important}.align-self-xl-auto{-ms-grid-row-align:auto!important;align-self:auto!important}.align-self-xl-start{align-self:flex-start!important}.align-self-xl-end{align-self:flex-end!important}.align-self-xl-center{-ms-grid-row-align:center!important;align-self:center!important}.align-self-xl-baseline{align-self:baseline!important}.align-self-xl-stretch{-ms-grid-row-align:stretch!important;align-self:stretch!important}.order-xl-first{order:-1!important}.order-xl-0{order:0!important}.order-xl-1{order:1!important}.order-xl-2{order:2!important}.order-xl-3{order:3!important}.order-xl-4{order:4!important}.order-xl-5{order:5!important}.order-xl-last{order:6!important}.m-xl-0{margin:0!important}.m-xl-1{margin:.25rem!important}.m-xl-2{margin:.5rem!important}.m-xl-3{margin:1rem!important}.m-xl-4{margin:1.5rem!important}.m-xl-5{margin:3rem!important}.m-xl-6{margin:4.5rem!important}.m-xl-auto{margin:auto!important}.mx-xl-0{margin-right:0!important;margin-left:0!important}.mx-xl-1{margin-right:.25rem!important;margin-left:.25rem!important}.mx-xl-2{margin-right:.5rem!important;margin-left:.5rem!important}.mx-xl-3{margin-right:1rem!important;margin-left:1rem!important}.mx-xl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.mx-xl-5{margin-right:3rem!important;margin-left:3rem!important}.mx-xl-6{margin-right:4.5rem!important;margin-left:4.5rem!important}.mx-xl-auto{margin-right:auto!important;margin-left:auto!important}.my-xl-0{margin-top:0!important;margin-bottom:0!important}.my-xl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-xl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-xl-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-xl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-xl-5{margin-top:3rem!important;margin-bottom:3rem!important}.my-xl-6{margin-top:4.5rem!important;margin-bottom:4.5rem!important}.my-xl-auto{margin-top:auto!important;margin-bottom:auto!important}.mt-xl-0{margin-top:0!important}.mt-xl-1{margin-top:.25rem!important}.mt-xl-2{margin-top:.5rem!important}.mt-xl-3{margin-top:1rem!important}.mt-xl-4{margin-top:1.5rem!important}.mt-xl-5{margin-top:3rem!important}.mt-xl-6{margin-top:4.5rem!important}.mt-xl-auto{margin-top:auto!important}.mr-xl-0{margin-right:0!important}.mr-xl-1{margin-right:.25rem!important}.mr-xl-2{margin-right:.5rem!important}.mr-xl-3{margin-right:1rem!important}.mr-xl-4{margin-right:1.5rem!important}.mr-xl-5{margin-right:3rem!important}.mr-xl-6{margin-right:4.5rem!important}.mr-xl-auto{margin-right:auto!important}.mb-xl-0{margin-bottom:0!important}.mb-xl-1{margin-bottom:.25rem!important}.mb-xl-2{margin-bottom:.5rem!important}.mb-xl-3{margin-bottom:1rem!important}.mb-xl-4{margin-bottom:1.5rem!important}.mb-xl-5{margin-bottom:3rem!important}.mb-xl-6{margin-bottom:4.5rem!important}.mb-xl-auto{margin-bottom:auto!important}.ml-xl-0{margin-left:0!important}.ml-xl-1{margin-left:.25rem!important}.ml-xl-2{margin-left:.5rem!important}.ml-xl-3{margin-left:1rem!important}.ml-xl-4{margin-left:1.5rem!important}.ml-xl-5{margin-left:3rem!important}.ml-xl-6{margin-left:4.5rem!important}.ml-xl-auto{margin-left:auto!important}.m-xl-n1{margin:-.25rem!important}.m-xl-n2{margin:-.5rem!important}.m-xl-n3{margin:-1rem!important}.m-xl-n4{margin:-1.5rem!important}.m-xl-n5{margin:-3rem!important}.m-xl-n6{margin:-4.5rem!important}.mx-xl-n1{margin-right:-.25rem!important;margin-left:-.25rem!important}.mx-xl-n2{margin-right:-.5rem!important;margin-left:-.5rem!important}.mx-xl-n3{margin-right:-1rem!important;margin-left:-1rem!important}.mx-xl-n4{margin-right:-1.5rem!important;margin-left:-1.5rem!important}.mx-xl-n5{margin-right:-3rem!important;margin-left:-3rem!important}.mx-xl-n6{margin-right:-4.5rem!important;margin-left:-4.5rem!important}.my-xl-n1{margin-top:-.25rem!important;margin-bottom:-.25rem!important}.my-xl-n2{margin-top:-.5rem!important;margin-bottom:-.5rem!important}.my-xl-n3{margin-top:-1rem!important;margin-bottom:-1rem!important}.my-xl-n4{margin-top:-1.5rem!important;margin-bottom:-1.5rem!important}.my-xl-n5{margin-top:-3rem!important;margin-bottom:-3rem!important}.my-xl-n6{margin-top:-4.5rem!important;margin-bottom:-4.5rem!important}.mt-xl-n1{margin-top:-.25rem!important}.mt-xl-n2{margin-top:-.5rem!important}.mt-xl-n3{margin-top:-1rem!important}.mt-xl-n4{margin-top:-1.5rem!important}.mt-xl-n5{margin-top:-3rem!important}.mt-xl-n6{margin-top:-4.5rem!important}.mr-xl-n1{margin-right:-.25rem!important}.mr-xl-n2{margin-right:-.5rem!important}.mr-xl-n3{margin-right:-1rem!important}.mr-xl-n4{margin-right:-1.5rem!important}.mr-xl-n5{margin-right:-3rem!important}.mr-xl-n6{margin-right:-4.5rem!important}.mb-xl-n1{margin-bottom:-.25rem!important}.mb-xl-n2{margin-bottom:-.5rem!important}.mb-xl-n3{margin-bottom:-1rem!important}.mb-xl-n4{margin-bottom:-1.5rem!important}.mb-xl-n5{margin-bottom:-3rem!important}.mb-xl-n6{margin-bottom:-4.5rem!important}.ml-xl-n1{margin-left:-.25rem!important}.ml-xl-n2{margin-left:-.5rem!important}.ml-xl-n3{margin-left:-1rem!important}.ml-xl-n4{margin-left:-1.5rem!important}.ml-xl-n5{margin-left:-3rem!important}.ml-xl-n6{margin-left:-4.5rem!important}.p-xl-0{padding:0!important}.p-xl-1{padding:.25rem!important}.p-xl-2{padding:.5rem!important}.p-xl-3{padding:1rem!important}.p-xl-4{padding:1.5rem!important}.p-xl-5{padding:3rem!important}.p-xl-6{padding:4.5rem!important}.px-xl-0{padding-right:0!important;padding-left:0!important}.px-xl-1{padding-right:.25rem!important;padding-left:.25rem!important}.px-xl-2{padding-right:.5rem!important;padding-left:.5rem!important}.px-xl-3{padding-right:1rem!important;padding-left:1rem!important}.px-xl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.px-xl-5{padding-right:3rem!important;padding-left:3rem!important}.px-xl-6{padding-right:4.5rem!important;padding-left:4.5rem!important}.py-xl-0{padding-top:0!important;padding-bottom:0!important}.py-xl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-xl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-xl-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-xl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-xl-5{padding-top:3rem!important;padding-bottom:3rem!important}.py-xl-6{padding-top:4.5rem!important;padding-bottom:4.5rem!important}.pt-xl-0{padding-top:0!important}.pt-xl-1{padding-top:.25rem!important}.pt-xl-2{padding-top:.5rem!important}.pt-xl-3{padding-top:1rem!important}.pt-xl-4{padding-top:1.5rem!important}.pt-xl-5{padding-top:3rem!important}.pt-xl-6{padding-top:4.5rem!important}.pr-xl-0{padding-right:0!important}.pr-xl-1{padding-right:.25rem!important}.pr-xl-2{padding-right:.5rem!important}.pr-xl-3{padding-right:1rem!important}.pr-xl-4{padding-right:1.5rem!important}.pr-xl-5{padding-right:3rem!important}.pr-xl-6{padding-right:4.5rem!important}.pb-xl-0{padding-bottom:0!important}.pb-xl-1{padding-bottom:.25rem!important}.pb-xl-2{padding-bottom:.5rem!important}.pb-xl-3{padding-bottom:1rem!important}.pb-xl-4{padding-bottom:1.5rem!important}.pb-xl-5{padding-bottom:3rem!important}.pb-xl-6{padding-bottom:4.5rem!important}.pl-xl-0{padding-left:0!important}.pl-xl-1{padding-left:.25rem!important}.pl-xl-2{padding-left:.5rem!important}.pl-xl-3{padding-left:1rem!important}.pl-xl-4{padding-left:1.5rem!important}.pl-xl-5{padding-left:3rem!important}.pl-xl-6{padding-left:4.5rem!important}.text-xl-left{text-align:left!important}.text-xl-right{text-align:right!important}.text-xl-center{text-align:center!important}}@media print{.d-print-none{display:none!important}.d-print-inline{display:inline!important}.d-print-inline-block{display:inline-block!important}.d-print-block{display:block!important}.d-print-table{display:table!important}.d-print-table-row{display:table-row!important}.d-print-table-cell{display:table-cell!important}.d-print-flex{display:flex!important}.d-print-inline-flex{display:inline-flex!important}}html{font-size:16px;scroll-behavior:smooth}body{overflow-y:scroll;letter-spacing:-.01em;touch-action:manipulation;text-rendering:optimizeLegibility;font-feature-settings:"liga" 0;position:relative}body .content ::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}body .content ::-webkit-scrollbar-thumb{border-radius:5px;background:#dee1e7}body .content ::-webkit-scrollbar-corner{background:0 0}body .content :hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#cbcfd6}@media print{body{background:0 0}}.navbar{min-height:3.5rem;align-items:stretch;background:0 0;color:rgba(53,64,82,.72)}.navbar::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.navbar::-webkit-scrollbar-thumb{border-radius:5px;background:#dee1e7}.navbar::-webkit-scrollbar-corner{background:0 0}.navbar:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#cbcfd6}.navbar .text-muted{color:rgba(53,64,82,.5184)!important}.navbar .navbar-brand{color:#354052}.navbar .navbar-brand:focus,.navbar .navbar-brand:hover{color:#354052;opacity:.8}.navbar .navbar-nav .nav-link{color:rgba(53,64,82,.72)}.navbar .navbar-nav .nav-link:focus,.navbar .navbar-nav .nav-link:hover{color:#354052}.navbar .navbar-nav .nav-link.disabled{color:rgba(53,64,82,.3)}.navbar .navbar-nav .active>.nav-link,.navbar .navbar-nav .nav-link.active,.navbar .navbar-nav .nav-link.show,.navbar .navbar-nav .show>.nav-link{color:#354052}.navbar .navbar-toggler{color:#354052;border-color:transparent}.navbar .navbar-text{color:rgba(53,64,82,.72)}.navbar .navbar-text a,.navbar .navbar-text a:focus,.navbar .navbar-text a:hover{color:rgba(53,64,82,.72)}@media not print{.theme-dark .navbar{box-shadow:0 0 0 1px rgba(0,0,0,.1);background:#354052;color:rgba(255,255,255,.72)}.theme-dark .navbar::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.theme-dark .navbar::-webkit-scrollbar-thumb{border-radius:5px;background:#dee1e7}.theme-dark .navbar::-webkit-scrollbar-corner{background:0 0}.theme-dark .navbar:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#cbcfd6}.theme-dark .navbar .text-muted{color:rgba(255,255,255,.5184)!important}.theme-dark .navbar .navbar-brand{color:#fff}.theme-dark .navbar .navbar-brand:focus,.theme-dark .navbar .navbar-brand:hover{color:#fff;opacity:.8}.theme-dark .navbar .navbar-nav .nav-link{color:rgba(255,255,255,.72)}.theme-dark .navbar .navbar-nav .nav-link:focus,.theme-dark .navbar .navbar-nav .nav-link:hover{color:#fff}.theme-dark .navbar .navbar-nav .nav-link.disabled{color:rgba(255,255,255,.3)}.theme-dark .navbar .navbar-nav .active>.nav-link,.theme-dark .navbar .navbar-nav .nav-link.active,.theme-dark .navbar .navbar-nav .nav-link.show,.theme-dark .navbar .navbar-nav .show>.nav-link{color:#fff}.theme-dark .navbar .navbar-toggler{color:#fff;border-color:transparent}.theme-dark .navbar .navbar-text{color:rgba(255,255,255,.72)}.theme-dark .navbar .navbar-text a,.theme-dark .navbar .navbar-text a:focus,.theme-dark .navbar .navbar-text a:hover{color:rgba(255,255,255,.72)}.theme-dark .navbar::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.theme-dark .navbar::-webkit-scrollbar-thumb{border-radius:5px;background:0 0}.theme-dark .navbar::-webkit-scrollbar-corner{background:0 0}.theme-dark .navbar:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#5d6675}.theme-dark .navbar .input-icon-addon{color:rgba(245,247,251,.64)}.theme-dark .navbar .form-control{border-color:transparent;background-color:rgba(0,0,0,.1)}.theme-dark .navbar .form-control::-webkit-input-placeholder{color:rgba(245,247,251,.64)}.theme-dark .navbar .form-control::-moz-placeholder{color:rgba(245,247,251,.64)}.theme-dark .navbar .form-control:-ms-input-placeholder{color:rgba(245,247,251,.64)}.theme-dark .navbar .form-control::-ms-input-placeholder{color:rgba(245,247,251,.64)}.theme-dark .navbar .form-control::placeholder{color:rgba(245,247,251,.64)}}@media not print and (prefers-color-scheme:dark){.theme-dark-auto .navbar{box-shadow:0 0 0 1px rgba(0,0,0,.1);background:#354052;color:rgba(255,255,255,.72)}.theme-dark-auto .navbar::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.theme-dark-auto .navbar::-webkit-scrollbar-thumb{border-radius:5px;background:#dee1e7}.theme-dark-auto .navbar::-webkit-scrollbar-corner{background:0 0}.theme-dark-auto .navbar:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#cbcfd6}.theme-dark-auto .navbar .text-muted{color:rgba(255,255,255,.5184)!important}.theme-dark-auto .navbar .navbar-brand{color:#fff}.theme-dark-auto .navbar .navbar-brand:focus,.theme-dark-auto .navbar .navbar-brand:hover{color:#fff;opacity:.8}.theme-dark-auto .navbar .navbar-nav .nav-link{color:rgba(255,255,255,.72)}.theme-dark-auto .navbar .navbar-nav .nav-link:focus,.theme-dark-auto .navbar .navbar-nav .nav-link:hover{color:#fff}.theme-dark-auto .navbar .navbar-nav .nav-link.disabled{color:rgba(255,255,255,.3)}.theme-dark-auto .navbar .navbar-nav .active>.nav-link,.theme-dark-auto .navbar .navbar-nav .nav-link.active,.theme-dark-auto .navbar .navbar-nav .nav-link.show,.theme-dark-auto .navbar .navbar-nav .show>.nav-link{color:#fff}.theme-dark-auto .navbar .navbar-toggler{color:#fff;border-color:transparent}.theme-dark-auto .navbar .navbar-text{color:rgba(255,255,255,.72)}.theme-dark-auto .navbar .navbar-text a,.theme-dark-auto .navbar .navbar-text a:focus,.theme-dark-auto .navbar .navbar-text a:hover{color:rgba(255,255,255,.72)}.theme-dark-auto .navbar::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.theme-dark-auto .navbar::-webkit-scrollbar-thumb{border-radius:5px;background:0 0}.theme-dark-auto .navbar::-webkit-scrollbar-corner{background:0 0}.theme-dark-auto .navbar:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#5d6675}.theme-dark-auto .navbar .input-icon-addon{color:rgba(245,247,251,.64)}.theme-dark-auto .navbar .form-control{border-color:transparent;background-color:rgba(0,0,0,.1)}.theme-dark-auto .navbar .form-control::-webkit-input-placeholder{color:rgba(245,247,251,.64)}.theme-dark-auto .navbar .form-control::-moz-placeholder{color:rgba(245,247,251,.64)}.theme-dark-auto .navbar .form-control:-ms-input-placeholder{color:rgba(245,247,251,.64)}.theme-dark-auto .navbar .form-control::-ms-input-placeholder{color:rgba(245,247,251,.64)}.theme-dark-auto .navbar .form-control::placeholder{color:rgba(245,247,251,.64)}}.navbar .dropdown-menu{position:absolute}.navbar .navbar-nav{min-height:3rem}.navbar .navbar-nav .nav-link{position:relative;min-width:2rem;min-height:2rem;justify-content:center}.navbar .navbar-nav .nav-link .badge{position:absolute;top:.375rem;right:.375rem;transform:translate(50%,-50%)}@media (max-width:32.98rem){.navbar-expand-sm .navbar-collapse{flex-direction:column}.navbar-expand-sm .navbar-collapse [class*=container]{flex-direction:column;align-items:stretch}.navbar-expand-sm .navbar-collapse .navbar-nav{margin-left:-.75rem;margin-right:-.75rem}.navbar-expand-sm .navbar-collapse .navbar-nav .nav-link{padding:.5rem .75rem;justify-content:flex-start}.navbar-expand-sm .navbar-collapse .dropdown-menu{padding:0;background:0 0;position:static;color:inherit;box-shadow:none;border:none;-moz-columns:1;columns:1;min-width:0}.navbar-expand-sm .navbar-collapse .dropdown-menu .dropdown-item{min-width:0;display:flex;width:auto;padding-left:2.25rem}.navbar-expand-sm .navbar-collapse .dropdown-toggle:after{margin-left:auto}.navbar-expand-sm .navbar-collapse .nav-item.active:after{border-bottom-width:0;border-left-width:2px;right:auto;top:0;bottom:0}}@media (min-width:33rem){.navbar-expand-sm .navbar-collapse{width:auto;flex:1 1 auto}.navbar-expand-sm .navbar-dark .nav-item.active .nav-link,.navbar-expand-sm.navbar-dark .nav-item.active .nav-link{background-color:rgba(0,0,0,.1)}.navbar-expand-sm .navbar-light .nav-item.active,.navbar-expand-sm.navbar-light .nav-item.active{position:relative}.navbar-expand-sm .navbar-light .nav-item.active:after,.navbar-expand-sm.navbar-light .nav-item.active:after{content:'';position:absolute;left:0;right:0;bottom:calc(-.25rem - 1px);border:0 solid #206bc4;border-bottom-width:2px}}@media (max-width:47.98rem){.navbar-expand-md .navbar-collapse{flex-direction:column}.navbar-expand-md .navbar-collapse [class*=container]{flex-direction:column;align-items:stretch}.navbar-expand-md .navbar-collapse .navbar-nav{margin-left:-.75rem;margin-right:-.75rem}.navbar-expand-md .navbar-collapse .navbar-nav .nav-link{padding:.5rem .75rem;justify-content:flex-start}.navbar-expand-md .navbar-collapse .dropdown-menu{padding:0;background:0 0;position:static;color:inherit;box-shadow:none;border:none;-moz-columns:1;columns:1;min-width:0}.navbar-expand-md .navbar-collapse .dropdown-menu .dropdown-item{min-width:0;display:flex;width:auto;padding-left:2.25rem}.navbar-expand-md .navbar-collapse .dropdown-toggle:after{margin-left:auto}.navbar-expand-md .navbar-collapse .nav-item.active:after{border-bottom-width:0;border-left-width:2px;right:auto;top:0;bottom:0}}@media (min-width:48rem){.navbar-expand-md .navbar-collapse{width:auto;flex:1 1 auto}.navbar-expand-md .navbar-dark .nav-item.active .nav-link,.navbar-expand-md.navbar-dark .nav-item.active .nav-link{background-color:rgba(0,0,0,.1)}.navbar-expand-md .navbar-light .nav-item.active,.navbar-expand-md.navbar-light .nav-item.active{position:relative}.navbar-expand-md .navbar-light .nav-item.active:after,.navbar-expand-md.navbar-light .nav-item.active:after{content:'';position:absolute;left:0;right:0;bottom:calc(-.25rem - 1px);border:0 solid #206bc4;border-bottom-width:2px}}@media (max-width:63.98rem){.navbar-expand-lg .navbar-collapse{flex-direction:column}.navbar-expand-lg .navbar-collapse [class*=container]{flex-direction:column;align-items:stretch}.navbar-expand-lg .navbar-collapse .navbar-nav{margin-left:-.75rem;margin-right:-.75rem}.navbar-expand-lg .navbar-collapse .navbar-nav .nav-link{padding:.5rem .75rem;justify-content:flex-start}.navbar-expand-lg .navbar-collapse .dropdown-menu{padding:0;background:0 0;position:static;color:inherit;box-shadow:none;border:none;-moz-columns:1;columns:1;min-width:0}.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item{min-width:0;display:flex;width:auto;padding-left:2.25rem}.navbar-expand-lg .navbar-collapse .dropdown-toggle:after{margin-left:auto}.navbar-expand-lg .navbar-collapse .nav-item.active:after{border-bottom-width:0;border-left-width:2px;right:auto;top:0;bottom:0}}@media (min-width:64rem){.navbar-expand-lg .navbar-collapse{width:auto;flex:1 1 auto}.navbar-expand-lg .navbar-dark .nav-item.active .nav-link,.navbar-expand-lg.navbar-dark .nav-item.active .nav-link{background-color:rgba(0,0,0,.1)}.navbar-expand-lg .navbar-light .nav-item.active,.navbar-expand-lg.navbar-light .nav-item.active{position:relative}.navbar-expand-lg .navbar-light .nav-item.active:after,.navbar-expand-lg.navbar-light .nav-item.active:after{content:'';position:absolute;left:0;right:0;bottom:calc(-.25rem - 1px);border:0 solid #206bc4;border-bottom-width:2px}}@media (max-width:75.23rem){.navbar-expand-xl .navbar-collapse{flex-direction:column}.navbar-expand-xl .navbar-collapse [class*=container]{flex-direction:column;align-items:stretch}.navbar-expand-xl .navbar-collapse .navbar-nav{margin-left:-.75rem;margin-right:-.75rem}.navbar-expand-xl .navbar-collapse .navbar-nav .nav-link{padding:.5rem .75rem;justify-content:flex-start}.navbar-expand-xl .navbar-collapse .dropdown-menu{padding:0;background:0 0;position:static;color:inherit;box-shadow:none;border:none;-moz-columns:1;columns:1;min-width:0}.navbar-expand-xl .navbar-collapse .dropdown-menu .dropdown-item{min-width:0;display:flex;width:auto;padding-left:2.25rem}.navbar-expand-xl .navbar-collapse .dropdown-toggle:after{margin-left:auto}.navbar-expand-xl .navbar-collapse .nav-item.active:after{border-bottom-width:0;border-left-width:2px;right:auto;top:0;bottom:0}}@media (min-width:75.25rem){.navbar-expand-xl .navbar-collapse{width:auto;flex:1 1 auto}.navbar-expand-xl .navbar-dark .nav-item.active .nav-link,.navbar-expand-xl.navbar-dark .nav-item.active .nav-link{background-color:rgba(0,0,0,.1)}.navbar-expand-xl .navbar-light .nav-item.active,.navbar-expand-xl.navbar-light .nav-item.active{position:relative}.navbar-expand-xl .navbar-light .nav-item.active:after,.navbar-expand-xl.navbar-light .nav-item.active:after{content:'';position:absolute;left:0;right:0;bottom:calc(-.25rem - 1px);border:0 solid #206bc4;border-bottom-width:2px}}.navbar-expand .navbar-collapse{flex-direction:column}.navbar-expand .navbar-collapse [class*=container]{flex-direction:column;align-items:stretch}.navbar-expand .navbar-collapse .navbar-nav{margin-left:-.75rem;margin-right:-.75rem}.navbar-expand .navbar-collapse .navbar-nav .nav-link{padding:.5rem .75rem;justify-content:flex-start}.navbar-expand .navbar-collapse .dropdown-menu{padding:0;background:0 0;position:static;color:inherit;box-shadow:none;border:none;-moz-columns:1;columns:1;min-width:0}.navbar-expand .navbar-collapse .dropdown-menu .dropdown-item{min-width:0;display:flex;width:auto;padding-left:2.25rem}.navbar-expand .navbar-collapse .dropdown-toggle:after{margin-left:auto}.navbar-expand .navbar-collapse .nav-item.active:after{border-bottom-width:0;border-left-width:2px;right:auto;top:0;bottom:0}.navbar-expand .navbar-collapse{width:auto;flex:1 1 auto}.navbar-expand .navbar-dark .nav-item.active .nav-link,.navbar-expand.navbar-dark .nav-item.active .nav-link{background-color:rgba(0,0,0,.1)}.navbar-expand .navbar-light .nav-item.active,.navbar-expand.navbar-light .nav-item.active{position:relative}.navbar-expand .navbar-light .nav-item.active:after,.navbar-expand.navbar-light .nav-item.active:after{content:'';position:absolute;left:0;right:0;bottom:calc(-.25rem - 1px);border:0 solid #206bc4;border-bottom-width:2px}.navbar-brand{display:inline-flex;align-items:center;font-weight:500}.navbar-brand-image{display:block;height:2rem}.navbar-toggler{border:0;width:2rem;height:2rem;position:relative;display:flex;align-items:center;justify-content:center}.navbar-toggler-icon{height:2px;width:1.25em;background:currentColor;border-radius:10px;transition:.2s .2s top,.2s .2s bottom,.2s transform,0s .2s opacity;position:relative}.navbar-toggler-icon:after,.navbar-toggler-icon:before{content:'';display:block;height:inherit;width:inherit;border-radius:inherit;background:inherit;position:absolute;left:0;transition:inherit}.navbar-toggler-icon:before{top:-.45em}.navbar-toggler-icon:after{bottom:-.45em}.navbar-toggler[aria-expanded=true] .navbar-toggler-icon{transform:rotate(45deg);transition:.3s top,.3s bottom,.3s .3s transform,0s .3s opacity}.navbar-toggler[aria-expanded=true] .navbar-toggler-icon:before{top:0;transform:rotate(-90deg)}.navbar-toggler[aria-expanded=true] .navbar-toggler-icon:after{bottom:0;opacity:0}.navbar-light{box-shadow:0 0 0 1px rgba(110,117,130,.2);background-color:#fff}.navbar-dark{box-shadow:0 0 0 1px rgba(0,0,0,.1);background:#354052;color:rgba(255,255,255,.72)}.navbar-dark::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.navbar-dark::-webkit-scrollbar-thumb{border-radius:5px;background:#dee1e7}.navbar-dark::-webkit-scrollbar-corner{background:0 0}.navbar-dark:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#cbcfd6}.navbar-dark .text-muted{color:rgba(255,255,255,.5184)!important}.navbar-dark .navbar-brand{color:#fff}.navbar-dark .navbar-brand:focus,.navbar-dark .navbar-brand:hover{color:#fff;opacity:.8}.navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,.72)}.navbar-dark .navbar-nav .nav-link:focus,.navbar-dark .navbar-nav .nav-link:hover{color:#fff}.navbar-dark .navbar-nav .nav-link.disabled{color:rgba(255,255,255,.3)}.navbar-dark .navbar-nav .active>.nav-link,.navbar-dark .navbar-nav .nav-link.active,.navbar-dark .navbar-nav .nav-link.show,.navbar-dark .navbar-nav .show>.nav-link{color:#fff}.navbar-dark .navbar-toggler{color:#fff;border-color:transparent}.navbar-dark .navbar-text{color:rgba(255,255,255,.72)}.navbar-dark .navbar-text a,.navbar-dark .navbar-text a:focus,.navbar-dark .navbar-text a:hover{color:rgba(255,255,255,.72)}.navbar-dark::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.navbar-dark::-webkit-scrollbar-thumb{border-radius:5px;background:0 0}.navbar-dark::-webkit-scrollbar-corner{background:0 0}.navbar-dark:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#5d6675}.navbar-dark .input-icon-addon{color:rgba(245,247,251,.64)}.navbar-dark .form-control{border-color:transparent;background-color:rgba(0,0,0,.1)}.navbar-dark .form-control::-webkit-input-placeholder{color:rgba(245,247,251,.64)}.navbar-dark .form-control::-moz-placeholder{color:rgba(245,247,251,.64)}.navbar-dark .form-control:-ms-input-placeholder{color:rgba(245,247,251,.64)}.navbar-dark .form-control::-ms-input-placeholder{color:rgba(245,247,251,.64)}.navbar-dark .form-control::placeholder{color:rgba(245,247,251,.64)}.navbar-nav{align-items:stretch}.navbar-nav .nav-item{display:flex;flex-direction:column;justify-content:center}.navbar-side{margin:0;display:flex;flex-direction:row;align-items:center;justify-content:space-around}@media (min-width:33rem){.navbar-vertical.navbar-expand-sm{width:15rem;position:fixed;top:0;left:0;bottom:0;z-index:1030;align-items:flex-start;transition:.3s transform;overflow-x:auto}.navbar-vertical.navbar-expand-sm.navbar-right{left:auto;right:0}.navbar-vertical.navbar-expand-sm .navbar-brand{padding:.75rem 0;justify-content:center}.navbar-vertical.navbar-expand-sm .navbar-collapse{align-items:stretch}.navbar-vertical.navbar-expand-sm .navbar-nav{flex-direction:column;flex-grow:1;min-height:auto}.navbar-vertical.navbar-expand-sm .navbar-nav .nav-link{padding-top:.5rem;padding-bottom:.5rem}.navbar-vertical.navbar-expand-sm>[class*=container]{flex-direction:column;align-items:stretch;min-height:100%;justify-content:flex-start}.navbar-vertical.navbar-expand-sm~.page{padding-left:15rem}.navbar-vertical.navbar-expand-sm~.page [class*=container]{padding-left:1.5rem;padding-right:1.5rem}.navbar-vertical.navbar-expand-sm.navbar-right~.page{padding-left:0;padding-right:15rem}.navbar-vertical.navbar-expand-sm .navbar-collapse{flex-direction:column}.navbar-vertical.navbar-expand-sm .navbar-collapse [class*=container]{flex-direction:column;align-items:stretch}.navbar-vertical.navbar-expand-sm .navbar-collapse .navbar-nav{margin-left:-.75rem;margin-right:-.75rem}.navbar-vertical.navbar-expand-sm .navbar-collapse .navbar-nav .nav-link{padding:.5rem .75rem;justify-content:flex-start}.navbar-vertical.navbar-expand-sm .navbar-collapse .dropdown-menu{padding:0;background:0 0;position:static;color:inherit;box-shadow:none;border:none;-moz-columns:1;columns:1;min-width:0}.navbar-vertical.navbar-expand-sm .navbar-collapse .dropdown-menu .dropdown-item{min-width:0;display:flex;width:auto;padding-left:2.25rem}.navbar-vertical.navbar-expand-sm .navbar-collapse .dropdown-toggle:after{margin-left:auto}.navbar-vertical.navbar-expand-sm .navbar-collapse .nav-item.active:after{border-bottom-width:0;border-left-width:2px;right:auto;top:0;bottom:0}}@media (min-width:48rem){.navbar-vertical.navbar-expand-md{width:15rem;position:fixed;top:0;left:0;bottom:0;z-index:1030;align-items:flex-start;transition:.3s transform;overflow-x:auto}.navbar-vertical.navbar-expand-md.navbar-right{left:auto;right:0}.navbar-vertical.navbar-expand-md .navbar-brand{padding:.75rem 0;justify-content:center}.navbar-vertical.navbar-expand-md .navbar-collapse{align-items:stretch}.navbar-vertical.navbar-expand-md .navbar-nav{flex-direction:column;flex-grow:1;min-height:auto}.navbar-vertical.navbar-expand-md .navbar-nav .nav-link{padding-top:.5rem;padding-bottom:.5rem}.navbar-vertical.navbar-expand-md>[class*=container]{flex-direction:column;align-items:stretch;min-height:100%;justify-content:flex-start}.navbar-vertical.navbar-expand-md~.page{padding-left:15rem}.navbar-vertical.navbar-expand-md~.page [class*=container]{padding-left:1.5rem;padding-right:1.5rem}.navbar-vertical.navbar-expand-md.navbar-right~.page{padding-left:0;padding-right:15rem}.navbar-vertical.navbar-expand-md .navbar-collapse{flex-direction:column}.navbar-vertical.navbar-expand-md .navbar-collapse [class*=container]{flex-direction:column;align-items:stretch}.navbar-vertical.navbar-expand-md .navbar-collapse .navbar-nav{margin-left:-.75rem;margin-right:-.75rem}.navbar-vertical.navbar-expand-md .navbar-collapse .navbar-nav .nav-link{padding:.5rem .75rem;justify-content:flex-start}.navbar-vertical.navbar-expand-md .navbar-collapse .dropdown-menu{padding:0;background:0 0;position:static;color:inherit;box-shadow:none;border:none;-moz-columns:1;columns:1;min-width:0}.navbar-vertical.navbar-expand-md .navbar-collapse .dropdown-menu .dropdown-item{min-width:0;display:flex;width:auto;padding-left:2.25rem}.navbar-vertical.navbar-expand-md .navbar-collapse .dropdown-toggle:after{margin-left:auto}.navbar-vertical.navbar-expand-md .navbar-collapse .nav-item.active:after{border-bottom-width:0;border-left-width:2px;right:auto;top:0;bottom:0}}@media (min-width:64rem){.navbar-vertical.navbar-expand-lg{width:15rem;position:fixed;top:0;left:0;bottom:0;z-index:1030;align-items:flex-start;transition:.3s transform;overflow-x:auto}.navbar-vertical.navbar-expand-lg.navbar-right{left:auto;right:0}.navbar-vertical.navbar-expand-lg .navbar-brand{padding:.75rem 0;justify-content:center}.navbar-vertical.navbar-expand-lg .navbar-collapse{align-items:stretch}.navbar-vertical.navbar-expand-lg .navbar-nav{flex-direction:column;flex-grow:1;min-height:auto}.navbar-vertical.navbar-expand-lg .navbar-nav .nav-link{padding-top:.5rem;padding-bottom:.5rem}.navbar-vertical.navbar-expand-lg>[class*=container]{flex-direction:column;align-items:stretch;min-height:100%;justify-content:flex-start}.navbar-vertical.navbar-expand-lg~.page{padding-left:15rem}.navbar-vertical.navbar-expand-lg~.page [class*=container]{padding-left:1.5rem;padding-right:1.5rem}.navbar-vertical.navbar-expand-lg.navbar-right~.page{padding-left:0;padding-right:15rem}.navbar-vertical.navbar-expand-lg .navbar-collapse{flex-direction:column}.navbar-vertical.navbar-expand-lg .navbar-collapse [class*=container]{flex-direction:column;align-items:stretch}.navbar-vertical.navbar-expand-lg .navbar-collapse .navbar-nav{margin-left:-.75rem;margin-right:-.75rem}.navbar-vertical.navbar-expand-lg .navbar-collapse .navbar-nav .nav-link{padding:.5rem .75rem;justify-content:flex-start}.navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu{padding:0;background:0 0;position:static;color:inherit;box-shadow:none;border:none;-moz-columns:1;columns:1;min-width:0}.navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item{min-width:0;display:flex;width:auto;padding-left:2.25rem}.navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-toggle:after{margin-left:auto}.navbar-vertical.navbar-expand-lg .navbar-collapse .nav-item.active:after{border-bottom-width:0;border-left-width:2px;right:auto;top:0;bottom:0}}@media (min-width:75.25rem){.navbar-vertical.navbar-expand-xl{width:15rem;position:fixed;top:0;left:0;bottom:0;z-index:1030;align-items:flex-start;transition:.3s transform;overflow-x:auto}.navbar-vertical.navbar-expand-xl.navbar-right{left:auto;right:0}.navbar-vertical.navbar-expand-xl .navbar-brand{padding:.75rem 0;justify-content:center}.navbar-vertical.navbar-expand-xl .navbar-collapse{align-items:stretch}.navbar-vertical.navbar-expand-xl .navbar-nav{flex-direction:column;flex-grow:1;min-height:auto}.navbar-vertical.navbar-expand-xl .navbar-nav .nav-link{padding-top:.5rem;padding-bottom:.5rem}.navbar-vertical.navbar-expand-xl>[class*=container]{flex-direction:column;align-items:stretch;min-height:100%;justify-content:flex-start}.navbar-vertical.navbar-expand-xl~.page{padding-left:15rem}.navbar-vertical.navbar-expand-xl~.page [class*=container]{padding-left:1.5rem;padding-right:1.5rem}.navbar-vertical.navbar-expand-xl.navbar-right~.page{padding-left:0;padding-right:15rem}.navbar-vertical.navbar-expand-xl .navbar-collapse{flex-direction:column}.navbar-vertical.navbar-expand-xl .navbar-collapse [class*=container]{flex-direction:column;align-items:stretch}.navbar-vertical.navbar-expand-xl .navbar-collapse .navbar-nav{margin-left:-.75rem;margin-right:-.75rem}.navbar-vertical.navbar-expand-xl .navbar-collapse .navbar-nav .nav-link{padding:.5rem .75rem;justify-content:flex-start}.navbar-vertical.navbar-expand-xl .navbar-collapse .dropdown-menu{padding:0;background:0 0;position:static;color:inherit;box-shadow:none;border:none;-moz-columns:1;columns:1;min-width:0}.navbar-vertical.navbar-expand-xl .navbar-collapse .dropdown-menu .dropdown-item{min-width:0;display:flex;width:auto;padding-left:2.25rem}.navbar-vertical.navbar-expand-xl .navbar-collapse .dropdown-toggle:after{margin-left:auto}.navbar-vertical.navbar-expand-xl .navbar-collapse .nav-item.active:after{border-bottom-width:0;border-left-width:2px;right:auto;top:0;bottom:0}}.navbar-vertical.navbar-expand{width:15rem;position:fixed;top:0;left:0;bottom:0;z-index:1030;align-items:flex-start;transition:.3s transform;overflow-x:auto}.navbar-vertical.navbar-expand.navbar-right{left:auto;right:0}.navbar-vertical.navbar-expand .navbar-brand{padding:.75rem 0;justify-content:center}.navbar-vertical.navbar-expand .navbar-collapse{align-items:stretch}.navbar-vertical.navbar-expand .navbar-nav{flex-direction:column;flex-grow:1;min-height:auto}.navbar-vertical.navbar-expand .navbar-nav .nav-link{padding-top:.5rem;padding-bottom:.5rem}.navbar-vertical.navbar-expand>[class*=container]{flex-direction:column;align-items:stretch;min-height:100%;justify-content:flex-start}.navbar-vertical.navbar-expand~.page{padding-left:15rem}.navbar-vertical.navbar-expand~.page [class*=container]{padding-left:1.5rem;padding-right:1.5rem}.navbar-vertical.navbar-expand.navbar-right~.page{padding-left:0;padding-right:15rem}.navbar-vertical.navbar-expand .navbar-collapse{flex-direction:column}.navbar-vertical.navbar-expand .navbar-collapse [class*=container]{flex-direction:column;align-items:stretch}.navbar-vertical.navbar-expand .navbar-collapse .navbar-nav{margin-left:-.75rem;margin-right:-.75rem}.navbar-vertical.navbar-expand .navbar-collapse .navbar-nav .nav-link{padding:.5rem .75rem;justify-content:flex-start}.navbar-vertical.navbar-expand .navbar-collapse .dropdown-menu{padding:0;background:0 0;position:static;color:inherit;box-shadow:none;border:none;-moz-columns:1;columns:1;min-width:0}.navbar-vertical.navbar-expand .navbar-collapse .dropdown-menu .dropdown-item{min-width:0;display:flex;width:auto;padding-left:2.25rem}.navbar-vertical.navbar-expand .navbar-collapse .dropdown-toggle:after{margin-left:auto}.navbar-vertical.navbar-expand .navbar-collapse .nav-item.active:after{border-bottom-width:0;border-left-width:2px;right:auto;top:0;bottom:0}.page{display:flex;flex-direction:column;position:relative;min-height:100vh}.content{padding-top:1.25rem;padding-bottom:1.25rem;flex:1;display:flex;flex-direction:column}.content>[class*=container]{flex:1}@media print{.content{margin:0!important}}.page-header{display:flex;align-items:center;min-height:2.25rem;margin:0 0 1.25rem}.page-header>*{flex:1}.page-pretitle{font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:#6e7582}.page-title{margin:0;font-size:1.375rem;font-weight:400;line-height:1;color:inherit}.footer{border-top:1px solid rgba(110,117,130,.2);background-color:#fff;padding:1rem 0;color:#6e7582;margin-bottom:-1.25rem;margin-top:1.25rem}.footer-transparent{margin-top:0;background-color:transparent;border-top:0}.alert-avatar{padding-left:3.75rem}.alert-avatar .avatar{position:absolute;top:.5rem;left:.75rem}.alert a{display:inline-block;height:100%;vertical-align:middle}.alert a .icon{height:100%}.avatar{position:relative;width:2rem;height:2rem;font-size:.75rem;display:inline-flex;align-items:center;justify-content:center;font-weight:400;color:#6e7582;text-align:center;text-transform:uppercase;vertical-align:bottom;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:#f1f3f8 no-repeat center/cover;border-radius:50%}.avatar .icon{font-size:1.25em}.avatar .badge{position:absolute;right:0;bottom:0;border-radius:50%;box-shadow:0 0 0 2px #fff}a.avatar{cursor:pointer}.avatar-sm{width:1.25rem;height:1.25rem;font-size:.625rem;line-height:1.25rem}.avatar-md{width:2.5rem;height:2.5rem;font-size:1.25rem;line-height:2.5rem}.avatar-lg{width:4.5rem;height:4.5rem;font-size:2.25rem;line-height:4.5rem}.avatar-xl{width:6rem;height:6rem;font-size:3rem;line-height:6rem}.avatar-list{display:inline-flex;padding:0;margin:0 0 -.5rem}.avatar-list .avatar{margin-bottom:.5rem}.avatar-list .avatar:not(:last-child){margin-right:.5rem}.avatar-list a.avatar:hover{z-index:1}.avatar-list-stacked .avatar{margin-right:-.5rem!important;box-shadow:0 0 0 2px #fff}.card-footer .avatar-list-stacked .avatar{box-shadow:0 0 0 2px rgba(53,64,82,.024)}.avatar-upload{width:4rem;height:4rem;border:1px dashed rgba(110,117,130,.2);background:#fff;flex-direction:column;transition:.3s color,.3s background-color}.avatar-upload svg{width:1.5rem;height:1.5rem;stroke-width:1}.avatar-upload:hover{border-color:#206bc4;color:#206bc4;text-decoration:none}.avatar-upload-text{font-size:.625rem;line-height:1;margin-top:.25rem}.badge{font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;display:inline-flex;justify-content:center;background:#cbcfd6;overflow:hidden;vertical-align:text-bottom;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}a.badge{color:#fff}.badge:empty{display:inline-block;width:.5rem;height:.5rem;min-width:0;min-height:auto;padding:0;border-radius:50%}.badge-up{position:absolute;top:25%;right:0;min-width:1.75em;min-height:1.75em;padding:0 .25rem;line-height:1rem;background-clip:padding-box;transform:translate(0,-50%)}.badge-outline{background-color:transparent;border:1px solid currentColor}.badge-pill{border-radius:100px;min-width:1.75em}.badge-avatar{box-sizing:content-box;width:1.75em;margin:0 .5em 0 -.5em;color:rgba(245,247,251,.24);background:rgba(53,64,82,.24) no-repeat center/cover;vertical-align:text-bottom}.badge-addon{padding:0 .5rem;margin:0 -.5em 0 .5em;min-width:1.75em;background:rgba(53,64,82,.24);text-align:center;color:#fff;text-decoration:none}.breadcrumb{padding:0;margin:0;background:0 0}.breadcrumb-item.active a{color:inherit;pointer-events:none}.breadcrumb-dots .breadcrumb-item+.breadcrumb-item:before{content:"·"}.breadcrumb-arrows .breadcrumb-item+.breadcrumb-item:before{content:"›"}.breadcrumb-bullets .breadcrumb-item+.breadcrumb-item:before{content:"•"}.breadcrumb-alternate a{color:#6e7582}.breadcrumb-alternate .breadcrumb-item.active{color:inherit}.btn{font-weight:500;display:inline-flex;align-items:center;justify-content:center}.btn:not([class^=btn-outline]):not([class*=" btn-outline"]):not([class^=btn-ghost]):not([class*=" btn-ghost"]):not(.btn-secondary){text-shadow:1px 1px 0 rgba(0,0,0,.02)}.btn:not([class^=btn-outline]):not([class*=" btn-outline"]):not([class^=btn-ghost]):not([class*=" btn-ghost"]):not(:focus):not(.focus){box-shadow:0 1px 3px 0 rgba(0,0,0,.05),inset 0 2px 0 -1px rgba(255,255,255,.1)}.btn:not([class^=btn-outline]):not([class*=" btn-outline"]):not([class^=btn-ghost]):not([class*=" btn-ghost"]) svg.icon{-webkit-filter:drop-shadow(1px 1px 0 rgba(0, 0, 0, .05));filter:drop-shadow(1px 1px 0 rgba(0, 0, 0, .05))}.btn.disabled,.btn:disabled{cursor:not-allowed}.btn .icon{margin:0 .25em 0 -.25em;font-size:1.2em;vertical-align:sub}.btn .avatar{width:1.25rem;height:1.25rem;vertical-align:text-top;margin:0 .5em 0 -.25em}.btn .icon-right{margin:0 -.25em 0 .5em}.btn svg.icon{width:1em;height:1em;stroke-width:1.75}.btn-secondary{color:#354052;background-color:#fff;border-color:rgba(110,117,130,.2);background-image:linear-gradient(-180deg,rgba(53,64,82,0),rgba(53,64,82,.04) 100%);box-shadow:none!important}.btn-secondary:hover{color:#354052;background-color:#ececec;border-color:rgba(87,92,102,.2)}.btn-secondary.focus,.btn-secondary:focus{color:#354052;background-color:#ececec;border-color:rgba(87,92,102,.2);box-shadow:0 0 0 .2rem rgba(75,84,101,.5)}.btn-secondary.active,.btn-secondary:active,.show>.btn-secondary.dropdown-toggle{color:#354052;background-color:#e6e6e6;border-color:rgba(81,86,95,.2)}.btn-secondary.active:focus,.btn-secondary:active:focus,.show>.btn-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(75,84,101,.5)}.btn-secondary.disabled,.btn-secondary:disabled{color:#354052;background-color:#fff;border-color:rgba(110,117,130,.2)}.btn-secondary.active{background:#206bc4;color:#fff;z-index:3!important}.btn-group-lg>.btn svg.icon,.btn-lg svg.icon{stroke-width:2}.btn-pill{padding-right:1.5em;padding-left:1.5em;border-radius:10rem}.btn-pill[class*=btn-icon]{padding:.375rem 15px}.btn-icon{min-width:calc(2.0333333rem + 2px)}.btn-group-sm>.btn-icon.btn,.btn-icon.btn-sm{min-width:calc(1.35rem + 2px)}.btn-icon .icon{margin:0 -1em}.btn-link{box-shadow:none!important}.btn-square{border-radius:0}.btn-list{display:flex;flex-wrap:wrap;margin-bottom:-.5rem!important;margin-right:-.5rem;line-height:1}.btn-list>.btn,.btn-list>.dropdown{margin:0 .5rem .5rem 0}.btn-list>.btn-block{flex:1;white-space:nowrap}.btn-options{display:flex;align-items:center;padding:0;color:#6e7582;cursor:pointer;background:0 0;border:none}.btn-options:focus{outline:0}.btn-options .icon{width:1rem;height:1rem}.btn-floating{position:fixed;z-index:1030;bottom:1.5rem;right:1.5rem;border-radius:50%}.btn-loading{position:relative;color:transparent!important;text-shadow:none!important;pointer-events:none}.btn-loading:after{content:'';display:inline-block;vertical-align:text-bottom;border:1px solid currentColor;border-right-color:transparent;border-radius:50%;color:#fff;position:absolute;width:1rem;height:1rem;left:calc(50% - .5rem);top:calc(50% - .5rem);-webkit-animation:spinner-border .75s linear infinite;animation:spinner-border .75s linear infinite}.calendar{display:block;font-size:.765625rem;border:1px solid rgba(110,117,130,.2);border-radius:3px}.calendar-nav{display:flex;align-items:center}.calendar-title{flex:1;text-align:center}.calendar-body,.calendar-header{display:flex;flex-wrap:wrap;justify-content:flex-start;padding:.5rem 0}.calendar-header{color:#6e7582}.calendar-date{flex:0 0 14.2857143%;max-width:14.2857143%;padding:.2rem;text-align:center;border:0}.calendar-date.next-month,.calendar-date.prev-month{opacity:.25}.calendar-date .date-item{position:relative;display:inline-block;width:1.4rem;height:1.4rem;line-height:1.4rem;color:#66758c;text-align:center;text-decoration:none;white-space:nowrap;vertical-align:middle;cursor:pointer;background:0 0;border:1px solid transparent;border-radius:50%;outline:0;transition:background .3s,border .3s,box-shadow .32s,color .3s}.calendar-date .date-item:hover{color:#206bc4;text-decoration:none;background:#fefeff;border-color:rgba(110,117,130,.2)}.calendar-date .date-today{color:#206bc4;border-color:rgba(110,117,130,.2)}.calendar-range{position:relative}.calendar-range:before{position:absolute;top:50%;right:0;left:0;height:1.4rem;content:"";background:rgba(32,107,196,.1);transform:translateY(-50%)}.calendar-range.range-end .date-item,.calendar-range.range-start .date-item{color:#fff;background:#206bc4;border-color:#206bc4}.calendar-range.range-start:before{left:50%}.calendar-range.range-end:before{right:50%}.card{margin-bottom:1.25rem;box-shadow:rgba(53,64,82,.04) 0 2px 4px 0}@media (max-width:75.23rem){.card{margin-bottom:.75rem}}@media print{.card{border:none;box-shadow:none}}a.card{color:inherit;transition:.3s box-shadow}a.card:hover{text-decoration:none;box-shadow:rgba(53,64,82,.16) 0 2px 16px 0}.card-group{margin-bottom:1.5rem}.card-inactive{pointer-events:none;box-shadow:none}.card-inactive .card-body{opacity:.64}.card-active{position:relative;background-color:rgba(32,107,196,.03)}.card-active:before{position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;content:"";border:1px solid #206bc4;border-radius:inherit}.card-link{color:inherit}.card-link:hover{color:inherit;text-decoration:none;box-shadow:0 1px 6px 0 rgba(0,0,0,.08)}.card-btn{padding:1.25rem 1.25rem;text-align:center;background:rgba(32,107,196,.02);transition:.3s background}.card-btn:hover{text-decoration:none;background:rgba(32,107,196,.06)}.card-stacked{position:relative}.card-stacked:after{position:absolute;top:-5px;right:5px;left:5px;height:5px;content:"";background:#fff;border:1px solid rgba(110,117,130,.2);border-radius:3px 3px 0 0}.card-cover{position:relative;padding:1.25rem 1.25rem;background:#666 no-repeat center/cover}.card-cover:before{position:absolute;top:0;right:0;bottom:0;left:0;content:"";background:rgba(53,64,82,.24)}.card-cover:first-child,.card-cover:first-child:before{border-radius:3px 3px 0 0}.card-cover-blurred:before{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.card-actions{margin-left:auto;font-size:.75rem}.card-actions a{text-decoration:none}.card-header{display:flex;align-items:center;background:0 0}.card-header-tabs{flex:1;margin:-1.25rem -1.25rem}.card-header-pills{flex:1}.card-footer{color:#6e7582}.card-progress{height:.25rem}.card-progress:last-child{border-radius:0 0 2px 2px}.card-progress:first-child{border-radius:2px 2px 0 0}.card-meta{color:#6e7582}.card-title{display:block;margin:0 0 1rem;font-size:1.125rem;font-weight:500;line-height:1.3333333}a.card-title:hover{color:inherit}.card-header .card-title{margin:.125rem 0}.card-subtitle{margin-top:-1.25rem;margin-bottom:.625rem;font-size:87.5%;color:#6e7582}.card-body>:last-child{margin-bottom:0}.card-sm>.card-body{padding:.75rem}@media (min-width:48rem){.card-md>.card-body{padding:1.5rem}}@media (min-width:48rem){.card-lg>.card-body{padding:2rem}}@media (min-width:64rem){.card-lg>.card-body{padding:4rem}}@media print{.card-body{padding:0}}.card-body+.card-body{border-top:1px solid rgba(110,117,130,.2)}.card-body-scrollable{overflow:auto}.card-options{top:1.5rem;right:.75rem;display:flex;margin-left:auto}.card-options-link{display:inline-block;min-width:1rem;margin-left:.25rem;color:#6e7582}.card-drop{line-height:1;color:#6e7582}.card-drop .icon{width:1.5rem;height:1.5rem;stroke-width:1}.card-status-top{position:absolute;top:0;right:0;left:0;height:2px;border-radius:3px 3px 0 0}.card-status-left{position:absolute;right:auto;bottom:0;width:2px;height:100%;border-radius:3px 0 0 3px}.card-status-bottom{position:absolute;top:initial;bottom:0;width:100%;height:2px;border-radius:0 0 3px 3px}.card-table{margin-bottom:0}.card-table tr td:first-child,.card-table tr th:first-child{padding-left:1.25rem}.card-table tr td:last-child,.card-table tr th:last-child{padding-right:1.25rem}.card-table thead tr:first-child td,.card-table thead tr:first-child th{border-top:0}.card-table tbody tr:last-child td,.card-table tbody tr:last-child th{border-bottom:0}.card-body+.card-table{border-top:1px solid rgba(110,117,130,.2)}.card-code{padding:0}.card-code .highlight{margin:0;border:0}.card-code pre{margin:0;color:#fff;text-shadow:none;background:0 0}.card-chart{position:relative;z-index:1;height:3.5rem}.card-avatar{box-shadow:0 0 0 .5rem #fff}.card-body+.card-list-group{border-top:1px solid rgba(110,117,130,.2)}.card-list-group .list-group-item{padding-right:1.25rem;padding-left:1.25rem;border-right:0;border-left:0;border-radius:0}.card-list-group .list-group-item:last-child{border-bottom:0}.card-list-group .list-group-item:first-child{border-top:0}.card-tabs{margin-bottom:1.5rem}.card-tabs .nav-tabs{position:relative;z-index:1000;border-bottom:0}.card-tabs .nav-tabs .nav-link{background:rgba(53,64,82,.024);border:1px solid rgba(110,117,130,.2);border-bottom:0}.card-tabs .nav-tabs .nav-link.active,.card-tabs .nav-tabs .nav-link:active,.card-tabs .nav-tabs .nav-link:hover{border-color:rgba(110,117,130,.2)}.card-tabs .nav-tabs .nav-link.active{background:#fff}.card-tabs .nav-tabs .nav-item:not(:first-child) .nav-link{border-top-left-radius:0}.card-tabs .nav-tabs .nav-item:not(:last-child) .nav-link{border-top-right-radius:0}.card-tabs .nav-tabs .nav-item+.nav-item{margin-left:-1px}.card-tabs .nav-tabs-bottom{margin-bottom:0}.card-tabs .nav-tabs-bottom .nav-item{margin-top:-1px;margin-bottom:0}.card-tabs .nav-tabs-bottom .nav-item .nav-link{border-top-width:0;border-bottom:1px solid rgba(110,117,130,.2);border-top-left-radius:0;border-top-right-radius:0}.card-tabs .card{margin:0;border-top-left-radius:0}.close:focus{outline:0;color:#354052}.dropdown-menu{box-shadow:0 .5rem 1rem rgba(0,0,0,.15);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:0}.dropdown-menu.card{padding:0;min-width:25rem;display:none}.dropdown-menu.card.show{display:flex}.dropdown-item{min-width:14rem;color:inherit;display:flex;align-items:center;margin:0}.dropdown-item-icon{width:1rem!important;font-size:1rem!important;margin-right:.5rem;opacity:.64;text-align:center;stroke-width:2px}.dropdown-header{font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:#6e7582;padding-bottom:.25rem;pointer-events:none}.dropdown-menu-scrollable{height:auto;max-height:12rem;overflow-x:hidden}.dropdown-menu-columns{-moz-columns:2;columns:2;-moz-column-gap:0;column-gap:0}.dropdown-menu-columns .dropdown-item{display:inline-flex;min-width:10rem}.dropdown-menu-columns-2{-moz-columns:2;columns:2}.dropdown-menu-columns-3{-moz-columns:3;columns:3}.dropdown-menu-columns-4{-moz-columns:4;columns:4}.dropdown-menu-arrow{margin-top:.5rem}.dropdown-menu-arrow:before{content:"";position:absolute;top:-4px;left:12px;display:block;background:inherit;width:14px;height:14px;transform:rotate(45deg);transform-origin:center;border:1px solid;border-color:inherit;z-index:-1;clip:rect(0,9px,9px,0)}.dropdown-menu-arrow.dropdown-menu-right:before{right:12px;left:auto}.dropright>.dropdown-menu{margin-top:calc(-.5rem - 1px);margin-left:0}.dropright .dropdown-toggle:after{margin-left:auto}.dropdown-menu-card{padding:0}.dropdown-menu-card>.card{margin:0;border:0;box-shadow:none}.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:1rem;text-align:center}@media (min-width:48rem){.empty{padding:3rem}}.empty .empty-icon{margin:0 0 1rem;font-size:2rem;font-weight:400;line-height:1}.empty .empty-subtitle,.empty .empty-title{margin:0 0 .5rem}.empty .empty-action{margin-top:1.5rem}.empty-bordered{border:1px solid rgba(110,117,130,.2);border-radius:3px}.col-separator{border-left:1px solid rgba(110,117,130,.2)}.container-tight{width:100%;padding-right:.75rem;padding-left:.75rem;margin-right:auto;margin-left:auto;max-width:30rem}.container-narrow{width:100%;padding-right:.75rem;padding-left:.75rem;margin-right:auto;margin-left:auto;max-width:45rem}.row-0{margin-right:0;margin-left:0}.row-0>.col,.row-0>[class*=col-]{padding-right:0;padding-left:0}.row-0 .card{margin-bottom:0}.row-sm{margin-right:-.375rem;margin-left:-.375rem}.row-sm>.col,.row-sm>[class*=col-]{padding-right:.375rem;padding-left:.375rem}.row-sm .card{margin-bottom:.75rem}.row-md{margin-right:-1.5rem;margin-left:-1.5rem}.row-md>.col,.row-md>[class*=col-]{padding-right:1.5rem;padding-left:1.5rem}.row-md .card{margin-bottom:3rem}.row-lg{margin-right:-3rem;margin-left:-3rem}.row-lg>.col,.row-lg>[class*=col-]{padding-right:3rem;padding-left:3rem}.row-lg .card{margin-bottom:6rem}.row-deck>.col,.row-deck>[class*=col-]{display:flex;align-items:stretch}.row-deck>.col .card,.row-deck>[class*=col-] .card{flex:1 1 auto}.row-cards{margin-left:-.625rem;margin-right:-.625rem}.row-cards .row-cards{flex:1}.row-cards>*{padding-left:.625rem;padding-right:.625rem}@media (max-width:75.23rem){.row-cards{margin-left:-.375rem;margin-right:-.375rem}.row-cards>*{padding-left:.375rem;padding-right:.375rem}}.icon{width:1em;height:1em;font-size:1em;vertical-align:-.2em}.icon:hover{text-decoration:none}.icon-filled{fill:currentColor}.icon-thin{stroke-width:1.5}.icon-md{font-size:1.5rem}.icon-lg{font-size:2rem}.icon-xl{font-size:4rem}.icons-list{display:flex;flex-wrap:wrap;padding:0;margin:0 -2px -1px 0;list-style:none}.icons-list>li{flex:1 0 4rem}.icons-list-wrap{overflow:hidden}.icons-list-item{display:flex;align-items:center;justify-content:center;height:4rem;text-align:center;border-right:1px solid rgba(110,117,130,.2);border-bottom:1px solid rgba(110,117,130,.2)}.icons-list-item i{font-size:1.25rem}textarea[cols]{height:auto}.form-label{font-size:.875rem;font-weight:500;display:block;margin-bottom:.5rem}.form-label.required:after{content:"*";margin-left:.25rem;color:#cd201f}.form-label-description{float:right;font-weight:400;color:#6e7582;line-height:1.9591837;font-size:87.5%}.form-hint{display:block;font-size:87.5%;color:#6e7582;line-height:1.3333334}.form-hint:last-child{margin-bottom:0}.form-hint+.form-control{margin-top:.25rem}.form-label+.form-hint{margin-top:-.5rem}.form-control+.form-hint,.form-select+.form-hint{margin-top:.25rem}.form-control:-webkit-autofill{box-shadow:0 0 0 1000px #fff inset}.form-control.disabled,.form-control:disabled{color:#6e7582;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-control[size]{width:auto}.form-control-light{background-color:#f5f7fb;border-color:transparent}.form-control-dark{background-color:rgba(0,0,0,.1);color:#fff;border-color:transparent}.form-control-dark:focus{background-color:rgba(0,0,0,.1);box-shadow:none;border-color:rgba(255,255,255,.24)}.form-control-dark::-webkit-input-placeholder{color:rgba(255,255,255,.6)}.form-control-dark::-moz-placeholder{color:rgba(255,255,255,.6)}.form-control-dark:-ms-input-placeholder{color:rgba(255,255,255,.6)}.form-control-dark::-ms-input-placeholder{color:rgba(255,255,255,.6)}.form-control-dark::placeholder{color:rgba(255,255,255,.6)}.form-control-rounded{border-radius:10rem}.form-control-flush{padding:0;background:0 0!important;border-color:transparent!important;resize:none;box-shadow:none!important;line-height:inherit}.form-footer{margin-top:2rem}.form-fieldset{padding:1rem;margin-bottom:1rem;background:rgba(53,64,82,.024);border:1px solid rgba(110,117,130,.2);border-radius:3px}.form-help{display:inline-flex;font-weight:500;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;font-size:.75rem;color:#6e7582;text-align:center;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:rgba(145,152,163,.1);border-radius:50%;transition:.3s background-color,.3s color}.form-help:hover,.form-help[aria-describedby]{color:#fff;background:#206bc4}.form-check{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.form-check.form-check-highlight .form-check-input:not(:checked)~.form-check-label{opacity:.64}.form-check-input{margin-top:.25rem}.form-switch .form-check-input{transition:.3s background-color,.3s background-position}.form-check-label{line-height:1.3333334;padding:.125rem 0}.form-check-description{color:#6e7582;font-size:.75rem;line-height:1.3333334}.input-group-link{font-size:.75rem}.input-group-flat:focus-within{box-shadow:0 0 0 .2rem rgba(32,107,196,.25);border-radius:3px}.input-group-flat:focus-within .form-control,.input-group-flat:focus-within .input-group-text{border-color:#7aade9!important}.input-group-flat .form-control:focus{border-color:rgba(110,117,130,.2);box-shadow:none}.input-group-flat .form-control:not(:last-child){border-right:0}.input-group-flat .form-control:not(:first-child){border-left:0}.input-group-flat .input-group-text{background:0 0;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.input-group-flat .input-group-text:first-child{padding-right:0}.input-group-flat .input-group-text:last-child{padding-left:0}.form-file-button{margin-left:0;border-left:0}.input-icon{position:relative}.input-icon .form-control:not(:last-child){padding-right:2.5rem}.input-icon .form-control:not(:first-child){padding-left:2.5rem}.input-icon-addon{position:absolute;top:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;min-width:2.5rem;color:#6e7582;pointer-events:none;font-size:1.2em}.input-icon-addon:last-child{right:0;left:auto}.form-colorinput{position:relative;display:inline-block;margin:0;line-height:1;cursor:pointer}.form-colorinput-input{position:absolute;z-index:-1;opacity:0}.form-colorinput-color{display:block;width:1.5rem;height:1.5rem;color:#fff;border:1px solid rgba(110,117,130,.2);border-radius:3px;box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}.form-colorinput-color:before{position:absolute;top:0;left:0;width:100%;height:100%;content:"";background:no-repeat center center/1rem;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6' transform='scale%28.8%29' transform-origin='50% 50%'/%3e%3c/svg%3e");opacity:0;transition:.3s opacity}.form-colorinput-input:checked~.form-colorinput-color:before{opacity:1}.form-colorinput-input:focus~.form-colorinput-color{border-color:#206bc4;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.form-colorinput-light .form-colorinput-color:before{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23354052' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6' transform='scale%28.8%29' transform-origin='50% 50%'/%3e%3c/svg%3e")}.form-imagecheck{position:relative;margin:0;cursor:pointer}.form-imagecheck-input{position:absolute;z-index:-1;opacity:0}.form-imagecheck-figure{position:relative;display:block;margin:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid rgba(110,117,130,.2);border-radius:3px}.form-imagecheck-input:focus~.form-imagecheck-figure{border-color:#206bc4;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.form-imagecheck-input:checked~.form-imagecheck-figure{border-color:rgba(110,117,130,.2)}.form-imagecheck-figure:before{position:absolute;top:.25rem;left:.25rem;z-index:1;display:block;width:1rem;height:1rem;color:#fff;pointer-events:none;content:"";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:#fff;border:1px solid rgba(110,117,130,.2);border-radius:3px;transition:.3s opacity}.form-imagecheck-input:checked~.form-imagecheck-figure:before{background-color:#206bc4;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6' transform='scale%28.8%29' transform-origin='50% 50%'/%3e%3c/svg%3e");background-repeat:repeat;background-position:center center;background-size:1rem;border-color:rgba(110,117,130,.2)}.form-imagecheck-image{max-width:100%;display:block;opacity:.64;transition:.3s opacity}.form-imagecheck-image:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.form-imagecheck-image:last-child{border-bottom-right-radius:2px;border-bottom-left-radius:2px}.form-imagecheck-input:checked~.form-imagecheck-figure .form-imagecheck-image,.form-imagecheck-input:focus~.form-imagecheck-figure .form-imagecheck-image,.form-imagecheck:hover .form-imagecheck-image{opacity:1}.form-imagecheck-caption{padding:.25rem;font-size:.765625rem;color:#6e7582;text-align:center;transition:.3s color}.form-imagecheck-input:checked~.form-imagecheck-figure .form-imagecheck-caption,.form-imagecheck-input:focus~.form-imagecheck-figure .form-imagecheck-caption,.form-imagecheck:hover .form-imagecheck-caption{color:#354052}.form-selectgroup{display:inline-flex;margin:0 -.5rem -.5rem 0;flex-wrap:wrap}.form-selectgroup .form-selectgroup-item{margin:0 .5rem .5rem 0}.form-selectgroup-vertical{flex-direction:column}.form-selectgroup-item{display:block;position:relative}.form-selectgroup-input{position:absolute;top:0;left:0;z-index:-1;opacity:0}.form-selectgroup-label{position:relative;display:block;min-width:calc(1.4666667em + .75rem + 2px);margin:0;padding:.375rem .75rem;font-size:.875rem;line-height:1.4666667;color:#6e7582;background:#fff;text-align:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid rgba(110,117,130,.2);border-radius:3px;transition:border-color .3s,background .3s,color .3s}.form-selectgroup-label .icon:only-child{margin:0 -.25rem}.form-selectgroup-label:hover{color:#354052}.form-selectgroup-check{display:inline-block;width:1rem;height:1rem;border:1px solid rgba(110,117,130,.2);vertical-align:middle}.form-selectgroup-input[type=checkbox]+.form-selectgroup-label .form-selectgroup-check{border-radius:3px}.form-selectgroup-input[type=radio]+.form-selectgroup-label .form-selectgroup-check{border-radius:50%}.form-selectgroup-input:checked+.form-selectgroup-label .form-selectgroup-check{background-color:#206bc4;background-repeat:repeat;background-position:center center;background-size:1rem;border-color:rgba(110,117,130,.2)}.form-selectgroup-input[type=checkbox]:checked+.form-selectgroup-label .form-selectgroup-check{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6' transform='scale%28.8%29' transform-origin='50% 50%'/%3e%3c/svg%3e")}.form-selectgroup-input[type=radio]:checked+.form-selectgroup-label .form-selectgroup-check{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle r='3' fill='%23ffffff' cx='8' cy='8' /%3e%3c/svg%3e")}.form-selectgroup-input:checked+.form-selectgroup-label{z-index:1;color:#206bc4;background:rgba(32,107,196,.04);border-color:#7aade9;box-shadow:0 1px 1px 0 rgba(32,107,196,.2)}.form-selectgroup-input:focus+.form-selectgroup-label{z-index:2;color:#206bc4;border-color:#7aade9;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.form-selectgroup-label-content{line-height:1.3333334}.form-selectgroup-boxes .form-selectgroup-label{text-align:left;padding:1.25rem 1.25rem;color:inherit}.form-selectgroup-boxes .form-selectgroup-input:checked+.form-selectgroup-label{color:inherit}.form-selectgroup-boxes .form-selectgroup-input:checked+.form-selectgroup-label .form-selectgroup-title{color:#206bc4}.form-selectgroup-boxes .form-selectgroup-input:checked+.form-selectgroup-label .form-selectgroup-label-content{opacity:1}.form-selectgroup-pills{flex-wrap:wrap;align-items:flex-start}.form-selectgroup-pills .form-selectgroup-item{flex-grow:0}.form-selectgroup-pills .form-selectgroup-label{border-radius:50px}.form-control-color::-webkit-color-swatch{border:none}[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.form-control.is-invalid-lite,.form-control.is-valid-lite{border-color:rgba(110,117,130,.2)}.legend{display:inline-block;background:#e9ecf1;width:.75em;height:.75em;border-radius:3px}.list-item{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word}.list-item-actions{margin-left:auto}.list-bordered .list-item,.list-row .list-item{border-top:1px solid rgba(110,117,130,.2);margin-top:-1px}.list-bordered .list-item:first-child,.list-row .list-item:first-child{border-top:none}.list-hoverable .list-item-actions{opacity:0;transition:.3s opacity}.list-hoverable .list-item-actions.show,.list-hoverable .list-item:hover .list-item-actions{opacity:1}.list-row .list-item{flex-direction:row;align-items:center;padding:.5rem .625rem}.list-row .list-item>*{padding-left:.625rem;padding-right:.625rem}.list-timeline{position:relative;padding:0;margin:0;list-style:none}.list-timeline>li{position:relative;margin-bottom:1.5rem}.list-timeline>li:last-child{margin-bottom:0}.list-timeline-time{float:right;margin-left:1rem;color:#6e7582}.list-timeline-icon{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;color:#fff;text-align:center;background:#6e7582;border-radius:50%}.list-timeline-icon .icon{width:1rem;height:1rem}.list-timeline-title{margin:0;font-weight:500}.list-timeline-content{margin-left:3.5rem}@media screen and (min-width:768px){.list-timeline:not(.list-timeline-simple):before{position:absolute;top:0;bottom:0;left:calc(7.5rem + 2px);z-index:1;display:block;width:4px;content:"";background-color:#f5f7fb}.list-timeline:not(.list-timeline-simple)>li{z-index:2;min-height:40px}.list-timeline:not(.list-timeline-simple) .list-timeline-time{position:absolute;top:.5rem;left:0;width:5.5rem;margin:0;text-align:right}.list-timeline:not(.list-timeline-simple) .list-timeline-icon{top:0;left:6.5rem}.list-timeline:not(.list-timeline-simple) .list-timeline-content{padding:.625rem 0 0 10rem;margin:0}}.list-group-transparent{margin:0 -.75rem}.list-group-transparent .list-group-item{background:0 0;border:0;border-radius:3px}.list-group-transparent .list-group-item .icon{color:#6e7582}.list-group-transparent .list-group-item.active{font-weight:500;color:inherit;background:rgba(32,107,196,.06)}.list-group-transparent .list-group-item.active .icon{color:inherit}.list-separated-item{padding:1rem 0}.list-separated-item:first-child{padding-top:0}.list-separated-item:last-child{padding-bottom:0}.list-separated-item+.list-separated-item{border-top:1px solid rgba(110,117,130,.2)}.list-inline-dots .list-inline-item+.list-inline-item:before{content:'· ';margin-right:.5rem}@-webkit-keyframes loader{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes loader{from{transform:rotate(0)}to{transform:rotate(360deg)}}.loader{position:relative;display:block;width:2.5rem;height:2.5rem;color:#206bc4;vertical-align:middle}.loader:after{position:absolute;top:0;left:0;width:100%;height:100%;content:"";border:1px solid;border-color:transparent;border-top-color:currentColor;border-left-color:currentColor;border-radius:50%;-webkit-animation:loader .6s linear;animation:loader .6s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.dimmer{position:relative}.dimmer .loader{position:absolute;top:50%;right:0;left:0;display:none;margin:0 auto;transform:translateY(-50%)}.dimmer.active .loader{display:block}.dimmer.active .dimmer-content{pointer-events:none;opacity:.1}.modal-content .close{position:absolute;top:0;right:0;font-size:1rem;width:3.5rem;height:3.5rem;margin:0;padding:0;z-index:10}.modal-body::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.modal-body::-webkit-scrollbar-thumb{border-radius:5px;background:#dee1e7}.modal-body::-webkit-scrollbar-corner{background:0 0}.modal-body:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#cbcfd6}.modal-body .modal-title{margin-bottom:1rem}.modal-body+.modal-body{border-top:1px solid rgba(110,117,130,.1)}.modal-header{align-items:center;min-height:3.5rem;background:#fff;padding:0 3.5rem 0 1.5rem}.modal-title{font-size:1.125rem;font-weight:500;line-height:1.3333333}.modal-footer{padding-top:0;padding-bottom:.75rem}.modal-blur{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-full-width{max-width:none;margin:0 .5rem}.nav-tabs .icon{color:#6e7582}.nav-tabs .nav-link{padding:.75rem 1.25rem;line-height:20px;color:#6e7582;cursor:pointer;background:0 0;border:none;border-bottom:1px solid transparent;transition:.3s color,.3s border-color}.nav-tabs .nav-link:hover{color:#354052;border-color:transparent}.nav-tabs .nav-link.disabled{color:rgba(110,117,130,.2)}.nav-tabs .nav-link.active{color:#354052;background:inherit;border-color:transparent;border-bottom-color:#206bc4}.nav-tabs-alt .nav-link{font-size:13px;font-weight:500;text-transform:uppercase}.nav-icon{line-height:1;margin-right:.25rem}.nav-icon .icon{display:block;stroke-width:1.5}.nav-link{border-radius:3px;display:flex;transition:.3s color;align-items:center}.nav-link .icon{display:inline-block;font-size:1rem}.nav-link-icon{width:1.25rem;height:1rem;font-size:1rem}.nav-link-icon .icon{display:block}.stars{display:inline-flex;color:#dee1e7;font-size:.75rem}.stars .star:not(:first-child){margin-left:.25rem}.pagination{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.page-link{min-width:1.5rem;border-radius:3px}.page-link:hover{background:0 0}.page-item{text-align:center}.page-item.page-next,.page-item.page-prev{flex:0 0 50%;text-align:left}.page-item.page-next{margin-left:auto;text-align:right}.page-item-subtitle{margin-bottom:2px;font-size:12px;color:#6e7582;text-transform:uppercase}.page-item.disabled .page-item-subtitle{color:rgba(110,117,130,.5)}.page-item-title{font-size:1.125rem;font-weight:400;color:#354052}.page-link:hover .page-item-title{color:#206bc4}.page-item.disabled .page-item-title{color:rgba(110,117,130,.5)}@-webkit-keyframes progress-indeterminate{0%{right:100%;left:-35%}100%,60%{right:-90%;left:100%}}@keyframes progress-indeterminate{0%{right:100%;left:-35%}100%,60%{right:-90%;left:100%}}.progress{position:relative;width:100%;line-height:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress::-webkit-progress-bar{background:#f5f7fb}.progress::-webkit-progress-value{background-color:#206bc4}.progress::-moz-progress-bar{background-color:#206bc4}.progress::-ms-fill{background-color:#206bc4;border:none}.progress-sm{height:.25rem}.progress-bar{height:100%}.progress-bar-indeterminate:after,.progress-bar-indeterminate:before{position:absolute;top:0;bottom:0;left:0;content:"";background-color:inherit;will-change:left,right}.progress-bar-indeterminate:before{-webkit-animation:progress-indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite;animation:progress-indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite}.ribbon{position:absolute;top:.75rem;right:-.25rem;z-index:1;padding:.25rem .75rem;font-size:.625rem;font-weight:500;line-height:1.5rem;color:#fff;text-align:center;text-transform:uppercase;background:#206bc4;border-color:#206bc4}.ribbon:before{position:absolute;right:0;bottom:100%;width:0;height:0;content:"";-webkit-filter:brightness(70%);filter:brightness(70%);border:.125rem solid;border-color:inherit;border-top-color:transparent;border-right-color:transparent}.ribbon.bg-blue{border-color:#206bc4}.ribbon.bg-blue-lt{border-color:#d2e1f3!important}.ribbon.bg-azure{border-color:#45aaf2}.ribbon.bg-azure-lt{border-color:#daeefc!important}.ribbon.bg-indigo{border-color:#6574cd}.ribbon.bg-indigo-lt{border-color:#e0e3f5!important}.ribbon.bg-purple{border-color:#a55eea}.ribbon.bg-purple-lt{border-color:#eddffb!important}.ribbon.bg-pink{border-color:#f66d9b}.ribbon.bg-pink-lt{border-color:#fde2eb!important}.ribbon.bg-red{border-color:#cd201f}.ribbon.bg-red-lt{border-color:#f5d2d2!important}.ribbon.bg-orange{border-color:#ff922b}.ribbon.bg-orange-lt{border-color:#ffe9d5!important}.ribbon.bg-yellow{border-color:#fab005}.ribbon.bg-yellow-lt{border-color:#feefcd!important}.ribbon.bg-lime{border-color:#94d82d}.ribbon.bg-lime-lt{border-color:#eaf7d5!important}.ribbon.bg-green{border-color:#5eba00}.ribbon.bg-green-lt{border-color:#dff1cc!important}.ribbon.bg-teal{border-color:#2bcbba}.ribbon.bg-teal-lt{border-color:#d5f5f1!important}.ribbon.bg-cyan{border-color:#17a2b8}.ribbon.bg-cyan-lt{border-color:#d1ecf1!important}.ribbon.bg-white{border-color:#fff}.ribbon.bg-white-lt{border-color:#fff!important}.ribbon.bg-gray{border-color:#a8aeb7}.ribbon.bg-gray-lt{border-color:#eeeff1!important}.ribbon.bg-gray-dark{border-color:#545d6d}.ribbon.bg-gray-dark-lt{border-color:#dddfe2!important}.ribbon.bg-dark{border-color:#354052}.ribbon.bg-dark-lt{border-color:#d7d9dc!important}.ribbon .icon{width:1rem;height:1rem}.ribbon-top{top:-.25rem;right:.75rem;width:2rem;padding:.25rem 0}.ribbon-top:before{top:0;right:100%;bottom:auto;border-color:inherit;border-top-color:transparent;border-left-color:transparent}.ribbon-top.ribbon-left{right:auto;left:.75rem}.ribbon-top.ribbon-left:before{top:0;right:100%;left:auto}.ribbon-left{right:auto;left:-.25rem}.ribbon-left:before{top:auto;bottom:100%;left:0;border-color:inherit;border-top-color:transparent;border-left-color:transparent}.ribbon-bottom{top:auto;bottom:.75rem}.ribbon-bookmark{padding-left:.25rem}.ribbon-bookmark:after{position:absolute;top:0;right:100%;display:block;width:0;height:0;content:"";border:1rem solid;border-color:inherit;border-right-width:0;border-left-color:transparent;border-left-width:.5rem}.ribbon-bookmark.ribbon-left{padding-right:.5rem;padding-left:.5rem}.ribbon-bookmark.ribbon-left:after{right:auto;left:100%;border-right-color:transparent;border-right-width:.5rem;border-left-width:0}.ribbon-bookmark.ribbon-top{padding-right:0;padding-bottom:.25rem;padding-left:0}.ribbon-bookmark.ribbon-top:after{top:100%;right:0;left:0;border-color:inherit;border-width:1rem;border-top-width:0;border-bottom-color:transparent;border-bottom-width:.5rem}.stamp{display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;height:2.5rem;line-height:2.5rem;padding:0 .25rem;font-size:.875rem;font-weight:500;color:#6e7582;text-align:center;background:#f1f3f8;border-radius:3px}.stamp .icon{font-size:1.25rem;vertical-align:middle}.steps{display:flex;flex-wrap:nowrap;width:100%;padding:0;margin:2rem 0;list-style:none}.steps .step-item{padding-top:calc(.5rem + 4px)}.steps .step-item:after{top:calc(.25rem + 2px);height:2px}.steps .step-item:before{width:.5rem;height:.5rem}.steps .step-item:after,.steps .step-item:before{color:#fff;background:#206bc4}.steps .step-item.active:before{color:inherit;border-color:#206bc4}.steps-blue .step-item:after,.steps-blue .step-item:before{color:#fff;background:#206bc4}.steps-blue .step-item.active:before{color:inherit;border-color:#206bc4}.steps-azure .step-item:after,.steps-azure .step-item:before{color:#fff;background:#45aaf2}.steps-azure .step-item.active:before{color:inherit;border-color:#45aaf2}.steps-indigo .step-item:after,.steps-indigo .step-item:before{color:#fff;background:#6574cd}.steps-indigo .step-item.active:before{color:inherit;border-color:#6574cd}.steps-purple .step-item:after,.steps-purple .step-item:before{color:#fff;background:#a55eea}.steps-purple .step-item.active:before{color:inherit;border-color:#a55eea}.steps-pink .step-item:after,.steps-pink .step-item:before{color:#fff;background:#f66d9b}.steps-pink .step-item.active:before{color:inherit;border-color:#f66d9b}.steps-red .step-item:after,.steps-red .step-item:before{color:#fff;background:#cd201f}.steps-red .step-item.active:before{color:inherit;border-color:#cd201f}.steps-orange .step-item:after,.steps-orange .step-item:before{color:#fff;background:#ff922b}.steps-orange .step-item.active:before{color:inherit;border-color:#ff922b}.steps-yellow .step-item:after,.steps-yellow .step-item:before{color:#fff;background:#fab005}.steps-yellow .step-item.active:before{color:inherit;border-color:#fab005}.steps-lime .step-item:after,.steps-lime .step-item:before{color:#fff;background:#94d82d}.steps-lime .step-item.active:before{color:inherit;border-color:#94d82d}.steps-green .step-item:after,.steps-green .step-item:before{color:#fff;background:#5eba00}.steps-green .step-item.active:before{color:inherit;border-color:#5eba00}.steps-teal .step-item:after,.steps-teal .step-item:before{color:#fff;background:#2bcbba}.steps-teal .step-item.active:before{color:inherit;border-color:#2bcbba}.steps-cyan .step-item:after,.steps-cyan .step-item:before{color:#fff;background:#17a2b8}.steps-cyan .step-item.active:before{color:inherit;border-color:#17a2b8}.steps-white .step-item:after,.steps-white .step-item:before{color:#fff;background:#fff}.steps-white .step-item.active:before{color:inherit;border-color:#fff}.steps-gray .step-item:after,.steps-gray .step-item:before{color:#fff;background:#a8aeb7}.steps-gray .step-item.active:before{color:inherit;border-color:#a8aeb7}.steps-gray-dark .step-item:after,.steps-gray-dark .step-item:before{color:#fff;background:#545d6d}.steps-gray-dark .step-item.active:before{color:inherit;border-color:#545d6d}.steps-dark .step-item:after,.steps-dark .step-item:before{color:#fff;background:#354052}.steps-dark .step-item.active:before{color:inherit;border-color:#354052}.step-item{position:relative;flex:1 1 0;min-height:1rem;margin-top:0;color:inherit;text-align:center;cursor:default}a.step-item{cursor:pointer}a.step-item:hover{color:inherit}.step-item:not(:first-child):after{position:absolute;left:-50%;width:100%;content:"";transform:translateY(-50%)}.step-item:before{position:absolute;top:0;left:50%;z-index:1;box-sizing:content-box;display:block;content:"";border:2px solid #fff;border-radius:50%;transform:translateX(-50%)}.step-item.active{font-weight:500}.step-item.active:before{background:#fff}.step-item.active~.step-item{color:#6e7582}.step-item.active~.step-item:after,.step-item.active~.step-item:before{background:#f3f5f5}.step-item.active~.step-item:before{color:#6e7582!important}.steps-counter{counter-reset:steps}.steps-counter .step-item{padding-top:calc(1.5rem + 4px)}.steps-counter .step-item:after{top:calc(.75rem + 2px);height:2px}.steps-counter .step-item:before{width:1.5rem;height:1.5rem}.steps-counter .step-item{counter-increment:steps}.steps-counter .step-item:before{font-size:1rem;line-height:1.5rem;content:counter(steps)}.steps-counter .step-item.active~.step-item:before{background:#fff}.markdown>table,.table{color:inherit}.markdown>table thead th,.table thead th{background:rgba(53,64,82,.024);border-width:1px;font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:#6e7582;padding-top:.5rem;padding-bottom:.5rem}@media print{.markdown>table thead th,.table thead th{background:0 0}}.markdown>table th,.table th{color:#6e7582}.table-nowrap td,.table-nowrap th{white-space:nowrap}.table-md td,.table-md th{padding:.5rem}.table-vcenter td,.table-vcenter th{vertical-align:middle}.table-center td,.table-center th{text-align:center}.td-truncate{max-width:1px;width:100%}@media (max-width:32.98rem){.table-mobile{display:block}.table-mobile thead{display:none}.table-mobile tbody,.table-mobile tr{display:flex;flex-direction:column}.table-mobile td{display:block;padding:.5rem!important;border:none;color:#354052!important}.table-mobile td[data-label]:before{font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:#6e7582;content:attr(data-label);display:block}.table-mobile tr{border-bottom:1px solid rgba(110,117,130,.2)}.table-mobile .btn{display:block}}@media (max-width:47.98rem){.table-mobile-sm{display:block}.table-mobile-sm thead{display:none}.table-mobile-sm tbody,.table-mobile-sm tr{display:flex;flex-direction:column}.table-mobile-sm td{display:block;padding:.5rem!important;border:none;color:#354052!important}.table-mobile-sm td[data-label]:before{font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:#6e7582;content:attr(data-label);display:block}.table-mobile-sm tr{border-bottom:1px solid rgba(110,117,130,.2)}.table-mobile-sm .btn{display:block}}@media (max-width:63.98rem){.table-mobile-md{display:block}.table-mobile-md thead{display:none}.table-mobile-md tbody,.table-mobile-md tr{display:flex;flex-direction:column}.table-mobile-md td{display:block;padding:.5rem!important;border:none;color:#354052!important}.table-mobile-md td[data-label]:before{font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:#6e7582;content:attr(data-label);display:block}.table-mobile-md tr{border-bottom:1px solid rgba(110,117,130,.2)}.table-mobile-md .btn{display:block}}@media (max-width:75.23rem){.table-mobile-lg{display:block}.table-mobile-lg thead{display:none}.table-mobile-lg tbody,.table-mobile-lg tr{display:flex;flex-direction:column}.table-mobile-lg td{display:block;padding:.5rem!important;border:none;color:#354052!important}.table-mobile-lg td[data-label]:before{font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:#6e7582;content:attr(data-label);display:block}.table-mobile-lg tr{border-bottom:1px solid rgba(110,117,130,.2)}.table-mobile-lg .btn{display:block}}.table-mobile-xl{display:block}.table-mobile-xl thead{display:none}.table-mobile-xl tbody,.table-mobile-xl tr{display:flex;flex-direction:column}.table-mobile-xl td{display:block;padding:.5rem!important;border:none;color:#354052!important}.table-mobile-xl td[data-label]:before{font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:#6e7582;content:attr(data-label);display:block}.table-mobile-xl tr{border-bottom:1px solid rgba(110,117,130,.2)}.table-mobile-xl .btn{display:block}.toast-header{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.toast button[data-dismiss=toast]{outline:0}.toolbar{display:flex;flex-wrap:nowrap;flex-shrink:0;margin:0 -.5rem}.toolbar>*{margin:0 .5rem}.hr-text{display:flex;align-items:center;margin:2rem 0;font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:#6e7582;height:1px}.hr-text:after,.hr-text:before{flex:1 1 auto;height:1px;background-color:currentColor;opacity:.1}.hr-text:before{content:"";margin-right:.5rem}.hr-text:after{content:"";margin-left:.5rem}.hr-text>:first-child{padding-right:.5rem;padding-left:0;color:#6e7582}.hr-text.hr-text-left:before{content:none}.hr-text.hr-text-left>:first-child{padding-right:.5rem;padding-left:.5rem}.hr-text.hr-text-right:before{content:""}.hr-text.hr-text-right:after{content:none}.hr-text.hr-text-right>:first-child{padding-right:0;padding-left:.5rem}.card>.hr-text{margin:0}.hr-text-spaceless{margin:-.5rem 0}.lead{line-height:1.4}a{-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}.h1 a,.h2 a,.h3 a,.h4 a,.h5 a,.h6 a,h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:inherit}.strong,b,strong{font-weight:500}blockquote{padding-left:1rem;color:#6e7582;border-left:2px solid rgba(110,117,130,.2)}blockquote p{margin-bottom:1rem}blockquote cite{display:block;text-align:right}blockquote cite:before{content:"— "}.hr,hr{margin:2rem 0}dl dd:last-child{margin-bottom:0}code{padding:2px 4px;background:rgba(32,107,196,.03);border:1px solid rgba(32,107,196,.064);border-radius:3px}pre{padding:1rem;overflow:auto;font-size:.625rem;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;line-height:1.7142857;-moz-tab-size:3;-o-tab-size:3;tab-size:3;border-radius:3px;white-space:pre-wrap}pre code{padding:0;background:0 0;border:none;border-radius:0}img{max-width:100%}::-moz-selection{color:#fff;background-color:#307fdd}::selection{color:#fff;background-color:#307fdd}[class*=" link-"].disabled,[class^=link-].disabled{color:#a8aeb7;pointer-events:none}.subheader{font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:#6e7582}.markdown>:first-child{margin-top:0}.markdown>:last-child,.markdown>:last-child .highlight{margin-bottom:0}.markdown>.h1,.markdown>.h2,.markdown>.h3,.markdown>.h4,.markdown>.h5,.markdown>.h6,.markdown>h1,.markdown>h2,.markdown>h3,.markdown>h4,.markdown>h5,.markdown>h6{margin-top:2rem}.markdown>.h2,.markdown>h2{margin-bottom:1rem}.markdown>.h2:before,.markdown>h2:before{content:'';padding-top:1em;margin-top:-1em;display:block}@media (min-width:48rem){.markdown>.hr,.markdown>hr{margin-top:3em;margin-bottom:3em}}.chart{display:block;min-height:10rem}.chart text{font-family:inherit}.chart-sm{height:2.5rem}.chart-lg{height:15rem}.chart-square{height:5.75rem}.chart-sparkline{position:relative;width:4rem;height:2.5rem;line-height:1}.chart-sparkline-square{width:2.5rem}.chart-sparkline-wide{width:6rem}.chart-sparkline-label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:.625rem}.chart-sparkline-label .icon{width:1rem;height:1rem}.bg-white-overlay{color:#fff;background-color:rgba(245,247,251,.24)}.bg-dark-overlay{color:#fff;background-color:rgba(53,64,82,.24)}.bg-cover{background-repeat:no-repeat;background-size:cover;background-position:center}.bg-facebook{color:#fff!important;background:#3b5998!important}.text-facebook{color:#3b5998!important}.bg-twitter{color:#fff!important;background:#1da1f2!important}.text-twitter{color:#1da1f2!important}.bg-google{color:#fff!important;background:#dc4e41!important}.text-google{color:#dc4e41!important}.bg-youtube{color:#fff!important;background:red!important}.text-youtube{color:red!important}.bg-vimeo{color:#fff!important;background:#1ab7ea!important}.text-vimeo{color:#1ab7ea!important}.bg-dribbble{color:#fff!important;background:#ea4c89!important}.text-dribbble{color:#ea4c89!important}.bg-github{color:#fff!important;background:#181717!important}.text-github{color:#181717!important}.bg-instagram{color:#fff!important;background:#e4405f!important}.text-instagram{color:#e4405f!important}.bg-pinterest{color:#fff!important;background:#bd081c!important}.text-pinterest{color:#bd081c!important}.bg-vk{color:#fff!important;background:#6383a8!important}.text-vk{color:#6383a8!important}.bg-rss{color:#fff!important;background:orange!important}.text-rss{color:orange!important}.bg-flickr{color:#fff!important;background:#0063dc!important}.text-flickr{color:#0063dc!important}.bg-bitbucket{color:#fff!important;background:#0052cc!important}.text-bitbucket{color:#0052cc!important}.bg-tabler{color:#fff!important;background:#206bc4!important}.text-tabler{color:#206bc4!important}.bg-blue{background:#206bc4}.text-blue{color:#206bc4!important}.bg-blue-lt{color:#206bc4!important;background:#d2e1f3!important}.bg-azure{background:#45aaf2}.text-azure{color:#45aaf2!important}.bg-azure-lt{color:#45aaf2!important;background:#daeefc!important}.bg-indigo{background:#6574cd}.text-indigo{color:#6574cd!important}.bg-indigo-lt{color:#6574cd!important;background:#e0e3f5!important}.bg-purple{background:#a55eea}.text-purple{color:#a55eea!important}.bg-purple-lt{color:#a55eea!important;background:#eddffb!important}.bg-pink{background:#f66d9b}.text-pink{color:#f66d9b!important}.bg-pink-lt{color:#f66d9b!important;background:#fde2eb!important}.bg-red{background:#cd201f}.text-red{color:#cd201f!important}.bg-red-lt{color:#cd201f!important;background:#f5d2d2!important}.bg-orange{background:#ff922b}.text-orange{color:#ff922b!important}.bg-orange-lt{color:#ff922b!important;background:#ffe9d5!important}.bg-yellow{background:#fab005}.text-yellow{color:#fab005!important}.bg-yellow-lt{color:#fab005!important;background:#feefcd!important}.bg-lime{background:#94d82d}.text-lime{color:#94d82d!important}.bg-lime-lt{color:#94d82d!important;background:#eaf7d5!important}.bg-green{background:#5eba00}.text-green{color:#5eba00!important}.bg-green-lt{color:#5eba00!important;background:#dff1cc!important}.bg-teal{background:#2bcbba}.text-teal{color:#2bcbba!important}.bg-teal-lt{color:#2bcbba!important;background:#d5f5f1!important}.bg-cyan{background:#17a2b8}.text-cyan{color:#17a2b8!important}.bg-cyan-lt{color:#17a2b8!important;background:#d1ecf1!important}.bg-white{background:#fff}.text-white{color:#fff!important}.bg-white-lt{color:#fff!important;background:#fff!important}.bg-gray{background:#a8aeb7}.text-gray{color:#a8aeb7!important}.bg-gray-lt{color:#a8aeb7!important;background:#eeeff1!important}.bg-gray-dark{background:#545d6d}.text-gray-dark{color:#545d6d!important}.bg-gray-dark-lt{color:#545d6d!important;background:#dddfe2!important}.bg-dark{background:#354052}.text-dark{color:#354052!important}.bg-dark-lt{color:#354052!important;background:#d7d9dc!important}.scrollable{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.scrollable.hover{overflow-y:hidden}.scrollable.hover>*{margin-top:-1px}.scrollable.hover:active,.scrollable.hover:focus,.scrollable.hover:hover{overflow:visible;overflow-y:auto}.touch .scrollable{overflow-y:auto!important}.scroll-x,.scroll-y{overflow:hidden;-webkit-overflow-scrolling:touch}.scroll-y{overflow-y:auto}.scroll-x{overflow-x:auto}.no-scroll{overflow:hidden}.w-0{width:0!important}.h-0{height:0!important}.w-1{width:.25rem!important}.h-1{height:.25rem!important}.w-2{width:.5rem!important}.h-2{height:.5rem!important}.w-3{width:1rem!important}.h-3{height:1rem!important}.w-4{width:1.5rem!important}.h-4{height:1.5rem!important}.w-5{width:3rem!important}.h-5{height:3rem!important}.w-6{width:4.5rem!important}.h-6{height:4.5rem!important}.w-auto{width:auto!important}.h-auto{height:auto!important}.w-px{width:1px!important}.h-px{height:1px!important}.w-full{width:100%!important}.h-full{height:100%!important}.opacity-0{opacity:0!important}.opacity-5{opacity:.05!important}.opacity-10{opacity:.1!important}.opacity-15{opacity:.15!important}.opacity-20{opacity:.2!important}.opacity-25{opacity:.25!important}.opacity-30{opacity:.3!important}.opacity-35{opacity:.35!important}.opacity-40{opacity:.4!important}.opacity-45{opacity:.45!important}.opacity-50{opacity:.5!important}.opacity-55{opacity:.55!important}.opacity-60{opacity:.6!important}.opacity-65{opacity:.65!important}.opacity-70{opacity:.7!important}.opacity-75{opacity:.75!important}.opacity-80{opacity:.8!important}.opacity-85{opacity:.85!important}.opacity-90{opacity:.9!important}.opacity-95{opacity:.95!important}.opacity-100{opacity:1!important}.hover-shadow-sm:hover{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}.hover-shadow:hover{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}.hover-shadow-lg:hover{box-shadow:0 1rem 3rem rgba(0,0,0,.175)!important}.hover-shadow-none:hover{box-shadow:none!important}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.subpixel-antialiased{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}@media not print{.theme-dark{color:#f5f7fb;background-color:#2f3949}.theme-dark .card,.theme-dark .dropdown-menu,.theme-dark .flatpickr-calendar,.theme-dark .footer,.theme-dark .modal-content,.theme-dark .modal-header{background-color:#354052;color:inherit}.theme-dark .card{border-color:transparent}.theme-dark .btn-secondary,.theme-dark .form-file-button{color:#f5f7fb;background-color:#3b475b;border-color:rgba(110,117,130,.2);background-image:none}.theme-dark .btn-secondary:hover,.theme-dark .form-file-button:hover{color:#f5f7fb;background-color:rgba(53,64,82,0);border-color:rgba(110,117,130,.2)}.theme-dark .btn-secondary.focus,.theme-dark .btn-secondary:focus,.theme-dark .form-file-button.focus,.theme-dark .form-file-button:focus{color:#f5f7fb;background-color:rgba(53,64,82,0);border-color:rgba(110,117,130,.2);box-shadow:0 0 0 .2rem rgba(193,197,204,.5)}.show>.theme-dark .btn-secondary.dropdown-toggle,.show>.theme-dark .form-file-button.dropdown-toggle,.theme-dark .btn-secondary.active,.theme-dark .btn-secondary:active,.theme-dark .form-file-button.active,.theme-dark .form-file-button:active{color:#fff;background-color:#272f3c;border-color:rgba(81,86,95,.2)}.show>.theme-dark .btn-secondary.dropdown-toggle:focus,.show>.theme-dark .form-file-button.dropdown-toggle:focus,.theme-dark .btn-secondary.active:focus,.theme-dark .btn-secondary:active:focus,.theme-dark .form-file-button.active:focus,.theme-dark .form-file-button:active:focus{box-shadow:0 0 0 .2rem rgba(193,197,204,.5)}.theme-dark .btn-secondary.disabled,.theme-dark .btn-secondary:disabled,.theme-dark .form-file-button.disabled,.theme-dark .form-file-button:disabled{color:#f5f7fb;background-color:#3b475b;border-color:rgba(110,117,130,.2)}.theme-dark .flatpickr-input.flatpickr-input,.theme-dark .form-check-input:not(:checked),.theme-dark .form-control,.theme-dark .form-file-text,.theme-dark .form-imagecheck-figure:before,.theme-dark .form-select,.theme-dark .form-selectgroup-check,.theme-dark .form-selectgroup-label{background-color:#2f3949;color:#f5f7fb}.theme-dark .form-control-plaintext{color:#f5f7fb}.theme-dark .input-group-flat .input-group-text{background-color:#2f3949}.theme-dark .highlight{background-color:#2f3949}.theme-dark .avatar{background-color:#3b475b}.theme-dark .avatar-list-stacked .avatar{box-shadow:0 0 0 2px #354052}.theme-dark .close,.theme-dark .markdown,.theme-dark .markdown>*{color:inherit}.theme-dark .apexcharts-text{fill:#f5f7fb}.theme-dark .apexcharts-legend-text{color:inherit!important}.theme-dark .navbar-brand-autodark{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}}@media not print and (prefers-color-scheme:dark){.theme-dark-auto{color:#f5f7fb;background-color:#2f3949}.theme-dark-auto .card,.theme-dark-auto .dropdown-menu,.theme-dark-auto .flatpickr-calendar,.theme-dark-auto .footer,.theme-dark-auto .modal-content,.theme-dark-auto .modal-header{background-color:#354052;color:inherit}.theme-dark-auto .card{border-color:transparent}.theme-dark-auto .btn-secondary,.theme-dark-auto .form-file-button{color:#f5f7fb;background-color:#3b475b;border-color:rgba(110,117,130,.2);background-image:none}.theme-dark-auto .btn-secondary:hover,.theme-dark-auto .form-file-button:hover{color:#f5f7fb;background-color:rgba(53,64,82,0);border-color:rgba(110,117,130,.2)}.theme-dark-auto .btn-secondary.focus,.theme-dark-auto .btn-secondary:focus,.theme-dark-auto .form-file-button.focus,.theme-dark-auto .form-file-button:focus{color:#f5f7fb;background-color:rgba(53,64,82,0);border-color:rgba(110,117,130,.2);box-shadow:0 0 0 .2rem rgba(193,197,204,.5)}.show>.theme-dark-auto .btn-secondary.dropdown-toggle,.show>.theme-dark-auto .form-file-button.dropdown-toggle,.theme-dark-auto .btn-secondary.active,.theme-dark-auto .btn-secondary:active,.theme-dark-auto .form-file-button.active,.theme-dark-auto .form-file-button:active{color:#fff;background-color:#272f3c;border-color:rgba(81,86,95,.2)}.show>.theme-dark-auto .btn-secondary.dropdown-toggle:focus,.show>.theme-dark-auto .form-file-button.dropdown-toggle:focus,.theme-dark-auto .btn-secondary.active:focus,.theme-dark-auto .btn-secondary:active:focus,.theme-dark-auto .form-file-button.active:focus,.theme-dark-auto .form-file-button:active:focus{box-shadow:0 0 0 .2rem rgba(193,197,204,.5)}.theme-dark-auto .btn-secondary.disabled,.theme-dark-auto .btn-secondary:disabled,.theme-dark-auto .form-file-button.disabled,.theme-dark-auto .form-file-button:disabled{color:#f5f7fb;background-color:#3b475b;border-color:rgba(110,117,130,.2)}.theme-dark-auto .flatpickr-input.flatpickr-input,.theme-dark-auto .form-check-input:not(:checked),.theme-dark-auto .form-control,.theme-dark-auto .form-file-text,.theme-dark-auto .form-imagecheck-figure:before,.theme-dark-auto .form-select,.theme-dark-auto .form-selectgroup-check,.theme-dark-auto .form-selectgroup-label{background-color:#2f3949;color:#f5f7fb}.theme-dark-auto .form-control-plaintext{color:#f5f7fb}.theme-dark-auto .input-group-flat .input-group-text{background-color:#2f3949}.theme-dark-auto .highlight{background-color:#2f3949}.theme-dark-auto .avatar{background-color:#3b475b}.theme-dark-auto .avatar-list-stacked .avatar{box-shadow:0 0 0 2px #354052}.theme-dark-auto .close,.theme-dark-auto .markdown,.theme-dark-auto .markdown>*{color:inherit}.theme-dark-auto .apexcharts-text{fill:#f5f7fb}.theme-dark-auto .apexcharts-legend-text{color:inherit!important}.theme-dark-auto .navbar-brand-autodark{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}}.peity{stroke-linejoin:round;stroke-linecap:round}.selectize-control{padding:0;border:0;height:auto}.selectize-control.multi .selectize-input.has-items{padding-left:6px}.selectize-control.multi .selectize-input>div{font-size:.75rem;margin:0 6px 2px 0;padding:2px 8px;border-radius:3px;background-color:rgba(145,152,163,.1);color:inherit}.selectize-control .remove{font-size:inherit!important;font-weight:400!important;border-left:0!important;color:#6e7582!important}.selectize-control.is-valid{padding:0}.selectize-control.is-valid .selectize-input{border-color:#5eba00}.selectize-control.is-valid .selectize-input.focus{box-shadow:0 0 0 .2rem rgba(94,186,0,.25)}.selectize-control.is-valid .selectize-dropdown{background:0 0;background-color:inherit;border-color:rgba(110,117,130,.2);padding-right:0}.selectize-control.is-invalid{padding:0}.selectize-control.is-invalid .selectize-input{border-color:#cd201f}.selectize-control.is-invalid .selectize-input.focus{box-shadow:0 0 0 .2rem rgba(205,32,31,.25)}.selectize-control.is-invalid .selectize-dropdown{background:0 0;background-color:inherit;border-color:rgba(110,117,130,.2);padding-right:0}.selectize-input{display:flex!important;border:1px solid rgba(110,117,130,.2);padding:.375rem .75rem;font-size:.875rem;box-shadow:none;line-height:1.4666667;background-color:inherit!important;color:inherit!important;flex-wrap:wrap}.selectize-input.full{background-color:inherit}.selectize-input.dropdown-active{border-radius:3px}.selectize-control.single .selectize-input{background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28110, 117, 130, 0.44%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right .75rem center/16px 12px}.selectize-input.focus{border-color:#7aade9;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.selectize-input:after{content:none!important}.selectize-dropdown{height:auto;background:#fff;padding:.375rem 0;margin-top:1px}.selectize-dropdown .option,.selectize-dropdown .option-header{padding:.25rem .75rem}.selectize-dropdown .active{background:rgba(110,117,130,.06);color:inherit;cursor:pointer}.jqvmap-zoomin,.jqvmap-zoomout{height:auto;width:auto;left:.5rem;border:1px solid rgba(110,117,130,.2);background:#fff;color:#354052}.jqvmap-zoomin{top:.5rem}.jqvmap-zoomout{top:2rem}.jqvmap-label{font-family:inherit;font-size:.625rem;line-height:1;padding:.25rem;background:#354052}.apexcharts-title-text{font-weight:500!important}.apexcharts-tooltip-title{font-weight:500!important;padding-bottom:.25rem!important}.apexcharts-gridline,.apexcharts-xaxis-tick,.apexcharts-ycrosshairs{stroke:rgba(110,117,130,.2)!important}.apexcharts-tooltip{line-height:1;color:#fff;background:#354052!important;border:0!important;border-radius:3px!important}.apexcharts-tooltip-title{margin:0!important;background:0 0!important;border:0!important}.apexcharts-tooltip-series-group{padding:0 8px!important}.apexcharts-tooltip-marker{width:.5rem;height:.5rem}.apexcharts-gridline,.apexcharts-xaxis-tick,.apexcharts-ycrosshairs{stroke:#e9ecf1}.fc-unthemed .fc-content,.fc-unthemed .fc-divider,.fc-unthemed .fc-list-heading td,.fc-unthemed .fc-list-view,.fc-unthemed .fc-popover,.fc-unthemed .fc-row,.fc-unthemed tbody,.fc-unthemed td,.fc-unthemed th,.fc-unthemed thead{border-color:rgba(110,117,130,.2)}.fc-unthemed .fc-toolbar .h2,.fc-unthemed .fc-toolbar h2{font-size:1.375rem;margin:0}.fc-unthemed .fc-button{color:#6e7582;background-color:#fff;border-color:rgba(110,117,130,.2);padding:.375rem 1rem;font-size:.875rem;border-radius:3px;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.fc-unthemed .fc-button:hover{color:#354052;background-color:#ececec;border-color:rgba(87,92,102,.2)}.fc-unthemed .fc-button.focus,.fc-unthemed .fc-button:focus{color:#354052;background-color:#ececec;border-color:rgba(87,92,102,.2);box-shadow:0 0 0 .2rem rgba(110,117,130,.5)}.fc-unthemed .fc-button.active,.fc-unthemed .fc-button:active,.show>.fc-unthemed .fc-button.dropdown-toggle{color:#354052;background-color:#e6e6e6;border-color:rgba(81,86,95,.2)}.fc-unthemed .fc-button.active:focus,.fc-unthemed .fc-button:active:focus,.show>.fc-unthemed .fc-button.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(110,117,130,.5)}.fc-unthemed .fc-button.disabled,.fc-unthemed .fc-button:disabled{color:#6e7582;background-color:#fff;border-color:rgba(110,117,130,.2)}@media (prefers-reduced-motion:reduce){.fc-unthemed .fc-button{transition:none}}.fc-unthemed .fc-widget-header{border:0}.fc-unthemed .fc-day-header{padding-bottom:.25rem;font-weight:500}.fc-unthemed.card-calendar .fc-day-grid-container{border-bottom:0;border-left:0}.fc-unthemed .fc-time{font-weight:500}.fc-unthemed .fc-event{border-color:rgba(0,0,0,.05);color:#206bc4;background-color:#d2e1f3;padding:0 .25rem}.flatpickr-input.flatpickr-input{background:#fff}.flatpickr-input.flatpickr-input.active{border-color:#7aade9;box-shadow:0 0 0 .2rem rgba(32,107,196,.25)}.flatpickr-calendar{background:#fff;border:1px solid rgba(110,117,130,.2);border-radius:3px;padding:.5rem;font-size:inherit;box-shadow:0 .5rem 1rem rgba(0,0,0,.15);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-top:-1px}.flatpickr-calendar:after,.flatpickr-calendar:before{content:none}.flatpickr-calendar .dayContainer,.flatpickr-calendar .flatpickr-days,.flatpickr-calendar .flatpickr-innerContainer,.flatpickr-calendar .flatpickr-rContainer{width:100%}.flatpickr-calendar .dayContainer,.flatpickr-calendar .flatpickr-day{max-width:100%;min-width:0}.flatpickr-calendar.inline{width:100%;box-shadow:none;margin:0}.flatpickr-day{color:inherit;border-radius:3px;display:flex;align-items:center;line-height:1}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.nextMonthDay,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.prevMonthDay{color:inherit;opacity:.2}.flatpickr-day.today{border-color:rgba(110,117,130,.2)}.flatpickr-day.selected{background-color:#206bc4}span.flatpickr-weekday{font-size:.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:#6e7582}.flatpickr-months{margin-bottom:.5rem}.flatpickr-months .flatpickr-month{color:currentColor;fill:currentColor}.flatpickr-months .flatpickr-current-month{font-weight:400}.flatpickr-months .flatpickr-monthDropdown-months{-webkit-appearance:none;-moz-appearance:none;appearance:none;font-weight:inherit}.flatpickr-months .flatpickr-next-month,.flatpickr-months .flatpickr-prev-month{position:static;color:#6e7582}.flatpickr-months .flatpickr-next-month:hover,.flatpickr-months .flatpickr-prev-month:hover{color:#354052}.flatpickr-months .flatpickr-next-month svg,.flatpickr-months .flatpickr-prev-month svg{display:block;fill:currentColor!important}.flatpickr-months .numInputWrapper .cur-year{font-weight:inherit}.flatpickr-months .numInputWrapper .arrowDown,.flatpickr-months .numInputWrapper .arrowUp{display:none}.flatpickr-day.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day.nextMonthDay:focus,.flatpickr-day.nextMonthDay:hover,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.today.inRange,.flatpickr-day:focus,.flatpickr-day:hover{background:rgba(110,117,130,.06);border-color:transparent}.noUi-target{border:0;box-shadow:none;background:0 0;border-radius:0;color:#206bc4}.noUi-horizontal{height:1.25rem;padding:.5rem 0}.noUi-base{background:rgba(176,181,190,.24);border-radius:1rem}.noUi-handle{width:1rem;height:1rem;border:2px solid #fff;box-shadow:0 .1rem .25rem rgba(0,0,0,.1);border-radius:1rem;background:currentColor;outline:0}.noUi-handle:after,.noUi-handle:before{content:none}.noUi-horizontal .noUi-handle{width:1rem;height:1rem;top:-.5rem;right:-.5rem;margin:1px 1px 0 0}.noUi-handle.noUi-active,.noUi-handle:focus{box-shadow:0 0 0 1px #f5f7fb,0 0 0 .2rem rgba(32,107,196,.25)}.noUi-connect{background:currentColor}
 /*# sourceMappingURL=tabler.min.css.map */
\ No newline at end of file
diff --git a/dist/css/tabler.min.css.map b/dist/css/tabler.min.css.map
index 77a8effb5..f8307641c 100644
Binary files a/dist/css/tabler.min.css.map and b/dist/css/tabler.min.css.map differ
diff --git a/dist/js/tabler.min.js b/dist/js/tabler.min.js
index 10003a732..8390ccf20 100644
--- a/dist/js/tabler.min.js
+++ b/dist/js/tabler.min.js
@@ -1,5 +1,5 @@
 /*!
-  * Tabler v1.0.0-alpha.4 (https://tabler.io)
+  * Tabler v1.0.0-alpha.5 (https://tabler.io)
   * Copyright 2018-2020 codecalm
   * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
   */'use strict';var __assign=window&&window.__assign||function(){return(__assign=Object.assign||function(e){for(var t,r=1,o=arguments.length;r<o;r++)for(var s in t=arguments[r])Object.prototype.hasOwnProperty.call(t,s)&&(e[s]=t[s]);return e}).apply(this,arguments)},CountUp=function(){var d=Math.abs;function e(e,t,n){var r=Math.pow,p=this;this.target=e,this.endVal=t,this.options=n,this.version="2.0.4",this.defaults={startVal:0,decimalPlaces:0,duration:2,useEasing:!0,useGrouping:!0,smartEasingThreshold:999,smartEasingAmount:333,separator:",",decimal:".",prefix:"",suffix:""},this.finalEndVal=null,this.useEasing=!0,this.countDown=!1,this.error="",this.startVal=0,this.paused=!0,this.count=function(e){p.startTime||(p.startTime=e);var t=e-p.startTime;p.remaining=p.duration-t,p.frameVal=p.useEasing?p.countDown?p.startVal-p.easingFn(t,0,p.startVal-p.endVal,p.duration):p.easingFn(t,p.startVal,p.endVal-p.startVal,p.duration):p.countDown?p.startVal-(p.startVal-p.endVal)*(t/p.duration):p.startVal+(p.endVal-p.startVal)*(t/p.duration),p.frameVal=p.countDown?p.frameVal<p.endVal?p.endVal:p.frameVal:p.frameVal>p.endVal?p.endVal:p.frameVal,p.frameVal=Math.round(p.frameVal*p.decimalMult)/p.decimalMult,p.printValue(p.frameVal),t<p.duration?p.rAF=requestAnimationFrame(p.count):null===p.finalEndVal?p.callback&&p.callback():p.update(p.finalEndVal)},this.formatNumber=function(s){var t,u,m,c,g,f=0>s?"-":"";if(t=d(s).toFixed(p.options.decimalPlaces),m=(u=(t+="").split("."))[0],c=1<u.length?p.options.decimal+u[1]:"",p.options.useGrouping){g="";for(var o=0,b=m.length;o<b;++o)0!=o&&0==o%3&&(g=p.options.separator+g),g=m[b-o-1]+g;m=g}return p.options.numerals&&p.options.numerals.length&&(m=m.replace(/[0-9]/g,function(e){return p.options.numerals[+e]}),c=c.replace(/[0-9]/g,function(e){return p.options.numerals[+e]})),f+p.options.prefix+m+c+p.options.suffix},this.easeOutExpo=function(e,t,n,a){return 1024*(n*(1-r(2,-10*e/a)))/1023+t},this.options=__assign({},this.defaults,n),this.formattingFn=this.options.formattingFn?this.options.formattingFn:this.formatNumber,this.easingFn=this.options.easingFn?this.options.easingFn:this.easeOutExpo,this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.endVal=this.validateValue(t),this.options.decimalPlaces=Math.max(this.options.decimalPlaces),this.decimalMult=r(10,this.options.decimalPlaces),this.resetDuration(),this.options.separator=this.options.separator+"",this.useEasing=this.options.useEasing,""===this.options.separator&&(this.options.useGrouping=!1),this.el="string"==typeof e?document.getElementById(e):e,this.el?this.printValue(this.startVal):this.error="[CountUp] target is null or undefined"}return e.prototype.determineDirectionAndSmartEasing=function(){var e=this.finalEndVal?this.finalEndVal:this.endVal;this.countDown=this.startVal>e;var t=e-this.startVal;if(d(t)>this.options.smartEasingThreshold){this.finalEndVal=e;var s=this.countDown?1:-1;this.endVal=e+s*this.options.smartEasingAmount,this.duration/=2}else this.endVal=e,this.finalEndVal=null;this.useEasing=!this.finalEndVal&&this.options.useEasing},e.prototype.start=function(e){this.error||(this.callback=e,0<this.duration?(this.determineDirectionAndSmartEasing(),this.paused=!1,this.rAF=requestAnimationFrame(this.count)):this.printValue(this.endVal))},e.prototype.pauseResume=function(){this.paused?(this.startTime=null,this.duration=this.remaining,this.startVal=this.frameVal,this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count)):cancelAnimationFrame(this.rAF),this.paused=!this.paused},e.prototype.reset=function(){cancelAnimationFrame(this.rAF),this.paused=!0,this.resetDuration(),this.startVal=this.validateValue(this.options.startVal),this.frameVal=this.startVal,this.printValue(this.startVal)},e.prototype.update=function(e){cancelAnimationFrame(this.rAF),this.startTime=null,this.endVal=this.validateValue(e),this.endVal!==this.frameVal&&(this.startVal=this.frameVal,this.finalEndVal||this.resetDuration(),this.determineDirectionAndSmartEasing(),this.rAF=requestAnimationFrame(this.count))},e.prototype.printValue=function(e){var t=this.formattingFn(e);"INPUT"===this.el.tagName?this.el.value=t:"text"===this.el.tagName||"tspan"===this.el.tagName?this.el.textContent=t:this.el.innerHTML=t},e.prototype.ensureNumber=function(e){return"number"==typeof e&&!isNaN(e)},e.prototype.validateValue=function(e){var t=+e;return this.ensureNumber(t)?t:(this.error="[CountUp] invalid start or end value: "+e,null)},e.prototype.resetDuration=function(){this.startTime=null,this.duration=1e3*+this.options.duration,this.remaining=this.duration},e}();function createCommonjsModule(e,t){return t={exports:{}},e(t,t.exports),t.exports}var nouislider=createCommonjsModule(function(e){var t=Math.max,a=Math.abs,s=Math.round;(function(t){e.exports=t()})(function(){var se=Math.min;function e(e){return"object"==typeof e&&"function"==typeof e.to&&"function"==typeof e.from}function n(e){e.parentElement.removeChild(e)}function r(e){return null!==e&&e!==void 0}function i(t){t.preventDefault()}function o(e){return e.filter(function(e){return!this[e]&&(this[e]=!0)},{})}function l(e,t){return s(e/t)*t}function d(e,t){var a=e.getBoundingClientRect(),s=e.ownerDocument,n=s.documentElement,r=S(s);return /webkit.*Chrome.*Mobile/i.test(navigator.userAgent)&&(r.x=0),t?a.top+r.y-n.clientTop:a.left+r.x-n.clientLeft}function p(e){return"number"==typeof e&&!isNaN(e)&&isFinite(e)}function u(e,t,a){0<a&&(h(e,t),setTimeout(function(){f(e,t)},a))}function m(e){return t(se(e,100),0)}function c(e){return Array.isArray(e)?e:[e]}function g(e){e=e+"";var t=e.split(".");return 1<t.length?t[1].length:0}function h(e,t){e.classList&&!/\s/.test(t)?e.classList.add(t):e.className+=" "+t}function f(e,t){e.classList?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\b)"+t.split(" ").join("|")+"(\\b|$)","gi")," ")}function b(e,t){return e.classList?e.classList.contains(t):new RegExp("\\b"+t+"\\b").test(e.className)}function S(e){var t=window.pageXOffset!==void 0,a="CSS1Compat"===(e.compatMode||""),s=t?window.pageXOffset:a?e.documentElement.scrollLeft:e.body.scrollLeft,n=t?window.pageYOffset:a?e.documentElement.scrollTop:e.body.scrollTop;return{x:s,y:n}}function v(){return window.navigator.pointerEnabled?{start:"pointerdown",move:"pointermove",end:"pointerup"}:window.navigator.msPointerEnabled?{start:"MSPointerDown",move:"MSPointerMove",end:"MSPointerUp"}:{start:"mousedown touchstart",move:"mousemove touchmove",end:"mouseup touchend"}}function V(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("test",null,t)}catch(t){}return e}function y(){return window.CSS&&CSS.supports&&CSS.supports("touch-action","none")}function E(e,t){return 100/(t-e)}function N(e,t){return 100*t/(e[1]-e[0])}function C(e,t){return N(e,0>e[0]?t+a(e[0]):t-e[0])}function A(e,t){return t*(e[1]-e[0])/100+e[0]}function U(e,t){for(var a=1;e>=t[a];)a+=1;return a}function P(e,t,a){if(a>=e.slice(-1)[0])return 100;var s=U(a,e),n=e[s-1],r=e[s],i=t[s-1],o=t[s];return i+C([n,r],a)/E(i,o)}function k(e,t,a){if(100<=a)return e.slice(-1)[0];var s=U(a,t),n=e[s-1],r=e[s],i=t[s-1],o=t[s];return A([n,r],(a-i)*E(i,o))}function D(e,t,s,n){if(100===n)return n;var r=U(n,e),i=e[r-1],a=e[r];return s?n-i>(a-i)/2?a:i:t[r-1]?e[r-1]+l(n-e[r-1],t[r-1]):n}function w(e,t,a){var s;if("number"==typeof t&&(t=[t]),!Array.isArray(t))throw new Error("noUiSlider (14.2.0): 'range' contains invalid value.");if(s="min"===e?0:"max"===e?100:parseFloat(e),!p(s)||!p(t[0]))throw new Error("noUiSlider (14.2.0): 'range' value isn't numeric.");a.xPct.push(s),a.xVal.push(t[0]),s?a.xSteps.push(!isNaN(t[1])&&t[1]):!isNaN(t[1])&&(a.xSteps[0]=t[1]),a.xHighestCompleteStep.push(0)}function F(e,t,a){var s=Math.ceil;if(t){if(a.xVal[e]===a.xVal[e+1])return void(a.xSteps[e]=a.xHighestCompleteStep[e]=a.xVal[e]);a.xSteps[e]=N([a.xVal[e],a.xVal[e+1]],t)/E(a.xPct[e],a.xPct[e+1]);var n=(a.xVal[e+1]-a.xVal[e])/a.xNumSteps[e],r=s(+n.toFixed(3)-1),i=a.xVal[e]+a.xNumSteps[e]*r;a.xHighestCompleteStep[e]=i}}function L(e,t,a){this.xPct=[],this.xVal=[],this.xSteps=[a||!1],this.xNumSteps=[!1],this.xHighestCompleteStep=[],this.snap=t;var s,n=[];for(s in e)e.hasOwnProperty(s)&&n.push([e[s],s]);for(n.length&&"object"==typeof n[0][0]?n.sort(function(e,t){return e[0][0]-t[0][0]}):n.sort(function(e,t){return e[0]-t[0]}),s=0;s<n.length;s++)w(n[s][1],n[s][0],this);for(this.xNumSteps=this.xSteps.slice(0),s=0;s<this.xNumSteps.length;s++)F(s,this.xNumSteps[s],this)}function O(t){if(e(t))return!0;throw new Error("noUiSlider (14.2.0): 'format' requires 'to' and 'from' methods.")}function j(e,t){if(!p(t))throw new Error("noUiSlider (14.2.0): 'step' is not numeric.");e.singleStep=t}function T(e,t){if("object"!=typeof t||Array.isArray(t))throw new Error("noUiSlider (14.2.0): 'range' is not an object.");if(void 0===t.min||void 0===t.max)throw new Error("noUiSlider (14.2.0): Missing 'min' or 'max' in 'range'.");if(t.min===t.max)throw new Error("noUiSlider (14.2.0): 'range' 'min' and 'max' cannot be equal.");e.spectrum=new L(t,e.snap,e.singleStep)}function H(e,t){if(t=c(t),!Array.isArray(t)||!t.length)throw new Error("noUiSlider (14.2.0): 'start' option is incorrect.");e.handles=t.length,e.start=t}function z(e,t){if(e.snap=t,"boolean"!=typeof t)throw new Error("noUiSlider (14.2.0): 'snap' option must be a boolean.")}function M(e,t){if(e.animate=t,"boolean"!=typeof t)throw new Error("noUiSlider (14.2.0): 'animate' option must be a boolean.")}function R(e,t){if(e.animationDuration=t,"number"!=typeof t)throw new Error("noUiSlider (14.2.0): 'animationDuration' option must be a number.")}function q(e,t){var a,s=[!1];if("lower"===t?t=[!0,!1]:"upper"==t&&(t=[!1,!0]),!0===t||!1===t){for(a=1;a<e.handles;a++)s.push(t);s.push(!1)}else if(!Array.isArray(t)||!t.length||t.length!==e.handles+1)throw new Error("noUiSlider (14.2.0): 'connect' option doesn't match handle count.");else s=t;e.connect=s}function B(e,t){switch(t){case"horizontal":e.ort=0;break;case"vertical":e.ort=1;break;default:throw new Error("noUiSlider (14.2.0): 'orientation' option is invalid.");}}function _(e,t){if(!p(t))throw new Error("noUiSlider (14.2.0): 'margin' option must be numeric.");if(0!==t&&(e.margin=e.spectrum.getMargin(t),!e.margin))throw new Error("noUiSlider (14.2.0): 'margin' option is only supported on linear sliders.")}function X(e,t){if(!p(t))throw new Error("noUiSlider (14.2.0): 'limit' option must be numeric.");if(e.limit=e.spectrum.getMargin(t),!e.limit||2>e.handles)throw new Error("noUiSlider (14.2.0): 'limit' option is only supported on linear sliders with 2 or more handles.")}function I(e,t){if(!p(t)&&!Array.isArray(t))throw new Error("noUiSlider (14.2.0): 'padding' option must be numeric or array of exactly 2 numbers.");if(Array.isArray(t)&&!(2===t.length||p(t[0])||p(t[1])))throw new Error("noUiSlider (14.2.0): 'padding' option must be numeric or array of exactly 2 numbers.");if(0!==t){if(Array.isArray(t)||(t=[t,t]),e.padding=[e.spectrum.getMargin(t[0]),e.spectrum.getMargin(t[1])],!1===e.padding[0]||!1===e.padding[1])throw new Error("noUiSlider (14.2.0): 'padding' option is only supported on linear sliders.");if(0>e.padding[0]||0>e.padding[1])throw new Error("noUiSlider (14.2.0): 'padding' option must be a positive number(s).");if(100<e.padding[0]+e.padding[1])throw new Error("noUiSlider (14.2.0): 'padding' option must not exceed 100% of the range.")}}function Y(e,t){switch(t){case"ltr":e.dir=0;break;case"rtl":e.dir=1;break;default:throw new Error("noUiSlider (14.2.0): 'direction' option was not recognized.");}}function G(e,t){if("string"!=typeof t)throw new Error("noUiSlider (14.2.0): 'behaviour' must be a string containing options.");var a=0<=t.indexOf("tap"),s=0<=t.indexOf("drag"),n=0<=t.indexOf("fixed"),r=0<=t.indexOf("snap"),i=0<=t.indexOf("hover"),o=0<=t.indexOf("unconstrained");if(n){if(2!==e.handles)throw new Error("noUiSlider (14.2.0): 'fixed' behaviour must be used with 2 handles");_(e,e.start[1]-e.start[0])}if(o&&(e.margin||e.limit))throw new Error("noUiSlider (14.2.0): 'unconstrained' behaviour cannot be used with margin or limit");e.events={tap:a||r,drag:s,fixed:n,snap:r,hover:i,unconstrained:o}}function W(e,t){if(!1!==t)if(!0===t){e.tooltips=[];for(var a=0;a<e.handles;a++)e.tooltips.push(!0)}else{if(e.tooltips=c(t),e.tooltips.length!==e.handles)throw new Error("noUiSlider (14.2.0): must pass a formatter for all handles.");e.tooltips.forEach(function(e){if("boolean"!=typeof e&&("object"!=typeof e||"function"!=typeof e.to))throw new Error("noUiSlider (14.2.0): 'tooltips' must be passed a formatter or 'false'.")})}}function $(e,t){e.ariaFormat=t,O(t)}function J(e,t){e.format=t,O(t)}function K(e,t){if(e.keyboardSupport=t,"boolean"!=typeof t)throw new Error("noUiSlider (14.2.0): 'keyboardSupport' option must be a boolean.")}function Q(e,t){e.documentElement=t}function Z(e,t){if("string"!=typeof t&&!1!==t)throw new Error("noUiSlider (14.2.0): 'cssPrefix' must be a string or `false`.");e.cssPrefix=t}function ee(e,t){if("object"!=typeof t)throw new Error("noUiSlider (14.2.0): 'cssClasses' must be an object.");if("string"==typeof e.cssPrefix)for(var a in e.cssClasses={},t)t.hasOwnProperty(a)&&(e.cssClasses[a]=e.cssPrefix+t[a]);else e.cssClasses=t}function te(e){var t={margin:0,limit:0,padding:0,animate:!0,animationDuration:300,ariaFormat:ne,format:ne},a={step:{r:!1,t:j},start:{r:!0,t:H},connect:{r:!0,t:q},direction:{r:!0,t:Y},snap:{r:!1,t:z},animate:{r:!1,t:M},animationDuration:{r:!1,t:R},range:{r:!0,t:T},orientation:{r:!1,t:B},margin:{r:!1,t:_},limit:{r:!1,t:X},padding:{r:!1,t:I},behaviour:{r:!0,t:G},ariaFormat:{r:!1,t:$},format:{r:!1,t:J},tooltips:{r:!1,t:W},keyboardSupport:{r:!0,t:K},documentElement:{r:!1,t:Q},cssPrefix:{r:!0,t:Z},cssClasses:{r:!0,t:ee}},s={connect:!1,direction:"ltr",behaviour:"tap",orientation:"horizontal",keyboardSupport:!0,cssPrefix:"noUi-",cssClasses:{target:"target",base:"base",origin:"origin",handle:"handle",handleLower:"handle-lower",handleUpper:"handle-upper",touchArea:"touch-area",horizontal:"horizontal",vertical:"vertical",background:"background",connect:"connect",connects:"connects",ltr:"ltr",rtl:"rtl",textDirectionLtr:"txt-dir-ltr",textDirectionRtl:"txt-dir-rtl",draggable:"draggable",drag:"state-drag",tap:"state-tap",active:"active",tooltip:"tooltip",pips:"pips",pipsHorizontal:"pips-horizontal",pipsVertical:"pips-vertical",marker:"marker",markerHorizontal:"marker-horizontal",markerVertical:"marker-vertical",markerNormal:"marker-normal",markerLarge:"marker-large",markerSub:"marker-sub",value:"value",valueHorizontal:"value-horizontal",valueVertical:"value-vertical",valueNormal:"value-normal",valueLarge:"value-large",valueSub:"value-sub"}};e.format&&!e.ariaFormat&&(e.ariaFormat=e.format),Object.keys(a).forEach(function(n){if(!r(e[n])&&void 0===s[n]){if(a[n].r)throw new Error("noUiSlider (14.2.0): '"+n+"' is required.");return!0}a[n].t(t,r(e[n])?e[n]:s[n])}),t.pips=e.pips;var n=document.createElement("div"),i=void 0!==n.style.msTransform,o=void 0!==n.style.transform;t.transformRule=o?"transform":i?"msTransform":"webkitTransform";return t.style=[["left","top"],["right","bottom"]][t.dir][t.ort],t}function ae(e,r,l){function p(e,t){var a=ke.createElement("div");return t&&h(a,t),e.appendChild(a),a}function g(e,t){var a=p(e,r.cssClasses.origin),s=p(a,r.cssClasses.handle);return p(s,r.cssClasses.touchArea),s.setAttribute("data-handle",t),r.keyboardSupport&&(s.setAttribute("tabindex","0"),s.addEventListener("keydown",function(e){return G(e,t)})),s.setAttribute("role","slider"),s.setAttribute("aria-orientation",r.ort?"vertical":"horizontal"),0===t?h(s,r.cssClasses.handleLower):t==r.handles-1&&h(s,r.cssClasses.handleUpper),a}function x(e,t){return!!t&&p(e,r.cssClasses.connect)}function E(e,t){var a=p(t,r.cssClasses.connects);ge=[],he=[],he.push(x(a,e[0]));for(var s=0;s<r.handles;s++)ge.push(g(t,s)),Ae[s]=s,he.push(x(a,e[s+1]))}function N(e){h(e,r.cssClasses.target),0===r.dir?h(e,r.cssClasses.ltr):h(e,r.cssClasses.rtl),0===r.ort?h(e,r.cssClasses.horizontal):h(e,r.cssClasses.vertical);var t=getComputedStyle(e).direction;return"rtl"===t?h(e,r.cssClasses.textDirectionRtl):h(e,r.cssClasses.textDirectionLtr),p(e,r.cssClasses.base)}function C(e,t){return!!r.tooltips[t]&&p(e.firstChild,r.cssClasses.tooltip)}function A(){return ye.hasAttribute("disabled")}function U(e){var t=ge[e];return t.hasAttribute("disabled")}function P(){be&&(J("update.tooltips"),be.forEach(function(e){e&&n(e)}),be=null)}function k(){P(),be=ge.map(C),$("update.tooltips",function(e,t,a){if(be[t]){var s=e[t];!0!==r.tooltips[t]&&(s=r.tooltips[t].to(a[t])),be[t].innerHTML=s}})}function D(){$("update",function(e,t,a,s,n){Ae.forEach(function(e){var t=ge[e],s=Q(Ce,e,0,!0,!0,!0),i=Q(Ce,e,100,!0,!0,!0),o=n[e],l=r.ariaFormat.to(a[e]);s=Ee.fromStepping(s).toFixed(1),i=Ee.fromStepping(i).toFixed(1),o=Ee.fromStepping(o).toFixed(1),t.children[0].setAttribute("aria-valuemin",s),t.children[0].setAttribute("aria-valuemax",i),t.children[0].setAttribute("aria-valuenow",o),t.children[0].setAttribute("aria-valuetext",l)})})}function w(e,t,a){if("range"===e||"steps"===e)return Ee.xVal;if("count"===e){if(2>t)throw new Error("noUiSlider (14.2.0): 'values' (>= 2) required for mode 'count'.");var s=t-1,n=100/s;for(t=[];s--;)t[s]=s*n;t.push(100),e="positions"}return"positions"===e?t.map(function(e){return Ee.fromStepping(a?Ee.getStep(e):e)}):"values"===e?a?t.map(function(e){return Ee.fromStepping(Ee.getStep(Ee.toStepping(e)))}):t:void 0}function F(e,a,n){function r(e,t){return(e+t).toFixed(7)/1}var l={},d=Ee.xVal[0],p=Ee.xVal[Ee.xVal.length-1],u=!1,m=!1,c=0;return n=o(n.slice().sort(function(e,t){return e-t})),n[0]!==d&&(n.unshift(d),u=!0),n[n.length-1]!==p&&(n.push(p),m=!0),n.forEach(function(o,d){var p,g,h,f,b,x,S,v,V,y,E=o,N=n[d+1],C="steps"===a;if(C&&(p=Ee.xNumSteps[d]),p||(p=N-E),!1!==E&&void 0!==N)for(p=t(p,1e-7),g=E;g<=N;g=r(g,p)){for(f=Ee.toStepping(g),b=f-c,v=b/e,V=s(v),y=b/V,h=1;h<=V;h+=1)x=c+h*y,l[x.toFixed(5)]=[Ee.fromStepping(x),0];S=-1<n.indexOf(g)?1:C?2:0,!d&&u&&g!==N&&(S=0),g===N&&m||(l[f.toFixed(5)]=[g,S]),c=f}}),l}function L(e,t,a){function s(e,t){var s=t===r.cssClasses.value,a=s?d:u,n=s?o:l;return t+" "+a[r.ort]+" "+n[e]}function n(e,n,o){if(o=t?t(n,o):o,-1!==o){var l=p(i,!1);l.className=s(o,r.cssClasses.marker),l.style[r.style]=e+"%",0<o&&(l=p(i,!1),l.className=s(o,r.cssClasses.value),l.setAttribute("data-value",n),l.style[r.style]=e+"%",l.innerHTML=a.to(n))}}var i=ke.createElement("div"),o=[];o[0]=r.cssClasses.valueNormal,o[1]=r.cssClasses.valueLarge,o[2]=r.cssClasses.valueSub;var l=[];l[0]=r.cssClasses.markerNormal,l[1]=r.cssClasses.markerLarge,l[2]=r.cssClasses.markerSub;var d=[r.cssClasses.valueHorizontal,r.cssClasses.valueVertical],u=[r.cssClasses.markerHorizontal,r.cssClasses.markerVertical];return h(i,r.cssClasses.pips),h(i,0===r.ort?r.cssClasses.pipsHorizontal:r.cssClasses.pipsVertical),Object.keys(e).forEach(function(t){n(t,e[t][0],e[t][1])}),i}function O(){fe&&(n(fe),fe=null)}function j(e){O();var t=e.mode,a=e.density||1,n=e.filter||!1,r=e.values||!1,i=e.stepped||!1,o=w(t,r,i),l=F(a,t,o),d=e.format||{to:s};return fe=ye.appendChild(L(l,n,d)),fe}function T(){var e=ce.getBoundingClientRect(),t="offset"+["Width","Height"][r.ort];return 0===r.ort?e.width||ce[t]:e.height||ce[t]}function H(t,a,s,n){var i=function(i){return i=z(i,n.pageOffset,n.target||a),!!i&&(!A()||n.doNotReject)&&(!b(ye,r.cssClasses.tap)||n.doNotReject)&&!(t===Se.start&&void 0!==i.buttons&&1<i.buttons)&&!(n.hover&&i.buttons)&&void(!Ve&&i.preventDefault(),i.calcPoint=i.points[r.ort],s(i,n))},o=[];return t.split(" ").forEach(function(e){a.addEventListener(e,i,!!Ve&&{passive:!0}),o.push([e,i])}),o}function z(t,e,a){var s,n,r=0===t.type.indexOf("touch"),i=0===t.type.indexOf("mouse"),o=0===t.type.indexOf("pointer");if(0===t.type.indexOf("MSPointer")&&(o=!0),r){var l=function(e){return e.target===a||a.contains(e.target)||e.target.shadowRoot&&e.target.shadowRoot.contains(a)};if("touchstart"===t.type){var d=Array.prototype.filter.call(t.touches,l);if(1<d.length)return!1;s=d[0].pageX,n=d[0].pageY}else{var p=Array.prototype.find.call(t.changedTouches,l);if(!p)return!1;s=p.pageX,n=p.pageY}}return e=e||S(ke),(i||o)&&(s=t.clientX+e.x,n=t.clientY+e.y),t.pageOffset=e,t.points=[s,n],t.cursor=i||o,t}function M(e){var t=e-d(ce,r.ort),a=100*t/T();return a=m(a),r.dir?100-a:a}function R(e){var t=100,s=!1;return ge.forEach(function(n,r){if(!U(r)){var i=Ce[r],o=a(i-e),l=100===o&&100===t,d=o<t,p=o<=t&&e>i;(d||p||l)&&(s=r,t=o)}}),s}function q(e,t){"mouseout"===e.type&&"HTML"===e.target.nodeName&&null===e.relatedTarget&&_(e,t)}function B(e,t){if(-1===navigator.appVersion.indexOf("MSIE 9")&&0===e.buttons&&0!==t.buttonsProperty)return _(e,t);var a=(r.dir?-1:1)*(e.calcPoint-t.startCalcPoint),s=100*a/t.baseSize;ee(0<a,s,t.locations,t.handleNumbers)}function _(e,t){t.handle&&(f(t.handle,r.cssClasses.active),Ue-=1),t.listeners.forEach(function(e){De.removeEventListener(e[0],e[1])}),0===Ue&&(f(ye,r.cssClasses.drag),re(),e.cursor&&(we.style.cursor="",we.removeEventListener("selectstart",i))),t.handleNumbers.forEach(function(e){K("change",e),K("set",e),K("end",e)})}function X(e,t){if(t.handleNumbers.some(U))return!1;var a;if(1===t.handleNumbers.length){var s=ge[t.handleNumbers[0]];a=s.children[0],Ue+=1,h(a,r.cssClasses.active)}e.stopPropagation();var n=[],o=H(Se.move,De,B,{target:e.target,handle:a,listeners:n,startCalcPoint:e.calcPoint,baseSize:T(),pageOffset:e.pageOffset,handleNumbers:t.handleNumbers,buttonsProperty:e.buttons,locations:Ce.slice()}),l=H(Se.end,De,_,{target:e.target,handle:a,listeners:n,doNotReject:!0,handleNumbers:t.handleNumbers}),d=H("mouseout",De,q,{target:e.target,handle:a,listeners:n,doNotReject:!0,handleNumbers:t.handleNumbers});n.push.apply(n,o.concat(l,d)),e.cursor&&(we.style.cursor=getComputedStyle(e.target).cursor,1<ge.length&&h(ye,r.cssClasses.drag),we.addEventListener("selectstart",i,!1)),t.handleNumbers.forEach(function(e){K("start",e)})}function I(e){e.stopPropagation();var t=M(e.calcPoint),a=R(t);return!1!==a&&void(!r.events.snap&&u(ye,r.cssClasses.tap,r.animationDuration),ie(a,t,!0,!0),re(),K("slide",a,!0),K("update",a,!0),K("change",a,!0),K("set",a,!0),r.events.snap&&X(e,{handleNumbers:[a]}))}function Y(e){var t=M(e.calcPoint),a=Ee.getStep(t),s=Ee.fromStepping(a);Object.keys(Pe).forEach(function(e){"hover"===e.split(".")[0]&&Pe[e].forEach(function(e){e.call(xe,s)})})}function G(e,a){if(A()||U(a))return!1;var s=["Left","Right"],n=["Down","Up"],i=["PageDown","PageUp"],o=["Home","End"];r.dir&&!r.ort?s.reverse():r.ort&&!r.dir&&(n.reverse(),i.reverse());var l=e.key.replace("Arrow",""),d=l===i[0],p=l===i[1],u=l===n[0]||l===s[0]||d,m=l===n[1]||l===s[1]||p,c=l===o[0],g=l===o[1];if(!u&&!m&&!c&&!g)return!0;e.preventDefault();var h;if(m||u){var f=u?0:1,b=ue(a),x=b[f];if(null===x)return!1;!1===x&&(x=Ee.getDefaultStep(Ce[a],u,10)),(p||d)&&(x*=5),x=t(x,1e-7),x=(u?-1:1)*x,h=Ne[a]+x}else h=g?r.spectrum.xVal[r.spectrum.xVal.length-1]:r.spectrum.xVal[0];return ie(a,Ee.toStepping(h),!0,!0),K("slide",a),K("update",a),K("change",a),K("set",a),!1}function W(e){e.fixed||ge.forEach(function(e,t){H(Se.start,e.children[0],X,{handleNumbers:[t]})}),e.tap&&H(Se.start,ce,I,{}),e.hover&&H(Se.move,ce,Y,{hover:!0}),e.drag&&he.forEach(function(t,a){if(!1!==t&&0!==a&&a!==he.length-1){var s=ge[a-1],n=ge[a],i=[t];h(t,r.cssClasses.draggable),e.fixed&&(i.push(s.children[0]),i.push(n.children[0])),i.forEach(function(e){H(Se.start,e,X,{handles:[s,n],handleNumbers:[a-1,a]})})}})}function $(e,t){Pe[e]=Pe[e]||[],Pe[e].push(t),"update"===e.split(".")[0]&&ge.forEach(function(e,t){K("update",t)})}function J(e){var t=e&&e.split(".")[0],a=t&&e.substring(t.length);Object.keys(Pe).forEach(function(e){var s=e.split(".")[0],n=e.substring(s.length);t&&t!==s||a&&a!==n||delete Pe[e]})}function K(e,t,a){Object.keys(Pe).forEach(function(s){var n=s.split(".")[0];e===n&&Pe[s].forEach(function(e){e.call(xe,Ne.map(r.format.to),t,Ne.slice(),a||!1,Ce.slice(),xe)})})}function Q(e,a,s,n,i,o){return 1<ge.length&&!r.events.unconstrained&&(n&&0<a&&(s=t(s,e[a-1]+r.margin)),i&&a<ge.length-1&&(s=se(s,e[a+1]-r.margin))),1<ge.length&&r.limit&&(n&&0<a&&(s=se(s,e[a-1]+r.limit)),i&&a<ge.length-1&&(s=t(s,e[a+1]-r.limit))),r.padding&&(0===a&&(s=t(s,r.padding[0])),a===ge.length-1&&(s=se(s,100-r.padding[1]))),s=Ee.getStep(s),s=m(s),!!(s!==e[a]||o)&&s}function Z(e,t){var a=r.ort;return(a?t:e)+", "+(a?e:t)}function ee(e,t,a,s){var n=a.slice(),r=[!e,e],i=[e,!e];s=s.slice(),e&&s.reverse(),1<s.length?s.forEach(function(e,a){var s=Q(n,e,n[e]+t,r[a],i[a],!1);!1===s?t=0:(t=s-n[e],n[e]=s)}):r=i=[!0];var l=!1;s.forEach(function(e,s){l=ie(e,a[e]+t,r[s],i[s])||l}),l&&s.forEach(function(e){K("update",e),K("slide",e)})}function ae(e,t){return r.dir?100-e-t:e}function ne(e,t){Ce[e]=t,Ne[e]=Ee.fromStepping(t);var a=10*(ae(t,0)-Fe),s="translate("+Z(a+"%","0")+")";ge[e].style[r.transformRule]=s,oe(e),oe(e+1)}function re(){Ae.forEach(function(e){var t=50<Ce[e]?-1:1,a=3+(ge.length+t*e);ge[e].style.zIndex=a})}function ie(e,t,a,s){return(t=Q(Ce,e,t,a,s,!1),!1!==t)&&(ne(e,t),!0)}function oe(e){if(he[e]){var t=0,a=100;0!==e&&(t=Ce[e-1]),e!==he.length-1&&(a=Ce[e]);var s=a-t,n="translate("+Z(ae(t,s)+"%","0")+")",i="scale("+Z(s/100,"1")+")";he[e].style[r.transformRule]=n+" "+i}}function le(e,t){return null===e||!1===e||void 0===e?Ce[t]:("number"==typeof e&&(e+=""),e=r.format.from(e),e=Ee.toStepping(e),!1===e||isNaN(e)?Ce[t]:e)}function de(e,t){var a=c(e),s=void 0===Ce[0];t=void 0===t||!!t,r.animate&&!s&&u(ye,r.cssClasses.tap,r.animationDuration),Ae.forEach(function(e){ie(e,le(a[e],e),!0,!1)});for(var n=1===Ae.length?0:1;n<Ae.length;++n)Ae.forEach(function(e){ie(e,Ce[e],!0,!0)});re(),Ae.forEach(function(e){K("update",e),null!==a[e]&&t&&K("set",e)})}function pe(){var e=Ne.map(r.format.to);return 1===e.length?e[0]:e}function ue(e){var t=Ce[e],a=Ee.getNearbySteps(t),s=Ne[e],n=a.thisStep.step,i=null;if(r.snap)return[s-a.stepBefore.startValue||null,a.stepAfter.startValue-s||null];!1!==n&&s+n>a.stepAfter.startValue&&(n=a.stepAfter.startValue-s),i=s>a.thisStep.startValue?a.thisStep.step:!1!==a.stepBefore.step&&s-a.stepBefore.highestStep,100===t?n=null:0===t&&(i=null);var o=Ee.countStepDecimals();return null!==n&&!1!==n&&(n=+n.toFixed(o)),null!==i&&!1!==i&&(i=+i.toFixed(o)),[i,n]}function me(){ce=N(ye),E(r.connect,ce),W(r.events),de(r.start),r.pips&&j(r.pips),r.tooltips&&k(),D()}var ce,ge,he,fe,be,xe,Se=v(),ve=y(),Ve=ve&&V(),ye=e,Ee=r.spectrum,Ne=[],Ce=[],Ae=[],Ue=0,Pe={},ke=e.ownerDocument,De=r.documentElement||ke.documentElement,we=ke.body,Fe="rtl"===ke.dir||1===r.ort?0:100;return me(),xe={destroy:function(){for(var e in r.cssClasses)r.cssClasses.hasOwnProperty(e)&&f(ye,r.cssClasses[e]);for(;ye.firstChild;)ye.removeChild(ye.firstChild);delete ye.noUiSlider},steps:function(){return Ae.map(ue)},on:$,off:J,get:pe,set:de,setHandle:function(e,t,a){if(e=+e,!(0<=e&&e<Ae.length))throw new Error("noUiSlider (14.2.0): invalid handle number, got: "+e);ie(e,le(t,e),!0,!0),K("update",e),a&&K("set",e)},reset:function(e){de(r.start,e)},__moveHandles:function(e,t,a){ee(e,t,Ce,a)},options:l,updateOptions:function(e,t){var a=pe(),s=["margin","limit","padding","range","animate","snap","step","format","pips","tooltips"];s.forEach(function(t){void 0!==e[t]&&(l[t]=e[t])});var n=te(l);s.forEach(function(t){void 0!==e[t]&&(r[t]=n[t])}),Ee=n.spectrum,r.margin=n.margin,r.limit=n.limit,r.padding=n.padding,r.pips?j(r.pips):O(),r.tooltips?k():P(),Ce=[],de(e.start||a,t)},target:ye,removePips:O,removeTooltips:P,pips:j},xe}L.prototype.getMargin=function(e){var t=this.xNumSteps[0];if(t&&0!=e/t%1)throw new Error("noUiSlider (14.2.0): 'limit', 'margin' and 'padding' must be divisible by step.");return!(2!==this.xPct.length)&&N(this.xVal,e)},L.prototype.toStepping=function(e){return e=P(this.xVal,this.xPct,e),e},L.prototype.fromStepping=function(e){return k(this.xVal,this.xPct,e)},L.prototype.getStep=function(e){return e=D(this.xPct,this.xSteps,this.snap,e),e},L.prototype.getDefaultStep=function(e,a,s){var n=U(e,this.xPct);return(100===e||a&&e===this.xPct[n-1])&&(n=t(n-1,1)),(this.xVal[n]-this.xVal[n-1])/s},L.prototype.getNearbySteps=function(e){var t=U(e,this.xPct);return{stepBefore:{startValue:this.xVal[t-2],step:this.xNumSteps[t-2],highestStep:this.xHighestCompleteStep[t-2]},thisStep:{startValue:this.xVal[t-1],step:this.xNumSteps[t-1],highestStep:this.xHighestCompleteStep[t-1]},stepAfter:{startValue:this.xVal[t],step:this.xNumSteps[t],highestStep:this.xHighestCompleteStep[t]}}},L.prototype.countStepDecimals=function(){var e=this.xNumSteps.map(g);return t.apply(null,e)},L.prototype.convert=function(e){return this.getStep(this.toStepping(e))};var ne={to:function(e){return e!==void 0&&e.toFixed(2)},from:Number};return{__spectrum:L,version:"14.2.0",create:function(e,t){if(!e||!e.nodeName)throw new Error("noUiSlider (14.2.0): create requires a single element, got: "+e);if(e.noUiSlider)throw new Error("noUiSlider (14.2.0): Slider was already initialized.");var a=te(t),s=ae(e,a,t);return e.noUiSlider=s,s}}})});(function(){var e=[].slice.call(document.querySelectorAll("[data-toggle=\"dropdown\"]"));e.map(function(e){return new bootstrap.Dropdown(e,{})});var t=[].slice.call(document.querySelectorAll("[data-toggle=\"tooltip\"]"));t.map(function(e){return new bootstrap.Tooltip(e,{})});var a=[].slice.call(document.querySelectorAll("[data-toggle=\"popover\"]"));a.map(function(e){return new bootstrap.Popover(e,{autoHide:!0})});var s=[].slice.call(document.querySelectorAll("[data-slider]"));s.map(function(e){var t;e.getAttribute("data-slider")&&(t=JSON.parse(e.getAttribute("data-slider")));var a=nouislider.create(e,t);t["js-name"]&&(window[t["js-name"]]=a)});var n=[].slice.call(document.querySelectorAll("[data-countup]"));n.map(function(e){var t;return""!==e.getAttribute("data-countup")&&(t=JSON.parse(e.getAttribute("data-countup"))),new CountUp(e,parseFloat(e.innerText),t).start()})})();
diff --git a/dist/libs/apexcharts/dist/apexcharts.min.js b/dist/libs/apexcharts/dist/apexcharts.min.js
index 45868ce69..1932863b5 100644
--- a/dist/libs/apexcharts/dist/apexcharts.min.js
+++ b/dist/libs/apexcharts/dist/apexcharts.min.js
@@ -1,9 +1,9 @@
 /*!
- * ApexCharts v3.17.0
+ * ApexCharts v3.18.1
  * (c) 2018-2020 Juned Chhipa
  * Released under the MIT License.
  */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).ApexCharts=e()}(this,(function(){"use strict";function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(e)}function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){for(var i=0;i<e.length;i++){var a=e[i];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,a.key,a)}}function a(t,e,a){return e&&i(t.prototype,e),a&&i(t,a),t}function s(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function r(t,e){var i=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),i.push.apply(i,a)}return i}function n(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{};e%2?r(Object(i),!0).forEach((function(e){s(t,e,i[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):r(Object(i)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))}))}return t}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&h(t,e)}function l(t){return(l=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function h(t,e){return(h=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function c(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function d(t){return function(t){if(Array.isArray(t)){for(var e=0,i=new Array(t.length);e<t.length;e++)i[e]=t[e];return i}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var g=function(){function i(){e(this,i)}return a(i,[{key:"shadeRGBColor",value:function(t,e){var i=e.split(","),a=t<0?0:255,s=t<0?-1*t:t,r=parseInt(i[0].slice(4),10),n=parseInt(i[1],10),o=parseInt(i[2],10);return"rgb("+(Math.round((a-r)*s)+r)+","+(Math.round((a-n)*s)+n)+","+(Math.round((a-o)*s)+o)+")"}},{key:"shadeHexColor",value:function(t,e){var i=parseInt(e.slice(1),16),a=t<0?0:255,s=t<0?-1*t:t,r=i>>16,n=i>>8&255,o=255&i;return"#"+(16777216+65536*(Math.round((a-r)*s)+r)+256*(Math.round((a-n)*s)+n)+(Math.round((a-o)*s)+o)).toString(16).slice(1)}},{key:"shadeColor",value:function(t,e){return e.length>7?this.shadeRGBColor(t,e):this.shadeHexColor(t,e)}}],[{key:"bind",value:function(t,e){return function(){return t.apply(e,arguments)}}},{key:"isObject",value:function(e){return e&&"object"===t(e)&&!Array.isArray(e)&&null!=e}},{key:"listToArray",value:function(t){var e,i=[];for(e=0;e<t.length;e++)i[e]=t[e];return i}},{key:"extend",value:function(t,e){var i=this;"function"!=typeof Object.assign&&(Object.assign=function(t){if(null==t)throw new TypeError("Cannot convert undefined or null to object");for(var e=Object(t),i=1;i<arguments.length;i++){var a=arguments[i];if(null!=a)for(var s in a)a.hasOwnProperty(s)&&(e[s]=a[s])}return e});var a=Object.assign({},t);return this.isObject(t)&&this.isObject(e)&&Object.keys(e).forEach((function(r){i.isObject(e[r])&&r in t?a[r]=i.extend(t[r],e[r]):Object.assign(a,s({},r,e[r]))})),a}},{key:"extendArray",value:function(t,e){var a=[];return t.map((function(t){a.push(i.extend(e,t))})),t=a}},{key:"monthMod",value:function(t){return t%12}},{key:"clone",value:function(e){if("[object Array]"===Object.prototype.toString.call(e)){for(var i=[],a=0;a<e.length;a++)i[a]=this.clone(e[a]);return i}if("object"===t(e)){var s={};for(var r in e)e.hasOwnProperty(r)&&(s[r]=this.clone(e[r]));return s}return e}},{key:"log10",value:function(t){return Math.log(t)/Math.LN10}},{key:"roundToBase10",value:function(t){return Math.pow(10,Math.floor(Math.log10(t)))}},{key:"roundToBase",value:function(t,e){return Math.pow(e,Math.floor(Math.log(t)/Math.log(e)))}},{key:"parseNumber",value:function(t){return null===t?t:parseFloat(t)}},{key:"randomId",value:function(){return(new Date%9e6).toString(16)}},{key:"noExponents",value:function(t){var e=String(t).split(/[eE]/);if(1===e.length)return e[0];var i="",a=t<0?"-":"",s=e[0].replace(".",""),r=Number(e[1])+1;if(r<0){for(i=a+"0.";r++;)i+="0";return i+s.replace(/^-/,"")}for(r-=s.length;r--;)i+="0";return s+i}},{key:"getDimensions",value:function(t){var e=getComputedStyle(t),i=[],a=t.clientHeight,s=t.clientWidth;return a-=parseFloat(e.paddingTop)+parseFloat(e.paddingBottom),s-=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight),i.push(s),i.push(a),i}},{key:"getBoundingClientRect",value:function(t){var e=t.getBoundingClientRect();return{top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:t.clientWidth,height:t.clientHeight,x:e.left,y:e.top}}},{key:"getLargestStringFromArr",value:function(t){return t.reduce((function(t,e){return Array.isArray(e)&&(e=e.reduce((function(t,e){return t.length>e.length?t:e}))),t.length>e.length?t:e}),0)}},{key:"hexToRgba",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"#999999",e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:.6;"#"!==t.substring(0,1)&&(t="#999999");var i=t.replace("#","");i=i.match(new RegExp("(.{"+i.length/3+"})","g"));for(var a=0;a<i.length;a++)i[a]=parseInt(1===i[a].length?i[a]+i[a]:i[a],16);return void 0!==e&&i.push(e),"rgba("+i.join(",")+")"}},{key:"getOpacityFromRGBA",value:function(t){return(t=t.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i))[3]}},{key:"rgb2hex",value:function(t){return(t=t.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i))&&4===t.length?"#"+("0"+parseInt(t[1],10).toString(16)).slice(-2)+("0"+parseInt(t[2],10).toString(16)).slice(-2)+("0"+parseInt(t[3],10).toString(16)).slice(-2):""}},{key:"isColorHex",value:function(t){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(t)}},{key:"polarToCartesian",value:function(t,e,i,a){var s=(a-90)*Math.PI/180;return{x:t+i*Math.cos(s),y:e+i*Math.sin(s)}}},{key:"escapeString",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"x",i=t.toString().slice();return i=i.replace(/[` ~!@#$%^&*()_|+\-=?;:'",.<>{}[\]\\/]/gi,e)}},{key:"negToZero",value:function(t){return t<0?0:t}},{key:"moveIndexInArray",value:function(t,e,i){if(i>=t.length)for(var a=i-t.length+1;a--;)t.push(void 0);return t.splice(i,0,t.splice(e,1)[0]),t}},{key:"extractNumber",value:function(t){return parseFloat(t.replace(/[^\d.]*/g,""))}},{key:"findAncestor",value:function(t,e){for(;(t=t.parentElement)&&!t.classList.contains(e););return t}},{key:"setELstyles",value:function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t.style.key=e[i])}},{key:"isNumber",value:function(t){return!isNaN(t)&&parseFloat(Number(t))===t&&!isNaN(parseInt(t,10))}},{key:"isFloat",value:function(t){return Number(t)===t&&t%1!=0}},{key:"isSafari",value:function(){return/^((?!chrome|android).)*safari/i.test(navigator.userAgent)}},{key:"isFirefox",value:function(){return navigator.userAgent.toLowerCase().indexOf("firefox")>-1}},{key:"isIE11",value:function(){if(-1!==window.navigator.userAgent.indexOf("MSIE")||window.navigator.appVersion.indexOf("Trident/")>-1)return!0}},{key:"isIE",value:function(){var t=window.navigator.userAgent,e=t.indexOf("MSIE ");if(e>0)return parseInt(t.substring(e+5,t.indexOf(".",e)),10);if(t.indexOf("Trident/")>0){var i=t.indexOf("rv:");return parseInt(t.substring(i+3,t.indexOf(".",i)),10)}var a=t.indexOf("Edge/");return a>0&&parseInt(t.substring(a+5,t.indexOf(".",a)),10)}}]),i}(),u=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"getDefaultFilter",value:function(t,e){var i=this.w;t.unfilter(!0),(new window.SVG.Filter).size("120%","180%","-5%","-40%"),"none"!==i.config.states.normal.filter?this.applyFilter(t,e,i.config.states.normal.filter.type,i.config.states.normal.filter.value):i.config.chart.dropShadow.enabled&&this.dropShadow(t,i.config.chart.dropShadow,e)}},{key:"addNormalFilter",value:function(t,e){var i=this.w;i.config.chart.dropShadow.enabled&&!t.node.classList.contains("apexcharts-marker")&&this.dropShadow(t,i.config.chart.dropShadow,e)}},{key:"addLightenFilter",value:function(t,e,i){var a=this,s=this.w,r=i.intensity;if(!g.isFirefox()){t.unfilter(!0);new window.SVG.Filter;t.filter((function(t){var i=s.config.chart.dropShadow;(i.enabled?a.addShadow(t,e,i):t).componentTransfer({rgb:{type:"linear",slope:1.5,intercept:r}})})),t.filterer.node.setAttribute("filterUnits","userSpaceOnUse"),this._scaleFilterSize(t.filterer.node)}}},{key:"addDarkenFilter",value:function(t,e,i){var a=this,s=this.w,r=i.intensity;if(!g.isFirefox()){t.unfilter(!0);new window.SVG.Filter;t.filter((function(t){var i=s.config.chart.dropShadow;(i.enabled?a.addShadow(t,e,i):t).componentTransfer({rgb:{type:"linear",slope:r}})})),t.filterer.node.setAttribute("filterUnits","userSpaceOnUse"),this._scaleFilterSize(t.filterer.node)}}},{key:"applyFilter",value:function(t,e,i){var a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:.5;switch(i){case"none":this.addNormalFilter(t,e);break;case"lighten":this.addLightenFilter(t,e,{intensity:a});break;case"darken":this.addDarkenFilter(t,e,{intensity:a})}}},{key:"addShadow",value:function(t,e,i){var a=i.blur,s=i.top,r=i.left,n=i.color,o=i.opacity,l=t.flood(Array.isArray(n)?n[e]:n,o).composite(t.sourceAlpha,"in").offset(r,s).gaussianBlur(a).merge(t.source);return t.blend(t.source,l)}},{key:"dropShadow",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,a=e.top,s=e.left,r=e.blur,n=e.color,o=e.opacity,l=e.noUserSpaceOnUse,h=this.w;return t.unfilter(!0),g.isIE()&&"radialBar"===h.config.chart.type?t:(n=Array.isArray(n)?n[i]:n,t.filter((function(t){var e=null;e=g.isSafari()||g.isFirefox()||g.isIE()?t.flood(n,o).composite(t.sourceAlpha,"in").offset(s,a).gaussianBlur(r):t.flood(n,o).composite(t.sourceAlpha,"in").offset(s,a).gaussianBlur(r).merge(t.source),t.blend(t.source,e)})),l||t.filterer.node.setAttribute("filterUnits","userSpaceOnUse"),this._scaleFilterSize(t.filterer.node),t)}},{key:"setSelectionFilter",value:function(t,e,i){var a=this.w;if(void 0!==a.globals.selectedDataPoints[e]&&a.globals.selectedDataPoints[e].indexOf(i)>-1){t.node.setAttribute("selected",!0);var s=a.config.states.active.filter;"none"!==s&&this.applyFilter(t,e,s.type,s.value)}}},{key:"_scaleFilterSize",value:function(t){!function(e){for(var i in e)e.hasOwnProperty(i)&&t.setAttribute(i,e[i])}({width:"200%",height:"200%",x:"-50%",y:"-50%"})}}]),t}(),f=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.setEasingFunctions()}return a(t,[{key:"setEasingFunctions",value:function(){var t;if(!this.w.globals.easing){switch(this.w.config.chart.animations.easing){case"linear":t="-";break;case"easein":t="<";break;case"easeout":t=">";break;case"easeinout":t="<>";break;case"swing":t=function(t){var e=1.70158;return(t-=1)*t*((e+1)*t+e)+1};break;case"bounce":t=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375};break;case"elastic":t=function(t){return t===!!t?t:Math.pow(2,-10*t)*Math.sin((t-.075)*(2*Math.PI)/.3)+1};break;default:t="<>"}this.w.globals.easing=t}}},{key:"animateLine",value:function(t,e,i,a){t.attr(e).animate(a).attr(i)}},{key:"animateCircleRadius",value:function(t,e,i,a,s,r){e||(e=0),t.attr({r:e}).animate(a,s).attr({r:i}).afterAll((function(){r()}))}},{key:"animateCircle",value:function(t,e,i,a,s){t.attr({r:e.r,cx:e.cx,cy:e.cy}).animate(a,s).attr({r:i.r,cx:i.cx,cy:i.cy})}},{key:"animateRect",value:function(t,e,i,a,s){t.attr(e).animate(a).attr(i).afterAll((function(){return s()}))}},{key:"animatePathsGradually",value:function(t){var e=t.el,i=t.realIndex,a=t.j,s=t.fill,r=t.pathFrom,n=t.pathTo,o=t.speed,l=t.delay,h=this.w,c=0;h.config.chart.animations.animateGradually.enabled&&(c=h.config.chart.animations.animateGradually.delay),h.config.chart.animations.dynamicAnimation.enabled&&h.globals.dataChanged&&"bar"!==h.config.chart.type&&(c=0),this.morphSVG(e,i,a,"line"!==h.config.chart.type||h.globals.comboCharts?s:"stroke",r,n,o,l*c)}},{key:"showDelayedElements",value:function(){this.w.globals.delayedElements.forEach((function(t){t.el.classList.remove("apexcharts-element-hidden")}))}},{key:"animationCompleted",value:function(t){var e=this.w;e.globals.animationEnded||(e.globals.animationEnded=!0,"function"==typeof e.config.chart.events.animationEnd&&e.config.chart.events.animationEnd(this.ctx,{el:t,w:e}))}},{key:"morphSVG",value:function(t,e,i,a,s,r,n,o){var l=this,h=this.w;s||(s=t.attr("pathFrom")),r||(r=t.attr("pathTo"));var c=function(t){return"radar"===h.config.chart.type&&(n=1),"M 0 ".concat(h.globals.gridHeight)};(!s||s.indexOf("undefined")>-1||s.indexOf("NaN")>-1)&&(s=c()),(r.indexOf("undefined")>-1||r.indexOf("NaN")>-1)&&(r=c()),h.globals.shouldAnimate||(n=1),t.plot(s).animate(1,h.globals.easing,o).plot(s).animate(n,h.globals.easing,o).plot(r).afterAll((function(){g.isNumber(i)?i===h.globals.series[h.globals.maxValsInArrayIndex].length-2&&h.globals.shouldAnimate&&l.animationCompleted(t):"none"!==a&&h.globals.shouldAnimate&&(!h.globals.comboCharts&&e===h.globals.series.length-1||h.globals.comboCharts)&&l.animationCompleted(t),l.showDelayedElements()}))}}]),t}(),p=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"drawLine",value:function(t,e,i,a){var s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"#a8a8a8",r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,n=arguments.length>6&&void 0!==arguments[6]?arguments[6]:null,o=this.w,l=o.globals.dom.Paper.line().attr({x1:t,y1:e,x2:i,y2:a,stroke:s,"stroke-dasharray":r,"stroke-width":n});return l}},{key:"drawRect",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:"#fefefe",n=arguments.length>6&&void 0!==arguments[6]?arguments[6]:1,o=arguments.length>7&&void 0!==arguments[7]?arguments[7]:null,l=arguments.length>8&&void 0!==arguments[8]?arguments[8]:null,h=arguments.length>9&&void 0!==arguments[9]?arguments[9]:0,c=this.w,d=c.globals.dom.Paper.rect();return d.attr({x:t,y:e,width:i>0?i:0,height:a>0?a:0,rx:s,ry:s,fill:r,opacity:n,"stroke-width":null!==o?o:0,stroke:null!==l?l:"none","stroke-dasharray":h}),d}},{key:"drawPolygon",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"#e1e1e1",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"none",a=this.w,s=a.globals.dom.Paper.polygon(t).attr({fill:i,stroke:e});return s}},{key:"drawCircle",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=this.w,a=i.globals.dom.Paper.circle(2*t);return null!==e&&a.attr(e),a}},{key:"drawPath",value:function(t){var e=t.d,i=void 0===e?"":e,a=t.stroke,s=void 0===a?"#a8a8a8":a,r=t.strokeWidth,n=void 0===r?1:r,o=t.fill,l=t.fillOpacity,h=void 0===l?1:l,c=t.strokeOpacity,d=void 0===c?1:c,g=t.classes,u=t.strokeLinecap,f=void 0===u?null:u,p=t.strokeDashArray,x=void 0===p?0:p,b=this.w;return null===f&&(f=b.config.stroke.lineCap),(i.indexOf("undefined")>-1||i.indexOf("NaN")>-1)&&(i="M 0 ".concat(b.globals.gridHeight)),b.globals.dom.Paper.path(i).attr({fill:o,"fill-opacity":h,stroke:s,"stroke-opacity":d,"stroke-linecap":f,"stroke-width":n,"stroke-dasharray":x,class:g})}},{key:"group",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=this.w,i=e.globals.dom.Paper.group();return null!==t&&i.attr(t),i}},{key:"move",value:function(t,e){var i=["M",t,e].join(" ");return i}},{key:"line",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,a=null;return null===i?a=["L",t,e].join(" "):"H"===i?a=["H",t].join(" "):"V"===i&&(a=["V",e].join(" ")),a}},{key:"curve",value:function(t,e,i,a,s,r){var n=["C",t,e,i,a,s,r].join(" ");return n}},{key:"quadraticCurve",value:function(t,e,i,a){return["Q",t,e,i,a].join(" ")}},{key:"arc",value:function(t,e,i,a,s,r,n){var o=arguments.length>7&&void 0!==arguments[7]&&arguments[7],l="A";o&&(l="a");var h=[l,t,e,i,a,s,r,n].join(" ");return h}},{key:"renderPaths",value:function(t){var e,i=t.j,a=t.realIndex,s=t.pathFrom,r=t.pathTo,o=t.stroke,l=t.strokeWidth,h=t.strokeLinecap,c=t.fill,d=t.animationDelay,g=t.initialSpeed,p=t.dataChangeSpeed,x=t.className,b=t.shouldClipToGrid,m=void 0===b||b,v=t.bindEventsOnPaths,y=void 0===v||v,w=t.drawShadow,k=void 0===w||w,A=this.w,S=new u(this.ctx),C=new f(this.ctx),L=this.w.config.chart.animations.enabled,P=L&&this.w.config.chart.animations.dynamicAnimation.enabled,T=!!(L&&!A.globals.resized||P&&A.globals.dataChanged&&A.globals.shouldAnimate);T?e=s:(e=r,A.globals.animationEnded=!0);var z=A.config.stroke.dashArray,I=0;I=Array.isArray(z)?z[a]:A.config.stroke.dashArray;var M=this.drawPath({d:e,stroke:o,strokeWidth:l,fill:c,fillOpacity:1,classes:x,strokeLinecap:h,strokeDashArray:I});if(M.attr("index",a),m&&M.attr({"clip-path":"url(#gridRectMask".concat(A.globals.cuid,")")}),"none"!==A.config.states.normal.filter.type)S.getDefaultFilter(M,a);else if(A.config.chart.dropShadow.enabled&&k&&(!A.config.chart.dropShadow.enabledOnSeries||A.config.chart.dropShadow.enabledOnSeries&&-1!==A.config.chart.dropShadow.enabledOnSeries.indexOf(a))){var X=A.config.chart.dropShadow;S.dropShadow(M,X,a)}y&&(M.node.addEventListener("mouseenter",this.pathMouseEnter.bind(this,M)),M.node.addEventListener("mouseleave",this.pathMouseLeave.bind(this,M)),M.node.addEventListener("mousedown",this.pathMouseDown.bind(this,M))),M.attr({pathTo:r,pathFrom:s});var E={el:M,j:i,realIndex:a,pathFrom:s,pathTo:r,fill:c,strokeWidth:l,delay:d};return!L||A.globals.resized||A.globals.dataChanged?!A.globals.resized&&A.globals.dataChanged||C.showDelayedElements():C.animatePathsGradually(n({},E,{speed:g})),A.globals.dataChanged&&P&&T&&C.animatePathsGradually(n({},E,{speed:p})),M}},{key:"drawPattern",value:function(t,e,i){var a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"#a8a8a8",s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,r=this.w,n=r.globals.dom.Paper.pattern(e,i,(function(r){"horizontalLines"===t?r.line(0,0,i,0).stroke({color:a,width:s+1}):"verticalLines"===t?r.line(0,0,0,e).stroke({color:a,width:s+1}):"slantedLines"===t?r.line(0,0,e,i).stroke({color:a,width:s}):"squares"===t?r.rect(e,i).fill("none").stroke({color:a,width:s}):"circles"===t&&r.circle(e).fill("none").stroke({color:a,width:s})}));return n}},{key:"drawGradient",value:function(t,e,i,a,s){var r,n=arguments.length>5&&void 0!==arguments[5]?arguments[5]:null,o=arguments.length>6&&void 0!==arguments[6]?arguments[6]:null,l=arguments.length>7&&void 0!==arguments[7]?arguments[7]:null,h=arguments.length>8&&void 0!==arguments[8]?arguments[8]:0,c=this.w;e=g.hexToRgba(e,a),i=g.hexToRgba(i,s);var d=0,u=1,f=1,p=null;null!==o&&(d=void 0!==o[0]?o[0]/100:0,u=void 0!==o[1]?o[1]/100:1,f=void 0!==o[2]?o[2]/100:1,p=void 0!==o[3]?o[3]/100:null);var x=!("donut"!==c.config.chart.type&&"pie"!==c.config.chart.type&&"bubble"!==c.config.chart.type);if(r=null===l||0===l.length?c.globals.dom.Paper.gradient(x?"radial":"linear",(function(t){t.at(d,e,a),t.at(u,i,s),t.at(f,i,s),null!==p&&t.at(p,e,a)})):c.globals.dom.Paper.gradient(x?"radial":"linear",(function(t){(Array.isArray(l[h])?l[h]:l).forEach((function(e){t.at(e.offset/100,e.color,e.opacity)}))})),x){var b=c.globals.gridWidth/2,m=c.globals.gridHeight/2;"bubble"!==c.config.chart.type?r.attr({gradientUnits:"userSpaceOnUse",cx:b,cy:m,r:n}):r.attr({cx:.5,cy:.5,r:.8,fx:.2,fy:.2})}else"vertical"===t?r.from(0,0).to(0,1):"diagonal"===t?r.from(0,0).to(1,1):"horizontal"===t?r.from(0,1).to(1,1):"diagonal2"===t&&r.from(1,0).to(0,1);return r}},{key:"drawText",value:function(t){var e,i=t.x,a=t.y,s=t.text,r=t.textAnchor,n=t.fontSize,o=t.fontFamily,l=t.fontWeight,h=t.foreColor,c=t.opacity,d=t.cssClass,g=void 0===d?"":d,u=t.isPlainText,f=void 0===u||u,p=this.w;return void 0===s&&(s=""),r||(r="start"),h&&h.length||(h=p.config.chart.foreColor),o=o||p.config.chart.fontFamily,l=l||"regular",(e=Array.isArray(s)?p.globals.dom.Paper.text((function(t){for(var e=0;e<s.length;e++)0===e?t.tspan(s[e]):t.tspan(s[e]).newLine()})):f?p.globals.dom.Paper.plain(s):p.globals.dom.Paper.text((function(t){return t.tspan(s)}))).attr({x:i,y:a,"text-anchor":r,"dominant-baseline":"auto","font-size":n,"font-family":o,"font-weight":l,fill:h,class:"apexcharts-text "+g}),e.node.style.fontFamily=o,e.node.style.opacity=c,e}},{key:"drawMarker",value:function(t,e,i){t=t||0;var a=i.pSize||0,s=null;if("square"===i.shape){var r=void 0===i.pRadius?a/2:i.pRadius;null!==e&&a||(a=0,r=0);var n=1.2*a+r,o=this.drawRect(n,n,n,n,r);o.attr({x:t-n/2,y:e-n/2,cx:t,cy:e,class:i.class?i.class:"",fill:i.pointFillColor,"fill-opacity":i.pointFillOpacity?i.pointFillOpacity:1,stroke:i.pointStrokeColor,"stroke-width":i.pWidth?i.pWidth:0,"stroke-opacity":i.pointStrokeOpacity?i.pointStrokeOpacity:1}),s=o}else"circle"!==i.shape&&i.shape||(g.isNumber(e)||(a=0,e=0),s=this.drawCircle(a,{cx:t,cy:e,class:i.class?i.class:"",stroke:i.pointStrokeColor,fill:i.pointFillColor,"fill-opacity":i.pointFillOpacity?i.pointFillOpacity:1,"stroke-width":i.pWidth?i.pWidth:0,"stroke-opacity":i.pointStrokeOpacity?i.pointStrokeOpacity:1}));return s}},{key:"pathMouseEnter",value:function(t,e){var i=this.w,a=new u(this.ctx),s=parseInt(t.node.getAttribute("index"),10),r=parseInt(t.node.getAttribute("j"),10);if("function"==typeof i.config.chart.events.dataPointMouseEnter&&i.config.chart.events.dataPointMouseEnter(e,this.ctx,{seriesIndex:s,dataPointIndex:r,w:i}),this.ctx.events.fireEvent("dataPointMouseEnter",[e,this.ctx,{seriesIndex:s,dataPointIndex:r,w:i}]),("none"===i.config.states.active.filter.type||"true"!==t.node.getAttribute("selected"))&&"none"!==i.config.states.hover.filter.type&&"none"!==i.config.states.active.filter.type&&!i.globals.isTouchDevice){var n=i.config.states.hover.filter;a.applyFilter(t,s,n.type,n.value)}}},{key:"pathMouseLeave",value:function(t,e){var i=this.w,a=new u(this.ctx),s=parseInt(t.node.getAttribute("index"),10),r=parseInt(t.node.getAttribute("j"),10);"function"==typeof i.config.chart.events.dataPointMouseLeave&&i.config.chart.events.dataPointMouseLeave(e,this.ctx,{seriesIndex:s,dataPointIndex:r,w:i}),this.ctx.events.fireEvent("dataPointMouseLeave",[e,this.ctx,{seriesIndex:s,dataPointIndex:r,w:i}]),"none"!==i.config.states.active.filter.type&&"true"===t.node.getAttribute("selected")||"none"!==i.config.states.hover.filter.type&&a.getDefaultFilter(t,s)}},{key:"pathMouseDown",value:function(t,e){var i=this.w,a=new u(this.ctx),s=parseInt(t.node.getAttribute("index"),10),r=parseInt(t.node.getAttribute("j"),10),n="false";if("true"===t.node.getAttribute("selected")){if(t.node.setAttribute("selected","false"),i.globals.selectedDataPoints[s].indexOf(r)>-1){var o=i.globals.selectedDataPoints[s].indexOf(r);i.globals.selectedDataPoints[s].splice(o,1)}}else{if(!i.config.states.active.allowMultipleDataPointsSelection&&i.globals.selectedDataPoints.length>0){i.globals.selectedDataPoints=[];var l=i.globals.dom.Paper.select(".apexcharts-series path").members,h=i.globals.dom.Paper.select(".apexcharts-series circle, .apexcharts-series rect").members,c=function(t){Array.prototype.forEach.call(t,(function(t){t.node.setAttribute("selected","false"),a.getDefaultFilter(t,s)}))};c(l),c(h)}t.node.setAttribute("selected","true"),n="true",void 0===i.globals.selectedDataPoints[s]&&(i.globals.selectedDataPoints[s]=[]),i.globals.selectedDataPoints[s].push(r)}if("true"===n){var d=i.config.states.active.filter;"none"!==d&&a.applyFilter(t,s,d.type,d.value)}else"none"!==i.config.states.active.filter.type&&a.getDefaultFilter(t,s);"function"==typeof i.config.chart.events.dataPointSelection&&i.config.chart.events.dataPointSelection(e,this.ctx,{selectedDataPoints:i.globals.selectedDataPoints,seriesIndex:s,dataPointIndex:r,w:i}),e&&this.ctx.events.fireEvent("dataPointSelection",[e,this.ctx,{selectedDataPoints:i.globals.selectedDataPoints,seriesIndex:s,dataPointIndex:r,w:i}])}},{key:"rotateAroundCenter",value:function(t){var e=t.getBBox();return{x:e.x+e.width/2,y:e.y+e.height/2}}},{key:"getTextRects",value:function(t,e,i,a){var s=!(arguments.length>4&&void 0!==arguments[4])||arguments[4],r=this.w,n=this.drawText({x:-200,y:-200,text:t,textAnchor:"start",fontSize:e,fontFamily:i,foreColor:"#fff",opacity:0});a&&n.attr("transform",a),r.globals.dom.Paper.add(n);var o=n.bbox();return s||(o=n.node.getBoundingClientRect()),n.remove(),{width:o.width,height:o.height}}},{key:"placeTextWithEllipsis",value:function(t,e,i){if("function"==typeof t.getComputedTextLength&&(t.textContent=e,e.length>0&&t.getComputedTextLength()>=i/.8)){for(var a=e.length-3;a>0;a-=3)if(t.getSubStringLength(0,a)<=i/.8)return void(t.textContent=e.substring(0,a)+"...");t.textContent="."}}}],[{key:"setAttrs",value:function(t,e){for(var i in e)e.hasOwnProperty(i)&&t.setAttribute(i,e[i])}}]),t}(),x=function(){function t(i){e(this,t),this.w=i.w,this.annoCtx=i}return a(t,[{key:"setOrientations",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=this.w;if("vertical"===t.label.orientation){var a=null!==e?e:0,s=i.globals.dom.baseEl.querySelector(".apexcharts-xaxis-annotations .apexcharts-xaxis-annotation-label[rel='".concat(a,"']"));if(null!==s){var r=s.getBoundingClientRect();s.setAttribute("x",parseFloat(s.getAttribute("x"))-r.height+4),"top"===t.label.position?s.setAttribute("y",parseFloat(s.getAttribute("y"))+r.width):s.setAttribute("y",parseFloat(s.getAttribute("y"))-r.width);var n=this.annoCtx.graphics.rotateAroundCenter(s),o=n.x,l=n.y;s.setAttribute("transform","rotate(-90 ".concat(o," ").concat(l,")"))}}}},{key:"addBackgroundToAnno",value:function(t,e){var i=this.w;if(!e.label.text||e.label.text&&!e.label.text.trim())return null;var a=i.globals.dom.baseEl.querySelector(".apexcharts-grid").getBoundingClientRect(),s=t.getBoundingClientRect(),r=e.label.style.padding.left,n=e.label.style.padding.right,o=e.label.style.padding.top,l=e.label.style.padding.bottom;"vertical"===e.label.orientation&&(o=e.label.style.padding.left,l=e.label.style.padding.right,r=e.label.style.padding.top,n=e.label.style.padding.bottom);var h=s.left-a.left-r,c=s.top-a.top-o,d=this.annoCtx.graphics.drawRect(h,c,s.width+r+n,s.height+o+l,0,e.label.style.background,1,e.label.borderWidth,e.label.borderColor,0);return e.id&&d.node.classList.add(e.id),d}},{key:"annotationsBackground",value:function(){var t=this,e=this.w,i=function(i,a,s){var r=e.globals.dom.baseEl.querySelector(".apexcharts-".concat(s,"-annotations .apexcharts-").concat(s,"-annotation-label[rel='").concat(a,"']"));if(r){var n=r.parentNode,o=t.addBackgroundToAnno(r,i);o&&n.insertBefore(o.node,r)}};e.config.annotations.xaxis.map((function(t,e){i(t,e,"xaxis")})),e.config.annotations.yaxis.map((function(t,e){i(t,e,"yaxis")})),e.config.annotations.points.map((function(t,e){i(t,e,"point")}))}},{key:"makeAnnotationDraggable",value:function(t,e,i){var a=this.w.config.annotations[e][i];t.draggable().on("dragend",(function(t){var e=t.target.getAttribute("x"),i=t.target.getAttribute("y"),s=t.target.getAttribute("cx"),r=t.target.getAttribute("cy");a.x=e,a.y=i,s&&r&&(a.x=s,a.y=r)})),t.node.addEventListener("mousedown",(function(e){e.stopPropagation(),t.selectize({pointSize:8,rotationPoint:!1,pointType:"rect"}),t.resize().on("resizedone",(function(t){var e=t.target.getAttribute("width"),i=t.target.getAttribute("height"),s=t.target.getAttribute("r");a.width=e,a.height=i,s&&(a.radius=s)}))}))}},{key:"getStringX",value:function(t){var e=this.w,i=t;e.config.xaxis.convertedCatToNumeric&&e.globals.categoryLabels.length&&(t=e.globals.categoryLabels.indexOf(t)+1);var a=e.globals.labels.indexOf(t),s=e.globals.dom.baseEl.querySelector(".apexcharts-xaxis-texts-g text:nth-child("+(a+1)+")");return s&&(i=parseFloat(s.getAttribute("x"))),i}}]),t}(),b=function(){function t(i){e(this,t),this.w=i.w,this.annoCtx=i,this.invertAxis=this.annoCtx.invertAxis}return a(t,[{key:"addXaxisAnnotation",value:function(t,e,i){var a=this.w,s=this.invertAxis?a.globals.minY:a.globals.minX,r=this.invertAxis?a.globals.maxY:a.globals.maxX,n=this.invertAxis?a.globals.yRange[0]:a.globals.xRange,o=(t.x-s)/(n/a.globals.gridWidth);this.annoCtx.inversedReversedAxis&&(o=(r-t.x)/(n/a.globals.gridWidth));var l=t.label.text;"category"!==a.config.xaxis.type&&!a.config.xaxis.convertedCatToNumeric||this.invertAxis||a.globals.dataFormatXNumeric||(o=this.annoCtx.helpers.getStringX(t.x));var h=t.strokeDashArray;if(g.isNumber(o)){if(null===t.x2||void 0===t.x2){var c=this.annoCtx.graphics.drawLine(o+t.offsetX,0+t.offsetY,o+t.offsetX,a.globals.gridHeight+t.offsetY,t.borderColor,h,t.borderWidth);e.appendChild(c.node),t.id&&c.node.classList.add(t.id)}else{var d=(t.x2-s)/(n/a.globals.gridWidth);if(this.annoCtx.inversedReversedAxis&&(d=(r-t.x2)/(n/a.globals.gridWidth)),"category"!==a.config.xaxis.type&&!a.config.xaxis.convertedCatToNumeric||this.invertAxis||a.globals.dataFormatXNumeric||(d=this.annoCtx.helpers.getStringX(t.x2)),d<o){var u=o;o=d,d=u}var f=this.annoCtx.graphics.drawRect(o+t.offsetX,0+t.offsetY,d-o,a.globals.gridHeight+t.offsetY,0,t.fillColor,t.opacity,1,t.borderColor,h);f.node.classList.add("apexcharts-annotation-rect"),f.attr("clip-path","url(#gridRectMask".concat(a.globals.cuid,")")),e.appendChild(f.node),t.id&&f.node.classList.add(t.id)}var p="top"===t.label.position?4:a.globals.gridHeight,x=this.annoCtx.graphics.getTextRects(l,parseFloat(t.label.style.fontSize)),b=this.annoCtx.graphics.drawText({x:o+t.label.offsetX,y:p+t.label.offsetY-("vertical"===t.label.orientation?"top"===t.label.position?x.width/2-12:-x.width/2:0),text:l,textAnchor:t.label.textAnchor,fontSize:t.label.style.fontSize,fontFamily:t.label.style.fontFamily,fontWeight:t.label.style.fontWeight,foreColor:t.label.style.color,cssClass:"apexcharts-xaxis-annotation-label ".concat(t.label.style.cssClass," ").concat(t.id?t.id:"")});b.attr({rel:i}),e.appendChild(b.node),this.annoCtx.helpers.setOrientations(t,i)}}},{key:"drawXAxisAnnotations",value:function(){var t=this,e=this.w,i=this.annoCtx.graphics.group({class:"apexcharts-xaxis-annotations"});return e.config.annotations.xaxis.map((function(e,a){t.addXaxisAnnotation(e,i.node,a)})),i}}]),t}(),m=function(){function t(i){e(this,t),this.w=i.w,this.annoCtx=i}return a(t,[{key:"addYaxisAnnotation",value:function(t,e,i){var a,s=this.w,r=t.strokeDashArray,n=this._getY1Y2("y1",t),o=t.label.text;if(null===t.y2||void 0===t.y2){var l=this.annoCtx.graphics.drawLine(0+t.offsetX,n+t.offsetY,s.globals.gridWidth+t.offsetX,n+t.offsetY,t.borderColor,r,t.borderWidth);e.appendChild(l.node),t.id&&l.node.classList.add(t.id)}else{if((a=this._getY1Y2("y2",t))>n){var h=n;n=a,a=h}var c=this.annoCtx.graphics.drawRect(0+t.offsetX,a+t.offsetY,s.globals.gridWidth+t.offsetX,n-a,0,t.fillColor,t.opacity,1,t.borderColor,r);c.node.classList.add("apexcharts-annotation-rect"),c.attr("clip-path","url(#gridRectMask".concat(s.globals.cuid,")")),e.appendChild(c.node),t.id&&c.node.classList.add(t.id)}var d="right"===t.label.position?s.globals.gridWidth:0,g=this.annoCtx.graphics.drawText({x:d+t.label.offsetX,y:(a||n)+t.label.offsetY-3,text:o,textAnchor:t.label.textAnchor,fontSize:t.label.style.fontSize,fontFamily:t.label.style.fontFamily,fontWeight:t.label.style.fontWeight,foreColor:t.label.style.color,cssClass:"apexcharts-yaxis-annotation-label ".concat(t.label.style.cssClass," ").concat(t.id?t.id:"")});g.attr({rel:i}),e.appendChild(g.node)}},{key:"_getY1Y2",value:function(t,e){var i,a="y1"===t?e.y:e.y2,s=this.w;if(this.annoCtx.invertAxis){var r=s.globals.labels.indexOf(a);s.config.xaxis.convertedCatToNumeric&&(r=s.globals.categoryLabels.indexOf(a));var n=s.globals.dom.baseEl.querySelector(".apexcharts-yaxis-texts-g text:nth-child("+(r+1)+")");n&&(i=parseFloat(n.getAttribute("y")))}else i=s.globals.gridHeight-(a-s.globals.minYArr[e.yAxisIndex])/(s.globals.yRange[e.yAxisIndex]/s.globals.gridHeight),s.config.yaxis[e.yAxisIndex]&&s.config.yaxis[e.yAxisIndex].reversed&&(i=(a-s.globals.minYArr[e.yAxisIndex])/(s.globals.yRange[e.yAxisIndex]/s.globals.gridHeight));return i}},{key:"drawYAxisAnnotations",value:function(){var t=this,e=this.w,i=this.annoCtx.graphics.group({class:"apexcharts-yaxis-annotations"});return e.config.annotations.yaxis.map((function(e,a){t.addYaxisAnnotation(e,i.node,a)})),i}}]),t}(),v=function(){function t(i){e(this,t),this.w=i.w,this.annoCtx=i}return a(t,[{key:"addPointAnnotation",value:function(t,e,i){var a=this.w,s=0,r=0,n=0;if(this.annoCtx.invertAxis&&console.warn("Point annotation is not supported in horizontal bar charts."),"string"==typeof t.x){var o=a.globals.labels.indexOf(t.x);a.config.xaxis.convertedCatToNumeric&&(o=a.globals.categoryLabels.indexOf(t.x)),s=this.annoCtx.helpers.getStringX(t.x);var l=t.y;null===t.y&&(l=a.globals.series[t.seriesIndex][o]),r=a.globals.gridHeight-(l-a.globals.minYArr[t.yAxisIndex])/(a.globals.yRange[t.yAxisIndex]/a.globals.gridHeight)-parseFloat(t.label.style.fontSize)-t.marker.size,n=a.globals.gridHeight-(l-a.globals.minYArr[t.yAxisIndex])/(a.globals.yRange[t.yAxisIndex]/a.globals.gridHeight),a.config.yaxis[t.yAxisIndex]&&a.config.yaxis[t.yAxisIndex].reversed&&(r=(l-a.globals.minYArr[t.yAxisIndex])/(a.globals.yRange[t.yAxisIndex]/a.globals.gridHeight)+parseFloat(t.label.style.fontSize)+t.marker.size,n=(l-a.globals.minYArr[t.yAxisIndex])/(a.globals.yRange[t.yAxisIndex]/a.globals.gridHeight))}else s=(t.x-a.globals.minX)/(a.globals.xRange/a.globals.gridWidth),r=a.globals.gridHeight-(parseFloat(t.y)-a.globals.minYArr[t.yAxisIndex])/(a.globals.yRange[t.yAxisIndex]/a.globals.gridHeight)-parseFloat(t.label.style.fontSize)-t.marker.size,n=a.globals.gridHeight-(t.y-a.globals.minYArr[t.yAxisIndex])/(a.globals.yRange[t.yAxisIndex]/a.globals.gridHeight),a.config.yaxis[t.yAxisIndex]&&a.config.yaxis[t.yAxisIndex].reversed&&(r=(parseFloat(t.y)-a.globals.minYArr[t.yAxisIndex])/(a.globals.yRange[t.yAxisIndex]/a.globals.gridHeight)-parseFloat(t.label.style.fontSize)-t.marker.size,n=(t.y-a.globals.minYArr[t.yAxisIndex])/(a.globals.yRange[t.yAxisIndex]/a.globals.gridHeight));if(g.isNumber(s)){var h={pSize:t.marker.size,pWidth:t.marker.strokeWidth,pointFillColor:t.marker.fillColor,pointStrokeColor:t.marker.strokeColor,shape:t.marker.shape,pRadius:t.marker.radius,class:"apexcharts-point-annotation-marker ".concat(t.marker.cssClass," ").concat(t.id?t.id:"")},c=this.annoCtx.graphics.drawMarker(s+t.marker.offsetX,n+t.marker.offsetY,h);e.appendChild(c.node);var d=t.label.text?t.label.text:"",u=this.annoCtx.graphics.drawText({x:s+t.label.offsetX,y:r+t.label.offsetY,text:d,textAnchor:t.label.textAnchor,fontSize:t.label.style.fontSize,fontFamily:t.label.style.fontFamily,fontWeight:t.label.style.fontWeight,foreColor:t.label.style.color,cssClass:"apexcharts-point-annotation-label ".concat(t.label.style.cssClass," ").concat(t.id?t.id:"")});if(u.attr({rel:i}),e.appendChild(u.node),t.customSVG.SVG){var f=this.annoCtx.graphics.group({class:"apexcharts-point-annotations-custom-svg "+t.customSVG.cssClass});f.attr({transform:"translate(".concat(s+t.customSVG.offsetX,", ").concat(r+t.customSVG.offsetY,")")}),f.node.innerHTML=t.customSVG.SVG,e.appendChild(f.node)}if(t.image.path){var p=t.image.width?t.image.width:20,x=t.image.height?t.image.height:20;this.annoCtx.addImage({x:s+t.image.offsetX-p/2,y:r+t.image.offsetY-x/2,width:p,height:x,path:t.image.path,appendTo:e})}}}},{key:"drawPointAnnotations",value:function(){var t=this,e=this.w,i=this.annoCtx.graphics.group({class:"apexcharts-point-annotations"});return e.config.annotations.points.map((function(e,a){t.addPointAnnotation(e,i.node,a)})),i}}]),t}();var y,w,k={name:"en",options:{months:["January","February","March","April","May","June","July","August","September","October","November","December"],shortMonths:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],days:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],shortDays:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],toolbar:{exportToSVG:"Download SVG",exportToPNG:"Download PNG",exportToCSV:"Download CSV",menu:"Menu",selection:"Selection",selectionZoom:"Selection Zoom",zoomIn:"Zoom In",zoomOut:"Zoom Out",pan:"Panning",reset:"Reset Zoom"}}},A=function(){function t(){e(this,t),this.yAxis={show:!0,showAlways:!1,showForNullSeries:!0,seriesName:void 0,opposite:!1,reversed:!1,logarithmic:!1,tickAmount:void 0,forceNiceScale:!1,max:void 0,min:void 0,floating:!1,decimalsInFloat:void 0,labels:{show:!0,minWidth:0,maxWidth:160,offsetX:0,offsetY:0,align:void 0,rotate:0,padding:20,style:{colors:[],fontSize:"11px",fontWeight:400,fontFamily:void 0,cssClass:""},formatter:void 0},axisBorder:{show:!1,color:"#e0e0e0",width:1,offsetX:0,offsetY:0},axisTicks:{show:!1,color:"#e0e0e0",width:6,offsetX:0,offsetY:0},title:{text:void 0,rotate:90,offsetY:0,offsetX:0,style:{color:void 0,fontSize:"11px",fontWeight:900,fontFamily:void 0,cssClass:""}},tooltip:{enabled:!1,offsetX:0},crosshairs:{show:!0,position:"front",stroke:{color:"#b6b6b6",width:1,dashArray:0}}},this.pointAnnotation={x:0,y:null,yAxisIndex:0,seriesIndex:0,marker:{size:4,fillColor:"#fff",strokeWidth:2,strokeColor:"#333",shape:"circle",offsetX:0,offsetY:0,radius:2,cssClass:""},label:{borderColor:"#c2c2c2",borderWidth:1,text:void 0,textAnchor:"middle",offsetX:0,offsetY:-15,style:{background:"#fff",color:void 0,fontSize:"11px",fontFamily:void 0,fontWeight:400,cssClass:"",padding:{left:5,right:5,top:2,bottom:2}}},customSVG:{SVG:void 0,cssClass:void 0,offsetX:0,offsetY:0},image:{path:void 0,width:20,height:20,offsetX:0,offsetY:0}},this.yAxisAnnotation={y:0,y2:null,strokeDashArray:1,fillColor:"#c2c2c2",borderColor:"#c2c2c2",borderWidth:1,opacity:.3,offsetX:0,offsetY:0,yAxisIndex:0,label:{borderColor:"#c2c2c2",borderWidth:1,text:void 0,textAnchor:"end",position:"right",offsetX:0,offsetY:-3,style:{background:"#fff",color:void 0,fontSize:"11px",fontFamily:void 0,fontWeight:400,cssClass:"",padding:{left:5,right:5,top:2,bottom:2}}}},this.xAxisAnnotation={x:0,x2:null,strokeDashArray:1,fillColor:"#c2c2c2",borderColor:"#c2c2c2",borderWidth:1,opacity:.3,offsetX:0,offsetY:0,label:{borderColor:"#c2c2c2",borderWidth:1,text:void 0,textAnchor:"middle",orientation:"vertical",position:"top",offsetX:0,offsetY:0,style:{background:"#fff",color:void 0,fontSize:"11px",fontFamily:void 0,fontWeight:400,cssClass:"",padding:{left:5,right:5,top:2,bottom:2}}}},this.text={x:0,y:0,text:"",textAnchor:"start",foreColor:void 0,fontSize:"13px",fontFamily:void 0,fontWeight:400,appendTo:".apexcharts-annotations",backgroundColor:"transparent",borderColor:"#c2c2c2",borderRadius:0,borderWidth:0,paddingLeft:4,paddingRight:4,paddingTop:2,paddingBottom:2},this.shape={x:0,y:0,type:"rect",width:"100%",height:50,appendTo:".apexcharts-annotations",backgroundColor:"#fff",opacity:1,borderWidth:0,borderRadius:4,borderColor:"#c2c2c2"}}return a(t,[{key:"init",value:function(){return{annotations:{position:"front",yaxis:[this.yAxisAnnotation],xaxis:[this.xAxisAnnotation],points:[this.pointAnnotation],texts:[],images:[],shapes:[]},chart:{animations:{enabled:!0,easing:"easeinout",speed:800,animateGradually:{delay:150,enabled:!0},dynamicAnimation:{enabled:!0,speed:350}},background:"transparent",locales:[k],defaultLocale:"en",dropShadow:{enabled:!1,enabledOnSeries:void 0,top:2,left:2,blur:4,color:"#000",opacity:.35},events:{animationEnd:void 0,beforeMount:void 0,mounted:void 0,updated:void 0,click:void 0,mouseMove:void 0,legendClick:void 0,markerClick:void 0,selection:void 0,dataPointSelection:void 0,dataPointMouseEnter:void 0,dataPointMouseLeave:void 0,beforeZoom:void 0,zoomed:void 0,scrolled:void 0},foreColor:"#373d3f",fontFamily:"Helvetica, Arial, sans-serif",height:"auto",parentHeightOffset:15,redrawOnParentResize:!0,id:void 0,group:void 0,offsetX:0,offsetY:0,selection:{enabled:!1,type:"x",fill:{color:"#24292e",opacity:.1},stroke:{width:1,color:"#24292e",opacity:.4,dashArray:3},xaxis:{min:void 0,max:void 0},yaxis:{min:void 0,max:void 0}},sparkline:{enabled:!1},brush:{enabled:!1,autoScaleYaxis:!0,target:void 0},stacked:!1,stackType:"normal",toolbar:{show:!0,offsetX:0,offsetY:0,tools:{download:!0,selection:!0,zoom:!0,zoomin:!0,zoomout:!0,pan:!0,reset:!0,customIcons:[]},autoSelected:"zoom"},type:"line",width:"100%",zoom:{enabled:!0,type:"x",autoScaleYaxis:!1,zoomedArea:{fill:{color:"#90CAF9",opacity:.4},stroke:{color:"#0D47A1",opacity:.4,width:1}}}},plotOptions:{bar:{horizontal:!1,columnWidth:"70%",barHeight:"70%",distributed:!1,startingShape:"flat",endingShape:"flat",colors:{ranges:[],backgroundBarColors:[],backgroundBarOpacity:1,backgroundBarRadius:0},dataLabels:{position:"top",maxItems:100,hideOverflowingLabels:!0,orientation:"horizontal"}},bubble:{minBubbleRadius:void 0,maxBubbleRadius:void 0},candlestick:{colors:{upward:"#00B746",downward:"#EF403C"},wick:{useFillColor:!0}},heatmap:{radius:2,enableShades:!0,shadeIntensity:.5,reverseNegativeShade:!1,distributed:!1,useFillColorAsStroke:!1,colorScale:{inverse:!1,ranges:[],min:void 0,max:void 0}},radialBar:{inverseOrder:!1,startAngle:0,endAngle:360,offsetX:0,offsetY:0,hollow:{margin:5,size:"50%",background:"transparent",image:void 0,imageWidth:150,imageHeight:150,imageOffsetX:0,imageOffsetY:0,imageClipped:!0,position:"front",dropShadow:{enabled:!1,top:0,left:0,blur:3,color:"#000",opacity:.5}},track:{show:!0,startAngle:void 0,endAngle:void 0,background:"#f2f2f2",strokeWidth:"97%",opacity:1,margin:5,dropShadow:{enabled:!1,top:0,left:0,blur:3,color:"#000",opacity:.5}},dataLabels:{show:!0,name:{show:!0,fontSize:"16px",fontFamily:void 0,fontWeight:600,color:void 0,offsetY:0,formatter:function(t){return t}},value:{show:!0,fontSize:"14px",fontFamily:void 0,fontWeight:400,color:void 0,offsetY:16,formatter:function(t){return t+"%"}},total:{show:!1,label:"Total",fontSize:"16px",fontWeight:600,fontFamily:void 0,color:void 0,formatter:function(t){return t.globals.seriesTotals.reduce((function(t,e){return t+e}),0)/t.globals.series.length+"%"}}}},pie:{customScale:1,offsetX:0,offsetY:0,expandOnClick:!0,dataLabels:{offset:0,minAngleToShowLabel:10},donut:{size:"65%",background:"transparent",labels:{show:!1,name:{show:!0,fontSize:"16px",fontFamily:void 0,fontWeight:600,color:void 0,offsetY:-10,formatter:function(t){return t}},value:{show:!0,fontSize:"20px",fontFamily:void 0,fontWeight:400,color:void 0,offsetY:10,formatter:function(t){return t}},total:{show:!1,showAlways:!1,label:"Total",fontSize:"16px",fontWeight:400,fontFamily:void 0,color:void 0,formatter:function(t){return t.globals.seriesTotals.reduce((function(t,e){return t+e}),0)}}}}},radar:{size:void 0,offsetX:0,offsetY:0,polygons:{strokeColors:"#e8e8e8",connectorColors:"#e8e8e8",fill:{colors:void 0}}}},colors:void 0,dataLabels:{enabled:!0,enabledOnSeries:void 0,formatter:function(t){return null!==t?t:""},textAnchor:"middle",distributed:!1,offsetX:0,offsetY:0,style:{fontSize:"12px",fontFamily:void 0,fontWeight:600,colors:void 0},background:{enabled:!0,foreColor:"#fff",borderRadius:2,padding:4,opacity:.9,borderWidth:1,borderColor:"#fff",dropShadow:{enabled:!1,top:1,left:1,blur:1,color:"#000",opacity:.45}},dropShadow:{enabled:!1,top:1,left:1,blur:1,color:"#000",opacity:.45}},fill:{type:"solid",colors:void 0,opacity:.85,gradient:{shade:"dark",type:"horizontal",shadeIntensity:.5,gradientToColors:void 0,inverseColors:!0,opacityFrom:1,opacityTo:1,stops:[0,50,100],colorStops:[]},image:{src:[],width:void 0,height:void 0},pattern:{style:"squares",width:6,height:6,strokeWidth:2}},grid:{show:!0,borderColor:"#e0e0e0",strokeDashArray:0,position:"back",xaxis:{lines:{show:!1}},yaxis:{lines:{show:!0}},row:{colors:void 0,opacity:.5},column:{colors:void 0,opacity:.5},padding:{top:0,right:10,bottom:0,left:12}},labels:[],legend:{show:!0,showForSingleSeries:!1,showForNullSeries:!0,showForZeroSeries:!0,floating:!1,position:"bottom",horizontalAlign:"center",inverseOrder:!1,fontSize:"12px",fontFamily:void 0,fontWeight:400,width:void 0,height:void 0,formatter:void 0,tooltipHoverFormatter:void 0,offsetX:-20,offsetY:0,labels:{colors:void 0,useSeriesColors:!1},markers:{width:12,height:12,strokeWidth:0,fillColors:void 0,strokeColor:"#fff",radius:12,customHTML:void 0,offsetX:0,offsetY:0,onClick:void 0},itemMargin:{horizontal:5,vertical:0},onItemClick:{toggleDataSeries:!0},onItemHover:{highlightDataSeries:!0}},markers:{discrete:[],size:0,colors:void 0,strokeColors:"#fff",strokeWidth:2,strokeOpacity:.9,strokeDashArray:0,fillOpacity:1,shape:"circle",radius:2,offsetX:0,offsetY:0,onClick:void 0,onDblClick:void 0,showNullDataPoints:!0,hover:{size:void 0,sizeOffset:3}},noData:{text:void 0,align:"center",verticalAlign:"middle",offsetX:0,offsetY:0,style:{color:void 0,fontSize:"14px",fontFamily:void 0}},responsive:[],series:void 0,states:{normal:{filter:{type:"none",value:0}},hover:{filter:{type:"lighten",value:.15}},active:{allowMultipleDataPointsSelection:!1,filter:{type:"darken",value:.65}}},title:{text:void 0,align:"left",margin:5,offsetX:0,offsetY:0,floating:!1,style:{fontSize:"14px",fontWeight:900,fontFamily:void 0,color:void 0}},subtitle:{text:void 0,align:"left",margin:5,offsetX:0,offsetY:30,floating:!1,style:{fontSize:"12px",fontWeight:400,fontFamily:void 0,color:void 0}},stroke:{show:!0,curve:"smooth",lineCap:"butt",width:2,colors:void 0,dashArray:0},tooltip:{enabled:!0,enabledOnSeries:void 0,shared:!0,followCursor:!1,intersect:!1,inverseOrder:!1,custom:void 0,fillSeriesColor:!1,theme:"light",style:{fontSize:"12px",fontFamily:void 0},onDatasetHover:{highlightDataSeries:!1},x:{show:!0,format:"dd MMM",formatter:void 0},y:{formatter:void 0,title:{formatter:function(t){return t}}},z:{formatter:void 0,title:"Size: "},marker:{show:!0,fillColors:void 0},items:{display:"flex"},fixed:{enabled:!1,position:"topRight",offsetX:0,offsetY:0}},xaxis:{type:"category",categories:[],convertedCatToNumeric:!1,offsetX:0,offsetY:0,labels:{show:!0,rotate:-45,rotateAlways:!1,hideOverlappingLabels:!0,trim:!1,minHeight:void 0,maxHeight:120,showDuplicates:!0,style:{colors:[],fontSize:"12px",fontWeight:400,fontFamily:void 0,cssClass:""},offsetX:0,offsetY:0,format:void 0,formatter:void 0,datetimeUTC:!0,datetimeFormatter:{year:"yyyy",month:"MMM 'yy",day:"dd MMM",hour:"HH:mm",minute:"HH:mm:ss"}},axisBorder:{show:!0,color:"#e0e0e0",width:"100%",height:1,offsetX:0,offsetY:0},axisTicks:{show:!0,color:"#e0e0e0",height:6,offsetX:0,offsetY:0},tickAmount:void 0,tickPlacement:"on",min:void 0,max:void 0,range:void 0,floating:!1,position:"bottom",title:{text:void 0,offsetX:0,offsetY:0,style:{color:void 0,fontSize:"12px",fontWeight:900,fontFamily:void 0,cssClass:""}},crosshairs:{show:!0,width:1,position:"back",opacity:.9,stroke:{color:"#b6b6b6",width:1,dashArray:3},fill:{type:"solid",color:"#B1B9C4",gradient:{colorFrom:"#D8E3F0",colorTo:"#BED1E6",stops:[0,100],opacityFrom:.4,opacityTo:.5}},dropShadow:{enabled:!1,left:0,top:0,blur:1,opacity:.4}},tooltip:{enabled:!0,offsetY:0,formatter:void 0,style:{fontSize:"12px",fontFamily:void 0}}},yaxis:this.yAxis,theme:{mode:"light",palette:"palette1",monochrome:{enabled:!1,color:"#008FFB",shadeTo:"light",shadeIntensity:.65}}}}}]),t}(),S=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.graphics=new p(this.ctx),this.w.globals.isBarHorizontal&&(this.invertAxis=!0),this.helpers=new x(this),this.xAxisAnnotations=new b(this),this.yAxisAnnotations=new m(this),this.pointsAnnotations=new v(this),this.w.globals.isBarHorizontal&&this.w.config.yaxis[0].reversed&&(this.inversedReversedAxis=!0),this.xDivision=this.w.globals.gridWidth/this.w.globals.dataPoints}return a(t,[{key:"drawAxesAnnotations",value:function(){var t=this.w;if(t.globals.axisCharts){for(var e=this.yAxisAnnotations.drawYAxisAnnotations(),i=this.xAxisAnnotations.drawXAxisAnnotations(),a=this.pointsAnnotations.drawPointAnnotations(),s=t.config.chart.animations.enabled,r=[e,i,a],n=[i.node,e.node,a.node],o=0;o<3;o++)t.globals.dom.elGraphical.add(r[o]),!s||t.globals.resized||t.globals.dataChanged||"scatter"!==t.config.chart.type&&"bubble"!==t.config.chart.type&&t.globals.dataPoints>1&&n[o].classList.add("apexcharts-element-hidden"),t.globals.delayedElements.push({el:n[o],index:0});this.helpers.annotationsBackground()}}},{key:"drawShapeAnnos",value:function(){var t=this;this.w.config.annotations.shapes.map((function(e,i){t.addShape(e,i)}))}},{key:"drawImageAnnos",value:function(){var t=this;this.w.config.annotations.images.map((function(e,i){t.addImage(e,i)}))}},{key:"drawTextAnnos",value:function(){var t=this;this.w.config.annotations.texts.map((function(e,i){t.addText(e,i)}))}},{key:"addXaxisAnnotation",value:function(t,e,i){this.xAxisAnnotations.addXaxisAnnotation(t,e,i)}},{key:"addYaxisAnnotation",value:function(t,e,i){this.yAxisAnnotations.addYaxisAnnotation(t,e,i)}},{key:"addPointAnnotation",value:function(t,e,i){this.pointsAnnotations.addPointAnnotation(t,e,i)}},{key:"addText",value:function(t,e){var i=t.x,a=t.y,s=t.text,r=t.textAnchor,n=t.foreColor,o=t.fontSize,l=t.fontFamily,h=t.fontWeight,c=t.cssClass,d=t.backgroundColor,g=t.borderWidth,u=t.strokeDashArray,f=t.borderRadius,p=t.borderColor,x=t.appendTo,b=void 0===x?".apexcharts-annotations":x,m=t.paddingLeft,v=void 0===m?4:m,y=t.paddingRight,w=void 0===y?4:y,k=t.paddingBottom,A=void 0===k?2:k,S=t.paddingTop,C=void 0===S?2:S,L=this.w,P=this.graphics.drawText({x:i,y:a,text:s,textAnchor:r||"start",fontSize:o||"12px",fontWeight:h||"regular",fontFamily:l||L.config.chart.fontFamily,foreColor:n||L.config.chart.foreColor,cssClass:c}),T=L.globals.dom.baseEl.querySelector(b);T&&T.appendChild(P.node);var z=P.bbox();if(t.draggable&&this.helpers.makeAnnotationDraggable(P,"texts",e),s){var I=this.graphics.drawRect(z.x-v,z.y-C,z.width+v+w,z.height+A+C,f,d||"transparent",1,g,p,u);T.insertBefore(I.node,P.node)}}},{key:"addShape",value:function(t,e){var i={type:t.type,x:t.x||0,y:t.y||0,width:t.width||"100%",height:t.height||50,circleRadius:t.radius||25,backgroundColor:t.backgroundColor||"#fff",opacity:t.opacity||1,borderWidth:t.borderWidth||0,borderRadius:t.borderRadius||4,borderColor:t.borderColor||"#c2c2c2",appendTo:t.appendTo||".apexcharts-annotations"},a=this.w;String(i.width).indexOf("%")>-1&&(i.width=parseInt(i.width,10)*parseInt(a.globals.svgWidth,10)/100);var s=null;s="circle"===i.type?this.graphics.drawCircle(i.circleRadius,{fill:i.backgroundColor,stroke:i.borderColor,"stroke-width":i.borderWidth,opacity:i.opacity,cx:i.x,cy:i.y}):this.graphics.drawRect(i.x,i.y,i.width,i.height,i.borderRadius,i.backgroundColor,i.opacity,i.borderWidth,i.borderColor);var r=a.globals.dom.baseEl.querySelector(i.appendTo);r&&r.appendChild(s.node),t.draggable&&(this.helpers.makeAnnotationDraggable(s,"shapes",e),s.node.classList.add("apexcharts-resizable-element"))}},{key:"addImage",value:function(t,e){var i=this.w,a=t.path,s=t.x,r=void 0===s?0:s,n=t.y,o=void 0===n?0:n,l=t.width,h=void 0===l?20:l,c=t.height,d=void 0===c?20:c,g=t.appendTo,u=void 0===g?".apexcharts-annotations":g,f=i.globals.dom.Paper.image(a);f.size(h,d).move(r,o);var p=i.globals.dom.baseEl.querySelector(u);p&&p.appendChild(f.node),t.draggable&&(this.helpers.makeAnnotationDraggable(f,"images",e),f.node.classList.add("apexcharts-resizable-element"))}},{key:"addXaxisAnnotationExternal",value:function(t,e,i){return this.addAnnotationExternal({params:t,pushToMemory:e,context:i,type:"xaxis",contextMethod:i.addXaxisAnnotation}),i}},{key:"addYaxisAnnotationExternal",value:function(t,e,i){return this.addAnnotationExternal({params:t,pushToMemory:e,context:i,type:"yaxis",contextMethod:i.addYaxisAnnotation}),i}},{key:"addPointAnnotationExternal",value:function(t,e,i){return void 0===this.invertAxis&&(this.invertAxis=i.w.globals.isBarHorizontal),this.addAnnotationExternal({params:t,pushToMemory:e,context:i,type:"point",contextMethod:i.addPointAnnotation}),i}},{key:"addAnnotationExternal",value:function(t){var e=t.params,i=t.pushToMemory,a=t.context,s=t.type,r=t.contextMethod,n=a,o=n.w,l=o.globals.dom.baseEl.querySelector(".apexcharts-".concat(s,"-annotations")),h=l.childNodes.length+1,c=new A,d=Object.assign({},"xaxis"===s?c.xAxisAnnotation:"yaxis"===s?c.yAxisAnnotation:c.pointAnnotation),u=g.extend(d,e);switch(s){case"xaxis":this.addXaxisAnnotation(u,l,h);break;case"yaxis":this.addYaxisAnnotation(u,l,h);break;case"point":this.addPointAnnotation(u,l,h)}var f=o.globals.dom.baseEl.querySelector(".apexcharts-".concat(s,"-annotations .apexcharts-").concat(s,"-annotation-label[rel='").concat(h,"']")),p=this.helpers.addBackgroundToAnno(f,u);return p&&l.insertBefore(p.node,f),i&&o.globals.memory.methodsToExec.push({context:n,id:u.id?u.id:g.randomId(),method:r,label:"addAnnotation",params:e}),a}},{key:"clearAnnotations",value:function(t){var e=t.w,i=e.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxis-annotations, .apexcharts-xaxis-annotations, .apexcharts-point-annotations");e.globals.memory.methodsToExec.map((function(t,i){"addText"!==t.label&&"addAnnotation"!==t.label||e.globals.memory.methodsToExec.splice(i,1)})),i=g.listToArray(i),Array.prototype.forEach.call(i,(function(t){for(;t.firstChild;)t.removeChild(t.firstChild)}))}},{key:"removeAnnotation",value:function(t,e){var i=t.w,a=i.globals.dom.baseEl.querySelectorAll(".".concat(e));a&&(i.globals.memory.methodsToExec.map((function(t,a){t.id===e&&i.globals.memory.methodsToExec.splice(a,1)})),Array.prototype.forEach.call(a,(function(t){t.parentElement.removeChild(t)})))}}]),t}(),C=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.months31=[1,3,5,7,8,10,12],this.months30=[2,4,6,9,11],this.daysCntOfYear=[0,31,59,90,120,151,181,212,243,273,304,334]}return a(t,[{key:"isValidDate",value:function(t){return!isNaN(this.parseDate(t))}},{key:"getTimeStamp",value:function(t){return Date.parse(t)?this.w.config.xaxis.labels.datetimeUTC?new Date(new Date(t).toISOString().substr(0,25)).getTime():new Date(t).getTime():t}},{key:"getDate",value:function(t){return this.w.config.xaxis.labels.datetimeUTC?new Date(new Date(t).toUTCString()):new Date(t)}},{key:"parseDate",value:function(t){var e=Date.parse(t);if(!isNaN(e))return this.getTimeStamp(t);var i=Date.parse(t.replace(/-/g,"/").replace(/[a-z]+/gi," "));return i=this.getTimeStamp(i)}},{key:"formatDate",value:function(t,e){var i=this.w.globals.locale,a=this.w.config.xaxis.labels.datetimeUTC,s=["\0"].concat(d(i.months)),r=["\x01"].concat(d(i.shortMonths)),n=["\x02"].concat(d(i.days)),o=["\x03"].concat(d(i.shortDays));function l(t,e){var i=t+"";for(e=e||2;i.length<e;)i="0"+i;return i}var h=a?t.getUTCFullYear():t.getFullYear();e=(e=(e=e.replace(/(^|[^\\])yyyy+/g,"$1"+h)).replace(/(^|[^\\])yy/g,"$1"+h.toString().substr(2,2))).replace(/(^|[^\\])y/g,"$1"+h);var c=(a?t.getUTCMonth():t.getMonth())+1;e=(e=(e=(e=e.replace(/(^|[^\\])MMMM+/g,"$1"+s[0])).replace(/(^|[^\\])MMM/g,"$1"+r[0])).replace(/(^|[^\\])MM/g,"$1"+l(c))).replace(/(^|[^\\])M/g,"$1"+c);var g=a?t.getUTCDate():t.getDate();e=(e=(e=(e=e.replace(/(^|[^\\])dddd+/g,"$1"+n[0])).replace(/(^|[^\\])ddd/g,"$1"+o[0])).replace(/(^|[^\\])dd/g,"$1"+l(g))).replace(/(^|[^\\])d/g,"$1"+g);var u=a?t.getUTCHours():t.getHours(),f=u>12?u-12:0===u?12:u;e=(e=(e=(e=e.replace(/(^|[^\\])HH+/g,"$1"+l(u))).replace(/(^|[^\\])H/g,"$1"+u)).replace(/(^|[^\\])hh+/g,"$1"+l(f))).replace(/(^|[^\\])h/g,"$1"+f);var p=a?t.getUTCMinutes():t.getMinutes();e=(e=e.replace(/(^|[^\\])mm+/g,"$1"+l(p))).replace(/(^|[^\\])m/g,"$1"+p);var x=a?t.getUTCSeconds():t.getSeconds();e=(e=e.replace(/(^|[^\\])ss+/g,"$1"+l(x))).replace(/(^|[^\\])s/g,"$1"+x);var b=a?t.getUTCMilliseconds():t.getMilliseconds();e=e.replace(/(^|[^\\])fff+/g,"$1"+l(b,3)),b=Math.round(b/10),e=e.replace(/(^|[^\\])ff/g,"$1"+l(b)),b=Math.round(b/10);var m=u<12?"AM":"PM";e=(e=(e=e.replace(/(^|[^\\])f/g,"$1"+b)).replace(/(^|[^\\])TT+/g,"$1"+m)).replace(/(^|[^\\])T/g,"$1"+m.charAt(0));var v=m.toLowerCase();e=(e=e.replace(/(^|[^\\])tt+/g,"$1"+v)).replace(/(^|[^\\])t/g,"$1"+v.charAt(0));var y=-t.getTimezoneOffset(),w=a||!y?"Z":y>0?"+":"-";if(!a){var k=(y=Math.abs(y))%60;w+=l(Math.floor(y/60))+":"+l(k)}e=e.replace(/(^|[^\\])K/g,"$1"+w);var A=(a?t.getUTCDay():t.getDay())+1;return e=(e=(e=(e=(e=e.replace(new RegExp(n[0],"g"),n[A])).replace(new RegExp(o[0],"g"),o[A])).replace(new RegExp(s[0],"g"),s[c])).replace(new RegExp(r[0],"g"),r[c])).replace(/\\(.)/g,"$1")}},{key:"getTimeUnitsfromTimestamp",value:function(t,e,i){var a=this.w;void 0!==a.config.xaxis.min&&(t=a.config.xaxis.min),void 0!==a.config.xaxis.max&&(e=a.config.xaxis.max);var s=this.getDate(t),r=this.getDate(e),n=this.formatDate(s,"yyyy MM dd HH mm").split(" "),o=this.formatDate(r,"yyyy MM dd HH mm").split(" ");return{minMinute:parseInt(n[4],10),maxMinute:parseInt(o[4],10),minHour:parseInt(n[3],10),maxHour:parseInt(o[3],10),minDate:parseInt(n[2],10),maxDate:parseInt(o[2],10),minMonth:parseInt(n[1],10)-1,maxMonth:parseInt(o[1],10)-1,minYear:parseInt(n[0],10),maxYear:parseInt(o[0],10)}}},{key:"isLeapYear",value:function(t){return t%4==0&&t%100!=0||t%400==0}},{key:"calculcateLastDaysOfMonth",value:function(t,e,i){return this.determineDaysOfMonths(t,e)-i}},{key:"determineDaysOfYear",value:function(t){var e=365;return this.isLeapYear(t)&&(e=366),e}},{key:"determineRemainingDaysOfYear",value:function(t,e,i){var a=this.daysCntOfYear[e]+i;return e>1&&this.isLeapYear()&&a++,a}},{key:"determineDaysOfMonths",value:function(t,e){var i=30;switch(t=g.monthMod(t),!0){case this.months30.indexOf(t)>-1:2===t&&(i=this.isLeapYear(e)?29:28);break;case this.months31.indexOf(t)>-1:default:i=31}return i}}]),t}(),L=function(){function t(i){e(this,t),this.opts=i}return a(t,[{key:"line",value:function(){return{chart:{animations:{easing:"swing"}},dataLabels:{enabled:!1},stroke:{width:5,curve:"straight"},markers:{size:0,hover:{sizeOffset:6}},xaxis:{crosshairs:{width:1}}}}},{key:"sparkline",value:function(t){this.opts.yaxis[0].show=!1,this.opts.yaxis[0].title.text="",this.opts.yaxis[0].axisBorder.show=!1,this.opts.yaxis[0].axisTicks.show=!1,this.opts.yaxis[0].floating=!0;return g.extend(t,{grid:{show:!1,padding:{left:0,right:0,top:0,bottom:0}},legend:{show:!1},xaxis:{labels:{show:!1},tooltip:{enabled:!1},axisBorder:{show:!1},axisTicks:{show:!1}},chart:{toolbar:{show:!1},zoom:{enabled:!1}},dataLabels:{enabled:!1}})}},{key:"bar",value:function(){return{chart:{stacked:!1,animations:{easing:"swing"}},plotOptions:{bar:{dataLabels:{position:"center"}}},dataLabels:{style:{colors:["#fff"]},background:{enabled:!1}},stroke:{width:0,lineCap:"square"},fill:{opacity:.85},legend:{markers:{shape:"square",radius:2,size:8}},tooltip:{shared:!1},xaxis:{tooltip:{enabled:!1},tickPlacement:"between",crosshairs:{width:"barWidth",position:"back",fill:{type:"gradient"},dropShadow:{enabled:!1},stroke:{width:0}}}}}},{key:"candlestick",value:function(){return{stroke:{width:1,colors:["#333"]},fill:{opacity:1},dataLabels:{enabled:!1},tooltip:{shared:!0,custom:function(t){var e=t.seriesIndex,i=t.dataPointIndex,a=t.w;return'<div class="apexcharts-tooltip-candlestick"><div>Open: <span class="value">'+a.globals.seriesCandleO[e][i]+'</span></div><div>High: <span class="value">'+a.globals.seriesCandleH[e][i]+'</span></div><div>Low: <span class="value">'+a.globals.seriesCandleL[e][i]+'</span></div><div>Close: <span class="value">'+a.globals.seriesCandleC[e][i]+"</span></div></div>"}},states:{active:{filter:{type:"none"}}},xaxis:{crosshairs:{width:1}}}}},{key:"rangeBar",value:function(){return{stroke:{width:0,lineCap:"square"},plotOptions:{bar:{dataLabels:{position:"center"}}},dataLabels:{enabled:!1,formatter:function(t,e){e.ctx;var i=e.seriesIndex,a=e.dataPointIndex,s=e.w,r=s.globals.seriesRangeStart[i][a];return s.globals.seriesRangeEnd[i][a]-r},background:{enabled:!1},style:{colors:["#fff"]}},tooltip:{shared:!1,followCursor:!0,custom:function(t){var e=t.ctx,i=t.seriesIndex,a=t.dataPointIndex,s=t.y1,r=t.y2,n=t.w,o=n.globals.seriesRangeStart[i][a],l=n.globals.seriesRangeEnd[i][a],h=n.globals.labels[a],c=n.config.series[i].name,d=n.config.tooltip.y.formatter,g=n.config.tooltip.y.title.formatter,u={w:n,seriesIndex:i,dataPointIndex:a};"function"==typeof g&&(c=g(c,u)),s&&r&&(o=s,l=r,n.config.series[i].data[a].x&&(h=n.config.series[i].data[a].x+":"),"function"==typeof d&&(h=d(h,u)));var f="",p="",x=n.globals.colors[i];if(void 0===n.config.tooltip.x.formatter)if("datetime"===n.config.xaxis.type){var b=new C(e);f=b.formatDate(b.getDate(o),n.config.tooltip.x.format),p=b.formatDate(b.getDate(l),n.config.tooltip.x.format)}else f=o,p=l;else f=n.config.tooltip.x.formatter(o),p=n.config.tooltip.x.formatter(l);return'<div class="apexcharts-tooltip-rangebar"><div> <span class="series-name" style="color: '+x+'">'+(c||"")+'</span></div><div> <span class="category">'+h+' </span> <span class="value start-value">'+f+'</span> <span class="separator">-</span> <span class="value end-value">'+p+"</span></div></div>"}},xaxis:{tickPlacement:"between",tooltip:{enabled:!1},crosshairs:{stroke:{width:0}}}}}},{key:"area",value:function(){return{stroke:{width:4},fill:{type:"gradient",gradient:{inverseColors:!1,shade:"light",type:"vertical",opacityFrom:.65,opacityTo:.5,stops:[0,100,100]}},markers:{size:0,hover:{sizeOffset:6}},tooltip:{followCursor:!1}}}},{key:"brush",value:function(t){return g.extend(t,{chart:{toolbar:{autoSelected:"selection",show:!1},zoom:{enabled:!1}},dataLabels:{enabled:!1},stroke:{width:1},tooltip:{enabled:!1},xaxis:{tooltip:{enabled:!1}}})}},{key:"stacked100",value:function(t){t.dataLabels=t.dataLabels||{},t.dataLabels.formatter=t.dataLabels.formatter||void 0;var e=t.dataLabels.formatter;return t.yaxis.forEach((function(e,i){t.yaxis[i].min=0,t.yaxis[i].max=100})),"bar"===t.chart.type&&(t.dataLabels.formatter=e||function(t){return"number"==typeof t&&t?t.toFixed(0)+"%":t}),t}},{key:"convertCatToNumeric",value:function(t){return t.xaxis.convertedCatToNumeric=!0,t}},{key:"convertCatToNumericXaxis",value:function(t,e,i){t.xaxis.type="numeric",t.xaxis.labels=t.xaxis.labels||{},t.xaxis.labels.formatter=t.xaxis.labels.formatter||function(t){return g.isNumber(t)?Math.floor(t):t};var a=t.xaxis.labels.formatter,s=t.xaxis.categories&&t.xaxis.categories.length?t.xaxis.categories:t.labels;return i&&i.length&&(s=i.map((function(t){return t.toString()}))),s&&s.length&&(t.xaxis.labels.formatter=function(t){return g.isNumber(t)?a(s[Math.floor(t)-1]):a(t)}),t.xaxis.categories=[],t.labels=[],t.xaxis.tickAmount=t.xaxis.tickAmount||"dataPoints",t}},{key:"bubble",value:function(){return{dataLabels:{style:{colors:["#fff"]}},tooltip:{shared:!1,intersect:!0},xaxis:{crosshairs:{width:0}},fill:{type:"solid",gradient:{shade:"light",inverse:!0,shadeIntensity:.55,opacityFrom:.4,opacityTo:.8}}}}},{key:"scatter",value:function(){return{dataLabels:{enabled:!1},tooltip:{shared:!1,intersect:!0},markers:{size:6,strokeWidth:1,hover:{sizeOffset:2}}}}},{key:"heatmap",value:function(){return{chart:{stacked:!1},fill:{opacity:1},dataLabels:{style:{colors:["#fff"]}},stroke:{colors:["#fff"]},tooltip:{followCursor:!0,marker:{show:!1},x:{show:!1}},legend:{position:"top",markers:{shape:"square",size:10,offsetY:2}},grid:{padding:{right:20}}}}},{key:"pie",value:function(){return{chart:{toolbar:{show:!1}},plotOptions:{pie:{donut:{labels:{show:!1}}}},dataLabels:{formatter:function(t){return t.toFixed(1)+"%"},style:{colors:["#fff"]},dropShadow:{enabled:!0}},stroke:{colors:["#fff"]},fill:{opacity:1,gradient:{shade:"dark",shadeIntensity:.35,inverseColors:!1,stops:[0,100,100]}},tooltip:{theme:"dark",fillSeriesColor:!0},legend:{position:"right"}}}},{key:"donut",value:function(){return{chart:{toolbar:{show:!1}},dataLabels:{formatter:function(t){return t.toFixed(1)+"%"},style:{colors:["#fff"]},dropShadow:{enabled:!0}},stroke:{colors:["#fff"]},fill:{opacity:1,gradient:{shade:"dark",shadeIntensity:.4,inverseColors:!1,type:"vertical",opacityFrom:1,opacityTo:1,stops:[70,98,100]}},tooltip:{theme:"dark",fillSeriesColor:!0},legend:{position:"right"}}}},{key:"radar",value:function(){return this.opts.yaxis[0].labels.offsetY=this.opts.yaxis[0].labels.offsetY?this.opts.yaxis[0].labels.offsetY:6,{dataLabels:{enabled:!1,style:{fontSize:"11px"}},stroke:{width:2},markers:{size:3,strokeWidth:1,strokeOpacity:1},fill:{opacity:.2},tooltip:{shared:!1,intersect:!0,followCursor:!0},grid:{show:!1},xaxis:{labels:{formatter:function(t){return t},style:{colors:["#a8a8a8"],fontSize:"11px"}},tooltip:{enabled:!1},crosshairs:{show:!1}}}}},{key:"radialBar",value:function(){return{chart:{animations:{dynamicAnimation:{enabled:!0,speed:800}},toolbar:{show:!1}},fill:{gradient:{shade:"dark",shadeIntensity:.4,inverseColors:!1,type:"diagonal2",opacityFrom:1,opacityTo:1,stops:[70,98,100]}},legend:{show:!1,position:"right"},tooltip:{enabled:!1,fillSeriesColor:!0}}}}]),t}(),P=function(){function i(t){e(this,i),this.opts=t}return a(i,[{key:"init",value:function(e){var i=e.responsiveOverride,a=this.opts,s=new A,r=new L(a);this.chartType=a.chart.type,"histogram"===this.chartType&&(a.chart.type="bar",a=g.extend({plotOptions:{bar:{columnWidth:"99.99%"}}},a)),a=this.extendYAxis(a),a=this.extendAnnotations(a);var n=s.init(),o={};if(a&&"object"===t(a)){var l={};l=-1!==["line","area","bar","candlestick","rangeBar","histogram","bubble","scatter","heatmap","pie","donut","radar","radialBar"].indexOf(a.chart.type)?r[a.chart.type]():r.line(),a.chart.brush&&a.chart.brush.enabled&&(l=r.brush(l)),a.chart.stacked&&"100%"===a.chart.stackType&&(a=r.stacked100(a)),this.checkForDarkTheme(window.Apex),this.checkForDarkTheme(a),a.xaxis=a.xaxis||window.Apex.xaxis||{},i||(a.xaxis.convertedCatToNumeric=!1),((a=this.checkForCatToNumericXAxis(this.chartType,l,a)).chart.sparkline&&a.chart.sparkline.enabled||window.Apex.chart&&window.Apex.chart.sparkline&&window.Apex.chart.sparkline.enabled)&&(l=r.sparkline(l)),o=g.extend(n,l)}var h=g.extend(o,window.Apex);return n=g.extend(h,a),n=this.handleUserInputErrors(n)}},{key:"checkForCatToNumericXAxis",value:function(t,e,i){var a=new L(i),s="bar"===t&&i.plotOptions&&i.plotOptions.bar&&i.plotOptions.bar.horizontal,r="pie"===t||"donut"===t||"radar"===t||"radialBar"===t||"heatmap"===t,n="datetime"!==i.xaxis.type&&"numeric"!==i.xaxis.type,o=i.xaxis.tickPlacement?i.xaxis.tickPlacement:e.xaxis&&e.xaxis.tickPlacement;return s||r||!n||"between"===o||(i=a.convertCatToNumeric(i)),i}},{key:"extendYAxis",value:function(t){var e=new A;(void 0===t.yaxis||!t.yaxis||Array.isArray(t.yaxis)&&0===t.yaxis.length)&&(t.yaxis={}),t.yaxis.constructor!==Array&&window.Apex.yaxis&&window.Apex.yaxis.constructor!==Array&&(t.yaxis=g.extend(t.yaxis,window.Apex.yaxis)),t.yaxis.constructor!==Array?t.yaxis=[g.extend(e.yAxis,t.yaxis)]:t.yaxis=g.extendArray(t.yaxis,e.yAxis);var i=!1;return t.yaxis.forEach((function(t){t.logarithmic&&(i=!0)})),i&&t.series.length!==t.yaxis.length&&t.series.length&&(t.yaxis=t.series.map((function(i,a){if(i.name||(t.series[a].name="series-".concat(a+1)),t.yaxis[a])return t.yaxis[a].seriesName=t.series[a].name,t.yaxis[a];var s=g.extend(e.yAxis,t.yaxis[0]);return s.show=!1,s}))),i&&t.series.length>1&&t.series.length!==t.yaxis.length&&console.warn("A multi-series logarithmic chart should have equal number of series and y-axes. Please make sure to equalize both."),t}},{key:"extendAnnotations",value:function(t){return void 0===t.annotations&&(t.annotations={},t.annotations.yaxis=[],t.annotations.xaxis=[],t.annotations.points=[]),t=this.extendYAxisAnnotations(t),t=this.extendXAxisAnnotations(t),t=this.extendPointAnnotations(t)}},{key:"extendYAxisAnnotations",value:function(t){var e=new A;return t.annotations.yaxis=g.extendArray(void 0!==t.annotations.yaxis?t.annotations.yaxis:[],e.yAxisAnnotation),t}},{key:"extendXAxisAnnotations",value:function(t){var e=new A;return t.annotations.xaxis=g.extendArray(void 0!==t.annotations.xaxis?t.annotations.xaxis:[],e.xAxisAnnotation),t}},{key:"extendPointAnnotations",value:function(t){var e=new A;return t.annotations.points=g.extendArray(void 0!==t.annotations.points?t.annotations.points:[],e.pointAnnotation),t}},{key:"checkForDarkTheme",value:function(t){t.theme&&"dark"===t.theme.mode&&(t.tooltip||(t.tooltip={}),"light"!==t.tooltip.theme&&(t.tooltip.theme="dark"),t.chart.foreColor||(t.chart.foreColor="#f6f7f8"),t.theme.palette||(t.theme.palette="palette4"))}},{key:"handleUserInputErrors",value:function(t){var e=t;if(e.tooltip.shared&&e.tooltip.intersect)throw new Error("tooltip.shared cannot be enabled when tooltip.intersect is true. Turn off any other option by setting it to false.");if(("bar"===e.chart.type||"rangeBar"===e.chart.type)&&e.plotOptions.bar.horizontal){if(e.yaxis.length>1)throw new Error("Multiple Y Axis for bars are not supported. Switch to column chart by setting plotOptions.bar.horizontal=false");e.yaxis[0].reversed&&(e.yaxis[0].opposite=!0),e.xaxis.tooltip.enabled=!1,e.yaxis[0].tooltip.enabled=!1,e.chart.zoom.enabled=!1}return"bar"!==e.chart.type&&"rangeBar"!==e.chart.type||e.tooltip.shared&&("barWidth"===e.xaxis.crosshairs.width&&e.series.length>1&&(console.warn('crosshairs.width = "barWidth" is only supported in single series, not in a multi-series barChart.'),e.xaxis.crosshairs.width="tickWidth"),e.plotOptions.bar.horizontal&&(e.states.hover.type="none",e.tooltip.shared=!1),e.tooltip.followCursor||(console.warn("followCursor option in shared columns cannot be turned off. Please set %ctooltip.followCursor: true","color: blue;"),e.tooltip.followCursor=!0)),"candlestick"===e.chart.type&&e.yaxis[0].reversed&&(console.warn("Reversed y-axis in candlestick chart is not supported."),e.yaxis[0].reversed=!1),e.chart.group&&0===e.yaxis[0].labels.minWidth&&console.warn("It looks like you have multiple charts in synchronization. You must provide yaxis.labels.minWidth which must be EQUAL for all grouped charts to prevent incorrect behaviour."),Array.isArray(e.stroke.width)&&"line"!==e.chart.type&&"area"!==e.chart.type&&(console.warn("stroke.width option accepts array only for line and area charts. Reverted back to Number"),e.stroke.width=e.stroke.width[0]),e}}]),i}(),T=function(){function t(){e(this,t)}return a(t,[{key:"initGlobalVars",value:function(t){t.series=[],t.seriesCandleO=[],t.seriesCandleH=[],t.seriesCandleL=[],t.seriesCandleC=[],t.seriesRangeStart=[],t.seriesRangeEnd=[],t.seriesRangeBarTimeline=[],t.seriesPercent=[],t.seriesX=[],t.seriesZ=[],t.seriesNames=[],t.seriesTotals=[],t.seriesLog=[],t.stackedSeriesTotals=[],t.seriesXvalues=[],t.seriesYvalues=[],t.labels=[],t.categoryLabels=[],t.timescaleLabels=[],t.noLabelsProvided=!1,t.resizeTimer=null,t.selectionResizeTimer=null,t.delayedElements=[],t.pointsArray=[],t.dataLabelsRects=[],t.isXNumeric=!1,t.xaxisLabelsCount=0,t.skipLastTimelinelabel=!1,t.skipFirstTimelinelabel=!1,t.x2SpaceAvailable=0,t.isDataXYZ=!1,t.isMultiLineX=!1,t.isMultipleYAxis=!1,t.maxY=-Number.MAX_VALUE,t.minY=Number.MIN_VALUE,t.minYArr=[],t.maxYArr=[],t.maxX=-Number.MAX_VALUE,t.minX=Number.MAX_VALUE,t.initialMaxX=-Number.MAX_VALUE,t.initialMinX=Number.MAX_VALUE,t.maxDate=0,t.minDate=Number.MAX_VALUE,t.minZ=Number.MAX_VALUE,t.maxZ=-Number.MAX_VALUE,t.minXDiff=Number.MAX_VALUE,t.yAxisScale=[],t.xAxisScale=null,t.xAxisTicksPositions=[],t.yLabelsCoords=[],t.yTitleCoords=[],t.barPadForNumericAxis=0,t.padHorizontal=0,t.xRange=0,t.yRange=[],t.zRange=0,t.dataPoints=0,t.xTickAmount=0}},{key:"globalVars",value:function(t){return{chartID:null,cuid:null,events:{beforeMount:[],mounted:[],updated:[],clicked:[],selection:[],dataPointSelection:[],zoomed:[],scrolled:[]},colors:[],clientX:null,clientY:null,fill:{colors:[]},stroke:{colors:[]},dataLabels:{style:{colors:[]}},radarPolygons:{fill:{colors:[]}},markers:{colors:[],size:t.markers.size,largestSize:0},animationEnded:!1,isTouchDevice:"ontouchstart"in window||navigator.msMaxTouchPoints,isDirty:!1,isExecCalled:!1,initialConfig:null,lastXAxis:[],lastYAxis:[],columnSeries:null,labels:[],timescaleLabels:[],noLabelsProvided:!1,allSeriesCollapsed:!1,collapsedSeries:[],collapsedSeriesIndices:[],ancillaryCollapsedSeries:[],ancillaryCollapsedSeriesIndices:[],risingSeries:[],dataFormatXNumeric:!1,capturedSeriesIndex:-1,capturedDataPointIndex:-1,selectedDataPoints:[],goldenPadding:35,invalidLogScale:!1,ignoreYAxisIndexes:[],yAxisSameScaleIndices:[],maxValsInArrayIndex:0,radialSize:0,zoomEnabled:"zoom"===t.chart.toolbar.autoSelected&&t.chart.toolbar.tools.zoom&&t.chart.zoom.enabled,panEnabled:"pan"===t.chart.toolbar.autoSelected&&t.chart.toolbar.tools.pan,selectionEnabled:"selection"===t.chart.toolbar.autoSelected&&t.chart.toolbar.tools.selection,yaxis:null,mousedown:!1,lastClientPosition:{},visibleXRange:void 0,yValueDecimal:0,total:0,SVGNS:"http://www.w3.org/2000/svg",svgWidth:0,svgHeight:0,noData:!1,locale:{},dom:{},memory:{methodsToExec:[]},shouldAnimate:!0,skipLastTimelinelabel:!1,skipFirstTimelinelabel:!1,delayedElements:[],axisCharts:!0,isDataXYZ:!1,resized:!1,resizeTimer:null,comboCharts:!1,dataChanged:!1,previousPaths:[],allSeriesHasEqualX:!0,pointsArray:[],dataLabelsRects:[],lastDrawnDataLabelsIndexes:[],x2SpaceAvailable:0,hasNullValues:!1,easing:null,zoomed:!1,gridWidth:0,gridHeight:0,rotateXLabels:!1,defaultLabels:!1,xLabelFormatter:void 0,yLabelFormatters:[],xaxisTooltipFormatter:void 0,ttKeyFormatter:void 0,ttVal:void 0,ttZFormatter:void 0,LINE_HEIGHT_RATIO:1.618,xAxisLabelsHeight:0,yAxisLabelsWidth:0,scaleX:1,scaleY:1,translateX:0,translateY:0,translateYAxisX:[],yAxisWidths:[],translateXAxisY:0,translateXAxisX:0,tooltip:null}}},{key:"init",value:function(t){var e=this.globalVars(t);return this.initGlobalVars(e),e.initialConfig=g.extend({},t),e.initialSeries=JSON.parse(JSON.stringify(e.initialConfig.series)),e.lastXAxis=JSON.parse(JSON.stringify(e.initialConfig.xaxis)),e.lastYAxis=JSON.parse(JSON.stringify(e.initialConfig.yaxis)),e}}]),t}(),z=function(){function t(i){e(this,t),this.opts=i}return a(t,[{key:"init",value:function(){var t=new P(this.opts).init({responsiveOverride:!1});return{config:t,globals:(new T).init(t)}}}]),t}(),I=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"getStackedSeriesTotals",value:function(){var t=this.w,e=[];if(0===t.globals.series.length)return e;for(var i=0;i<t.globals.series[t.globals.maxValsInArrayIndex].length;i++){for(var a=0,s=0;s<t.globals.series.length;s++)void 0!==t.globals.series[s][i]&&(a+=t.globals.series[s][i]);e.push(a)}return t.globals.stackedSeriesTotals=e,e}},{key:"getSeriesTotalByIndex",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;return null===t?this.w.config.series.reduce((function(t,e){return t+e}),0):this.w.globals.series[t].reduce((function(t,e){return t+e}),0)}},{key:"isSeriesNull",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;return 0===(null===t?this.w.config.series.filter((function(t){return null!==t})):this.w.globals.series[t].filter((function(t){return null!==t}))).length}},{key:"seriesHaveSameValues",value:function(t){return this.w.globals.series[t].every((function(t,e,i){return t===i[0]}))}},{key:"getCategoryLabels",value:function(t){var e=this.w,i=t.slice();return e.config.xaxis.convertedCatToNumeric&&(i=t.map((function(t){return e.config.xaxis.labels.formatter(t-e.globals.minX+1)}))),i}},{key:"getLargestSeries",value:function(){var t=this.w;t.globals.maxValsInArrayIndex=t.globals.series.map((function(t){return t.length})).indexOf(Math.max.apply(Math,t.globals.series.map((function(t){return t.length}))))}},{key:"getLargestMarkerSize",value:function(){var t=this.w,e=0;return t.globals.markers.size.forEach((function(t){e=Math.max(e,t)})),t.globals.markers.largestSize=e,e}},{key:"getSeriesTotals",value:function(){var t=this.w;t.globals.seriesTotals=t.globals.series.map((function(t,e){var i=0;if(Array.isArray(t))for(var a=0;a<t.length;a++)i+=t[a];else i+=t;return i}))}},{key:"getSeriesTotalsXRange",value:function(t,e){var i=this.w;return i.globals.series.map((function(a,s){for(var r=0,n=0;n<a.length;n++)i.globals.seriesX[s][n]>t&&i.globals.seriesX[s][n]<e&&(r+=a[n]);return r}))}},{key:"getPercentSeries",value:function(){var t=this.w;t.globals.seriesPercent=t.globals.series.map((function(e,i){var a=[];if(Array.isArray(e))for(var s=0;s<e.length;s++){var r=t.globals.stackedSeriesTotals[s],n=0;r&&(n=100*e[s]/r),a.push(n)}else{var o=100*e/t.globals.seriesTotals.reduce((function(t,e){return t+e}),0);a.push(o)}return a}))}},{key:"getCalculatedRatios",value:function(){var t,e,i,a,s=this.w.globals,r=[],n=0,o=[],l=.1,h=0;if(s.yRange=[],s.isMultipleYAxis)for(var c=0;c<s.minYArr.length;c++)s.yRange.push(Math.abs(s.minYArr[c]-s.maxYArr[c])),o.push(0);else s.yRange.push(Math.abs(s.minY-s.maxY));s.xRange=Math.abs(s.maxX-s.minX),s.zRange=Math.abs(s.maxZ-s.minZ);for(var d=0;d<s.yRange.length;d++)r.push(s.yRange[d]/s.gridHeight);if(e=s.xRange/s.gridWidth,i=Math.abs(s.initialMaxX-s.initialMinX)/s.gridWidth,t=s.yRange/s.gridWidth,a=s.xRange/s.gridHeight,(n=s.zRange/s.gridHeight*16)||(n=1),s.minY!==Number.MIN_VALUE&&0!==Math.abs(s.minY)&&(s.hasNegs=!0),s.isMultipleYAxis){o=[];for(var g=0;g<r.length;g++)o.push(-s.minYArr[g]/r[g])}else o.push(-s.minY/r[0]),s.minY!==Number.MIN_VALUE&&0!==Math.abs(s.minY)&&(l=-s.minY/t,h=s.minX/e);return{yRatio:r,invertedYRatio:t,zRatio:n,xRatio:e,initialXRatio:i,invertedXRatio:a,baseLineInvertedY:l,baseLineY:o,baseLineX:h}}},{key:"getLogSeries",value:function(t){var e=this.w;return e.globals.seriesLog=t.map((function(t,i){return e.config.yaxis[i]&&e.config.yaxis[i].logarithmic?t.map((function(t){return null===t?null:(Math.log(t)-Math.log(e.globals.minYArr[i]))/(Math.log(e.globals.maxYArr[i])-Math.log(e.globals.minYArr[i]))})):t})),e.globals.invalidLogScale?t:e.globals.seriesLog}},{key:"getLogYRatios",value:function(t){var e=this,i=this.w,a=this.w.globals;return a.yLogRatio=t.slice(),a.logYRange=a.yRange.map((function(t,s){if(i.config.yaxis[s]&&e.w.config.yaxis[s].logarithmic){var r,n=-Number.MAX_VALUE,o=Number.MIN_VALUE;return a.seriesLog.forEach((function(t,e){t.forEach((function(t){i.config.yaxis[e]&&i.config.yaxis[e].logarithmic&&(n=Math.max(t,n),o=Math.min(t,o))}))})),r=Math.pow(a.yRange[s],Math.abs(o-n)/a.yRange[s]),a.yLogRatio[s]=r/a.gridHeight,r}})),a.invalidLogScale?t.slice():a.yLogRatio}}],[{key:"checkComboSeries",value:function(t){var e=!1,i=0;return t.length&&void 0!==t[0].type&&(e=!0,t.forEach((function(t){"bar"!==t.type&&"column"!==t.type&&"candlestick"!==t.type||i++}))),{comboBarCount:i,comboCharts:e}}},{key:"extendArrayProps",value:function(t,e){return e.yaxis&&(e=t.extendYAxis(e)),e.annotations&&(e.annotations.yaxis&&(e=t.extendYAxisAnnotations(e)),e.annotations.xaxis&&(e=t.extendXAxisAnnotations(e)),e.annotations.points&&(e=t.extendPointAnnotations(e))),e}}]),t}(),M=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.opts=null,this.seriesIndex=0}return a(t,[{key:"clippedImgArea",value:function(t){var e=this.w,i=e.config,a=parseInt(e.globals.gridWidth,10),s=parseInt(e.globals.gridHeight,10),r=a>s?a:s,n=t.image,o=0,l=0;void 0===t.width&&void 0===t.height?void 0!==i.fill.image.width&&void 0!==i.fill.image.height?(o=i.fill.image.width+1,l=i.fill.image.height):(o=r+1,l=r):(o=t.width,l=t.height);var h=document.createElementNS(e.globals.SVGNS,"pattern");p.setAttrs(h,{id:t.patternID,patternUnits:t.patternUnits?t.patternUnits:"userSpaceOnUse",width:o+"px",height:l+"px"});var c=document.createElementNS(e.globals.SVGNS,"image");h.appendChild(c),c.setAttributeNS(window.SVG.xlink,"href",n),p.setAttrs(c,{x:0,y:0,preserveAspectRatio:"none",width:o+"px",height:l+"px"}),c.style.opacity=t.opacity,e.globals.dom.elDefs.node.appendChild(h)}},{key:"getSeriesIndex",value:function(t){var e=this.w;return("bar"===e.config.chart.type||"rangeBar"===e.config.chart.type)&&e.config.plotOptions.bar.distributed||"heatmap"===e.config.chart.type?this.seriesIndex=t.seriesNumber:this.seriesIndex=t.seriesNumber%e.globals.series.length,this.seriesIndex}},{key:"fillPath",value:function(t){var e=this.w;this.opts=t;var i,a,s,r=this.w.config;this.seriesIndex=this.getSeriesIndex(t);var n=this.getFillColors()[this.seriesIndex];"function"==typeof n&&(n=n({seriesIndex:this.seriesIndex,dataPointIndex:t.dataPointIndex,value:t.value,w:e}));var o=this.getFillType(this.seriesIndex),l=Array.isArray(r.fill.opacity)?r.fill.opacity[this.seriesIndex]:r.fill.opacity,h=n;if(t.color&&(n=t.color),-1===n.indexOf("rgb")?h=g.hexToRgba(n,l):n.indexOf("rgba")>-1&&(l="0."+g.getOpacityFromRGBA(n)),t.opacity&&(l=t.opacity),"pattern"===o&&(a=this.handlePatternFill(a,n,l,h)),"gradient"===o&&(s=this.handleGradientFill(s,n,l,this.seriesIndex)),"image"===o){var c=r.fill.image.src,d=t.patternID?t.patternID:"";this.clippedImgArea({opacity:l,image:Array.isArray(c)?t.seriesNumber<c.length?c[t.seriesNumber]:c[0]:c,width:t.width?t.width:void 0,height:t.height?t.height:void 0,patternUnits:t.patternUnits,patternID:"pattern".concat(e.globals.cuid).concat(t.seriesNumber+1).concat(d)}),i="url(#pattern".concat(e.globals.cuid).concat(t.seriesNumber+1).concat(d,")")}else i="gradient"===o?s:"pattern"===o?a:h;return t.solid&&(i=h),i}},{key:"getFillType",value:function(t){var e=this.w;return Array.isArray(e.config.fill.type)?e.config.fill.type[t]:e.config.fill.type}},{key:"getFillColors",value:function(){var t=this.w,e=t.config,i=this.opts,a=[];return t.globals.comboCharts?"line"===t.config.series[this.seriesIndex].type?t.globals.stroke.colors instanceof Array?a=t.globals.stroke.colors:a.push(t.globals.stroke.colors):t.globals.fill.colors instanceof Array?a=t.globals.fill.colors:a.push(t.globals.fill.colors):"line"===e.chart.type?t.globals.stroke.colors instanceof Array?a=t.globals.stroke.colors:a.push(t.globals.stroke.colors):t.globals.fill.colors instanceof Array?a=t.globals.fill.colors:a.push(t.globals.fill.colors),void 0!==i.fillColors&&(a=[],i.fillColors instanceof Array?a=i.fillColors.slice():a.push(i.fillColors)),a}},{key:"handlePatternFill",value:function(t,e,i,a){var s=this.w.config,r=this.opts,n=new p(this.ctx),o=void 0===s.fill.pattern.strokeWidth?Array.isArray(s.stroke.width)?s.stroke.width[this.seriesIndex]:s.stroke.width:Array.isArray(s.fill.pattern.strokeWidth)?s.fill.pattern.strokeWidth[this.seriesIndex]:s.fill.pattern.strokeWidth,l=e;s.fill.pattern.style instanceof Array?t=void 0!==s.fill.pattern.style[r.seriesNumber]?n.drawPattern(s.fill.pattern.style[r.seriesNumber],s.fill.pattern.width,s.fill.pattern.height,l,o,i):a:t=n.drawPattern(s.fill.pattern.style,s.fill.pattern.width,s.fill.pattern.height,l,o,i);return t}},{key:"handleGradientFill",value:function(t,e,i,a){var s,r,n=this.w.config,o=this.opts,l=new p(this.ctx),h=new g,c=n.fill.gradient.type,d=void 0===n.fill.gradient.opacityFrom?i:Array.isArray(n.fill.gradient.opacityFrom)?n.fill.gradient.opacityFrom[a]:n.fill.gradient.opacityFrom,u=void 0===n.fill.gradient.opacityTo?i:Array.isArray(n.fill.gradient.opacityTo)?n.fill.gradient.opacityTo[a]:n.fill.gradient.opacityTo;if(s=e,r=void 0===n.fill.gradient.gradientToColors||0===n.fill.gradient.gradientToColors.length?"dark"===n.fill.gradient.shade?h.shadeColor(-1*parseFloat(n.fill.gradient.shadeIntensity),e):h.shadeColor(parseFloat(n.fill.gradient.shadeIntensity),e):n.fill.gradient.gradientToColors[o.seriesNumber],n.fill.gradient.inverseColors){var f=s;s=r,r=f}return l.drawGradient(c,s,r,d,u,o.size,n.fill.gradient.stops,n.fill.gradient.colorStops,a)}}]),t}(),X=function(){function t(i,a){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"setGlobalMarkerSize",value:function(){var t=this.w;if(t.globals.markers.size=Array.isArray(t.config.markers.size)?t.config.markers.size:[t.config.markers.size],t.globals.markers.size.length>0){if(t.globals.markers.size.length<t.globals.series.length+1)for(var e=0;e<=t.globals.series.length;e++)void 0===t.globals.markers.size[e]&&t.globals.markers.size.push(t.globals.markers.size[0])}else t.globals.markers.size=t.config.series.map((function(e){return t.config.markers.size}))}},{key:"plotChartMarkers",value:function(t,e,i,a){var s,r=arguments.length>4&&void 0!==arguments[4]&&arguments[4],n=this.w,o=e,l=t,h=null,c=new p(this.ctx);if((n.globals.markers.size[e]>0||r)&&(h=c.group({class:r?"":"apexcharts-series-markers"})).attr("clip-path","url(#gridRectMarkerMask".concat(n.globals.cuid,")")),l.x instanceof Array)for(var d=0;d<l.x.length;d++){var f=i;1===i&&0===d&&(f=0),1===i&&1===d&&(f=1);var x="apexcharts-marker";"line"!==n.config.chart.type&&"area"!==n.config.chart.type||n.globals.comboCharts||n.config.tooltip.intersect||(x+=" no-pointer-events");var b=Array.isArray(n.config.markers.size)?n.globals.markers.size[e]>0:n.config.markers.size>0;if(b||r){g.isNumber(l.y[d])?x+=" w".concat(g.randomId()):x="apexcharts-nullpoint";var m=this.getMarkerConfig(x,e,f);n.config.series[o].data[i]&&(n.config.series[o].data[i].fillColor&&(m.pointFillColor=n.config.series[o].data[i].fillColor),n.config.series[o].data[i].strokeColor&&(m.pointStrokeColor=n.config.series[o].data[i].strokeColor)),a&&(m.pSize=a),(s=c.drawMarker(l.x[d],l.y[d],m)).attr("rel",f),s.attr("j",f),s.attr("index",e),s.node.setAttribute("default-marker-size",m.pSize);var v=new u(this.ctx);v.setSelectionFilter(s,e,f),this.addEvents(s),h&&h.add(s)}else void 0===n.globals.pointsArray[e]&&(n.globals.pointsArray[e]=[]),n.globals.pointsArray[e].push([l.x[d],l.y[d]])}return h}},{key:"getMarkerConfig",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,a=this.w,s=this.getMarkerStyle(e),r=a.globals.markers.size[e],n=a.config.markers;return null!==i&&n.discrete.length&&n.discrete.map((function(t){t.seriesIndex===e&&t.dataPointIndex===i&&(s.pointStrokeColor=t.strokeColor,s.pointFillColor=t.fillColor,r=t.size)})),{pSize:r,pRadius:n.radius,pWidth:n.strokeWidth instanceof Array?n.strokeWidth[e]:n.strokeWidth,pointStrokeColor:s.pointStrokeColor,pointFillColor:s.pointFillColor,shape:n.shape instanceof Array?n.shape[e]:n.shape,class:t,pointStrokeOpacity:n.strokeOpacity instanceof Array?n.strokeOpacity[e]:n.strokeOpacity,pointStrokeDashArray:n.strokeDashArray instanceof Array?n.strokeDashArray[e]:n.strokeDashArray,pointFillOpacity:n.fillOpacity instanceof Array?n.fillOpacity[e]:n.fillOpacity,seriesIndex:e}}},{key:"addEvents",value:function(t){var e=this.w,i=new p(this.ctx);t.node.addEventListener("mouseenter",i.pathMouseEnter.bind(this.ctx,t)),t.node.addEventListener("mouseleave",i.pathMouseLeave.bind(this.ctx,t)),t.node.addEventListener("mousedown",i.pathMouseDown.bind(this.ctx,t)),t.node.addEventListener("click",e.config.markers.onClick),t.node.addEventListener("dblclick",e.config.markers.onDblClick),t.node.addEventListener("touchstart",i.pathMouseDown.bind(this.ctx,t),{passive:!0})}},{key:"getMarkerStyle",value:function(t){var e=this.w,i=e.globals.markers.colors,a=e.config.markers.strokeColor||e.config.markers.strokeColors;return{pointStrokeColor:a instanceof Array?a[t]:a,pointFillColor:i instanceof Array?i[t]:i}}}]),t}(),E=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.initialAnim=this.w.config.chart.animations.enabled,this.dynamicAnim=this.initialAnim&&this.w.config.chart.animations.dynamicAnimation.enabled}return a(t,[{key:"draw",value:function(t,e,i){var a=this.w,s=new p(this.ctx),r=i.realIndex,n=i.pointsPos,o=i.zRatio,l=i.elParent,h=s.group({class:"apexcharts-series-markers apexcharts-series-".concat(a.config.chart.type)});if(h.attr("clip-path","url(#gridRectMarkerMask".concat(a.globals.cuid,")")),n.x instanceof Array)for(var c=0;c<n.x.length;c++){var d=e+1,g=!0;0===e&&0===c&&(d=0),0===e&&1===c&&(d=1);var u=0,f=a.globals.markers.size[r];if(o!==1/0){f=a.globals.seriesZ[r][d]/o;var x=a.config.plotOptions.bubble;x.minBubbleRadius&&f<x.minBubbleRadius&&(f=x.minBubbleRadius),x.maxBubbleRadius&&f>x.maxBubbleRadius&&(f=x.maxBubbleRadius)}a.config.chart.animations.enabled||(u=f);var b=n.x[c],m=n.y[c];if(u=u||0,null!==m&&void 0!==a.globals.series[r][d]||(g=!1),g){var v=this.drawPoint(b,m,u,f,r,d,e);h.add(v)}l.add(h)}}},{key:"drawPoint",value:function(t,e,i,a,s,r,n){var o=this.w,l=s,h=new f(this.ctx),c=new u(this.ctx),d=new M(this.ctx),g=new X(this.ctx),x=new p(this.ctx),b=g.getMarkerConfig("apexcharts-marker",l),m=d.fillPath({seriesNumber:s,dataPointIndex:r,patternUnits:"objectBoundingBox",value:o.globals.series[s][n]}),v=x.drawCircle(i);if(o.config.series[l].data[r]&&o.config.series[l].data[r].fillColor&&(m=o.config.series[l].data[r].fillColor),v.attr({cx:t,cy:e,fill:m,stroke:b.pointStrokeColor,"stroke-width":b.pWidth,"stroke-dasharray":b.pointStrokeDashArray,"stroke-opacity":b.pointStrokeOpacity}),o.config.chart.dropShadow.enabled){var y=o.config.chart.dropShadow;c.dropShadow(v,y,s)}if(this.initialAnim&&!o.globals.dataChanged){var w=1;o.globals.resized||(w=o.config.chart.animations.speed),h.animateCircleRadius(v,0,a,w,o.globals.easing,(function(){window.setTimeout((function(){h.animationCompleted(v)}),100)}))}if(o.globals.dataChanged)if(this.dynamicAnim){var k,A,S,C,L=o.config.chart.animations.dynamicAnimation.speed;null!=(C=o.globals.previousPaths[s]&&o.globals.previousPaths[s][n])&&(k=C.x,A=C.y,S=void 0!==C.r?C.r:a);for(var P=0;P<o.globals.collapsedSeries.length;P++)o.globals.collapsedSeries[P].index===s&&(L=1,a=0);0===t&&0===e&&(a=0),h.animateCircle(v,{cx:k,cy:A,r:S},{cx:t,cy:e,r:a},L,o.globals.easing)}else v.attr({r:a});return v.attr({rel:r,j:r,index:s,"default-marker-size":a}),c.setSelectionFilter(v,s,r),g.addEvents(v),v.node.classList.add("apexcharts-marker"),v}},{key:"centerTextInBubble",value:function(t){var e=this.w;return{y:t+=parseInt(e.config.dataLabels.style.fontSize,10)/4}}}]),t}(),Y=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"dataLabelsCorrection",value:function(t,e,i,a,s,r,n){var o=this.w,l=!1,h=new p(this.ctx).getTextRects(i,n),c=h.width,d=h.height;void 0===o.globals.dataLabelsRects[a]&&(o.globals.dataLabelsRects[a]=[]),o.globals.dataLabelsRects[a].push({x:t,y:e,width:c,height:d});var g=o.globals.dataLabelsRects[a].length-2,u=void 0!==o.globals.lastDrawnDataLabelsIndexes[a]?o.globals.lastDrawnDataLabelsIndexes[a][o.globals.lastDrawnDataLabelsIndexes[a].length-1]:0;if(void 0!==o.globals.dataLabelsRects[a][g]){var f=o.globals.dataLabelsRects[a][u];(t>f.x+f.width+2||e>f.y+f.height+2||t+c<f.x)&&(l=!0)}return(0===s||r)&&(l=!0),{x:t,y:e,textRects:h,drawnextLabel:l}}},{key:"drawDataLabel",value:function(t,e,i){var a=this,s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:2,r=this.w,n=new p(this.ctx),o=r.config.dataLabels,l=0,h=0,c=i,d=null;if(!o.enabled||t.x instanceof Array!=!0)return d;d=n.group({class:"apexcharts-data-labels"});for(var g=0;g<t.x.length;g++)if(l=t.x[g]+o.offsetX,h=t.y[g]+o.offsetY+s,!isNaN(l)){1===i&&0===g&&(c=0),1===i&&1===g&&(c=1);var u=r.globals.series[e][c],f="",x=function(t){return r.config.dataLabels.formatter(t,{ctx:a.ctx,seriesIndex:e,dataPointIndex:c,w:r})};if("bubble"===r.config.chart.type){f=x(u=r.globals.seriesZ[e][c]),h=t.y[g];var b=new E(this.ctx),m=b.centerTextInBubble(h,e,c);h=m.y}else void 0!==u&&(f=x(u));this.plotDataLabelsText({x:l,y:h,text:f,i:e,j:c,parent:d,offsetCorrection:!0,dataLabelsConfig:r.config.dataLabels})}return d}},{key:"plotDataLabelsText",value:function(t){var e=this.w,i=new p(this.ctx),a=t.x,s=t.y,r=t.i,n=t.j,o=t.text,l=t.textAnchor,h=t.parent,c=t.dataLabelsConfig,d=t.color,g=t.alwaysDrawDataLabel,f=t.offsetCorrection;if(!(Array.isArray(e.config.dataLabels.enabledOnSeries)&&e.config.dataLabels.enabledOnSeries.indexOf(r)<0)){var x={x:a,y:s,drawnextLabel:!0};f&&(x=this.dataLabelsCorrection(a,s,o,r,n,g,parseInt(c.style.fontSize,10))),e.globals.zoomed||(a=x.x,s=x.y),x.textRects&&(a+x.textRects.width<-20||a>e.globals.gridWidth+20)&&(o="");var b=e.globals.dataLabels.style.colors[r];(("bar"===e.config.chart.type||"rangeBar"===e.config.chart.type)&&e.config.plotOptions.bar.distributed||e.config.dataLabels.distributed)&&(b=e.globals.dataLabels.style.colors[n]),d&&(b=d);var m=c.offsetX,v=c.offsetY;if("bar"!==e.config.chart.type&&"rangeBar"!==e.config.chart.type||(m=0,v=0),x.drawnextLabel){var y=i.drawText({width:100,height:parseInt(c.style.fontSize,10),x:a+m,y:s+v,foreColor:b,textAnchor:l||c.textAnchor,text:o,fontSize:c.style.fontSize,fontFamily:c.style.fontFamily,fontWeight:c.style.fontWeight||"normal"});if(y.attr({class:"apexcharts-datalabel",cx:a,cy:s}),c.dropShadow.enabled){var w=c.dropShadow;new u(this.ctx).dropShadow(y,w)}h.add(y),void 0===e.globals.lastDrawnDataLabelsIndexes[r]&&(e.globals.lastDrawnDataLabelsIndexes[r]=[]),e.globals.lastDrawnDataLabelsIndexes[r].push(n)}}}},{key:"addBackgroundToDataLabel",value:function(t,e){var i=this.w,a=i.config.dataLabels.background,s=a.padding,r=a.padding/2,n=e.width,o=e.height,l=new p(this.ctx).drawRect(e.x-s,e.y-r/2,n+2*s,o+r,a.borderRadius,"transparent"===i.config.chart.background?"#fff":i.config.chart.background,a.opacity,a.borderWidth,a.borderColor);a.dropShadow.enabled&&new u(this.ctx).dropShadow(l,a.dropShadow);return l}},{key:"dataLabelsBackground",value:function(){var t=this.w;if("bubble"!==t.config.chart.type)for(var e=t.globals.dom.baseEl.querySelectorAll(".apexcharts-datalabels text"),i=0;i<e.length;i++){var a=e[i],s=a.getBBox(),r=null;if(s.width&&s.height&&(r=this.addBackgroundToDataLabel(a,s)),r){a.parentNode.insertBefore(r.node,a);var n=a.getAttribute("fill");t.config.chart.animations.enabled&&!t.globals.resized&&!t.globals.dataChanged?r.animate().attr({fill:n}):r.attr({fill:n}),a.setAttribute("fill",t.config.dataLabels.background.foreColor)}}}},{key:"bringForward",value:function(){for(var t=this.w,e=t.globals.dom.baseEl.getElementsByClassName("apexcharts-datalabels"),i=t.globals.dom.baseEl.querySelector(".apexcharts-plot-series:last-child"),a=0;a<e.length;a++)i&&i.insertBefore(e[a],i.nextSibling)}}]),t}(),F=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.legendInactiveClass="legend-mouseover-inactive"}return a(t,[{key:"getAllSeriesEls",value:function(){return this.w.globals.dom.baseEl.getElementsByClassName("apexcharts-series")}},{key:"getSeriesByName",value:function(t){return this.w.globals.dom.baseEl.querySelector("[seriesName='".concat(g.escapeString(t),"']"))}},{key:"isSeriesHidden",value:function(t){var e=this.getSeriesByName(t),i=parseInt(e.getAttribute("data:realIndex"),10);return{isHidden:e.classList.contains("apexcharts-series-collapsed"),realIndex:i}}},{key:"addCollapsedClassToSeries",value:function(t,e){var i=this.w;function a(i){for(var a=0;a<i.length;a++)i[a].index===e&&t.node.classList.add("apexcharts-series-collapsed")}a(i.globals.collapsedSeries),a(i.globals.ancillaryCollapsedSeries)}},{key:"toggleSeries",value:function(t){var e=this.isSeriesHidden(t);return this.ctx.legend.legendHelpers.toggleDataSeries(e.realIndex,e.isHidden),e.isHidden}},{key:"showSeries",value:function(t){var e=this.isSeriesHidden(t);e.isHidden&&this.ctx.legend.legendHelpers.toggleDataSeries(e.realIndex,!0)}},{key:"hideSeries",value:function(t){var e=this.isSeriesHidden(t);e.isHidden||this.ctx.legend.legendHelpers.toggleDataSeries(e.realIndex,!1)}},{key:"resetSeries",value:function(){var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],a=this.w,s=a.globals.initialSeries.slice();a.config.series=s,a.globals.previousPaths=[],i&&(a.globals.collapsedSeries=[],a.globals.ancillaryCollapsedSeries=[],a.globals.collapsedSeriesIndices=[],a.globals.ancillaryCollapsedSeriesIndices=[]),t&&(e&&(a.globals.zoomed=!1,this.ctx.updateHelpers.revertDefaultAxisMinMax()),this.ctx.updateHelpers._updateSeries(s,a.config.chart.animations.dynamicAnimation.enabled))}},{key:"toggleSeriesOnHover",value:function(t,e){var i=this.w,a=i.globals.dom.baseEl.getElementsByClassName("apexcharts-series apexcharts-datalabels");if("mousemove"===t.type){var s=parseInt(e.getAttribute("rel"),10)-1,r=null,n=null;i.globals.axisCharts||"radialBar"===i.config.chart.type?i.globals.axisCharts?(r=i.globals.dom.baseEl.querySelector(".apexcharts-series[data\\:realIndex='".concat(s,"']")),n=i.globals.dom.baseEl.querySelector(".apexcharts-datalabels[data\\:realIndex='".concat(s,"']"))):r=i.globals.dom.baseEl.querySelector(".apexcharts-series[rel='".concat(s+1,"']")):r=i.globals.dom.baseEl.querySelector(".apexcharts-series[rel='".concat(s+1,"'] path"));for(var o=0;o<a.length;o++)a[o].classList.add(this.legendInactiveClass);null!==r&&(i.globals.axisCharts||r.parentNode.classList.remove(this.legendInactiveClass),r.classList.remove(this.legendInactiveClass),null!==n&&n.classList.remove(this.legendInactiveClass))}else if("mouseout"===t.type)for(var l=0;l<a.length;l++)a[l].classList.remove(this.legendInactiveClass)}},{key:"highlightRangeInSeries",value:function(t,e){var i=this,a=this.w,s=a.globals.dom.baseEl.getElementsByClassName("apexcharts-heatmap-rect"),r=function(t){for(var e=0;e<s.length;e++)s[e].classList[t](i.legendInactiveClass)};if("mousemove"===t.type){var n=parseInt(e.getAttribute("rel"),10)-1;r("add"),function(t){for(var e=0;e<s.length;e++){var a=parseInt(s[e].getAttribute("val"),10);a>=t.from&&a<=t.to&&s[e].classList.remove(i.legendInactiveClass)}}(a.config.plotOptions.heatmap.colorScale.ranges[n])}else"mouseout"===t.type&&r("remove")}},{key:"getActiveConfigSeriesIndex",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=this.w,i=0;if(e.config.series.length>1)for(var a=e.config.series.map((function(i,a){var s=!1;return t&&(s="bar"===e.config.series[a].type||"column"===e.config.series[a].type),i.data&&i.data.length>0&&!s?a:-1})),s=0;s<a.length;s++)if(-1!==a[s]){i=a[s];break}return i}},{key:"getPreviousPaths",value:function(){var t=this.w;function e(e,i,a){for(var s=e[i].childNodes,r={type:a,paths:[],realIndex:e[i].getAttribute("data:realIndex")},n=0;n<s.length;n++)if(s[n].hasAttribute("pathTo")){var o=s[n].getAttribute("pathTo");r.paths.push({d:o})}t.globals.previousPaths.push(r)}t.globals.previousPaths=[];["line","area","bar","candlestick","radar"].forEach((function(i){for(var a,s=(a=i,t.globals.dom.baseEl.querySelectorAll(".apexcharts-".concat(a,"-series .apexcharts-series"))),r=0;r<s.length;r++)e(s,r,i)})),this.handlePrevBubbleScatterPaths("bubble"),this.handlePrevBubbleScatterPaths("scatter");var i=t.globals.dom.baseEl.querySelectorAll(".apexcharts-heatmap .apexcharts-series");if(i.length>0)for(var a=0;a<i.length;a++){for(var s=t.globals.dom.baseEl.querySelectorAll(".apexcharts-heatmap .apexcharts-series[data\\:realIndex='".concat(a,"'] rect")),r=[],n=0;n<s.length;n++)r.push({color:s[n].getAttribute("color")});t.globals.previousPaths.push(r)}t.globals.axisCharts||(t.globals.previousPaths=t.globals.series)}},{key:"handlePrevBubbleScatterPaths",value:function(t){var e=this.w,i=e.globals.dom.baseEl.querySelectorAll(".apexcharts-".concat(t,"-series .apexcharts-series"));if(i.length>0)for(var a=0;a<i.length;a++){for(var s=e.globals.dom.baseEl.querySelectorAll(".apexcharts-".concat(t,"-series .apexcharts-series[data\\:realIndex='").concat(a,"'] circle")),r=[],n=0;n<s.length;n++)r.push({x:s[n].getAttribute("cx"),y:s[n].getAttribute("cy"),r:s[n].getAttribute("r")});e.globals.previousPaths.push(r)}}},{key:"clearPreviousPaths",value:function(){var t=this.w;t.globals.previousPaths=[],t.globals.allSeriesCollapsed=!1}},{key:"handleNoData",value:function(){var t=this.w,e=t.config.noData,i=new p(this.ctx),a=t.globals.svgWidth/2,s=t.globals.svgHeight/2,r="middle";if(t.globals.noData=!0,t.globals.animationEnded=!0,"left"===e.align?(a=10,r="start"):"right"===e.align&&(a=t.globals.svgWidth-10,r="end"),"top"===e.verticalAlign?s=50:"bottom"===e.verticalAlign&&(s=t.globals.svgHeight-50),a+=e.offsetX,s=s+parseInt(e.style.fontSize,10)+2+e.offsetY,void 0!==e.text&&""!==e.text){var n=i.drawText({x:a,y:s,text:e.text,textAnchor:r,fontSize:e.style.fontSize,fontFamily:e.style.fontFamily,foreColor:e.style.color,opacity:1,class:"apexcharts-text-nodata"});t.globals.dom.Paper.add(n)}}},{key:"setNullSeriesToZeroValues",value:function(t){for(var e=this.w,i=0;i<t.length;i++)if(0===t[i].length)for(var a=0;a<t[e.globals.maxValsInArrayIndex].length;a++)t[i].push(0);return t}},{key:"hasAllSeriesEqualX",value:function(){for(var t=!0,e=this.w,i=this.filteredSeriesX(),a=0;a<i.length-1;a++)if(i[a][0]!==i[a+1][0]){t=!1;break}return e.globals.allSeriesHasEqualX=t,t}},{key:"filteredSeriesX",value:function(){var t=this.w.globals.seriesX.map((function(t){return t.length>0?t:[]}));return t}}]),t}(),R=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.twoDSeries=[],this.threeDSeries=[],this.twoDSeriesX=[],this.coreUtils=new I(this.ctx)}return a(t,[{key:"isMultiFormat",value:function(){return this.isFormatXY()||this.isFormat2DArray()}},{key:"isFormatXY",value:function(){var t=this.w.config.series.slice(),e=new F(this.ctx);if(this.activeSeriesIndex=e.getActiveConfigSeriesIndex(),void 0!==t[this.activeSeriesIndex].data&&t[this.activeSeriesIndex].data.length>0&&null!==t[this.activeSeriesIndex].data[0]&&void 0!==t[this.activeSeriesIndex].data[0].x&&null!==t[this.activeSeriesIndex].data[0])return!0}},{key:"isFormat2DArray",value:function(){var t=this.w.config.series.slice(),e=new F(this.ctx);if(this.activeSeriesIndex=e.getActiveConfigSeriesIndex(),void 0!==t[this.activeSeriesIndex].data&&t[this.activeSeriesIndex].data.length>0&&void 0!==t[this.activeSeriesIndex].data[0]&&null!==t[this.activeSeriesIndex].data[0]&&t[this.activeSeriesIndex].data[0].constructor===Array)return!0}},{key:"handleFormat2DArray",value:function(t,e){for(var i=this.w.config,a=this.w.globals,s=0;s<t[e].data.length;s++)if(void 0!==t[e].data[s][1]&&(Array.isArray(t[e].data[s][1])&&4===t[e].data[s][1].length?this.twoDSeries.push(g.parseNumber(t[e].data[s][1][3])):5===t[e].data[s].length?this.twoDSeries.push(g.parseNumber(t[e].data[s][4])):this.twoDSeries.push(g.parseNumber(t[e].data[s][1])),a.dataFormatXNumeric=!0),"datetime"===i.xaxis.type){var r=new Date(t[e].data[s][0]);r=new Date(r).getTime(),this.twoDSeriesX.push(r)}else this.twoDSeriesX.push(t[e].data[s][0]);for(var n=0;n<t[e].data.length;n++)void 0!==t[e].data[n][2]&&(this.threeDSeries.push(t[e].data[n][2]),a.isDataXYZ=!0)}},{key:"handleFormatXY",value:function(t,e){var i=this.w.config,a=this.w.globals,s=new C(this.ctx),r=e;a.collapsedSeriesIndices.indexOf(e)>-1&&(r=this.activeSeriesIndex);for(var n=0;n<t[e].data.length;n++)void 0!==t[e].data[n].y&&(Array.isArray(t[e].data[n].y)?this.twoDSeries.push(g.parseNumber(t[e].data[n].y[t[e].data[n].y.length-1])):this.twoDSeries.push(g.parseNumber(t[e].data[n].y)));for(var o=0;o<t[r].data.length;o++){var l="string"==typeof t[r].data[o].x,h=Array.isArray(t[r].data[o].x),c=!h&&!!s.isValidDate(t[r].data[o].x.toString());l||c?l||i.xaxis.convertedCatToNumeric?"datetime"!==i.xaxis.type||a.isRangeData?(this.fallbackToCategory=!0,this.twoDSeriesX.push(t[r].data[o].x)):this.twoDSeriesX.push(s.parseDate(t[r].data[o].x)):"datetime"===i.xaxis.type?this.twoDSeriesX.push(s.parseDate(t[r].data[o].x.toString())):(a.dataFormatXNumeric=!0,a.isXNumeric=!0,this.twoDSeriesX.push(parseFloat(t[r].data[o].x))):h?(this.fallbackToCategory=!0,this.twoDSeriesX.push(t[r].data[o].x)):(a.isXNumeric=!0,a.dataFormatXNumeric=!0,this.twoDSeriesX.push(t[r].data[o].x))}if(t[e].data[0]&&void 0!==t[e].data[0].z){for(var d=0;d<t[e].data.length;d++)this.threeDSeries.push(t[e].data[d].z);a.isDataXYZ=!0}}},{key:"handleRangeData",value:function(t,e){var i=this.w.config,a=this.w.globals,s={};return this.isFormat2DArray()?s=this.handleRangeDataFormat("array",t,e):this.isFormatXY()&&(s=this.handleRangeDataFormat("xy",t,e)),a.seriesRangeStart.push(s.start),a.seriesRangeEnd.push(s.end),"datetime"===i.xaxis.type&&a.seriesRangeBarTimeline.push(s.rangeUniques),a.seriesRangeBarTimeline.forEach((function(t,e){t&&t.forEach((function(t,e){t.y.forEach((function(e,i){for(var a=0;a<t.y.length;a++)if(i!==a){var s=e.y1,r=e.y2,n=t.y[a].y1;s<=t.y[a].y2&&n<=r&&(t.overlaps.indexOf(e.rangeName)<0&&t.overlaps.push(e.rangeName),t.overlaps.indexOf(t.y[a].rangeName)<0&&t.overlaps.push(t.y[a].rangeName))}}))}))})),s}},{key:"handleCandleStickData",value:function(t,e){var i=this.w.globals,a={};return this.isFormat2DArray()?a=this.handleCandleStickDataFormat("array",t,e):this.isFormatXY()&&(a=this.handleCandleStickDataFormat("xy",t,e)),i.seriesCandleO[e]=a.o,i.seriesCandleH[e]=a.h,i.seriesCandleL[e]=a.l,i.seriesCandleC[e]=a.c,a}},{key:"handleRangeDataFormat",value:function(t,e,i){var a=[],s=[],r=e[i].data.filter((function(t,e,i){return e===i.findIndex((function(e){return e.x===t.x}))})).map((function(t,e){return{x:t.x,overlaps:[],y:[]}})),n="Please provide [Start, End] values in valid format. Read more https://apexcharts.com/docs/series/#rangecharts",o=new F(this.ctx).getActiveConfigSeriesIndex();if("array"===t){if(2!==e[o].data[0][1].length)throw new Error(n);for(var l=0;l<e[i].data.length;l++)a.push(e[i].data[l][1][0]),s.push(e[i].data[l][1][1])}else if("xy"===t){if(2!==e[o].data[0].y.length)throw new Error(n);for(var h=function(t){var n=g.randomId(),o=e[i].data[t].x,l={y1:e[i].data[t].y[0],y2:e[i].data[t].y[1],rangeName:n};e[i].data[t].rangeName=n;var h=r.findIndex((function(t){return t.x===o}));r[h].y.push(l),a.push(l.y1),s.push(l.y2)},c=0;c<e[i].data.length;c++)h(c)}return{start:a,end:s,rangeUniques:r}}},{key:"handleCandleStickDataFormat",value:function(t,e,i){var a=[],s=[],r=[],n=[],o="Please provide [Open, High, Low and Close] values in valid format. Read more https://apexcharts.com/docs/series/#candlestick";if("array"===t){if(!Array.isArray(e[i].data[0][1])&&5!==e[i].data[0].length||Array.isArray(e[i].data[0][1])&&4!==e[i].data[0][1].length)throw new Error(o);if(5===e[i].data[0].length)for(var l=0;l<e[i].data.length;l++)a.push(e[i].data[l][1]),s.push(e[i].data[l][2]),r.push(e[i].data[l][3]),n.push(e[i].data[l][4]);else for(var h=0;h<e[i].data.length;h++)a.push(e[i].data[h][1][0]),s.push(e[i].data[h][1][1]),r.push(e[i].data[h][1][2]),n.push(e[i].data[h][1][3])}else if("xy"===t){if(4!==e[i].data[0].y.length)throw new Error(o);for(var c=0;c<e[i].data.length;c++)a.push(e[i].data[c].y[0]),s.push(e[i].data[c].y[1]),r.push(e[i].data[c].y[2]),n.push(e[i].data[c].y[3])}return{o:a,h:s,l:r,c:n}}},{key:"parseDataAxisCharts",value:function(t){for(var e=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.ctx,a=this.w.config,s=this.w.globals,r=new C(i),n=a.labels.length>0?a.labels.slice():a.xaxis.categories.slice(),o=function(){for(var t=0;t<n.length;t++)if("string"==typeof n[t]){if(!r.isValidDate(n[t]))throw new Error("You have provided invalid Date format. Please provide a valid JavaScript Date");e.twoDSeriesX.push(r.parseDate(n[t]))}else{if(13!==String(n[t]).length)throw new Error("Please provide a valid JavaScript timestamp");e.twoDSeriesX.push(n[t])}},l=0;l<t.length;l++){if(this.twoDSeries=[],this.twoDSeriesX=[],this.threeDSeries=[],void 0===t[l].data)return void console.error("It is a possibility that you may have not included 'data' property in series.");if("rangeBar"!==a.chart.type&&"rangeArea"!==a.chart.type&&"rangeBar"!==t[l].type&&"rangeArea"!==t[l].type||(s.isRangeData=!0,this.handleRangeData(t,l)),this.isMultiFormat())this.isFormat2DArray()?this.handleFormat2DArray(t,l):this.isFormatXY()&&this.handleFormatXY(t,l),"candlestick"!==a.chart.type&&"candlestick"!==t[l].type||this.handleCandleStickData(t,l),s.series.push(this.twoDSeries),s.labels.push(this.twoDSeriesX),s.seriesX.push(this.twoDSeriesX),l!==this.activeSeriesIndex||this.fallbackToCategory||(s.isXNumeric=!0);else{"datetime"===a.xaxis.type?(s.isXNumeric=!0,o(),s.seriesX.push(this.twoDSeriesX)):"numeric"===a.xaxis.type&&(s.isXNumeric=!0,n.length>0&&(this.twoDSeriesX=n,s.seriesX.push(this.twoDSeriesX))),s.labels.push(this.twoDSeriesX);var h=t[l].data.map((function(t){return g.parseNumber(t)}));s.series.push(h)}s.seriesZ.push(this.threeDSeries),void 0!==t[l].name?s.seriesNames.push(t[l].name):s.seriesNames.push("series-"+parseInt(l+1,10))}return this.w}},{key:"parseDataNonAxisCharts",value:function(t){var e=this.w.globals,i=this.w.config;e.series=t.slice(),e.seriesNames=i.labels.slice();for(var a=0;a<e.series.length;a++)void 0===e.seriesNames[a]&&e.seriesNames.push("series-"+(a+1));return this.w}},{key:"handleExternalLabelsData",value:function(t){var e=this.w.config,i=this.w.globals;if(e.xaxis.categories.length>0)i.labels=e.xaxis.categories;else if(e.labels.length>0)i.labels=e.labels.slice();else if(this.fallbackToCategory){if(i.labels=i.labels[0],i.seriesRangeBarTimeline.length&&(i.seriesRangeBarTimeline.map((function(t){t.forEach((function(t){i.labels.indexOf(t.x)<0&&t.x&&i.labels.push(t.x)}))})),i.labels=i.labels.filter((function(t,e,i){return i.indexOf(t)===e}))),e.xaxis.convertedCatToNumeric)new L(e).convertCatToNumericXaxis(e,this.ctx,i.seriesX[0]),this._generateExternalLabels(t)}else this._generateExternalLabels(t)}},{key:"_generateExternalLabels",value:function(t){var e=this.w.globals,i=this.w.config,a=[];if(e.axisCharts){if(e.series.length>0)for(var s=0;s<e.series[e.maxValsInArrayIndex].length;s++)a.push(s+1);e.seriesX=[];for(var r=0;r<t.length;r++)e.seriesX.push(a);e.isXNumeric=!0}if(0===a.length){a=e.axisCharts?[]:e.series.map((function(t,e){return e+1}));for(var n=0;n<t.length;n++)e.seriesX.push(a)}e.labels=a,i.xaxis.convertedCatToNumeric&&(e.categoryLabels=a.map((function(t){return i.xaxis.labels.formatter(t)}))),e.noLabelsProvided=!0}},{key:"parseData",value:function(t){var e=this.w,i=e.config,a=e.globals;if(this.excludeCollapsedSeriesInYAxis(),this.fallbackToCategory=!1,this.ctx.core.resetGlobals(),this.ctx.core.isMultipleY(),a.axisCharts?this.parseDataAxisCharts(t):this.parseDataNonAxisCharts(t),this.coreUtils.getLargestSeries(),"bar"===i.chart.type&&i.chart.stacked){var s=new F(this.ctx);a.series=s.setNullSeriesToZeroValues(a.series)}this.coreUtils.getSeriesTotals(),a.axisCharts&&this.coreUtils.getStackedSeriesTotals(),this.coreUtils.getPercentSeries(),a.dataFormatXNumeric||a.isXNumeric&&("numeric"!==i.xaxis.type||0!==i.labels.length||0!==i.xaxis.categories.length)||this.handleExternalLabelsData(t);for(var r=this.coreUtils.getCategoryLabels(a.labels),n=0;n<r.length;n++)if(Array.isArray(r[n])){a.isMultiLineX=!0;break}}},{key:"excludeCollapsedSeriesInYAxis",value:function(){var t=this,e=this.w;e.globals.ignoreYAxisIndexes=e.globals.collapsedSeries.map((function(i,a){if(t.w.globals.isMultipleYAxis&&!e.config.chart.stacked)return i.index}))}}]),t}(),D=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.tooltipKeyFormat="dd MMM"}return a(t,[{key:"xLabelFormat",value:function(t,e,i){var a=this.w;if("datetime"===a.config.xaxis.type&&void 0===a.config.xaxis.labels.formatter&&void 0===a.config.tooltip.x.formatter){var s=new C(this.ctx);return s.formatDate(s.getDate(e),a.config.tooltip.x.format)}return t(e,i)}},{key:"defaultGeneralFormatter",value:function(t){return Array.isArray(t)?t.map((function(t){return t})):t}},{key:"defaultYFormatter",value:function(t,e,i){var a=this.w;return g.isNumber(t)&&(t=0!==a.globals.yValueDecimal?t.toFixed(void 0!==e.decimalsInFloat?e.decimalsInFloat:a.globals.yValueDecimal):a.globals.maxYArr[i]-a.globals.minYArr[i]<10?t.toFixed(1):t.toFixed(0)),t}},{key:"setLabelFormatters",value:function(){var t=this,e=this.w;return e.globals.xLabelFormatter=function(e){return t.defaultGeneralFormatter(e)},e.globals.xaxisTooltipFormatter=function(e){return t.defaultGeneralFormatter(e)},e.globals.ttKeyFormatter=function(e){return t.defaultGeneralFormatter(e)},e.globals.ttZFormatter=function(t){return t},e.globals.legendFormatter=function(e){return t.defaultGeneralFormatter(e)},void 0!==e.config.xaxis.labels.formatter?e.globals.xLabelFormatter=e.config.xaxis.labels.formatter:e.globals.xLabelFormatter=function(t){if(g.isNumber(t)){if(!e.config.xaxis.convertedCatToNumeric&&"numeric"===e.config.xaxis.type&&e.globals.dataPoints<50)return t.toFixed(1);if(e.globals.isBarHorizontal)if(e.globals.maxY-e.globals.minYArr<4)return t.toFixed(1);return t.toFixed(0)}return t},"function"==typeof e.config.tooltip.x.formatter?e.globals.ttKeyFormatter=e.config.tooltip.x.formatter:e.globals.ttKeyFormatter=e.globals.xLabelFormatter,"function"==typeof e.config.xaxis.tooltip.formatter&&(e.globals.xaxisTooltipFormatter=e.config.xaxis.tooltip.formatter),Array.isArray(e.config.tooltip.y)?e.globals.ttVal=e.config.tooltip.y:void 0!==e.config.tooltip.y.formatter&&(e.globals.ttVal=e.config.tooltip.y),void 0!==e.config.tooltip.z.formatter&&(e.globals.ttZFormatter=e.config.tooltip.z.formatter),void 0!==e.config.legend.formatter&&(e.globals.legendFormatter=e.config.legend.formatter),e.config.yaxis.forEach((function(i,a){void 0!==i.labels.formatter?e.globals.yLabelFormatters[a]=i.labels.formatter:e.globals.yLabelFormatters[a]=function(s){return e.globals.xyCharts?Array.isArray(s)?s.map((function(e){return t.defaultYFormatter(e,i,a)})):t.defaultYFormatter(s,i,a):s}})),e.globals}},{key:"heatmapLabelFormatters",value:function(){var t=this.w;if("heatmap"===t.config.chart.type){t.globals.yAxisScale[0].result=t.globals.seriesNames.slice();var e=t.globals.seriesNames.reduce((function(t,e){return t.length>e.length?t:e}),0);t.globals.yAxisScale[0].niceMax=e,t.globals.yAxisScale[0].niceMin=e}}}]),t}(),H=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"getLabel",value:function(t,e,i,a){var s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[],r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:"12px",n=this.w,o=void 0===t[a]?"":t[a],l=o,h=n.globals.xLabelFormatter,c=n.config.xaxis.labels.formatter,d=!1,g=new D(this.ctx),u=o;l=g.xLabelFormat(h,o,u),void 0!==c&&(l=c(o,t[a],a));var f=function(t){var i=null;return e.forEach((function(t){"month"===t.unit?i="year":"day"===t.unit?i="month":"hour"===t.unit?i="day":"minute"===t.unit&&(i="hour")})),i===t};e.length>0?(d=f(e[a].unit),i=e[a].position,l=e[a].value):"datetime"===n.config.xaxis.type&&void 0===c&&(l=""),void 0===l&&(l=""),l=Array.isArray(l)?l:l.toString();var x=new p(this.ctx),b={};return b=n.globals.rotateXLabels?x.getTextRects(l,parseInt(r,10),null,"rotate(".concat(n.config.xaxis.labels.rotate," 0 0)"),!1):x.getTextRects(l,parseInt(r,10)),!Array.isArray(l)&&(0===l.indexOf("NaN")||0===l.toLowerCase().indexOf("invalid")||l.toLowerCase().indexOf("infinity")>=0||s.indexOf(l)>=0&&!n.config.xaxis.labels.showDuplicates)&&(l=""),{x:i,text:l,textRect:b,isBold:d}}},{key:"checkForOverflowingLabels",value:function(t,e,i,a,s){var r=this.w;if(0===t&&r.globals.skipFirstTimelinelabel&&(e.text=""),t===i-1&&r.globals.skipLastTimelinelabel&&(e.text=""),r.config.xaxis.labels.hideOverlappingLabels&&a.length>0){var n=s[s.length-1];e.x<n.textRect.width/(r.globals.rotateXLabels?Math.abs(r.config.xaxis.labels.rotate)/12:1.01)+n.x&&(e.text="")}return e}},{key:"checkForReversedLabels",value:function(t,e){var i=this.w;return i.config.yaxis[t]&&i.config.yaxis[t].reversed&&e.reverse(),e}},{key:"isYAxisHidden",value:function(t){var e=this.w,i=new I(this.ctx);return!e.config.yaxis[t].show||!e.config.yaxis[t].showForNullSeries&&i.isSeriesNull(t)&&-1===e.globals.collapsedSeriesIndices.indexOf(t)}},{key:"drawYAxisTicks",value:function(t,e,i,a,s,r,n){var o=this.w,l=new p(this.ctx),h=o.globals.translateY;if(a.show&&e>0){!0===o.config.yaxis[s].opposite&&(t+=a.width);for(var c=e;c>=0;c--){var d=h+e/10+o.config.yaxis[s].labels.offsetY-1;o.globals.isBarHorizontal&&(d=r*c),"heatmap"===o.config.chart.type&&(d+=r/2);var g=l.drawLine(t+i.offsetX-a.width+a.offsetX,d+a.offsetY,t+i.offsetX+a.offsetX,d+a.offsetY,a.color);n.add(g),h+=r}}}}]),t}(),N=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"fixSvgStringForIe11",value:function(t){if(!g.isIE11())return t;var e=0,i=t.replace(/xmlns="http:\/\/www.w3.org\/2000\/svg"/g,(function(t){return 2===++e?'xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"':t}));return i=(i=i.replace(/xmlns:NS\d+=""/g,"")).replace(/NS\d+:(\w+:\w+=")/g,"$1")}},{key:"getSvgString",value:function(){var t=this.w.globals.dom.Paper.svg();return this.fixSvgStringForIe11(t)}},{key:"cleanup",value:function(){var t=this.w,e=t.globals.dom.baseEl.getElementsByClassName("apexcharts-xcrosshairs"),i=t.globals.dom.baseEl.getElementsByClassName("apexcharts-ycrosshairs"),a=t.globals.dom.baseEl.getElementsByClassName("apexcharts-zoom-rect apexcharts-selection-rect");Array.prototype.forEach.call(a,(function(t){t.setAttribute("width",0)})),e&&(e.setAttribute("x",-500),e.setAttribute("x1",-500),e.setAttribute("x2",-500)),i&&(i.setAttribute("y",-100),i.setAttribute("y1",-100),i.setAttribute("y2",-100))}},{key:"svgUrl",value:function(){this.cleanup();var t=this.getSvgString(),e=new Blob([t],{type:"image/svg+xml;charset=utf-8"});return URL.createObjectURL(e)}},{key:"dataURI",value:function(){var t=this;return new Promise((function(e){var i=t.w;t.cleanup();var a=document.createElement("canvas");a.width=i.globals.svgWidth,a.height=parseInt(i.globals.dom.elWrap.style.height,10);var s="transparent"===i.config.chart.background?"#fff":i.config.chart.background,r=a.getContext("2d");r.fillStyle=s,r.fillRect(0,0,a.width,a.height);var n=t.getSvgString();if(window.canvg&&g.isIE11()){var o=window.canvg.Canvg.fromString(r,n,{ignoreClear:!0,ignoreDimensions:!0});o.start();var l=a.msToBlob();o.stop(),e({blob:l})}else{var h="data:image/svg+xml,"+encodeURIComponent(n),c=new Image;c.crossOrigin="anonymous",c.onload=function(){if(r.drawImage(c,0,0),a.msToBlob){var t=a.msToBlob();e({blob:t})}else{var i=a.toDataURL("image/png");e({imgURI:i})}},c.src=h}}))}},{key:"exportToSVG",value:function(){this.triggerDownload(this.svgUrl(),".svg")}},{key:"exportToPng",value:function(){var t=this;this.dataURI().then((function(e){var i=e.imgURI,a=e.blob;a?navigator.msSaveOrOpenBlob(a,t.w.globals.chartID+".png"):t.triggerDownload(i,".png")}))}},{key:"exportToCSV",value:function(t){var e=this,i=t.series,a=t.columnDelimiter,s=void 0===a?",":a,r=t.lineDelimiter,n=void 0===r?"\n":r,o=this.w,l=[],h=[],c="data:text/csv;charset=utf-8,",d=new R(this.ctx),g=new H(this.ctx),u=function(t){var i="";if(o.globals.axisCharts){if("category"===o.config.xaxis.type||o.config.xaxis.convertedCatToNumeric)if(o.globals.isBarHorizontal){var a=o.globals.yLabelFormatters[0],s=new F(e.ctx).getActiveConfigSeriesIndex();i=a(o.globals.labels[t],{seriesIndex:s,dataPointIndex:t,w:o})}else i=g.getLabel(o.globals.labels,o.globals.timescaleLabels,0,t).text;"datetime"===o.config.xaxis.type&&(o.config.xaxis.categories.length?i=o.config.xaxis.categories[t]:o.config.labels.length&&(i=o.config.labels[t]))}else i=o.config.labels[t];return i};l.push("category"),i.map((function(t,e){o.globals.axisCharts&&l.push(t.name?t.name:"series-".concat(e))})),o.globals.axisCharts||(l.push("value"),h.push(l.join(s))),i.map((function(t,e){o.globals.axisCharts?function(t,e){if(l.length&&h.push(l.join(s)),t.data&&t.data.length)for(var a=0;a<t.data.length;a++){l=[];var r=u(a);if(r||(d.isFormatXY()?r=i[e].data[a].x:d.isFormat2DArray()&&(r=i[e].data[a]?i[e].data[a][0]:"")),0===e){l.push(r);for(var n=0;n<o.globals.series.length;n++)l.push(o.globals.series[n][a])}("candlestick"===o.config.chart.type||t.type&&"candlestick"===t.type)&&(l.pop(),l.push(o.globals.seriesCandleO[e][a]),l.push(o.globals.seriesCandleH[e][a]),l.push(o.globals.seriesCandleL[e][a]),l.push(o.globals.seriesCandleC[e][a])),"rangeBar"===o.config.chart.type&&(l.pop(),l.push(o.globals.seriesRangeStart[e][a]),l.push(o.globals.seriesRangeEnd[e][a])),l.length&&h.push(l.join(s))}}(t,e):((l=[]).push(o.globals.labels[e]),l.push(o.globals.series[e]),h.push(l.join(s)))})),c+=h.join(n),this.triggerDownload(encodeURI(c),".csv")}},{key:"triggerDownload",value:function(t,e){var i=document.createElement("a");i.href=t,i.download=this.w.globals.chartID+e,document.body.appendChild(i),i.click(),document.body.removeChild(i)}}]),t}(),O=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w;var a=this.w;this.axesUtils=new H(i),this.xaxisLabels=a.globals.labels.slice(),a.globals.timescaleLabels.length>0&&!a.globals.isBarHorizontal&&(this.xaxisLabels=a.globals.timescaleLabels.slice()),this.drawnLabels=[],this.drawnLabelsRects=[],"top"===a.config.xaxis.position?this.offY=0:this.offY=a.globals.gridHeight+1,this.offY=this.offY+a.config.xaxis.axisBorder.offsetY,this.isCategoryBarHorizontal="bar"===a.config.chart.type&&a.config.plotOptions.bar.horizontal,this.xaxisFontSize=a.config.xaxis.labels.style.fontSize,this.xaxisFontFamily=a.config.xaxis.labels.style.fontFamily,this.xaxisForeColors=a.config.xaxis.labels.style.colors,this.xaxisBorderWidth=a.config.xaxis.axisBorder.width,this.isCategoryBarHorizontal&&(this.xaxisBorderWidth=a.config.yaxis[0].axisBorder.width.toString()),this.xaxisBorderWidth.indexOf("%")>-1?this.xaxisBorderWidth=a.globals.gridWidth*parseInt(this.xaxisBorderWidth,10)/100:this.xaxisBorderWidth=parseInt(this.xaxisBorderWidth,10),this.xaxisBorderHeight=a.config.xaxis.axisBorder.height,this.yaxis=a.config.yaxis[0]}return a(t,[{key:"drawXaxis",value:function(){var t,e=this,i=this.w,a=new p(this.ctx),s=a.group({class:"apexcharts-xaxis",transform:"translate(".concat(i.config.xaxis.offsetX,", ").concat(i.config.xaxis.offsetY,")")}),r=a.group({class:"apexcharts-xaxis-texts-g",transform:"translate(".concat(i.globals.translateXAxisX,", ").concat(i.globals.translateXAxisY,")")});s.add(r);for(var n=i.globals.padHorizontal,o=[],l=0;l<this.xaxisLabels.length;l++)o.push(this.xaxisLabels[l]);var h=o.length;if(i.globals.isXNumeric){var c=h>1?h-1:h;t=i.globals.gridWidth/c,n=n+t/2+i.config.xaxis.labels.offsetX}else t=i.globals.gridWidth/o.length,n=n+t+i.config.xaxis.labels.offsetX;if(i.config.xaxis.labels.show)for(var d=function(s){var l=n-t/2+i.config.xaxis.labels.offsetX;0===s&&1===h&&t/2===n&&1===i.globals.dataPoints&&(l=i.globals.gridWidth/2);var c=e.axesUtils.getLabel(o,i.globals.timescaleLabels,l,s,e.drawnLabels,e.xaxisFontSize),d=28;i.globals.rotateXLabels&&(d=22);(c=e.axesUtils.checkForOverflowingLabels(s,c,h,e.drawnLabels,e.drawnLabelsRects)).text&&i.globals.xaxisLabelsCount++;var g=a.drawText({x:c.x,y:e.offY+i.config.xaxis.labels.offsetY+d-("top"===i.config.xaxis.position?i.globals.xAxisHeight+i.config.xaxis.axisTicks.height-2:0),text:c.text,textAnchor:"middle",fontWeight:c.isBold?600:i.config.xaxis.labels.style.fontWeight,fontSize:e.xaxisFontSize,fontFamily:e.xaxisFontFamily,foreColor:Array.isArray(e.xaxisForeColors)?i.config.xaxis.convertedCatToNumeric?e.xaxisForeColors[i.globals.minX+s-1]:e.xaxisForeColors[s]:e.xaxisForeColors,isPlainText:!1,cssClass:"apexcharts-xaxis-label "+i.config.xaxis.labels.style.cssClass});r.add(g);var u=document.createElementNS(i.globals.SVGNS,"title");u.textContent=c.text,g.node.appendChild(u),""!==c.text&&(e.drawnLabels.push(c.text),e.drawnLabelsRects.push(c)),n+=t},g=0;g<=h-1;g++)d(g);if(void 0!==i.config.xaxis.title.text){var u=a.group({class:"apexcharts-xaxis-title"}),f=a.drawText({x:i.globals.gridWidth/2+i.config.xaxis.title.offsetX,y:this.offY-parseFloat(this.xaxisFontSize)+i.globals.xAxisLabelsHeight+i.config.xaxis.title.offsetY,text:i.config.xaxis.title.text,textAnchor:"middle",fontSize:i.config.xaxis.title.style.fontSize,fontFamily:i.config.xaxis.title.style.fontFamily,fontWeight:i.config.xaxis.title.style.fontWeight,foreColor:i.config.xaxis.title.style.color,cssClass:"apexcharts-xaxis-title-text "+i.config.xaxis.title.style.cssClass});u.add(f),s.add(u)}if(i.config.xaxis.axisBorder.show){var x=0;"bar"===i.config.chart.type&&i.globals.isXNumeric&&(x-=15);var b=a.drawLine(i.globals.padHorizontal+x+i.config.xaxis.axisBorder.offsetX,this.offY,this.xaxisBorderWidth,this.offY,i.config.xaxis.axisBorder.color,0,this.xaxisBorderHeight);s.add(b)}return s}},{key:"drawXaxisInversed",value:function(t){var e,i,a=this.w,s=new p(this.ctx),r=a.config.yaxis[0].opposite?a.globals.translateYAxisX[t]:0,n=s.group({class:"apexcharts-yaxis apexcharts-xaxis-inversed",rel:t}),o=s.group({class:"apexcharts-yaxis-texts-g apexcharts-xaxis-inversed-texts-g",transform:"translate("+r+", 0)"});n.add(o);var l=[];if(a.config.yaxis[t].show)for(var h=0;h<this.xaxisLabels.length;h++)l.push(this.xaxisLabels[h]);i=-(e=a.globals.gridHeight/l.length)/2.2;var c=a.globals.yLabelFormatters[0],d=a.config.yaxis[0].labels;if(d.show)for(var g=0;g<=l.length-1;g++){var u=void 0===l[g]?"":l[g];u=c(u,{seriesIndex:t,dataPointIndex:g,w:a});var f=0;Array.isArray(u)&&(f=u.length/2*parseInt(d.style.fontSize,10));var x=s.drawText({x:d.offsetX-15,y:i+e+d.offsetY-f,text:u,textAnchor:this.yaxis.opposite?"start":"end",foreColor:Array.isArray(d.style.colors)?d.style.colors[g]:d.style.colors,fontSize:d.style.fontSize,fontFamily:d.style.fontFamily,fontWeight:d.style.fontWeight,isPlainText:!1,cssClass:"apexcharts-yaxis-label "+d.style.cssClass});o.add(x);var b=document.createElementNS(a.globals.SVGNS,"title");if(b.textContent=u.text,x.node.appendChild(b),0!==a.config.yaxis[t].labels.rotate){var m=s.rotateAroundCenter(x.node);x.node.setAttribute("transform","rotate(".concat(a.config.yaxis[t].labels.rotate," 0 ").concat(m.y,")"))}i+=e}if(void 0!==a.config.yaxis[0].title.text){var v=s.group({class:"apexcharts-yaxis-title apexcharts-xaxis-title-inversed",transform:"translate("+r+", 0)"}),y=s.drawText({x:0,y:a.globals.gridHeight/2,text:a.config.yaxis[0].title.text,textAnchor:"middle",foreColor:a.config.yaxis[0].title.style.color,fontSize:a.config.yaxis[0].title.style.fontSize,fontWeight:a.config.yaxis[0].title.style.fontWeight,fontFamily:a.config.yaxis[0].title.style.fontFamily,cssClass:"apexcharts-yaxis-title-text "+a.config.yaxis[0].title.style.cssClass});v.add(y),n.add(v)}var w=0;this.isCategoryBarHorizontal&&a.config.yaxis[0].opposite&&(w=a.globals.gridWidth);var k=a.config.xaxis.axisBorder;if(k.show){var A=s.drawLine(a.globals.padHorizontal+k.offsetX+w,1+k.offsetY,a.globals.padHorizontal+k.offsetX+w,a.globals.gridHeight+k.offsetY,k.color,0);n.add(A)}return a.config.yaxis[0].axisTicks.show&&this.axesUtils.drawYAxisTicks(w,l.length,a.config.yaxis[0].axisBorder,a.config.yaxis[0].axisTicks,0,e,n),n}},{key:"drawXaxisTicks",value:function(t,e){var i=this.w,a=t;if(!(t<0||t-2>i.globals.gridWidth)){var s=this.offY+i.config.xaxis.axisTicks.offsetY,r=s+i.config.xaxis.axisTicks.height;if("top"===i.config.xaxis.position&&(r=s-i.config.xaxis.axisTicks.height),i.config.xaxis.axisTicks.show){var n=new p(this.ctx).drawLine(t+i.config.xaxis.axisTicks.offsetX,s+i.config.xaxis.offsetY,a+i.config.xaxis.axisTicks.offsetX,r+i.config.xaxis.offsetY,i.config.xaxis.axisTicks.color);e.add(n),n.node.classList.add("apexcharts-xaxis-tick")}}}},{key:"getXAxisTicksPositions",value:function(){var t=this.w,e=[],i=this.xaxisLabels.length,a=t.globals.padHorizontal;if(t.globals.timescaleLabels.length>0)for(var s=0;s<i;s++)a=this.xaxisLabels[s].position,e.push(a);else for(var r=i,n=0;n<r;n++){var o=r;t.globals.isXNumeric&&"bar"!==t.config.chart.type&&(o-=1),a+=t.globals.gridWidth/o,e.push(a)}return e}},{key:"xAxisLabelCorrections",value:function(){var t=this.w,e=new p(this.ctx),i=t.globals.dom.baseEl.querySelector(".apexcharts-xaxis-texts-g"),a=t.globals.dom.baseEl.querySelectorAll(".apexcharts-xaxis-texts-g text"),s=t.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxis-inversed text"),r=t.globals.dom.baseEl.querySelectorAll(".apexcharts-xaxis-inversed-texts-g text tspan");if(t.globals.rotateXLabels||t.config.xaxis.labels.rotateAlways)for(var n=0;n<a.length;n++){var o=e.rotateAroundCenter(a[n]);o.y=o.y-1,o.x=o.x+1,a[n].setAttribute("transform","rotate(".concat(t.config.xaxis.labels.rotate," ").concat(o.x," ").concat(o.y,")")),a[n].setAttribute("text-anchor","end");i.setAttribute("transform","translate(0, ".concat(-10,")"));var l=a[n].childNodes;t.config.xaxis.labels.trim&&Array.prototype.forEach.call(l,(function(i){e.placeTextWithEllipsis(i,i.textContent,t.config.xaxis.labels.maxHeight-("bottom"===t.config.legend.position?20:10))}))}else!function(){for(var i=t.globals.gridWidth/(t.globals.labels.length+1),s=0;s<a.length;s++){var r=a[s].childNodes;t.config.xaxis.labels.trim&&"datetime"!==t.config.xaxis.type&&Array.prototype.forEach.call(r,(function(t){e.placeTextWithEllipsis(t,t.textContent,i)}))}}();if(s.length>0){var h=s[s.length-1].getBBox(),c=s[0].getBBox();h.x<-20&&s[s.length-1].parentNode.removeChild(s[s.length-1]),c.x+c.width>t.globals.gridWidth&&!t.globals.isBarHorizontal&&s[0].parentNode.removeChild(s[0]);for(var d=0;d<r.length;d++)e.placeTextWithEllipsis(r[d],r[d].textContent,t.config.yaxis[0].labels.maxWidth-2*parseFloat(t.config.yaxis[0].title.style.fontSize)-20)}}}]),t}(),W=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w;var a=this.w;this.xaxisLabels=a.globals.labels.slice(),this.axesUtils=new H(i),this.isTimelineBar="datetime"===a.config.xaxis.type&&a.globals.seriesRangeBarTimeline.length,a.globals.timescaleLabels.length>0&&(this.xaxisLabels=a.globals.timescaleLabels.slice())}return a(t,[{key:"drawGridArea",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=this.w,i=new p(this.ctx);null===t&&(t=i.group({class:"apexcharts-grid"}));var a=i.drawLine(e.globals.padHorizontal,1,e.globals.padHorizontal,e.globals.gridHeight,"transparent"),s=i.drawLine(e.globals.padHorizontal,e.globals.gridHeight,e.globals.gridWidth,e.globals.gridHeight,"transparent");return t.add(s),t.add(a),t}},{key:"drawGrid",value:function(){var t=null;return this.w.globals.axisCharts&&(t=this.renderGrid(),this.drawGridArea(t.el)),t}},{key:"createGridMask",value:function(){var t=this.w,e=t.globals,i=new p(this.ctx),a=Array.isArray(t.config.stroke.width)?0:t.config.stroke.width;if(Array.isArray(t.config.stroke.width)){var s=0;t.config.stroke.width.forEach((function(t){s=Math.max(s,t)})),a=s}e.dom.elGridRectMask=document.createElementNS(e.SVGNS,"clipPath"),e.dom.elGridRectMask.setAttribute("id","gridRectMask".concat(e.cuid)),e.dom.elGridRectMarkerMask=document.createElementNS(e.SVGNS,"clipPath"),e.dom.elGridRectMarkerMask.setAttribute("id","gridRectMarkerMask".concat(e.cuid));var r=t.config.chart.type,n=0,o=0;("bar"===r||"rangeBar"===r||t.globals.comboBarCount>0)&&t.globals.isXNumeric&&!t.globals.isBarHorizontal&&(n=t.config.grid.padding.left,o=t.config.grid.padding.right,e.barPadForNumericAxis>n&&(n=e.barPadForNumericAxis,o=e.barPadForNumericAxis)),e.dom.elGridRect=i.drawRect(-a/2-n-2,-a/2,e.gridWidth+a+o+n+4,e.gridHeight+a,0,"#fff"),new I(this).getLargestMarkerSize();var l=t.globals.markers.largestSize+1;e.dom.elGridRectMarker=i.drawRect(2*-l,2*-l,e.gridWidth+4*l,e.gridHeight+4*l,0,"#fff"),e.dom.elGridRectMask.appendChild(e.dom.elGridRect.node),e.dom.elGridRectMarkerMask.appendChild(e.dom.elGridRectMarker.node);var h=e.dom.baseEl.querySelector("defs");h.appendChild(e.dom.elGridRectMask),h.appendChild(e.dom.elGridRectMarkerMask)}},{key:"_drawGridLines",value:function(t){var e=t.i,i=t.x1,a=t.y1,s=t.x2,r=t.y2,n=t.xCount,o=t.parent,l=this.w;0===e&&l.globals.skipFirstTimelinelabel||e===n-1&&l.globals.skipLastTimelinelabel||"radar"===l.config.chart.type||(l.config.grid.xaxis.lines.show&&this._drawGridLine({x1:i,y1:a,x2:s,y2:r,parent:o}),new O(this.ctx).drawXaxisTicks(i,this.elg))}},{key:"_drawGridLine",value:function(t){var e=t.x1,i=t.y1,a=t.x2,s=t.y2,r=t.parent,n=this.w,o=n.config.grid.strokeDashArray,l=new p(this).drawLine(e,i,a,s,n.config.grid.borderColor,o);l.node.classList.add("apexcharts-gridline"),r.add(l)}},{key:"_drawGridBandRect",value:function(t){var e=t.c,i=t.x1,a=t.y1,s=t.x2,r=t.y2,n=t.type,o=this.w,l=new p(this.ctx);if("column"!==n||"datetime"!==o.config.xaxis.type){var h=o.config.grid[n].colors[e],c=l.drawRect(i,a,s,r,0,h,o.config.grid[n].opacity);this.elg.add(c),c.attr("clip-path","url(#gridRectMask".concat(o.globals.cuid,")")),c.node.classList.add("apexcharts-grid-".concat(n))}}},{key:"_drawXYLines",value:function(t){var e=this,i=t.xCount,a=t.tickAmount,s=this.w;if(s.config.grid.xaxis.lines.show||s.config.xaxis.axisTicks.show){var r=s.globals.padHorizontal,n=s.globals.gridHeight;s.globals.timescaleLabels.length?function(t){for(var a=t.xC,s=t.x1,r=t.y1,n=t.x2,o=t.y2,l=0;l<a;l++)s=e.xaxisLabels[l].position,n=e.xaxisLabels[l].position,e._drawGridLines({i:l,x1:s,y1:r,x2:n,y2:o,xCount:i,parent:e.elgridLinesV})}({xC:i,x1:r,y1:0,x2:void 0,y2:n}):(s.globals.isXNumeric&&(i=s.globals.xAxisScale.result.length),s.config.xaxis.convertedCatToNumeric&&(i=s.globals.xaxisLabelsCount),function(t){for(var a=t.xC,r=t.x1,n=t.y1,o=t.x2,l=t.y2,h=0;h<a+(s.globals.isXNumeric?0:1);h++)0===h&&1===a&&1===s.globals.dataPoints&&(o=r=s.globals.gridWidth/2),e._drawGridLines({i:h,x1:r,y1:n,x2:o,y2:l,xCount:i,parent:e.elgridLinesV}),o=r+=s.globals.gridWidth/(s.globals.isXNumeric?a-1:a)}({xC:i,x1:r,y1:0,x2:void 0,y2:n}))}if(s.config.grid.yaxis.lines.show){var o=0,l=0,h=s.globals.gridWidth,c=a+1;this.isTimelineBar&&(c=s.globals.labels.length);for(var d=0;d<c+(this.isTimelineBar?1:0);d++)this._drawGridLine({x1:0,y1:o,x2:h,y2:l,parent:this.elgridLinesH}),l=o+=s.globals.gridHeight/(this.isTimelineBar?c:a)}}},{key:"_drawInvertedXYLines",value:function(t){var e=t.xCount,i=this.w;if(i.config.grid.xaxis.lines.show||i.config.xaxis.axisTicks.show)for(var a,s=i.globals.padHorizontal,r=i.globals.gridHeight,n=0;n<e+1;n++){i.config.grid.xaxis.lines.show&&this._drawGridLine({x1:s,y1:0,x2:a,y2:r,parent:this.elgridLinesV}),new O(this.ctx).drawXaxisTicks(s,this.elg),a=s=s+i.globals.gridWidth/e+.3}if(i.config.grid.yaxis.lines.show)for(var o=0,l=0,h=i.globals.gridWidth,c=0;c<i.globals.dataPoints+1;c++)this._drawGridLine({x1:0,y1:o,x2:h,y2:l,parent:this.elgridLinesH}),l=o+=i.globals.gridHeight/i.globals.dataPoints}},{key:"renderGrid",value:function(){var t=this.w,e=new p(this.ctx);this.elg=e.group({class:"apexcharts-grid"}),this.elgridLinesH=e.group({class:"apexcharts-gridlines-horizontal"}),this.elgridLinesV=e.group({class:"apexcharts-gridlines-vertical"}),this.elg.add(this.elgridLinesH),this.elg.add(this.elgridLinesV),t.config.grid.show||(this.elgridLinesV.hide(),this.elgridLinesH.hide());for(var i,a=t.globals.yAxisScale.length?t.globals.yAxisScale[0].result.length-1:5,s=0;s<t.globals.series.length&&(void 0!==t.globals.yAxisScale[s]&&(a=t.globals.yAxisScale[s].result.length-1),!(a>2));s++);return!t.globals.isBarHorizontal||this.isTimelineBar?(i=this.xaxisLabels.length,this.isTimelineBar&&(a=t.globals.labels.length),this._drawXYLines({xCount:i,tickAmount:a})):(i=a,a=t.globals.xTickAmount,this._drawInvertedXYLines({xCount:i,tickAmount:a})),this.drawGridBands(i,a),{el:this.elg,xAxisTickWidth:t.globals.gridWidth/i}}},{key:"drawGridBands",value:function(t,e){var i=this.w;if(void 0!==i.config.grid.row.colors&&i.config.grid.row.colors.length>0)for(var a=0,s=i.globals.gridHeight/e,r=i.globals.gridWidth,n=0,o=0;n<e;n++,o++)o>=i.config.grid.row.colors.length&&(o=0),this._drawGridBandRect({c:o,x1:0,y1:a,x2:r,y2:s,type:"row"}),a+=i.globals.gridHeight/e;if(void 0!==i.config.grid.column.colors&&i.config.grid.column.colors.length>0)for(var l=i.globals.isBarHorizontal||"category"!==i.config.xaxis.type&&!i.config.xaxis.convertedCatToNumeric?t:t-1,h=i.globals.padHorizontal,c=i.globals.padHorizontal+i.globals.gridWidth/l,d=i.globals.gridHeight,g=0,u=0;g<t;g++,u++)u>=i.config.grid.column.colors.length&&(u=0),this._drawGridBandRect({c:u,x1:h,y1:0,x2:c,y2:d,type:"column"}),h+=i.globals.gridWidth/l}}]),t}(),B=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"niceScale",value:function(t,e,i){var a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:10,r=arguments.length>5?arguments[5]:void 0,n=this.w;if("dataPoints"===s&&(s=n.globals.dataPoints-1),t===Number.MIN_VALUE&&0===e||!g.isNumber(t)&&!g.isNumber(e)||t===Number.MIN_VALUE&&e===-Number.MAX_VALUE){t=0,e=s;var o=this.linearScale(t,e,s);return o}t>e?(console.warn("axis.min cannot be greater than axis.max"),e=t+.1):t===e&&(t=0===t?0:t-.5,e=0===e?2:e+.5);var l=[],h=Math.abs(e-t);h<1&&r&&("candlestick"===n.config.chart.type||"candlestick"===n.config.series[a].type||n.globals.isRangeData)&&(e*=1.01);var c=s+1;c<2?c=2:c>2&&(c-=2);var d=h/c,u=Math.floor(g.log10(d)),f=Math.pow(10,u),p=Math.round(d/f);p<1&&(p=1);var x=p*f,b=x*Math.floor(t/x),m=x*Math.ceil(e/x),v=b;if(r&&h>2){for(;l.push(v),!((v+=x)>m););return{result:l,niceMin:l[0],niceMax:l[l.length-1]}}var y=t;(l=[]).push(y);for(var w=Math.abs(e-t)/s,k=0;k<=s;k++)y+=w,l.push(y);return l[l.length-2]>=e&&l.pop(),{result:l,niceMin:l[0],niceMax:l[l.length-1]}}},{key:"linearScale",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:10,a=Math.abs(e-t),s=a/i;i===Number.MAX_VALUE&&(i=10,s=1);for(var r=[],n=t;i>=0;)r.push(n),n+=s,i-=1;return{result:r,niceMin:r[0],niceMax:r[r.length-1]}}},{key:"logarithmicScale",value:function(t,e,i,a){(e<0||e===Number.MIN_VALUE)&&(e=.01);for(var s=Math.log(e)/Math.log(10),r=Math.log(i)/Math.log(10),n=Math.abs(i-e)/a,o=[],l=e;a>=0;)o.push(l),l+=n,a-=1;var h=o.map((function(t,a){t<=0&&(t=.01);var n=(r-s)/(i-e),o=Math.pow(10,s+n*(t-s));return Math.round(o/g.roundToBase(o,10))*g.roundToBase(o,10)}));return 0===h[0]&&(h[0]=1),{result:h,niceMin:h[0],niceMax:h[h.length-1]}}},{key:"setYScaleForIndex",value:function(t,e,i){var a=this.w.globals,s=this.w.config,r=a.isBarHorizontal?s.xaxis:s.yaxis[t];void 0===a.yAxisScale[t]&&(a.yAxisScale[t]=[]);var n=Math.abs(i-e);if(r.logarithmic&&n<=5&&(a.invalidLogScale=!0),r.logarithmic&&n>5)a.allSeriesCollapsed=!1,a.yAxisScale[t]=this.logarithmicScale(t,e,i,r.tickAmount?r.tickAmount:Math.floor(Math.log10(i)));else if(i!==-Number.MAX_VALUE&&g.isNumber(i))if(a.allSeriesCollapsed=!1,void 0===r.min&&void 0===r.max||r.forceNiceScale){var o=void 0===s.yaxis[t].max&&void 0===s.yaxis[t].min||s.yaxis[t].forceNiceScale;a.yAxisScale[t]=this.niceScale(e,i,n,t,r.tickAmount?r.tickAmount:n<5&&n>1?n+1:5,o)}else a.yAxisScale[t]=this.linearScale(e,i,r.tickAmount);else a.yAxisScale[t]=this.linearScale(0,5,5)}},{key:"setXScale",value:function(t,e){var i=this.w,a=i.globals,s=i.config.xaxis,r=Math.abs(e-t);return e!==-Number.MAX_VALUE&&g.isNumber(e)?a.xAxisScale=this.niceScale(t,e,r,0,s.tickAmount?s.tickAmount:r<5&&r>1?r+1:5):a.xAxisScale=this.linearScale(0,5,5),a.xAxisScale}},{key:"setMultipleYScales",value:function(){var t=this,e=this.w.globals,i=this.w.config,a=e.minYArr.concat([]),s=e.maxYArr.concat([]),r=[];i.yaxis.forEach((function(e,n){var o=n;i.series.forEach((function(t,i){t.name===e.seriesName&&(o=i,n!==i?r.push({index:i,similarIndex:n,alreadyExists:!0}):r.push({index:i}))}));var l=a[o],h=s[o];t.setYScaleForIndex(n,l,h)})),this.sameScaleInMultipleAxes(a,s,r)}},{key:"sameScaleInMultipleAxes",value:function(t,e,i){var a=this,s=this.w.config,r=this.w.globals,n=[];i.forEach((function(t){t.alreadyExists&&(void 0===n[t.index]&&(n[t.index]=[]),n[t.index].push(t.index),n[t.index].push(t.similarIndex))})),r.yAxisSameScaleIndices=n,n.forEach((function(t,e){n.forEach((function(i,a){var s,r;e!==a&&(s=t,r=i,s.filter((function(t){return-1!==r.indexOf(t)}))).length>0&&(n[e]=n[e].concat(n[a]))}))}));var o=n.map((function(t){return t.filter((function(e,i){return t.indexOf(e)===i}))})).map((function(t){return t.sort()}));n=n.filter((function(t){return!!t}));var l=o.slice(),h=l.map((function(t){return JSON.stringify(t)}));l=l.filter((function(t,e){return h.indexOf(JSON.stringify(t))===e}));var c=[],d=[];t.forEach((function(t,i){l.forEach((function(a,s){a.indexOf(i)>-1&&(void 0===c[s]&&(c[s]=[],d[s]=[]),c[s].push({key:i,value:t}),d[s].push({key:i,value:e[i]}))}))}));var g=Array.apply(null,Array(l.length)).map(Number.prototype.valueOf,Number.MIN_VALUE),u=Array.apply(null,Array(l.length)).map(Number.prototype.valueOf,-Number.MAX_VALUE);c.forEach((function(t,e){t.forEach((function(t,i){g[e]=Math.min(t.value,g[e])}))})),d.forEach((function(t,e){t.forEach((function(t,i){u[e]=Math.max(t.value,u[e])}))})),t.forEach((function(t,e){d.forEach((function(t,i){var n=g[i],o=u[i];s.chart.stacked&&(o=0,t.forEach((function(t,e){t.value!==-Number.MAX_VALUE&&(o+=t.value),n!==Number.MIN_VALUE&&(n+=c[i][e].value)}))),t.forEach((function(i,l){t[l].key===e&&(void 0!==s.yaxis[e].min&&(n="function"==typeof s.yaxis[e].min?s.yaxis[e].min(r.minY):s.yaxis[e].min),void 0!==s.yaxis[e].max&&(o="function"==typeof s.yaxis[e].max?s.yaxis[e].max(r.maxY):s.yaxis[e].max),a.setYScaleForIndex(e,n,o))}))}))}))}},{key:"autoScaleY",value:function(t,e,i){t||(t=this);var a=t.w;if(a.globals.isMultipleYAxis||a.globals.collapsedSeries.length)return console.warn("autoScaleYaxis is not supported in a multi-yaxis chart."),e;var s=a.globals.seriesX[0],r=a.config.chart.stacked;return e.forEach((function(t,n){for(var o=0,l=0;l<s.length;l++)if(s[l]>=i.xaxis.min){o=l;break}var h,c,d=a.globals.minYArr[n],g=a.globals.maxYArr[n],u=a.globals.stackedSeriesTotals;a.globals.series.forEach((function(n,l){var f=n[o];r?(f=u[o],h=c=f,u.forEach((function(t,e){s[e]<=i.xaxis.max&&s[e]>=i.xaxis.min&&(t>c&&null!==t&&(c=t),n[e]<h&&null!==n[e]&&(h=n[e]))}))):(h=c=f,n.forEach((function(t,e){if(s[e]<=i.xaxis.max&&s[e]>=i.xaxis.min){var r=t,n=t;a.globals.series.forEach((function(i,a){null!==t&&(r=Math.min(i[e],r),n=Math.max(i[e],n))})),n>c&&null!==n&&(c=n),r<h&&null!==r&&(h=r)}}))),void 0===h&&void 0===c&&(h=d,c=g),(c*=c<0?.9:1.1)<0&&c<g&&(c=g),(h*=h<0?1.1:.9)<0&&h>d&&(h=d),e.length>1?(e[l].min=void 0===t.min?h:t.min,e[l].max=void 0===t.max?c:t.max):(e[0].min=void 0===t.min?h:t.min,e[0].max=void 0===t.max?c:t.max)}))})),e}}]),t}(),V=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.scales=new B(i)}return a(t,[{key:"init",value:function(){this.setYRange(),this.setXRange(),this.setZRange()}},{key:"getMinYMaxY",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:Number.MAX_VALUE,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:-Number.MAX_VALUE,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,s=this.w.config,r=this.w.globals,n=-Number.MAX_VALUE,o=Number.MIN_VALUE;null===a&&(a=t+1);var l=r.series,h=l,c=l;"candlestick"===s.chart.type?(h=r.seriesCandleL,c=r.seriesCandleH):r.isRangeData&&(h=r.seriesRangeStart,c=r.seriesRangeEnd);for(var d=t;d<a;d++){r.dataPoints=Math.max(r.dataPoints,l[d].length);for(var u=0;u<r.series[d].length;u++){var f=l[d][u];null!==f&&g.isNumber(f)?(n=Math.max(n,c[d][u]),e=Math.min(e,h[d][u]),i=Math.max(i,h[d][u]),"candlestick"===this.w.config.chart.type&&(n=Math.max(n,r.seriesCandleO[d][u]),n=Math.max(n,r.seriesCandleH[d][u]),n=Math.max(n,r.seriesCandleL[d][u]),i=n=Math.max(n,r.seriesCandleC[d][u])),g.isFloat(f)&&(f=g.noExponents(f),r.yValueDecimal=Math.max(r.yValueDecimal,f.toString().split(".")[1].length)),o>h[d][u]&&h[d][u]<0&&(o=h[d][u])):r.hasNullValues=!0}}return"rangeBar"===s.chart.type&&r.seriesRangeStart.length&&"datetime"===s.xaxis.type&&(o=e),"bar"===s.chart.type&&(o<0&&n<0&&(n=0),o===Number.MIN_VALUE&&(o=0)),{minY:o,maxY:n,lowestY:e,highestY:i}}},{key:"setYRange",value:function(){var t=this.w.globals,e=this.w.config;t.maxY=-Number.MAX_VALUE,t.minY=Number.MIN_VALUE;var i=Number.MAX_VALUE;if(t.isMultipleYAxis)for(var a=0;a<t.series.length;a++){var s=this.getMinYMaxY(a,i,null,a+1);t.minYArr.push(s.minY),t.maxYArr.push(s.maxY),i=s.lowestY}var r=this.getMinYMaxY(0,i,null,t.series.length);if(t.minY=r.minY,t.maxY=r.maxY,i=r.lowestY,e.chart.stacked&&this._setStackedMinMax(),("line"===e.chart.type||"area"===e.chart.type||"candlestick"===e.chart.type)&&t.minY===Number.MIN_VALUE&&i!==-Number.MAX_VALUE&&i!==t.maxY){var n=t.maxY-i;i>=0&&i<=10&&(n=0),t.minY=i-5*n/100,i>0&&t.minY<0&&(t.minY=0),t.maxY=t.maxY+5*n/100}if(e.yaxis.forEach((function(e,i){void 0!==e.max&&("number"==typeof e.max?t.maxYArr[i]=e.max:"function"==typeof e.max&&(t.maxYArr[i]=e.max(t.maxY)),t.maxY=t.maxYArr[i]),void 0!==e.min&&("number"==typeof e.min?t.minYArr[i]=e.min:"function"==typeof e.min&&(t.minYArr[i]=e.min(t.minY)),t.minY=t.minYArr[i])})),t.isBarHorizontal){["min","max"].forEach((function(i){void 0!==e.xaxis[i]&&"number"==typeof e.xaxis[i]&&("min"===i?t.minY=e.xaxis[i]:t.maxY=e.xaxis[i])}))}return t.isMultipleYAxis?(this.scales.setMultipleYScales(),t.minY=i,t.yAxisScale.forEach((function(e,i){t.minYArr[i]=e.niceMin,t.maxYArr[i]=e.niceMax}))):(this.scales.setYScaleForIndex(0,t.minY,t.maxY),t.minY=t.yAxisScale[0].niceMin,t.maxY=t.yAxisScale[0].niceMax,t.minYArr[0]=t.yAxisScale[0].niceMin,t.maxYArr[0]=t.yAxisScale[0].niceMax),{minY:t.minY,maxY:t.maxY,minYArr:t.minYArr,maxYArr:t.maxYArr}}},{key:"setXRange",value:function(){var t=this.w.globals,e=this.w.config,i="numeric"===e.xaxis.type||"datetime"===e.xaxis.type||"category"===e.xaxis.type&&!t.noLabelsProvided||t.noLabelsProvided||t.isXNumeric;if(t.isXNumeric&&function(){for(var e=0;e<t.series.length;e++)if(t.labels[e])for(var i=0;i<t.labels[e].length;i++)null!==t.labels[e][i]&&g.isNumber(t.labels[e][i])&&(t.maxX=Math.max(t.maxX,t.labels[e][i]),t.initialMaxX=Math.max(t.maxX,t.labels[e][i]),t.minX=Math.min(t.minX,t.labels[e][i]),t.initialMinX=Math.min(t.minX,t.labels[e][i]))}(),t.noLabelsProvided&&0===e.xaxis.categories.length&&(t.maxX=t.labels[t.labels.length-1],t.initialMaxX=t.labels[t.labels.length-1],t.minX=1,t.initialMinX=1),t.isXNumeric||t.noLabelsProvided||t.dataFormatXNumeric){var a;if(void 0===e.xaxis.tickAmount?(a=Math.round(t.svgWidth/150),"numeric"===e.xaxis.type&&t.dataPoints<30&&(a=t.dataPoints-1),a>t.dataPoints&&0!==t.dataPoints&&(a=t.dataPoints-1)):"dataPoints"===e.xaxis.tickAmount?(t.series.length>1&&(a=t.series[t.maxValsInArrayIndex].length-1),t.isXNumeric&&(a=t.maxX-t.minX-1)):a=e.xaxis.tickAmount,t.xTickAmount=a,void 0!==e.xaxis.max&&"number"==typeof e.xaxis.max&&(t.maxX=e.xaxis.max),void 0!==e.xaxis.min&&"number"==typeof e.xaxis.min&&(t.minX=e.xaxis.min),void 0!==e.xaxis.range&&(t.minX=t.maxX-e.xaxis.range),t.minX!==Number.MAX_VALUE&&t.maxX!==-Number.MAX_VALUE)if(e.xaxis.convertedCatToNumeric&&!t.dataFormatXNumeric){for(var s=[],r=t.minX-1;r<t.maxX;r++)s.push(r+1);t.xAxisScale={result:s,niceMin:s[0],niceMax:s[s.length-1]}}else t.xAxisScale=this.scales.setXScale(t.minX,t.maxX);else t.xAxisScale=this.scales.linearScale(1,a,a),t.noLabelsProvided&&t.labels.length>0&&(t.xAxisScale=this.scales.linearScale(1,t.labels.length,a-1),t.seriesX=t.labels.slice());i&&(t.labels=t.xAxisScale.result.slice())}return t.isBarHorizontal&&t.labels.length&&(t.xTickAmount=t.labels.length),this._handleSingleDataPoint(),this._getMinXDiff(),{minX:t.minX,maxX:t.maxX}}},{key:"setZRange",value:function(){var t=this.w.globals;if(t.isDataXYZ)for(var e=0;e<t.series.length;e++)if(void 0!==t.seriesZ[e])for(var i=0;i<t.seriesZ[e].length;i++)null!==t.seriesZ[e][i]&&g.isNumber(t.seriesZ[e][i])&&(t.maxZ=Math.max(t.maxZ,t.seriesZ[e][i]),t.minZ=Math.min(t.minZ,t.seriesZ[e][i]))}},{key:"_handleSingleDataPoint",value:function(){var t=this.w.globals,e=this.w.config;if(t.minX===t.maxX){var i=new C(this.ctx);if("datetime"===e.xaxis.type){var a=i.getDate(t.minX);a.setUTCDate(a.getDate()-2),t.minX=new Date(a).getTime();var s=i.getDate(t.maxX);s.setUTCDate(s.getDate()+2),t.maxX=new Date(s).getTime()}else("numeric"===e.xaxis.type||"category"===e.xaxis.type&&!t.noLabelsProvided)&&(t.minX=t.minX-2,t.initialMinX=t.minX,t.maxX=t.maxX+2,t.initialMaxX=t.maxX)}}},{key:"_getMinXDiff",value:function(){var t=this.w.globals;t.isXNumeric&&t.seriesX.forEach((function(e,i){1===e.length&&e.push(t.seriesX[t.maxValsInArrayIndex][t.seriesX[t.maxValsInArrayIndex].length-1]);var a=e.slice();a.sort((function(t,e){return t-e})),a.forEach((function(e,a){if(a>0){var s=e-t.seriesX[i][a-1];s>0&&(t.minXDiff=Math.min(s,t.minXDiff))}})),1===t.dataPoints&&t.minXDiff===Number.MAX_VALUE&&(t.minXDiff=.5)}))}},{key:"_setStackedMinMax",value:function(){var t=this.w.globals,e=[],i=[];if(t.series.length)for(var a=0;a<t.series[t.maxValsInArrayIndex].length;a++)for(var s=0,r=0,n=0;n<t.series.length;n++)null!==t.series[n][a]&&g.isNumber(t.series[n][a])&&(t.series[n][a]>0?s=s+parseFloat(t.series[n][a])+1e-4:r+=parseFloat(t.series[n][a])),n===t.series.length-1&&(e.push(s),i.push(r));for(var o=0;o<e.length;o++)t.maxY=Math.max(t.maxY,e[o]),t.minY=Math.min(t.minY,i[o])}}]),t}(),G=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w;var a=this.w;this.xaxisFontSize=a.config.xaxis.labels.style.fontSize,this.axisFontFamily=a.config.xaxis.labels.style.fontFamily,this.xaxisForeColors=a.config.xaxis.labels.style.colors,this.isCategoryBarHorizontal="bar"===a.config.chart.type&&a.config.plotOptions.bar.horizontal,this.xAxisoffX=0,"bottom"===a.config.xaxis.position&&(this.xAxisoffX=a.globals.gridHeight),this.drawnLabels=[],this.axesUtils=new H(i)}return a(t,[{key:"drawYaxis",value:function(t){var e=this.w,i=new p(this.ctx),a=e.config.yaxis[t].labels.style,s=a.fontSize,r=a.fontFamily,n=a.fontWeight,o=i.group({class:"apexcharts-yaxis",rel:t,transform:"translate("+e.globals.translateYAxisX[t]+", 0)"});if(this.axesUtils.isYAxisHidden(t))return o;var l=i.group({class:"apexcharts-yaxis-texts-g"});o.add(l);var h=e.globals.yAxisScale[t].result.length-1,c=e.globals.gridHeight/h,d=e.globals.translateY,g=e.globals.yLabelFormatters[t],u=e.globals.yAxisScale[t].result.slice();u=this.axesUtils.checkForReversedLabels(t,u);var f="";if(e.config.yaxis[t].labels.show)for(var x=function(o){var p=u[o];p=g(p,o);var x=e.config.yaxis[t].labels.padding;e.config.yaxis[t].opposite&&0!==e.config.yaxis.length&&(x*=-1);var b=i.drawText({x:x,y:d+h/10+e.config.yaxis[t].labels.offsetY+1,text:p,textAnchor:e.config.yaxis[t].opposite?"start":"end",fontSize:s,fontFamily:r,fontWeight:n,foreColor:Array.isArray(a.colors)?a.colors[o]:a.colors,isPlainText:!1,cssClass:"apexcharts-yaxis-label "+a.cssClass});if(o===h&&(f=b),l.add(b),0!==e.config.yaxis[t].labels.rotate){var m=i.rotateAroundCenter(f.node),v=i.rotateAroundCenter(b.node);b.node.setAttribute("transform","rotate(".concat(e.config.yaxis[t].labels.rotate," ").concat(m.x," ").concat(v.y,")"))}d+=c},b=h;b>=0;b--)x(b);if(void 0!==e.config.yaxis[t].title.text){var m=i.group({class:"apexcharts-yaxis-title"}),v=0;e.config.yaxis[t].opposite&&(v=e.globals.translateYAxisX[t]);var y=i.drawText({x:v,y:e.globals.gridHeight/2+e.globals.translateY+e.config.yaxis[t].title.offsetY,text:e.config.yaxis[t].title.text,textAnchor:"end",foreColor:e.config.yaxis[t].title.style.color,fontSize:e.config.yaxis[t].title.style.fontSize,fontWeight:e.config.yaxis[t].title.style.fontWeight,fontFamily:e.config.yaxis[t].title.style.fontFamily,cssClass:"apexcharts-yaxis-title-text "+e.config.yaxis[t].title.style.cssClass});m.add(y),o.add(m)}var w=e.config.yaxis[t].axisBorder,k=31+w.offsetX;if(e.config.yaxis[t].opposite&&(k=-31-w.offsetX),w.show){var A=i.drawLine(k,e.globals.translateY+w.offsetY-2,k,e.globals.gridHeight+e.globals.translateY+w.offsetY+2,w.color,0,w.width);o.add(A)}return e.config.yaxis[t].axisTicks.show&&this.axesUtils.drawYAxisTicks(k,h,w,e.config.yaxis[t].axisTicks,t,c,o),o}},{key:"drawYaxisInversed",value:function(t){var e=this.w,i=new p(this.ctx),a=i.group({class:"apexcharts-xaxis apexcharts-yaxis-inversed"}),s=i.group({class:"apexcharts-xaxis-texts-g",transform:"translate(".concat(e.globals.translateXAxisX,", ").concat(e.globals.translateXAxisY,")")});a.add(s);var r=e.globals.yAxisScale[t].result.length-1,n=e.globals.gridWidth/r+.1,o=n+e.config.xaxis.labels.offsetX,l=e.globals.xLabelFormatter,h=e.globals.yAxisScale[t].result.slice(),c=e.globals.timescaleLabels;c.length>0&&(this.xaxisLabels=c.slice(),r=(h=c.slice()).length),h=this.axesUtils.checkForReversedLabels(t,h);var d=c.length;if(e.config.xaxis.labels.show)for(var g=d?0:r;d?g<d:g>=0;d?g++:g--){var u=h[g];u=l(u,g);var f=e.globals.gridWidth+e.globals.padHorizontal-(o-n+e.config.xaxis.labels.offsetX);if(c.length){var x=this.axesUtils.getLabel(h,c,f,g,this.drawnLabels,this.xaxisFontSize);f=x.x,u=x.text,this.drawnLabels.push(x.text),0===g&&e.globals.skipFirstTimelinelabel&&(u=""),g===h.length-1&&e.globals.skipLastTimelinelabel&&(u="")}var b=i.drawText({x:f,y:this.xAxisoffX+e.config.xaxis.labels.offsetY+30-("top"===e.config.xaxis.position?e.globals.xAxisHeight+e.config.xaxis.axisTicks.height-2:0),text:u,textAnchor:"middle",foreColor:Array.isArray(this.xaxisForeColors)?this.xaxisForeColors[t]:this.xaxisForeColors,fontSize:this.xaxisFontSize,fontFamily:this.xaxisFontFamily,fontWeight:e.config.xaxis.labels.style.fontWeight,isPlainText:!1,cssClass:"apexcharts-xaxis-label "+e.config.xaxis.labels.style.cssClass});s.add(b),b.tspan(u);var m=document.createElementNS(e.globals.SVGNS,"title");m.textContent=u,b.node.appendChild(m),o+=n}return this.inversedYAxisTitleText(a),this.inversedYAxisBorder(a),a}},{key:"inversedYAxisBorder",value:function(t){var e=this.w,i=new p(this.ctx),a=e.config.xaxis.axisBorder;if(a.show){var s=0;"bar"===e.config.chart.type&&e.globals.isXNumeric&&(s-=15);var r=i.drawLine(e.globals.padHorizontal+s+a.offsetX,this.xAxisoffX,e.globals.gridWidth,this.xAxisoffX,a.color,0,a.height);t.add(r)}}},{key:"inversedYAxisTitleText",value:function(t){var e=this.w,i=new p(this.ctx);if(void 0!==e.config.xaxis.title.text){var a=i.group({class:"apexcharts-xaxis-title apexcharts-yaxis-title-inversed"}),s=i.drawText({x:e.globals.gridWidth/2+e.config.xaxis.title.offsetX,y:this.xAxisoffX+parseFloat(this.xaxisFontSize)+parseFloat(e.config.xaxis.title.style.fontSize)+e.config.xaxis.title.offsetY+20,text:e.config.xaxis.title.text,textAnchor:"middle",fontSize:e.config.xaxis.title.style.fontSize,fontFamily:e.config.xaxis.title.style.fontFamily,fontWeight:e.config.xaxis.title.style.fontWeight,cssClass:"apexcharts-xaxis-title-text "+e.config.xaxis.title.style.cssClass});a.add(s),t.add(a)}}},{key:"yAxisTitleRotate",value:function(t,e){var i=this.w,a=new p(this.ctx),s={width:0,height:0},r={width:0,height:0},n=i.globals.dom.baseEl.querySelector(" .apexcharts-yaxis[rel='".concat(t,"'] .apexcharts-yaxis-texts-g"));null!==n&&(s=n.getBoundingClientRect());var o=i.globals.dom.baseEl.querySelector(".apexcharts-yaxis[rel='".concat(t,"'] .apexcharts-yaxis-title text"));if(null!==o&&(r=o.getBoundingClientRect()),null!==o){var l=this.xPaddingForYAxisTitle(t,s,r,e);o.setAttribute("x",l.xPos-(e?10:0))}if(null!==o){var h=a.rotateAroundCenter(o);o.setAttribute("transform","rotate(".concat(e?"":"-").concat(i.config.yaxis[t].title.rotate," ").concat(h.x," ").concat(h.y,")"))}}},{key:"xPaddingForYAxisTitle",value:function(t,e,i,a){var s=this.w,r=0,n=0,o=10;return void 0===s.config.yaxis[t].title.text||t<0?{xPos:n,padd:0}:(a?(n=e.width+s.config.yaxis[t].title.offsetX+i.width/2+o/2,0===(r+=1)&&(n-=o/2)):(n=-1*e.width+s.config.yaxis[t].title.offsetX+o/2+i.width/2,s.globals.isBarHorizontal&&(o=25,n=-1*e.width-s.config.yaxis[t].title.offsetX-o)),{xPos:n,padd:o})}},{key:"setYAxisXPosition",value:function(t,e){var i=this.w,a=0,s=0,r=18,n=1;i.config.yaxis.length>1&&(this.multipleYs=!0),i.config.yaxis.map((function(o,l){var h=i.globals.ignoreYAxisIndexes.indexOf(l)>-1||!o.show||o.floating||0===t[l].width,c=t[l].width+e[l].width;o.opposite?i.globals.isBarHorizontal?(s=i.globals.gridWidth+i.globals.translateX-1,i.globals.translateYAxisX[l]=s-o.labels.offsetX):(s=i.globals.gridWidth+i.globals.translateX+n,h||(n=n+c+20),i.globals.translateYAxisX[l]=s-o.labels.offsetX+20):(a=i.globals.translateX-r,h||(r=r+c+20),i.globals.translateYAxisX[l]=a+o.labels.offsetX)}))}},{key:"setYAxisTextAlignments",value:function(){var t=this.w,e=t.globals.dom.baseEl.getElementsByClassName("apexcharts-yaxis");(e=g.listToArray(e)).forEach((function(e,i){var a=t.config.yaxis[i];if(void 0!==a.labels.align){var s=t.globals.dom.baseEl.querySelector(".apexcharts-yaxis[rel='".concat(i,"'] .apexcharts-yaxis-texts-g")),r=t.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxis[rel='".concat(i,"'] .apexcharts-yaxis-label"));r=g.listToArray(r);var n=s.getBoundingClientRect();"left"===a.labels.align?(r.forEach((function(t,e){t.setAttribute("text-anchor","start")})),a.opposite||s.setAttribute("transform","translate(-".concat(n.width,", 0)"))):"center"===a.labels.align?(r.forEach((function(t,e){t.setAttribute("text-anchor","middle")})),s.setAttribute("transform","translate(".concat(n.width/2*(a.opposite?1:-1),", 0)"))):"right"===a.labels.align&&(r.forEach((function(t,e){t.setAttribute("text-anchor","end")})),a.opposite&&s.setAttribute("transform","translate(".concat(n.width,", 0)")))}}))}}]),t}(),_=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.documentEvent=g.bind(this.documentEvent,this)}return a(t,[{key:"addEventListener",value:function(t,e){var i=this.w;i.globals.events.hasOwnProperty(t)?i.globals.events[t].push(e):i.globals.events[t]=[e]}},{key:"removeEventListener",value:function(t,e){var i=this.w;if(i.globals.events.hasOwnProperty(t)){var a=i.globals.events[t].indexOf(e);-1!==a&&i.globals.events[t].splice(a,1)}}},{key:"fireEvent",value:function(t,e){var i=this.w;if(i.globals.events.hasOwnProperty(t)){e&&e.length||(e=[]);for(var a=i.globals.events[t],s=a.length,r=0;r<s;r++)a[r].apply(null,e)}}},{key:"setupEventHandlers",value:function(){var t=this,e=this.w,i=this.ctx,a=e.globals.dom.baseEl.querySelector(e.globals.chartClass);this.ctx.eventList.forEach((function(t){a.addEventListener(t,(function(t){var a=Object.assign({},e,{seriesIndex:e.globals.capturedSeriesIndex,dataPointIndex:e.globals.capturedDataPointIndex});"mousemove"===t.type||"touchmove"===t.type?"function"==typeof e.config.chart.events.mouseMove&&e.config.chart.events.mouseMove(t,i,a):("mouseup"===t.type&&1===t.which||"touchend"===t.type)&&("function"==typeof e.config.chart.events.click&&e.config.chart.events.click(t,i,a),i.ctx.events.fireEvent("click",[t,i,a]))}),{capture:!1,passive:!0})})),this.ctx.eventList.forEach((function(e){document.addEventListener(e,t.documentEvent)})),this.ctx.core.setupBrushHandler()}},{key:"documentEvent",value:function(t){var e=this.w,i=t.target.className;if("click"===t.type){var a=e.globals.dom.baseEl.querySelector(".apexcharts-menu");a&&a.classList.contains("apexcharts-menu-open")&&"apexcharts-menu-icon"!==i&&a.classList.remove("apexcharts-menu-open")}if("mousedown"===t.type){var s=e.globals.dom.Paper.select(".apexcharts-resizable-element").members;Array.prototype.forEach.call(s,(function(e){t.target.classList.contains("apexcharts-resizable-element")||t.target.classList.contains("svg_select_points")||e.selectize(!1)}))}e.globals.clientX="touchmove"===t.type?t.touches[0].clientX:t.clientX,e.globals.clientY="touchmove"===t.type?t.touches[0].clientY:t.clientY}}]),t}(),j=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"setCurrentLocaleValues",value:function(t){var e=this.w.config.chart.locales;window.Apex.chart&&window.Apex.chart.locales&&window.Apex.chart.locales.length>0&&(e=this.w.config.chart.locales.concat(window.Apex.chart.locales));var i=e.filter((function(e){return e.name===t}))[0];if(!i)throw new Error("Wrong locale name provided. Please make sure you set the correct locale name in options");var a=g.extend(k,i);this.w.globals.locale=a.options}}]),t}(),U=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"drawAxis",value:function(t,e){var i,a,s=this.w.globals,r=this.w.config,n=new O(this.ctx),o=new G(this.ctx);s.axisCharts&&"radar"!==t&&(s.isBarHorizontal?(a=o.drawYaxisInversed(0),i=n.drawXaxisInversed(0),s.dom.elGraphical.add(i),s.dom.elGraphical.add(a)):(i=n.drawXaxis(),s.dom.elGraphical.add(i),r.yaxis.map((function(t,e){-1===s.ignoreYAxisIndexes.indexOf(e)&&(a=o.drawYaxis(e),s.dom.Paper.add(a))}))));r.yaxis.map((function(t,e){-1===s.ignoreYAxisIndexes.indexOf(e)&&o.yAxisTitleRotate(e,t.opposite)}))}}]),t}(),q=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"drawXCrosshairs",value:function(){var t=this.w,e=new p(this.ctx),i=new u(this.ctx),a=t.config.xaxis.crosshairs.fill.gradient,s=t.config.xaxis.crosshairs.dropShadow,r=t.config.xaxis.crosshairs.fill.type,n=a.colorFrom,o=a.colorTo,l=a.opacityFrom,h=a.opacityTo,c=a.stops,d=s.enabled,f=s.left,x=s.top,b=s.blur,m=s.color,v=s.opacity,y=t.config.xaxis.crosshairs.fill.color;if(t.config.xaxis.crosshairs.show){"gradient"===r&&(y=e.drawGradient("vertical",n,o,l,h,null,c,null));var w=e.drawRect();1===t.config.xaxis.crosshairs.width&&(w=e.drawLine()),w.attr({class:"apexcharts-xcrosshairs",x:0,y:0,y2:t.globals.gridHeight,width:g.isNumber(t.config.xaxis.crosshairs.width)?t.config.xaxis.crosshairs.width:0,height:t.globals.gridHeight,fill:y,filter:"none","fill-opacity":t.config.xaxis.crosshairs.opacity,stroke:t.config.xaxis.crosshairs.stroke.color,"stroke-width":t.config.xaxis.crosshairs.stroke.width,"stroke-dasharray":t.config.xaxis.crosshairs.stroke.dashArray}),d&&(w=i.dropShadow(w,{left:f,top:x,blur:b,color:m,opacity:v})),t.globals.dom.elGraphical.add(w)}}},{key:"drawYCrosshairs",value:function(){var t=this.w,e=new p(this.ctx),i=t.config.yaxis[0].crosshairs;if(t.config.yaxis[0].crosshairs.show){var a=e.drawLine(0,0,t.globals.gridWidth,0,i.stroke.color,i.stroke.dashArray,i.stroke.width);a.attr({class:"apexcharts-ycrosshairs"}),t.globals.dom.elGraphical.add(a)}var s=e.drawLine(0,0,t.globals.gridWidth,0,i.stroke.color,0,0);s.attr({class:"apexcharts-ycrosshairs-hidden"}),t.globals.dom.elGraphical.add(s)}}]),t}(),Z=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"checkResponsiveConfig",value:function(t){var e=this,i=this.w,a=i.config;if(0!==a.responsive.length){var s=a.responsive.slice();s.sort((function(t,e){return t.breakpoint>e.breakpoint?1:e.breakpoint>t.breakpoint?-1:0})).reverse();var r=new P({}),n=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},a=s[0].breakpoint,n=window.innerWidth>0?window.innerWidth:screen.width;if(n>a){var o=I.extendArrayProps(r,i.globals.initialConfig);t=g.extend(o,t),t=g.extend(i.config,t),e.overrideResponsiveOptions(t)}else for(var l=0;l<s.length;l++)n<s[l].breakpoint&&(t=I.extendArrayProps(r,s[l].options),t=g.extend(i.config,t),e.overrideResponsiveOptions(t))};if(t){var o=I.extendArrayProps(r,t);o=g.extend(i.config,o),n(o=g.extend(o,t))}else n({})}}},{key:"overrideResponsiveOptions",value:function(t){var e=new P(t).init({responsiveOverride:!0});this.w.config=e}}]),t}(),$=function(){function t(i){e(this,t),this.ctx=i,this.colors=[],this.w=i.w;var a=this.w;this.isColorFn=!1,this.isBarDistributed=a.config.plotOptions.bar.distributed&&("bar"===a.config.chart.type||"rangeBar"===a.config.chart.type)}return a(t,[{key:"init",value:function(){this.setDefaultColors()}},{key:"setDefaultColors",value:function(){var t=this,e=this.w,i=new g;if(e.globals.dom.elWrap.classList.add("apexcharts-theme-".concat(e.config.theme.mode)),void 0===e.config.colors?e.globals.colors=this.predefined():(e.globals.colors=e.config.colors,e.globals.axisCharts&&"bar"!==e.config.chart.type&&Array.isArray(e.config.colors)&&e.config.colors.length>0&&e.config.colors.length===e.config.series.length&&(e.globals.colors=e.config.colors.map((function(i,a){return"function"==typeof i?(t.isColorFn=!0,i({value:e.globals.axisCharts?e.globals.series[a][0]?e.globals.series[a][0]:0:e.globals.series[a],seriesIndex:a,dataPointIndex:a,w:e})):i})))),e.config.theme.monochrome.enabled){var a=[],s=e.globals.series.length;this.isBarDistributed&&(s=e.globals.series[0].length*e.globals.series.length);for(var r=e.config.theme.monochrome.color,n=1/(s/e.config.theme.monochrome.shadeIntensity),o=e.config.theme.monochrome.shadeTo,l=0,h=0;h<s;h++){var c=void 0;"dark"===o?(c=i.shadeColor(-1*l,r),l+=n):(c=i.shadeColor(l,r),l+=n),a.push(c)}e.globals.colors=a.slice()}var d=e.globals.colors.slice();this.pushExtraColors(e.globals.colors);["fill","stroke"].forEach((function(i){void 0===e.config[i].colors?e.globals[i].colors=t.isColorFn?e.config.colors:d:e.globals[i].colors=e.config[i].colors.slice(),t.pushExtraColors(e.globals[i].colors)})),void 0===e.config.dataLabels.style.colors?e.globals.dataLabels.style.colors=d:e.globals.dataLabels.style.colors=e.config.dataLabels.style.colors.slice(),this.pushExtraColors(e.globals.dataLabels.style.colors,50),void 0===e.config.plotOptions.radar.polygons.fill.colors?e.globals.radarPolygons.fill.colors=["dark"===e.config.theme.mode?"#202D48":"#fff"]:e.globals.radarPolygons.fill.colors=e.config.plotOptions.radar.polygons.fill.colors.slice(),this.pushExtraColors(e.globals.radarPolygons.fill.colors,20),void 0===e.config.markers.colors?e.globals.markers.colors=d:e.globals.markers.colors=e.config.markers.colors.slice(),this.pushExtraColors(e.globals.markers.colors)}},{key:"pushExtraColors",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,a=this.w,s=e||a.globals.series.length;if(null===i&&(i=this.isBarDistributed||"heatmap"===a.config.chart.type&&a.config.plotOptions.heatmap.colorScale.inverse),i&&(s=a.globals.series[0].length*a.globals.series.length),t.length<s)for(var r=s-t.length,n=0;n<r;n++)t.push(t[n])}},{key:"updateThemeOptions",value:function(t){t.chart=t.chart||{},t.tooltip=t.tooltip||{};var e=t.theme.mode||"light",i=t.theme.palette?t.theme.palette:"dark"===e?"palette4":"palette1",a=t.chart.foreColor?t.chart.foreColor:"dark"===e?"#f6f7f8":"#373d3f";return t.tooltip.theme=e,t.chart.foreColor=a,t.theme.palette=i,t}},{key:"predefined",value:function(){switch(this.w.config.theme.palette){case"palette1":this.colors=["#008FFB","#00E396","#FEB019","#FF4560","#775DD0"];break;case"palette2":this.colors=["#3f51b5","#03a9f4","#4caf50","#f9ce1d","#FF9800"];break;case"palette3":this.colors=["#33b2df","#546E7A","#d4526e","#13d8aa","#A5978B"];break;case"palette4":this.colors=["#4ecdc4","#c7f464","#81D4FA","#fd6a6a","#546E7A"];break;case"palette5":this.colors=["#2b908f","#f9a3a4","#90ee7e","#fa4443","#69d2e7"];break;case"palette6":this.colors=["#449DD1","#F86624","#EA3546","#662E9B","#C5D86D"];break;case"palette7":this.colors=["#D7263D","#1B998B","#2E294E","#F46036","#E2C044"];break;case"palette8":this.colors=["#662E9B","#F86624","#F9C80E","#EA3546","#43BCCD"];break;case"palette9":this.colors=["#5C4742","#A5978B","#8D5B4C","#5A2A27","#C4BBAF"];break;case"palette10":this.colors=["#A300D6","#7D02EB","#5653FE","#2983FF","#00B1F2"];break;default:this.colors=["#008FFB","#00E396","#FEB019","#FF4560","#775DD0"]}return this.colors}}]),t}(),J=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"draw",value:function(){this.drawTitleSubtitle("title"),this.drawTitleSubtitle("subtitle")}},{key:"drawTitleSubtitle",value:function(t){var e=this.w,i="title"===t?e.config.title:e.config.subtitle,a=e.globals.svgWidth/2,s=i.offsetY,r="middle";if("left"===i.align?(a=10,r="start"):"right"===i.align&&(a=e.globals.svgWidth-10,r="end"),a+=i.offsetX,s=s+parseInt(i.style.fontSize,10)+i.margin/2,void 0!==i.text){var n=new p(this.ctx).drawText({x:a,y:s,text:i.text,textAnchor:r,fontSize:i.style.fontSize,fontFamily:i.style.fontFamily,fontWeight:i.style.fontWeight,foreColor:i.style.color,opacity:1});n.node.setAttribute("class","apexcharts-".concat(t,"-text")),e.globals.dom.Paper.add(n)}}}]),t}(),Q=function(){function t(i){e(this,t),this.w=i.w,this.dCtx=i}return a(t,[{key:"getTitleSubtitleCoords",value:function(t){var e=this.w,i=0,a=0,s="title"===t?e.config.title.floating:e.config.subtitle.floating,r=e.globals.dom.baseEl.querySelector(".apexcharts-".concat(t,"-text"));if(null!==r&&!s){var n=r.getBoundingClientRect();i=n.width,a=e.globals.axisCharts?n.height+5:n.height}return{width:i,height:a}}},{key:"getLegendsRect",value:function(){var t=this.w,e=t.globals.dom.baseEl.querySelector(".apexcharts-legend"),i=Object.assign({},g.getBoundingClientRect(e));return null!==e&&!t.config.legend.floating&&t.config.legend.show?this.dCtx.lgRect={x:i.x,y:i.y,height:i.height,width:0===i.height?0:i.width}:this.dCtx.lgRect={x:0,y:0,height:0,width:0},"left"!==t.config.legend.position&&"right"!==t.config.legend.position||1.5*this.dCtx.lgRect.width>t.globals.svgWidth&&(this.dCtx.lgRect.width=t.globals.svgWidth/1.5),this.dCtx.lgRect}},{key:"getLargestStringFromMultiArr",value:function(t,e){var i=t;if(this.w.globals.isMultiLineX){var a=e.map((function(t,e){return Array.isArray(t)?t.length:1})),s=Math.max.apply(Math,d(a));i=e[a.indexOf(s)]}return i}}]),t}(),K=function(){function t(i){e(this,t),this.w=i.w,this.dCtx=i}return a(t,[{key:"getxAxisLabelsCoords",value:function(){var t,e=this.w,i=e.globals.labels.slice();if(e.config.xaxis.convertedCatToNumeric&&0===i.length&&(i=e.globals.categoryLabels),e.globals.timescaleLabels.length>0){var a=this.getxAxisTimeScaleLabelsCoords();t={width:a.width,height:a.height},e.globals.rotateXLabels=!1}else{this.dCtx.lgWidthForSideLegends="left"!==e.config.legend.position&&"right"!==e.config.legend.position||e.config.legend.floating?0:this.dCtx.lgRect.width;var s=e.globals.xLabelFormatter,r=g.getLargestStringFromArr(i),n=this.dCtx.dimHelpers.getLargestStringFromMultiArr(r,i);e.globals.isBarHorizontal&&(n=r=e.globals.yAxisScale[0].result.reduce((function(t,e){return t.length>e.length?t:e}),0));var o=new D(this.dCtx.ctx),l=r;r=o.xLabelFormat(s,r,l),n=o.xLabelFormat(s,n,l),(e.config.xaxis.convertedCatToNumeric&&void 0===r||""===String(r).trim())&&(n=r="1");var h=new p(this.dCtx.ctx),c=h.getTextRects(r,e.config.xaxis.labels.style.fontSize),d=c;if(r!==n&&(d=h.getTextRects(n,e.config.xaxis.labels.style.fontSize)),(t={width:c.width>=d.width?c.width:d.width,height:c.height>=d.height?c.height:d.height}).width*i.length>e.globals.svgWidth-this.dCtx.lgWidthForSideLegends-this.dCtx.yAxisWidth-this.dCtx.gridPad.left-this.dCtx.gridPad.right&&0!==e.config.xaxis.labels.rotate||e.config.xaxis.labels.rotateAlways){if(!e.globals.isBarHorizontal){e.globals.rotateXLabels=!0;var u=function(t){return h.getTextRects(t,e.config.xaxis.labels.style.fontSize,e.config.xaxis.labels.style.fontFamily,"rotate(".concat(e.config.xaxis.labels.rotate," 0 0)"),!1)};c=u(r),r!==n&&(d=u(n)),t.height=(c.height>d.height?c.height:d.height)/1.5,t.width=c.width>d.width?c.width:d.width}}else e.globals.rotateXLabels=!1}return e.config.xaxis.labels.show||(t={width:0,height:0}),{width:t.width,height:t.height}}},{key:"getxAxisTitleCoords",value:function(){var t=this.w,e=0,i=0;if(void 0!==t.config.xaxis.title.text){var a=new p(this.dCtx.ctx).getTextRects(t.config.xaxis.title.text,t.config.xaxis.title.style.fontSize);e=a.width,i=a.height}return{width:e,height:i}}},{key:"getxAxisTimeScaleLabelsCoords",value:function(){var t,e=this.w;this.dCtx.timescaleLabels=e.globals.timescaleLabels.slice();var i=this.dCtx.timescaleLabels.map((function(t){return t.value})),a=i.reduce((function(t,e){return void 0===t?(console.error("You have possibly supplied invalid Date format. Please supply a valid JavaScript Date"),0):t.length>e.length?t:e}),0);return 1.05*(t=new p(this.dCtx.ctx).getTextRects(a,e.config.xaxis.labels.style.fontSize)).width*i.length>e.globals.gridWidth&&0!==e.config.xaxis.labels.rotate&&(e.globals.overlappingXLabels=!0),t}},{key:"additionalPaddingXLabels",value:function(t){var e=this,i=this.w,a=i.globals,s=i.config,r=s.xaxis.type,n=t.width;a.skipLastTimelinelabel=!1,a.skipFirstTimelinelabel=!1;var o=i.config.yaxis[0].opposite&&i.globals.isBarHorizontal,l=function(t,o){(function(t){return-1!==a.collapsedSeriesIndices.indexOf(t)})(o)||("datetime"!==r&&e.dCtx.gridPad.left<n/2-e.dCtx.yAxisWidthLeft&&!a.rotateXLabels&&!s.xaxis.labels.trim&&(e.dCtx.xPadLeft=n/2+1),function(t){if(e.dCtx.timescaleLabels&&e.dCtx.timescaleLabels.length){var s=e.dCtx.timescaleLabels[0],o=e.dCtx.timescaleLabels[e.dCtx.timescaleLabels.length-1].position+n/1.75-e.dCtx.yAxisWidthRight,l=s.position-n/1.75+e.dCtx.yAxisWidthLeft;o>a.gridWidth&&(a.skipLastTimelinelabel=!0),l<0&&(a.skipFirstTimelinelabel=!0)}else"datetime"===r?e.dCtx.gridPad.right<n&&!a.rotateXLabels&&(a.skipLastTimelinelabel=!0):"datetime"!==r&&e.dCtx.gridPad.right<n/2-e.dCtx.yAxisWidthRight&&!a.rotateXLabels&&("between"!==i.config.xaxis.tickPlacement||i.globals.isBarHorizontal)&&(e.dCtx.xPadRight=n/2+1)}())};s.yaxis.forEach((function(t,i){o?(e.dCtx.gridPad.left<n&&(e.dCtx.xPadLeft=n/2+1),e.dCtx.xPadRight=n/2+1):l(0,i)}))}}]),t}(),tt=function(){function t(i){e(this,t),this.w=i.w,this.dCtx=i}return a(t,[{key:"getyAxisLabelsCoords",value:function(){var t=this,e=this.w,i=[],a=10,s=new H(this.dCtx.ctx);return e.config.yaxis.map((function(r,n){if(!s.isYAxisHidden(n)&&r.labels.show&&e.globals.yAxisScale[n].result.length){var o=e.globals.yLabelFormatters[n],l=o(e.globals.yAxisScale[n].niceMax,{seriesIndex:n,dataPointIndex:-1,w:e}),h=l;if(void 0!==l&&0!==l.length||(l=e.globals.yAxisScale[n].niceMax),e.globals.isBarHorizontal){a=0;var c=e.globals.labels.slice();l=o(l=g.getLargestStringFromArr(c),{seriesIndex:n,dataPointIndex:-1,w:e}),h=t.dCtx.dimHelpers.getLargestStringFromMultiArr(l,c)}var d=new p(t.dCtx.ctx),u=d.getTextRects(l,r.labels.style.fontSize),f=u;l!==h&&(f=d.getTextRects(h,r.labels.style.fontSize)),i.push({width:(f.width>u.width?f.width:u.width)+a,height:f.height>u.height?f.height:u.height})}else i.push({width:0,height:0})})),i}},{key:"getyAxisTitleCoords",value:function(){var t=this,e=this.w,i=[];return e.config.yaxis.map((function(e,a){if(e.show&&void 0!==e.title.text){var s=new p(t.dCtx.ctx).getTextRects(e.title.text,e.title.style.fontSize,e.title.style.fontFamily,"rotate(-90 0 0)",!1);i.push({width:s.width,height:s.height})}else i.push({width:0,height:0})})),i}},{key:"getTotalYAxisWidth",value:function(){var t=this.w,e=0,i=0,a=0,s=t.globals.yAxisScale.length>1?10:0,r=new H(this.dCtx.ctx),n=function(n,o){var l=t.config.yaxis[o].floating,h=0;n.width>0&&!l?(h=n.width+s,function(e){return t.globals.ignoreYAxisIndexes.indexOf(e)>-1}(o)&&(h=h-n.width-s)):h=l||r.isYAxisHidden(o)?0:5,t.config.yaxis[o].opposite?a+=h:i+=h,e+=h};return t.globals.yLabelsCoords.map((function(t,e){n(t,e)})),t.globals.yTitleCoords.map((function(t,e){n(t,e)})),t.globals.isBarHorizontal&&(e=t.globals.yLabelsCoords[0].width+t.globals.yTitleCoords[0].width+15),this.dCtx.yAxisWidthLeft=i,this.dCtx.yAxisWidthRight=a,e}}]),t}(),et=function(){function t(i){e(this,t),this.w=i.w,this.dCtx=i}return a(t,[{key:"gridPadForColumnsInNumericAxis",value:function(t){var e=this.w;if(e.globals.noData||e.globals.allSeriesCollapsed)return 0;var i=e.config.chart.type,a=0,s="bar"===i||"rangeBar"===i?e.config.series.length:1;if(e.globals.comboBarCount>0&&(s=e.globals.comboBarCount),e.globals.collapsedSeries.forEach((function(t){"bar"!==t.type&&"rangeBar"!==t.type||(s-=1)})),e.config.chart.stacked&&(s=1),("bar"===i||"rangeBar"===i||e.globals.comboBarCount>0)&&e.globals.isXNumeric&&!e.globals.isBarHorizontal&&s>0){var r,n,o=Math.abs(e.globals.initialMaxX-e.globals.initialMinX);o<=3&&(o=e.globals.dataPoints),r=o/t,e.globals.minXDiff&&e.globals.minXDiff/r>0&&(n=e.globals.minXDiff/r),(a=n/s*parseInt(e.config.plotOptions.bar.columnWidth,10)/100)<1&&(a=1),a=a/(s>1?1:1.5)+5,e.globals.barPadForNumericAxis=a}return a}},{key:"gridPadFortitleSubtitle",value:function(){var t=this,e=this.w,i=e.globals,a=this.dCtx.isSparkline||!e.globals.axisCharts?0:10;["title","subtitle"].forEach((function(i){void 0!==e.config[i].text?a+=e.config[i].margin:a+=t.dCtx.isSparkline||!e.globals.axisCharts?0:5}));var s=e.config.series.length>1||!e.globals.axisCharts||e.config.legend.showForSingleSeries;e.config.legend.show&&"bottom"===e.config.legend.position&&!e.config.legend.floating&&s&&(a+=10);var r=this.dCtx.dimHelpers.getTitleSubtitleCoords("title"),n=this.dCtx.dimHelpers.getTitleSubtitleCoords("subtitle");i.gridHeight=i.gridHeight-r.height-n.height-a,i.translateY=i.translateY+r.height+n.height+a}},{key:"setGridXPosForDualYAxis",value:function(t,e){var i=this.w,a=new H(this.dCtx.ctx);i.config.yaxis.map((function(s,r){-1!==i.globals.ignoreYAxisIndexes.indexOf(r)||s.floating||a.isYAxisHidden(r)||s.opposite&&(i.globals.translateX=i.globals.translateX-(e[r].width+t[r].width)-parseInt(i.config.yaxis[r].labels.style.fontSize,10)/1.2-12)}))}}]),t}(),it=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.lgRect={},this.yAxisWidth=0,this.yAxisWidthLeft=0,this.yAxisWidthRight=0,this.xAxisHeight=0,this.isSparkline=this.w.config.chart.sparkline.enabled,this.dimHelpers=new Q(this),this.dimYAxis=new tt(this),this.dimXAxis=new K(this),this.dimGrid=new et(this),this.lgWidthForSideLegends=0,this.gridPad=this.w.config.grid.padding,this.xPadRight=0,this.xPadLeft=0}return a(t,[{key:"plotCoords",value:function(){var t=this.w.globals;this.lgRect=this.dimHelpers.getLegendsRect(),t.axisCharts?this.setDimensionsForAxisCharts():this.setDimensionsForNonAxisCharts(),this.dimGrid.gridPadFortitleSubtitle(),t.gridHeight=t.gridHeight-this.gridPad.top-this.gridPad.bottom,t.gridWidth=t.gridWidth-this.gridPad.left-this.gridPad.right-this.xPadRight-this.xPadLeft;var e=this.dimGrid.gridPadForColumnsInNumericAxis(t.gridWidth);t.gridWidth=t.gridWidth-2*e,t.translateX=t.translateX+this.gridPad.left+this.xPadLeft+(e>0?e+4:0),t.translateY=t.translateY+this.gridPad.top}},{key:"setDimensionsForAxisCharts",value:function(){var t=this,e=this.w,i=e.globals,a=this.dimYAxis.getyAxisLabelsCoords(),s=this.dimYAxis.getyAxisTitleCoords();e.globals.yLabelsCoords=[],e.globals.yTitleCoords=[],e.config.yaxis.map((function(t,i){e.globals.yLabelsCoords.push({width:a[i].width,index:i}),e.globals.yTitleCoords.push({width:s[i].width,index:i})})),this.yAxisWidth=this.dimYAxis.getTotalYAxisWidth();var r=this.dimXAxis.getxAxisLabelsCoords(),n=this.dimXAxis.getxAxisTitleCoords();this.conditionalChecksForAxisCoords(r,n),i.translateXAxisY=e.globals.rotateXLabels?this.xAxisHeight/8:-4,i.translateXAxisX=e.globals.rotateXLabels&&e.globals.isXNumeric&&e.config.xaxis.labels.rotate<=-45?-this.xAxisWidth/4:0,e.globals.isBarHorizontal&&(i.rotateXLabels=!1,i.translateXAxisY=parseInt(e.config.xaxis.labels.style.fontSize,10)/1.5*-1),i.translateXAxisY=i.translateXAxisY+e.config.xaxis.labels.offsetY,i.translateXAxisX=i.translateXAxisX+e.config.xaxis.labels.offsetX;var o=this.yAxisWidth,l=this.xAxisHeight;i.xAxisLabelsHeight=this.xAxisHeight,i.xAxisHeight=this.xAxisHeight;var h=10;("radar"===e.config.chart.type||this.isSparkline)&&(o=0,l=i.goldenPadding),this.isSparkline&&(this.lgRect={height:0,width:0},l=0,o=0,h=0),this.dimXAxis.additionalPaddingXLabels(r);var c=function(){i.translateX=o,i.gridHeight=i.svgHeight-t.lgRect.height-l-(t.isSparkline?0:e.globals.rotateXLabels?10:15),i.gridWidth=i.svgWidth-o};switch("top"===e.config.xaxis.position&&(h=i.xAxisHeight-e.config.xaxis.axisTicks.height-5),e.config.legend.position){case"bottom":i.translateY=h,c();break;case"top":i.translateY=this.lgRect.height+h,c();break;case"left":i.translateY=h,i.translateX=this.lgRect.width+o,i.gridHeight=i.svgHeight-l-12,i.gridWidth=i.svgWidth-this.lgRect.width-o;break;case"right":i.translateY=h,i.translateX=o,i.gridHeight=i.svgHeight-l-12,i.gridWidth=i.svgWidth-this.lgRect.width-o-5;break;default:throw new Error("Legend position not supported")}this.dimGrid.setGridXPosForDualYAxis(s,a),new G(this.ctx).setYAxisXPosition(a,s)}},{key:"setDimensionsForNonAxisCharts",value:function(){var t=this.w,e=t.globals,i=t.config,a=0;t.config.legend.show&&!t.config.legend.floating&&(a=20);var s="pie"===i.chart.type||"donut"===i.chart.type?"pie":"radialBar",r=i.plotOptions[s].offsetY,n=i.plotOptions[s].offsetX;if(!i.legend.show||i.legend.floating)return e.gridHeight=e.svgHeight-i.grid.padding.left+i.grid.padding.right,e.gridWidth=e.gridHeight,e.translateY=r,void(e.translateX=n+(e.svgWidth-e.gridWidth)/2);switch(i.legend.position){case"bottom":e.gridHeight=e.svgHeight-this.lgRect.height-e.goldenPadding,e.gridWidth=e.gridHeight,e.translateY=r-10,e.translateX=n+(e.svgWidth-e.gridWidth)/2;break;case"top":e.gridHeight=e.svgHeight-this.lgRect.height-e.goldenPadding,e.gridWidth=e.gridHeight,e.translateY=this.lgRect.height+r+10,e.translateX=n+(e.svgWidth-e.gridWidth)/2;break;case"left":e.gridWidth=e.svgWidth-this.lgRect.width-a,e.gridHeight="auto"!==i.chart.height?e.svgHeight:e.gridWidth,e.translateY=r,e.translateX=n+this.lgRect.width+a;break;case"right":e.gridWidth=e.svgWidth-this.lgRect.width-a-5,e.gridHeight="auto"!==i.chart.height?e.svgHeight:e.gridWidth,e.translateY=r,e.translateX=n+10;break;default:throw new Error("Legend position not supported")}}},{key:"conditionalChecksForAxisCoords",value:function(t,e){var i=this.w;this.xAxisHeight=(t.height+e.height)*(i.globals.isMultiLineX?1.2:i.globals.LINE_HEIGHT_RATIO)+(i.globals.rotateXLabels?22:10),this.xAxisWidth=t.width,this.xAxisHeight-e.height>i.config.xaxis.labels.maxHeight&&(this.xAxisHeight=i.config.xaxis.labels.maxHeight),i.config.xaxis.labels.minHeight&&this.xAxisHeight<i.config.xaxis.labels.minHeight&&(this.xAxisHeight=i.config.xaxis.labels.minHeight),i.config.xaxis.floating&&(this.xAxisHeight=0);var a=0,s=0;i.config.yaxis.forEach((function(t){a+=t.labels.minWidth,s+=t.labels.maxWidth})),this.yAxisWidth<a&&(this.yAxisWidth=a),this.yAxisWidth>s&&(this.yAxisWidth=s)}}]),t}(),at=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.chartType=this.w.config.chart.type,this.initialAnim=this.w.config.chart.animations.enabled,this.dynamicAnim=this.initialAnim&&this.w.config.chart.animations.dynamicAnimation.enabled,this.animBeginArr=[0],this.animDur=0,this.donutDataLabels=this.w.config.plotOptions.pie.donut.labels;var a=this.w;this.lineColorArr=void 0!==a.globals.stroke.colors?a.globals.stroke.colors:a.globals.colors,this.defaultSize=a.globals.svgHeight<a.globals.svgWidth?a.globals.gridHeight:a.globals.gridWidth,this.centerY=this.defaultSize/2,this.centerX=a.globals.gridWidth/2,this.fullAngle=360,a.globals.radialSize=this.defaultSize/2.05-a.config.stroke.width-(a.config.chart.sparkline.enabled?0:a.config.chart.dropShadow.blur),this.donutSize=a.globals.radialSize*parseInt(a.config.plotOptions.pie.donut.size,10)/100,this.sliceLabels=[],this.prevSectorAngleArr=[]}return a(t,[{key:"draw",value:function(t){var e=this.w,i=new p(this.ctx),a=i.group({class:"apexcharts-pie"});if(e.globals.noData)return a;for(var s=0,r=0;r<t.length;r++)s+=g.negToZero(t[r]);var n=[],o=i.group();0===s&&(s=1e-5);for(var l=0;l<t.length;l++){var h=this.fullAngle*g.negToZero(t[l])/s;n.push(h)}if(e.globals.dataChanged){for(var c,d=0,u=0;u<e.globals.previousPaths.length;u++)d+=g.negToZero(e.globals.previousPaths[u]);for(var f=0;f<e.globals.previousPaths.length;f++)c=this.fullAngle*g.negToZero(e.globals.previousPaths[f])/d,this.prevSectorAngleArr.push(c)}this.donutSize<0&&(this.donutSize=0);var x=e.config.plotOptions.pie.customScale,b=e.globals.gridWidth/2,m=e.globals.gridHeight/2,v=b-e.globals.gridWidth/2*x,y=m-e.globals.gridHeight/2*x;if("donut"===e.config.chart.type){var w=i.drawCircle(this.donutSize);w.attr({cx:this.centerX,cy:this.centerY,fill:e.config.plotOptions.pie.donut.background?e.config.plotOptions.pie.donut.background:"transparent"}),o.add(w)}var k=this.drawArcs(n,t);if(this.sliceLabels.forEach((function(t){k.add(t)})),o.attr({transform:"translate(".concat(v,", ").concat(y,") scale(").concat(x,")")}),o.add(k),a.add(o),this.donutDataLabels.show){var A=this.renderInnerDataLabels(this.donutDataLabels,{hollowSize:this.donutSize,centerX:this.centerX,centerY:this.centerY,opacity:this.donutDataLabels.show,translateX:v,translateY:y});a.add(A)}return a}},{key:"drawArcs",value:function(t,e){var i=this.w,a=new u(this.ctx),s=new p(this.ctx),r=new M(this.ctx),n=s.group({class:"apexcharts-slices"}),o=0,l=0,h=0,c=0;this.strokeWidth=i.config.stroke.show?i.config.stroke.width:0;for(var d=0;d<t.length;d++){var f=s.group({class:"apexcharts-series apexcharts-pie-series",seriesName:g.escapeString(i.globals.seriesNames[d]),rel:d+1,"data:realIndex":d});n.add(f),l=c,h=(o=h)+t[d],c=l+this.prevSectorAngleArr[d];var x=h-o,b=r.fillPath({seriesNumber:d,size:i.globals.radialSize,value:e[d]}),m=this.getChangedPath(l,c),v=s.drawPath({d:m,stroke:this.lineColorArr instanceof Array?this.lineColorArr[d]:this.lineColorArr,strokeWidth:0,fill:b,fillOpacity:i.config.fill.opacity,classes:"apexcharts-pie-area apexcharts-".concat(i.config.chart.type,"-slice-").concat(d)});if(v.attr({index:0,j:d}),i.config.chart.dropShadow.enabled){var y=i.config.chart.dropShadow;a.dropShadow(v,y,d)}this.addListeners(v,this.donutDataLabels),p.setAttrs(v.node,{"data:angle":x,"data:startAngle":o,"data:strokeWidth":this.strokeWidth,"data:value":e[d]});var w={x:0,y:0};"pie"===i.config.chart.type?w=g.polarToCartesian(this.centerX,this.centerY,i.globals.radialSize/1.25+i.config.plotOptions.pie.dataLabels.offset,o+(h-o)/2):"donut"===i.config.chart.type&&(w=g.polarToCartesian(this.centerX,this.centerY,(i.globals.radialSize+this.donutSize)/2+i.config.plotOptions.pie.dataLabels.offset,o+(h-o)/2)),f.add(v);var k=0;if(!this.initialAnim||i.globals.resized||i.globals.dataChanged?this.animBeginArr.push(0):(0===(k=(h-o)/this.fullAngle*i.config.chart.animations.speed)&&(k=1),this.animDur=k+this.animDur,this.animBeginArr.push(this.animDur)),this.dynamicAnim&&i.globals.dataChanged?this.animatePaths(v,{size:i.globals.radialSize,endAngle:h,startAngle:o,prevStartAngle:l,prevEndAngle:c,animateStartingPos:!0,i:d,animBeginArr:this.animBeginArr,shouldSetPrevPaths:!0,dur:i.config.chart.animations.dynamicAnimation.speed}):this.animatePaths(v,{size:i.globals.radialSize,endAngle:h,startAngle:o,i:d,totalItems:t.length-1,animBeginArr:this.animBeginArr,dur:k}),i.config.plotOptions.pie.expandOnClick&&v.click(this.pieClicked.bind(this,d)),i.config.dataLabels.enabled){var A=w.x,S=w.y,C=100*(h-o)/360+"%";if(0!==x&&i.config.plotOptions.pie.dataLabels.minAngleToShowLabel<t[d]){var L=i.config.dataLabels.formatter;void 0!==L&&(C=L(i.globals.seriesPercent[d][0],{seriesIndex:d,w:i}));var P=i.globals.dataLabels.style.colors[d],T=s.drawText({x:A,y:S,text:C,textAnchor:"middle",fontSize:i.config.dataLabels.style.fontSize,fontFamily:i.config.dataLabels.style.fontFamily,fontWeight:i.config.dataLabels.style.fontWeight,foreColor:P});if(i.config.dataLabels.dropShadow.enabled){var z=i.config.dataLabels.dropShadow;a.dropShadow(T,z)}T.node.classList.add("apexcharts-pie-label"),i.config.chart.animations.animate&&!1===i.globals.resized&&(T.node.classList.add("apexcharts-pie-label-delay"),T.node.style.animationDelay=i.config.chart.animations.speed/940+"s"),this.sliceLabels.push(T)}}}return n}},{key:"addListeners",value:function(t,e){var i=new p(this.ctx);t.node.addEventListener("mouseenter",i.pathMouseEnter.bind(this,t)),t.node.addEventListener("mouseleave",i.pathMouseLeave.bind(this,t)),t.node.addEventListener("mouseleave",this.revertDataLabelsInner.bind(this,t.node,e)),t.node.addEventListener("mousedown",i.pathMouseDown.bind(this,t)),this.donutDataLabels.total.showAlways||(t.node.addEventListener("mouseenter",this.printDataLabelsInner.bind(this,t.node,e)),t.node.addEventListener("mousedown",this.printDataLabelsInner.bind(this,t.node,e)))}},{key:"animatePaths",value:function(t,e){var i=this.w,a=e.endAngle-e.startAngle,s=a,r=e.startAngle,n=e.startAngle;void 0!==e.prevStartAngle&&void 0!==e.prevEndAngle&&(r=e.prevEndAngle,s=e.prevEndAngle-e.prevStartAngle),e.i===i.config.series.length-1&&(a+n>this.fullAngle?e.endAngle=e.endAngle-(a+n):a+n<this.fullAngle&&(e.endAngle=e.endAngle+(this.fullAngle-(a+n)))),a===this.fullAngle&&(a=this.fullAngle-.01),this.animateArc(t,r,n,a,s,e)}},{key:"animateArc",value:function(t,e,i,a,s,r){var n,o=this,l=this.w,h=new f(this.ctx),c=r.size;(isNaN(e)||isNaN(s))&&(e=i,s=a,r.dur=0);var d=a,g=i,u=e-i;l.globals.dataChanged&&r.shouldSetPrevPaths&&r.prevEndAngle&&(n=o.getPiePath({me:o,startAngle:r.prevStartAngle,angle:r.prevEndAngle-r.prevStartAngle,size:c}),t.attr({d:n})),0!==r.dur?t.animate(r.dur,l.globals.easing,r.animBeginArr[r.i]).afterAll((function(){"pie"!==l.config.chart.type&&"donut"!==l.config.chart.type||this.animate(l.config.chart.animations.dynamicAnimation.speed).attr({"stroke-width":o.strokeWidth}),r.i===l.config.series.length-1&&h.animationCompleted(t)})).during((function(l){d=u+(a-u)*l,r.animateStartingPos&&(d=s+(a-s)*l,g=e-s+(i-(e-s))*l),n=o.getPiePath({me:o,startAngle:g,angle:d,size:c}),t.node.setAttribute("data:pathOrig",n),t.attr({d:n})})):(n=o.getPiePath({me:o,startAngle:g,angle:a,size:c}),r.isTrack||(l.globals.animationEnded=!0),t.node.setAttribute("data:pathOrig",n),t.attr({d:n,"stroke-width":o.strokeWidth}))}},{key:"pieClicked",value:function(t){var e,i=this.w,a=this.w.globals.radialSize+(i.config.plotOptions.pie.expandOnClick?4:0),s=i.globals.dom.Paper.select(".apexcharts-".concat(i.config.chart.type.toLowerCase(),"-slice-").concat(t)).members[0];if("true"!==s.attr("data:pieClicked")){var r=i.globals.dom.baseEl.getElementsByClassName("apexcharts-pie-area");Array.prototype.forEach.call(r,(function(t){t.setAttribute("data:pieClicked","false");var e=t.getAttribute("data:pathOrig");t.setAttribute("d",e)})),s.attr("data:pieClicked","true");var n=parseInt(s.attr("data:startAngle"),10),o=parseInt(s.attr("data:angle"),10);e=this.getPiePath({me:this,startAngle:n,angle:o,size:a}),360!==o&&s.plot(e)}else{s.attr({"data:pieClicked":"false"}),this.revertDataLabelsInner(s.node,this.donutDataLabels);var l=s.attr("data:pathOrig");s.attr({d:l})}}},{key:"getChangedPath",value:function(t,e){var i="";return this.dynamicAnim&&this.w.globals.dataChanged&&(i=this.getPiePath({me:this,startAngle:t,angle:e-t,size:this.size})),i}},{key:"getPiePath",value:function(t){var e=t.me,i=t.startAngle,a=t.angle,s=t.size,r=this.w,n=i,o=Math.PI*(n-90)/180,l=a+i;Math.ceil(l)>=360&&(l=359.99);var h=Math.PI*(l-90)/180,c=e.centerX+s*Math.cos(o),d=e.centerY+s*Math.sin(o),u=e.centerX+s*Math.cos(h),f=e.centerY+s*Math.sin(h),p=g.polarToCartesian(e.centerX,e.centerY,e.donutSize,l),x=g.polarToCartesian(e.centerX,e.centerY,e.donutSize,n),b=a>180?1:0,m=["M",c,d,"A",s,s,0,b,1,u,f];return"donut"===r.config.chart.type?[].concat(m,["L",p.x,p.y,"A",e.donutSize,e.donutSize,0,b,0,x.x,x.y,"L",c,d,"z"]).join(" "):"pie"===r.config.chart.type?[].concat(m,["L",e.centerX,e.centerY,"L",c,d]).join(" "):[].concat(m).join(" ")}},{key:"renderInnerDataLabels",value:function(t,e){var i=this.w,a=new p(this.ctx),s=a.group({class:"apexcharts-datalabels-group",transform:"translate(".concat(e.translateX?e.translateX:0,", ").concat(e.translateY?e.translateY:0,") scale(").concat(i.config.plotOptions.pie.customScale,")")}),r=t.total.show;s.node.style.opacity=e.opacity;var n,o,l=e.centerX,h=e.centerY;n=void 0===t.name.color?i.globals.colors[0]:t.name.color;var c=t.name.fontSize,d=t.name.fontFamily,g=t.value.fontWeight;o=void 0===t.value.color?i.config.chart.foreColor:t.value.color;var u=t.value.formatter,f="",x="";if(r?(n=t.total.color,c=t.total.fontSize,d=t.total.fontFamily,g=t.total.fontWeight,x=t.total.label,f=t.total.formatter(i)):1===i.globals.series.length&&(f=u(i.globals.series[0],i),x=i.globals.seriesNames[0]),x&&(x=t.name.formatter(x,t.total.show,i)),t.name.show){var b=a.drawText({x:l,y:h+parseFloat(t.name.offsetY),text:x,textAnchor:"middle",foreColor:n,fontSize:c,fontWeight:g,fontFamily:d});b.node.classList.add("apexcharts-datalabel-label"),s.add(b)}if(t.value.show){var m=t.name.show?parseFloat(t.value.offsetY)+16:t.value.offsetY,v=a.drawText({x:l,y:h+m,text:f,textAnchor:"middle",foreColor:o,fontWeight:t.value.fontWeight,fontSize:t.value.fontSize,fontFamily:t.value.fontFamily});v.node.classList.add("apexcharts-datalabel-value"),s.add(v)}return s}},{key:"printInnerLabels",value:function(t,e,i,a){var s,r=this.w;a?s=void 0===t.name.color?r.globals.colors[parseInt(a.parentNode.getAttribute("rel"),10)-1]:t.name.color:r.globals.series.length>1&&t.total.show&&(s=t.total.color);var n=r.globals.dom.baseEl.querySelector(".apexcharts-datalabel-label"),o=r.globals.dom.baseEl.querySelector(".apexcharts-datalabel-value");i=(0,t.value.formatter)(i,r),a||"function"!=typeof t.total.formatter||(i=t.total.formatter(r));var l=e===t.total.label;e=t.name.formatter(e,l,r),null!==n&&(n.textContent=e),null!==o&&(o.textContent=i),null!==n&&(n.style.fill=s)}},{key:"printDataLabelsInner",value:function(t,e){var i=this.w,a=t.getAttribute("data:value"),s=i.globals.seriesNames[parseInt(t.parentNode.getAttribute("rel"),10)-1];i.globals.series.length>1&&this.printInnerLabels(e,s,a,t);var r=i.globals.dom.baseEl.querySelector(".apexcharts-datalabels-group");null!==r&&(r.style.opacity=1)}},{key:"revertDataLabelsInner",value:function(t,e,i){var a=this,s=this.w,r=s.globals.dom.baseEl.querySelector(".apexcharts-datalabels-group"),n=!1,o=s.globals.dom.baseEl.getElementsByClassName("apexcharts-pie-area"),l=function(t){var i=t.makeSliceOut,s=t.printLabel;Array.prototype.forEach.call(o,(function(t){"true"===t.getAttribute("data:pieClicked")&&(i&&(n=!0),s&&a.printDataLabelsInner(t,e))}))};if(l({makeSliceOut:!0,printLabel:!1}),e.total.show&&s.globals.series.length>1)n&&!e.total.showAlways?l({makeSliceOut:!1,printLabel:!0}):this.printInnerLabels(e,e.total.label,e.total.formatter(s));else if(l({makeSliceOut:!1,printLabel:!0}),!n)if(s.globals.selectedDataPoints.length&&s.globals.series.length>1)if(s.globals.selectedDataPoints[0].length>0){var h=s.globals.selectedDataPoints[0],c=s.globals.dom.baseEl.querySelector(".apexcharts-".concat(s.config.chart.type.toLowerCase(),"-slice-").concat(h));this.printDataLabelsInner(c,e)}else r&&s.globals.selectedDataPoints.length&&0===s.globals.selectedDataPoints[0].length&&(r.style.opacity=0);else r&&s.globals.series.length>1&&(r.style.opacity=0)}}]),t}(),st=function(){function t(i){e(this,t),this.w=i.w,this.lgCtx=i}return a(t,[{key:"getLegendStyles",value:function(){var t=document.createElement("style");t.setAttribute("type","text/css");var e=document.createTextNode("\t\n    \t\n      .apexcharts-legend {\t\n        display: flex;\t\n        overflow: auto;\t\n        padding: 0 10px;\t\n      }\t\n      .apexcharts-legend.position-bottom, .apexcharts-legend.position-top {\t\n        flex-wrap: wrap\t\n      }\t\n      .apexcharts-legend.position-right, .apexcharts-legend.position-left {\t\n        flex-direction: column;\t\n        bottom: 0;\t\n      }\t\n      .apexcharts-legend.position-bottom.apexcharts-align-left, .apexcharts-legend.position-top.apexcharts-align-left, .apexcharts-legend.position-right, .apexcharts-legend.position-left {\t\n        justify-content: flex-start;\t\n      }\t\n      .apexcharts-legend.position-bottom.apexcharts-align-center, .apexcharts-legend.position-top.apexcharts-align-center {\t\n        justify-content: center;  \t\n      }\t\n      .apexcharts-legend.position-bottom.apexcharts-align-right, .apexcharts-legend.position-top.apexcharts-align-right {\t\n        justify-content: flex-end;\t\n      }\t\n      .apexcharts-legend-series {\t\n        cursor: pointer;\t\n        line-height: normal;\t\n      }\t\n      .apexcharts-legend.position-bottom .apexcharts-legend-series, .apexcharts-legend.position-top .apexcharts-legend-series{\t\n        display: flex;\t\n        align-items: center;\t\n      }\t\n      .apexcharts-legend-text {\t\n        position: relative;\t\n        font-size: 14px;\t\n      }\t\n      .apexcharts-legend-text *, .apexcharts-legend-marker * {\t\n        pointer-events: none;\t\n      }\t\n      .apexcharts-legend-marker {\t\n        position: relative;\t\n        display: inline-block;\t\n        cursor: pointer;\t\n        margin-right: 3px;\t\n        border-style: solid;\n      }\t\n      \t\n      .apexcharts-legend.apexcharts-align-right .apexcharts-legend-series, .apexcharts-legend.apexcharts-align-left .apexcharts-legend-series{\t\n        display: inline-block;\t\n      }\t\n      .apexcharts-legend-series.apexcharts-no-click {\t\n        cursor: auto;\t\n      }\t\n      .apexcharts-legend .apexcharts-hidden-zero-series, .apexcharts-legend .apexcharts-hidden-null-series {\t\n        display: none !important;\t\n      }\t\n      .apexcharts-inactive-legend {\t\n        opacity: 0.45;\t\n      }");return t.appendChild(e),t}},{key:"getLegendBBox",value:function(){var t=this.w.globals.dom.baseEl.querySelector(".apexcharts-legend").getBoundingClientRect(),e=t.width;return{clwh:t.height,clww:e}}},{key:"appendToForeignObject",value:function(){var t=this.w.globals;t.dom.elLegendForeign=document.createElementNS(t.SVGNS,"foreignObject");var e=t.dom.elLegendForeign;e.setAttribute("x",0),e.setAttribute("y",0),e.setAttribute("width",t.svgWidth),e.setAttribute("height",t.svgHeight),t.dom.elLegendWrap.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),e.appendChild(t.dom.elLegendWrap),e.appendChild(this.getLegendStyles()),t.dom.Paper.node.insertBefore(e,t.dom.elGraphical.node)}},{key:"toggleDataSeries",value:function(t,e){var i=this,a=this.w;if(a.globals.axisCharts||"radialBar"===a.config.chart.type){a.globals.resized=!0;var s=null,r=null;if(a.globals.risingSeries=[],a.globals.axisCharts?(s=a.globals.dom.baseEl.querySelector(".apexcharts-series[data\\:realIndex='".concat(t,"']")),r=parseInt(s.getAttribute("data:realIndex"),10)):(s=a.globals.dom.baseEl.querySelector(".apexcharts-series[rel='".concat(t+1,"']")),r=parseInt(s.getAttribute("rel"),10)-1),e)[{cs:a.globals.collapsedSeries,csi:a.globals.collapsedSeriesIndices},{cs:a.globals.ancillaryCollapsedSeries,csi:a.globals.ancillaryCollapsedSeriesIndices}].forEach((function(t){i.riseCollapsedSeries(t.cs,t.csi,r)}));else this.hideSeries({seriesEl:s,realIndex:r})}else{var n=a.globals.dom.Paper.select(" .apexcharts-series[rel='".concat(t+1,"'] path")),o=a.config.chart.type;if("pie"===o||"donut"===o){var l=a.config.plotOptions.pie.donut.labels,h=new p(this.lgCtx.ctx),c=new at(this.lgCtx.ctx);h.pathMouseDown(n.members[0],null),c.printDataLabelsInner(n.members[0].node,l)}n.fire("click")}}},{key:"hideSeries",value:function(t){var e=t.seriesEl,i=t.realIndex,a=this.w;if(a.globals.axisCharts){var s=!1;if(a.config.yaxis[i]&&a.config.yaxis[i].show&&a.config.yaxis[i].showAlways&&(s=!0,a.globals.ancillaryCollapsedSeriesIndices.indexOf(i)<0&&(a.globals.ancillaryCollapsedSeries.push({index:i,data:a.config.series[i].data.slice(),type:e.parentNode.className.baseVal.split("-")[1]}),a.globals.ancillaryCollapsedSeriesIndices.push(i))),!s){a.globals.collapsedSeries.push({index:i,data:a.config.series[i].data.slice(),type:e.parentNode.className.baseVal.split("-")[1]}),a.globals.collapsedSeriesIndices.push(i);var r=a.globals.risingSeries.indexOf(i);a.globals.risingSeries.splice(r,1)}a.config.series[i].data=[]}else a.globals.collapsedSeries.push({index:i,data:a.config.series[i]}),a.globals.collapsedSeriesIndices.push(i),a.config.series[i]=0;for(var n=e.childNodes,o=0;o<n.length;o++)n[o].classList.contains("apexcharts-series-markers-wrap")&&(n[o].classList.contains("apexcharts-hide")?n[o].classList.remove("apexcharts-hide"):n[o].classList.add("apexcharts-hide"));a.globals.allSeriesCollapsed=a.globals.collapsedSeries.length===a.config.series.length,this.lgCtx.ctx.updateHelpers._updateSeries(a.config.series,a.config.chart.animations.dynamicAnimation.enabled)}},{key:"riseCollapsedSeries",value:function(t,e,i){var a=this.w;if(t.length>0)for(var s=0;s<t.length;s++)t[s].index===i&&(a.globals.axisCharts?(a.config.series[i].data=t[s].data.slice(),t.splice(s,1),e.splice(s,1),a.globals.risingSeries.push(i)):(a.config.series[i]=t[s].data,t.splice(s,1),e.splice(s,1),a.globals.risingSeries.push(i)),this.lgCtx.ctx.updateHelpers._updateSeries(a.config.series,a.config.chart.animations.dynamicAnimation.enabled))}}]),t}(),rt=function(){function t(i,a){e(this,t),this.ctx=i,this.w=i.w,this.onLegendClick=this.onLegendClick.bind(this),this.onLegendHovered=this.onLegendHovered.bind(this),this.isBarsDistributed="bar"===this.w.config.chart.type&&this.w.config.plotOptions.bar.distributed&&1===this.w.config.series.length,this.legendHelpers=new st(this)}return a(t,[{key:"init",value:function(){var t=this.w,e=t.globals,i=t.config;if((i.legend.showForSingleSeries&&1===e.series.length||this.isBarsDistributed||e.series.length>1||!e.axisCharts)&&i.legend.show){for(;e.dom.elLegendWrap.firstChild;)e.dom.elLegendWrap.removeChild(e.dom.elLegendWrap.firstChild);this.drawLegends(),g.isIE11()?document.getElementsByTagName("head")[0].appendChild(this.legendHelpers.getLegendStyles()):this.legendHelpers.appendToForeignObject(),"bottom"===i.legend.position||"top"===i.legend.position?this.legendAlignHorizontal():"right"!==i.legend.position&&"left"!==i.legend.position||this.legendAlignVertical()}}},{key:"drawLegends",value:function(){var t=this.w,e=t.config.legend.fontFamily,i=t.globals.seriesNames,a=t.globals.colors.slice();if("heatmap"===t.config.chart.type){var s=t.config.plotOptions.heatmap.colorScale.ranges;i=s.map((function(t){return t.name?t.name:t.from+" - "+t.to})),a=s.map((function(t){return t.color}))}else this.isBarsDistributed&&(i=t.globals.labels.slice());for(var r=t.globals.legendFormatter,n=t.config.legend.inverseOrder,o=n?i.length-1:0;n?o>=0:o<=i.length-1;n?o--:o++){var l=r(i[o],{seriesIndex:o,w:t}),h=!1,c=!1;if(t.globals.collapsedSeries.length>0)for(var d=0;d<t.globals.collapsedSeries.length;d++)t.globals.collapsedSeries[d].index===o&&(h=!0);if(t.globals.ancillaryCollapsedSeriesIndices.length>0)for(var g=0;g<t.globals.ancillaryCollapsedSeriesIndices.length;g++)t.globals.ancillaryCollapsedSeriesIndices[g]===o&&(c=!0);var u=document.createElement("span");u.classList.add("apexcharts-legend-marker");var f=t.config.legend.markers.offsetX,x=t.config.legend.markers.offsetY,b=t.config.legend.markers.height,m=t.config.legend.markers.width,v=t.config.legend.markers.strokeWidth,y=t.config.legend.markers.strokeColor,w=t.config.legend.markers.radius,k=u.style;k.background=a[o],k.color=a[o],t.config.legend.markers.fillColors&&t.config.legend.markers.fillColors[o]&&(k.background=t.config.legend.markers.fillColors[o]),k.height=Array.isArray(b)?parseFloat(b[o])+"px":parseFloat(b)+"px",k.width=Array.isArray(m)?parseFloat(m[o])+"px":parseFloat(m)+"px",k.left=Array.isArray(f)?f[o]:f,k.top=Array.isArray(x)?x[o]:x,k.borderWidth=Array.isArray(v)?v[o]:v,k.borderColor=Array.isArray(y)?y[o]:y,k.borderRadius=Array.isArray(w)?parseFloat(w[o])+"px":parseFloat(w)+"px",t.config.legend.markers.customHTML&&(Array.isArray(t.config.legend.markers.customHTML)?u.innerHTML=t.config.legend.markers.customHTML[o]():u.innerHTML=t.config.legend.markers.customHTML()),p.setAttrs(u,{rel:o+1,"data:collapsed":h||c}),(h||c)&&u.classList.add("apexcharts-inactive-legend");var A=document.createElement("div"),S=document.createElement("span");S.classList.add("apexcharts-legend-text"),S.innerHTML=Array.isArray(l)?l.join(" "):l;var C=t.config.legend.labels.useSeriesColors?t.globals.colors[o]:t.config.legend.labels.colors;C||(C=t.config.chart.foreColor),S.style.color=C,S.style.fontSize=parseFloat(t.config.legend.fontSize)+"px",S.style.fontWeight=t.config.legend.fontWeight,S.style.fontFamily=e||t.config.chart.fontFamily,p.setAttrs(S,{rel:o+1,i:o,"data:default-text":encodeURIComponent(l),"data:collapsed":h||c}),A.appendChild(u),A.appendChild(S);var L=new I(this.ctx);if(!t.config.legend.showForZeroSeries)0===L.getSeriesTotalByIndex(o)&&L.seriesHaveSameValues(o)&&!L.isSeriesNull(o)&&-1===t.globals.collapsedSeriesIndices.indexOf(o)&&-1===t.globals.ancillaryCollapsedSeriesIndices.indexOf(o)&&A.classList.add("apexcharts-hidden-zero-series");t.config.legend.showForNullSeries||L.isSeriesNull(o)&&-1===t.globals.collapsedSeriesIndices.indexOf(o)&&-1===t.globals.ancillaryCollapsedSeriesIndices.indexOf(o)&&A.classList.add("apexcharts-hidden-null-series"),t.globals.dom.elLegendWrap.appendChild(A),t.globals.dom.elLegendWrap.classList.add("apexcharts-align-".concat(t.config.legend.horizontalAlign)),t.globals.dom.elLegendWrap.classList.add("position-"+t.config.legend.position),A.classList.add("apexcharts-legend-series"),A.style.margin="".concat(t.config.legend.itemMargin.vertical,"px ").concat(t.config.legend.itemMargin.horizontal,"px"),t.globals.dom.elLegendWrap.style.width=t.config.legend.width?t.config.legend.width+"px":"",t.globals.dom.elLegendWrap.style.height=t.config.legend.height?t.config.legend.height+"px":"",p.setAttrs(A,{rel:o+1,"data:collapsed":h||c}),(h||c)&&A.classList.add("apexcharts-inactive-legend"),t.config.legend.onItemClick.toggleDataSeries||A.classList.add("apexcharts-no-click")}"heatmap"!==t.config.chart.type&&!this.isBarsDistributed&&t.config.legend.onItemClick.toggleDataSeries&&t.globals.dom.elWrap.addEventListener("click",this.onLegendClick,!0),t.config.legend.onItemHover.highlightDataSeries&&(t.globals.dom.elWrap.addEventListener("mousemove",this.onLegendHovered,!0),t.globals.dom.elWrap.addEventListener("mouseout",this.onLegendHovered,!0))}},{key:"setLegendWrapXY",value:function(t,e){var i=this.w,a=i.globals.dom.baseEl.querySelector(".apexcharts-legend"),s=a.getBoundingClientRect(),r=0,n=0;if("bottom"===i.config.legend.position)n+=i.globals.svgHeight-s.height/2;else if("top"===i.config.legend.position){var o=new it(this.ctx),l=o.dimHelpers.getTitleSubtitleCoords("title").height,h=o.dimHelpers.getTitleSubtitleCoords("subtitle").height;n=n+(l>0?l-10:0)+(h>0?h-10:0)}a.style.position="absolute",r=r+t+i.config.legend.offsetX,n=n+e+i.config.legend.offsetY,a.style.left=r+"px",a.style.top=n+"px","bottom"===i.config.legend.position?(a.style.top="auto",a.style.bottom=5-i.config.legend.offsetY+"px"):"right"===i.config.legend.position&&(a.style.left="auto",a.style.right=25+i.config.legend.offsetX+"px");["width","height"].forEach((function(t){a.style[t]&&(a.style[t]=parseInt(i.config.legend[t],10)+"px")}))}},{key:"legendAlignHorizontal",value:function(){var t=this.w;t.globals.dom.baseEl.querySelector(".apexcharts-legend").style.right=0;var e=this.legendHelpers.getLegendBBox(),i=new it(this.ctx),a=i.dimHelpers.getTitleSubtitleCoords("title"),s=i.dimHelpers.getTitleSubtitleCoords("subtitle"),r=0;"bottom"===t.config.legend.position?r=-e.clwh/1.8:"top"===t.config.legend.position&&(r=a.height+s.height+t.config.title.margin+t.config.subtitle.margin-10),this.setLegendWrapXY(20,r)}},{key:"legendAlignVertical",value:function(){var t=this.w,e=this.legendHelpers.getLegendBBox(),i=0;"left"===t.config.legend.position&&(i=20),"right"===t.config.legend.position&&(i=t.globals.svgWidth-e.clww-10),this.setLegendWrapXY(i,20)}},{key:"onLegendHovered",value:function(t){var e=this.w,i=t.target.classList.contains("apexcharts-legend-text")||t.target.classList.contains("apexcharts-legend-marker");if("heatmap"===e.config.chart.type||this.isBarsDistributed){if(i){var a=parseInt(t.target.getAttribute("rel"),10)-1;this.ctx.events.fireEvent("legendHover",[this.ctx,a,this.w]),new F(this.ctx).highlightRangeInSeries(t,t.target)}}else!t.target.classList.contains("apexcharts-inactive-legend")&&i&&new F(this.ctx).toggleSeriesOnHover(t,t.target)}},{key:"onLegendClick",value:function(t){if(t.target.classList.contains("apexcharts-legend-text")||t.target.classList.contains("apexcharts-legend-marker")){var e=parseInt(t.target.getAttribute("rel"),10)-1,i="true"===t.target.getAttribute("data:collapsed"),a=this.w.config.chart.events.legendClick;"function"==typeof a&&a(this.ctx,e,this.w),this.ctx.events.fireEvent("legendClick",[this.ctx,e,this.w]);var s=this.w.config.legend.markers.onClick;"function"==typeof s&&t.target.classList.contains("apexcharts-legend-marker")&&(s(this.ctx,e,this.w),this.ctx.events.fireEvent("legendMarkerClick",[this.ctx,e,this.w])),this.legendHelpers.toggleDataSeries(e,i)}}}]),t}(),nt=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.ev=this.w.config.chart.events,this.selectedClass="apexcharts-selected",this.localeValues=this.w.globals.locale.toolbar}return a(t,[{key:"createToolbar",value:function(){var t=this,e=this.w,i=function(){return document.createElement("div")},a=i();if(a.setAttribute("class","apexcharts-toolbar"),a.style.top=e.config.chart.toolbar.offsetY+"px",a.style.right=3-e.config.chart.toolbar.offsetX+"px",e.globals.dom.elWrap.appendChild(a),this.elZoom=i(),this.elZoomIn=i(),this.elZoomOut=i(),this.elPan=i(),this.elSelection=i(),this.elZoomReset=i(),this.elMenuIcon=i(),this.elMenu=i(),this.elCustomIcons=[],this.t=e.config.chart.toolbar.tools,Array.isArray(this.t.customIcons))for(var s=0;s<this.t.customIcons.length;s++)this.elCustomIcons.push(i());var r=[],n=function(i,a,s){var n=i.toLowerCase();t.t[n]&&e.config.chart.zoom.enabled&&r.push({el:a,icon:"string"==typeof t.t[n]?t.t[n]:s,title:t.localeValues[i],class:"apexcharts-".concat(n,"-icon")})};n("zoomIn",this.elZoomIn,'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">\n    <path d="M0 0h24v24H0z" fill="none"/>\n    <path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>\n</svg>\n'),n("zoomOut",this.elZoomOut,'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">\n    <path d="M0 0h24v24H0z" fill="none"/>\n    <path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>\n</svg>\n');var o=function(i){t.t[i]&&e.config.chart[i].enabled&&r.push({el:"zoom"===i?t.elZoom:t.elSelection,icon:"string"==typeof t.t[i]?t.t[i]:"zoom"===i?'<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="24" viewBox="0 0 24 24" width="24">\n    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>\n    <path d="M0 0h24v24H0V0z" fill="none"/>\n    <path d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"/>\n</svg>':'<svg fill="#6E8192" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n    <path d="M0 0h24v24H0z" fill="none"/>\n    <path d="M3 5h2V3c-1.1 0-2 .9-2 2zm0 8h2v-2H3v2zm4 8h2v-2H7v2zM3 9h2V7H3v2zm10-6h-2v2h2V3zm6 0v2h2c0-1.1-.9-2-2-2zM5 21v-2H3c0 1.1.9 2 2 2zm-2-4h2v-2H3v2zM9 3H7v2h2V3zm2 18h2v-2h-2v2zm8-8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2zm0-12h2V7h-2v2zm0 8h2v-2h-2v2zm-4 4h2v-2h-2v2zm0-16h2V3h-2v2z"/>\n</svg>',title:t.localeValues["zoom"===i?"selectionZoom":"selection"],class:e.globals.isTouchDevice?"apexcharts-element-hidden":"apexcharts-".concat(i,"-icon")})};o("zoom"),o("selection"),this.t.pan&&e.config.chart.zoom.enabled&&r.push({el:this.elPan,icon:"string"==typeof this.t.pan?this.t.pan:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" height="24" viewBox="0 0 24 24" width="24">\n    <defs>\n        <path d="M0 0h24v24H0z" id="a"/>\n    </defs>\n    <clipPath id="b">\n        <use overflow="visible" xlink:href="#a"/>\n    </clipPath>\n    <path clip-path="url(#b)" d="M23 5.5V20c0 2.2-1.8 4-4 4h-7.3c-1.08 0-2.1-.43-2.85-1.19L1 14.83s1.26-1.23 1.3-1.25c.22-.19.49-.29.79-.29.22 0 .42.06.6.16.04.01 4.31 2.46 4.31 2.46V4c0-.83.67-1.5 1.5-1.5S11 3.17 11 4v7h1V1.5c0-.83.67-1.5 1.5-1.5S15 .67 15 1.5V11h1V2.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5V11h1V5.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5z"/>\n</svg>',title:this.localeValues.pan,class:e.globals.isTouchDevice?"apexcharts-element-hidden":"apexcharts-pan-icon"}),n("reset",this.elZoomReset,'<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>\n    <path d="M0 0h24v24H0z" fill="none"/>\n</svg>'),this.t.download&&r.push({el:this.elMenuIcon,icon:"string"==typeof this.t.download?this.t.download:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>',title:this.localeValues.menu,class:"apexcharts-menu-icon"});for(var l=0;l<this.elCustomIcons.length;l++)r.push({el:this.elCustomIcons[l],icon:this.t.customIcons[l].icon,title:this.t.customIcons[l].title,index:this.t.customIcons[l].index,class:"apexcharts-toolbar-custom-icon "+this.t.customIcons[l].class});r.forEach((function(t,e){t.index&&g.moveIndexInArray(r,e,t.index)}));for(var h=0;h<r.length;h++)p.setAttrs(r[h].el,{class:r[h].class,title:r[h].title}),r[h].el.innerHTML=r[h].icon,a.appendChild(r[h].el);this._createHamburgerMenu(a),e.globals.zoomEnabled?this.elZoom.classList.add(this.selectedClass):e.globals.panEnabled?this.elPan.classList.add(this.selectedClass):e.globals.selectionEnabled&&this.elSelection.classList.add(this.selectedClass),this.addToolbarEventListeners()}},{key:"_createHamburgerMenu",value:function(t){this.elMenuItems=[],t.appendChild(this.elMenu),p.setAttrs(this.elMenu,{class:"apexcharts-menu"});var e=[{name:"exportSVG",title:this.localeValues.exportToSVG},{name:"exportPNG",title:this.localeValues.exportToPNG},{name:"exportCSV",title:this.localeValues.exportToCSV}];this.w.globals.allSeriesHasEqualX||e.splice(2,1);for(var i=0;i<e.length;i++)this.elMenuItems.push(document.createElement("div")),this.elMenuItems[i].innerHTML=e[i].title,p.setAttrs(this.elMenuItems[i],{class:"apexcharts-menu-item ".concat(e[i].name),title:e[i].title}),this.elMenu.appendChild(this.elMenuItems[i])}},{key:"addToolbarEventListeners",value:function(){var t=this;this.elZoomReset.addEventListener("click",this.handleZoomReset.bind(this)),this.elSelection.addEventListener("click",this.toggleZoomSelection.bind(this,"selection")),this.elZoom.addEventListener("click",this.toggleZoomSelection.bind(this,"zoom")),this.elZoomIn.addEventListener("click",this.handleZoomIn.bind(this)),this.elZoomOut.addEventListener("click",this.handleZoomOut.bind(this)),this.elPan.addEventListener("click",this.togglePanning.bind(this)),this.elMenuIcon.addEventListener("click",this.toggleMenu.bind(this)),this.elMenuItems.forEach((function(e){e.classList.contains("exportSVG")?e.addEventListener("click",t.handleDownload.bind(t,"svg")):e.classList.contains("exportPNG")?e.addEventListener("click",t.handleDownload.bind(t,"png")):e.classList.contains("exportCSV")&&e.addEventListener("click",t.handleDownload.bind(t,"csv"))}));for(var e=0;e<this.t.customIcons.length;e++)this.elCustomIcons[e].addEventListener("click",this.t.customIcons[e].click.bind(this,this.ctx,this.ctx.w))}},{key:"toggleZoomSelection",value:function(t){this.toggleOtherControls();var e="selection"===t?this.elSelection:this.elZoom,i="selection"===t?"selectionEnabled":"zoomEnabled";this.w.globals[i]=!this.w.globals[i],e.classList.contains(this.selectedClass)?e.classList.remove(this.selectedClass):e.classList.add(this.selectedClass)}},{key:"getToolbarIconsReference",value:function(){var t=this.w;this.elZoom||(this.elZoom=t.globals.dom.baseEl.querySelector(".apexcharts-zoom-icon")),this.elPan||(this.elPan=t.globals.dom.baseEl.querySelector(".apexcharts-pan-icon")),this.elSelection||(this.elSelection=t.globals.dom.baseEl.querySelector(".apexcharts-selection-icon"))}},{key:"enableZoomPanFromToolbar",value:function(t){this.toggleOtherControls(),"pan"===t?this.w.globals.panEnabled=!0:this.w.globals.zoomEnabled=!0;var e="pan"===t?this.elPan:this.elZoom,i="pan"===t?this.elZoom:this.elPan;e&&e.classList.add(this.selectedClass),i&&i.classList.remove(this.selectedClass)}},{key:"togglePanning",value:function(){this.toggleOtherControls(),this.w.globals.panEnabled=!this.w.globals.panEnabled,this.elPan.classList.contains(this.selectedClass)?this.elPan.classList.remove(this.selectedClass):this.elPan.classList.add(this.selectedClass)}},{key:"toggleOtherControls",value:function(){var t=this,e=this.w;e.globals.panEnabled=!1,e.globals.zoomEnabled=!1,e.globals.selectionEnabled=!1,this.getToolbarIconsReference(),[this.elPan,this.elSelection,this.elZoom].forEach((function(e){e&&e.classList.remove(t.selectedClass)}))}},{key:"handleZoomIn",value:function(){var t=this.w,e=(t.globals.minX+t.globals.maxX)/2,i=(t.globals.minX+e)/2,a=(t.globals.maxX+e)/2,s=this._getNewMinXMaxX(i,a);t.globals.disableZoomIn||this.zoomUpdateOptions(s.minX,s.maxX)}},{key:"handleZoomOut",value:function(){var t=this.w;if(!("datetime"===t.config.xaxis.type&&new Date(t.globals.minX).getUTCFullYear()<1e3)){var e=(t.globals.minX+t.globals.maxX)/2,i=t.globals.minX-(e-t.globals.minX),a=t.globals.maxX-(e-t.globals.maxX),s=this._getNewMinXMaxX(i,a);t.globals.disableZoomOut||this.zoomUpdateOptions(s.minX,s.maxX)}}},{key:"_getNewMinXMaxX",value:function(t,e){var i=this.w.config.xaxis.convertedCatToNumeric;return{minX:i?Math.floor(t):t,maxX:i?Math.floor(e):e}}},{key:"zoomUpdateOptions",value:function(t,e){var i=this.w;if(!(i.config.xaxis.convertedCatToNumeric&&(t<1&&(t=1,e=i.globals.dataPoints),e-t<2))){var a={min:t,max:e},s=this.getBeforeZoomRange(a);s&&(a=s.xaxis);var r={xaxis:a},n=g.clone(i.globals.initialConfig.yaxis);if(i.config.chart.zoom.autoScaleYaxis)n=new B(this.ctx).autoScaleY(this.ctx,n,{xaxis:a});i.config.chart.group||(r.yaxis=n),this.w.globals.zoomed=!0,this.ctx.updateHelpers._updateOptions(r,!1,this.w.config.chart.animations.dynamicAnimation.enabled),this.zoomCallback(a,n)}}},{key:"zoomCallback",value:function(t,e){"function"==typeof this.ev.zoomed&&this.ev.zoomed(this.ctx,{xaxis:t,yaxis:e})}},{key:"getBeforeZoomRange",value:function(t,e){var i=null;return"function"==typeof this.ev.beforeZoom&&(i=this.ev.beforeZoom(this,{xaxis:t,yaxis:e})),i}},{key:"toggleMenu",value:function(){var t=this;window.setTimeout((function(){t.elMenu.classList.contains("apexcharts-menu-open")?t.elMenu.classList.remove("apexcharts-menu-open"):t.elMenu.classList.add("apexcharts-menu-open")}),0)}},{key:"handleDownload",value:function(t){var e=this.w,i=new N(this.ctx);switch(t){case"svg":i.exportToSVG(this.ctx);break;case"png":i.exportToPng(this.ctx);break;case"csv":i.exportToCSV({series:e.config.series})}}},{key:"handleZoomReset",value:function(t){var e=this;this.ctx.getSyncedCharts().forEach((function(t){var i=t.w;i.globals.minX===i.globals.initialMinX&&i.globals.maxX===i.globals.initialMaxX||(t.updateHelpers.revertDefaultAxisMinMax(),"function"==typeof i.config.chart.events.zoomed&&e.zoomCallback({min:i.config.xaxis.min,max:i.config.xaxis.max}),i.globals.zoomed=!1,t.updateHelpers._updateSeries(i.globals.initialSeries,i.config.chart.animations.dynamicAnimation.enabled))}))}},{key:"destroy",value:function(){this.elZoom=null,this.elZoomIn=null,this.elZoomOut=null,this.elPan=null,this.elSelection=null,this.elZoomReset=null,this.elMenuIcon=null}}]),t}(),ot=function(t){function i(t){var a;return e(this,i),(a=c(this,l(i).call(this,t))).ctx=t,a.w=t.w,a.dragged=!1,a.graphics=new p(a.ctx),a.eventList=["mousedown","mouseleave","mousemove","touchstart","touchmove","mouseup","touchend"],a.clientX=0,a.clientY=0,a.startX=0,a.endX=0,a.dragX=0,a.startY=0,a.endY=0,a.dragY=0,a.moveDirection="none",a}return o(i,t),a(i,[{key:"init",value:function(t){var e=this,i=t.xyRatios,a=this.w,s=this;this.xyRatios=i,this.zoomRect=this.graphics.drawRect(0,0,0,0),this.selectionRect=this.graphics.drawRect(0,0,0,0),this.gridRect=a.globals.dom.baseEl.querySelector(".apexcharts-grid"),this.zoomRect.node.classList.add("apexcharts-zoom-rect"),this.selectionRect.node.classList.add("apexcharts-selection-rect"),a.globals.dom.elGraphical.add(this.zoomRect),a.globals.dom.elGraphical.add(this.selectionRect),"x"===a.config.chart.selection.type?this.slDraggableRect=this.selectionRect.draggable({minX:0,minY:0,maxX:a.globals.gridWidth,maxY:a.globals.gridHeight}).on("dragmove",this.selectionDragging.bind(this,"dragging")):"y"===a.config.chart.selection.type?this.slDraggableRect=this.selectionRect.draggable({minX:0,maxX:a.globals.gridWidth}).on("dragmove",this.selectionDragging.bind(this,"dragging")):this.slDraggableRect=this.selectionRect.draggable().on("dragmove",this.selectionDragging.bind(this,"dragging")),this.preselectedSelection(),this.hoverArea=a.globals.dom.baseEl.querySelector(a.globals.chartClass),this.hoverArea.classList.add("apexcharts-zoomable"),this.eventList.forEach((function(t){e.hoverArea.addEventListener(t,s.svgMouseEvents.bind(s,i),{capture:!1,passive:!0})}))}},{key:"destroy",value:function(){this.slDraggableRect&&(this.slDraggableRect.draggable(!1),this.slDraggableRect.off(),this.selectionRect.off()),this.selectionRect=null,this.zoomRect=null,this.gridRect=null}},{key:"svgMouseEvents",value:function(t,e){var i=this.w,a=this,s=this.ctx.toolbar,r=i.globals.zoomEnabled?i.config.chart.zoom.type:i.config.chart.selection.type;if(e.shiftKey?(this.shiftWasPressed=!0,s.enableZoomPanFromToolbar("pan")):this.shiftWasPressed&&(s.enableZoomPanFromToolbar("zoom"),this.shiftWasPressed=!1),!(e.target.classList.contains("apexcharts-selection-rect")||e.target.parentNode.classList.contains("apexcharts-toolbar"))){if(a.clientX="touchmove"===e.type||"touchstart"===e.type?e.touches[0].clientX:"touchend"===e.type?e.changedTouches[0].clientX:e.clientX,a.clientY="touchmove"===e.type||"touchstart"===e.type?e.touches[0].clientY:"touchend"===e.type?e.changedTouches[0].clientY:e.clientY,"mousedown"===e.type&&1===e.which){var n=a.gridRect.getBoundingClientRect();a.startX=a.clientX-n.left,a.startY=a.clientY-n.top,a.dragged=!1,a.w.globals.mousedown=!0}if(("mousemove"===e.type&&1===e.which||"touchmove"===e.type)&&(a.dragged=!0,i.globals.panEnabled?(i.globals.selection=null,a.w.globals.mousedown&&a.panDragging({context:a,zoomtype:r,xyRatios:t})):(a.w.globals.mousedown&&i.globals.zoomEnabled||a.w.globals.mousedown&&i.globals.selectionEnabled)&&(a.selection=a.selectionDrawing({context:a,zoomtype:r}))),"mouseup"===e.type||"touchend"===e.type||"mouseleave"===e.type){var o=a.gridRect.getBoundingClientRect();a.w.globals.mousedown&&(a.endX=a.clientX-o.left,a.endY=a.clientY-o.top,a.dragX=Math.abs(a.endX-a.startX),a.dragY=Math.abs(a.endY-a.startY),(i.globals.zoomEnabled||i.globals.selectionEnabled)&&a.selectionDrawn({context:a,zoomtype:r}),i.globals.panEnabled&&i.config.xaxis.convertedCatToNumeric&&a.delayedPanScrolled()),i.globals.zoomEnabled&&a.hideSelectionRect(this.selectionRect),a.dragged=!1,a.w.globals.mousedown=!1}this.makeSelectionRectDraggable()}}},{key:"makeSelectionRectDraggable",value:function(){var t=this.w;if(this.selectionRect){var e=this.selectionRect.node.getBoundingClientRect();e.width>0&&e.height>0&&this.slDraggableRect.selectize({points:"l, r",pointSize:8,pointType:"rect"}).resize({constraint:{minX:0,minY:0,maxX:t.globals.gridWidth,maxY:t.globals.gridHeight}}).on("resizing",this.selectionDragging.bind(this,"resizing"))}}},{key:"preselectedSelection",value:function(){var t=this.w,e=this.xyRatios;if(!t.globals.zoomEnabled)if(void 0!==t.globals.selection&&null!==t.globals.selection)this.drawSelectionRect(t.globals.selection);else if(void 0!==t.config.chart.selection.xaxis.min&&void 0!==t.config.chart.selection.xaxis.max){var i=(t.config.chart.selection.xaxis.min-t.globals.minX)/e.xRatio,a={x:i,y:0,width:t.globals.gridWidth-(t.globals.maxX-t.config.chart.selection.xaxis.max)/e.xRatio-i,height:t.globals.gridHeight,translateX:0,translateY:0,selectionEnabled:!0};this.drawSelectionRect(a),this.makeSelectionRectDraggable(),"function"==typeof t.config.chart.events.selection&&t.config.chart.events.selection(this.ctx,{xaxis:{min:t.config.chart.selection.xaxis.min,max:t.config.chart.selection.xaxis.max},yaxis:{}})}}},{key:"drawSelectionRect",value:function(t){var e=t.x,i=t.y,a=t.width,s=t.height,r=t.translateX,n=t.translateY,o=this.w,l=this.zoomRect,h=this.selectionRect;if(this.dragged||null!==o.globals.selection){var c={transform:"translate("+r+", "+n+")"};o.globals.zoomEnabled&&this.dragged&&(a<0&&(a=1),l.attr({x:e,y:i,width:a,height:s,fill:o.config.chart.zoom.zoomedArea.fill.color,"fill-opacity":o.config.chart.zoom.zoomedArea.fill.opacity,stroke:o.config.chart.zoom.zoomedArea.stroke.color,"stroke-width":o.config.chart.zoom.zoomedArea.stroke.width,"stroke-opacity":o.config.chart.zoom.zoomedArea.stroke.opacity}),p.setAttrs(l.node,c)),o.globals.selectionEnabled&&(h.attr({x:e,y:i,width:a>0?a:0,height:s>0?s:0,fill:o.config.chart.selection.fill.color,"fill-opacity":o.config.chart.selection.fill.opacity,stroke:o.config.chart.selection.stroke.color,"stroke-width":o.config.chart.selection.stroke.width,"stroke-dasharray":o.config.chart.selection.stroke.dashArray,"stroke-opacity":o.config.chart.selection.stroke.opacity}),p.setAttrs(h.node,c))}}},{key:"hideSelectionRect",value:function(t){t&&t.attr({x:0,y:0,width:0,height:0})}},{key:"selectionDrawing",value:function(t){var e=t.context,i=t.zoomtype,a=this.w,s=e,r=this.gridRect.getBoundingClientRect(),n=s.startX-1,o=s.startY,l=s.clientX-r.left-n,h=s.clientY-r.top-o,c=0,d=0,g={};return Math.abs(l+n)>a.globals.gridWidth?l=a.globals.gridWidth-n:s.clientX-r.left<0&&(l=n),n>s.clientX-r.left&&(c=-(l=Math.abs(l))),o>s.clientY-r.top&&(d=-(h=Math.abs(h))),g="x"===i?{x:n,y:0,width:l,height:a.globals.gridHeight,translateX:c,translateY:0}:"y"===i?{x:0,y:o,width:a.globals.gridWidth,height:h,translateX:0,translateY:d}:{x:n,y:o,width:l,height:h,translateX:c,translateY:d},s.drawSelectionRect(g),s.selectionDragging("resizing"),g}},{key:"selectionDragging",value:function(t,e){var i=this,a=this.w,s=this.xyRatios,r=this.selectionRect,n=0;"resizing"===t&&(n=30),"function"==typeof a.config.chart.events.selection&&a.globals.selectionEnabled&&(clearTimeout(this.w.globals.selectionResizeTimer),this.w.globals.selectionResizeTimer=window.setTimeout((function(){var t=i.gridRect.getBoundingClientRect(),e=r.node.getBoundingClientRect(),n=a.globals.xAxisScale.niceMin+(e.left-t.left)*s.xRatio,o=a.globals.xAxisScale.niceMin+(e.right-t.left)*s.xRatio,l=a.globals.yAxisScale[0].niceMin+(t.bottom-e.bottom)*s.yRatio[0],h=a.globals.yAxisScale[0].niceMax-(e.top-t.top)*s.yRatio[0];a.config.chart.events.selection(i.ctx,{xaxis:{min:n,max:o},yaxis:{min:l,max:h}})}),n))}},{key:"selectionDrawn",value:function(t){var e=t.context,i=t.zoomtype,a=this.w,s=e,r=this.xyRatios,n=this.ctx.toolbar;if(s.startX>s.endX){var o=s.startX;s.startX=s.endX,s.endX=o}if(s.startY>s.endY){var l=s.startY;s.startY=s.endY,s.endY=l}var h=a.globals.xAxisScale.niceMin+s.startX*r.xRatio,c=a.globals.xAxisScale.niceMin+s.endX*r.xRatio,d=[],u=[];if(a.config.yaxis.forEach((function(t,e){d.push(a.globals.yAxisScale[e].niceMax-r.yRatio[e]*s.startY),u.push(a.globals.yAxisScale[e].niceMax-r.yRatio[e]*s.endY)})),s.dragged&&(s.dragX>10||s.dragY>10)&&h!==c)if(a.globals.zoomEnabled){var f=g.clone(a.globals.initialConfig.yaxis);a.globals.zoomed=!0,a.globals.zoomed||(a.globals.lastXAxis=g.clone(a.config.xaxis),a.globals.lastYAxis=g.clone(a.config.yaxis)),a.config.xaxis.convertedCatToNumeric&&(h=Math.floor(h),c=Math.floor(c),h<1&&(h=1,c=a.globals.dataPoints),c-h<2&&(c=h+1));var p={min:h,max:c};if("xy"!==i&&"y"!==i||f.forEach((function(t,e){f[e].min=u[e],f[e].max=d[e]})),a.config.chart.zoom.autoScaleYaxis){var x=new B(s.ctx);f=x.autoScaleY(s.ctx,f,{xaxis:p})}if(n){var b=n.getBeforeZoomRange(p,f);b&&(p=b.xaxis?b.xaxis:p,f=b.yaxis?b.yaxe:f)}var m={xaxis:p};a.config.chart.group||(m.yaxis=f),s.ctx.updateHelpers._updateOptions(m,!1,s.w.config.chart.animations.dynamicAnimation.enabled),"function"==typeof a.config.chart.events.zoomed&&n.zoomCallback(p,f)}else if(a.globals.selectionEnabled){var v,y=null;v={min:h,max:c},"xy"!==i&&"y"!==i||(y=g.clone(a.config.yaxis)).forEach((function(t,e){y[e].min=u[e],y[e].max=d[e]})),a.globals.selection=s.selection,"function"==typeof a.config.chart.events.selection&&a.config.chart.events.selection(s.ctx,{xaxis:v,yaxis:y})}}},{key:"panDragging",value:function(t){var e=t.context,i=this.w,a=e;if(void 0!==i.globals.lastClientPosition.x){var s=i.globals.lastClientPosition.x-a.clientX,r=i.globals.lastClientPosition.y-a.clientY;Math.abs(s)>Math.abs(r)&&s>0?this.moveDirection="left":Math.abs(s)>Math.abs(r)&&s<0?this.moveDirection="right":Math.abs(r)>Math.abs(s)&&r>0?this.moveDirection="up":Math.abs(r)>Math.abs(s)&&r<0&&(this.moveDirection="down")}i.globals.lastClientPosition={x:a.clientX,y:a.clientY};var n=i.globals.minX,o=i.globals.maxX;i.config.xaxis.convertedCatToNumeric||a.panScrolled(n,o)}},{key:"delayedPanScrolled",value:function(){var t=this.w,e=t.globals.minX,i=t.globals.maxX,a=(t.globals.maxX-t.globals.minX)/2;"left"===this.moveDirection?(e=t.globals.minX+a,i=t.globals.maxX+a):"right"===this.moveDirection&&(e=t.globals.minX-a,i=t.globals.maxX-a),e=Math.floor(e),i=Math.floor(i),this.updateScrolledChart({xaxis:{min:e,max:i}},e,i)}},{key:"panScrolled",value:function(t,e){var i=this.w,a=this.xyRatios,s=g.clone(i.globals.initialConfig.yaxis);"left"===this.moveDirection?(t=i.globals.minX+i.globals.gridWidth/15*a.xRatio,e=i.globals.maxX+i.globals.gridWidth/15*a.xRatio):"right"===this.moveDirection&&(t=i.globals.minX-i.globals.gridWidth/15*a.xRatio,e=i.globals.maxX-i.globals.gridWidth/15*a.xRatio),(t<i.globals.initialMinX||e>i.globals.initialMaxX)&&(t=i.globals.minX,e=i.globals.maxX);var r={min:t,max:e};i.config.chart.zoom.autoScaleYaxis&&(s=new B(this.ctx).autoScaleY(this.ctx,s,{xaxis:r}));var n={xaxis:{min:t,max:e}};i.config.chart.group||(n.yaxis=s),this.updateScrolledChart(n,t,e)}},{key:"updateScrolledChart",value:function(t,e,i){var a=this.w;this.ctx.updateHelpers._updateOptions(t,!1,!1),"function"==typeof a.config.chart.events.scrolled&&a.config.chart.events.scrolled(this.ctx,{xaxis:{min:e,max:i}})}}]),i}(nt),lt=function(){function t(i){e(this,t),this.w=i.w,this.ttCtx=i,this.ctx=i.ctx}return a(t,[{key:"getNearestValues",value:function(t){var e=t.hoverArea,i=t.elGrid,a=t.clientX,s=t.clientY,r=this.w,n=r.globals.gridWidth,o=n/(r.globals.dataPoints-1),l=i.getBoundingClientRect(),h=this.hasBars();(r.globals.comboCharts||h)&&(o=n/r.globals.dataPoints);var c=a-l.left,d=s-l.top;c<0||d<0||c>r.globals.gridWidth||d>r.globals.gridHeight?(e.classList.remove("hovering-zoom"),e.classList.remove("hovering-pan")):r.globals.zoomEnabled?(e.classList.remove("hovering-pan"),e.classList.add("hovering-zoom")):r.globals.panEnabled&&(e.classList.remove("hovering-zoom"),e.classList.add("hovering-pan"));var u=Math.round(c/o);h&&(u=Math.ceil(c/o),u-=1);for(var f,p=null,x=null,b=[],m=0;m<r.globals.seriesXvalues.length;m++)b.push([r.globals.seriesXvalues[m][0]-1e-6].concat(r.globals.seriesXvalues[m]));return b=b.map((function(t){return t.filter((function(t){return t}))})),f=r.globals.seriesYvalues.map((function(t){return t.filter((function(t){return g.isNumber(t)}))})),r.globals.isXNumeric&&(p=(x=this.closestInMultiArray(c,d,b,f)).index,u=x.j,null!==p&&(b=r.globals.seriesXvalues[p],u=(x=this.closestInArray(c,b)).index)),r.globals.capturedSeriesIndex=null===p?-1:p,(!u||u<1)&&(u=0),r.globals.capturedDataPointIndex=u,{capturedSeries:p,j:u,hoverX:c,hoverY:d}}},{key:"closestInMultiArray",value:function(t,e,i,a){var s=this.w,r=0,n=null,o=-1;s.globals.series.length>1?r=this.getFirstActiveXArray(i):n=0;var l=a[r][0],h=i[r][0],c=Math.abs(t-h),d=Math.abs(e-l),g=d+c;return a.map((function(s,r){s.map((function(s,l){var h=Math.abs(e-a[r][l]),u=Math.abs(t-i[r][l]),f=u+h;f<g&&(g=f,c=u,d=h,n=r,o=l)}))})),{index:n,j:o}}},{key:"getFirstActiveXArray",value:function(t){for(var e=0,i=new I(this.ctx),a=t.map((function(t,e){return t.length>0?e:-1})),s=0;s<a.length;s++){var r=i.getSeriesTotalByIndex(s);if(-1!==a[s]&&0!==r&&!i.seriesHaveSameValues(s)){e=a[s];break}}return e}},{key:"closestInArray",value:function(t,e){for(var i=e[0],a=null,s=Math.abs(t-i),r=0;r<e.length;r++){var n=Math.abs(t-e[r]);n<s&&(s=n,a=r)}return{index:a}}},{key:"isXoverlap",value:function(t){var e=[],i=this.w.globals.seriesX.filter((function(t){return void 0!==t[0]}));if(i.length>0)for(var a=0;a<i.length-1;a++)void 0!==i[a][t]&&void 0!==i[a+1][t]&&i[a][t]!==i[a+1][t]&&e.push("unEqual");return 0===e.length}},{key:"isInitialSeriesSameLen",value:function(){for(var t=!0,e=this.w.globals.initialSeries,i=0;i<e.length-1;i++)if(e[i].data.length!==e[i+1].data.length){t=!1;break}return t}},{key:"getBarsHeight",value:function(t){return d(t).reduce((function(t,e){return t+e.getBBox().height}),0)}},{key:"getElMarkers",value:function(){return this.w.globals.dom.baseEl.querySelectorAll(" .apexcharts-series-markers")}},{key:"getAllMarkers",value:function(){var t=this.w.globals.dom.baseEl.querySelectorAll(".apexcharts-series-markers-wrap");(t=d(t)).sort((function(t,e){return Number(e.getAttribute("data:realIndex"))<Number(t.getAttribute("data:realIndex"))?0:-1}));var e=[];return t.forEach((function(t){e.push(t.querySelector(".apexcharts-marker"))})),e}},{key:"hasMarkers",value:function(){return this.getElMarkers().length>0}},{key:"getElBars",value:function(){return this.w.globals.dom.baseEl.querySelectorAll(".apexcharts-bar-series,  .apexcharts-candlestick-series, .apexcharts-rangebar-series")}},{key:"hasBars",value:function(){return this.getElBars().length>0}},{key:"getHoverMarkerSize",value:function(t){var e=this.w,i=e.config.markers.hover.size;return void 0===i&&(i=e.globals.markers.size[t]+e.config.markers.hover.sizeOffset),i}},{key:"toggleAllTooltipSeriesGroups",value:function(t){var e=this.w,i=this.ttCtx;0===i.allTooltipSeriesGroups.length&&(i.allTooltipSeriesGroups=e.globals.dom.baseEl.querySelectorAll(".apexcharts-tooltip-series-group"));for(var a=i.allTooltipSeriesGroups,s=0;s<a.length;s++)"enable"===t?(a[s].classList.add("apexcharts-active"),a[s].style.display=e.config.tooltip.items.display):(a[s].classList.remove("apexcharts-active"),a[s].style.display="none")}}]),t}(),ht=function(){function t(i){e(this,t),this.w=i.w,this.ctx=i.ctx,this.ttCtx=i,this.tooltipUtil=new lt(i)}return a(t,[{key:"drawSeriesTexts",value:function(t){var e=t.shared,i=void 0===e||e,a=t.ttItems,s=t.i,r=void 0===s?0:s,n=t.j,o=void 0===n?null:n,l=t.y1,h=t.y2,c=this.w;void 0!==c.config.tooltip.custom?this.handleCustomTooltip({i:r,j:o,y1:l,y2:h,w:c}):this.toggleActiveInactiveSeries(i);var d=this.getValuesToPrint({i:r,j:o});this.printLabels({i:r,j:o,values:d,ttItems:a,shared:i});var g=this.ttCtx.getElTooltip();this.ttCtx.tooltipRect.ttWidth=g.getBoundingClientRect().width,this.ttCtx.tooltipRect.ttHeight=g.getBoundingClientRect().height}},{key:"printLabels",value:function(t){var e,i=this,a=t.i,s=t.j,r=t.values,n=t.ttItems,o=t.shared,l=this.w,h=r.xVal,c=r.zVal,d=r.xAxisTTVal,g="",u=l.globals.colors[a];null!==s&&l.config.plotOptions.bar.distributed&&(u=l.globals.colors[s]);for(var f=function(t,r){var f=i.getFormatters(a);g=i.getSeriesName({fn:f.yLbTitleFormatter,index:a,seriesIndex:a,j:s});var p=l.config.tooltip.inverseOrder?r:t;if(l.globals.axisCharts){var x=function(t){return f.yLbFormatter(l.globals.series[t][s],{series:l.globals.series,seriesIndex:t,dataPointIndex:s,w:l})};o?(f=i.getFormatters(p),g=i.getSeriesName({fn:f.yLbTitleFormatter,index:p,seriesIndex:a,j:s}),u=l.globals.colors[p],e=x(p)):e=x(a)}null===s&&(e=f.yLbFormatter(l.globals.series[a],l)),i.DOMHandling({i:a,t:p,j:s,ttItems:n,values:{val:e,xVal:h,xAxisTTVal:d,zVal:c},seriesName:g,shared:o,pColor:u})},p=0,x=l.globals.series.length-1;p<l.globals.series.length;p++,x--)f(p,x)}},{key:"getFormatters",value:function(t){var e,i=this.w,a=i.globals.yLabelFormatters[t];return void 0!==i.globals.ttVal?Array.isArray(i.globals.ttVal)?(a=i.globals.ttVal[t]&&i.globals.ttVal[t].formatter,e=i.globals.ttVal[t]&&i.globals.ttVal[t].title&&i.globals.ttVal[t].title.formatter):(a=i.globals.ttVal.formatter,"function"==typeof i.globals.ttVal.title.formatter&&(e=i.globals.ttVal.title.formatter)):e=i.config.tooltip.y.title.formatter,"function"!=typeof a&&(a=i.globals.yLabelFormatters[0]?i.globals.yLabelFormatters[0]:function(t){return t}),"function"!=typeof e&&(e=function(t){return t}),{yLbFormatter:a,yLbTitleFormatter:e}}},{key:"getSeriesName",value:function(t){var e=t.fn,i=t.index,a=t.seriesIndex,s=t.j,r=this.w;return e(String(r.globals.seriesNames[i]),{series:r.globals.series,seriesIndex:a,dataPointIndex:s,w:r})}},{key:"DOMHandling",value:function(t){var e=t.i,i=t.t,a=(t.j,t.ttItems),s=t.values,r=t.seriesName,n=t.shared,o=t.pColor,l=this.w,h=this.ttCtx,c=s.val,d=s.xVal,g=s.xAxisTTVal,u=s.zVal,f=null;f=a[i].children,l.config.tooltip.fillSeriesColor&&(a[i].style.backgroundColor=o,f[0].style.display="none"),h.showTooltipTitle&&(null===h.tooltipTitle&&(h.tooltipTitle=l.globals.dom.baseEl.querySelector(".apexcharts-tooltip-title")),h.tooltipTitle.innerHTML=d),h.blxaxisTooltip&&(h.xaxisTooltipText.innerHTML=""!==g?g:d);var p=a[i].querySelector(".apexcharts-tooltip-text-label");p&&(p.innerHTML=r?r+": ":"");var x=a[i].querySelector(".apexcharts-tooltip-text-value");(x&&(x.innerHTML=void 0!==c?c:""),f[0]&&f[0].classList.contains("apexcharts-tooltip-marker")&&(l.config.tooltip.marker.fillColors&&Array.isArray(l.config.tooltip.marker.fillColors)&&(o=l.config.tooltip.marker.fillColors[e]),f[0].style.backgroundColor=o),l.config.tooltip.marker.show||(f[0].style.display="none"),null!==u)&&(a[i].querySelector(".apexcharts-tooltip-text-z-label").innerHTML=l.config.tooltip.z.title,a[i].querySelector(".apexcharts-tooltip-text-z-value").innerHTML=void 0!==u?u:"");n&&f[0]&&(null==c||l.globals.collapsedSeriesIndices.indexOf(i)>-1?f[0].parentNode.style.display="none":f[0].parentNode.style.display=l.config.tooltip.items.display)}},{key:"toggleActiveInactiveSeries",value:function(t){var e=this.w;if(t)this.tooltipUtil.toggleAllTooltipSeriesGroups("enable");else{this.tooltipUtil.toggleAllTooltipSeriesGroups("disable");var i=e.globals.dom.baseEl.querySelector(".apexcharts-tooltip-series-group");i&&(i.classList.add("apexcharts-active"),i.style.display=e.config.tooltip.items.display)}}},{key:"getValuesToPrint",value:function(t){var e=t.i,i=t.j,a=this.w,s=this.ctx.series.filteredSeriesX(),r="",n="",o=null,l=null,h={series:a.globals.series,seriesIndex:e,dataPointIndex:i,w:a},c=a.globals.ttZFormatter;null===i?l=a.globals.series[e]:a.globals.isXNumeric?(r=s[e][i],0===s[e].length&&(r=s[this.tooltipUtil.getFirstActiveXArray(s)][i])):r=void 0!==a.globals.labels[i]?a.globals.labels[i]:"";var d=r;a.globals.isXNumeric&&"datetime"===a.config.xaxis.type?r=new D(this.ctx).xLabelFormat(a.globals.ttKeyFormatter,d,d):a.globals.isBarHorizontal||(r=a.globals.xLabelFormatter(d,h));return void 0!==a.config.tooltip.x.formatter&&(r=a.globals.ttKeyFormatter(d,h)),a.globals.seriesZ.length>0&&a.globals.seriesZ[0].length>0&&(o=c(a.globals.seriesZ[e][i],a)),n="function"==typeof a.config.xaxis.tooltip.formatter?a.globals.xaxisTooltipFormatter(d,h):r,{val:Array.isArray(l)?l.join(" "):l,xVal:Array.isArray(r)?r.join(" "):r,xAxisTTVal:Array.isArray(n)?n.join(" "):n,zVal:o}}},{key:"handleCustomTooltip",value:function(t){var e=t.i,i=t.j,a=t.y1,s=t.y2,r=t.w,n=this.ttCtx.getElTooltip(),o=r.config.tooltip.custom;Array.isArray(o)&&o[e]&&(o=o[e]),n.innerHTML=o({ctx:this.ctx,series:r.globals.series,seriesIndex:e,dataPointIndex:i,y1:a,y2:s,w:r})}}]),t}(),ct=function(){function t(i){e(this,t),this.ttCtx=i,this.ctx=i.ctx,this.w=i.w}return a(t,[{key:"moveXCrosshairs",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=this.ttCtx,a=this.w,s=i.getElXCrosshairs(),r=t-i.xcrosshairsWidth/2,n=a.globals.labels.slice().length;if(null!==e&&(r=a.globals.gridWidth/n*e),null!==s&&(s.setAttribute("x",r),s.setAttribute("x1",r),s.setAttribute("x2",r),s.setAttribute("y2",a.globals.gridHeight),s.classList.add("apexcharts-active")),r<0&&(r=0),r>a.globals.gridWidth&&(r=a.globals.gridWidth),i.blxaxisTooltip){var o=r;"tickWidth"!==a.config.xaxis.crosshairs.width&&"barWidth"!==a.config.xaxis.crosshairs.width||(o=r+i.xcrosshairsWidth/2),this.moveXAxisTooltip(o)}}},{key:"moveYCrosshairs",value:function(t){var e=this.ttCtx;null!==e.ycrosshairs&&(p.setAttrs(e.ycrosshairs,{y1:t,y2:t}),p.setAttrs(e.ycrosshairsHidden,{y1:t,y2:t}))}},{key:"moveXAxisTooltip",value:function(t){var e=this.w,i=this.ttCtx;if(null!==i.xaxisTooltip){i.xaxisTooltip.classList.add("apexcharts-active");var a=i.xaxisOffY+e.config.xaxis.tooltip.offsetY+e.globals.translateY+1+e.config.xaxis.offsetY;if(t-=i.xaxisTooltip.getBoundingClientRect().width/2,!isNaN(t)){t+=e.globals.translateX;var s;s=new p(this.ctx).getTextRects(i.xaxisTooltipText.innerHTML),i.xaxisTooltipText.style.minWidth=s.width+"px",i.xaxisTooltip.style.left=t+"px",i.xaxisTooltip.style.top=a+"px"}}}},{key:"moveYAxisTooltip",value:function(t){var e=this.w,i=this.ttCtx;null===i.yaxisTTEls&&(i.yaxisTTEls=e.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxistooltip"));var a=parseInt(i.ycrosshairsHidden.getAttribute("y1"),10),s=e.globals.translateY+a,r=i.yaxisTTEls[t].getBoundingClientRect().height,n=e.globals.translateYAxisX[t]-2;e.config.yaxis[t].opposite&&(n-=26),s-=r/2,-1===e.globals.ignoreYAxisIndexes.indexOf(t)?(i.yaxisTTEls[t].classList.add("apexcharts-active"),i.yaxisTTEls[t].style.top=s+"px",i.yaxisTTEls[t].style.left=n+e.config.yaxis[t].tooltip.offsetX+"px"):i.yaxisTTEls[t].classList.remove("apexcharts-active")}},{key:"moveTooltip",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,a=this.w,s=this.ttCtx,r=s.getElTooltip(),n=s.tooltipRect,o=null!==i?parseFloat(i):1,l=parseFloat(t)+o+5,h=parseFloat(e)+o/2;if(l>a.globals.gridWidth/2&&(l=l-n.ttWidth-o-15),l>a.globals.gridWidth-n.ttWidth-10&&(l=a.globals.gridWidth-n.ttWidth),l<-20&&(l=-20),a.config.tooltip.followCursor){var c=s.getElGrid(),d=c.getBoundingClientRect();h=s.e.clientY+a.globals.translateY-d.top-n.ttHeight/2}if(!a.config.tooltip.followCursor){var g=this.positionChecks(n,l,h);l=g.x,h=g.y}isNaN(l)||(l+=a.globals.translateX,r.style.left=l+"px",r.style.top=h+"px")}},{key:"positionChecks",value:function(t,e,i){var a=this.w;return t.ttHeight/2+i>a.globals.gridHeight&&(i=a.globals.gridHeight-t.ttHeight+a.globals.translateY),i<0&&(i=0),{x:e,y:i}}},{key:"moveMarkers",value:function(t,e){var i=this.w,a=this.ttCtx;if(i.globals.markers.size[t]>0)for(var s=i.globals.dom.baseEl.querySelectorAll(" .apexcharts-series[data\\:realIndex='".concat(t,"'] .apexcharts-marker")),r=0;r<s.length;r++)parseInt(s[r].getAttribute("rel"),10)===e&&(a.marker.resetPointsSize(),a.marker.enlargeCurrentPoint(e,s[r]));else a.marker.resetPointsSize(),this.moveDynamicPointOnHover(e,t)}},{key:"moveDynamicPointOnHover",value:function(t,e){var i,a,s=this.w,r=this.ttCtx,n=s.globals.pointsArray,o=r.tooltipUtil.getHoverMarkerSize(e),l=s.config.series[e].type;if(!l||"column"!==l&&"candlestick"!==l){i=n[e][t][0],a=n[e][t][1]?n[e][t][1]:0;var h=s.globals.dom.baseEl.querySelector(".apexcharts-series[data\\:realIndex='".concat(e,"'] .apexcharts-series-markers circle"));h&&(h.setAttribute("r",o),h.setAttribute("cx",i),h.setAttribute("cy",a)),this.moveXCrosshairs(i),r.fixedTooltip||this.moveTooltip(i,a,o)}}},{key:"moveDynamicPointsOnHover",value:function(t){var e,i=this.ttCtx,a=i.w,s=0,r=0,n=a.globals.pointsArray;e=new F(this.ctx).getActiveConfigSeriesIndex(!0);var o=i.tooltipUtil.getHoverMarkerSize(e);n[e]&&(s=n[e][t][0],r=n[e][t][1]);var l=i.tooltipUtil.getAllMarkers();if(null!==l)for(var h=0;h<a.globals.series.length;h++){var c=n[h];if(a.globals.comboCharts&&void 0===c&&l.splice(h,0,null),c&&c.length){var d=n[h][t][1];l[h].setAttribute("cx",s),null===d||isNaN(d)?l[h]&&l[h].setAttribute("r",0):(l[h]&&l[h].setAttribute("r",o),l[h]&&l[h].setAttribute("cy",d))}}if(this.moveXCrosshairs(s),!i.fixedTooltip){var g=r||a.globals.gridHeight;this.moveTooltip(s,g,o)}}},{key:"moveStickyTooltipOverBars",value:function(t){var e,i=this.w,a=this.ttCtx,s=i.globals.columnSeries?i.globals.columnSeries.length:i.globals.series.length,r=s>=2&&s%2==0?Math.floor(s/2):Math.floor(s/2)+1,n=i.globals.dom.baseEl.querySelector(".apexcharts-bar-series .apexcharts-series[rel='".concat(r,"'] path[j='").concat(t,"'], .apexcharts-candlestick-series .apexcharts-series[rel='").concat(r,"'] path[j='").concat(t,"'], .apexcharts-rangebar-series .apexcharts-series[rel='").concat(r,"'] path[j='").concat(t,"']")),o=n?parseFloat(n.getAttribute("cx")):0,l=n?parseFloat(n.getAttribute("barWidth")):0;i.globals.isXNumeric?o-=s%2!=0?l/2:0:(o=a.xAxisTicksPositions[t-1]+a.dataPointsDividedWidth/2,isNaN(o)&&(o=a.xAxisTicksPositions[t]-a.dataPointsDividedWidth/2));var h=a.getElGrid().getBoundingClientRect();if(e=a.e.clientY-h.top-a.tooltipRect.ttHeight/2,this.moveXCrosshairs(o),!a.fixedTooltip){var c=e||i.globals.gridHeight;this.moveTooltip(o,c)}}}]),t}(),dt=function(){function t(i){e(this,t),this.w=i.w,this.ttCtx=i,this.ctx=i.ctx,this.tooltipPosition=new ct(i)}return a(t,[{key:"drawDynamicPoints",value:function(){var t=this.w,e=new p(this.ctx),i=new X(this.ctx),a=t.globals.dom.baseEl.querySelectorAll(".apexcharts-series");(a=d(a)).sort((function(t,e){return Number(e.getAttribute("data:realIndex"))<Number(t.getAttribute("data:realIndex"))?0:-1}));for(var s=0;s<a.length;s++){var r=a[s].querySelector(".apexcharts-series-markers-wrap");if(null!==r){var n=void 0,o="apexcharts-marker w".concat((Math.random()+1).toString(36).substring(4));"line"!==t.config.chart.type&&"area"!==t.config.chart.type||t.globals.comboCharts||t.config.tooltip.intersect||(o+=" no-pointer-events");var l=i.getMarkerConfig(o,s);(n=e.drawMarker(0,0,l)).node.setAttribute("default-marker-size",0);var h=document.createElementNS(t.globals.SVGNS,"g");h.classList.add("apexcharts-series-markers"),h.appendChild(n.node),r.appendChild(h)}}}},{key:"enlargeCurrentPoint",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,s=this.w;"bubble"!==s.config.chart.type&&this.newPointSize(t,e);var r=e.getAttribute("cx"),n=e.getAttribute("cy");if(null!==i&&null!==a&&(r=i,n=a),this.tooltipPosition.moveXCrosshairs(r),!this.fixedTooltip){if("radar"===s.config.chart.type){var o=this.ttCtx.getElGrid(),l=o.getBoundingClientRect();r=this.ttCtx.e.clientX-l.left}this.tooltipPosition.moveTooltip(r,n,s.config.markers.hover.size)}}},{key:"enlargePoints",value:function(t){for(var e=this.w,i=this.ttCtx,a=t,s=e.globals.dom.baseEl.querySelectorAll(".apexcharts-series:not(.apexcharts-series-collapsed) .apexcharts-marker"),r=e.config.markers.hover.size,n=0;n<s.length;n++){var o=s[n].getAttribute("rel"),l=s[n].getAttribute("index");if(void 0===r&&(r=e.globals.markers.size[l]+e.config.markers.hover.sizeOffset),a===parseInt(o,10)){this.newPointSize(a,s[n]);var h=s[n].getAttribute("cx"),c=s[n].getAttribute("cy");this.tooltipPosition.moveXCrosshairs(h),i.fixedTooltip||this.tooltipPosition.moveTooltip(h,c,r)}else this.oldPointSize(s[n])}}},{key:"newPointSize",value:function(t,e){var i=this.w,a=i.config.markers.hover.size,s=0===t?e.parentNode.firstChild:e.parentNode.lastChild;if("0"!==s.getAttribute("default-marker-size")){var r=parseInt(s.getAttribute("index"),10);void 0===a&&(a=i.globals.markers.size[r]+i.config.markers.hover.sizeOffset),s.setAttribute("r",a)}}},{key:"oldPointSize",value:function(t){var e=parseFloat(t.getAttribute("default-marker-size"));t.setAttribute("r",e)}},{key:"resetPointsSize",value:function(){for(var t=this.w.globals.dom.baseEl.querySelectorAll(".apexcharts-series:not(.apexcharts-series-collapsed) .apexcharts-marker"),e=0;e<t.length;e++){var i=parseFloat(t[e].getAttribute("default-marker-size"));g.isNumber(i)?t[e].setAttribute("r",i):t[e].setAttribute("r",0)}}}]),t}(),gt=function(){function t(i){e(this,t),this.w=i.w,this.ttCtx=i}return a(t,[{key:"getAttr",value:function(t,e){return parseFloat(t.target.getAttribute(e))}},{key:"handleHeatTooltip",value:function(t){var e=t.e,i=t.opt,a=t.x,s=t.y,r=this.ttCtx,n=this.w;if(e.target.classList.contains("apexcharts-heatmap-rect")){var o=this.getAttr(e,"i"),l=this.getAttr(e,"j"),h=this.getAttr(e,"cx"),c=this.getAttr(e,"cy"),d=this.getAttr(e,"width"),g=this.getAttr(e,"height");if(r.tooltipLabels.drawSeriesTexts({ttItems:i.ttItems,i:o,j:l,shared:!1}),n.globals.capturedSeriesIndex=o,n.globals.capturedDataPointIndex=l,a=h+r.tooltipRect.ttWidth/2+d,s=c+r.tooltipRect.ttHeight/2-g/2,r.tooltipPosition.moveXCrosshairs(h+d/2),a>n.globals.gridWidth/2&&(a=h-r.tooltipRect.ttWidth/2+d),r.w.config.tooltip.followCursor){var u=r.getElGrid().getBoundingClientRect();s=r.e.clientY-u.top+n.globals.translateY/2-10}}return{x:a,y:s}}},{key:"handleMarkerTooltip",value:function(t){var e,i,a=t.e,s=t.opt,r=t.x,n=t.y,o=this.w,l=this.ttCtx;if(a.target.classList.contains("apexcharts-marker")){var h=parseInt(s.paths.getAttribute("cx"),10),c=parseInt(s.paths.getAttribute("cy"),10),d=parseFloat(s.paths.getAttribute("val"));if(i=parseInt(s.paths.getAttribute("rel"),10),e=parseInt(s.paths.parentNode.parentNode.parentNode.getAttribute("rel"),10)-1,l.intersect){var u=g.findAncestor(s.paths,"apexcharts-series");u&&(e=parseInt(u.getAttribute("data:realIndex"),10))}if(l.tooltipLabels.drawSeriesTexts({ttItems:s.ttItems,i:e,j:i,shared:!l.showOnIntersect&&o.config.tooltip.shared}),"mouseup"===a.type&&l.markerClick(a,e,i),o.globals.capturedSeriesIndex=e,o.globals.capturedDataPointIndex=i,r=h,n=c+o.globals.translateY-1.4*l.tooltipRect.ttHeight,l.w.config.tooltip.followCursor){var f=l.getElGrid().getBoundingClientRect();n=l.e.clientY+o.globals.translateY-f.top}d<0&&(n=c),l.marker.enlargeCurrentPoint(i,s.paths,r,n)}return{x:r,y:n}}},{key:"handleBarTooltip",value:function(t){var e,i,a=t.e,s=t.opt,r=this.w,n=this.ttCtx,o=n.getElTooltip(),l=0,h=0,c=0,d=this.getBarTooltipXY({e:a,opt:s});e=d.i;var g=d.barHeight,u=d.j;if(r.globals.capturedSeriesIndex=e,r.globals.capturedDataPointIndex=u,r.globals.isBarHorizontal&&n.tooltipUtil.hasBars()||!r.config.tooltip.shared?(h=d.x,c=d.y,i=Array.isArray(r.config.stroke.width)?r.config.stroke.width[e]:r.config.stroke.width,l=h):r.globals.comboCharts||r.config.tooltip.shared||(l/=2),isNaN(c)?c=r.globals.svgHeight-n.tooltipRect.ttHeight:c<0&&(c=0),h+n.tooltipRect.ttWidth>r.globals.gridWidth?h-=n.tooltipRect.ttWidth:h<0&&(h=0),n.w.config.tooltip.followCursor){var f=n.getElGrid().getBoundingClientRect();c=n.e.clientY-f.top}if(null===n.tooltip&&(n.tooltip=r.globals.dom.baseEl.querySelector(".apexcharts-tooltip")),r.config.tooltip.shared||(r.globals.comboBarCount>0?n.tooltipPosition.moveXCrosshairs(l+i/2):n.tooltipPosition.moveXCrosshairs(l)),!n.fixedTooltip&&(!r.config.tooltip.shared||r.globals.isBarHorizontal&&n.tooltipUtil.hasBars())){var p=r.globals.isMultipleYAxis?r.config.yaxis[x]&&r.config.yaxis[x].reversed:r.config.yaxis[0].reversed;p&&(h-=n.tooltipRect.ttWidth)<0&&(h=0),o.style.left=h+r.globals.translateX+"px";var x=parseInt(s.paths.parentNode.getAttribute("data:realIndex"),10);!p||r.globals.isBarHorizontal&&n.tooltipUtil.hasBars()||(c=c+g-2*(r.globals.series[e][u]<0?g:0)),n.tooltipRect.ttHeight+c>r.globals.gridHeight?(c=r.globals.gridHeight-n.tooltipRect.ttHeight+r.globals.translateY,o.style.top=c+"px"):o.style.top=c+r.globals.translateY-n.tooltipRect.ttHeight/2+"px"}}},{key:"getBarTooltipXY",value:function(t){var e=t.e,i=t.opt,a=this.w,s=null,r=this.ttCtx,n=0,o=0,l=0,h=0,c=0,d=e.target.classList;if(d.contains("apexcharts-bar-area")||d.contains("apexcharts-candlestick-area")||d.contains("apexcharts-rangebar-area")){var g=e.target,u=g.getBoundingClientRect(),f=i.elGrid.getBoundingClientRect(),p=u.height;c=u.height;var x=u.width,b=parseInt(g.getAttribute("cx"),10),m=parseInt(g.getAttribute("cy"),10);h=parseFloat(g.getAttribute("barWidth"));var v="touchmove"===e.type?e.touches[0].clientX:e.clientX;s=parseInt(g.getAttribute("j"),10),n=parseInt(g.parentNode.getAttribute("rel"),10)-1;var y=g.getAttribute("data-range-y1"),w=g.getAttribute("data-range-y2");a.globals.comboCharts&&(n=parseInt(g.parentNode.getAttribute("data:realIndex"),10)),r.tooltipLabels.drawSeriesTexts({ttItems:i.ttItems,i:n,j:s,y1:y?parseInt(y,10):null,y2:w?parseInt(w,10):null,shared:!r.showOnIntersect&&a.config.tooltip.shared}),a.config.tooltip.followCursor?a.globals.isBarHorizontal?(o=v-f.left+15,l=m-r.dataPointsDividedHeight+p/2-r.tooltipRect.ttHeight/2):(o=a.globals.isXNumeric?b-x/2:b-r.dataPointsDividedWidth+x/2,l=e.clientY-f.top-r.tooltipRect.ttHeight/2-15):a.globals.isBarHorizontal?((o=b)<r.xyRatios.baseLineInvertedY&&(o=b-r.tooltipRect.ttWidth),l=m-r.dataPointsDividedHeight+p/2-r.tooltipRect.ttHeight/2):(o=a.globals.isXNumeric?b-x/2:b-r.dataPointsDividedWidth+x/2,l=m)}return{x:o,y:l,barHeight:c,barWidth:h,i:n,j:s}}}]),t}(),ut=function(){function t(i){e(this,t),this.w=i.w,this.ttCtx=i}return a(t,[{key:"drawXaxisTooltip",value:function(){var t=this.w,e=this.ttCtx,i="bottom"===t.config.xaxis.position;e.xaxisOffY=i?t.globals.gridHeight+1:-t.globals.xAxisHeight-t.config.xaxis.axisTicks.height+3;var a=i?"apexcharts-xaxistooltip apexcharts-xaxistooltip-bottom":"apexcharts-xaxistooltip apexcharts-xaxistooltip-top",s=t.globals.dom.elWrap;e.blxaxisTooltip&&(null===t.globals.dom.baseEl.querySelector(".apexcharts-xaxistooltip")&&(e.xaxisTooltip=document.createElement("div"),e.xaxisTooltip.setAttribute("class",a+" apexcharts-theme-"+t.config.tooltip.theme),s.appendChild(e.xaxisTooltip),e.xaxisTooltipText=document.createElement("div"),e.xaxisTooltipText.classList.add("apexcharts-xaxistooltip-text"),e.xaxisTooltipText.style.fontFamily=t.config.xaxis.tooltip.style.fontFamily||t.config.chart.fontFamily,e.xaxisTooltipText.style.fontSize=t.config.xaxis.tooltip.style.fontSize,e.xaxisTooltip.appendChild(e.xaxisTooltipText)))}},{key:"drawYaxisTooltip",value:function(){for(var t=this.w,e=this.ttCtx,i=function(i){var a=t.config.yaxis[i].opposite||t.config.yaxis[i].crosshairs.opposite;e.yaxisOffX=a?t.globals.gridWidth+1:1;var s="apexcharts-yaxistooltip apexcharts-yaxistooltip-".concat(i,a?" apexcharts-yaxistooltip-right":" apexcharts-yaxistooltip-left");t.globals.yAxisSameScaleIndices.map((function(e,a){e.map((function(e,a){a===i&&(s+=t.config.yaxis[a].show?" ":" apexcharts-yaxistooltip-hidden")}))}));var r=t.globals.dom.elWrap;e.blyaxisTooltip&&(null===t.globals.dom.baseEl.querySelector(".apexcharts-yaxistooltip apexcharts-yaxistooltip-".concat(i))&&(e.yaxisTooltip=document.createElement("div"),e.yaxisTooltip.setAttribute("class",s+" apexcharts-theme-"+t.config.tooltip.theme),r.appendChild(e.yaxisTooltip),0===i&&(e.yaxisTooltipText=[]),e.yaxisTooltipText.push(document.createElement("div")),e.yaxisTooltipText[i].classList.add("apexcharts-yaxistooltip-text"),e.yaxisTooltip.appendChild(e.yaxisTooltipText[i])))},a=0;a<t.config.yaxis.length;a++)i(a)}},{key:"setXCrosshairWidth",value:function(){var t=this.w,e=this.ttCtx,i=e.getElXCrosshairs();if(e.xcrosshairsWidth=parseInt(t.config.xaxis.crosshairs.width,10),t.globals.comboCharts){var a=t.globals.dom.baseEl.querySelector(".apexcharts-bar-area");if(null!==a&&"barWidth"===t.config.xaxis.crosshairs.width){var s=parseFloat(a.getAttribute("barWidth"));e.xcrosshairsWidth=s}else if("tickWidth"===t.config.xaxis.crosshairs.width){var r=t.globals.labels.length;e.xcrosshairsWidth=t.globals.gridWidth/r}}else if("tickWidth"===t.config.xaxis.crosshairs.width){var n=t.globals.labels.length;e.xcrosshairsWidth=t.globals.gridWidth/n}else if("barWidth"===t.config.xaxis.crosshairs.width){var o=t.globals.dom.baseEl.querySelector(".apexcharts-bar-area");if(null!==o){var l=parseFloat(o.getAttribute("barWidth"));e.xcrosshairsWidth=l}else e.xcrosshairsWidth=1}t.globals.isBarHorizontal&&(e.xcrosshairsWidth=0),null!==i&&e.xcrosshairsWidth>0&&i.setAttribute("width",e.xcrosshairsWidth)}},{key:"handleYCrosshair",value:function(){var t=this.w,e=this.ttCtx;e.ycrosshairs=t.globals.dom.baseEl.querySelector(".apexcharts-ycrosshairs"),e.ycrosshairsHidden=t.globals.dom.baseEl.querySelector(".apexcharts-ycrosshairs-hidden")}},{key:"drawYaxisTooltipText",value:function(t,e,i){var a=this.ttCtx,s=this.w,r=s.globals.yLabelFormatters[t];if(a.blyaxisTooltip){var n=a.getElGrid().getBoundingClientRect(),o=(e-n.top)*i.yRatio[t],l=s.globals.maxYArr[t]-s.globals.minYArr[t],h=s.globals.minYArr[t]+(l-o);a.tooltipPosition.moveYCrosshairs(e-n.top),a.yaxisTooltipText[t].innerHTML=r(h),a.tooltipPosition.moveYAxisTooltip(t)}}}]),t}(),ft=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w;var a=this.w;this.tConfig=a.config.tooltip,this.tooltipUtil=new lt(this),this.tooltipLabels=new ht(this),this.tooltipPosition=new ct(this),this.marker=new dt(this),this.intersect=new gt(this),this.axesTooltip=new ut(this),this.showOnIntersect=this.tConfig.intersect,this.showTooltipTitle=this.tConfig.x.show,this.fixedTooltip=this.tConfig.fixed.enabled,this.xaxisTooltip=null,this.yaxisTTEls=null,this.isBarShared=!a.globals.isBarHorizontal&&this.tConfig.shared}return a(t,[{key:"getElTooltip",value:function(t){return t||(t=this),t.w.globals.dom.baseEl.querySelector(".apexcharts-tooltip")}},{key:"getElXCrosshairs",value:function(){return this.w.globals.dom.baseEl.querySelector(".apexcharts-xcrosshairs")}},{key:"getElGrid",value:function(){return this.w.globals.dom.baseEl.querySelector(".apexcharts-grid")}},{key:"drawTooltip",value:function(t){var e=this.w;this.xyRatios=t,this.blxaxisTooltip=e.config.xaxis.tooltip.enabled&&e.globals.axisCharts,this.blyaxisTooltip=e.config.yaxis[0].tooltip.enabled&&e.globals.axisCharts,this.allTooltipSeriesGroups=[],e.globals.axisCharts||(this.showTooltipTitle=!1);var i=document.createElement("div");if(i.classList.add("apexcharts-tooltip"),i.classList.add("apexcharts-theme-".concat(this.tConfig.theme)),e.globals.dom.elWrap.appendChild(i),e.globals.axisCharts){this.axesTooltip.drawXaxisTooltip(),this.axesTooltip.drawYaxisTooltip(),this.axesTooltip.setXCrosshairWidth(),this.axesTooltip.handleYCrosshair();var a=new O(this.ctx);this.xAxisTicksPositions=a.getXAxisTicksPositions()}if(!e.globals.comboCharts&&!this.tConfig.intersect&&"bar"!==e.config.chart.type&&"rangeBar"!==e.config.chart.type||this.tConfig.shared||(this.showOnIntersect=!0),0!==e.config.markers.size&&0!==e.globals.markers.largestSize||this.marker.drawDynamicPoints(this),e.globals.collapsedSeries.length!==e.globals.series.length){this.dataPointsDividedHeight=e.globals.gridHeight/e.globals.dataPoints,this.dataPointsDividedWidth=e.globals.gridWidth/e.globals.dataPoints,this.showTooltipTitle&&(this.tooltipTitle=document.createElement("div"),this.tooltipTitle.classList.add("apexcharts-tooltip-title"),this.tooltipTitle.style.fontFamily=this.tConfig.style.fontFamily||e.config.chart.fontFamily,this.tooltipTitle.style.fontSize=this.tConfig.style.fontSize,i.appendChild(this.tooltipTitle));var s=e.globals.series.length;(e.globals.xyCharts||e.globals.comboCharts)&&this.tConfig.shared&&(s=this.showOnIntersect?1:e.globals.series.length),this.legendLabels=e.globals.dom.baseEl.querySelectorAll(".apexcharts-legend-text"),this.ttItems=this.createTTElements(s),this.addSVGEvents()}}},{key:"createTTElements",value:function(t){for(var e=this.w,i=[],a=this.getElTooltip(),s=0;s<t;s++){var r=document.createElement("div");r.classList.add("apexcharts-tooltip-series-group"),this.tConfig.shared&&this.tConfig.enabledOnSeries&&Array.isArray(this.tConfig.enabledOnSeries)&&this.tConfig.enabledOnSeries.indexOf(s)<0&&r.classList.add("apexcharts-tooltip-series-group-hidden");var n=document.createElement("span");n.classList.add("apexcharts-tooltip-marker"),n.style.backgroundColor=e.globals.colors[s],r.appendChild(n);var o=document.createElement("div");o.classList.add("apexcharts-tooltip-text"),o.style.fontFamily=this.tConfig.style.fontFamily||e.config.chart.fontFamily,o.style.fontSize=this.tConfig.style.fontSize;var l=document.createElement("div");l.classList.add("apexcharts-tooltip-y-group");var h=document.createElement("span");h.classList.add("apexcharts-tooltip-text-label"),l.appendChild(h);var c=document.createElement("span");c.classList.add("apexcharts-tooltip-text-value"),l.appendChild(c);var d=document.createElement("div");d.classList.add("apexcharts-tooltip-z-group");var g=document.createElement("span");g.classList.add("apexcharts-tooltip-text-z-label"),d.appendChild(g);var u=document.createElement("span");u.classList.add("apexcharts-tooltip-text-z-value"),d.appendChild(u),o.appendChild(l),o.appendChild(d),r.appendChild(o),a.appendChild(r),i.push(r)}return i}},{key:"addSVGEvents",value:function(){var t=this.w,e=t.config.chart.type,i=this.getElTooltip(),a=!("bar"!==e&&"candlestick"!==e&&"rangeBar"!==e),s="area"===e||"line"===e||"scatter"===e||"bubble"===e||"radar"===e,r=t.globals.dom.Paper.node,n=this.getElGrid();n&&(this.seriesBound=n.getBoundingClientRect());var o,l=[],h=[],c={hoverArea:r,elGrid:n,tooltipEl:i,tooltipY:l,tooltipX:h,ttItems:this.ttItems};if(t.globals.axisCharts&&(s?o=t.globals.dom.baseEl.querySelectorAll(".apexcharts-series[data\\:longestSeries='true'] .apexcharts-marker"):a?o=t.globals.dom.baseEl.querySelectorAll(".apexcharts-series .apexcharts-bar-area, .apexcharts-series .apexcharts-candlestick-area, .apexcharts-series .apexcharts-rangebar-area"):"heatmap"===e&&(o=t.globals.dom.baseEl.querySelectorAll(".apexcharts-series .apexcharts-heatmap")),o&&o.length))for(var d=0;d<o.length;d++)l.push(o[d].getAttribute("cy")),h.push(o[d].getAttribute("cx"));if(t.globals.xyCharts&&!this.showOnIntersect||t.globals.comboCharts&&!this.showOnIntersect||a&&this.tooltipUtil.hasBars()&&this.tConfig.shared)this.addPathsEventListeners([r],c);else if(a&&!t.globals.comboCharts||s&&this.showOnIntersect)this.addDatapointEventsListeners(c);else if(!t.globals.axisCharts||"heatmap"===e){var g=t.globals.dom.baseEl.querySelectorAll(".apexcharts-series");this.addPathsEventListeners(g,c)}if(this.showOnIntersect){var u=t.globals.dom.baseEl.querySelectorAll(".apexcharts-line-series .apexcharts-marker, .apexcharts-area-series .apexcharts-marker");u.length>0&&this.addPathsEventListeners(u,c),this.tooltipUtil.hasBars()&&!this.tConfig.shared&&this.addDatapointEventsListeners(c)}}},{key:"drawFixedTooltipRect",value:function(){var t=this.w,e=this.getElTooltip(),i=e.getBoundingClientRect(),a=i.width+10,s=i.height+10,r=this.tConfig.fixed.offsetX,n=this.tConfig.fixed.offsetY,o=this.tConfig.fixed.position.toLowerCase();return o.indexOf("right")>-1&&(r=r+t.globals.svgWidth-a+10),o.indexOf("bottom")>-1&&(n=n+t.globals.svgHeight-s-10),e.style.left=r+"px",e.style.top=n+"px",{x:r,y:n,ttWidth:a,ttHeight:s}}},{key:"addDatapointEventsListeners",value:function(t){var e=this.w.globals.dom.baseEl.querySelectorAll(".apexcharts-series-markers .apexcharts-marker, .apexcharts-bar-area, .apexcharts-candlestick-area, .apexcharts-rangebar-area");this.addPathsEventListeners(e,t)}},{key:"addPathsEventListeners",value:function(t,e){for(var i=this,a=function(a){var s={paths:t[a],tooltipEl:e.tooltipEl,tooltipY:e.tooltipY,tooltipX:e.tooltipX,elGrid:e.elGrid,hoverArea:e.hoverArea,ttItems:e.ttItems};["mousemove","mouseup","touchmove","mouseout","touchend"].map((function(e){return t[a].addEventListener(e,i.seriesHover.bind(i,s),{capture:!1,passive:!0})}))},s=0;s<t.length;s++)a(s)}},{key:"seriesHover",value:function(t,e){var i=this,a=[],s=this.w;s.config.chart.group&&(a=this.ctx.getGroupedCharts()),s.globals.axisCharts&&(s.globals.minX===-1/0&&s.globals.maxX===1/0||0===s.globals.dataPoints)||(a.length?a.forEach((function(a){var s=i.getElTooltip(a),r={paths:t.paths,tooltipEl:s,tooltipY:t.tooltipY,tooltipX:t.tooltipX,elGrid:t.elGrid,hoverArea:t.hoverArea,ttItems:a.w.globals.tooltip.ttItems};a.w.globals.minX===i.w.globals.minX&&a.w.globals.maxX===i.w.globals.maxX&&a.w.globals.tooltip.seriesHoverByContext({chartCtx:a,ttCtx:a.w.globals.tooltip,opt:r,e:e})})):this.seriesHoverByContext({chartCtx:this.ctx,ttCtx:this.w.globals.tooltip,opt:t,e:e}))}},{key:"seriesHoverByContext",value:function(t){var e=t.chartCtx,i=t.ttCtx,a=t.opt,s=t.e,r=e.w,n=this.getElTooltip();(i.tooltipRect={x:0,y:0,ttWidth:n.getBoundingClientRect().width,ttHeight:n.getBoundingClientRect().height},i.e=s,!i.tooltipUtil.hasBars()||r.globals.comboCharts||i.isBarShared)||this.tConfig.onDatasetHover.highlightDataSeries&&new F(e).toggleSeriesOnHover(s,s.target.parentNode);i.fixedTooltip&&i.drawFixedTooltipRect(),r.globals.axisCharts?i.axisChartsTooltips({e:s,opt:a,tooltipRect:i.tooltipRect}):i.nonAxisChartsTooltips({e:s,opt:a,tooltipRect:i.tooltipRect})}},{key:"axisChartsTooltips",value:function(t){var e,i,a=t.e,s=t.opt,r=this.w,n=s.elGrid.getBoundingClientRect(),o="touchmove"===a.type?a.touches[0].clientX:a.clientX,l="touchmove"===a.type?a.touches[0].clientY:a.clientY;if(this.clientY=l,this.clientX=o,r.globals.capturedSeriesIndex=-1,r.globals.capturedDataPointIndex=-1,l<n.top||l>n.top+n.height)this.handleMouseOut(s);else{if(Array.isArray(this.tConfig.enabledOnSeries)&&!r.config.tooltip.shared){var h=parseInt(s.paths.getAttribute("index"),10);if(this.tConfig.enabledOnSeries.indexOf(h)<0)return void this.handleMouseOut(s)}var c=this.getElTooltip(),d=this.getElXCrosshairs(),g=r.globals.xyCharts||"bar"===r.config.chart.type&&!r.globals.isBarHorizontal&&this.tooltipUtil.hasBars()&&this.tConfig.shared||r.globals.comboCharts&&this.tooltipUtil.hasBars();if(r.globals.isBarHorizontal&&this.tooltipUtil.hasBars()&&(g=!1),"mousemove"===a.type||"touchmove"===a.type||"mouseup"===a.type){if(null!==d&&d.classList.add("apexcharts-active"),null!==this.ycrosshairs&&this.blyaxisTooltip&&this.ycrosshairs.classList.add("apexcharts-active"),g&&!this.showOnIntersect)this.handleStickyTooltip(a,o,l,s);else if("heatmap"===r.config.chart.type){var u=this.intersect.handleHeatTooltip({e:a,opt:s,x:e,y:i});e=u.x,i=u.y,c.style.left=e+"px",c.style.top=i+"px"}else this.tooltipUtil.hasBars()&&this.intersect.handleBarTooltip({e:a,opt:s}),this.tooltipUtil.hasMarkers()&&this.intersect.handleMarkerTooltip({e:a,opt:s,x:e,y:i});if(this.blyaxisTooltip)for(var f=0;f<r.config.yaxis.length;f++)this.axesTooltip.drawYaxisTooltipText(f,l,this.xyRatios);s.tooltipEl.classList.add("apexcharts-active")}else"mouseout"!==a.type&&"touchend"!==a.type||this.handleMouseOut(s)}}},{key:"nonAxisChartsTooltips",value:function(t){var e=t.e,i=t.opt,a=t.tooltipRect,s=this.w,r=i.paths.getAttribute("rel"),n=this.getElTooltip(),o=s.globals.dom.elWrap.getBoundingClientRect();if("mousemove"===e.type||"touchmove"===e.type){n.classList.add("apexcharts-active"),this.tooltipLabels.drawSeriesTexts({ttItems:i.ttItems,i:parseInt(r,10)-1,shared:!1});var l=s.globals.clientX-o.left-a.ttWidth/2,h=s.globals.clientY-o.top-a.ttHeight-10;n.style.left=l+"px",n.style.top=h+"px"}else"mouseout"!==e.type&&"touchend"!==e.type||n.classList.remove("apexcharts-active")}},{key:"handleStickyTooltip",value:function(t,e,i,a){var s=this.w,r=this.tooltipUtil.getNearestValues({context:this,hoverArea:a.hoverArea,elGrid:a.elGrid,clientX:e,clientY:i}),n=r.j,o=r.capturedSeries;r.hoverX<0||r.hoverX>s.globals.gridWidth?this.handleMouseOut(a):null!==o?this.handleStickyCapturedSeries(t,o,a,n):this.tooltipUtil.isXoverlap(n)&&this.create(t,this,0,n,a.ttItems)}},{key:"handleStickyCapturedSeries",value:function(t,e,i,a){var s=this.w;null===s.globals.series[e][a]?this.handleMouseOut(i):void 0!==s.globals.series[e][a]?this.tConfig.shared&&this.tooltipUtil.isXoverlap(a)&&this.tooltipUtil.isInitialSeriesSameLen()?this.create(t,this,e,a,i.ttItems):this.create(t,this,e,a,i.ttItems,!1):this.tooltipUtil.isXoverlap(a)&&this.create(t,this,0,a,i.ttItems)}},{key:"deactivateHoverFilter",value:function(){for(var t=this.w,e=new p(this.ctx),i=t.globals.dom.Paper.select(".apexcharts-bar-area"),a=0;a<i.length;a++)e.pathMouseLeave(i[a])}},{key:"handleMouseOut",value:function(t){var e=this.w,i=this.getElXCrosshairs();if(t.tooltipEl.classList.remove("apexcharts-active"),this.deactivateHoverFilter(),"bubble"!==e.config.chart.type&&this.marker.resetPointsSize(),null!==i&&i.classList.remove("apexcharts-active"),null!==this.ycrosshairs&&this.ycrosshairs.classList.remove("apexcharts-active"),this.blxaxisTooltip&&this.xaxisTooltip.classList.remove("apexcharts-active"),this.blyaxisTooltip){null===this.yaxisTTEls&&(this.yaxisTTEls=e.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxistooltip"));for(var a=0;a<this.yaxisTTEls.length;a++)this.yaxisTTEls[a].classList.remove("apexcharts-active")}e.config.legend.tooltipHoverFormatter&&this.legendLabels.forEach((function(t){var e=t.getAttribute("data:default-text");t.innerHTML=decodeURIComponent(e)}))}},{key:"markerClick",value:function(t,e,i){var a=this.w;"function"==typeof a.config.chart.events.markerClick&&a.config.chart.events.markerClick(t,this.ctx,{seriesIndex:e,dataPointIndex:i,w:a}),this.ctx.events.fireEvent("markerClick",[t,this.ctx,{seriesIndex:e,dataPointIndex:i,w:a}])}},{key:"create",value:function(t,e,i,a,s){var r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:null,n=this.w,o=e;"mouseup"===t.type&&this.markerClick(t,i,a),null===r&&(r=this.tConfig.shared);var l=this.tooltipUtil.hasMarkers(),h=this.tooltipUtil.getElBars();if(n.config.legend.tooltipHoverFormatter){var c=n.config.legend.tooltipHoverFormatter,d=Array.from(this.legendLabels);d.forEach((function(t){var e=t.getAttribute("data:default-text");t.innerHTML=decodeURIComponent(e)}));for(var g=0;g<d.length;g++){var u=d[g],f=parseInt(u.getAttribute("i"),10),x=decodeURIComponent(u.getAttribute("data:default-text")),b=c(x,{seriesIndex:r?f:i,dataPointIndex:a,w:n});if(r)u.innerHTML=n.globals.collapsedSeriesIndices.indexOf(f)<0?b:x;else if(u.innerHTML=f===i?b:x,i===f)break}}if(r){if(o.tooltipLabels.drawSeriesTexts({ttItems:s,i:i,j:a,shared:!this.showOnIntersect&&this.tConfig.shared}),l&&(n.globals.markers.largestSize>0?o.marker.enlargePoints(a):o.tooltipPosition.moveDynamicPointsOnHover(a)),this.tooltipUtil.hasBars()&&(this.barSeriesHeight=this.tooltipUtil.getBarsHeight(h),this.barSeriesHeight>0)){var m=new p(this.ctx),v=n.globals.dom.Paper.select(".apexcharts-bar-area[j='".concat(a,"']"));this.deactivateHoverFilter(),this.tooltipPosition.moveStickyTooltipOverBars(a);for(var y=0;y<v.length;y++)m.pathMouseEnter(v[y])}}else o.tooltipLabels.drawSeriesTexts({shared:!1,ttItems:s,i:i,j:a}),this.tooltipUtil.hasBars()&&o.tooltipPosition.moveStickyTooltipOverBars(a),l&&o.tooltipPosition.moveMarkers(i,a)}}]),t}(),pt=function(){function t(i){e(this,t),this.w=i.w,this.barCtx=i}return a(t,[{key:"handleBarDataLabels",value:function(t){var e=t.x,i=t.y,a=t.y1,s=t.y2,r=t.i,n=t.j,o=t.realIndex,l=t.series,h=t.barHeight,c=t.barWidth,d=t.barYPosition,g=t.visibleSeries,u=t.renderedPath,f=this.w,x=new p(this.barCtx.ctx),b=Array.isArray(this.barCtx.strokeWidth)?this.barCtx.strokeWidth[o]:this.barCtx.strokeWidth,m=e+parseFloat(c*g),v=i+parseFloat(h*g);f.globals.isXNumeric&&!f.globals.isBarHorizontal&&(m=e+parseFloat(c*(g+1)),v=i+parseFloat(h*(g+1))-b);var y=e,w=i,k={},A=f.config.dataLabels,S=this.barCtx.barOptions.dataLabels;void 0!==d&&this.barCtx.isTimelineBar&&(v=d,w=d);var C=A.offsetX,L=A.offsetY,P={width:0,height:0};f.config.dataLabels.enabled&&(P=x.getTextRects(f.globals.yLabelFormatters[0](f.globals.maxY),parseFloat(A.style.fontSize)));var T={x:e,y:i,i:r,j:n,renderedPath:u,bcx:m,bcy:v,barHeight:h,barWidth:c,textRects:P,strokeWidth:b,dataLabelsX:y,dataLabelsY:w,barDataLabelsConfig:S,offX:C,offY:L};return k=this.barCtx.isHorizontal?this.calculateBarsDataLabelsPosition(T):this.calculateColumnsDataLabelsPosition(T),u.attr({cy:k.bcy,cx:k.bcx,j:n,val:l[r][n],barHeight:h,barWidth:c}),this.drawCalculatedDataLabels({x:k.dataLabelsX,y:k.dataLabelsY,val:this.barCtx.isTimelineBar?[a,s]:l[r][n],i:o,j:n,barWidth:c,barHeight:h,textRects:P,dataLabelsConfig:A})}},{key:"calculateColumnsDataLabelsPosition",value:function(t){var e,i=this.w,a=t.i,s=t.j,r=t.y,n=t.bcx,o=t.barWidth,l=t.barHeight,h=t.textRects,c=t.dataLabelsY,d=t.barDataLabelsConfig,g=t.strokeWidth,u=t.offX,f=t.offY;l=Math.abs(l);var p="vertical"===i.config.plotOptions.bar.dataLabels.orientation;n-=g/2;var x=i.globals.gridWidth/i.globals.dataPoints;if(e=i.globals.isXNumeric?n-o/2+u:n-x+o/2+u,p){e=e+h.height/2-g/2-2}var b=this.barCtx.series[a][s]<0;switch(this.barCtx.isReversed&&(r-=l),d.position){case"center":c=p?b?r+l/2+f:r+l/2-f:b?r+l/2+h.height/2+f:r+l/2+h.height/2-f;break;case"bottom":c=p?b?r+l+f:r+l-f:b?r+l+h.height+g+f:r+l-h.height/2+g-f;break;case"top":c=p?b?r+f:r-f:b?r-h.height/2-f:r+h.height+f}return i.config.chart.stacked||(c<0?c=0+g:c+h.height/3>i.globals.gridHeight&&(c=i.globals.gridHeight-g)),{bcx:n,bcy:r,dataLabelsX:e,dataLabelsY:c}}},{key:"calculateBarsDataLabelsPosition",value:function(t){var e=this.w,i=t.x,a=t.i,s=t.j,r=t.bcy,n=t.barHeight,o=t.barWidth,l=t.textRects,h=t.dataLabelsX,c=t.strokeWidth,d=t.barDataLabelsConfig,g=t.offX,u=t.offY,f=e.globals.gridHeight/e.globals.dataPoints;o=Math.abs(o);var p=r-(this.barCtx.isTimelineBar?0:f)+n/2+l.height/2+u-3,x=this.barCtx.series[a][s]<0,b=i;switch(this.barCtx.isReversed&&(b=i+o,i=e.globals.gridWidth-o),d.position){case"center":h=x?b-o/2-g:b-o/2+g;break;case"bottom":h=x?b+o-c-Math.round(l.width/2)-g:b-o+c+Math.round(l.width/2)+g;break;case"top":h=x?b-c+Math.round(l.width/2)-g:b-c-Math.round(l.width/2)+g}return e.config.chart.stacked||(h<0?h=h+l.width+c:h+l.width/2>e.globals.gridWidth&&(h=e.globals.gridWidth-l.width-c)),{bcx:i,bcy:r,dataLabelsX:h,dataLabelsY:p}}},{key:"drawCalculatedDataLabels",value:function(t){var e=t.x,i=t.y,a=t.val,s=t.i,r=t.j,o=t.textRects,l=t.barHeight,h=t.barWidth,c=t.dataLabelsConfig,d=this.w,g="rotate(0)";"vertical"===d.config.plotOptions.bar.dataLabels.orientation&&(g="rotate(-90, ".concat(e,", ").concat(i,")"));var u=new Y(this.barCtx.ctx),f=new p(this.barCtx.ctx),x=c.formatter,b=null,m=d.globals.collapsedSeriesIndices.indexOf(s)>-1;if(c.enabled&&!m){b=f.group({class:"apexcharts-data-labels",transform:g});var v="";void 0!==a&&(v=x(a,{seriesIndex:s,dataPointIndex:r,w:d})),0===a&&d.config.chart.stacked&&(v="");var y=d.globals.series[s][r]<=0,w=d.config.plotOptions.bar.dataLabels.position;if("vertical"===d.config.plotOptions.bar.dataLabels.orientation&&("top"===w&&(c.textAnchor=y?"end":"start"),"center"===w&&(c.textAnchor="middle"),"bottom"===w&&(c.textAnchor=y?"end":"start")),this.barCtx.isTimelineBar&&this.barCtx.barOptions.dataLabels.hideOverflowingLabels)h<f.getTextRects(v,parseFloat(c.style.fontSize)).width&&(v="");d.config.chart.stacked&&this.barCtx.barOptions.dataLabels.hideOverflowingLabels&&(this.barCtx.isHorizontal?((h=Math.abs(d.globals.series[s][r])/this.barCtx.invertedYRatio[this.barCtx.yaxisIndex])>0&&o.width/1.6>h||h<0&&o.width/1.6<h)&&(v=""):(l=Math.abs(d.globals.series[s][r])/this.barCtx.yRatio[this.barCtx.yaxisIndex],o.height/1.6>l&&(v="")));var k=n({},c);this.barCtx.isHorizontal&&a<0&&("start"===c.textAnchor?k.textAnchor="end":"end"===c.textAnchor&&(k.textAnchor="start")),u.plotDataLabelsText({x:e,y:i,text:v,i:s,j:r,parent:b,dataLabelsConfig:k,alwaysDrawDataLabel:!0,offsetCorrection:!0})}return b}}]),t}(),xt=function(){function t(i){e(this,t),this.w=i.w,this.barCtx=i}return a(t,[{key:"initVariables",value:function(t){var e=this.w;this.barCtx.series=t,this.barCtx.totalItems=0,this.barCtx.seriesLen=0,this.barCtx.visibleI=-1,this.barCtx.visibleItems=1;for(var i=0;i<t.length;i++)if(t[i].length>0&&(this.barCtx.seriesLen=this.barCtx.seriesLen+1,this.barCtx.totalItems+=t[i].length),e.globals.isXNumeric)for(var a=0;a<t[i].length;a++)e.globals.seriesX[i][a]>e.globals.minX&&e.globals.seriesX[i][a]<e.globals.maxX&&this.barCtx.visibleItems++;else this.barCtx.visibleItems=e.globals.dataPoints;0===this.barCtx.seriesLen&&(this.barCtx.seriesLen=1)}},{key:"initialPositions",value:function(){var t,e,i,a,s,r,n,o,l=this.w,h=l.globals.dataPoints;if(this.barCtx.isTimelineBar&&(h=l.globals.labels.length),this.barCtx.isHorizontal)s=(i=l.globals.gridHeight/h)/this.barCtx.seriesLen,l.globals.isXNumeric&&(s=(i=l.globals.gridHeight/this.barCtx.totalItems)/this.barCtx.seriesLen),s=s*parseInt(this.barCtx.barOptions.barHeight,10)/100,o=this.barCtx.baseLineInvertedY+l.globals.padHorizontal+(this.barCtx.isReversed?l.globals.gridWidth:0)-(this.barCtx.isReversed?2*this.barCtx.baseLineInvertedY:0),e=(i-s*this.barCtx.seriesLen)/2;else{if(a=l.globals.gridWidth/this.barCtx.visibleItems,l.config.xaxis.convertedCatToNumeric&&(a=l.globals.gridWidth/l.globals.dataPoints),r=a/this.barCtx.seriesLen*parseInt(this.barCtx.barOptions.columnWidth,10)/100,l.globals.isXNumeric){var c=this.barCtx.xRatio;l.config.xaxis.convertedCatToNumeric&&(c=this.barCtx.initialXRatio),l.globals.minXDiff&&l.globals.minXDiff/c>0&&(a=l.globals.minXDiff/c),(r=a/this.barCtx.seriesLen*parseInt(this.barCtx.barOptions.columnWidth,10)/100)<1&&(r=1)}n=l.globals.gridHeight-this.barCtx.baseLineY[this.barCtx.yaxisIndex]-(this.barCtx.isReversed?l.globals.gridHeight:0)+(this.barCtx.isReversed?2*this.barCtx.baseLineY[this.barCtx.yaxisIndex]:0),t=l.globals.padHorizontal+(a-r*this.barCtx.seriesLen)/2}return{x:t,y:e,yDivision:i,xDivision:a,barHeight:s,barWidth:r,zeroH:n,zeroW:o}}},{key:"getPathFillColor",value:function(t,e,i,a){var s=this.w,r=new M(this.barCtx.ctx),n=null,o=this.barCtx.barOptions.distributed?i:e;this.barCtx.barOptions.colors.ranges.length>0&&this.barCtx.barOptions.colors.ranges.map((function(a){t[e][i]>=a.from&&t[e][i]<=a.to&&(n=a.color)}));return s.config.series[e].data[i]&&s.config.series[e].data[i].fillColor&&(n=s.config.series[e].data[i].fillColor),r.fillPath({seriesNumber:this.barCtx.barOptions.distributed?o:a,dataPointIndex:i,color:n,value:t[e][i]})}},{key:"getStrokeWidth",value:function(t,e,i){var a=0,s=this.w;return void 0===this.barCtx.series[t][e]||null===this.barCtx.series[t][e]?this.barCtx.isNullValue=!0:this.barCtx.isNullValue=!1,s.config.stroke.show&&(this.barCtx.isNullValue||(a=Array.isArray(this.barCtx.strokeWidth)?this.barCtx.strokeWidth[i]:this.barCtx.strokeWidth)),a}},{key:"barBackground",value:function(t){var e=t.bc,i=t.i,a=t.x1,s=t.x2,r=t.y1,n=t.y2,o=t.elSeries,l=this.w,h=new p(this.barCtx.ctx),c=new F(this.barCtx.ctx).getActiveConfigSeriesIndex();if(this.barCtx.barOptions.colors.backgroundBarColors.length>0&&c===i){e>=this.barCtx.barOptions.colors.backgroundBarColors.length&&(e=0);var d=this.barCtx.barOptions.colors.backgroundBarColors[e],g=h.drawRect(void 0!==a?a:0,void 0!==r?r:0,void 0!==s?s:l.globals.gridWidth,void 0!==n?n:l.globals.gridHeight,this.barCtx.barOptions.colors.backgroundBarRadius,d,this.barCtx.barOptions.colors.backgroundBarOpacity);o.add(g),g.node.classList.add("apexcharts-backgroundBar")}}},{key:"getColumnPaths",value:function(t){var e=t.barWidth,i=t.barXPosition,a=t.yRatio,s=t.y1,r=t.y2,n=t.strokeWidth,o=t.series,l=t.i,h=t.j,c=t.w,d=new p(this.barCtx.ctx);(n=Array.isArray(n)?n[l]:n)||(n=0);var g={barWidth:e,strokeWidth:n,yRatio:a,barXPosition:i,y1:s,y2:r},u=this.getRoundedBars(c,g,o,l,h),f=i,x=i+e,b=d.move(f,u.y1),m=d.move(f,u.y1);return c.globals.previousPaths.length>0&&(m=this.barCtx.getPreviousPath(l,h,!1)),{pathTo:b=b+d.line(f,u.y2)+u.endingPath+d.line(x-n,u.y2)+d.line(x-n,u.y1)+u.startingPath+"z",pathFrom:m=m+d.line(f,s)+d.line(x-n,s)+d.line(x-n,s)+d.line(x-n,s)+d.line(f,s)}}},{key:"getBarpaths",value:function(t){var e=t.barYPosition,i=t.barHeight,a=t.x1,s=t.x2,r=t.strokeWidth,n=t.series,o=t.i,l=t.j,h=t.w,c=new p(this.barCtx.ctx);(r=Array.isArray(r)?r[o]:r)||(r=0);var d={barHeight:i,strokeWidth:r,barYPosition:e,x2:s,x1:a},g=this.getRoundedBars(h,d,n,o,l),u=c.move(g.x1,e),f=c.move(g.x1,e);h.globals.previousPaths.length>0&&(f=this.barCtx.getPreviousPath(o,l,!1));var x=e,b=e+i;return{pathTo:u=u+c.line(g.x2,x)+g.endingPath+c.line(g.x2,b-r)+c.line(g.x1,b-r)+g.startingPath+"z",pathFrom:f=f+c.line(a,x)+c.line(a,b-r)+c.line(a,b-r)+c.line(a,b-r)+c.line(a,x)}}},{key:"getRoundedBars",value:function(t,e,i,a,s){var r=new p(this.barCtx.ctx),n=Array.isArray(e.strokeWidth)?e.strokeWidth[a]:e.strokeWidth;if(n||(n=0),this.barCtx.isHorizontal){var o=null,l="",h=e.x2,c=e.x1;if(void 0!==i[a][s]||null!==i[a][s]){var d=i[a][s]<0,g=e.barHeight/2-n;switch(d&&(g=-e.barHeight/2-n),g>Math.abs(h-c)&&(g=Math.abs(h-c)),"rounded"===this.barCtx.barOptions.endingShape&&(h=e.x2-g/2),"rounded"===this.barCtx.barOptions.startingShape&&(c=e.x1+g/2),this.barCtx.barOptions.endingShape){case"flat":o=r.line(h,e.barYPosition+e.barHeight-n);break;case"rounded":o=r.quadraticCurve(h+g,e.barYPosition+(e.barHeight-n)/2,h,e.barYPosition+e.barHeight-n)}switch(this.barCtx.barOptions.startingShape){case"flat":l=r.line(c,e.barYPosition+e.barHeight-n);break;case"rounded":l=r.quadraticCurve(c-g,e.barYPosition+e.barHeight/2,c,e.barYPosition)}}return{endingPath:o,startingPath:l,x2:h,x1:c}}var u=null,f="",x=e.y2,b=e.y1;if(void 0!==i[a][s]||null!==i[a][s]){var m=i[a][s]<0,v=e.barWidth/2-n;switch(m&&(v=-e.barWidth/2-n),v>Math.abs(x-b)&&(v=Math.abs(x-b)),"rounded"===this.barCtx.barOptions.endingShape&&(x+=v/2),"rounded"===this.barCtx.barOptions.startingShape&&(b-=v/2),this.barCtx.barOptions.endingShape){case"flat":u=r.line(e.barXPosition+e.barWidth-n,x);break;case"rounded":u=r.quadraticCurve(e.barXPosition+(e.barWidth-n)/2,x-v,e.barXPosition+e.barWidth-n,x)}switch(this.barCtx.barOptions.startingShape){case"flat":f=r.line(e.barXPosition+e.barWidth-n,b);break;case"rounded":f=r.quadraticCurve(e.barXPosition+(e.barWidth-n)/2,b+v,e.barXPosition,b)}}return{endingPath:u,startingPath:f,y2:x,y1:b}}}]),t}(),bt=function(){function t(i,a){e(this,t),this.ctx=i,this.w=i.w;var s=this.w;this.barOptions=s.config.plotOptions.bar,this.isHorizontal=this.barOptions.horizontal,this.strokeWidth=s.config.stroke.width,this.isNullValue=!1,this.isTimelineBar="datetime"===s.config.xaxis.type&&s.globals.seriesRangeBarTimeline.length,this.xyRatios=a,null!==this.xyRatios&&(this.xRatio=a.xRatio,this.initialXRatio=a.initialXRatio,this.yRatio=a.yRatio,this.invertedXRatio=a.invertedXRatio,this.invertedYRatio=a.invertedYRatio,this.baseLineY=a.baseLineY,this.baseLineInvertedY=a.baseLineInvertedY),this.yaxisIndex=0,this.seriesLen=0,this.barHelpers=new xt(this)}return a(t,[{key:"draw",value:function(t,e){var i=this.w,a=new p(this.ctx),s=new I(this.ctx,i);t=s.getLogSeries(t),this.series=t,this.yRatio=s.getLogYRatios(this.yRatio),this.barHelpers.initVariables(t);var r=a.group({class:"apexcharts-bar-series apexcharts-plot-series"});i.config.dataLabels.enabled&&this.totalItems>this.barOptions.dataLabels.maxItems&&console.warn("WARNING: DataLabels are enabled but there are too many to display. This may cause performance issue when rendering.");for(var o=0,l=0;o<t.length;o++,l++){var h,c,d,u,f=void 0,x=void 0,b=[],m=[],v=i.globals.comboCharts?e[o]:o,y=a.group({class:"apexcharts-series",rel:o+1,seriesName:g.escapeString(i.globals.seriesNames[v]),"data:realIndex":v});this.ctx.series.addCollapsedClassToSeries(y,v),t[o].length>0&&(this.visibleI=this.visibleI+1);var w=0,k=0;this.yRatio.length>1&&(this.yaxisIndex=v),this.isReversed=i.config.yaxis[this.yaxisIndex]&&i.config.yaxis[this.yaxisIndex].reversed;var A=this.barHelpers.initialPositions();x=A.y,w=A.barHeight,c=A.yDivision,u=A.zeroW,f=A.x,k=A.barWidth,h=A.xDivision,d=A.zeroH,this.horizontal||m.push(f+k/2);for(var S=a.group({class:"apexcharts-datalabels","data:realIndex":v}),C=0;C<i.globals.dataPoints;C++){var L=this.barHelpers.getStrokeWidth(o,C,v),P=null,T={indexes:{i:o,j:C,realIndex:v,bc:l},x:f,y:x,strokeWidth:L,elSeries:y};this.isHorizontal?(P=this.drawBarPaths(n({},T,{barHeight:w,zeroW:u,yDivision:c})),k=this.series[o][C]/this.invertedYRatio):(P=this.drawColumnPaths(n({},T,{xDivision:h,barWidth:k,zeroH:d})),w=this.series[o][C]/this.yRatio[this.yaxisIndex]),x=P.y,f=P.x,C>0&&m.push(f+k/2),b.push(x);var z=this.barHelpers.getPathFillColor(t,o,C,v);this.renderSeries({realIndex:v,pathFill:z,j:C,i:o,pathFrom:P.pathFrom,pathTo:P.pathTo,strokeWidth:L,elSeries:y,x:f,y:x,series:t,barHeight:w,barWidth:k,elDataLabelsWrap:S,visibleSeries:this.visibleI,type:"bar"})}i.globals.seriesXvalues[v]=m,i.globals.seriesYvalues[v]=b,r.add(y)}return r}},{key:"renderSeries",value:function(t){var e=t.realIndex,i=t.pathFill,a=t.lineFill,s=t.j,r=t.i,n=t.pathFrom,o=t.pathTo,l=t.strokeWidth,h=t.elSeries,c=t.x,d=t.y,g=t.y1,f=t.y2,x=t.series,b=t.barHeight,m=t.barWidth,v=t.barYPosition,y=t.elDataLabelsWrap,w=t.visibleSeries,k=t.type,A=this.w,S=new p(this.ctx);a||(a=this.barOptions.distributed?A.globals.stroke.colors[s]:A.globals.stroke.colors[e]),A.config.series[r].data[s]&&A.config.series[r].data[s].strokeColor&&(a=A.config.series[r].data[s].strokeColor),this.isNullValue&&(i="none");var C=s/A.config.chart.animations.animateGradually.delay*(A.config.chart.animations.speed/A.globals.dataPoints)/2.4,L=S.renderPaths({i:r,j:s,realIndex:e,pathFrom:n,pathTo:o,stroke:a,strokeWidth:l,strokeLineCap:A.config.stroke.lineCap,fill:i,animationDelay:C,initialSpeed:A.config.chart.animations.speed,dataChangeSpeed:A.config.chart.animations.dynamicAnimation.speed,className:"apexcharts-".concat(k,"-area")});L.attr("clip-path","url(#gridRectMask".concat(A.globals.cuid,")")),void 0!==g&&void 0!==f&&(L.attr("data-range-y1",g),L.attr("data-range-y2",f)),new u(this.ctx).setSelectionFilter(L,e,s),h.add(L);var P=new pt(this).handleBarDataLabels({x:c,y:d,y1:g,y2:f,i:r,j:s,series:x,realIndex:e,barHeight:b,barWidth:m,barYPosition:v,renderedPath:L,visibleSeries:w});return null!==P&&y.add(P),h.add(y),h}},{key:"drawBarPaths",value:function(t){var e=t.indexes,i=t.barHeight,a=t.strokeWidth,s=t.zeroW,r=t.x,n=t.y,o=t.yDivision,l=t.elSeries,h=this.w,c=e.i,d=e.j,g=e.bc;h.globals.isXNumeric&&(n=(h.globals.seriesX[c][d]-h.globals.minX)/this.invertedXRatio-i);var u=n+i*this.visibleI;r=void 0===this.series[c][d]||null===this.series[c][d]?s:s+this.series[c][d]/this.invertedYRatio-2*(this.isReversed?this.series[c][d]/this.invertedYRatio:0);var f=this.barHelpers.getBarpaths({barYPosition:u,barHeight:i,x1:s,x2:r,strokeWidth:a,series:this.series,i:c,j:d,w:h});return h.globals.isXNumeric||(n+=o),this.barHelpers.barBackground({bc:g,i:c,y1:u-i*this.visibleI,y2:i*this.seriesLen,elSeries:l}),{pathTo:f.pathTo,pathFrom:f.pathFrom,x:r,y:n,barYPosition:u}}},{key:"drawColumnPaths",value:function(t){var e=t.indexes,i=t.x,a=t.y,s=t.xDivision,r=t.barWidth,n=t.zeroH,o=t.strokeWidth,l=t.elSeries,h=this.w,c=e.i,d=e.j,g=e.bc;if(h.globals.isXNumeric){var u=c;h.globals.seriesX[c].length||(u=h.globals.maxValsInArrayIndex),i=(h.globals.seriesX[u][d]-h.globals.minX)/this.xRatio-r*this.seriesLen/2}var f=i+r*this.visibleI;a=void 0===this.series[c][d]||null===this.series[c][d]?n:n-this.series[c][d]/this.yRatio[this.yaxisIndex]+2*(this.isReversed?this.series[c][d]/this.yRatio[this.yaxisIndex]:0);var p=this.barHelpers.getColumnPaths({barXPosition:f,barWidth:r,y1:n,y2:a,strokeWidth:o,series:this.series,i:c,j:d,w:h});return h.globals.isXNumeric||(i+=s),this.barHelpers.barBackground({bc:g,i:c,x1:f-o/2-r*this.visibleI,x2:r*this.seriesLen+o/2,elSeries:l}),{pathTo:p.pathTo,pathFrom:p.pathFrom,x:i,y:a,barXPosition:f}}},{key:"getPreviousPath",value:function(t,e){for(var i,a=this.w,s=0;s<a.globals.previousPaths.length;s++){var r=a.globals.previousPaths[s];r.paths&&r.paths.length>0&&parseInt(r.realIndex,10)===parseInt(t,10)&&void 0!==a.globals.previousPaths[s].paths[e]&&(i=a.globals.previousPaths[s].paths[e].d)}return i}}]),t}(),mt=function(t){function i(){return e(this,i),c(this,l(i).apply(this,arguments))}return o(i,t),a(i,[{key:"draw",value:function(t,e){var i=this,a=this.w;this.graphics=new p(this.ctx),this.bar=new bt(this.ctx,this.xyRatios);var s=new I(this.ctx,a);t=s.getLogSeries(t),this.yRatio=s.getLogYRatios(this.yRatio),this.barHelpers.initVariables(t),"100%"===a.config.chart.stackType&&(t=a.globals.seriesPercent.slice()),this.series=t,this.totalItems=0,this.prevY=[],this.prevX=[],this.prevYF=[],this.prevXF=[],this.prevYVal=[],this.prevXVal=[],this.xArrj=[],this.xArrjF=[],this.xArrjVal=[],this.yArrj=[],this.yArrjF=[],this.yArrjVal=[];for(var r=0;r<t.length;r++)t[r].length>0&&(this.totalItems+=t[r].length);for(var o=this.graphics.group({class:"apexcharts-bar-series apexcharts-plot-series"}),l=0,h=0,c=function(s,r){var c=void 0,d=void 0,u=void 0,f=void 0,p=[],x=[],b=a.globals.comboCharts?e[s]:s;i.yRatio.length>1&&(i.yaxisIndex=b),i.isReversed=a.config.yaxis[i.yaxisIndex]&&a.config.yaxis[i.yaxisIndex].reversed;var m=i.graphics.group({class:"apexcharts-series",seriesName:g.escapeString(a.globals.seriesNames[b]),rel:s+1,"data:realIndex":b}),v=i.graphics.group({class:"apexcharts-datalabels","data:realIndex":b}),y=0,w=0,k=i.initialPositions(l,h,c,d,u,f);h=k.y,y=k.barHeight,d=k.yDivision,f=k.zeroW,l=k.x,w=k.barWidth,c=k.xDivision,u=k.zeroH,i.yArrj=[],i.yArrjF=[],i.yArrjVal=[],i.xArrj=[],i.xArrjF=[],i.xArrjVal=[],1===i.prevY.length&&i.prevY[0].every((function(t){return isNaN(t)}))&&(i.prevY[0]=i.prevY[0].map((function(t){return u})),i.prevYF[0]=i.prevYF[0].map((function(t){return 0})));for(var A=0;A<a.globals.dataPoints;A++){var S=i.barHelpers.getStrokeWidth(s,A,b),C={indexes:{i:s,j:A,realIndex:b,bc:r},strokeWidth:S,x:l,y:h,elSeries:m},L=null;i.isHorizontal?(L=i.drawStackedBarPaths(n({},C,{zeroW:f,barHeight:y,yDivision:d})),w=i.series[s][A]/i.invertedYRatio):(L=i.drawStackedColumnPaths(n({},C,{xDivision:c,barWidth:w,zeroH:u})),y=i.series[s][A]/i.yRatio[i.yaxisIndex]),h=L.y,l=L.x,p.push(l),x.push(h);var P=i.barHelpers.getPathFillColor(t,s,A,b);m=i.renderSeries({realIndex:b,pathFill:P,j:A,i:s,pathFrom:L.pathFrom,pathTo:L.pathTo,strokeWidth:S,elSeries:m,x:l,y:h,series:t,barHeight:y,barWidth:w,elDataLabelsWrap:v,type:"bar",visibleSeries:0})}a.globals.seriesXvalues[b]=p,a.globals.seriesYvalues[b]=x,i.prevY.push(i.yArrj),i.prevYF.push(i.yArrjF),i.prevYVal.push(i.yArrjVal),i.prevX.push(i.xArrj),i.prevXF.push(i.xArrjF),i.prevXVal.push(i.xArrjVal),o.add(m)},d=0,u=0;d<t.length;d++,u++)c(d,u);return o}},{key:"initialPositions",value:function(t,e,i,a,s,r){var n,o,l=this.w;return this.isHorizontal?(n=(n=a=l.globals.gridHeight/l.globals.dataPoints)*parseInt(l.config.plotOptions.bar.barHeight,10)/100,r=this.baseLineInvertedY+l.globals.padHorizontal+(this.isReversed?l.globals.gridWidth:0)-(this.isReversed?2*this.baseLineInvertedY:0),e=(a-n)/2):(o=i=l.globals.gridWidth/l.globals.dataPoints,o=l.globals.isXNumeric?(i=l.globals.minXDiff/this.xRatio)*parseInt(this.barOptions.columnWidth,10)/100:o*parseInt(l.config.plotOptions.bar.columnWidth,10)/100,s=this.baseLineY[this.yaxisIndex]+(this.isReversed?l.globals.gridHeight:0)-(this.isReversed?2*this.baseLineY[this.yaxisIndex]:0),t=l.globals.padHorizontal+(i-o)/2),{x:t,y:e,yDivision:a,xDivision:i,barHeight:n,barWidth:o,zeroH:s,zeroW:r}}},{key:"drawStackedBarPaths",value:function(t){for(var e,i=t.indexes,a=t.barHeight,s=t.strokeWidth,r=t.zeroW,n=t.x,o=t.y,l=t.yDivision,h=t.elSeries,c=this.w,d=o,g=i.i,u=i.j,f=i.bc,p=0,x=0;x<this.prevXF.length;x++)p+=this.prevXF[x][u];if(g>0){var b=r;this.prevXVal[g-1][u]<0?b=this.series[g][u]>=0?this.prevX[g-1][u]+p-2*(this.isReversed?p:0):this.prevX[g-1][u]:this.prevXVal[g-1][u]>=0&&(b=this.series[g][u]>=0?this.prevX[g-1][u]:this.prevX[g-1][u]-p+2*(this.isReversed?p:0)),e=b}else e=r;n=null===this.series[g][u]?e:e+this.series[g][u]/this.invertedYRatio-2*(this.isReversed?this.series[g][u]/this.invertedYRatio:0),this.xArrj.push(n),this.xArrjF.push(Math.abs(e-n)),this.xArrjVal.push(this.series[g][u]);var m=this.barHelpers.getBarpaths({barYPosition:d,barHeight:a,x1:e,x2:n,strokeWidth:s,series:this.series,i:g,j:u,w:c});return this.barHelpers.barBackground({bc:f,i:g,y1:d,y2:a,elSeries:h}),o+=l,{pathTo:m.pathTo,pathFrom:m.pathFrom,x:n,y:o}}},{key:"drawStackedColumnPaths",value:function(t){var e=t.indexes,i=t.x,a=t.y,s=t.xDivision,r=t.barWidth,n=t.zeroH,o=(t.strokeWidth,t.elSeries),l=this.w,h=e.i,c=e.j,d=e.bc;if(l.globals.isXNumeric){var g=l.globals.seriesX[h][c];g||(g=0),i=(g-l.globals.minX)/this.xRatio-r/2}for(var u,f=i,p=0,x=0;x<this.prevYF.length;x++)p+=isNaN(this.prevYF[x][c])?0:this.prevYF[x][c];if(h>0&&!l.globals.isXNumeric||h>0&&l.globals.isXNumeric&&l.globals.seriesX[h-1][c]===l.globals.seriesX[h][c]){var b,m,v=Math.min(this.yRatio.length+1,h+1);if(void 0!==this.prevY[h-1])for(var y=1;y<v;y++)if(!isNaN(this.prevY[h-y][c])){m=this.prevY[h-y][c];break}for(var w=1;w<v;w++){if(this.prevYVal[h-w][c]<0){b=this.series[h][c]>=0?m-p+2*(this.isReversed?p:0):m;break}if(this.prevYVal[h-w][c]>=0){b=this.series[h][c]>=0?m:m+p-2*(this.isReversed?p:0);break}}void 0===b&&(b=l.globals.gridHeight),u=this.prevYF[0].every((function(t){return 0===t}))&&this.prevYF.slice(1,h).every((function(t){return t.every((function(t){return isNaN(t)}))}))?l.globals.gridHeight-n:b}else u=l.globals.gridHeight-n;a=u-this.series[h][c]/this.yRatio[this.yaxisIndex]+2*(this.isReversed?this.series[h][c]/this.yRatio[this.yaxisIndex]:0),this.yArrj.push(a),this.yArrjF.push(Math.abs(u-a)),this.yArrjVal.push(this.series[h][c]);var k=this.barHelpers.getColumnPaths({barXPosition:f,barWidth:r,y1:u,y2:a,yRatio:this.yRatio[this.yaxisIndex],strokeWidth:this.strokeWidth,series:this.series,i:h,j:c,w:l});return this.barHelpers.barBackground({bc:d,i:h,x1:f,x2:r,elSeries:o}),i+=s,{pathTo:k.pathTo,pathFrom:k.pathFrom,x:l.globals.isXNumeric?i-s:i,y:a}}}]),i}(bt),vt=function(t){function i(){return e(this,i),c(this,l(i).apply(this,arguments))}return o(i,t),a(i,[{key:"draw",value:function(t,e){var i=this.w,a=new p(this.ctx),s=new M(this.ctx);this.candlestickOptions=this.w.config.plotOptions.candlestick;var r=new I(this.ctx,i);t=r.getLogSeries(t),this.series=t,this.yRatio=r.getLogYRatios(this.yRatio),this.barHelpers.initVariables(t);for(var n=a.group({class:"apexcharts-candlestick-series apexcharts-plot-series"}),o=0;o<t.length;o++){var l,h,c=void 0,d=void 0,u=[],f=[],x=i.globals.comboCharts?e[o]:o,b=a.group({class:"apexcharts-series",seriesName:g.escapeString(i.globals.seriesNames[x]),rel:o+1,"data:realIndex":x});t[o].length>0&&(this.visibleI=this.visibleI+1);var m,v;this.yRatio.length>1&&(this.yaxisIndex=x);var y=this.barHelpers.initialPositions();d=y.y,m=y.barHeight,c=y.x,v=y.barWidth,l=y.xDivision,h=y.zeroH,f.push(c+v/2);for(var w=a.group({class:"apexcharts-datalabels","data:realIndex":x}),k=0;k<i.globals.dataPoints;k++){var A,S=this.barHelpers.getStrokeWidth(o,k,x),C=this.drawCandleStickPaths({indexes:{i:o,j:k,realIndex:x},x:c,y:d,xDivision:l,barWidth:v,zeroH:h,strokeWidth:S,elSeries:b});d=C.y,c=C.x,A=C.color,k>0&&f.push(c+v/2),u.push(d);var L=s.fillPath({seriesNumber:x,dataPointIndex:k,color:A,value:t[o][k]}),P=this.candlestickOptions.wick.useFillColor?A:void 0;this.renderSeries({realIndex:x,pathFill:L,lineFill:P,j:k,i:o,pathFrom:C.pathFrom,pathTo:C.pathTo,strokeWidth:S,elSeries:b,x:c,y:d,series:t,barHeight:m,barWidth:v,elDataLabelsWrap:w,visibleSeries:this.visibleI,type:"candlestick"})}i.globals.seriesXvalues[x]=f,i.globals.seriesYvalues[x]=u,n.add(b)}return n}},{key:"drawCandleStickPaths",value:function(t){var e=t.indexes,i=t.x,a=(t.y,t.xDivision),s=t.barWidth,r=t.zeroH,n=t.strokeWidth,o=this.w,l=new p(this.ctx),h=e.i,c=e.j,d=!0,g=o.config.plotOptions.candlestick.colors.upward,u=o.config.plotOptions.candlestick.colors.downward,f=this.yRatio[this.yaxisIndex],x=e.realIndex,b=this.getOHLCValue(x,c),m=r,v=r;b.o>b.c&&(d=!1);var y=Math.min(b.o,b.c),w=Math.max(b.o,b.c);o.globals.isXNumeric&&(i=(o.globals.seriesX[x][c]-o.globals.minX)/this.xRatio-s/2);var k=i+s*this.visibleI;void 0===this.series[h][c]||null===this.series[h][c]?y=r:(y=r-y/f,w=r-w/f,m=r-b.h/f,v=r-b.l/f);var A=l.move(k,r),S=l.move(k,y);return o.globals.previousPaths.length>0&&(S=this.getPreviousPath(x,c,!0)),A=l.move(k,w)+l.line(k+s/2,w)+l.line(k+s/2,m)+l.line(k+s/2,w)+l.line(k+s,w)+l.line(k+s,y)+l.line(k+s/2,y)+l.line(k+s/2,v)+l.line(k+s/2,y)+l.line(k,y)+l.line(k,w-n/2),S+=l.move(k,y),o.globals.isXNumeric||(i+=a),{pathTo:A,pathFrom:S,x:i,y:w,barXPosition:k,color:d?g:u}}},{key:"getOHLCValue",value:function(t,e){var i=this.w;return{o:i.globals.seriesCandleO[t][e],h:i.globals.seriesCandleH[t][e],l:i.globals.seriesCandleL[t][e],c:i.globals.seriesCandleC[t][e]}}}]),i}(bt),yt=function(){function t(i,a){e(this,t),this.ctx=i,this.w=i.w,this.xRatio=a.xRatio,this.yRatio=a.yRatio,this.negRange=!1,this.dynamicAnim=this.w.config.chart.animations.dynamicAnimation,this.rectRadius=this.w.config.plotOptions.heatmap.radius,this.strokeWidth=this.w.config.stroke.show?this.w.config.stroke.width:0}return a(t,[{key:"draw",value:function(t){var e=this.w,i=new p(this.ctx),a=i.group({class:"apexcharts-heatmap"});a.attr("clip-path","url(#gridRectMask".concat(e.globals.cuid,")"));var s=e.globals.gridWidth/e.globals.dataPoints,r=e.globals.gridHeight/e.globals.series.length,n=0,o=!1;this.checkColorRange();var l=t.slice();e.config.yaxis[0].reversed&&(o=!0,l.reverse());for(var h=o?0:l.length-1;o?h<l.length:h>=0;o?h++:h--){var c=i.group({class:"apexcharts-series apexcharts-heatmap-series",seriesName:g.escapeString(e.globals.seriesNames[h]),rel:h+1,"data:realIndex":h});if(e.config.chart.dropShadow.enabled){var d=e.config.chart.dropShadow;new u(this.ctx).dropShadow(c,d,h)}for(var f=0,x=0;x<l[h].length;x++){var b=1,m=e.config.plotOptions.heatmap.shadeIntensity,v=this.determineHeatColor(h,x);b=e.globals.hasNegs||this.negRange?e.config.plotOptions.heatmap.reverseNegativeShade?v.percent<0?v.percent/100*(1.25*m):(1-v.percent/100)*(1.25*m):v.percent<=0?1-(1+v.percent/100)*m:(1-v.percent/100)*m:1-v.percent/100;var y=v.color,w=new g;if(e.config.plotOptions.heatmap.enableShades&&(b<0&&(b=0),y=g.hexToRgba(w.shadeColor(b,v.color),e.config.fill.opacity)),"image"===e.config.fill.type)y=new M(this.ctx).fillPath({seriesNumber:h,dataPointIndex:x,opacity:e.globals.hasNegs?v.percent<0?1-(1+v.percent/100):m+v.percent/100:v.percent/100,patternID:g.randomId(),width:e.config.fill.image.width?e.config.fill.image.width:s,height:e.config.fill.image.height?e.config.fill.image.height:r});var k=this.rectRadius,A=i.drawRect(f,n,s,r,k);if(A.attr({cx:f,cy:n}),A.node.classList.add("apexcharts-heatmap-rect"),c.add(A),A.attr({fill:y,i:h,index:h,j:x,val:l[h][x],"stroke-width":this.strokeWidth,stroke:e.config.plotOptions.heatmap.useFillColorAsStroke?y:e.globals.stroke.colors[0],color:y}),A.node.addEventListener("mouseenter",i.pathMouseEnter.bind(this,A)),A.node.addEventListener("mouseleave",i.pathMouseLeave.bind(this,A)),A.node.addEventListener("mousedown",i.pathMouseDown.bind(this,A)),e.config.chart.animations.enabled&&!e.globals.dataChanged){var S=1;e.globals.resized||(S=e.config.chart.animations.speed),this.animateHeatMap(A,f,n,s,r,S)}if(e.globals.dataChanged){var C=1;if(this.dynamicAnim.enabled&&e.globals.shouldAnimate){C=this.dynamicAnim.speed;var L=e.globals.previousPaths[h]&&e.globals.previousPaths[h][x]&&e.globals.previousPaths[h][x].color;L||(L="rgba(255, 255, 255, 0)"),this.animateHeatColor(A,g.isColorHex(L)?L:g.rgb2hex(L),g.isColorHex(y)?y:g.rgb2hex(y),C)}}var P=this.calculateHeatmapDataLabels({x:f,y:n,i:h,j:x,heatColorProps:v,series:l,rectHeight:r,rectWidth:s});null!==P&&c.add(P),f+=s}n+=r,a.add(c)}var T=e.globals.yAxisScale[0].result.slice();e.config.yaxis[0].reversed?T.unshift(""):T.push(""),e.globals.yAxisScale[0].result=T;var z=e.globals.gridHeight/e.globals.series.length;return e.config.yaxis[0].labels.offsetY=-z/2,a}},{key:"checkColorRange",value:function(){var t=this,e=this.w.config.plotOptions.heatmap;e.colorScale.ranges.length>0&&e.colorScale.ranges.map((function(e,i){e.from<=0&&(t.negRange=!0)}))}},{key:"determineHeatColor",value:function(t,e){var i=this.w,a=i.globals.series[t][e],s=i.config.plotOptions.heatmap,r=s.colorScale.inverse?e:t,n=i.globals.colors[r],o=null,l=Math.min.apply(Math,d(i.globals.series[t])),h=Math.max.apply(Math,d(i.globals.series[t]));s.distributed||(l=i.globals.minY,h=i.globals.maxY),void 0!==s.colorScale.min&&(l=s.colorScale.min<i.globals.minY?s.colorScale.min:i.globals.minY,h=s.colorScale.max>i.globals.maxY?s.colorScale.max:i.globals.maxY);var c=Math.abs(h)+Math.abs(l),g=100*a/(0===c?c-1e-6:c);s.colorScale.ranges.length>0&&s.colorScale.ranges.map((function(t,e){if(a>=t.from&&a<=t.to){n=t.color,o=t.foreColor?t.foreColor:null,l=t.from,h=t.to;var i=Math.abs(h)+Math.abs(l);g=100*a/(0===i?i-1e-6:i)}}));return{color:n,foreColor:o,percent:g}}},{key:"calculateHeatmapDataLabels",value:function(t){var e=t.x,i=t.y,a=t.i,s=t.j,r=t.heatColorProps,n=(t.series,t.rectHeight),o=t.rectWidth,l=this.w,h=l.config.dataLabels,c=new p(this.ctx),d=new Y(this.ctx),g=h.formatter,u=null;if(h.enabled){u=c.group({class:"apexcharts-data-labels"});var f=h.offsetX,x=h.offsetY,b=e+o/2+f,m=i+n/2+parseFloat(h.style.fontSize)/3+x,v=g(l.globals.series[a][s],{seriesIndex:a,dataPointIndex:s,w:l});d.plotDataLabelsText({x:b,y:m,text:v,i:a,j:s,color:r.foreColor,parent:u,dataLabelsConfig:h})}return u}},{key:"animateHeatMap",value:function(t,e,i,a,s,r){var n=new f(this.ctx);n.animateRect(t,{x:e+a/2,y:i+s/2,width:0,height:0},{x:e,y:i,width:a,height:s},r,(function(){n.animationCompleted(t)}))}},{key:"animateHeatColor",value:function(t,e,i,a){t.attr({fill:e}).animate(a).attr({fill:i})}}]),t}(),wt=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.chartType=this.w.config.chart.type,this.initialAnim=this.w.config.chart.animations.enabled,this.dynamicAnim=this.initialAnim&&this.w.config.chart.animations.dynamicAnimation.enabled,this.animDur=0;var a=this.w;this.graphics=new p(this.ctx),this.lineColorArr=void 0!==a.globals.stroke.colors?a.globals.stroke.colors:a.globals.colors,this.defaultSize=a.globals.svgHeight<a.globals.svgWidth?a.globals.gridHeight+1.5*a.globals.goldenPadding:a.globals.gridWidth,this.maxValue=this.w.globals.maxY,this.minValue=this.w.globals.minY,this.polygons=a.config.plotOptions.radar.polygons;var s=a.globals.labels.slice().sort((function(t,e){return e.length-t.length}))[0],r=this.graphics.getTextRects(s,a.config.xaxis.labels.style.fontSize);this.strokeWidth=a.config.stroke.show?a.config.stroke.width:0,this.size=this.defaultSize/2.1-this.strokeWidth-a.config.chart.dropShadow.blur,a.config.xaxis.labels.show&&(this.size=this.size-r.width/1.75),void 0!==a.config.plotOptions.radar.size&&(this.size=a.config.plotOptions.radar.size),this.dataRadiusOfPercent=[],this.dataRadius=[],this.angleArr=[],this.yaxisLabelsTextsPos=[]}return a(t,[{key:"draw",value:function(t){var e=this,i=this.w,a=new M(this.ctx),s=[],r=new Y(this.ctx);t.length&&(this.dataPointsLen=t[i.globals.maxValsInArrayIndex].length),this.disAngle=2*Math.PI/this.dataPointsLen;var o=i.globals.gridWidth/2,l=i.globals.gridHeight/2,h=o+i.config.plotOptions.radar.offsetX,c=l+i.config.plotOptions.radar.offsetY,d=this.graphics.group({class:"apexcharts-radar-series apexcharts-plot-series",transform:"translate(".concat(h||0,", ").concat(c||0,")")}),f=[],p=null,x=null;if(this.yaxisLabels=this.graphics.group({class:"apexcharts-yaxis"}),t.forEach((function(t,o){var l=t.length===i.globals.dataPoints,h=e.graphics.group().attr({class:"apexcharts-series","data:longestSeries":l,seriesName:g.escapeString(i.globals.seriesNames[o]),rel:o+1,"data:realIndex":o});e.dataRadiusOfPercent[o]=[],e.dataRadius[o]=[],e.angleArr[o]=[],t.forEach((function(t,i){var a=Math.abs(e.maxValue-e.minValue);t+=Math.abs(e.minValue),e.dataRadiusOfPercent[o][i]=t/a,e.dataRadius[o][i]=e.dataRadiusOfPercent[o][i]*e.size,e.angleArr[o][i]=i*e.disAngle})),f=e.getDataPointsPos(e.dataRadius[o],e.angleArr[o]);var c=e.createPaths(f,{x:0,y:0});p=e.graphics.group({class:"apexcharts-series-markers-wrap apexcharts-element-hidden"}),x=e.graphics.group({class:"apexcharts-datalabels","data:realIndex":o}),i.globals.delayedElements.push({el:p.node,index:o});var d={i:o,realIndex:o,animationDelay:o,initialSpeed:i.config.chart.animations.speed,dataChangeSpeed:i.config.chart.animations.dynamicAnimation.speed,className:"apexcharts-radar",shouldClipToGrid:!1,bindEventsOnPaths:!1,stroke:i.globals.stroke.colors[o],strokeLineCap:i.config.stroke.lineCap},b=null;i.globals.previousPaths.length>0&&(b=e.getPreviousPath(o));for(var m=0;m<c.linePathsTo.length;m++){var v=e.graphics.renderPaths(n({},d,{pathFrom:null===b?c.linePathsFrom[m]:b,pathTo:c.linePathsTo[m],strokeWidth:Array.isArray(e.strokeWidth)?e.strokeWidth[o]:e.strokeWidth,fill:"none",drawShadow:!1}));h.add(v);var y=a.fillPath({seriesNumber:o}),w=e.graphics.renderPaths(n({},d,{pathFrom:null===b?c.areaPathsFrom[m]:b,pathTo:c.areaPathsTo[m],strokeWidth:0,fill:y,drawShadow:!1}));if(i.config.chart.dropShadow.enabled){var k=new u(e.ctx),A=i.config.chart.dropShadow;k.dropShadow(w,Object.assign({},A,{noUserSpaceOnUse:!0}),o)}h.add(w)}t.forEach((function(t,a){var s=new X(e.ctx).getMarkerConfig("apexcharts-marker",o,a),l=e.graphics.drawMarker(f[a].x,f[a].y,s);l.attr("rel",a),l.attr("j",a),l.attr("index",o),l.node.setAttribute("default-marker-size",s.pSize);var c=e.graphics.group({class:"apexcharts-series-markers"});if(c&&c.add(l),p.add(c),h.add(p),i.config.dataLabels.enabled){var d=i.config.dataLabels;r.plotDataLabelsText({x:f[a].x,y:f[a].y,text:i.globals.series[o][a],textAnchor:"middle",i:o,j:o,parent:x,offsetCorrection:!1,dataLabelsConfig:n({},d)})}h.add(x)})),s.push(h)})),this.drawPolygons({parent:d}),i.config.xaxis.labels.show){var b=this.drawXAxisTexts();d.add(b)}return d.add(this.yaxisLabels),s.forEach((function(t){d.add(t)})),d}},{key:"drawPolygons",value:function(t){for(var e=this,i=this.w,a=t.parent,s=i.globals.yAxisScale[0].result.reverse(),r=s.length,n=[],o=this.size/(r-1),l=0;l<r;l++)n[l]=o*l;n.reverse();var h=[],c=[];n.forEach((function(t,i){var a=e.getPolygonPos(t),s="";a.forEach((function(t,a){if(0===i){var r=e.graphics.drawLine(t.x,t.y,0,0,Array.isArray(e.polygons.connectorColors)?e.polygons.connectorColors[a]:e.polygons.connectorColors);c.push(r)}0===a&&e.yaxisLabelsTextsPos.push({x:t.x,y:t.y}),s+=t.x+","+t.y+" "})),h.push(s)})),h.forEach((function(t,s){var r=e.polygons.strokeColors,n=e.graphics.drawPolygon(t,Array.isArray(r)?r[s]:r,i.globals.radarPolygons.fill.colors[s]);a.add(n)})),c.forEach((function(t){a.add(t)})),i.config.yaxis[0].show&&this.yaxisLabelsTextsPos.forEach((function(t,i){var a=e.drawYAxisTexts(t.x,t.y,i,s[i]);e.yaxisLabels.add(a)}))}},{key:"drawYAxisTexts",value:function(t,e,i,a){var s=this.w,r=s.config.yaxis[0],n=s.globals.yLabelFormatters[0];return this.graphics.drawText({x:t+r.labels.offsetX,y:e+r.labels.offsetY,text:n(a,i),textAnchor:"middle",fontSize:r.labels.style.fontSize,fontFamily:r.labels.style.fontFamily,foreColor:r.labels.style.color})}},{key:"drawXAxisTexts",value:function(){var t=this,e=this.w,i=e.config.xaxis.labels,a=this.graphics.group({class:"apexcharts-xaxis"}),s=this.getPolygonPos(this.size);return e.globals.labels.forEach((function(r,o){var l=e.config.xaxis.labels.formatter,h=new Y(t.ctx);if(s[o]){var c=t.getTextPos(s[o],t.size),d=l(r,{seriesIndex:-1,dataPointIndex:o,w:e});h.plotDataLabelsText({x:c.newX,y:c.newY,text:d,textAnchor:c.textAnchor,i:o,j:o,parent:a,color:i.style.colors[o]?i.style.colors[o]:"#a8a8a8",dataLabelsConfig:n({textAnchor:c.textAnchor,dropShadow:{enabled:!1}},i),offsetCorrection:!1})}})),a}},{key:"createPaths",value:function(t,e){var i=this,a=[],s=[],r=[],n=[];if(t.length){s=[this.graphics.move(e.x,e.y)],n=[this.graphics.move(e.x,e.y)];var o=this.graphics.move(t[0].x,t[0].y),l=this.graphics.move(t[0].x,t[0].y);t.forEach((function(e,a){o+=i.graphics.line(e.x,e.y),l+=i.graphics.line(e.x,e.y),a===t.length-1&&(o+="Z",l+="Z")})),a.push(o),r.push(l)}return{linePathsFrom:s,linePathsTo:a,areaPathsFrom:n,areaPathsTo:r}}},{key:"getTextPos",value:function(t,e){var i="middle",a=t.x,s=t.y;return Math.abs(t.x)>=10?t.x>0?(i="start",a+=10):t.x<0&&(i="end",a-=10):i="middle",Math.abs(t.y)>=e-10&&(t.y<0?s-=10:t.y>0&&(s+=10)),{textAnchor:i,newX:a,newY:s}}},{key:"getPreviousPath",value:function(t){for(var e=this.w,i=null,a=0;a<e.globals.previousPaths.length;a++){var s=e.globals.previousPaths[a];s.paths.length>0&&parseInt(s.realIndex,10)===parseInt(t,10)&&void 0!==e.globals.previousPaths[a].paths[0]&&(i=e.globals.previousPaths[a].paths[0].d)}return i}},{key:"getDataPointsPos",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.dataPointsLen;t=t||[],e=e||[];for(var a=[],s=0;s<i;s++){var r={};r.x=t[s]*Math.sin(e[s]),r.y=-t[s]*Math.cos(e[s]),a.push(r)}return a}},{key:"getPolygonPos",value:function(t){for(var e=[],i=2*Math.PI/this.dataPointsLen,a=0;a<this.dataPointsLen;a++){var s={};s.x=t*Math.sin(a*i),s.y=-t*Math.cos(a*i),e.push(s)}return e}}]),t}(),kt=function(t){function i(t){var a;e(this,i),(a=c(this,l(i).call(this,t))).ctx=t,a.w=t.w,a.animBeginArr=[0],a.animDur=0;var s=a.w;return a.startAngle=s.config.plotOptions.radialBar.startAngle,a.endAngle=s.config.plotOptions.radialBar.endAngle,a.totalAngle=Math.abs(s.config.plotOptions.radialBar.endAngle-s.config.plotOptions.radialBar.startAngle),a.trackStartAngle=s.config.plotOptions.radialBar.track.startAngle,a.trackEndAngle=s.config.plotOptions.radialBar.track.endAngle,a.radialDataLabels=s.config.plotOptions.radialBar.dataLabels,a.trackStartAngle||(a.trackStartAngle=a.startAngle),a.trackEndAngle||(a.trackEndAngle=a.endAngle),360===a.endAngle&&(a.endAngle=359.99),a.fullAngle=360-s.config.plotOptions.radialBar.endAngle-s.config.plotOptions.radialBar.startAngle,a.margin=parseInt(s.config.plotOptions.radialBar.track.margin,10),a}return o(i,t),a(i,[{key:"draw",value:function(t){var e=this.w,i=new p(this.ctx),a=i.group({class:"apexcharts-radialbar"});if(e.globals.noData)return a;var s=i.group(),r=this.defaultSize/2,n=e.globals.gridWidth/2,o=this.defaultSize/2.05;e.config.chart.sparkline.enabled||(o=o-e.config.stroke.width-e.config.chart.dropShadow.blur);var l=e.globals.fill.colors;if(e.config.plotOptions.radialBar.track.show){var h=this.drawTracks({size:o,centerX:n,centerY:r,colorArr:l,series:t});s.add(h)}var c=this.drawArcs({size:o,centerX:n,centerY:r,colorArr:l,series:t}),d=360;e.config.plotOptions.radialBar.startAngle<0&&(d=this.totalAngle);var g=(360-d)/360;if(e.globals.radialSize=o-o*g,this.radialDataLabels.value.show){var u=Math.max(this.radialDataLabels.value.offsetY,this.radialDataLabels.name.offsetY);e.globals.radialSize+=u*g}return s.add(c.g),"front"===e.config.plotOptions.radialBar.hollow.position&&(c.g.add(c.elHollow),c.dataLabels&&c.g.add(c.dataLabels)),a.add(s),a}},{key:"drawTracks",value:function(t){var e=this.w,i=new p(this.ctx),a=i.group({class:"apexcharts-tracks"}),s=new u(this.ctx),r=new M(this.ctx),n=this.getStrokeWidth(t);t.size=t.size-n/2;for(var o=0;o<t.series.length;o++){var l=i.group({class:"apexcharts-radialbar-track apexcharts-track"});a.add(l),l.attr({rel:o+1}),t.size=t.size-n-this.margin;var h=e.config.plotOptions.radialBar.track,c=r.fillPath({seriesNumber:0,size:t.size,fillColors:Array.isArray(h.background)?h.background[o]:h.background,solid:!0}),d=this.trackStartAngle,g=this.trackEndAngle;Math.abs(g)+Math.abs(d)>=360&&(g=360-Math.abs(this.startAngle)-.1);var f=i.drawPath({d:"",stroke:c,strokeWidth:n*parseInt(h.strokeWidth,10)/100,fill:"none",strokeOpacity:h.opacity,classes:"apexcharts-radialbar-area"});if(h.dropShadow.enabled){var x=h.dropShadow;s.dropShadow(f,x)}l.add(f),f.attr("id","apexcharts-radialbarTrack-"+o),this.animatePaths(f,{centerX:t.centerX,centerY:t.centerY,endAngle:g,startAngle:d,size:t.size,i:o,totalItems:2,animBeginArr:0,dur:0,isTrack:!0,easing:e.globals.easing})}return a}},{key:"drawArcs",value:function(t){var e=this.w,i=new p(this.ctx),a=new M(this.ctx),s=new u(this.ctx),r=i.group(),n=this.getStrokeWidth(t);t.size=t.size-n/2;var o=e.config.plotOptions.radialBar.hollow.background,l=t.size-n*t.series.length-this.margin*t.series.length-n*parseInt(e.config.plotOptions.radialBar.track.strokeWidth,10)/100/2,h=l-e.config.plotOptions.radialBar.hollow.margin;void 0!==e.config.plotOptions.radialBar.hollow.image&&(o=this.drawHollowImage(t,r,l,o));var c=this.drawHollow({size:h,centerX:t.centerX,centerY:t.centerY,fill:o||"transparent"});if(e.config.plotOptions.radialBar.hollow.dropShadow.enabled){var d=e.config.plotOptions.radialBar.hollow.dropShadow;s.dropShadow(c,d)}var f=1;!this.radialDataLabels.total.show&&e.globals.series.length>1&&(f=0);var x=null;this.radialDataLabels.show&&(x=this.renderInnerDataLabels(this.radialDataLabels,{hollowSize:l,centerX:t.centerX,centerY:t.centerY,opacity:f})),"back"===e.config.plotOptions.radialBar.hollow.position&&(r.add(c),x&&r.add(x));var b=!1;e.config.plotOptions.radialBar.inverseOrder&&(b=!0);for(var m=b?t.series.length-1:0;b?m>=0:m<t.series.length;b?m--:m++){var v=i.group({class:"apexcharts-series apexcharts-radial-series",seriesName:g.escapeString(e.globals.seriesNames[m])});r.add(v),v.attr({rel:m+1,"data:realIndex":m}),this.ctx.series.addCollapsedClassToSeries(v,m),t.size=t.size-n-this.margin;var y=a.fillPath({seriesNumber:m,size:t.size,value:t.series[m]}),w=this.startAngle,k=void 0,A=g.negToZero(t.series[m]>100?100:t.series[m])/100,S=Math.round(this.totalAngle*A)+this.startAngle,C=void 0;e.globals.dataChanged&&(k=this.startAngle,C=Math.round(this.totalAngle*g.negToZero(e.globals.previousPaths[m])/100)+k),Math.abs(S)+Math.abs(w)>=360&&(S-=.01),Math.abs(C)+Math.abs(k)>=360&&(C-=.01);var L=S-w,P=Array.isArray(e.config.stroke.dashArray)?e.config.stroke.dashArray[m]:e.config.stroke.dashArray,T=i.drawPath({d:"",stroke:y,strokeWidth:n,fill:"none",fillOpacity:e.config.fill.opacity,classes:"apexcharts-radialbar-area apexcharts-radialbar-slice-"+m,strokeDashArray:P});if(p.setAttrs(T.node,{"data:angle":L,"data:value":t.series[m]}),e.config.chart.dropShadow.enabled){var z=e.config.chart.dropShadow;s.dropShadow(T,z,m)}this.addListeners(T,this.radialDataLabels),v.add(T),T.attr({index:0,j:m});var I=0;!this.initialAnim||e.globals.resized||e.globals.dataChanged||(I=(S-w)/360*e.config.chart.animations.speed,this.animDur=I/(1.2*t.series.length)+this.animDur,this.animBeginArr.push(this.animDur)),e.globals.dataChanged&&(I=(S-w)/360*e.config.chart.animations.dynamicAnimation.speed,this.animDur=I/(1.2*t.series.length)+this.animDur,this.animBeginArr.push(this.animDur)),this.animatePaths(T,{centerX:t.centerX,centerY:t.centerY,endAngle:S,startAngle:w,prevEndAngle:C,prevStartAngle:k,size:t.size,i:m,totalItems:2,animBeginArr:this.animBeginArr,dur:I,shouldSetPrevPaths:!0,easing:e.globals.easing})}return{g:r,elHollow:c,dataLabels:x}}},{key:"drawHollow",value:function(t){var e=new p(this.ctx).drawCircle(2*t.size);return e.attr({class:"apexcharts-radialbar-hollow",cx:t.centerX,cy:t.centerY,r:t.size,fill:t.fill}),e}},{key:"drawHollowImage",value:function(t,e,i,a){var s=this.w,r=new M(this.ctx),n=g.randomId(),o=s.config.plotOptions.radialBar.hollow.image;if(s.config.plotOptions.radialBar.hollow.imageClipped)r.clippedImgArea({width:i,height:i,image:o,patternID:"pattern".concat(s.globals.cuid).concat(n)}),a="url(#pattern".concat(s.globals.cuid).concat(n,")");else{var l=s.config.plotOptions.radialBar.hollow.imageWidth,h=s.config.plotOptions.radialBar.hollow.imageHeight;if(void 0===l&&void 0===h){var c=s.globals.dom.Paper.image(o).loaded((function(e){this.move(t.centerX-e.width/2+s.config.plotOptions.radialBar.hollow.imageOffsetX,t.centerY-e.height/2+s.config.plotOptions.radialBar.hollow.imageOffsetY)}));e.add(c)}else{var d=s.globals.dom.Paper.image(o).loaded((function(e){this.move(t.centerX-l/2+s.config.plotOptions.radialBar.hollow.imageOffsetX,t.centerY-h/2+s.config.plotOptions.radialBar.hollow.imageOffsetY),this.size(l,h)}));e.add(d)}}return a}},{key:"getStrokeWidth",value:function(t){var e=this.w;return t.size*(100-parseInt(e.config.plotOptions.radialBar.hollow.size,10))/100/(t.series.length+1)-this.margin}}]),i}(at),At=function(t){function i(){return e(this,i),c(this,l(i).apply(this,arguments))}return o(i,t),a(i,[{key:"draw",value:function(t,e){var i=this.w,a=new p(this.ctx);this.rangeBarOptions=this.w.config.plotOptions.rangeBar,this.series=t,this.seriesRangeStart=i.globals.seriesRangeStart,this.seriesRangeEnd=i.globals.seriesRangeEnd,this.barHelpers.initVariables(t);for(var s=a.group({class:"apexcharts-rangebar-series apexcharts-plot-series"}),r=0;r<t.length;r++){var o,l,h,c=void 0,d=void 0,u=void 0,f=i.globals.comboCharts?e[r]:r,x=a.group({class:"apexcharts-series",seriesName:g.escapeString(i.globals.seriesNames[f]),rel:r+1,"data:realIndex":f});t[r].length>0&&(this.visibleI=this.visibleI+1);var b=0,m=0;this.yRatio.length>1&&(this.yaxisIndex=f);var v=this.barHelpers.initialPositions();d=v.y,h=v.zeroW,c=v.x,m=v.barWidth,o=v.xDivision,l=v.zeroH;for(var y=a.group({class:"apexcharts-datalabels","data:realIndex":f}),w=0;w<i.globals.dataPoints;w++){var k=this.barHelpers.getStrokeWidth(r,w,f),A=this.seriesRangeStart[r][w],S=this.seriesRangeEnd[r][w],C=null,L=null,P={x:c,y:d,strokeWidth:k,elSeries:x};if(u=v.yDivision,b=v.barHeight,this.isHorizontal){L=d+b*this.visibleI;var T=(u-b*this.seriesLen)/2;if(void 0===i.config.series[r].data[w])break;if(this.isTimelineBar&&i.config.series[r].data[w].x){var z=this.detectOverlappingBars({i:r,j:w,barYPosition:L,srty:T,barHeight:b,yDivision:u,initPositions:v});b=z.barHeight,L=z.barYPosition}m=(C=this.drawRangeBarPaths(n({indexes:{i:r,j:w,realIndex:f},barHeight:b,barYPosition:L,zeroW:h,yDivision:u,y1:A,y2:S},P))).barWidth}else b=(C=this.drawRangeColumnPaths(n({indexes:{i:r,j:w,realIndex:f},zeroH:l,barWidth:m,xDivision:o},P))).barHeight;d=C.y,c=C.x;var I=this.barHelpers.getPathFillColor(t,r,w,f),M=i.globals.stroke.colors[f];this.renderSeries({realIndex:f,pathFill:I,lineFill:M,j:w,i:r,x:c,y:d,y1:A,y2:S,pathFrom:C.pathFrom,pathTo:C.pathTo,strokeWidth:k,elSeries:x,series:t,barHeight:b,barYPosition:L,barWidth:m,elDataLabelsWrap:y,visibleSeries:this.visibleI,type:"rangebar"})}s.add(x)}return s}},{key:"detectOverlappingBars",value:function(t){var e=t.i,i=t.j,a=t.barYPosition,s=t.srty,r=t.barHeight,n=t.yDivision,o=t.initPositions,l=this.w,h=[],c=l.config.series[e].data[i].rangeName,d=l.config.series[e].data[i].x,g=l.globals.labels.indexOf(d),u=l.globals.seriesRangeBarTimeline[e].findIndex((function(t){return t.x===d&&t.overlaps.length>0}));return a=s+r*this.visibleI+n*g,u>-1&&(h=l.globals.seriesRangeBarTimeline[e][u].overlaps).indexOf(c)>-1&&(a=(r=o.barHeight/h.length)*this.visibleI+n*(100-parseInt(this.barOptions.barHeight,10))/100/2+r*(this.visibleI+h.indexOf(c))+n*g),{barYPosition:a,barHeight:r}}},{key:"drawRangeColumnPaths",value:function(t){var e=t.indexes,i=t.x,a=(t.strokeWidth,t.xDivision),s=t.barWidth,r=t.zeroH,n=this.w,o=e.i,l=e.j,h=this.yRatio[this.yaxisIndex],c=e.realIndex,d=this.getRangeValue(c,l),g=Math.min(d.start,d.end),u=Math.max(d.start,d.end);n.globals.isXNumeric&&(i=(n.globals.seriesX[o][l]-n.globals.minX)/this.xRatio-s/2);var f=i+s*this.visibleI;void 0===this.series[o][l]||null===this.series[o][l]?g=r:(g=r-g/h,u=r-u/h);var p=Math.abs(u-g),x=this.barHelpers.getColumnPaths({barXPosition:f,barWidth:s,y1:g,y2:u,strokeWidth:this.strokeWidth,series:this.seriesRangeEnd,i:c,j:l,w:n});return n.globals.isXNumeric||(i+=a),{pathTo:x.pathTo,pathFrom:x.pathFrom,barHeight:p,x:i,y:u,barXPosition:f}}},{key:"drawRangeBarPaths",value:function(t){var e=t.indexes,i=t.y,a=t.y1,s=t.y2,r=t.yDivision,n=t.barHeight,o=t.barYPosition,l=t.zeroW,h=this.w,c=l+a/this.invertedYRatio,d=l+s/this.invertedYRatio,g=Math.abs(d-c),u=this.barHelpers.getBarpaths({barYPosition:o,barHeight:n,x1:c,x2:d,strokeWidth:this.strokeWidth,series:this.seriesRangeEnd,i:e.realIndex,j:e.j,w:h});return h.globals.isXNumeric||(i+=r),{pathTo:u.pathTo,pathFrom:u.pathFrom,barWidth:g,x:d,y:i}}},{key:"getRangeValue",value:function(t,e){var i=this.w;return{start:i.globals.seriesRangeStart[t][e],end:i.globals.seriesRangeEnd[t][e]}}}]),i}(bt),St=function(){function t(i){e(this,t),this.w=i.w,this.lineCtx=i}return a(t,[{key:"sameValueSeriesFix",value:function(t,e){var i=this.w;if("line"===i.config.chart.type&&("gradient"===i.config.fill.type||"gradient"===i.config.fill.type[t])&&new I(this.lineCtx.ctx,i).seriesHaveSameValues(t)){var a=e[t].slice();a[a.length-1]=a[a.length-1]+1e-6,e[t]=a}return e}},{key:"calculatePoints",value:function(t){var e=t.series,i=t.realIndex,a=t.x,s=t.y,r=t.i,n=t.j,o=t.prevY,l=this.w,h=[],c=[];if(0===n){var d=this.lineCtx.categoryAxisCorrection+l.config.markers.offsetX;l.globals.isXNumeric&&(d=(l.globals.seriesX[i][0]-l.globals.minX)/this.lineCtx.xRatio+l.config.markers.offsetX),h.push(d),c.push(g.isNumber(e[r][0])?o+l.config.markers.offsetY:null),h.push(a+l.config.markers.offsetX),c.push(g.isNumber(e[r][n+1])?s+l.config.markers.offsetY:null)}else h.push(a+l.config.markers.offsetX),c.push(g.isNumber(e[r][n+1])?s+l.config.markers.offsetY:null);return{x:h,y:c}}},{key:"checkPreviousPaths",value:function(t){for(var e=t.pathFromLine,i=t.pathFromArea,a=t.realIndex,s=this.w,r=0;r<s.globals.previousPaths.length;r++){var n=s.globals.previousPaths[r];("line"===n.type||"area"===n.type)&&n.paths.length>0&&parseInt(n.realIndex,10)===parseInt(a,10)&&("line"===n.type?(this.lineCtx.appendPathFrom=!1,e=s.globals.previousPaths[r].paths[0].d):"area"===n.type&&(this.lineCtx.appendPathFrom=!1,i=s.globals.previousPaths[r].paths[0].d,s.config.stroke.show&&s.globals.previousPaths[r].paths[1]&&(e=s.globals.previousPaths[r].paths[1].d)))}return{pathFromLine:e,pathFromArea:i}}},{key:"determineFirstPrevY",value:function(t){var e=t.i,i=t.series,a=t.prevY,s=t.lineYPosition,r=this.w;if(void 0!==i[e][0])a=(s=r.config.chart.stacked&&e>0?this.lineCtx.prevSeriesY[e-1][0]:this.lineCtx.zeroY)-i[e][0]/this.lineCtx.yRatio[this.lineCtx.yaxisIndex]+2*(this.lineCtx.isReversed?i[e][0]/this.lineCtx.yRatio[this.lineCtx.yaxisIndex]:0);else if(r.config.chart.stacked&&e>0&&void 0===i[e][0])for(var n=e-1;n>=0;n--)if(null!==i[n][0]&&void 0!==i[n][0]){a=s=this.lineCtx.prevSeriesY[n][0];break}return{prevY:a,lineYPosition:s}}}]),t}(),Ct=function(){function t(i,a,s){e(this,t),this.ctx=i,this.w=i.w,this.xyRatios=a,this.pointsChart=!("bubble"!==this.w.config.chart.type&&"scatter"!==this.w.config.chart.type)||s,this.scatter=new E(this.ctx),this.noNegatives=this.w.globals.minX===Number.MAX_VALUE,this.lineHelpers=new St(this),this.markers=new X(this.ctx),this.prevSeriesY=[],this.categoryAxisCorrection=0,this.yaxisIndex=0}return a(t,[{key:"draw",value:function(t,e,i){var a=this.w,s=new p(this.ctx),r=a.globals.comboCharts?e:a.config.chart.type,n=s.group({class:"apexcharts-".concat(r,"-series apexcharts-plot-series")}),o=new I(this.ctx,a);this.yRatio=this.xyRatios.yRatio,this.zRatio=this.xyRatios.zRatio,this.xRatio=this.xyRatios.xRatio,this.baseLineY=this.xyRatios.baseLineY,t=o.getLogSeries(t),this.yRatio=o.getLogYRatios(this.yRatio);for(var l=[],h=0;h<t.length;h++){t=this.lineHelpers.sameValueSeriesFix(h,t);var c=a.globals.comboCharts?i[h]:h;this._initSerieVariables(t,h,c);var d=[],g=[],u=a.globals.padHorizontal+this.categoryAxisCorrection;this.ctx.series.addCollapsedClassToSeries(this.elSeries,c),a.globals.isXNumeric&&a.globals.seriesX.length>0&&(u=(a.globals.seriesX[c][0]-a.globals.minX)/this.xRatio),g.push(u);var f,x=u,b=x,m=this.zeroY;m=this.lineHelpers.determineFirstPrevY({i:h,series:t,prevY:m,lineYPosition:0}).prevY,d.push(m),f=m;var v=this._calculatePathsFrom({series:t,i:h,realIndex:c,prevX:b,prevY:m}),y=this._iterateOverDataPoints({series:t,realIndex:c,i:h,x:u,y:1,pX:x,pY:f,pathsFrom:v,linePaths:[],areaPaths:[],seriesIndex:i,lineYPosition:0,xArrj:g,yArrj:d});this._handlePaths({type:r,realIndex:c,i:h,paths:y}),this.elSeries.add(this.elPointsMain),this.elSeries.add(this.elDataLabelsWrap),l.push(this.elSeries)}for(var w=l.length;w>0;w--)n.add(l[w-1]);return n}},{key:"_initSerieVariables",value:function(t,e,i){var a=this.w,s=new p(this.ctx);this.xDivision=a.globals.gridWidth/(a.globals.dataPoints-("on"===a.config.xaxis.tickPlacement?1:0)),this.strokeWidth=Array.isArray(a.config.stroke.width)?a.config.stroke.width[i]:a.config.stroke.width,this.yRatio.length>1&&(this.yaxisIndex=i),this.isReversed=a.config.yaxis[this.yaxisIndex]&&a.config.yaxis[this.yaxisIndex].reversed,this.zeroY=a.globals.gridHeight-this.baseLineY[this.yaxisIndex]-(this.isReversed?a.globals.gridHeight:0)+(this.isReversed?2*this.baseLineY[this.yaxisIndex]:0),this.areaBottomY=this.zeroY,this.zeroY>a.globals.gridHeight&&(this.areaBottomY=a.globals.gridHeight),this.categoryAxisCorrection=this.xDivision/2,this.elSeries=s.group({class:"apexcharts-series",seriesName:g.escapeString(a.globals.seriesNames[i])}),this.elPointsMain=s.group({class:"apexcharts-series-markers-wrap","data:realIndex":i}),this.elDataLabelsWrap=s.group({class:"apexcharts-datalabels","data:realIndex":i});var r=t[e].length===a.globals.dataPoints;this.elSeries.attr({"data:longestSeries":r,rel:e+1,"data:realIndex":i}),this.appendPathFrom=!0}},{key:"_calculatePathsFrom",value:function(t){var e,i,a,s,r=t.series,n=t.i,o=t.realIndex,l=t.prevX,h=t.prevY,c=this.w,d=new p(this.ctx);if(null===r[n][0]){for(var g=0;g<r[n].length;g++)if(null!==r[n][g]){l=this.xDivision*g,h=this.zeroY-r[n][g]/this.yRatio[this.yaxisIndex],e=d.move(l,h),i=d.move(l,this.areaBottomY);break}}else e=d.move(l,h),i=d.move(l,this.areaBottomY)+d.line(l,h);if(a=d.move(-1,this.zeroY)+d.line(-1,this.zeroY),s=d.move(-1,this.zeroY)+d.line(-1,this.zeroY),c.globals.previousPaths.length>0){var u=this.lineHelpers.checkPreviousPaths({pathFromLine:a,pathFromArea:s,realIndex:o});a=u.pathFromLine,s=u.pathFromArea}return{prevX:l,prevY:h,linePath:e,areaPath:i,pathFromLine:a,pathFromArea:s}}},{key:"_handlePaths",value:function(t){var e=t.type,i=t.realIndex,a=t.i,s=t.paths,r=this.w,o=new p(this.ctx),l=new M(this.ctx);this.prevSeriesY.push(s.yArrj),r.globals.seriesXvalues[i]=s.xArrj,r.globals.seriesYvalues[i]=s.yArrj,this.pointsChart||r.globals.delayedElements.push({el:this.elPointsMain.node,index:i});var h={i:a,realIndex:i,animationDelay:a,initialSpeed:r.config.chart.animations.speed,dataChangeSpeed:r.config.chart.animations.dynamicAnimation.speed,className:"apexcharts-".concat(e)};if("area"===e)for(var c=l.fillPath({seriesNumber:i}),d=0;d<s.areaPaths.length;d++){var g=o.renderPaths(n({},h,{pathFrom:s.pathFromArea,pathTo:s.areaPaths[d],stroke:"none",strokeWidth:0,strokeLineCap:null,fill:c}));this.elSeries.add(g)}if(r.config.stroke.show&&!this.pointsChart){var u=null;u="line"===e?l.fillPath({seriesNumber:i,i:a}):r.globals.stroke.colors[i];for(var f=0;f<s.linePaths.length;f++){var x=o.renderPaths(n({},h,{pathFrom:s.pathFromLine,pathTo:s.linePaths[f],stroke:u,strokeWidth:this.strokeWidth,strokeLineCap:r.config.stroke.lineCap,fill:"none"}));this.elSeries.add(x)}}}},{key:"_iterateOverDataPoints",value:function(t){for(var e=t.series,i=t.realIndex,a=t.i,s=t.x,r=t.y,n=t.pX,o=t.pY,l=t.pathsFrom,h=t.linePaths,c=t.areaPaths,d=t.seriesIndex,u=t.lineYPosition,f=t.xArrj,x=t.yArrj,b=this.w,m=new p(this.ctx),v=this.yRatio,y=l.prevY,w=l.linePath,k=l.areaPath,A=l.pathFromLine,S=l.pathFromArea,C=g.isNumber(b.globals.minYArr[i])?b.globals.minYArr[i]:b.globals.minY,L=b.globals.dataPoints>1?b.globals.dataPoints-1:b.globals.dataPoints,P=0;P<L;P++){var T=void 0===e[a][P+1]||null===e[a][P+1];if(b.globals.isXNumeric){var z=b.globals.seriesX[i][P+1];void 0===b.globals.seriesX[i][P+1]&&(z=b.globals.seriesX[i][L-1]),s=(z-b.globals.minX)/this.xRatio}else s+=this.xDivision;u=b.config.chart.stacked&&a>0&&b.globals.collapsedSeries.length<b.config.series.length-1?this.prevSeriesY[a-1][P+1]:this.zeroY,r=T?u-C/v[this.yaxisIndex]+2*(this.isReversed?C/v[this.yaxisIndex]:0):u-e[a][P+1]/v[this.yaxisIndex]+2*(this.isReversed?e[a][P+1]/v[this.yaxisIndex]:0),f.push(s),x.push(r);var I=this.lineHelpers.calculatePoints({series:e,x:s,y:r,realIndex:i,i:a,j:P,prevY:y}),M=this._createPaths({series:e,i:a,realIndex:i,j:P,x:s,y:r,pX:n,pY:o,linePath:w,areaPath:k,linePaths:h,areaPaths:c,seriesIndex:d});c=M.areaPaths,h=M.linePaths,n=M.pX,o=M.pY,k=M.areaPath,w=M.linePath,this.appendPathFrom&&(A+=m.line(s,this.zeroY),S+=m.line(s,this.zeroY)),this.handleNullDataPoints(e,I,a,P,i),this._handleMarkersAndLabels({pointsPos:I,series:e,x:s,y:r,prevY:y,i:a,j:P,realIndex:i})}return{yArrj:x,xArrj:f,pathFromArea:S,areaPaths:c,pathFromLine:A,linePaths:h}}},{key:"_handleMarkersAndLabels",value:function(t){var e=t.pointsPos,i=(t.series,t.x,t.y,t.prevY,t.i),a=t.j,s=t.realIndex,r=this.w,n=new Y(this.ctx);if(this.pointsChart)this.scatter.draw(this.elSeries,a,{realIndex:s,pointsPos:e,zRatio:this.zRatio,elParent:this.elPointsMain});else{r.globals.series[i].length>1&&this.elPointsMain.node.classList.add("apexcharts-element-hidden");var o=this.markers.plotChartMarkers(e,s,a+1);null!==o&&this.elPointsMain.add(o)}var l=n.drawDataLabel(e,s,a+1,null);null!==l&&this.elDataLabelsWrap.add(l)}},{key:"_createPaths",value:function(t){var e=t.series,i=t.i,a=t.realIndex,s=t.j,r=t.x,n=t.y,o=t.pX,l=t.pY,h=t.linePath,c=t.areaPath,d=t.linePaths,g=t.areaPaths,u=t.seriesIndex,f=this.w,x=new p(this.ctx),b=f.config.stroke.curve,m=this.areaBottomY;if(Array.isArray(f.config.stroke.curve)&&(b=Array.isArray(u)?f.config.stroke.curve[u[i]]:f.config.stroke.curve[i]),"smooth"===b){var v=.35*(r-o);f.globals.hasNullValues?(null!==e[i][s]&&(null!==e[i][s+1]?(h=x.move(o,l)+x.curve(o+v,l,r-v,n,r+1,n),c=x.move(o+1,l)+x.curve(o+v,l,r-v,n,r+1,n)+x.line(r,m)+x.line(o,m)+"z"):(h=x.move(o,l),c=x.move(o,l)+"z")),d.push(h),g.push(c)):(h+=x.curve(o+v,l,r-v,n,r,n),c+=x.curve(o+v,l,r-v,n,r,n)),o=r,l=n,s===e[i].length-2&&(c=c+x.curve(o,l,r,n,r,m)+x.move(r,n)+"z",f.globals.hasNullValues||(d.push(h),g.push(c)))}else{if(null===e[i][s+1]){h+=x.move(r,n);var y=f.globals.isXNumeric?(f.globals.seriesX[a][s]-f.globals.minX)/this.xRatio:r-this.xDivision;c=c+x.line(y,m)+x.move(r,n)+"z"}null===e[i][s]&&(h+=x.move(r,n),c+=x.move(r,m)),"stepline"===b?(h=h+x.line(r,null,"H")+x.line(null,n,"V"),c=c+x.line(r,null,"H")+x.line(null,n,"V")):"straight"===b&&(h+=x.line(r,n),c+=x.line(r,n)),s===e[i].length-2&&(c=c+x.line(r,m)+x.move(r,n)+"z",d.push(h),g.push(c))}return{linePaths:d,areaPaths:g,pX:o,pY:l,linePath:h,areaPath:c}}},{key:"handleNullDataPoints",value:function(t,e,i,a,s){var r=this.w;if(null===t[i][a]&&r.config.markers.showNullDataPoints||1===t[i].length){var n=this.markers.plotChartMarkers(e,s,a+1,this.strokeWidth-r.config.markers.strokeWidth/2,!0);null!==n&&this.elPointsMain.add(n)}}}]),t}(),Lt=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.timeScaleArray=[],this.utc=this.w.config.xaxis.labels.datetimeUTC}return a(t,[{key:"calculateTimeScaleTicks",value:function(t,e){var i=this,a=this.w;if(a.globals.allSeriesCollapsed)return a.globals.labels=[],a.globals.timescaleLabels=[],[];var s=new C(this.ctx),r=(e-t)/864e5;this.determineInterval(r),a.globals.disableZoomIn=!1,a.globals.disableZoomOut=!1,r<.005?a.globals.disableZoomIn=!0:r>5e4&&(a.globals.disableZoomOut=!0);var o=s.getTimeUnitsfromTimestamp(t,e,this.utc),l=a.globals.gridWidth/r,h=l/24,c=h/60,d=Math.floor(24*r),g=Math.floor(24*r*60),u=Math.floor(r),f=Math.floor(r/30),p=Math.floor(r/365),x={minMinute:o.minMinute,minHour:o.minHour,minDate:o.minDate,minMonth:o.minMonth,minYear:o.minYear},b={firstVal:x,currentMinute:x.minMinute,currentHour:x.minHour,currentMonthDate:x.minDate,currentDate:x.minDate,currentMonth:x.minMonth,currentYear:x.minYear,daysWidthOnXAxis:l,hoursWidthOnXAxis:h,minutesWidthOnXAxis:c,numberOfMinutes:g,numberOfHours:d,numberOfDays:u,numberOfMonths:f,numberOfYears:p};switch(this.tickInterval){case"years":this.generateYearScale(b);break;case"months":case"half_year":this.generateMonthScale(b);break;case"months_days":case"months_fortnight":case"days":case"week_days":this.generateDayScale(b);break;case"hours":this.generateHourScale(b);break;case"minutes":this.generateMinuteScale(b)}var m=this.timeScaleArray.map((function(t){var e={position:t.position,unit:t.unit,year:t.year,day:t.day?t.day:1,hour:t.hour?t.hour:0,month:t.month+1};return"month"===t.unit?n({},e,{day:1,value:t.value+1}):"day"===t.unit||"hour"===t.unit?n({},e,{value:t.value}):"minute"===t.unit?n({},e,{value:t.value,minute:t.value}):t}));return m.filter((function(t){var e=1,s=Math.ceil(a.globals.gridWidth/120),r=t.value;void 0!==a.config.xaxis.tickAmount&&(s=a.config.xaxis.tickAmount),m.length>s&&(e=Math.floor(m.length/s));var n=!1,o=!1;switch(i.tickInterval){case"years":"year"===t.unit&&(n=!0);break;case"half_year":e=7,"year"===t.unit&&(n=!0);break;case"months":e=1,"year"===t.unit&&(n=!0);break;case"months_fortnight":e=15,"year"!==t.unit&&"month"!==t.unit||(n=!0),30===r&&(o=!0);break;case"months_days":e=10,"month"===t.unit&&(n=!0),30===r&&(o=!0);break;case"week_days":e=8,"month"===t.unit&&(n=!0);break;case"days":e=1,"month"===t.unit&&(n=!0);break;case"hours":"day"===t.unit&&(n=!0);break;case"minutes":r%5!=0&&(o=!0)}if("minutes"===i.tickInterval||"hours"===i.tickInterval){if(!o)return!0}else if((r%e==0||n)&&!o)return!0}))}},{key:"recalcDimensionsBasedOnFormat",value:function(t,e){var i=this.w,a=this.formatDates(t),s=this.removeOverlappingTS(a);i.globals.timescaleLabels=s.slice(),new it(this.ctx).plotCoords()}},{key:"determineInterval",value:function(t){switch(!0){case t>1825:this.tickInterval="years";break;case t>800&&t<=1825:this.tickInterval="half_year";break;case t>180&&t<=800:this.tickInterval="months";break;case t>90&&t<=180:this.tickInterval="months_fortnight";break;case t>60&&t<=90:this.tickInterval="months_days";break;case t>30&&t<=60:this.tickInterval="week_days";break;case t>2&&t<=30:this.tickInterval="days";break;case t>.1&&t<=2:this.tickInterval="hours";break;case t<.1:this.tickInterval="minutes";break;default:this.tickInterval="days"}}},{key:"generateYearScale",value:function(t){var e=t.firstVal,i=t.currentMonth,a=t.currentYear,s=t.daysWidthOnXAxis,r=t.numberOfYears,n=e.minYear,o=0,l=new C(this.ctx);if(e.minDate>1&&e.minMonth>0){var h=l.determineRemainingDaysOfYear(e.minYear,e.minMonth,e.minDate);o=(l.determineDaysOfYear(e.minYear)-h+1)*s,n=e.minYear+1,this.timeScaleArray.push({position:o,value:n,unit:"year",year:n,month:g.monthMod(i+1)})}else 1===e.minDate&&0===e.minMonth&&this.timeScaleArray.push({position:o,value:n,unit:"year",year:a,month:g.monthMod(i+1)});for(var c=n,d=o,u=0;u<r;u++)c++,d=l.determineDaysOfYear(c-1)*s+d,this.timeScaleArray.push({position:d,value:c,unit:"year",year:c,month:1})}},{key:"generateMonthScale",value:function(t){var e=t.firstVal,i=t.currentMonthDate,a=t.currentMonth,s=t.currentYear,r=t.daysWidthOnXAxis,n=t.numberOfMonths,o=a,l=0,h=new C(this.ctx),c="month",d=0;if(e.minDate>1){l=(h.determineDaysOfMonths(a+1,e.minYear)-i+1)*r,o=g.monthMod(a+1);var u=s+d,f=g.monthMod(o),p=o;0===o&&(c="year",p=u,f=1,u+=d+=1),this.timeScaleArray.push({position:l,value:p,unit:c,year:u,month:f})}else this.timeScaleArray.push({position:l,value:o,unit:c,year:s,month:g.monthMod(a)});for(var x=o+1,b=l,m=0,v=1;m<n;m++,v++){0===(x=g.monthMod(x))?(c="year",d+=1):c="month";var y=this._getYear(s,x,d);b=h.determineDaysOfMonths(x,y)*r+b;var w=0===x?y:x;this.timeScaleArray.push({position:b,value:w,unit:c,year:y,month:0===x?1:x}),x++}}},{key:"generateDayScale",value:function(t){var e=t.firstVal,i=t.currentMonth,a=t.currentYear,s=t.hoursWidthOnXAxis,r=t.numberOfDays,n=new C(this.ctx),o="day",l=e.minDate+1,h=l,c=function(t,e,i){return t>n.determineDaysOfMonths(e+1,i)?(h=1,o="month",u=e+=1,e):e},d=(24-e.minHour)*s,u=l,f=c(h,i,a);0===e.minHour&&1===e.minDate&&(d=0,u=g.monthMod(e.minMonth),o="month",h=e.minDate,r++),this.timeScaleArray.push({position:d,value:u,unit:o,year:this._getYear(a,f,0),month:g.monthMod(f),day:h});for(var p=d,x=0;x<r;x++){o="day",f=c(h+=1,f,this._getYear(a,f,0));var b=this._getYear(a,f,0);p=24*s+p;var m=1===h?g.monthMod(f):h;this.timeScaleArray.push({position:p,value:m,unit:o,year:b,month:g.monthMod(f),day:m})}}},{key:"generateHourScale",value:function(t){var e=t.firstVal,i=t.currentDate,a=t.currentMonth,s=t.currentYear,r=t.minutesWidthOnXAxis,n=t.numberOfHours,o=new C(this.ctx),l="hour",h=function(t,e){return t>o.determineDaysOfMonths(e+1,s)&&(x=1,e+=1),{month:e,date:x}},c=function(t,e){return t>o.determineDaysOfMonths(e+1,s)?e+=1:e},d=60-e.minMinute,u=d*r,f=e.minHour+1,p=f+1;60===d&&(u=0,p=(f=e.minHour)+1);var x=i,b=c(x,a);this.timeScaleArray.push({position:u,value:f,unit:l,day:x,hour:p,year:s,month:g.monthMod(b)});for(var m=u,v=0;v<n;v++){if(l="hour",p>=24)p=0,l="day",b=h(x+=1,b).month,b=c(x,b);var y=this._getYear(s,b,0);m=0===p&&0===v?d*r:60*r+m;var w=0===p?x:p;this.timeScaleArray.push({position:m,value:w,unit:l,hour:p,day:x,year:y,month:g.monthMod(b)}),p++}}},{key:"generateMinuteScale",value:function(t){var e=t.firstVal,i=t.currentMinute,a=t.currentHour,s=t.currentDate,r=t.currentMonth,n=t.currentYear,o=t.minutesWidthOnXAxis,l=t.numberOfMinutes,h=o-(i-e.minMinute),c=e.minMinute+1,d=c+1,u=s,f=r,p=n,x=a;this.timeScaleArray.push({position:h,value:c,unit:"minute",day:u,hour:x,minute:d,year:p,month:g.monthMod(f)});for(var b=h,m=0;m<l;m++)d>=60&&(d=0,24===(x+=1)&&(x=0)),b=o+b,this.timeScaleArray.push({position:b,value:d,unit:"minute",hour:x,minute:d,day:u,year:this._getYear(n,f,0),month:g.monthMod(f)}),d++}},{key:"createRawDateString",value:function(t,e){var i=t.year;return i+="-"+("0"+t.month.toString()).slice(-2),"day"===t.unit?i+="day"===t.unit?"-"+("0"+e).slice(-2):"-01":i+="-"+("0"+(t.day?t.day:"1")).slice(-2),"hour"===t.unit?i+="hour"===t.unit?"T"+("0"+e).slice(-2):"T00":i+="T"+("0"+(t.hour?t.hour:"0")).slice(-2),i+="minute"===t.unit?":"+("0"+e).slice(-2)+":00":":00:00",this.utc&&(i+=".000Z"),i}},{key:"formatDates",value:function(t){var e=this,i=this.w;return t.map((function(t){var a=t.value.toString(),s=new C(e.ctx),r=e.createRawDateString(t,a),n=s.getDate(r);if(void 0===i.config.xaxis.labels.format){var o="dd MMM",l=i.config.xaxis.labels.datetimeFormatter;"year"===t.unit&&(o=l.year),"month"===t.unit&&(o=l.month),"day"===t.unit&&(o=l.day),"hour"===t.unit&&(o=l.hour),"minute"===t.unit&&(o=l.minute),a=s.formatDate(n,o)}else a=s.formatDate(n,i.config.xaxis.labels.format);return{dateString:r,position:t.position,value:a,unit:t.unit,year:t.year,month:t.month}}))}},{key:"removeOverlappingTS",value:function(t){var e,i=this,a=new p(this.ctx),s=!1;t.length>0&&t[0].value&&t.every((function(e){return e.value.length===t[0].value.length}))&&(s=!0,e=a.getTextRects(t[0].value).width);var r=0,n=t.map((function(n,o){if(o>0&&i.w.config.xaxis.labels.hideOverlappingLabels){var l=s?e:a.getTextRects(t[r].value).width,h=t[r].position;return n.position>h+l+10?(r=o,n):null}return n}));return n=n.filter((function(t){return null!==t}))}},{key:"_getYear",value:function(t,e,i){return t+Math.floor(e/12)+i}}]),t}(),Pt=function(){function t(i,a){e(this,t),this.ctx=a,this.w=a.w,this.el=i}return a(t,[{key:"setupElements",value:function(){var t=this.w.globals,e=this.w.config,i=e.chart.type;t.axisCharts=["line","area","bar","rangeBar","candlestick","scatter","bubble","radar","heatmap"].indexOf(i)>-1,t.xyCharts=["line","area","bar","rangeBar","candlestick","scatter","bubble"].indexOf(i)>-1,t.isBarHorizontal=("bar"===e.chart.type||"rangeBar"===e.chart.type)&&e.plotOptions.bar.horizontal,t.chartClass=".apexcharts"+t.cuid,t.dom.baseEl=this.el,t.dom.elWrap=document.createElement("div"),p.setAttrs(t.dom.elWrap,{id:t.chartClass.substring(1),class:"apexcharts-canvas "+t.chartClass.substring(1)}),this.el.appendChild(t.dom.elWrap),t.dom.Paper=new window.SVG.Doc(t.dom.elWrap),t.dom.Paper.attr({class:"apexcharts-svg","xmlns:data":"ApexChartsNS",transform:"translate(".concat(e.chart.offsetX,", ").concat(e.chart.offsetY,")")}),t.dom.Paper.node.style.background=e.chart.background,this.setSVGDimensions(),t.dom.elGraphical=t.dom.Paper.group().attr({class:"apexcharts-inner apexcharts-graphical"}),t.dom.elAnnotations=t.dom.Paper.group().attr({class:"apexcharts-annotations"}),t.dom.elDefs=t.dom.Paper.defs(),t.dom.elLegendWrap=document.createElement("div"),t.dom.elLegendWrap.classList.add("apexcharts-legend"),t.dom.elWrap.appendChild(t.dom.elLegendWrap),t.dom.Paper.add(t.dom.elGraphical),t.dom.elGraphical.add(t.dom.elDefs)}},{key:"plotChartType",value:function(t,e){var i=this.w,a=i.config,s=i.globals,r={series:[],i:[]},n={series:[],i:[]},o={series:[],i:[]},l={series:[],i:[]},h={series:[],i:[]},c={series:[],i:[]};s.series.map((function(e,d){void 0!==t[d].type?("column"===t[d].type||"bar"===t[d].type?(s.series.length>1&&a.plotOptions.bar.horizontal&&console.warn("Horizontal bars are not supported in a mixed/combo chart. Please turn off `plotOptions.bar.horizontal`"),h.series.push(e),h.i.push(d),i.globals.columnSeries=h.series):"area"===t[d].type?(n.series.push(e),n.i.push(d)):"line"===t[d].type?(r.series.push(e),r.i.push(d)):"scatter"===t[d].type?(o.series.push(e),o.i.push(d)):"bubble"===t[d].type?(l.series.push(e),l.i.push(d)):"candlestick"===t[d].type?(c.series.push(e),c.i.push(d)):console.warn("You have specified an unrecognized chart type. Available types for this propery are line/area/column/bar/scatter/bubble"),s.comboCharts=!0):(r.series.push(e),r.i.push(d))}));var d=new Ct(this.ctx,e),g=new vt(this.ctx,e),u=new at(this.ctx),f=new kt(this.ctx),p=new At(this.ctx,e),x=new wt(this.ctx),b=[];if(s.comboCharts){if(n.series.length>0&&b.push(d.draw(n.series,"area",n.i)),h.series.length>0)if(i.config.chart.stacked){var m=new mt(this.ctx,e);b.push(m.draw(h.series,h.i))}else{var v=new bt(this.ctx,e);b.push(v.draw(h.series,h.i))}if(r.series.length>0&&b.push(d.draw(r.series,"line",r.i)),c.series.length>0&&b.push(g.draw(c.series,c.i)),o.series.length>0){var y=new Ct(this.ctx,e,!0);b.push(y.draw(o.series,"scatter",o.i))}if(l.series.length>0){var w=new Ct(this.ctx,e,!0);b.push(w.draw(l.series,"bubble",l.i))}}else switch(a.chart.type){case"line":b=d.draw(s.series,"line");break;case"area":b=d.draw(s.series,"area");break;case"bar":if(a.chart.stacked)b=new mt(this.ctx,e).draw(s.series);else b=new bt(this.ctx,e).draw(s.series);break;case"candlestick":b=new vt(this.ctx,e).draw(s.series);break;case"rangeBar":b=p.draw(s.series);break;case"heatmap":b=new yt(this.ctx,e).draw(s.series);break;case"pie":case"donut":b=u.draw(s.series);break;case"radialBar":b=f.draw(s.series);break;case"radar":b=x.draw(s.series);break;default:b=d.draw(s.series)}return b}},{key:"setSVGDimensions",value:function(){var t=this.w.globals,e=this.w.config;t.svgWidth=e.chart.width,t.svgHeight=e.chart.height;var i=g.getDimensions(this.el),a=e.chart.width.toString().split(/[0-9]+/g).pop();if("%"===a?g.isNumber(i[0])&&(0===i[0].width&&(i=g.getDimensions(this.el.parentNode)),t.svgWidth=i[0]*parseInt(e.chart.width,10)/100):"px"!==a&&""!==a||(t.svgWidth=parseInt(e.chart.width,10)),"auto"!==t.svgHeight&&""!==t.svgHeight)if("%"===e.chart.height.toString().split(/[0-9]+/g).pop()){var s=g.getDimensions(this.el.parentNode);t.svgHeight=s[1]*parseInt(e.chart.height,10)/100}else t.svgHeight=parseInt(e.chart.height,10);else t.axisCharts?t.svgHeight=t.svgWidth/1.61:t.svgHeight=t.svgWidth/1.2;t.svgWidth<0&&(t.svgWidth=0),t.svgHeight<0&&(t.svgHeight=0),p.setAttrs(t.dom.Paper.node,{width:t.svgWidth,height:t.svgHeight});var r=e.chart.sparkline.enabled?0:t.axisCharts?e.chart.parentHeightOffset:0;t.dom.Paper.node.parentNode.parentNode.style.minHeight=t.svgHeight+r+"px",t.dom.elWrap.style.width=t.svgWidth+"px",t.dom.elWrap.style.height=t.svgHeight+"px"}},{key:"shiftGraphPosition",value:function(){var t=this.w.globals,e=t.translateY,i={transform:"translate("+t.translateX+", "+e+")"};p.setAttrs(t.dom.elGraphical.node,i),t.x2SpaceAvailable=t.svgWidth-t.dom.elGraphical.x()-t.gridWidth}},{key:"resizeNonAxisCharts",value:function(){var t=this.w,e=t.globals,i=0,a=t.config.chart.sparkline.enabled?1:15;a+=t.config.grid.padding.bottom,"top"!==t.config.legend.position&&"bottom"!==t.config.legend.position||!t.config.legend.show||t.config.legend.floating||(i=new rt(this.ctx).legendHelpers.getLegendBBox().clwh+10);var s=t.globals.dom.baseEl.querySelector(".apexcharts-radialbar"),r=2.05*t.globals.radialSize;if(s&&!t.config.chart.sparkline.enabled){var n=g.getBoundingClientRect(s);r=n.bottom;var o=n.bottom-n.top;r=Math.max(2.05*t.globals.radialSize,o)}var l=r+e.translateY+i+a;e.dom.elLegendForeign&&e.dom.elLegendForeign.setAttribute("height",l),e.dom.elWrap.style.height=l+"px",p.setAttrs(e.dom.Paper.node,{height:l}),e.dom.Paper.node.parentNode.parentNode.style.minHeight=l+"px"}},{key:"coreCalculations",value:function(){new V(this.ctx).init()}},{key:"resetGlobals",value:function(){var t=this,e=function(){return t.w.config.series.map((function(t){return[]}))},i=new T,a=this.w.globals;i.initGlobalVars(a),a.seriesXvalues=e(),a.seriesYvalues=e()}},{key:"isMultipleY",value:function(){if(this.w.config.yaxis.constructor===Array&&this.w.config.yaxis.length>1)return this.w.globals.isMultipleYAxis=!0,!0}},{key:"xySettings",value:function(){var t=null,e=this.w;if(e.globals.axisCharts){if("back"===e.config.xaxis.crosshairs.position)new q(this.ctx).drawXCrosshairs();if("back"===e.config.yaxis[0].crosshairs.position)new q(this.ctx).drawYCrosshairs();if("datetime"===e.config.xaxis.type&&void 0===e.config.xaxis.labels.formatter){var i=new Lt(this.ctx),a=[];isFinite(e.globals.minX)&&isFinite(e.globals.maxX)&&!e.globals.isBarHorizontal?a=i.calculateTimeScaleTicks(e.globals.minX,e.globals.maxX):e.globals.isBarHorizontal&&(a=i.calculateTimeScaleTicks(e.globals.minY,e.globals.maxY)),i.recalcDimensionsBasedOnFormat(a)}t=new I(this.ctx).getCalculatedRatios()}return t}},{key:"setupBrushHandler",value:function(){var t=this,e=this.w;if(e.config.chart.brush.enabled&&"function"!=typeof e.config.chart.events.selection){var i=e.config.chart.brush.targets||[e.config.chart.brush.target];i.forEach((function(e){var i=ApexCharts.getChartByID(e);i.w.globals.brushSource=t.ctx;var a=function(){t.ctx.updateHelpers._updateOptions({chart:{selection:{xaxis:{min:i.w.globals.minX,max:i.w.globals.maxX}}}},!1,!1)};"function"!=typeof i.w.config.chart.events.zoomed&&(i.w.config.chart.events.zoomed=function(){a()}),"function"!=typeof i.w.config.chart.events.scrolled&&(i.w.config.chart.events.scrolled=function(){a()})})),e.config.chart.events.selection=function(t,a){i.forEach((function(t){var i=ApexCharts.getChartByID(t),s=g.clone(e.config.yaxis);e.config.chart.brush.autoScaleYaxis&&1===i.w.globals.series.length&&(s=new B(i).autoScaleY(i,s,a));i.ctx.updateHelpers._updateOptions({xaxis:{min:a.xaxis.min,max:a.xaxis.max},yaxis:n({},i.w.config.yaxis[0],{min:s[0].min,max:s[0].max})},!1,!1,!1,!1)}))}}}}]),t}(),Tt=function(){function i(t){e(this,i),this.ctx=t,this.w=t.w}return a(i,[{key:"_updateOptions",value:function(e){var i=this,a=arguments.length>1&&void 0!==arguments[1]&&arguments[1],s=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],r=!(arguments.length>3&&void 0!==arguments[3])||arguments[3],n=arguments.length>4&&void 0!==arguments[4]&&arguments[4],o=[this.ctx];r&&(o=this.ctx.getSyncedCharts()),this.ctx.w.globals.isExecCalled&&(o=[this.ctx],this.ctx.w.globals.isExecCalled=!1),o.forEach((function(r){var o=r.w;return o.globals.shouldAnimate=s,a||(o.globals.resized=!0,o.globals.dataChanged=!0,s&&r.series.getPreviousPaths()),e&&"object"===t(e)&&(r.config=new P(e),e=I.extendArrayProps(r.config,e),r.w.globals.chartID!==i.ctx.w.globals.chartID&&delete e.series,o.config=g.extend(o.config,e),n&&(o.globals.lastXAxis=[],o.globals.lastYAxis=[],o.globals.initialConfig=g.extend({},o.config),o.globals.initialSeries=JSON.parse(JSON.stringify(o.config.series)))),r.update(e)}))}},{key:"_updateSeries",value:function(t,e){var i,a=this,s=arguments.length>2&&void 0!==arguments[2]&&arguments[2],r=this.w;return r.globals.shouldAnimate=e,r.globals.dataChanged=!0,e&&this.ctx.series.getPreviousPaths(),r.globals.axisCharts?(0===(i=t.map((function(t,e){return a._extendSeries(t,e)}))).length&&(i=[{data:[]}]),r.config.series=i):r.config.series=t.slice(),s&&(r.globals.initialConfig.series=JSON.parse(JSON.stringify(r.config.series)),r.globals.initialSeries=JSON.parse(JSON.stringify(r.config.series))),this.ctx.update()}},{key:"_extendSeries",value:function(t,e){var i=this.w;return n({},i.config.series[e],{name:t.name?t.name:i.config.series[e]&&i.config.series[e].name,type:t.type?t.type:i.config.series[e]&&i.config.series[e].type,data:t.data?t.data:i.config.series[e]&&i.config.series[e].data})}},{key:"toggleDataPointSelection",value:function(t,e){var i=this.w,a=null,s=".apexcharts-series[data\\:realIndex='".concat(t,"']");i.globals.axisCharts?a=i.globals.dom.Paper.select("".concat(s," path[j='").concat(e,"'], ").concat(s," circle[j='").concat(e,"'], ").concat(s," rect[j='").concat(e,"']")).members[0]:void 0===e&&(a=i.globals.dom.Paper.select("".concat(s," path[j='").concat(t,"']")).members[0],("pie"===i.config.chart.type||"donut"===i.config.chart.type)&&new at(this.ctx).pieClicked(t));return a?(new p(this.ctx).pathMouseDown(a,null),a.node?a.node:null):(console.warn("toggleDataPointSelection: Element not found"),null)}},{key:"forceXAxisUpdate",value:function(t){var e=this.w;if(["min","max"].forEach((function(i){void 0!==t.xaxis[i]&&(e.config.xaxis[i]=t.xaxis[i],e.globals.lastXAxis[i]=t.xaxis[i])})),t.xaxis.categories&&t.xaxis.categories.length&&(e.config.xaxis.categories=t.xaxis.categories),e.config.xaxis.convertedCatToNumeric){var i=new L(t);t=i.convertCatToNumericXaxis(t,this.ctx)}return t}},{key:"forceYAxisUpdate",value:function(t){var e=this.w;return e.config.chart.stacked&&"100%"===e.config.chart.stackType&&(Array.isArray(t.yaxis)?t.yaxis.forEach((function(e,i){t.yaxis[i].min=0,t.yaxis[i].max=100})):(t.yaxis.min=0,t.yaxis.max=100)),t}},{key:"revertDefaultAxisMinMax",value:function(){var t=this,e=this.w;e.config.xaxis.min=e.globals.lastXAxis.min,e.config.xaxis.max=e.globals.lastXAxis.max,e.config.yaxis.map((function(i,a){e.globals.zoomed?void 0!==e.globals.lastYAxis[a]&&(i.min=e.globals.lastYAxis[a].min,i.max=e.globals.lastYAxis[a].max):void 0!==t.ctx.opts.yaxis[a]&&(i.min=t.ctx.opts.yaxis[a].min,i.max=t.ctx.opts.yaxis[a].max)}))}}]),i}();y="undefined"!=typeof window?window:void 0,w=function(e,i){var a=(void 0!==this?this:e).SVG=function(t){if(a.supported)return t=new a.Doc(t),a.parser.draw||a.prepare(),t};if(a.ns="http://www.w3.org/2000/svg",a.xmlns="http://www.w3.org/2000/xmlns/",a.xlink="http://www.w3.org/1999/xlink",a.svgjs="http://svgjs.com/svgjs",a.supported=!0,!a.supported)return!1;a.did=1e3,a.eid=function(t){return"Svgjs"+d(t)+a.did++},a.create=function(t){var e=i.createElementNS(this.ns,t);return e.setAttribute("id",this.eid(t)),e},a.extend=function(){var t,e;e=(t=[].slice.call(arguments)).pop();for(var i=t.length-1;i>=0;i--)if(t[i])for(var s in e)t[i].prototype[s]=e[s];a.Set&&a.Set.inherit&&a.Set.inherit()},a.invent=function(t){var e="function"==typeof t.create?t.create:function(){this.constructor.call(this,a.create(t.create))};return t.inherit&&(e.prototype=new t.inherit),t.extend&&a.extend(e,t.extend),t.construct&&a.extend(t.parent||a.Container,t.construct),e},a.adopt=function(t){return t?t.instance?t.instance:((i="svg"==t.nodeName?t.parentNode instanceof e.SVGElement?new a.Nested:new a.Doc:"linearGradient"==t.nodeName?new a.Gradient("linear"):"radialGradient"==t.nodeName?new a.Gradient("radial"):a[d(t.nodeName)]?new(a[d(t.nodeName)]):new a.Element(t)).type=t.nodeName,i.node=t,t.instance=i,i instanceof a.Doc&&i.namespace().defs(),i.setData(JSON.parse(t.getAttribute("svgjs:data"))||{}),i):null;var i},a.prepare=function(){var t=i.getElementsByTagName("body")[0],e=(t?new a.Doc(t):a.adopt(i.documentElement).nested()).size(2,0);a.parser={body:t||i.documentElement,draw:e.style("opacity:0;position:absolute;left:-100%;top:-100%;overflow:hidden").node,poly:e.polyline().node,path:e.path().node,native:a.create("svg")}},a.parser={native:a.create("svg")},i.addEventListener("DOMContentLoaded",(function(){a.parser.draw||a.prepare()}),!1),a.regex={numberAndUnit:/^([+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?)([a-z%]*)$/i,hex:/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i,rgb:/rgb\((\d+),(\d+),(\d+)\)/,reference:/#([a-z0-9\-_]+)/i,transforms:/\)\s*,?\s*/,whitespace:/\s/g,isHex:/^#[a-f0-9]{3,6}$/i,isRgb:/^rgb\(/,isCss:/[^:]+:[^;]+;?/,isBlank:/^(\s+)?$/,isNumber:/^[+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?$/i,isPercent:/^-?[\d\.]+%$/,isImage:/\.(jpg|jpeg|png|gif|svg)(\?[^=]+.*)?/i,delimiter:/[\s,]+/,hyphen:/([^e])\-/gi,pathLetters:/[MLHVCSQTAZ]/gi,isPathLetter:/[MLHVCSQTAZ]/i,numbersWithDots:/((\d?\.\d+(?:e[+-]?\d+)?)((?:\.\d+(?:e[+-]?\d+)?)+))+/gi,dots:/\./g},a.utils={map:function(t,e){for(var i=t.length,a=[],s=0;s<i;s++)a.push(e(t[s]));return a},filter:function(t,e){for(var i=t.length,a=[],s=0;s<i;s++)e(t[s])&&a.push(t[s]);return a},filterSVGElements:function(t){return this.filter(t,(function(t){return t instanceof e.SVGElement}))}},a.defaults={attrs:{"fill-opacity":1,"stroke-opacity":1,"stroke-width":0,"stroke-linejoin":"miter","stroke-linecap":"butt",fill:"#000000",stroke:"#000000",opacity:1,x:0,y:0,cx:0,cy:0,width:0,height:0,r:0,rx:0,ry:0,offset:0,"stop-opacity":1,"stop-color":"#000000","font-size":16,"font-family":"Helvetica, Arial, sans-serif","text-anchor":"start"}},a.Color=function(e){var i,s;this.r=0,this.g=0,this.b=0,e&&("string"==typeof e?a.regex.isRgb.test(e)?(i=a.regex.rgb.exec(e.replace(a.regex.whitespace,"")),this.r=parseInt(i[1]),this.g=parseInt(i[2]),this.b=parseInt(i[3])):a.regex.isHex.test(e)&&(i=a.regex.hex.exec(4==(s=e).length?["#",s.substring(1,2),s.substring(1,2),s.substring(2,3),s.substring(2,3),s.substring(3,4),s.substring(3,4)].join(""):s),this.r=parseInt(i[1],16),this.g=parseInt(i[2],16),this.b=parseInt(i[3],16)):"object"===t(e)&&(this.r=e.r,this.g=e.g,this.b=e.b))},a.extend(a.Color,{toString:function(){return this.toHex()},toHex:function(){return"#"+g(this.r)+g(this.g)+g(this.b)},toRgb:function(){return"rgb("+[this.r,this.g,this.b].join()+")"},brightness:function(){return this.r/255*.3+this.g/255*.59+this.b/255*.11},morph:function(t){return this.destination=new a.Color(t),this},at:function(t){return this.destination?(t=t<0?0:t>1?1:t,new a.Color({r:~~(this.r+(this.destination.r-this.r)*t),g:~~(this.g+(this.destination.g-this.g)*t),b:~~(this.b+(this.destination.b-this.b)*t)})):this}}),a.Color.test=function(t){return t+="",a.regex.isHex.test(t)||a.regex.isRgb.test(t)},a.Color.isRgb=function(t){return t&&"number"==typeof t.r&&"number"==typeof t.g&&"number"==typeof t.b},a.Color.isColor=function(t){return a.Color.isRgb(t)||a.Color.test(t)},a.Array=function(t,e){0==(t=(t||[]).valueOf()).length&&e&&(t=e.valueOf()),this.value=this.parse(t)},a.extend(a.Array,{toString:function(){return this.value.join(" ")},valueOf:function(){return this.value},parse:function(t){return t=t.valueOf(),Array.isArray(t)?t:this.split(t)}}),a.PointArray=function(t,e){a.Array.call(this,t,e||[[0,0]])},a.PointArray.prototype=new a.Array,a.PointArray.prototype.constructor=a.PointArray;for(var s={M:function(t,e,i){return e.x=i.x=t[0],e.y=i.y=t[1],["M",e.x,e.y]},L:function(t,e){return e.x=t[0],e.y=t[1],["L",t[0],t[1]]},H:function(t,e){return e.x=t[0],["H",t[0]]},V:function(t,e){return e.y=t[0],["V",t[0]]},C:function(t,e){return e.x=t[4],e.y=t[5],["C",t[0],t[1],t[2],t[3],t[4],t[5]]},Q:function(t,e){return e.x=t[2],e.y=t[3],["Q",t[0],t[1],t[2],t[3]]},Z:function(t,e,i){return e.x=i.x,e.y=i.y,["Z"]}},r="mlhvqtcsaz".split(""),n=0,o=r.length;n<o;++n)s[r[n]]=function(t){return function(e,i,a){if("H"==t)e[0]=e[0]+i.x;else if("V"==t)e[0]=e[0]+i.y;else if("A"==t)e[5]=e[5]+i.x,e[6]=e[6]+i.y;else for(var r=0,n=e.length;r<n;++r)e[r]=e[r]+(r%2?i.y:i.x);return s[t](e,i,a)}}(r[n].toUpperCase());a.PathArray=function(t,e){a.Array.call(this,t,e||[["M",0,0]])},a.PathArray.prototype=new a.Array,a.PathArray.prototype.constructor=a.PathArray,a.extend(a.PathArray,{toString:function(){return function(t){for(var e=0,i=t.length,a="";e<i;e++)a+=t[e][0],null!=t[e][1]&&(a+=t[e][1],null!=t[e][2]&&(a+=" ",a+=t[e][2],null!=t[e][3]&&(a+=" ",a+=t[e][3],a+=" ",a+=t[e][4],null!=t[e][5]&&(a+=" ",a+=t[e][5],a+=" ",a+=t[e][6],null!=t[e][7]&&(a+=" ",a+=t[e][7])))));return a+" "}(this.value)},move:function(t,e){var i=this.bbox();return i.x,i.y,this},at:function(t){if(!this.destination)return this;for(var e=this.value,i=this.destination.value,s=[],r=new a.PathArray,n=0,o=e.length;n<o;n++){s[n]=[e[n][0]];for(var l=1,h=e[n].length;l<h;l++)s[n][l]=e[n][l]+(i[n][l]-e[n][l])*t;"A"===s[n][0]&&(s[n][4]=+(0!=s[n][4]),s[n][5]=+(0!=s[n][5]))}return r.value=s,r},parse:function(t){if(t instanceof a.PathArray)return t.valueOf();var e,i={M:2,L:2,H:1,V:1,C:6,S:4,Q:4,T:2,A:7,Z:0};t="string"==typeof t?t.replace(a.regex.numbersWithDots,h).replace(a.regex.pathLetters," $& ").replace(a.regex.hyphen,"$1 -").trim().split(a.regex.delimiter):t.reduce((function(t,e){return[].concat.call(t,e)}),[]);var r=[],n=new a.Point,o=new a.Point,l=0,c=t.length;do{a.regex.isPathLetter.test(t[l])?(e=t[l],++l):"M"==e?e="L":"m"==e&&(e="l"),r.push(s[e].call(null,t.slice(l,l+=i[e.toUpperCase()]).map(parseFloat),n,o))}while(c>l);return r},bbox:function(){return a.parser.draw||a.prepare(),a.parser.path.setAttribute("d",this.toString()),a.parser.path.getBBox()}}),a.Number=a.invent({create:function(t,e){this.value=0,this.unit=e||"","number"==typeof t?this.value=isNaN(t)?0:isFinite(t)?t:t<0?-34e37:34e37:"string"==typeof t?(e=t.match(a.regex.numberAndUnit))&&(this.value=parseFloat(e[1]),"%"==e[5]?this.value/=100:"s"==e[5]&&(this.value*=1e3),this.unit=e[5]):t instanceof a.Number&&(this.value=t.valueOf(),this.unit=t.unit)},extend:{toString:function(){return("%"==this.unit?~~(1e8*this.value)/1e6:"s"==this.unit?this.value/1e3:this.value)+this.unit},toJSON:function(){return this.toString()},valueOf:function(){return this.value},plus:function(t){return t=new a.Number(t),new a.Number(this+t,this.unit||t.unit)},minus:function(t){return t=new a.Number(t),new a.Number(this-t,this.unit||t.unit)},times:function(t){return t=new a.Number(t),new a.Number(this*t,this.unit||t.unit)},divide:function(t){return t=new a.Number(t),new a.Number(this/t,this.unit||t.unit)},to:function(t){var e=new a.Number(this);return"string"==typeof t&&(e.unit=t),e},morph:function(t){return this.destination=new a.Number(t),t.relative&&(this.destination.value+=this.value),this},at:function(t){return this.destination?new a.Number(this.destination).minus(this).times(t).plus(this):this}}}),a.Element=a.invent({create:function(t){this._stroke=a.defaults.attrs.stroke,this._event=null,this.dom={},(this.node=t)&&(this.type=t.nodeName,this.node.instance=this,this._stroke=t.getAttribute("stroke")||this._stroke)},extend:{x:function(t){return this.attr("x",t)},y:function(t){return this.attr("y",t)},cx:function(t){return null==t?this.x()+this.width()/2:this.x(t-this.width()/2)},cy:function(t){return null==t?this.y()+this.height()/2:this.y(t-this.height()/2)},move:function(t,e){return this.x(t).y(e)},center:function(t,e){return this.cx(t).cy(e)},width:function(t){return this.attr("width",t)},height:function(t){return this.attr("height",t)},size:function(t,e){var i=u(this,t,e);return this.width(new a.Number(i.width)).height(new a.Number(i.height))},clone:function(t){this.writeDataToDom();var e=x(this.node.cloneNode(!0));return t?t.add(e):this.after(e),e},remove:function(){return this.parent()&&this.parent().removeElement(this),this},replace:function(t){return this.after(t).remove(),t},addTo:function(t){return t.put(this)},putIn:function(t){return t.add(this)},id:function(t){return this.attr("id",t)},show:function(){return this.style("display","")},hide:function(){return this.style("display","none")},visible:function(){return"none"!=this.style("display")},toString:function(){return this.attr("id")},classes:function(){var t=this.attr("class");return null==t?[]:t.trim().split(a.regex.delimiter)},hasClass:function(t){return-1!=this.classes().indexOf(t)},addClass:function(t){if(!this.hasClass(t)){var e=this.classes();e.push(t),this.attr("class",e.join(" "))}return this},removeClass:function(t){return this.hasClass(t)&&this.attr("class",this.classes().filter((function(e){return e!=t})).join(" ")),this},toggleClass:function(t){return this.hasClass(t)?this.removeClass(t):this.addClass(t)},reference:function(t){return a.get(this.attr(t))},parent:function(t){var i=this;if(!i.node.parentNode)return null;if(i=a.adopt(i.node.parentNode),!t)return i;for(;i&&i.node instanceof e.SVGElement;){if("string"==typeof t?i.matches(t):i instanceof t)return i;if(!i.node.parentNode||"#document"==i.node.parentNode.nodeName)return null;i=a.adopt(i.node.parentNode)}},doc:function(){return this instanceof a.Doc?this:this.parent(a.Doc)},parents:function(t){var e=[],i=this;do{if(!(i=i.parent(t))||!i.node)break;e.push(i)}while(i.parent);return e},matches:function(t){return function(t,e){return(t.matches||t.matchesSelector||t.msMatchesSelector||t.mozMatchesSelector||t.webkitMatchesSelector||t.oMatchesSelector).call(t,e)}(this.node,t)},native:function(){return this.node},svg:function(t){var e=i.createElement("svg");if(!(t&&this instanceof a.Parent))return e.appendChild(t=i.createElement("svg")),this.writeDataToDom(),t.appendChild(this.node.cloneNode(!0)),e.innerHTML.replace(/^<svg>/,"").replace(/<\/svg>$/,"");e.innerHTML="<svg>"+t.replace(/\n/,"").replace(/<([\w:-]+)([^<]+?)\/>/g,"<$1$2></$1>")+"</svg>";for(var s=0,r=e.firstChild.childNodes.length;s<r;s++)this.node.appendChild(e.firstChild.firstChild);return this},writeDataToDom:function(){return(this.each||this.lines)&&(this.each?this:this.lines()).each((function(){this.writeDataToDom()})),this.node.removeAttribute("svgjs:data"),Object.keys(this.dom).length&&this.node.setAttribute("svgjs:data",JSON.stringify(this.dom)),this},setData:function(t){return this.dom=t,this},is:function(t){return function(t,e){return t instanceof e}(this,t)}}}),a.easing={"-":function(t){return t},"<>":function(t){return-Math.cos(t*Math.PI)/2+.5},">":function(t){return Math.sin(t*Math.PI/2)},"<":function(t){return 1-Math.cos(t*Math.PI/2)}},a.morph=function(t){return function(e,i){return new a.MorphObj(e,i).at(t)}},a.Situation=a.invent({create:function(t){this.init=!1,this.reversed=!1,this.reversing=!1,this.duration=new a.Number(t.duration).valueOf(),this.delay=new a.Number(t.delay).valueOf(),this.start=+new Date+this.delay,this.finish=this.start+this.duration,this.ease=t.ease,this.loop=0,this.loops=!1,this.animations={},this.attrs={},this.styles={},this.transforms=[],this.once={}}}),a.FX=a.invent({create:function(t){this._target=t,this.situations=[],this.active=!1,this.situation=null,this.paused=!1,this.lastPos=0,this.pos=0,this.absPos=0,this._speed=1},extend:{animate:function(e,i,s){"object"===t(e)&&(i=e.ease,s=e.delay,e=e.duration);var r=new a.Situation({duration:e||1e3,delay:s||0,ease:a.easing[i||"-"]||i});return this.queue(r),this},target:function(t){return t&&t instanceof a.Element?(this._target=t,this):this._target},timeToAbsPos:function(t){return(t-this.situation.start)/(this.situation.duration/this._speed)},absPosToTime:function(t){return this.situation.duration/this._speed*t+this.situation.start},startAnimFrame:function(){this.stopAnimFrame(),this.animationFrame=e.requestAnimationFrame(function(){this.step()}.bind(this))},stopAnimFrame:function(){e.cancelAnimationFrame(this.animationFrame)},start:function(){return!this.active&&this.situation&&(this.active=!0,this.startCurrent()),this},startCurrent:function(){return this.situation.start=+new Date+this.situation.delay/this._speed,this.situation.finish=this.situation.start+this.situation.duration/this._speed,this.initAnimations().step()},queue:function(t){return("function"==typeof t||t instanceof a.Situation)&&this.situations.push(t),this.situation||(this.situation=this.situations.shift()),this},dequeue:function(){return this.stop(),this.situation=this.situations.shift(),this.situation&&(this.situation instanceof a.Situation?this.start():this.situation.call(this)),this},initAnimations:function(){var t,e=this.situation;if(e.init)return this;for(var i in e.animations){t=this.target()[i](),Array.isArray(t)||(t=[t]),Array.isArray(e.animations[i])||(e.animations[i]=[e.animations[i]]);for(var s=t.length;s--;)e.animations[i][s]instanceof a.Number&&(t[s]=new a.Number(t[s])),e.animations[i][s]=t[s].morph(e.animations[i][s])}for(var i in e.attrs)e.attrs[i]=new a.MorphObj(this.target().attr(i),e.attrs[i]);for(var i in e.styles)e.styles[i]=new a.MorphObj(this.target().style(i),e.styles[i]);return e.initialTransformation=this.target().matrixify(),e.init=!0,this},clearQueue:function(){return this.situations=[],this},clearCurrent:function(){return this.situation=null,this},stop:function(t,e){var i=this.active;return this.active=!1,e&&this.clearQueue(),t&&this.situation&&(!i&&this.startCurrent(),this.atEnd()),this.stopAnimFrame(),this.clearCurrent()},after:function(t){var e=this.last();return this.target().on("finished.fx",(function i(a){a.detail.situation==e&&(t.call(this,e),this.off("finished.fx",i))})),this._callStart()},during:function(t){var e=this.last(),i=function(i){i.detail.situation==e&&t.call(this,i.detail.pos,a.morph(i.detail.pos),i.detail.eased,e)};return this.target().off("during.fx",i).on("during.fx",i),this.after((function(){this.off("during.fx",i)})),this._callStart()},afterAll:function(t){var e=function e(i){t.call(this),this.off("allfinished.fx",e)};return this.target().off("allfinished.fx",e).on("allfinished.fx",e),this._callStart()},last:function(){return this.situations.length?this.situations[this.situations.length-1]:this.situation},add:function(t,e,i){return this.last()[i||"animations"][t]=e,this._callStart()},step:function(t){var e,i,a;t||(this.absPos=this.timeToAbsPos(+new Date)),!1!==this.situation.loops?(e=Math.max(this.absPos,0),i=Math.floor(e),!0===this.situation.loops||i<this.situation.loops?(this.pos=e-i,a=this.situation.loop,this.situation.loop=i):(this.absPos=this.situation.loops,this.pos=1,a=this.situation.loop-1,this.situation.loop=this.situation.loops),this.situation.reversing&&(this.situation.reversed=this.situation.reversed!=Boolean((this.situation.loop-a)%2))):(this.absPos=Math.min(this.absPos,1),this.pos=this.absPos),this.pos<0&&(this.pos=0),this.situation.reversed&&(this.pos=1-this.pos);var s=this.situation.ease(this.pos);for(var r in this.situation.once)r>this.lastPos&&r<=s&&(this.situation.once[r].call(this.target(),this.pos,s),delete this.situation.once[r]);return this.active&&this.target().fire("during",{pos:this.pos,eased:s,fx:this,situation:this.situation}),this.situation?(this.eachAt(),1==this.pos&&!this.situation.reversed||this.situation.reversed&&0==this.pos?(this.stopAnimFrame(),this.target().fire("finished",{fx:this,situation:this.situation}),this.situations.length||(this.target().fire("allfinished"),this.situations.length||(this.target().off(".fx"),this.active=!1)),this.active?this.dequeue():this.clearCurrent()):!this.paused&&this.active&&this.startAnimFrame(),this.lastPos=s,this):this},eachAt:function(){var t,e=this,i=this.target(),s=this.situation;for(var r in s.animations)t=[].concat(s.animations[r]).map((function(t){return"string"!=typeof t&&t.at?t.at(s.ease(e.pos),e.pos):t})),i[r].apply(i,t);for(var r in s.attrs)t=[r].concat(s.attrs[r]).map((function(t){return"string"!=typeof t&&t.at?t.at(s.ease(e.pos),e.pos):t})),i.attr.apply(i,t);for(var r in s.styles)t=[r].concat(s.styles[r]).map((function(t){return"string"!=typeof t&&t.at?t.at(s.ease(e.pos),e.pos):t})),i.style.apply(i,t);if(s.transforms.length){t=s.initialTransformation,r=0;for(var n=s.transforms.length;r<n;r++){var o=s.transforms[r];o instanceof a.Matrix?t=o.relative?t.multiply((new a.Matrix).morph(o).at(s.ease(this.pos))):t.morph(o).at(s.ease(this.pos)):(o.relative||o.undo(t.extract()),t=t.multiply(o.at(s.ease(this.pos))))}i.matrix(t)}return this},once:function(t,e,i){var a=this.last();return i||(t=a.ease(t)),a.once[t]=e,this},_callStart:function(){return setTimeout(function(){this.start()}.bind(this),0),this}},parent:a.Element,construct:{animate:function(t,e,i){return(this.fx||(this.fx=new a.FX(this))).animate(t,e,i)},delay:function(t){return(this.fx||(this.fx=new a.FX(this))).delay(t)},stop:function(t,e){return this.fx&&this.fx.stop(t,e),this},finish:function(){return this.fx&&this.fx.finish(),this}}}),a.MorphObj=a.invent({create:function(t,e){return a.Color.isColor(e)?new a.Color(t).morph(e):a.regex.delimiter.test(t)?a.regex.pathLetters.test(t)?new a.PathArray(t).morph(e):new a.Array(t).morph(e):a.regex.numberAndUnit.test(e)?new a.Number(t).morph(e):(this.value=t,void(this.destination=e))},extend:{at:function(t,e){return e<1?this.value:this.destination},valueOf:function(){return this.value}}}),a.extend(a.FX,{attr:function(e,i,a){if("object"===t(e))for(var s in e)this.attr(s,e[s]);else this.add(e,i,"attrs");return this},plot:function(t,e,i,a){return 4==arguments.length?this.plot([t,e,i,a]):this.add("plot",new(this.target().morphArray)(t))}}),a.Box=a.invent({create:function(e,i,s,r){if(!("object"!==t(e)||e instanceof a.Element))return a.Box.call(this,null!=e.left?e.left:e.x,null!=e.top?e.top:e.y,e.width,e.height);4==arguments.length&&(this.x=e,this.y=i,this.width=s,this.height=r),b(this)}}),a.BBox=a.invent({create:function(t){if(a.Box.apply(this,[].slice.call(arguments)),t instanceof a.Element){var e;try{if(!i.documentElement.contains){for(var s=t.node;s.parentNode;)s=s.parentNode;if(s!=i)throw new Error("Element not in the dom")}e=t.node.getBBox()}catch(i){if(t instanceof a.Shape){a.parser.draw||a.prepare();var r=t.clone(a.parser.draw.instance).show();e=r.node.getBBox(),r.remove()}else e={x:t.node.clientLeft,y:t.node.clientTop,width:t.node.clientWidth,height:t.node.clientHeight}}a.Box.call(this,e)}},inherit:a.Box,parent:a.Element,construct:{bbox:function(){return new a.BBox(this)}}}),a.BBox.prototype.constructor=a.BBox,a.Matrix=a.invent({create:function(e){var i=p([1,0,0,1,0,0]);e=e instanceof a.Element?e.matrixify():"string"==typeof e?p(e.split(a.regex.delimiter).map(parseFloat)):6==arguments.length?p([].slice.call(arguments)):Array.isArray(e)?p(e):"object"===t(e)?e:i;for(var s=v.length-1;s>=0;--s)this[v[s]]=null!=e[v[s]]?e[v[s]]:i[v[s]]},extend:{extract:function(){var t=f(this,0,1),e=(f(this,1,0),180/Math.PI*Math.atan2(t.y,t.x)-90);return{x:this.e,y:this.f,transformedX:(this.e*Math.cos(e*Math.PI/180)+this.f*Math.sin(e*Math.PI/180))/Math.sqrt(this.a*this.a+this.b*this.b),transformedY:(this.f*Math.cos(e*Math.PI/180)+this.e*Math.sin(-e*Math.PI/180))/Math.sqrt(this.c*this.c+this.d*this.d),rotation:e,a:this.a,b:this.b,c:this.c,d:this.d,e:this.e,f:this.f,matrix:new a.Matrix(this)}},clone:function(){return new a.Matrix(this)},morph:function(t){return this.destination=new a.Matrix(t),this},multiply:function(t){return new a.Matrix(this.native().multiply(function(t){return t instanceof a.Matrix||(t=new a.Matrix(t)),t}(t).native()))},inverse:function(){return new a.Matrix(this.native().inverse())},translate:function(t,e){return new a.Matrix(this.native().translate(t||0,e||0))},native:function(){for(var t=a.parser.native.createSVGMatrix(),e=v.length-1;e>=0;e--)t[v[e]]=this[v[e]];return t},toString:function(){return"matrix("+m(this.a)+","+m(this.b)+","+m(this.c)+","+m(this.d)+","+m(this.e)+","+m(this.f)+")"}},parent:a.Element,construct:{ctm:function(){return new a.Matrix(this.node.getCTM())},screenCTM:function(){if(this instanceof a.Nested){var t=this.rect(1,1),e=t.node.getScreenCTM();return t.remove(),new a.Matrix(e)}return new a.Matrix(this.node.getScreenCTM())}}}),a.Point=a.invent({create:function(e,i){var a;a=Array.isArray(e)?{x:e[0],y:e[1]}:"object"===t(e)?{x:e.x,y:e.y}:null!=e?{x:e,y:null!=i?i:e}:{x:0,y:0},this.x=a.x,this.y=a.y},extend:{clone:function(){return new a.Point(this)},morph:function(t,e){return this.destination=new a.Point(t,e),this}}}),a.extend(a.Element,{point:function(t,e){return new a.Point(t,e).transform(this.screenCTM().inverse())}}),a.extend(a.Element,{attr:function(e,i,s){if(null==e){for(e={},s=(i=this.node.attributes).length-1;s>=0;s--)e[i[s].nodeName]=a.regex.isNumber.test(i[s].nodeValue)?parseFloat(i[s].nodeValue):i[s].nodeValue;return e}if("object"===t(e))for(var r in e)this.attr(r,e[r]);else if(null===i)this.node.removeAttribute(e);else{if(null==i)return null==(i=this.node.getAttribute(e))?a.defaults.attrs[e]:a.regex.isNumber.test(i)?parseFloat(i):i;"stroke-width"==e?this.attr("stroke",parseFloat(i)>0?this._stroke:null):"stroke"==e&&(this._stroke=i),"fill"!=e&&"stroke"!=e||(a.regex.isImage.test(i)&&(i=this.doc().defs().image(i,0,0)),i instanceof a.Image&&(i=this.doc().defs().pattern(0,0,(function(){this.add(i)})))),"number"==typeof i?i=new a.Number(i):a.Color.isColor(i)?i=new a.Color(i):Array.isArray(i)&&(i=new a.Array(i)),"leading"==e?this.leading&&this.leading(i):"string"==typeof s?this.node.setAttributeNS(s,e,i.toString()):this.node.setAttribute(e,i.toString()),!this.rebuild||"font-size"!=e&&"x"!=e||this.rebuild(e,i)}return this}}),a.extend(a.Element,{transform:function(e,i){var s;return"object"!==t(e)?(s=new a.Matrix(this).extract(),"string"==typeof e?s[e]:s):(s=new a.Matrix(this),i=!!i||!!e.relative,null!=e.a&&(s=i?s.multiply(new a.Matrix(e)):new a.Matrix(e)),this.attr("transform",s))}}),a.extend(a.Element,{untransform:function(){return this.attr("transform",null)},matrixify:function(){return(this.attr("transform")||"").split(a.regex.transforms).slice(0,-1).map((function(t){var e=t.trim().split("(");return[e[0],e[1].split(a.regex.delimiter).map((function(t){return parseFloat(t)}))]})).reduce((function(t,e){return"matrix"==e[0]?t.multiply(p(e[1])):t[e[0]].apply(t,e[1])}),new a.Matrix)},toParent:function(t){if(this==t)return this;var e=this.screenCTM(),i=t.screenCTM().inverse();return this.addTo(t).untransform().transform(i.multiply(e)),this},toDoc:function(){return this.toParent(this.doc())}}),a.Transformation=a.invent({create:function(e,i){if(arguments.length>1&&"boolean"!=typeof i)return this.constructor.call(this,[].slice.call(arguments));if(Array.isArray(e))for(var a=0,s=this.arguments.length;a<s;++a)this[this.arguments[a]]=e[a];else if("object"===t(e))for(a=0,s=this.arguments.length;a<s;++a)this[this.arguments[a]]=e[this.arguments[a]];this.inversed=!1,!0===i&&(this.inversed=!0)}}),a.Translate=a.invent({parent:a.Matrix,inherit:a.Transformation,create:function(t,e){this.constructor.apply(this,[].slice.call(arguments))},extend:{arguments:["transformedX","transformedY"],method:"translate"}}),a.extend(a.Element,{style:function(e,i){if(0==arguments.length)return this.node.style.cssText||"";if(arguments.length<2)if("object"===t(e))for(var s in e)this.style(s,e[s]);else{if(!a.regex.isCss.test(e))return this.node.style[c(e)];for(e=e.split(/\s*;\s*/).filter((function(t){return!!t})).map((function(t){return t.split(/\s*:\s*/)}));i=e.pop();)this.style(i[0],i[1])}else this.node.style[c(e)]=null===i||a.regex.isBlank.test(i)?"":i;return this}}),a.Parent=a.invent({create:function(t){this.constructor.call(this,t)},inherit:a.Element,extend:{children:function(){return a.utils.map(a.utils.filterSVGElements(this.node.childNodes),(function(t){return a.adopt(t)}))},add:function(t,e){return null==e?this.node.appendChild(t.node):t.node!=this.node.childNodes[e]&&this.node.insertBefore(t.node,this.node.childNodes[e]),this},put:function(t,e){return this.add(t,e),t},has:function(t){return this.index(t)>=0},index:function(t){return[].slice.call(this.node.childNodes).indexOf(t.node)},get:function(t){return a.adopt(this.node.childNodes[t])},first:function(){return this.get(0)},last:function(){return this.get(this.node.childNodes.length-1)},each:function(t,e){for(var i=this.children(),s=0,r=i.length;s<r;s++)i[s]instanceof a.Element&&t.apply(i[s],[s,i]),e&&i[s]instanceof a.Container&&i[s].each(t,e);return this},removeElement:function(t){return this.node.removeChild(t.node),this},clear:function(){for(;this.node.hasChildNodes();)this.node.removeChild(this.node.lastChild);return delete this._defs,this},defs:function(){return this.doc().defs()}}}),a.extend(a.Parent,{ungroup:function(t,e){return 0===e||this instanceof a.Defs||this.node==a.parser.draw?this:(t=t||(this instanceof a.Doc?this:this.parent(a.Parent)),e=e||1/0,this.each((function(){return this instanceof a.Defs?this:this instanceof a.Parent?this.ungroup(t,e-1):this.toParent(t)})),this.node.firstChild||this.remove(),this)},flatten:function(t,e){return this.ungroup(t,e)}}),a.Container=a.invent({create:function(t){this.constructor.call(this,t)},inherit:a.Parent}),a.ViewBox=a.invent({parent:a.Container,construct:{}}),["click","dblclick","mousedown","mouseup","mouseover","mouseout","mousemove","touchstart","touchmove","touchleave","touchend","touchcancel"].forEach((function(t){a.Element.prototype[t]=function(e){return a.on(this.node,t,e),this}})),a.listeners=[],a.handlerMap=[],a.listenerId=0,a.on=function(t,e,i,s,r){var n=i.bind(s||t.instance||t),o=(a.handlerMap.indexOf(t)+1||a.handlerMap.push(t))-1,l=e.split(".")[0],h=e.split(".")[1]||"*";a.listeners[o]=a.listeners[o]||{},a.listeners[o][l]=a.listeners[o][l]||{},a.listeners[o][l][h]=a.listeners[o][l][h]||{},i._svgjsListenerId||(i._svgjsListenerId=++a.listenerId),a.listeners[o][l][h][i._svgjsListenerId]=n,t.addEventListener(l,n,r||!1)},a.off=function(t,e,i){var s=a.handlerMap.indexOf(t),r=e&&e.split(".")[0],n=e&&e.split(".")[1],o="";if(-1!=s)if(i){if("function"==typeof i&&(i=i._svgjsListenerId),!i)return;a.listeners[s][r]&&a.listeners[s][r][n||"*"]&&(t.removeEventListener(r,a.listeners[s][r][n||"*"][i],!1),delete a.listeners[s][r][n||"*"][i])}else if(n&&r){if(a.listeners[s][r]&&a.listeners[s][r][n]){for(var l in a.listeners[s][r][n])a.off(t,[r,n].join("."),l);delete a.listeners[s][r][n]}}else if(n)for(var h in a.listeners[s])for(var o in a.listeners[s][h])n===o&&a.off(t,[h,n].join("."));else if(r){if(a.listeners[s][r]){for(var o in a.listeners[s][r])a.off(t,[r,o].join("."));delete a.listeners[s][r]}}else{for(var h in a.listeners[s])a.off(t,h);delete a.listeners[s],delete a.handlerMap[s]}},a.extend(a.Element,{on:function(t,e,i,s){return a.on(this.node,t,e,i,s),this},off:function(t,e){return a.off(this.node,t,e),this},fire:function(t,i){return t instanceof e.Event?this.node.dispatchEvent(t):this.node.dispatchEvent(t=new a.CustomEvent(t,{detail:i,cancelable:!0})),this._event=t,this},event:function(){return this._event}}),a.Defs=a.invent({create:"defs",inherit:a.Container}),a.G=a.invent({create:"g",inherit:a.Container,extend:{x:function(t){return null==t?this.transform("x"):this.transform({x:t-this.x()},!0)}},construct:{group:function(){return this.put(new a.G)}}}),a.Doc=a.invent({create:function(t){t&&("svg"==(t="string"==typeof t?i.getElementById(t):t).nodeName?this.constructor.call(this,t):(this.constructor.call(this,a.create("svg")),t.appendChild(this.node),this.size("100%","100%")),this.namespace().defs())},inherit:a.Container,extend:{namespace:function(){return this.attr({xmlns:a.ns,version:"1.1"}).attr("xmlns:xlink",a.xlink,a.xmlns).attr("xmlns:svgjs",a.svgjs,a.xmlns)},defs:function(){var t;return this._defs||((t=this.node.getElementsByTagName("defs")[0])?this._defs=a.adopt(t):this._defs=new a.Defs,this.node.appendChild(this._defs.node)),this._defs},parent:function(){return this.node.parentNode&&"#document"!=this.node.parentNode.nodeName?this.node.parentNode:null},remove:function(){return this.parent()&&this.parent().removeChild(this.node),this},clear:function(){for(;this.node.hasChildNodes();)this.node.removeChild(this.node.lastChild);return delete this._defs,a.parser.draw&&!a.parser.draw.parentNode&&this.node.appendChild(a.parser.draw),this},clone:function(t){this.writeDataToDom();var e=this.node,i=x(e.cloneNode(!0));return t?(t.node||t).appendChild(i.node):e.parentNode.insertBefore(i.node,e.nextSibling),i}}}),a.extend(a.Element,{}),a.Gradient=a.invent({create:function(t){this.constructor.call(this,a.create(t+"Gradient")),this.type=t},inherit:a.Container,extend:{at:function(t,e,i){return this.put(new a.Stop).update(t,e,i)},update:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this},fill:function(){return"url(#"+this.id()+")"},toString:function(){return this.fill()},attr:function(t,e,i){return"transform"==t&&(t="gradientTransform"),a.Container.prototype.attr.call(this,t,e,i)}},construct:{gradient:function(t,e){return this.defs().gradient(t,e)}}}),a.extend(a.Gradient,a.FX,{from:function(t,e){return"radial"==(this._target||this).type?this.attr({fx:new a.Number(t),fy:new a.Number(e)}):this.attr({x1:new a.Number(t),y1:new a.Number(e)})},to:function(t,e){return"radial"==(this._target||this).type?this.attr({cx:new a.Number(t),cy:new a.Number(e)}):this.attr({x2:new a.Number(t),y2:new a.Number(e)})}}),a.extend(a.Defs,{gradient:function(t,e){return this.put(new a.Gradient(t)).update(e)}}),a.Stop=a.invent({create:"stop",inherit:a.Element,extend:{update:function(t){return("number"==typeof t||t instanceof a.Number)&&(t={offset:arguments[0],color:arguments[1],opacity:arguments[2]}),null!=t.opacity&&this.attr("stop-opacity",t.opacity),null!=t.color&&this.attr("stop-color",t.color),null!=t.offset&&this.attr("offset",new a.Number(t.offset)),this}}}),a.Pattern=a.invent({create:"pattern",inherit:a.Container,extend:{fill:function(){return"url(#"+this.id()+")"},update:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this},toString:function(){return this.fill()},attr:function(t,e,i){return"transform"==t&&(t="patternTransform"),a.Container.prototype.attr.call(this,t,e,i)}},construct:{pattern:function(t,e,i){return this.defs().pattern(t,e,i)}}}),a.extend(a.Defs,{pattern:function(t,e,i){return this.put(new a.Pattern).update(i).attr({x:0,y:0,width:t,height:e,patternUnits:"userSpaceOnUse"})}}),a.Shape=a.invent({create:function(t){this.constructor.call(this,t)},inherit:a.Element}),a.Symbol=a.invent({create:"symbol",inherit:a.Container,construct:{symbol:function(){return this.put(new a.Symbol)}}}),a.Use=a.invent({create:"use",inherit:a.Shape,extend:{element:function(t,e){return this.attr("href",(e||"")+"#"+t,a.xlink)}},construct:{use:function(t,e){return this.put(new a.Use).element(t,e)}}}),a.Rect=a.invent({create:"rect",inherit:a.Shape,construct:{rect:function(t,e){return this.put(new a.Rect).size(t,e)}}}),a.Circle=a.invent({create:"circle",inherit:a.Shape,construct:{circle:function(t){return this.put(new a.Circle).rx(new a.Number(t).divide(2)).move(0,0)}}}),a.extend(a.Circle,a.FX,{rx:function(t){return this.attr("r",t)},ry:function(t){return this.rx(t)}}),a.Ellipse=a.invent({create:"ellipse",inherit:a.Shape,construct:{ellipse:function(t,e){return this.put(new a.Ellipse).size(t,e).move(0,0)}}}),a.extend(a.Ellipse,a.Rect,a.FX,{rx:function(t){return this.attr("rx",t)},ry:function(t){return this.attr("ry",t)}}),a.extend(a.Circle,a.Ellipse,{x:function(t){return null==t?this.cx()-this.rx():this.cx(t+this.rx())},y:function(t){return null==t?this.cy()-this.ry():this.cy(t+this.ry())},cx:function(t){return null==t?this.attr("cx"):this.attr("cx",t)},cy:function(t){return null==t?this.attr("cy"):this.attr("cy",t)},width:function(t){return null==t?2*this.rx():this.rx(new a.Number(t).divide(2))},height:function(t){return null==t?2*this.ry():this.ry(new a.Number(t).divide(2))},size:function(t,e){var i=u(this,t,e);return this.rx(new a.Number(i.width).divide(2)).ry(new a.Number(i.height).divide(2))}}),a.Line=a.invent({create:"line",inherit:a.Shape,extend:{array:function(){return new a.PointArray([[this.attr("x1"),this.attr("y1")],[this.attr("x2"),this.attr("y2")]])},plot:function(t,e,i,s){return null==t?this.array():(t=void 0!==e?{x1:t,y1:e,x2:i,y2:s}:new a.PointArray(t).toLine(),this.attr(t))},move:function(t,e){return this.attr(this.array().move(t,e).toLine())},size:function(t,e){var i=u(this,t,e);return this.attr(this.array().size(i.width,i.height).toLine())}},construct:{line:function(t,e,i,s){return a.Line.prototype.plot.apply(this.put(new a.Line),null!=t?[t,e,i,s]:[0,0,0,0])}}}),a.Polyline=a.invent({create:"polyline",inherit:a.Shape,construct:{polyline:function(t){return this.put(new a.Polyline).plot(t||new a.PointArray)}}}),a.Polygon=a.invent({create:"polygon",inherit:a.Shape,construct:{polygon:function(t){return this.put(new a.Polygon).plot(t||new a.PointArray)}}}),a.extend(a.Polyline,a.Polygon,{array:function(){return this._array||(this._array=new a.PointArray(this.attr("points")))},plot:function(t){return null==t?this.array():this.clear().attr("points","string"==typeof t?t:this._array=new a.PointArray(t))},clear:function(){return delete this._array,this},move:function(t,e){return this.attr("points",this.array().move(t,e))},size:function(t,e){var i=u(this,t,e);return this.attr("points",this.array().size(i.width,i.height))}}),a.extend(a.Line,a.Polyline,a.Polygon,{morphArray:a.PointArray,x:function(t){return null==t?this.bbox().x:this.move(t,this.bbox().y)},y:function(t){return null==t?this.bbox().y:this.move(this.bbox().x,t)},width:function(t){var e=this.bbox();return null==t?e.width:this.size(t,e.height)},height:function(t){var e=this.bbox();return null==t?e.height:this.size(e.width,t)}}),a.Path=a.invent({create:"path",inherit:a.Shape,extend:{morphArray:a.PathArray,array:function(){return this._array||(this._array=new a.PathArray(this.attr("d")))},plot:function(t){return null==t?this.array():this.clear().attr("d","string"==typeof t?t:this._array=new a.PathArray(t))},clear:function(){return delete this._array,this}},construct:{path:function(t){return this.put(new a.Path).plot(t||new a.PathArray)}}}),a.Image=a.invent({create:"image",inherit:a.Shape,extend:{load:function(t){if(!t)return this;var i=this,s=new e.Image;return a.on(s,"load",(function(){a.off(s);var e=i.parent(a.Pattern);null!==e&&(0==i.width()&&0==i.height()&&i.size(s.width,s.height),e&&0==e.width()&&0==e.height()&&e.size(i.width(),i.height()),"function"==typeof i._loaded&&i._loaded.call(i,{width:s.width,height:s.height,ratio:s.width/s.height,url:t}))})),a.on(s,"error",(function(t){a.off(s),"function"==typeof i._error&&i._error.call(i,t)})),this.attr("href",s.src=this.src=t,a.xlink)},loaded:function(t){return this._loaded=t,this},error:function(t){return this._error=t,this}},construct:{image:function(t,e,i){return this.put(new a.Image).load(t).size(e||0,i||e||0)}}}),a.Text=a.invent({create:function(){this.constructor.call(this,a.create("text")),this.dom.leading=new a.Number(1.3),this._rebuild=!0,this._build=!1,this.attr("font-family",a.defaults.attrs["font-family"])},inherit:a.Shape,extend:{x:function(t){return null==t?this.attr("x"):this.attr("x",t)},text:function(t){if(void 0===t){t="";for(var e=this.node.childNodes,i=0,s=e.length;i<s;++i)0!=i&&3!=e[i].nodeType&&1==a.adopt(e[i]).dom.newLined&&(t+="\n"),t+=e[i].textContent;return t}if(this.clear().build(!0),"function"==typeof t)t.call(this,this);else{i=0;for(var r=(t=t.split("\n")).length;i<r;i++)this.tspan(t[i]).newLine()}return this.build(!1).rebuild()},size:function(t){return this.attr("font-size",t).rebuild()},leading:function(t){return null==t?this.dom.leading:(this.dom.leading=new a.Number(t),this.rebuild())},lines:function(){var t=(this.textPath&&this.textPath()||this).node,e=a.utils.map(a.utils.filterSVGElements(t.childNodes),(function(t){return a.adopt(t)}));return new a.Set(e)},rebuild:function(t){if("boolean"==typeof t&&(this._rebuild=t),this._rebuild){var e=this,i=0,s=this.dom.leading*new a.Number(this.attr("font-size"));this.lines().each((function(){this.dom.newLined&&(e.textPath()||this.attr("x",e.attr("x")),"\n"==this.text()?i+=s:(this.attr("dy",s+i),i=0))})),this.fire("rebuild")}return this},build:function(t){return this._build=!!t,this},setData:function(t){return this.dom=t,this.dom.leading=new a.Number(t.leading||1.3),this}},construct:{text:function(t){return this.put(new a.Text).text(t)},plain:function(t){return this.put(new a.Text).plain(t)}}}),a.Tspan=a.invent({create:"tspan",inherit:a.Shape,extend:{text:function(t){return null==t?this.node.textContent+(this.dom.newLined?"\n":""):("function"==typeof t?t.call(this,this):this.plain(t),this)},dx:function(t){return this.attr("dx",t)},dy:function(t){return this.attr("dy",t)},newLine:function(){var t=this.parent(a.Text);return this.dom.newLined=!0,this.dy(t.dom.leading*t.attr("font-size")).attr("x",t.x())}}}),a.extend(a.Text,a.Tspan,{plain:function(t){return!1===this._build&&this.clear(),this.node.appendChild(i.createTextNode(t)),this},tspan:function(t){var e=(this.textPath&&this.textPath()||this).node,i=new a.Tspan;return!1===this._build&&this.clear(),e.appendChild(i.node),i.text(t)},clear:function(){for(var t=(this.textPath&&this.textPath()||this).node;t.hasChildNodes();)t.removeChild(t.lastChild);return this},length:function(){return this.node.getComputedTextLength()}}),a.TextPath=a.invent({create:"textPath",inherit:a.Parent,parent:a.Text,construct:{morphArray:a.PathArray,array:function(){var t=this.track();return t?t.array():null},plot:function(t){var e=this.track(),i=null;return e&&(i=e.plot(t)),null==t?i:this},track:function(){var t=this.textPath();if(t)return t.reference("href")},textPath:function(){if(this.node.firstChild&&"textPath"==this.node.firstChild.nodeName)return a.adopt(this.node.firstChild)}}}),a.Nested=a.invent({create:function(){this.constructor.call(this,a.create("svg")),this.style("overflow","visible")},inherit:a.Container,construct:{nested:function(){return this.put(new a.Nested)}}});var l={stroke:["color","width","opacity","linecap","linejoin","miterlimit","dasharray","dashoffset"],fill:["color","opacity","rule"],prefix:function(t,e){return"color"==e?t:t+"-"+e}};function h(t,e,i,s){return i+s.replace(a.regex.dots," .")}function c(t){return t.toLowerCase().replace(/-(.)/g,(function(t,e){return e.toUpperCase()}))}function d(t){return t.charAt(0).toUpperCase()+t.slice(1)}function g(t){var e=t.toString(16);return 1==e.length?"0"+e:e}function u(t,e,i){if(null==e||null==i){var a=t.bbox();null==e?e=a.width/a.height*i:null==i&&(i=a.height/a.width*e)}return{width:e,height:i}}function f(t,e,i){return{x:e*t.a+i*t.c+0,y:e*t.b+i*t.d+0}}function p(t){return{a:t[0],b:t[1],c:t[2],d:t[3],e:t[4],f:t[5]}}function x(t){for(var i=t.childNodes.length-1;i>=0;i--)t.childNodes[i]instanceof e.SVGElement&&x(t.childNodes[i]);return a.adopt(t).id(a.eid(t.nodeName))}function b(t){return null==t.x&&(t.x=0,t.y=0,t.width=0,t.height=0),t.w=t.width,t.h=t.height,t.x2=t.x+t.width,t.y2=t.y+t.height,t.cx=t.x+t.width/2,t.cy=t.y+t.height/2,t}function m(t){return Math.abs(t)>1e-37?t:0}["fill","stroke"].forEach((function(t){var e={};e[t]=function(e){if(void 0===e)return this;if("string"==typeof e||a.Color.isRgb(e)||e&&"function"==typeof e.fill)this.attr(t,e);else for(var i=l[t].length-1;i>=0;i--)null!=e[l[t][i]]&&this.attr(l.prefix(t,l[t][i]),e[l[t][i]]);return this},a.extend(a.Element,a.FX,e)})),a.extend(a.Element,a.FX,{translate:function(t,e){return this.transform({x:t,y:e})},matrix:function(t){return this.attr("transform",new a.Matrix(6==arguments.length?[].slice.call(arguments):t))},opacity:function(t){return this.attr("opacity",t)},dx:function(t){return this.x(new a.Number(t).plus(this instanceof a.FX?0:this.x()),!0)},dy:function(t){return this.y(new a.Number(t).plus(this instanceof a.FX?0:this.y()),!0)}}),a.extend(a.Path,{length:function(){return this.node.getTotalLength()},pointAt:function(t){return this.node.getPointAtLength(t)}}),a.Set=a.invent({create:function(t){Array.isArray(t)?this.members=t:this.clear()},extend:{add:function(){for(var t=[].slice.call(arguments),e=0,i=t.length;e<i;e++)this.members.push(t[e]);return this},remove:function(t){var e=this.index(t);return e>-1&&this.members.splice(e,1),this},each:function(t){for(var e=0,i=this.members.length;e<i;e++)t.apply(this.members[e],[e,this.members]);return this},clear:function(){return this.members=[],this},length:function(){return this.members.length},has:function(t){return this.index(t)>=0},index:function(t){return this.members.indexOf(t)},get:function(t){return this.members[t]},first:function(){return this.get(0)},last:function(){return this.get(this.members.length-1)},valueOf:function(){return this.members}},construct:{set:function(t){return new a.Set(t)}}}),a.FX.Set=a.invent({create:function(t){this.set=t}}),a.Set.inherit=function(){var t=[];for(var e in a.Shape.prototype)"function"==typeof a.Shape.prototype[e]&&"function"!=typeof a.Set.prototype[e]&&t.push(e);for(var e in t.forEach((function(t){a.Set.prototype[t]=function(){for(var e=0,i=this.members.length;e<i;e++)this.members[e]&&"function"==typeof this.members[e][t]&&this.members[e][t].apply(this.members[e],arguments);return"animate"==t?this.fx||(this.fx=new a.FX.Set(this)):this}})),t=[],a.FX.prototype)"function"==typeof a.FX.prototype[e]&&"function"!=typeof a.FX.Set.prototype[e]&&t.push(e);t.forEach((function(t){a.FX.Set.prototype[t]=function(){for(var e=0,i=this.set.members.length;e<i;e++)this.set.members[e].fx[t].apply(this.set.members[e].fx,arguments);return this}}))},a.extend(a.Element,{}),a.extend(a.Element,{remember:function(e,i){if("object"===t(arguments[0]))for(var a in e)this.remember(a,e[a]);else{if(1==arguments.length)return this.memory()[e];this.memory()[e]=i}return this},forget:function(){if(0==arguments.length)this._memory={};else for(var t=arguments.length-1;t>=0;t--)delete this.memory()[arguments[t]];return this},memory:function(){return this._memory||(this._memory={})}}),a.get=function(t){var e=i.getElementById(function(t){var e=(t||"").toString().match(a.regex.reference);if(e)return e[1]}(t)||t);return a.adopt(e)},a.select=function(t,e){return new a.Set(a.utils.map((e||i).querySelectorAll(t),(function(t){return a.adopt(t)})))},a.extend(a.Parent,{select:function(t){return a.select(t,this.node)}});var v="abcdef".split("");if("function"!=typeof e.CustomEvent){var y=function(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var a=i.createEvent("CustomEvent");return a.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),a};y.prototype=e.Event.prototype,a.CustomEvent=y}else a.CustomEvent=e.CustomEvent;return a},"function"==typeof define&&define.amd?define((function(){return w(y,y.document)})):"object"===("undefined"==typeof exports?"undefined":t(exports))&&"undefined"!=typeof module?module.exports=y.document?w(y,y.document):function(t){return w(t,t.document)}:y.SVG=w(y,y.document),
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).ApexCharts=e()}(this,(function(){"use strict";function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(e)}function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){for(var i=0;i<e.length;i++){var a=e[i];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,a.key,a)}}function a(t,e,a){return e&&i(t.prototype,e),a&&i(t,a),t}function s(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function r(t,e){var i=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),i.push.apply(i,a)}return i}function n(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{};e%2?r(Object(i),!0).forEach((function(e){s(t,e,i[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):r(Object(i)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))}))}return t}function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&h(t,e)}function l(t){return(l=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function h(t,e){return(h=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function c(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function d(t){return function(t){if(Array.isArray(t)){for(var e=0,i=new Array(t.length);e<t.length;e++)i[e]=t[e];return i}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var g=function(){function i(){e(this,i)}return a(i,[{key:"shadeRGBColor",value:function(t,e){var i=e.split(","),a=t<0?0:255,s=t<0?-1*t:t,r=parseInt(i[0].slice(4),10),n=parseInt(i[1],10),o=parseInt(i[2],10);return"rgb("+(Math.round((a-r)*s)+r)+","+(Math.round((a-n)*s)+n)+","+(Math.round((a-o)*s)+o)+")"}},{key:"shadeHexColor",value:function(t,e){var i=parseInt(e.slice(1),16),a=t<0?0:255,s=t<0?-1*t:t,r=i>>16,n=i>>8&255,o=255&i;return"#"+(16777216+65536*(Math.round((a-r)*s)+r)+256*(Math.round((a-n)*s)+n)+(Math.round((a-o)*s)+o)).toString(16).slice(1)}},{key:"shadeColor",value:function(t,e){return i.isColorHex(e)?this.shadeHexColor(t,e):this.shadeRGBColor(t,e)}}],[{key:"bind",value:function(t,e){return function(){return t.apply(e,arguments)}}},{key:"isObject",value:function(e){return e&&"object"===t(e)&&!Array.isArray(e)&&null!=e}},{key:"listToArray",value:function(t){var e,i=[];for(e=0;e<t.length;e++)i[e]=t[e];return i}},{key:"extend",value:function(t,e){var i=this;"function"!=typeof Object.assign&&(Object.assign=function(t){if(null==t)throw new TypeError("Cannot convert undefined or null to object");for(var e=Object(t),i=1;i<arguments.length;i++){var a=arguments[i];if(null!=a)for(var s in a)a.hasOwnProperty(s)&&(e[s]=a[s])}return e});var a=Object.assign({},t);return this.isObject(t)&&this.isObject(e)&&Object.keys(e).forEach((function(r){i.isObject(e[r])&&r in t?a[r]=i.extend(t[r],e[r]):Object.assign(a,s({},r,e[r]))})),a}},{key:"extendArray",value:function(t,e){var a=[];return t.map((function(t){a.push(i.extend(e,t))})),t=a}},{key:"monthMod",value:function(t){return t%12}},{key:"clone",value:function(e){if("[object Array]"===Object.prototype.toString.call(e)){for(var i=[],a=0;a<e.length;a++)i[a]=this.clone(e[a]);return i}if("object"===t(e)){var s={};for(var r in e)e.hasOwnProperty(r)&&(s[r]=this.clone(e[r]));return s}return e}},{key:"log10",value:function(t){return Math.log(t)/Math.LN10}},{key:"roundToBase10",value:function(t){return Math.pow(10,Math.floor(Math.log10(t)))}},{key:"roundToBase",value:function(t,e){return Math.pow(e,Math.floor(Math.log(t)/Math.log(e)))}},{key:"parseNumber",value:function(t){return null===t?t:parseFloat(t)}},{key:"randomId",value:function(){return(Math.random()+1).toString(36).substring(4)}},{key:"noExponents",value:function(t){var e=String(t).split(/[eE]/);if(1===e.length)return e[0];var i="",a=t<0?"-":"",s=e[0].replace(".",""),r=Number(e[1])+1;if(r<0){for(i=a+"0.";r++;)i+="0";return i+s.replace(/^-/,"")}for(r-=s.length;r--;)i+="0";return s+i}},{key:"getDimensions",value:function(t){var e=getComputedStyle(t),i=[],a=t.clientHeight,s=t.clientWidth;return a-=parseFloat(e.paddingTop)+parseFloat(e.paddingBottom),s-=parseFloat(e.paddingLeft)+parseFloat(e.paddingRight),i.push(s),i.push(a),i}},{key:"getBoundingClientRect",value:function(t){var e=t.getBoundingClientRect();return{top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:t.clientWidth,height:t.clientHeight,x:e.left,y:e.top}}},{key:"getLargestStringFromArr",value:function(t){return t.reduce((function(t,e){return Array.isArray(e)&&(e=e.reduce((function(t,e){return t.length>e.length?t:e}))),t.length>e.length?t:e}),0)}},{key:"hexToRgba",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"#999999",e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:.6;"#"!==t.substring(0,1)&&(t="#999999");var i=t.replace("#","");i=i.match(new RegExp("(.{"+i.length/3+"})","g"));for(var a=0;a<i.length;a++)i[a]=parseInt(1===i[a].length?i[a]+i[a]:i[a],16);return void 0!==e&&i.push(e),"rgba("+i.join(",")+")"}},{key:"getOpacityFromRGBA",value:function(t){return parseFloat(t.replace(/^.*,(.+)\)/,"$1"))}},{key:"rgb2hex",value:function(t){return(t=t.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i))&&4===t.length?"#"+("0"+parseInt(t[1],10).toString(16)).slice(-2)+("0"+parseInt(t[2],10).toString(16)).slice(-2)+("0"+parseInt(t[3],10).toString(16)).slice(-2):""}},{key:"isColorHex",value:function(t){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)|(^#[0-9A-F]{8}$)/i.test(t)}},{key:"polarToCartesian",value:function(t,e,i,a){var s=(a-90)*Math.PI/180;return{x:t+i*Math.cos(s),y:e+i*Math.sin(s)}}},{key:"escapeString",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"x",i=t.toString().slice();return i=i.replace(/[` ~!@#$%^&*()_|+\-=?;:'",.<>{}[\]\\/]/gi,e)}},{key:"negToZero",value:function(t){return t<0?0:t}},{key:"moveIndexInArray",value:function(t,e,i){if(i>=t.length)for(var a=i-t.length+1;a--;)t.push(void 0);return t.splice(i,0,t.splice(e,1)[0]),t}},{key:"extractNumber",value:function(t){return parseFloat(t.replace(/[^\d.]*/g,""))}},{key:"findAncestor",value:function(t,e){for(;(t=t.parentElement)&&!t.classList.contains(e););return t}},{key:"setELstyles",value:function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t.style.key=e[i])}},{key:"isNumber",value:function(t){return!isNaN(t)&&parseFloat(Number(t))===t&&!isNaN(parseInt(t,10))}},{key:"isFloat",value:function(t){return Number(t)===t&&t%1!=0}},{key:"isSafari",value:function(){return/^((?!chrome|android).)*safari/i.test(navigator.userAgent)}},{key:"isFirefox",value:function(){return navigator.userAgent.toLowerCase().indexOf("firefox")>-1}},{key:"isIE11",value:function(){if(-1!==window.navigator.userAgent.indexOf("MSIE")||window.navigator.appVersion.indexOf("Trident/")>-1)return!0}},{key:"isIE",value:function(){var t=window.navigator.userAgent,e=t.indexOf("MSIE ");if(e>0)return parseInt(t.substring(e+5,t.indexOf(".",e)),10);if(t.indexOf("Trident/")>0){var i=t.indexOf("rv:");return parseInt(t.substring(i+3,t.indexOf(".",i)),10)}var a=t.indexOf("Edge/");return a>0&&parseInt(t.substring(a+5,t.indexOf(".",a)),10)}}]),i}(),u=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"getDefaultFilter",value:function(t,e){var i=this.w;t.unfilter(!0),(new window.SVG.Filter).size("120%","180%","-5%","-40%"),"none"!==i.config.states.normal.filter?this.applyFilter(t,e,i.config.states.normal.filter.type,i.config.states.normal.filter.value):i.config.chart.dropShadow.enabled&&this.dropShadow(t,i.config.chart.dropShadow,e)}},{key:"addNormalFilter",value:function(t,e){var i=this.w;i.config.chart.dropShadow.enabled&&!t.node.classList.contains("apexcharts-marker")&&this.dropShadow(t,i.config.chart.dropShadow,e)}},{key:"addLightenFilter",value:function(t,e,i){var a=this,s=this.w,r=i.intensity;if(!g.isFirefox()){t.unfilter(!0);new window.SVG.Filter;t.filter((function(t){var i=s.config.chart.dropShadow;(i.enabled?a.addShadow(t,e,i):t).componentTransfer({rgb:{type:"linear",slope:1.5,intercept:r}})})),t.filterer.node.setAttribute("filterUnits","userSpaceOnUse"),this._scaleFilterSize(t.filterer.node)}}},{key:"addDarkenFilter",value:function(t,e,i){var a=this,s=this.w,r=i.intensity;if(!g.isFirefox()){t.unfilter(!0);new window.SVG.Filter;t.filter((function(t){var i=s.config.chart.dropShadow;(i.enabled?a.addShadow(t,e,i):t).componentTransfer({rgb:{type:"linear",slope:r}})})),t.filterer.node.setAttribute("filterUnits","userSpaceOnUse"),this._scaleFilterSize(t.filterer.node)}}},{key:"applyFilter",value:function(t,e,i){var a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:.5;switch(i){case"none":this.addNormalFilter(t,e);break;case"lighten":this.addLightenFilter(t,e,{intensity:a});break;case"darken":this.addDarkenFilter(t,e,{intensity:a})}}},{key:"addShadow",value:function(t,e,i){var a=i.blur,s=i.top,r=i.left,n=i.color,o=i.opacity,l=t.flood(Array.isArray(n)?n[e]:n,o).composite(t.sourceAlpha,"in").offset(r,s).gaussianBlur(a).merge(t.source);return t.blend(t.source,l)}},{key:"dropShadow",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,a=e.top,s=e.left,r=e.blur,n=e.color,o=e.opacity,l=e.noUserSpaceOnUse,h=this.w;return t.unfilter(!0),g.isIE()&&"radialBar"===h.config.chart.type?t:(n=Array.isArray(n)?n[i]:n,t.filter((function(t){var e=null;e=g.isSafari()||g.isFirefox()||g.isIE()?t.flood(n,o).composite(t.sourceAlpha,"in").offset(s,a).gaussianBlur(r):t.flood(n,o).composite(t.sourceAlpha,"in").offset(s,a).gaussianBlur(r).merge(t.source),t.blend(t.source,e)})),l||t.filterer.node.setAttribute("filterUnits","userSpaceOnUse"),this._scaleFilterSize(t.filterer.node),t)}},{key:"setSelectionFilter",value:function(t,e,i){var a=this.w;if(void 0!==a.globals.selectedDataPoints[e]&&a.globals.selectedDataPoints[e].indexOf(i)>-1){t.node.setAttribute("selected",!0);var s=a.config.states.active.filter;"none"!==s&&this.applyFilter(t,e,s.type,s.value)}}},{key:"_scaleFilterSize",value:function(t){!function(e){for(var i in e)e.hasOwnProperty(i)&&t.setAttribute(i,e[i])}({width:"200%",height:"200%",x:"-50%",y:"-50%"})}}]),t}(),f=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.setEasingFunctions()}return a(t,[{key:"setEasingFunctions",value:function(){var t;if(!this.w.globals.easing){switch(this.w.config.chart.animations.easing){case"linear":t="-";break;case"easein":t="<";break;case"easeout":t=">";break;case"easeinout":t="<>";break;case"swing":t=function(t){var e=1.70158;return(t-=1)*t*((e+1)*t+e)+1};break;case"bounce":t=function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375};break;case"elastic":t=function(t){return t===!!t?t:Math.pow(2,-10*t)*Math.sin((t-.075)*(2*Math.PI)/.3)+1};break;default:t="<>"}this.w.globals.easing=t}}},{key:"animateLine",value:function(t,e,i,a){t.attr(e).animate(a).attr(i)}},{key:"animateCircleRadius",value:function(t,e,i,a,s,r){e||(e=0),t.attr({r:e}).animate(a,s).attr({r:i}).afterAll((function(){r()}))}},{key:"animateCircle",value:function(t,e,i,a,s){t.attr({r:e.r,cx:e.cx,cy:e.cy}).animate(a,s).attr({r:i.r,cx:i.cx,cy:i.cy})}},{key:"animateRect",value:function(t,e,i,a,s){t.attr(e).animate(a).attr(i).afterAll((function(){return s()}))}},{key:"animatePathsGradually",value:function(t){var e=t.el,i=t.realIndex,a=t.j,s=t.fill,r=t.pathFrom,n=t.pathTo,o=t.speed,l=t.delay,h=this.w,c=0;h.config.chart.animations.animateGradually.enabled&&(c=h.config.chart.animations.animateGradually.delay),h.config.chart.animations.dynamicAnimation.enabled&&h.globals.dataChanged&&"bar"!==h.config.chart.type&&(c=0),this.morphSVG(e,i,a,"line"!==h.config.chart.type||h.globals.comboCharts?s:"stroke",r,n,o,l*c)}},{key:"showDelayedElements",value:function(){this.w.globals.delayedElements.forEach((function(t){t.el.classList.remove("apexcharts-element-hidden")}))}},{key:"animationCompleted",value:function(t){var e=this.w;e.globals.animationEnded||(e.globals.animationEnded=!0,this.showDelayedElements(),"function"==typeof e.config.chart.events.animationEnd&&e.config.chart.events.animationEnd(this.ctx,{el:t,w:e}))}},{key:"morphSVG",value:function(t,e,i,a,s,r,n,o){var l=this,h=this.w;s||(s=t.attr("pathFrom")),r||(r=t.attr("pathTo"));var c=function(t){return"radar"===h.config.chart.type&&(n=1),"M 0 ".concat(h.globals.gridHeight)};(!s||s.indexOf("undefined")>-1||s.indexOf("NaN")>-1)&&(s=c()),(r.indexOf("undefined")>-1||r.indexOf("NaN")>-1)&&(r=c()),h.globals.shouldAnimate||(n=1),t.plot(s).animate(1,h.globals.easing,o).plot(s).animate(n,h.globals.easing,o).plot(r).afterAll((function(){g.isNumber(i)?i===h.globals.series[h.globals.maxValsInArrayIndex].length-2&&h.globals.shouldAnimate&&l.animationCompleted(t):"none"!==a&&h.globals.shouldAnimate&&(!h.globals.comboCharts&&e===h.globals.series.length-1||h.globals.comboCharts)&&l.animationCompleted(t),l.showDelayedElements()}))}}]),t}(),p=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"drawLine",value:function(t,e,i,a){var s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"#a8a8a8",r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,n=arguments.length>6&&void 0!==arguments[6]?arguments[6]:null,o=this.w,l=o.globals.dom.Paper.line().attr({x1:t,y1:e,x2:i,y2:a,stroke:s,"stroke-dasharray":r,"stroke-width":n});return l}},{key:"drawRect",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:"#fefefe",n=arguments.length>6&&void 0!==arguments[6]?arguments[6]:1,o=arguments.length>7&&void 0!==arguments[7]?arguments[7]:null,l=arguments.length>8&&void 0!==arguments[8]?arguments[8]:null,h=arguments.length>9&&void 0!==arguments[9]?arguments[9]:0,c=this.w,d=c.globals.dom.Paper.rect();return d.attr({x:t,y:e,width:i>0?i:0,height:a>0?a:0,rx:s,ry:s,opacity:n,"stroke-width":null!==o?o:0,stroke:null!==l?l:"none","stroke-dasharray":h}),d.node.setAttribute("fill",r),d}},{key:"drawPolygon",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"#e1e1e1",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"none",s=this.w,r=s.globals.dom.Paper.polygon(t).attr({fill:a,stroke:e,"stroke-width":i});return r}},{key:"drawCircle",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=this.w,a=i.globals.dom.Paper.circle(2*t);return null!==e&&a.attr(e),a}},{key:"drawPath",value:function(t){var e=t.d,i=void 0===e?"":e,a=t.stroke,s=void 0===a?"#a8a8a8":a,r=t.strokeWidth,n=void 0===r?1:r,o=t.fill,l=t.fillOpacity,h=void 0===l?1:l,c=t.strokeOpacity,d=void 0===c?1:c,g=t.classes,u=t.strokeLinecap,f=void 0===u?null:u,p=t.strokeDashArray,x=void 0===p?0:p,b=this.w;return null===f&&(f=b.config.stroke.lineCap),(i.indexOf("undefined")>-1||i.indexOf("NaN")>-1)&&(i="M 0 ".concat(b.globals.gridHeight)),b.globals.dom.Paper.path(i).attr({fill:o,"fill-opacity":h,stroke:s,"stroke-opacity":d,"stroke-linecap":f,"stroke-width":n,"stroke-dasharray":x,class:g})}},{key:"group",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=this.w,i=e.globals.dom.Paper.group();return null!==t&&i.attr(t),i}},{key:"move",value:function(t,e){var i=["M",t,e].join(" ");return i}},{key:"line",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,a=null;return null===i?a=["L",t,e].join(" "):"H"===i?a=["H",t].join(" "):"V"===i&&(a=["V",e].join(" ")),a}},{key:"curve",value:function(t,e,i,a,s,r){var n=["C",t,e,i,a,s,r].join(" ");return n}},{key:"quadraticCurve",value:function(t,e,i,a){return["Q",t,e,i,a].join(" ")}},{key:"arc",value:function(t,e,i,a,s,r,n){var o=arguments.length>7&&void 0!==arguments[7]&&arguments[7],l="A";o&&(l="a");var h=[l,t,e,i,a,s,r,n].join(" ");return h}},{key:"renderPaths",value:function(t){var e,i=t.j,a=t.realIndex,s=t.pathFrom,r=t.pathTo,o=t.stroke,l=t.strokeWidth,h=t.strokeLinecap,c=t.fill,d=t.animationDelay,g=t.initialSpeed,p=t.dataChangeSpeed,x=t.className,b=t.shouldClipToGrid,m=void 0===b||b,v=t.bindEventsOnPaths,y=void 0===v||v,w=t.drawShadow,k=void 0===w||w,A=this.w,S=new u(this.ctx),C=new f(this.ctx),L=this.w.config.chart.animations.enabled,P=L&&this.w.config.chart.animations.dynamicAnimation.enabled,T=!!(L&&!A.globals.resized||P&&A.globals.dataChanged&&A.globals.shouldAnimate);T?e=s:(e=r,A.globals.animationEnded=!0);var z=A.config.stroke.dashArray,I=0;I=Array.isArray(z)?z[a]:A.config.stroke.dashArray;var M=this.drawPath({d:e,stroke:o,strokeWidth:l,fill:c,fillOpacity:1,classes:x,strokeLinecap:h,strokeDashArray:I});if(M.attr("index",a),m&&M.attr({"clip-path":"url(#gridRectMask".concat(A.globals.cuid,")")}),"none"!==A.config.states.normal.filter.type)S.getDefaultFilter(M,a);else if(A.config.chart.dropShadow.enabled&&k&&(!A.config.chart.dropShadow.enabledOnSeries||A.config.chart.dropShadow.enabledOnSeries&&-1!==A.config.chart.dropShadow.enabledOnSeries.indexOf(a))){var X=A.config.chart.dropShadow;S.dropShadow(M,X,a)}y&&(M.node.addEventListener("mouseenter",this.pathMouseEnter.bind(this,M)),M.node.addEventListener("mouseleave",this.pathMouseLeave.bind(this,M)),M.node.addEventListener("mousedown",this.pathMouseDown.bind(this,M))),M.attr({pathTo:r,pathFrom:s});var E={el:M,j:i,realIndex:a,pathFrom:s,pathTo:r,fill:c,strokeWidth:l,delay:d};return!L||A.globals.resized||A.globals.dataChanged?!A.globals.resized&&A.globals.dataChanged||C.showDelayedElements():C.animatePathsGradually(n({},E,{speed:g})),A.globals.dataChanged&&P&&T&&C.animatePathsGradually(n({},E,{speed:p})),M}},{key:"drawPattern",value:function(t,e,i){var a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"#a8a8a8",s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,r=this.w,n=r.globals.dom.Paper.pattern(e,i,(function(r){"horizontalLines"===t?r.line(0,0,i,0).stroke({color:a,width:s+1}):"verticalLines"===t?r.line(0,0,0,e).stroke({color:a,width:s+1}):"slantedLines"===t?r.line(0,0,e,i).stroke({color:a,width:s}):"squares"===t?r.rect(e,i).fill("none").stroke({color:a,width:s}):"circles"===t&&r.circle(e).fill("none").stroke({color:a,width:s})}));return n}},{key:"drawGradient",value:function(t,e,i,a,s){var r,n=arguments.length>5&&void 0!==arguments[5]?arguments[5]:null,o=arguments.length>6&&void 0!==arguments[6]?arguments[6]:null,l=arguments.length>7&&void 0!==arguments[7]?arguments[7]:null,h=arguments.length>8&&void 0!==arguments[8]?arguments[8]:0,c=this.w;e.length<9&&0===e.indexOf("#")&&(e=g.hexToRgba(e,a)),i.length<9&&0===i.indexOf("#")&&(i=g.hexToRgba(i,s));var d=0,u=1,f=1,p=null;null!==o&&(d=void 0!==o[0]?o[0]/100:0,u=void 0!==o[1]?o[1]/100:1,f=void 0!==o[2]?o[2]/100:1,p=void 0!==o[3]?o[3]/100:null);var x=!("donut"!==c.config.chart.type&&"pie"!==c.config.chart.type&&"polarArea"!==c.config.chart.type&&"bubble"!==c.config.chart.type);if(r=null===l||0===l.length?c.globals.dom.Paper.gradient(x?"radial":"linear",(function(t){t.at(d,e,a),t.at(u,i,s),t.at(f,i,s),null!==p&&t.at(p,e,a)})):c.globals.dom.Paper.gradient(x?"radial":"linear",(function(t){(Array.isArray(l[h])?l[h]:l).forEach((function(e){t.at(e.offset/100,e.color,e.opacity)}))})),x){var b=c.globals.gridWidth/2,m=c.globals.gridHeight/2;"bubble"!==c.config.chart.type?r.attr({gradientUnits:"userSpaceOnUse",cx:b,cy:m,r:n}):r.attr({cx:.5,cy:.5,r:.8,fx:.2,fy:.2})}else"vertical"===t?r.from(0,0).to(0,1):"diagonal"===t?r.from(0,0).to(1,1):"horizontal"===t?r.from(0,1).to(1,1):"diagonal2"===t&&r.from(1,0).to(0,1);return r}},{key:"drawText",value:function(t){var e,i=t.x,a=t.y,s=t.text,r=t.textAnchor,n=t.fontSize,o=t.fontFamily,l=t.fontWeight,h=t.foreColor,c=t.opacity,d=t.cssClass,g=void 0===d?"":d,u=t.isPlainText,f=void 0===u||u,p=this.w;return void 0===s&&(s=""),r||(r="start"),h&&h.length||(h=p.config.chart.foreColor),o=o||p.config.chart.fontFamily,l=l||"regular",(e=Array.isArray(s)?p.globals.dom.Paper.text((function(t){for(var e=0;e<s.length;e++)0===e?t.tspan(s[e]):t.tspan(s[e]).newLine()})):f?p.globals.dom.Paper.plain(s):p.globals.dom.Paper.text((function(t){return t.tspan(s)}))).attr({x:i,y:a,"text-anchor":r,"dominant-baseline":"auto","font-size":n,"font-family":o,"font-weight":l,fill:h,class:"apexcharts-text "+g}),e.node.style.fontFamily=o,e.node.style.opacity=c,e}},{key:"drawMarker",value:function(t,e,i){t=t||0;var a=i.pSize||0,s=null;if("square"===i.shape){var r=void 0===i.pRadius?a/2:i.pRadius;null!==e&&a||(a=0,r=0);var n=1.2*a+r,o=this.drawRect(n,n,n,n,r);o.attr({x:t-n/2,y:e-n/2,cx:t,cy:e,class:i.class?i.class:"",fill:i.pointFillColor,"fill-opacity":i.pointFillOpacity?i.pointFillOpacity:1,stroke:i.pointStrokeColor,"stroke-width":i.pWidth?i.pWidth:0,"stroke-opacity":i.pointStrokeOpacity?i.pointStrokeOpacity:1}),s=o}else"circle"!==i.shape&&i.shape||(g.isNumber(e)||(a=0,e=0),s=this.drawCircle(a,{cx:t,cy:e,class:i.class?i.class:"",stroke:i.pointStrokeColor,fill:i.pointFillColor,"fill-opacity":i.pointFillOpacity?i.pointFillOpacity:1,"stroke-width":i.pWidth?i.pWidth:0,"stroke-opacity":i.pointStrokeOpacity?i.pointStrokeOpacity:1}));return s}},{key:"pathMouseEnter",value:function(t,e){var i=this.w,a=new u(this.ctx),s=parseInt(t.node.getAttribute("index"),10),r=parseInt(t.node.getAttribute("j"),10);if("function"==typeof i.config.chart.events.dataPointMouseEnter&&i.config.chart.events.dataPointMouseEnter(e,this.ctx,{seriesIndex:s,dataPointIndex:r,w:i}),this.ctx.events.fireEvent("dataPointMouseEnter",[e,this.ctx,{seriesIndex:s,dataPointIndex:r,w:i}]),("none"===i.config.states.active.filter.type||"true"!==t.node.getAttribute("selected"))&&"none"!==i.config.states.hover.filter.type&&"none"!==i.config.states.active.filter.type&&!i.globals.isTouchDevice){var n=i.config.states.hover.filter;a.applyFilter(t,s,n.type,n.value)}}},{key:"pathMouseLeave",value:function(t,e){var i=this.w,a=new u(this.ctx),s=parseInt(t.node.getAttribute("index"),10),r=parseInt(t.node.getAttribute("j"),10);"function"==typeof i.config.chart.events.dataPointMouseLeave&&i.config.chart.events.dataPointMouseLeave(e,this.ctx,{seriesIndex:s,dataPointIndex:r,w:i}),this.ctx.events.fireEvent("dataPointMouseLeave",[e,this.ctx,{seriesIndex:s,dataPointIndex:r,w:i}]),"none"!==i.config.states.active.filter.type&&"true"===t.node.getAttribute("selected")||"none"!==i.config.states.hover.filter.type&&a.getDefaultFilter(t,s)}},{key:"pathMouseDown",value:function(t,e){var i=this.w,a=new u(this.ctx),s=parseInt(t.node.getAttribute("index"),10),r=parseInt(t.node.getAttribute("j"),10),n="false";if("true"===t.node.getAttribute("selected")){if(t.node.setAttribute("selected","false"),i.globals.selectedDataPoints[s].indexOf(r)>-1){var o=i.globals.selectedDataPoints[s].indexOf(r);i.globals.selectedDataPoints[s].splice(o,1)}}else{if(!i.config.states.active.allowMultipleDataPointsSelection&&i.globals.selectedDataPoints.length>0){i.globals.selectedDataPoints=[];var l=i.globals.dom.Paper.select(".apexcharts-series path").members,h=i.globals.dom.Paper.select(".apexcharts-series circle, .apexcharts-series rect").members,c=function(t){Array.prototype.forEach.call(t,(function(t){t.node.setAttribute("selected","false"),a.getDefaultFilter(t,s)}))};c(l),c(h)}t.node.setAttribute("selected","true"),n="true",void 0===i.globals.selectedDataPoints[s]&&(i.globals.selectedDataPoints[s]=[]),i.globals.selectedDataPoints[s].push(r)}if("true"===n){var d=i.config.states.active.filter;"none"!==d&&a.applyFilter(t,s,d.type,d.value)}else"none"!==i.config.states.active.filter.type&&a.getDefaultFilter(t,s);"function"==typeof i.config.chart.events.dataPointSelection&&i.config.chart.events.dataPointSelection(e,this.ctx,{selectedDataPoints:i.globals.selectedDataPoints,seriesIndex:s,dataPointIndex:r,w:i}),e&&this.ctx.events.fireEvent("dataPointSelection",[e,this.ctx,{selectedDataPoints:i.globals.selectedDataPoints,seriesIndex:s,dataPointIndex:r,w:i}])}},{key:"rotateAroundCenter",value:function(t){var e=t.getBBox();return{x:e.x+e.width/2,y:e.y+e.height/2}}},{key:"getTextRects",value:function(t,e,i,a){var s=!(arguments.length>4&&void 0!==arguments[4])||arguments[4],r=this.w,n=this.drawText({x:-200,y:-200,text:t,textAnchor:"start",fontSize:e,fontFamily:i,foreColor:"#fff",opacity:0});a&&n.attr("transform",a),r.globals.dom.Paper.add(n);var o=n.bbox();return s||(o=n.node.getBoundingClientRect()),n.remove(),{width:o.width,height:o.height}}},{key:"placeTextWithEllipsis",value:function(t,e,i){if("function"==typeof t.getComputedTextLength&&(t.textContent=e,e.length>0&&t.getComputedTextLength()>=i/.8)){for(var a=e.length-3;a>0;a-=3)if(t.getSubStringLength(0,a)<=i/.8)return void(t.textContent=e.substring(0,a)+"...");t.textContent="."}}}],[{key:"setAttrs",value:function(t,e){for(var i in e)e.hasOwnProperty(i)&&t.setAttribute(i,e[i])}}]),t}(),x=function(){function t(i){e(this,t),this.w=i.w,this.annoCtx=i}return a(t,[{key:"setOrientations",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=this.w;if("vertical"===t.label.orientation){var a=null!==e?e:0,s=i.globals.dom.baseEl.querySelector(".apexcharts-xaxis-annotations .apexcharts-xaxis-annotation-label[rel='".concat(a,"']"));if(null!==s){var r=s.getBoundingClientRect();s.setAttribute("x",parseFloat(s.getAttribute("x"))-r.height+4),"top"===t.label.position?s.setAttribute("y",parseFloat(s.getAttribute("y"))+r.width):s.setAttribute("y",parseFloat(s.getAttribute("y"))-r.width);var n=this.annoCtx.graphics.rotateAroundCenter(s),o=n.x,l=n.y;s.setAttribute("transform","rotate(-90 ".concat(o," ").concat(l,")"))}}}},{key:"addBackgroundToAnno",value:function(t,e){var i=this.w;if(!e.label.text||e.label.text&&!e.label.text.trim())return null;var a=i.globals.dom.baseEl.querySelector(".apexcharts-grid").getBoundingClientRect(),s=t.getBoundingClientRect(),r=e.label.style.padding.left,n=e.label.style.padding.right,o=e.label.style.padding.top,l=e.label.style.padding.bottom;"vertical"===e.label.orientation&&(o=e.label.style.padding.left,l=e.label.style.padding.right,r=e.label.style.padding.top,n=e.label.style.padding.bottom);var h=s.left-a.left-r,c=s.top-a.top-o,d=this.annoCtx.graphics.drawRect(h,c,s.width+r+n,s.height+o+l,0,e.label.style.background,1,e.label.borderWidth,e.label.borderColor,0);return e.id&&d.node.classList.add(e.id),d}},{key:"annotationsBackground",value:function(){var t=this,e=this.w,i=function(i,a,s){var r=e.globals.dom.baseEl.querySelector(".apexcharts-".concat(s,"-annotations .apexcharts-").concat(s,"-annotation-label[rel='").concat(a,"']"));if(r){var n=r.parentNode,o=t.addBackgroundToAnno(r,i);o&&n.insertBefore(o.node,r)}};e.config.annotations.xaxis.map((function(t,e){i(t,e,"xaxis")})),e.config.annotations.yaxis.map((function(t,e){i(t,e,"yaxis")})),e.config.annotations.points.map((function(t,e){i(t,e,"point")}))}},{key:"makeAnnotationDraggable",value:function(t,e,i){var a=this.w.config.annotations[e][i];t.draggable().on("dragend",(function(t){var e=t.target.getAttribute("x"),i=t.target.getAttribute("y"),s=t.target.getAttribute("cx"),r=t.target.getAttribute("cy");a.x=e,a.y=i,s&&r&&(a.x=s,a.y=r)})),t.node.addEventListener("mousedown",(function(e){e.stopPropagation(),t.selectize({pointSize:8,rotationPoint:!1,pointType:"rect"}),t.resize().on("resizedone",(function(t){var e=t.target.getAttribute("width"),i=t.target.getAttribute("height"),s=t.target.getAttribute("r");a.width=e,a.height=i,s&&(a.radius=s)}))}))}},{key:"getStringX",value:function(t){var e=this.w,i=t;e.config.xaxis.convertedCatToNumeric&&e.globals.categoryLabels.length&&(t=e.globals.categoryLabels.indexOf(t)+1);var a=e.globals.labels.indexOf(t),s=e.globals.dom.baseEl.querySelector(".apexcharts-xaxis-texts-g text:nth-child("+(a+1)+")");return s&&(i=parseFloat(s.getAttribute("x"))),i}}]),t}(),b=function(){function t(i){e(this,t),this.w=i.w,this.annoCtx=i,this.invertAxis=this.annoCtx.invertAxis}return a(t,[{key:"addXaxisAnnotation",value:function(t,e,i){var a=this.w,s=this.invertAxis?a.globals.minY:a.globals.minX,r=this.invertAxis?a.globals.maxY:a.globals.maxX,n=this.invertAxis?a.globals.yRange[0]:a.globals.xRange,o=(t.x-s)/(n/a.globals.gridWidth);this.annoCtx.inversedReversedAxis&&(o=(r-t.x)/(n/a.globals.gridWidth));var l=t.label.text;"category"!==a.config.xaxis.type&&!a.config.xaxis.convertedCatToNumeric||this.invertAxis||a.globals.dataFormatXNumeric||(o=this.annoCtx.helpers.getStringX(t.x));var h=t.strokeDashArray;if(g.isNumber(o)){if(null===t.x2||void 0===t.x2){var c=this.annoCtx.graphics.drawLine(o+t.offsetX,0+t.offsetY,o+t.offsetX,a.globals.gridHeight+t.offsetY,t.borderColor,h,t.borderWidth);e.appendChild(c.node),t.id&&c.node.classList.add(t.id)}else{var d=(t.x2-s)/(n/a.globals.gridWidth);if(this.annoCtx.inversedReversedAxis&&(d=(r-t.x2)/(n/a.globals.gridWidth)),"category"!==a.config.xaxis.type&&!a.config.xaxis.convertedCatToNumeric||this.invertAxis||a.globals.dataFormatXNumeric||(d=this.annoCtx.helpers.getStringX(t.x2)),d<o){var u=o;o=d,d=u}var f=this.annoCtx.graphics.drawRect(o+t.offsetX,0+t.offsetY,d-o,a.globals.gridHeight+t.offsetY,0,t.fillColor,t.opacity,1,t.borderColor,h);f.node.classList.add("apexcharts-annotation-rect"),f.attr("clip-path","url(#gridRectMask".concat(a.globals.cuid,")")),e.appendChild(f.node),t.id&&f.node.classList.add(t.id)}var p="top"===t.label.position?4:a.globals.gridHeight,x=this.annoCtx.graphics.getTextRects(l,parseFloat(t.label.style.fontSize)),b=this.annoCtx.graphics.drawText({x:o+t.label.offsetX,y:p+t.label.offsetY-("vertical"===t.label.orientation?"top"===t.label.position?x.width/2-12:-x.width/2:0),text:l,textAnchor:t.label.textAnchor,fontSize:t.label.style.fontSize,fontFamily:t.label.style.fontFamily,fontWeight:t.label.style.fontWeight,foreColor:t.label.style.color,cssClass:"apexcharts-xaxis-annotation-label ".concat(t.label.style.cssClass," ").concat(t.id?t.id:"")});b.attr({rel:i}),e.appendChild(b.node),this.annoCtx.helpers.setOrientations(t,i)}}},{key:"drawXAxisAnnotations",value:function(){var t=this,e=this.w,i=this.annoCtx.graphics.group({class:"apexcharts-xaxis-annotations"});return e.config.annotations.xaxis.map((function(e,a){t.addXaxisAnnotation(e,i.node,a)})),i}}]),t}(),m=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"getStackedSeriesTotals",value:function(){var t=this.w,e=[];if(0===t.globals.series.length)return e;for(var i=0;i<t.globals.series[t.globals.maxValsInArrayIndex].length;i++){for(var a=0,s=0;s<t.globals.series.length;s++)void 0!==t.globals.series[s][i]&&(a+=t.globals.series[s][i]);e.push(a)}return t.globals.stackedSeriesTotals=e,e}},{key:"getSeriesTotalByIndex",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;return null===t?this.w.config.series.reduce((function(t,e){return t+e}),0):this.w.globals.series[t].reduce((function(t,e){return t+e}),0)}},{key:"isSeriesNull",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;return 0===(null===t?this.w.config.series.filter((function(t){return null!==t})):this.w.config.series[t].data.filter((function(t){return null!==t}))).length}},{key:"seriesHaveSameValues",value:function(t){return this.w.globals.series[t].every((function(t,e,i){return t===i[0]}))}},{key:"getCategoryLabels",value:function(t){var e=this.w,i=t.slice();return e.config.xaxis.convertedCatToNumeric&&(i=t.map((function(t){return e.config.xaxis.labels.formatter(t-e.globals.minX+1)}))),i}},{key:"getLargestSeries",value:function(){var t=this.w;t.globals.maxValsInArrayIndex=t.globals.series.map((function(t){return t.length})).indexOf(Math.max.apply(Math,t.globals.series.map((function(t){return t.length}))))}},{key:"getLargestMarkerSize",value:function(){var t=this.w,e=0;return t.globals.markers.size.forEach((function(t){e=Math.max(e,t)})),t.globals.markers.largestSize=e,e}},{key:"getSeriesTotals",value:function(){var t=this.w;t.globals.seriesTotals=t.globals.series.map((function(t,e){var i=0;if(Array.isArray(t))for(var a=0;a<t.length;a++)i+=t[a];else i+=t;return i}))}},{key:"getSeriesTotalsXRange",value:function(t,e){var i=this.w;return i.globals.series.map((function(a,s){for(var r=0,n=0;n<a.length;n++)i.globals.seriesX[s][n]>t&&i.globals.seriesX[s][n]<e&&(r+=a[n]);return r}))}},{key:"getPercentSeries",value:function(){var t=this.w;t.globals.seriesPercent=t.globals.series.map((function(e,i){var a=[];if(Array.isArray(e))for(var s=0;s<e.length;s++){var r=t.globals.stackedSeriesTotals[s],n=0;r&&(n=100*e[s]/r),a.push(n)}else{var o=100*e/t.globals.seriesTotals.reduce((function(t,e){return t+e}),0);a.push(o)}return a}))}},{key:"getCalculatedRatios",value:function(){var t,e,i,a,s=this.w.globals,r=[],n=0,o=[],l=.1,h=0;if(s.yRange=[],s.isMultipleYAxis)for(var c=0;c<s.minYArr.length;c++)s.yRange.push(Math.abs(s.minYArr[c]-s.maxYArr[c])),o.push(0);else s.yRange.push(Math.abs(s.minY-s.maxY));s.xRange=Math.abs(s.maxX-s.minX),s.zRange=Math.abs(s.maxZ-s.minZ);for(var d=0;d<s.yRange.length;d++)r.push(s.yRange[d]/s.gridHeight);if(e=s.xRange/s.gridWidth,i=Math.abs(s.initialMaxX-s.initialMinX)/s.gridWidth,t=s.yRange/s.gridWidth,a=s.xRange/s.gridHeight,(n=s.zRange/s.gridHeight*16)||(n=1),s.minY!==Number.MIN_VALUE&&0!==Math.abs(s.minY)&&(s.hasNegs=!0),s.isMultipleYAxis){o=[];for(var g=0;g<r.length;g++)o.push(-s.minYArr[g]/r[g])}else o.push(-s.minY/r[0]),s.minY!==Number.MIN_VALUE&&0!==Math.abs(s.minY)&&(l=-s.minY/t,h=s.minX/e);return{yRatio:r,invertedYRatio:t,zRatio:n,xRatio:e,initialXRatio:i,invertedXRatio:a,baseLineInvertedY:l,baseLineY:o,baseLineX:h}}},{key:"getLogSeries",value:function(t){var e=this,i=this.w;return i.globals.seriesLog=t.map((function(t,a){return i.config.yaxis[a]&&i.config.yaxis[a].logarithmic?t.map((function(t){return null===t?null:e.getLogVal(t,a)})):t})),i.globals.invalidLogScale?t:i.globals.seriesLog}},{key:"getLogVal",value:function(t,e){var i=this.w;return(Math.log(t)-Math.log(i.globals.minYArr[e]))/(Math.log(i.globals.maxYArr[e])-Math.log(i.globals.minYArr[e]))}},{key:"getLogYRatios",value:function(t){var e=this,i=this.w,a=this.w.globals;return a.yLogRatio=t.slice(),a.logYRange=a.yRange.map((function(t,s){if(i.config.yaxis[s]&&e.w.config.yaxis[s].logarithmic){var r,n=-Number.MAX_VALUE,o=Number.MIN_VALUE;return a.seriesLog.forEach((function(t,e){t.forEach((function(t){i.config.yaxis[e]&&i.config.yaxis[e].logarithmic&&(n=Math.max(t,n),o=Math.min(t,o))}))})),r=Math.pow(a.yRange[s],Math.abs(o-n)/a.yRange[s]),a.yLogRatio[s]=r/a.gridHeight,r}})),a.invalidLogScale?t.slice():a.yLogRatio}}],[{key:"checkComboSeries",value:function(t){var e=!1,i=0;return t.length&&void 0!==t[0].type&&(e=!0,t.forEach((function(t){"bar"!==t.type&&"column"!==t.type&&"candlestick"!==t.type||i++}))),{comboBarCount:i,comboCharts:e}}},{key:"extendArrayProps",value:function(t,e,i){return e.yaxis&&(e=t.extendYAxis(e,i)),e.annotations&&(e.annotations.yaxis&&(e=t.extendYAxisAnnotations(e)),e.annotations.xaxis&&(e=t.extendXAxisAnnotations(e)),e.annotations.points&&(e=t.extendPointAnnotations(e))),e}}]),t}(),v=function(){function t(i){e(this,t),this.w=i.w,this.annoCtx=i}return a(t,[{key:"addYaxisAnnotation",value:function(t,e,i){var a,s=this.w,r=t.strokeDashArray,n=this._getY1Y2("y1",t),o=t.label.text;if(null===t.y2||void 0===t.y2){var l=this.annoCtx.graphics.drawLine(0+t.offsetX,n+t.offsetY,s.globals.gridWidth+t.offsetX,n+t.offsetY,t.borderColor,r,t.borderWidth);e.appendChild(l.node),t.id&&l.node.classList.add(t.id)}else{if((a=this._getY1Y2("y2",t))>n){var h=n;n=a,a=h}var c=this.annoCtx.graphics.drawRect(0+t.offsetX,a+t.offsetY,s.globals.gridWidth+t.offsetX,n-a,0,t.fillColor,t.opacity,1,t.borderColor,r);c.node.classList.add("apexcharts-annotation-rect"),c.attr("clip-path","url(#gridRectMask".concat(s.globals.cuid,")")),e.appendChild(c.node),t.id&&c.node.classList.add(t.id)}var d="right"===t.label.position?s.globals.gridWidth:0,g=this.annoCtx.graphics.drawText({x:d+t.label.offsetX,y:(a||n)+t.label.offsetY-3,text:o,textAnchor:t.label.textAnchor,fontSize:t.label.style.fontSize,fontFamily:t.label.style.fontFamily,fontWeight:t.label.style.fontWeight,foreColor:t.label.style.color,cssClass:"apexcharts-yaxis-annotation-label ".concat(t.label.style.cssClass," ").concat(t.id?t.id:"")});g.attr({rel:i}),e.appendChild(g.node)}},{key:"_getY1Y2",value:function(t,e){var i,a="y1"===t?e.y:e.y2,s=this.w;if(this.annoCtx.invertAxis){var r=s.globals.labels.indexOf(a);s.config.xaxis.convertedCatToNumeric&&(r=s.globals.categoryLabels.indexOf(a));var n=s.globals.dom.baseEl.querySelector(".apexcharts-yaxis-texts-g text:nth-child("+(r+1)+")");n&&(i=parseFloat(n.getAttribute("y")))}else{var o;if(s.config.yaxis[e.yAxisIndex].logarithmic)o=(a=new m(this.annoCtx.ctx).getLogVal(a,e.yAxisIndex))/s.globals.yLogRatio[e.yAxisIndex];else o=(a-s.globals.minYArr[e.yAxisIndex])/(s.globals.yRange[e.yAxisIndex]/s.globals.gridHeight);i=s.globals.gridHeight-o,s.config.yaxis[e.yAxisIndex]&&s.config.yaxis[e.yAxisIndex].reversed&&(i=o)}return i}},{key:"drawYAxisAnnotations",value:function(){var t=this,e=this.w,i=this.annoCtx.graphics.group({class:"apexcharts-yaxis-annotations"});return e.config.annotations.yaxis.map((function(e,a){t.addYaxisAnnotation(e,i.node,a)})),i}}]),t}(),y=function(){function t(i){e(this,t),this.w=i.w,this.annoCtx=i}return a(t,[{key:"addPointAnnotation",value:function(t,e,i){var a=this.w,s=0,r=0,n=0;this.annoCtx.invertAxis&&console.warn("Point annotation is not supported in horizontal bar charts.");var o,l=parseFloat(t.y);if("string"==typeof t.x){var h=a.globals.labels.indexOf(t.x);a.config.xaxis.convertedCatToNumeric&&(h=a.globals.categoryLabels.indexOf(t.x)),s=this.annoCtx.helpers.getStringX(t.x),null===t.y&&(l=a.globals.series[t.seriesIndex][h])}else s=(t.x-a.globals.minX)/(a.globals.xRange/a.globals.gridWidth);a.config.yaxis[t.yAxisIndex].logarithmic?o=(l=new m(this.annoCtx.ctx).getLogVal(l,t.yAxisIndex))/a.globals.yLogRatio[t.yAxisIndex]:o=(l-a.globals.minYArr[t.yAxisIndex])/(a.globals.yRange[t.yAxisIndex]/a.globals.gridHeight);if(r=a.globals.gridHeight-o-parseFloat(t.label.style.fontSize)-t.marker.size,n=a.globals.gridHeight-o,a.config.yaxis[t.yAxisIndex]&&a.config.yaxis[t.yAxisIndex].reversed&&(r=o+parseFloat(t.label.style.fontSize)+t.marker.size,n=o),g.isNumber(s)){var c={pSize:t.marker.size,pWidth:t.marker.strokeWidth,pointFillColor:t.marker.fillColor,pointStrokeColor:t.marker.strokeColor,shape:t.marker.shape,pRadius:t.marker.radius,class:"apexcharts-point-annotation-marker ".concat(t.marker.cssClass," ").concat(t.id?t.id:"")},d=this.annoCtx.graphics.drawMarker(s+t.marker.offsetX,n+t.marker.offsetY,c);e.appendChild(d.node);var u=t.label.text?t.label.text:"",f=this.annoCtx.graphics.drawText({x:s+t.label.offsetX,y:r+t.label.offsetY,text:u,textAnchor:t.label.textAnchor,fontSize:t.label.style.fontSize,fontFamily:t.label.style.fontFamily,fontWeight:t.label.style.fontWeight,foreColor:t.label.style.color,cssClass:"apexcharts-point-annotation-label ".concat(t.label.style.cssClass," ").concat(t.id?t.id:"")});if(f.attr({rel:i}),e.appendChild(f.node),t.customSVG.SVG){var p=this.annoCtx.graphics.group({class:"apexcharts-point-annotations-custom-svg "+t.customSVG.cssClass});p.attr({transform:"translate(".concat(s+t.customSVG.offsetX,", ").concat(r+t.customSVG.offsetY,")")}),p.node.innerHTML=t.customSVG.SVG,e.appendChild(p.node)}if(t.image.path){var x=t.image.width?t.image.width:20,b=t.image.height?t.image.height:20;this.annoCtx.addImage({x:s+t.image.offsetX-x/2,y:r+t.image.offsetY-b/2,width:x,height:b,path:t.image.path,appendTo:".apexcharts-point-annotations"})}}}},{key:"drawPointAnnotations",value:function(){var t=this,e=this.w,i=this.annoCtx.graphics.group({class:"apexcharts-point-annotations"});return e.config.annotations.points.map((function(e,a){t.addPointAnnotation(e,i.node,a)})),i}}]),t}();var w,k,A={name:"en",options:{months:["January","February","March","April","May","June","July","August","September","October","November","December"],shortMonths:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],days:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],shortDays:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],toolbar:{exportToSVG:"Download SVG",exportToPNG:"Download PNG",exportToCSV:"Download CSV",menu:"Menu",selection:"Selection",selectionZoom:"Selection Zoom",zoomIn:"Zoom In",zoomOut:"Zoom Out",pan:"Panning",reset:"Reset Zoom"}}},S=function(){function t(){e(this,t),this.yAxis={show:!0,showAlways:!1,showForNullSeries:!0,seriesName:void 0,opposite:!1,reversed:!1,logarithmic:!1,tickAmount:void 0,forceNiceScale:!1,max:void 0,min:void 0,floating:!1,decimalsInFloat:void 0,labels:{show:!0,minWidth:0,maxWidth:160,offsetX:0,offsetY:0,align:void 0,rotate:0,padding:20,style:{colors:[],fontSize:"11px",fontWeight:400,fontFamily:void 0,cssClass:""},formatter:void 0},axisBorder:{show:!1,color:"#e0e0e0",width:1,offsetX:0,offsetY:0},axisTicks:{show:!1,color:"#e0e0e0",width:6,offsetX:0,offsetY:0},title:{text:void 0,rotate:90,offsetY:0,offsetX:0,style:{color:void 0,fontSize:"11px",fontWeight:900,fontFamily:void 0,cssClass:""}},tooltip:{enabled:!1,offsetX:0},crosshairs:{show:!0,position:"front",stroke:{color:"#b6b6b6",width:1,dashArray:0}}},this.pointAnnotation={x:0,y:null,yAxisIndex:0,seriesIndex:0,marker:{size:4,fillColor:"#fff",strokeWidth:2,strokeColor:"#333",shape:"circle",offsetX:0,offsetY:0,radius:2,cssClass:""},label:{borderColor:"#c2c2c2",borderWidth:1,text:void 0,textAnchor:"middle",offsetX:0,offsetY:0,style:{background:"#fff",color:void 0,fontSize:"11px",fontFamily:void 0,fontWeight:400,cssClass:"",padding:{left:5,right:5,top:2,bottom:2}}},customSVG:{SVG:void 0,cssClass:void 0,offsetX:0,offsetY:0},image:{path:void 0,width:20,height:20,offsetX:0,offsetY:0}},this.yAxisAnnotation={y:0,y2:null,strokeDashArray:1,fillColor:"#c2c2c2",borderColor:"#c2c2c2",borderWidth:1,opacity:.3,offsetX:0,offsetY:0,yAxisIndex:0,label:{borderColor:"#c2c2c2",borderWidth:1,text:void 0,textAnchor:"end",position:"right",offsetX:0,offsetY:-3,style:{background:"#fff",color:void 0,fontSize:"11px",fontFamily:void 0,fontWeight:400,cssClass:"",padding:{left:5,right:5,top:2,bottom:2}}}},this.xAxisAnnotation={x:0,x2:null,strokeDashArray:1,fillColor:"#c2c2c2",borderColor:"#c2c2c2",borderWidth:1,opacity:.3,offsetX:0,offsetY:0,label:{borderColor:"#c2c2c2",borderWidth:1,text:void 0,textAnchor:"middle",orientation:"vertical",position:"top",offsetX:0,offsetY:0,style:{background:"#fff",color:void 0,fontSize:"11px",fontFamily:void 0,fontWeight:400,cssClass:"",padding:{left:5,right:5,top:2,bottom:2}}}},this.text={x:0,y:0,text:"",textAnchor:"start",foreColor:void 0,fontSize:"13px",fontFamily:void 0,fontWeight:400,appendTo:".apexcharts-annotations",backgroundColor:"transparent",borderColor:"#c2c2c2",borderRadius:0,borderWidth:0,paddingLeft:4,paddingRight:4,paddingTop:2,paddingBottom:2},this.shape={x:0,y:0,type:"rect",width:"100%",height:50,appendTo:".apexcharts-annotations",backgroundColor:"#fff",opacity:1,borderWidth:0,borderRadius:4,borderColor:"#c2c2c2"}}return a(t,[{key:"init",value:function(){return{annotations:{position:"front",yaxis:[this.yAxisAnnotation],xaxis:[this.xAxisAnnotation],points:[this.pointAnnotation],texts:[],images:[],shapes:[]},chart:{animations:{enabled:!0,easing:"easeinout",speed:800,animateGradually:{delay:150,enabled:!0},dynamicAnimation:{enabled:!0,speed:350}},background:"transparent",locales:[A],defaultLocale:"en",dropShadow:{enabled:!1,enabledOnSeries:void 0,top:2,left:2,blur:4,color:"#000",opacity:.35},events:{animationEnd:void 0,beforeMount:void 0,mounted:void 0,updated:void 0,click:void 0,mouseMove:void 0,legendClick:void 0,markerClick:void 0,selection:void 0,dataPointSelection:void 0,dataPointMouseEnter:void 0,dataPointMouseLeave:void 0,beforeZoom:void 0,zoomed:void 0,scrolled:void 0},foreColor:"#373d3f",fontFamily:"Helvetica, Arial, sans-serif",height:"auto",parentHeightOffset:15,redrawOnParentResize:!0,id:void 0,group:void 0,offsetX:0,offsetY:0,selection:{enabled:!1,type:"x",fill:{color:"#24292e",opacity:.1},stroke:{width:1,color:"#24292e",opacity:.4,dashArray:3},xaxis:{min:void 0,max:void 0},yaxis:{min:void 0,max:void 0}},sparkline:{enabled:!1},brush:{enabled:!1,autoScaleYaxis:!0,target:void 0},stacked:!1,stackType:"normal",toolbar:{show:!0,offsetX:0,offsetY:0,tools:{download:!0,selection:!0,zoom:!0,zoomin:!0,zoomout:!0,pan:!0,reset:!0,customIcons:[]},autoSelected:"zoom"},type:"line",width:"100%",zoom:{enabled:!0,type:"x",autoScaleYaxis:!1,zoomedArea:{fill:{color:"#90CAF9",opacity:.4},stroke:{color:"#0D47A1",opacity:.4,width:1}}}},plotOptions:{bar:{horizontal:!1,columnWidth:"70%",barHeight:"70%",distributed:!1,startingShape:"flat",endingShape:"flat",rangeBarOverlap:!0,colors:{ranges:[],backgroundBarColors:[],backgroundBarOpacity:1,backgroundBarRadius:0},dataLabels:{position:"top",maxItems:100,hideOverflowingLabels:!0,orientation:"horizontal"}},bubble:{minBubbleRadius:void 0,maxBubbleRadius:void 0},candlestick:{colors:{upward:"#00B746",downward:"#EF403C"},wick:{useFillColor:!0}},heatmap:{radius:2,enableShades:!0,shadeIntensity:.5,reverseNegativeShade:!1,distributed:!1,useFillColorAsStroke:!1,colorScale:{inverse:!1,ranges:[],min:void 0,max:void 0}},radialBar:{inverseOrder:!1,startAngle:0,endAngle:360,offsetX:0,offsetY:0,hollow:{margin:5,size:"50%",background:"transparent",image:void 0,imageWidth:150,imageHeight:150,imageOffsetX:0,imageOffsetY:0,imageClipped:!0,position:"front",dropShadow:{enabled:!1,top:0,left:0,blur:3,color:"#000",opacity:.5}},track:{show:!0,startAngle:void 0,endAngle:void 0,background:"#f2f2f2",strokeWidth:"97%",opacity:1,margin:5,dropShadow:{enabled:!1,top:0,left:0,blur:3,color:"#000",opacity:.5}},dataLabels:{show:!0,name:{show:!0,fontSize:"16px",fontFamily:void 0,fontWeight:600,color:void 0,offsetY:0,formatter:function(t){return t}},value:{show:!0,fontSize:"14px",fontFamily:void 0,fontWeight:400,color:void 0,offsetY:16,formatter:function(t){return t+"%"}},total:{show:!1,label:"Total",fontSize:"16px",fontWeight:600,fontFamily:void 0,color:void 0,formatter:function(t){return t.globals.seriesTotals.reduce((function(t,e){return t+e}),0)/t.globals.series.length+"%"}}}},pie:{customScale:1,offsetX:0,offsetY:0,expandOnClick:!0,dataLabels:{offset:0,minAngleToShowLabel:10},donut:{size:"65%",background:"transparent",labels:{show:!1,name:{show:!0,fontSize:"16px",fontFamily:void 0,fontWeight:600,color:void 0,offsetY:-10,formatter:function(t){return t}},value:{show:!0,fontSize:"20px",fontFamily:void 0,fontWeight:400,color:void 0,offsetY:10,formatter:function(t){return t}},total:{show:!1,showAlways:!1,label:"Total",fontSize:"16px",fontWeight:400,fontFamily:void 0,color:void 0,formatter:function(t){return t.globals.seriesTotals.reduce((function(t,e){return t+e}),0)}}}}},polarArea:{rings:{strokeWidth:1,strokeColor:"#e8e8e8"}},radar:{size:void 0,offsetX:0,offsetY:0,polygons:{strokeWidth:1,strokeColors:"#e8e8e8",connectorColors:"#e8e8e8",fill:{colors:void 0}}}},colors:void 0,dataLabels:{enabled:!0,enabledOnSeries:void 0,formatter:function(t){return null!==t?t:""},textAnchor:"middle",distributed:!1,offsetX:0,offsetY:0,style:{fontSize:"12px",fontFamily:void 0,fontWeight:600,colors:void 0},background:{enabled:!0,foreColor:"#fff",borderRadius:2,padding:4,opacity:.9,borderWidth:1,borderColor:"#fff",dropShadow:{enabled:!1,top:1,left:1,blur:1,color:"#000",opacity:.45}},dropShadow:{enabled:!1,top:1,left:1,blur:1,color:"#000",opacity:.45}},fill:{type:"solid",colors:void 0,opacity:.85,gradient:{shade:"dark",type:"horizontal",shadeIntensity:.5,gradientToColors:void 0,inverseColors:!0,opacityFrom:1,opacityTo:1,stops:[0,50,100],colorStops:[]},image:{src:[],width:void 0,height:void 0},pattern:{style:"squares",width:6,height:6,strokeWidth:2}},grid:{show:!0,borderColor:"#e0e0e0",strokeDashArray:0,position:"back",xaxis:{lines:{show:!1}},yaxis:{lines:{show:!0}},row:{colors:void 0,opacity:.5},column:{colors:void 0,opacity:.5},padding:{top:0,right:10,bottom:0,left:12}},labels:[],legend:{show:!0,showForSingleSeries:!1,showForNullSeries:!0,showForZeroSeries:!0,floating:!1,position:"bottom",horizontalAlign:"center",inverseOrder:!1,fontSize:"12px",fontFamily:void 0,fontWeight:400,width:void 0,height:void 0,formatter:void 0,tooltipHoverFormatter:void 0,offsetX:-20,offsetY:0,labels:{colors:void 0,useSeriesColors:!1},markers:{width:12,height:12,strokeWidth:0,fillColors:void 0,strokeColor:"#fff",radius:12,customHTML:void 0,offsetX:0,offsetY:0,onClick:void 0},itemMargin:{horizontal:5,vertical:0},onItemClick:{toggleDataSeries:!0},onItemHover:{highlightDataSeries:!0}},markers:{discrete:[],size:0,colors:void 0,strokeColors:"#fff",strokeWidth:2,strokeOpacity:.9,strokeDashArray:0,fillOpacity:1,shape:"circle",radius:2,offsetX:0,offsetY:0,onClick:void 0,onDblClick:void 0,showNullDataPoints:!0,hover:{size:void 0,sizeOffset:3}},noData:{text:void 0,align:"center",verticalAlign:"middle",offsetX:0,offsetY:0,style:{color:void 0,fontSize:"14px",fontFamily:void 0}},responsive:[],series:void 0,states:{normal:{filter:{type:"none",value:0}},hover:{filter:{type:"lighten",value:.15}},active:{allowMultipleDataPointsSelection:!1,filter:{type:"darken",value:.65}}},title:{text:void 0,align:"left",margin:5,offsetX:0,offsetY:0,floating:!1,style:{fontSize:"14px",fontWeight:900,fontFamily:void 0,color:void 0}},subtitle:{text:void 0,align:"left",margin:5,offsetX:0,offsetY:30,floating:!1,style:{fontSize:"12px",fontWeight:400,fontFamily:void 0,color:void 0}},stroke:{show:!0,curve:"smooth",lineCap:"butt",width:2,colors:void 0,dashArray:0},tooltip:{enabled:!0,enabledOnSeries:void 0,shared:!0,followCursor:!1,intersect:!1,inverseOrder:!1,custom:void 0,fillSeriesColor:!1,theme:"light",style:{fontSize:"12px",fontFamily:void 0},onDatasetHover:{highlightDataSeries:!1},x:{show:!0,format:"dd MMM",formatter:void 0},y:{formatter:void 0,title:{formatter:function(t){return t}}},z:{formatter:void 0,title:"Size: "},marker:{show:!0,fillColors:void 0},items:{display:"flex"},fixed:{enabled:!1,position:"topRight",offsetX:0,offsetY:0}},xaxis:{type:"category",categories:[],convertedCatToNumeric:!1,sorted:!0,offsetX:0,offsetY:0,labels:{show:!0,rotate:-45,rotateAlways:!1,hideOverlappingLabels:!0,trim:!1,minHeight:void 0,maxHeight:120,showDuplicates:!0,style:{colors:[],fontSize:"12px",fontWeight:400,fontFamily:void 0,cssClass:""},offsetX:0,offsetY:0,format:void 0,formatter:void 0,datetimeUTC:!0,datetimeFormatter:{year:"yyyy",month:"MMM 'yy",day:"dd MMM",hour:"HH:mm",minute:"HH:mm:ss"}},axisBorder:{show:!0,color:"#e0e0e0",width:"100%",height:1,offsetX:0,offsetY:0},axisTicks:{show:!0,color:"#e0e0e0",height:6,offsetX:0,offsetY:0},tickAmount:void 0,tickPlacement:"on",min:void 0,max:void 0,range:void 0,floating:!1,position:"bottom",title:{text:void 0,offsetX:0,offsetY:0,style:{color:void 0,fontSize:"12px",fontWeight:900,fontFamily:void 0,cssClass:""}},crosshairs:{show:!0,width:1,position:"back",opacity:.9,stroke:{color:"#b6b6b6",width:1,dashArray:3},fill:{type:"solid",color:"#B1B9C4",gradient:{colorFrom:"#D8E3F0",colorTo:"#BED1E6",stops:[0,100],opacityFrom:.4,opacityTo:.5}},dropShadow:{enabled:!1,left:0,top:0,blur:1,opacity:.4}},tooltip:{enabled:!0,offsetY:0,formatter:void 0,style:{fontSize:"12px",fontFamily:void 0}}},yaxis:this.yAxis,theme:{mode:"light",palette:"palette1",monochrome:{enabled:!1,color:"#008FFB",shadeTo:"light",shadeIntensity:.65}}}}}]),t}(),C=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.graphics=new p(this.ctx),this.w.globals.isBarHorizontal&&(this.invertAxis=!0),this.helpers=new x(this),this.xAxisAnnotations=new b(this),this.yAxisAnnotations=new v(this),this.pointsAnnotations=new y(this),this.w.globals.isBarHorizontal&&this.w.config.yaxis[0].reversed&&(this.inversedReversedAxis=!0),this.xDivision=this.w.globals.gridWidth/this.w.globals.dataPoints}return a(t,[{key:"drawAxesAnnotations",value:function(){var t=this.w;if(t.globals.axisCharts){for(var e=this.yAxisAnnotations.drawYAxisAnnotations(),i=this.xAxisAnnotations.drawXAxisAnnotations(),a=this.pointsAnnotations.drawPointAnnotations(),s=t.config.chart.animations.enabled,r=[e,i,a],n=[i.node,e.node,a.node],o=0;o<3;o++)t.globals.dom.elGraphical.add(r[o]),!s||t.globals.resized||t.globals.dataChanged||"scatter"!==t.config.chart.type&&"bubble"!==t.config.chart.type&&t.globals.dataPoints>1&&n[o].classList.add("apexcharts-element-hidden"),t.globals.delayedElements.push({el:n[o],index:0});this.helpers.annotationsBackground()}}},{key:"drawShapeAnnos",value:function(){var t=this;this.w.config.annotations.shapes.map((function(e,i){t.addShape(e,i)}))}},{key:"drawImageAnnos",value:function(){var t=this;this.w.config.annotations.images.map((function(e,i){t.addImage(e,i)}))}},{key:"drawTextAnnos",value:function(){var t=this;this.w.config.annotations.texts.map((function(e,i){t.addText(e,i)}))}},{key:"addXaxisAnnotation",value:function(t,e,i){this.xAxisAnnotations.addXaxisAnnotation(t,e,i)}},{key:"addYaxisAnnotation",value:function(t,e,i){this.yAxisAnnotations.addYaxisAnnotation(t,e,i)}},{key:"addPointAnnotation",value:function(t,e,i){this.pointsAnnotations.addPointAnnotation(t,e,i)}},{key:"addText",value:function(t,e){var i=t.x,a=t.y,s=t.text,r=t.textAnchor,n=t.foreColor,o=t.fontSize,l=t.fontFamily,h=t.fontWeight,c=t.cssClass,d=t.backgroundColor,g=t.borderWidth,u=t.strokeDashArray,f=t.borderRadius,p=t.borderColor,x=t.appendTo,b=void 0===x?".apexcharts-annotations":x,m=t.paddingLeft,v=void 0===m?4:m,y=t.paddingRight,w=void 0===y?4:y,k=t.paddingBottom,A=void 0===k?2:k,S=t.paddingTop,C=void 0===S?2:S,L=this.w,P=this.graphics.drawText({x:i,y:a,text:s,textAnchor:r||"start",fontSize:o||"12px",fontWeight:h||"regular",fontFamily:l||L.config.chart.fontFamily,foreColor:n||L.config.chart.foreColor,cssClass:c}),T=L.globals.dom.baseEl.querySelector(b);T&&T.appendChild(P.node);var z=P.bbox();if(t.draggable&&this.helpers.makeAnnotationDraggable(P,"texts",e),s){var I=this.graphics.drawRect(z.x-v,z.y-C,z.width+v+w,z.height+A+C,f,d||"transparent",1,g,p,u);T.insertBefore(I.node,P.node)}}},{key:"addShape",value:function(t,e){var i={type:t.type,x:t.x||0,y:t.y||0,width:t.width||"100%",height:t.height||50,circleRadius:t.radius||25,backgroundColor:t.backgroundColor||"#fff",opacity:t.opacity||1,borderWidth:t.borderWidth||0,borderRadius:t.borderRadius||4,borderColor:t.borderColor||"#c2c2c2",appendTo:t.appendTo||".apexcharts-annotations"},a=this.w;String(i.width).indexOf("%")>-1&&(i.width=parseInt(i.width,10)*parseInt(a.globals.svgWidth,10)/100);var s=null;s="circle"===i.type?this.graphics.drawCircle(i.circleRadius,{fill:i.backgroundColor,stroke:i.borderColor,"stroke-width":i.borderWidth,opacity:i.opacity,cx:i.x,cy:i.y}):this.graphics.drawRect(i.x,i.y,i.width,i.height,i.borderRadius,i.backgroundColor,i.opacity,i.borderWidth,i.borderColor);var r=a.globals.dom.baseEl.querySelector(i.appendTo);r&&r.appendChild(s.node),t.draggable&&(this.helpers.makeAnnotationDraggable(s,"shapes",e),s.node.classList.add("apexcharts-resizable-element"))}},{key:"addImage",value:function(t,e){var i=this.w,a=t.path,s=t.x,r=void 0===s?0:s,n=t.y,o=void 0===n?0:n,l=t.width,h=void 0===l?20:l,c=t.height,d=void 0===c?20:c,g=t.appendTo,u=void 0===g?".apexcharts-annotations":g,f=i.globals.dom.Paper.image(a);f.size(h,d).move(r,o);var p=i.globals.dom.baseEl.querySelector(u);p&&p.appendChild(f.node),t.draggable&&(this.helpers.makeAnnotationDraggable(f,"images",e),f.node.classList.add("apexcharts-resizable-element"))}},{key:"addXaxisAnnotationExternal",value:function(t,e,i){return this.addAnnotationExternal({params:t,pushToMemory:e,context:i,type:"xaxis",contextMethod:i.addXaxisAnnotation}),i}},{key:"addYaxisAnnotationExternal",value:function(t,e,i){return this.addAnnotationExternal({params:t,pushToMemory:e,context:i,type:"yaxis",contextMethod:i.addYaxisAnnotation}),i}},{key:"addPointAnnotationExternal",value:function(t,e,i){return void 0===this.invertAxis&&(this.invertAxis=i.w.globals.isBarHorizontal),this.addAnnotationExternal({params:t,pushToMemory:e,context:i,type:"point",contextMethod:i.addPointAnnotation}),i}},{key:"addAnnotationExternal",value:function(t){var e=t.params,i=t.pushToMemory,a=t.context,s=t.type,r=t.contextMethod,n=a,o=n.w,l=o.globals.dom.baseEl.querySelector(".apexcharts-".concat(s,"-annotations")),h=l.childNodes.length+1,c=new S,d=Object.assign({},"xaxis"===s?c.xAxisAnnotation:"yaxis"===s?c.yAxisAnnotation:c.pointAnnotation),u=g.extend(d,e);switch(s){case"xaxis":this.addXaxisAnnotation(u,l,h);break;case"yaxis":this.addYaxisAnnotation(u,l,h);break;case"point":this.addPointAnnotation(u,l,h)}var f=o.globals.dom.baseEl.querySelector(".apexcharts-".concat(s,"-annotations .apexcharts-").concat(s,"-annotation-label[rel='").concat(h,"']")),p=this.helpers.addBackgroundToAnno(f,u);return p&&l.insertBefore(p.node,f),i&&o.globals.memory.methodsToExec.push({context:n,id:u.id?u.id:g.randomId(),method:r,label:"addAnnotation",params:e}),a}},{key:"clearAnnotations",value:function(t){var e=t.w,i=e.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxis-annotations, .apexcharts-xaxis-annotations, .apexcharts-point-annotations");e.globals.memory.methodsToExec.map((function(t,i){"addText"!==t.label&&"addAnnotation"!==t.label||e.globals.memory.methodsToExec.splice(i,1)})),i=g.listToArray(i),Array.prototype.forEach.call(i,(function(t){for(;t.firstChild;)t.removeChild(t.firstChild)}))}},{key:"removeAnnotation",value:function(t,e){var i=t.w,a=i.globals.dom.baseEl.querySelectorAll(".".concat(e));a&&(i.globals.memory.methodsToExec.map((function(t,a){t.id===e&&i.globals.memory.methodsToExec.splice(a,1)})),Array.prototype.forEach.call(a,(function(t){t.parentElement.removeChild(t)})))}}]),t}(),L=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.opts=null,this.seriesIndex=0}return a(t,[{key:"clippedImgArea",value:function(t){var e=this.w,i=e.config,a=parseInt(e.globals.gridWidth,10),s=parseInt(e.globals.gridHeight,10),r=a>s?a:s,n=t.image,o=0,l=0;void 0===t.width&&void 0===t.height?void 0!==i.fill.image.width&&void 0!==i.fill.image.height?(o=i.fill.image.width+1,l=i.fill.image.height):(o=r+1,l=r):(o=t.width,l=t.height);var h=document.createElementNS(e.globals.SVGNS,"pattern");p.setAttrs(h,{id:t.patternID,patternUnits:t.patternUnits?t.patternUnits:"userSpaceOnUse",width:o+"px",height:l+"px"});var c=document.createElementNS(e.globals.SVGNS,"image");h.appendChild(c),c.setAttributeNS(window.SVG.xlink,"href",n),p.setAttrs(c,{x:0,y:0,preserveAspectRatio:"none",width:o+"px",height:l+"px"}),c.style.opacity=t.opacity,e.globals.dom.elDefs.node.appendChild(h)}},{key:"getSeriesIndex",value:function(t){var e=this.w;return("bar"===e.config.chart.type||"rangeBar"===e.config.chart.type)&&e.config.plotOptions.bar.distributed||"heatmap"===e.config.chart.type?this.seriesIndex=t.seriesNumber:this.seriesIndex=t.seriesNumber%e.globals.series.length,this.seriesIndex}},{key:"fillPath",value:function(t){var e=this.w;this.opts=t;var i,a,s,r=this.w.config;this.seriesIndex=this.getSeriesIndex(t);var n=this.getFillColors()[this.seriesIndex];"function"==typeof n&&(n=n({seriesIndex:this.seriesIndex,dataPointIndex:t.dataPointIndex,value:t.value,w:e}));var o=this.getFillType(this.seriesIndex),l=Array.isArray(r.fill.opacity)?r.fill.opacity[this.seriesIndex]:r.fill.opacity,h=n;if(t.color&&(n=t.color),-1===n.indexOf("rgb")?n.length<9&&(h=g.hexToRgba(n,l)):n.indexOf("rgba")>-1&&(l=g.getOpacityFromRGBA(n)),t.opacity&&(l=t.opacity),"pattern"===o&&(a=this.handlePatternFill(a,n,l,h)),"gradient"===o&&(s=this.handleGradientFill(n,l,this.seriesIndex)),"image"===o){var c=r.fill.image.src,d=t.patternID?t.patternID:"";this.clippedImgArea({opacity:l,image:Array.isArray(c)?t.seriesNumber<c.length?c[t.seriesNumber]:c[0]:c,width:t.width?t.width:void 0,height:t.height?t.height:void 0,patternUnits:t.patternUnits,patternID:"pattern".concat(e.globals.cuid).concat(t.seriesNumber+1).concat(d)}),i="url(#pattern".concat(e.globals.cuid).concat(t.seriesNumber+1).concat(d,")")}else i="gradient"===o?s:"pattern"===o?a:h;return t.solid&&(i=h),i}},{key:"getFillType",value:function(t){var e=this.w;return Array.isArray(e.config.fill.type)?e.config.fill.type[t]:e.config.fill.type}},{key:"getFillColors",value:function(){var t=this.w,e=t.config,i=this.opts,a=[];return t.globals.comboCharts?"line"===t.config.series[this.seriesIndex].type?t.globals.stroke.colors instanceof Array?a=t.globals.stroke.colors:a.push(t.globals.stroke.colors):t.globals.fill.colors instanceof Array?a=t.globals.fill.colors:a.push(t.globals.fill.colors):"line"===e.chart.type?t.globals.stroke.colors instanceof Array?a=t.globals.stroke.colors:a.push(t.globals.stroke.colors):t.globals.fill.colors instanceof Array?a=t.globals.fill.colors:a.push(t.globals.fill.colors),void 0!==i.fillColors&&(a=[],i.fillColors instanceof Array?a=i.fillColors.slice():a.push(i.fillColors)),a}},{key:"handlePatternFill",value:function(t,e,i,a){var s=this.w.config,r=this.opts,n=new p(this.ctx),o=void 0===s.fill.pattern.strokeWidth?Array.isArray(s.stroke.width)?s.stroke.width[this.seriesIndex]:s.stroke.width:Array.isArray(s.fill.pattern.strokeWidth)?s.fill.pattern.strokeWidth[this.seriesIndex]:s.fill.pattern.strokeWidth,l=e;s.fill.pattern.style instanceof Array?t=void 0!==s.fill.pattern.style[r.seriesNumber]?n.drawPattern(s.fill.pattern.style[r.seriesNumber],s.fill.pattern.width,s.fill.pattern.height,l,o,i):a:t=n.drawPattern(s.fill.pattern.style,s.fill.pattern.width,s.fill.pattern.height,l,o,i);return t}},{key:"handleGradientFill",value:function(t,e,i){var a,s=this.w.config,r=this.opts,n=new p(this.ctx),o=new g,l=s.fill.gradient.type,h=t,c=void 0===s.fill.gradient.opacityFrom?e:Array.isArray(s.fill.gradient.opacityFrom)?s.fill.gradient.opacityFrom[i]:s.fill.gradient.opacityFrom;h.indexOf("rgba")>-1&&(c=g.getOpacityFromRGBA(h));var d=void 0===s.fill.gradient.opacityTo?e:Array.isArray(s.fill.gradient.opacityTo)?s.fill.gradient.opacityTo[i]:s.fill.gradient.opacityTo;if(void 0===s.fill.gradient.gradientToColors||0===s.fill.gradient.gradientToColors.length)a="dark"===s.fill.gradient.shade?o.shadeColor(-1*parseFloat(s.fill.gradient.shadeIntensity),t.indexOf("rgb")>-1?g.rgb2hex(t):t):o.shadeColor(parseFloat(s.fill.gradient.shadeIntensity),t.indexOf("rgb")>-1?g.rgb2hex(t):t);else{var u=s.fill.gradient.gradientToColors[r.seriesNumber];a=u,u.indexOf("rgba")>-1&&(d=g.getOpacityFromRGBA(u))}if(s.fill.gradient.inverseColors){var f=h;h=a,a=f}return h.indexOf("rgb")>-1&&(h=g.rgb2hex(h)),a.indexOf("rgb")>-1&&(a=g.rgb2hex(a)),n.drawGradient(l,h,a,c,d,r.size,s.fill.gradient.stops,s.fill.gradient.colorStops,i)}}]),t}(),P=function(){function t(i,a){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"setGlobalMarkerSize",value:function(){var t=this.w;if(t.globals.markers.size=Array.isArray(t.config.markers.size)?t.config.markers.size:[t.config.markers.size],t.globals.markers.size.length>0){if(t.globals.markers.size.length<t.globals.series.length+1)for(var e=0;e<=t.globals.series.length;e++)void 0===t.globals.markers.size[e]&&t.globals.markers.size.push(t.globals.markers.size[0])}else t.globals.markers.size=t.config.series.map((function(e){return t.config.markers.size}))}},{key:"plotChartMarkers",value:function(t,e,i,a){var s,r=arguments.length>4&&void 0!==arguments[4]&&arguments[4],n=this.w,o=e,l=t,h=null,c=new p(this.ctx);if((n.globals.markers.size[e]>0||r)&&(h=c.group({class:r?"":"apexcharts-series-markers"})).attr("clip-path","url(#gridRectMarkerMask".concat(n.globals.cuid,")")),l.x instanceof Array)for(var d=0;d<l.x.length;d++){var f=i;1===i&&0===d&&(f=0),1===i&&1===d&&(f=1);var x="apexcharts-marker";"line"!==n.config.chart.type&&"area"!==n.config.chart.type||n.globals.comboCharts||n.config.tooltip.intersect||(x+=" no-pointer-events");var b=Array.isArray(n.config.markers.size)?n.globals.markers.size[e]>0:n.config.markers.size>0;if(b||r){g.isNumber(l.y[d])?x+=" w".concat(g.randomId()):x="apexcharts-nullpoint";var m=this.getMarkerConfig(x,e,f);n.config.series[o].data[i]&&(n.config.series[o].data[i].fillColor&&(m.pointFillColor=n.config.series[o].data[i].fillColor),n.config.series[o].data[i].strokeColor&&(m.pointStrokeColor=n.config.series[o].data[i].strokeColor)),a&&(m.pSize=a),(s=c.drawMarker(l.x[d],l.y[d],m)).attr("rel",f),s.attr("j",f),s.attr("index",e),s.node.setAttribute("default-marker-size",m.pSize);var v=new u(this.ctx);v.setSelectionFilter(s,e,f),this.addEvents(s),h&&h.add(s)}else void 0===n.globals.pointsArray[e]&&(n.globals.pointsArray[e]=[]),n.globals.pointsArray[e].push([l.x[d],l.y[d]])}return h}},{key:"getMarkerConfig",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,a=this.w,s=this.getMarkerStyle(e),r=a.globals.markers.size[e],n=a.config.markers;return null!==i&&n.discrete.length&&n.discrete.map((function(t){t.seriesIndex===e&&t.dataPointIndex===i&&(s.pointStrokeColor=t.strokeColor,s.pointFillColor=t.fillColor,r=t.size)})),{pSize:r,pRadius:n.radius,pWidth:n.strokeWidth instanceof Array?n.strokeWidth[e]:n.strokeWidth,pointStrokeColor:s.pointStrokeColor,pointFillColor:s.pointFillColor,shape:n.shape instanceof Array?n.shape[e]:n.shape,class:t,pointStrokeOpacity:n.strokeOpacity instanceof Array?n.strokeOpacity[e]:n.strokeOpacity,pointStrokeDashArray:n.strokeDashArray instanceof Array?n.strokeDashArray[e]:n.strokeDashArray,pointFillOpacity:n.fillOpacity instanceof Array?n.fillOpacity[e]:n.fillOpacity,seriesIndex:e}}},{key:"addEvents",value:function(t){var e=this.w,i=new p(this.ctx);t.node.addEventListener("mouseenter",i.pathMouseEnter.bind(this.ctx,t)),t.node.addEventListener("mouseleave",i.pathMouseLeave.bind(this.ctx,t)),t.node.addEventListener("mousedown",i.pathMouseDown.bind(this.ctx,t)),t.node.addEventListener("click",e.config.markers.onClick),t.node.addEventListener("dblclick",e.config.markers.onDblClick),t.node.addEventListener("touchstart",i.pathMouseDown.bind(this.ctx,t),{passive:!0})}},{key:"getMarkerStyle",value:function(t){var e=this.w,i=e.globals.markers.colors,a=e.config.markers.strokeColor||e.config.markers.strokeColors;return{pointStrokeColor:a instanceof Array?a[t]:a,pointFillColor:i instanceof Array?i[t]:i}}}]),t}(),T=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.initialAnim=this.w.config.chart.animations.enabled,this.dynamicAnim=this.initialAnim&&this.w.config.chart.animations.dynamicAnimation.enabled}return a(t,[{key:"draw",value:function(t,e,i){var a=this.w,s=new p(this.ctx),r=i.realIndex,n=i.pointsPos,o=i.zRatio,l=i.elParent,h=s.group({class:"apexcharts-series-markers apexcharts-series-".concat(a.config.chart.type)});if(h.attr("clip-path","url(#gridRectMarkerMask".concat(a.globals.cuid,")")),n.x instanceof Array)for(var c=0;c<n.x.length;c++){var d=e+1,g=!0;0===e&&0===c&&(d=0),0===e&&1===c&&(d=1);var u=0,f=a.globals.markers.size[r];if(o!==1/0){f=a.globals.seriesZ[r][d]/o;var x=a.config.plotOptions.bubble;x.minBubbleRadius&&f<x.minBubbleRadius&&(f=x.minBubbleRadius),x.maxBubbleRadius&&f>x.maxBubbleRadius&&(f=x.maxBubbleRadius)}a.config.chart.animations.enabled||(u=f);var b=n.x[c],m=n.y[c];if(u=u||0,null!==m&&void 0!==a.globals.series[r][d]||(g=!1),g){var v=this.drawPoint(b,m,u,f,r,d,e);h.add(v)}l.add(h)}}},{key:"drawPoint",value:function(t,e,i,a,s,r,n){var o=this.w,l=s,h=new f(this.ctx),c=new u(this.ctx),d=new L(this.ctx),g=new P(this.ctx),x=new p(this.ctx),b=g.getMarkerConfig("apexcharts-marker",l),m=d.fillPath({seriesNumber:s,dataPointIndex:r,patternUnits:"objectBoundingBox",value:o.globals.series[s][n]}),v=x.drawCircle(i);if(o.config.series[l].data[r]&&o.config.series[l].data[r].fillColor&&(m=o.config.series[l].data[r].fillColor),v.attr({cx:t,cy:e,fill:m,stroke:b.pointStrokeColor,"stroke-width":b.pWidth,"stroke-dasharray":b.pointStrokeDashArray,"stroke-opacity":b.pointStrokeOpacity}),o.config.chart.dropShadow.enabled){var y=o.config.chart.dropShadow;c.dropShadow(v,y,s)}if(this.initialAnim&&!o.globals.dataChanged){var w=1;o.globals.resized||(w=o.config.chart.animations.speed),h.animateCircleRadius(v,0,a,w,o.globals.easing,(function(){window.setTimeout((function(){h.animationCompleted(v)}),100)}))}if(o.globals.dataChanged)if(this.dynamicAnim){var k,A,S,C,T=o.config.chart.animations.dynamicAnimation.speed;null!=(C=o.globals.previousPaths[s]&&o.globals.previousPaths[s][n])&&(k=C.x,A=C.y,S=void 0!==C.r?C.r:a);for(var z=0;z<o.globals.collapsedSeries.length;z++)o.globals.collapsedSeries[z].index===s&&(T=1,a=0);0===t&&0===e&&(a=0),h.animateCircle(v,{cx:k,cy:A,r:S},{cx:t,cy:e,r:a},T,o.globals.easing)}else v.attr({r:a});return v.attr({rel:r,j:r,index:s,"default-marker-size":a}),c.setSelectionFilter(v,s,r),g.addEvents(v),v.node.classList.add("apexcharts-marker"),v}},{key:"centerTextInBubble",value:function(t){var e=this.w;return{y:t+=parseInt(e.config.dataLabels.style.fontSize,10)/4}}}]),t}(),z=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"dataLabelsCorrection",value:function(t,e,i,a,s,r,n){var o=this.w,l=!1,h=new p(this.ctx).getTextRects(i,n),c=h.width,d=h.height;void 0===o.globals.dataLabelsRects[a]&&(o.globals.dataLabelsRects[a]=[]),o.globals.dataLabelsRects[a].push({x:t,y:e,width:c,height:d});var g=o.globals.dataLabelsRects[a].length-2,u=void 0!==o.globals.lastDrawnDataLabelsIndexes[a]?o.globals.lastDrawnDataLabelsIndexes[a][o.globals.lastDrawnDataLabelsIndexes[a].length-1]:0;if(void 0!==o.globals.dataLabelsRects[a][g]){var f=o.globals.dataLabelsRects[a][u];(t>f.x+f.width+2||e>f.y+f.height+2||t+c<f.x)&&(l=!0)}return(0===s||r)&&(l=!0),{x:t,y:e,textRects:h,drawnextLabel:l}}},{key:"drawDataLabel",value:function(t,e,i){var a=this,s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:2,r=this.w,n=new p(this.ctx),o=r.config.dataLabels,l=0,h=0,c=i,d=null;if(!o.enabled||t.x instanceof Array!=!0)return d;d=n.group({class:"apexcharts-data-labels"});for(var g=0;g<t.x.length;g++)if(l=t.x[g]+o.offsetX,h=t.y[g]+o.offsetY+s,!isNaN(l)){1===i&&0===g&&(c=0),1===i&&1===g&&(c=1);var u=r.globals.series[e][c],f="",x=function(t){return r.config.dataLabels.formatter(t,{ctx:a.ctx,seriesIndex:e,dataPointIndex:c,w:r})};if("bubble"===r.config.chart.type){f=x(u=r.globals.seriesZ[e][c]),h=t.y[g];var b=new T(this.ctx),m=b.centerTextInBubble(h,e,c);h=m.y}else void 0!==u&&(f=x(u));this.plotDataLabelsText({x:l,y:h,text:f,i:e,j:c,parent:d,offsetCorrection:!0,dataLabelsConfig:r.config.dataLabels})}return d}},{key:"plotDataLabelsText",value:function(t){var e=this.w,i=new p(this.ctx),a=t.x,s=t.y,r=t.i,n=t.j,o=t.text,l=t.textAnchor,h=t.parent,c=t.dataLabelsConfig,d=t.color,g=t.alwaysDrawDataLabel,f=t.offsetCorrection;if(!(Array.isArray(e.config.dataLabels.enabledOnSeries)&&e.config.dataLabels.enabledOnSeries.indexOf(r)<0)){var x={x:a,y:s,drawnextLabel:!0};f&&(x=this.dataLabelsCorrection(a,s,o,r,n,g,parseInt(c.style.fontSize,10))),e.globals.zoomed||(a=x.x,s=x.y),x.textRects&&(a+x.textRects.width<-20||a>e.globals.gridWidth+20)&&(o="");var b=e.globals.dataLabels.style.colors[r];(("bar"===e.config.chart.type||"rangeBar"===e.config.chart.type)&&e.config.plotOptions.bar.distributed||e.config.dataLabels.distributed)&&(b=e.globals.dataLabels.style.colors[n]),d&&(b=d);var m=c.offsetX,v=c.offsetY;if("bar"!==e.config.chart.type&&"rangeBar"!==e.config.chart.type||(m=0,v=0),x.drawnextLabel){var y=i.drawText({width:100,height:parseInt(c.style.fontSize,10),x:a+m,y:s+v,foreColor:b,textAnchor:l||c.textAnchor,text:o,fontSize:c.style.fontSize,fontFamily:c.style.fontFamily,fontWeight:c.style.fontWeight||"normal"});if(y.attr({class:"apexcharts-datalabel",cx:a,cy:s}),c.dropShadow.enabled){var w=c.dropShadow;new u(this.ctx).dropShadow(y,w)}h.add(y),void 0===e.globals.lastDrawnDataLabelsIndexes[r]&&(e.globals.lastDrawnDataLabelsIndexes[r]=[]),e.globals.lastDrawnDataLabelsIndexes[r].push(n)}}}},{key:"addBackgroundToDataLabel",value:function(t,e){var i=this.w,a=i.config.dataLabels.background,s=a.padding,r=a.padding/2,n=e.width,o=e.height,l=new p(this.ctx).drawRect(e.x-s,e.y-r/2,n+2*s,o+r,a.borderRadius,"transparent"===i.config.chart.background?"#fff":i.config.chart.background,a.opacity,a.borderWidth,a.borderColor);a.dropShadow.enabled&&new u(this.ctx).dropShadow(l,a.dropShadow);return l}},{key:"dataLabelsBackground",value:function(){var t=this.w;if("bubble"!==t.config.chart.type)for(var e=t.globals.dom.baseEl.querySelectorAll(".apexcharts-datalabels text"),i=0;i<e.length;i++){var a=e[i],s=a.getBBox(),r=null;if(s.width&&s.height&&(r=this.addBackgroundToDataLabel(a,s)),r){a.parentNode.insertBefore(r.node,a);var n=a.getAttribute("fill");t.config.chart.animations.enabled&&!t.globals.resized&&!t.globals.dataChanged?r.animate().attr({fill:n}):r.attr({fill:n}),a.setAttribute("fill",t.config.dataLabels.background.foreColor)}}}},{key:"bringForward",value:function(){for(var t=this.w,e=t.globals.dom.baseEl.getElementsByClassName("apexcharts-datalabels"),i=t.globals.dom.baseEl.querySelector(".apexcharts-plot-series:last-child"),a=0;a<e.length;a++)i&&i.insertBefore(e[a],i.nextSibling)}}]),t}(),I=function(){function t(i){e(this,t),this.w=i.w,this.barCtx=i}return a(t,[{key:"handleBarDataLabels",value:function(t){var e=t.x,i=t.y,a=t.y1,s=t.y2,r=t.i,n=t.j,o=t.realIndex,l=t.series,h=t.barHeight,c=t.barWidth,d=t.barYPosition,g=t.visibleSeries,u=t.renderedPath,f=this.w,x=new p(this.barCtx.ctx),b=Array.isArray(this.barCtx.strokeWidth)?this.barCtx.strokeWidth[o]:this.barCtx.strokeWidth,m=e+parseFloat(c*g),v=i+parseFloat(h*g);f.globals.isXNumeric&&!f.globals.isBarHorizontal&&(m=e+parseFloat(c*(g+1)),v=i+parseFloat(h*(g+1))-b);var y=e,w=i,k={},A=f.config.dataLabels,S=this.barCtx.barOptions.dataLabels;void 0!==d&&this.barCtx.isTimelineBar&&(v=d,w=d);var C=A.offsetX,L=A.offsetY,P={width:0,height:0};f.config.dataLabels.enabled&&(P=x.getTextRects(f.globals.yLabelFormatters[0](f.globals.maxY),parseFloat(A.style.fontSize)));var T={x:e,y:i,i:r,j:n,renderedPath:u,bcx:m,bcy:v,barHeight:h,barWidth:c,textRects:P,strokeWidth:b,dataLabelsX:y,dataLabelsY:w,barDataLabelsConfig:S,offX:C,offY:L};return k=this.barCtx.isHorizontal?this.calculateBarsDataLabelsPosition(T):this.calculateColumnsDataLabelsPosition(T),u.attr({cy:k.bcy,cx:k.bcx,j:n,val:l[r][n],barHeight:h,barWidth:c}),this.drawCalculatedDataLabels({x:k.dataLabelsX,y:k.dataLabelsY,val:this.barCtx.isTimelineBar?[a,s]:l[r][n],i:o,j:n,barWidth:c,barHeight:h,textRects:P,dataLabelsConfig:A})}},{key:"calculateColumnsDataLabelsPosition",value:function(t){var e,i=this.w,a=t.i,s=t.j,r=t.y,n=t.bcx,o=t.barWidth,l=t.barHeight,h=t.textRects,c=t.dataLabelsY,d=t.barDataLabelsConfig,g=t.strokeWidth,u=t.offX,f=t.offY;l=Math.abs(l);var p="vertical"===i.config.plotOptions.bar.dataLabels.orientation;n-=g/2;var x=i.globals.gridWidth/i.globals.dataPoints;if(e=i.globals.isXNumeric?n-o/2+u:n-x+o/2+u,p){e=e+h.height/2-g/2-2}var b=this.barCtx.series[a][s]<0;switch(this.barCtx.isReversed&&(r-=l),d.position){case"center":c=p?b?r+l/2+f:r+l/2-f:b?r+l/2+h.height/2+f:r+l/2+h.height/2-f;break;case"bottom":c=p?b?r+l+f:r+l-f:b?r+l+h.height+g+f:r+l-h.height/2+g-f;break;case"top":c=p?b?r+f:r-f:b?r-h.height/2-f:r+h.height+f}return i.config.chart.stacked||(c<0?c=0+g:c+h.height/3>i.globals.gridHeight&&(c=i.globals.gridHeight-g)),{bcx:n,bcy:r,dataLabelsX:e,dataLabelsY:c}}},{key:"calculateBarsDataLabelsPosition",value:function(t){var e=this.w,i=t.x,a=t.i,s=t.j,r=t.bcy,n=t.barHeight,o=t.barWidth,l=t.textRects,h=t.dataLabelsX,c=t.strokeWidth,d=t.barDataLabelsConfig,g=t.offX,u=t.offY,f=e.globals.gridHeight/e.globals.dataPoints;o=Math.abs(o);var p=r-(this.barCtx.isTimelineBar?0:f)+n/2+l.height/2+u-3,x=this.barCtx.series[a][s]<0,b=i;switch(this.barCtx.isReversed&&(b=i+o,i=e.globals.gridWidth-o),d.position){case"center":h=x?b-o/2-g:b-o/2+g;break;case"bottom":h=x?b+o-c-Math.round(l.width/2)-g:b-o+c+Math.round(l.width/2)+g;break;case"top":h=x?b-c+Math.round(l.width/2)-g:b-c-Math.round(l.width/2)+g}return e.config.chart.stacked||(h<0?h=h+l.width+c:h+l.width/2>e.globals.gridWidth&&(h=e.globals.gridWidth-l.width-c)),{bcx:i,bcy:r,dataLabelsX:h,dataLabelsY:p}}},{key:"drawCalculatedDataLabels",value:function(t){var e=t.x,i=t.y,a=t.val,s=t.i,r=t.j,o=t.textRects,l=t.barHeight,h=t.barWidth,c=t.dataLabelsConfig,d=this.w,g="rotate(0)";"vertical"===d.config.plotOptions.bar.dataLabels.orientation&&(g="rotate(-90, ".concat(e,", ").concat(i,")"));var u=new z(this.barCtx.ctx),f=new p(this.barCtx.ctx),x=c.formatter,b=null,m=d.globals.collapsedSeriesIndices.indexOf(s)>-1;if(c.enabled&&!m){b=f.group({class:"apexcharts-data-labels",transform:g});var v="";void 0!==a&&(v=x(a,{seriesIndex:s,dataPointIndex:r,w:d})),0===a&&d.config.chart.stacked&&(v="");var y=d.globals.series[s][r]<=0,w=d.config.plotOptions.bar.dataLabels.position;if("vertical"===d.config.plotOptions.bar.dataLabels.orientation&&("top"===w&&(c.textAnchor=y?"end":"start"),"center"===w&&(c.textAnchor="middle"),"bottom"===w&&(c.textAnchor=y?"end":"start")),this.barCtx.isTimelineBar&&this.barCtx.barOptions.dataLabels.hideOverflowingLabels)h<f.getTextRects(v,parseFloat(c.style.fontSize)).width&&(v="");d.config.chart.stacked&&this.barCtx.barOptions.dataLabels.hideOverflowingLabels&&(this.barCtx.isHorizontal?((h=Math.abs(d.globals.series[s][r])/this.barCtx.invertedYRatio[this.barCtx.yaxisIndex])>0&&o.width/1.6>h||h<0&&o.width/1.6<h)&&(v=""):(l=Math.abs(d.globals.series[s][r])/this.barCtx.yRatio[this.barCtx.yaxisIndex],o.height/1.6>l&&(v="")));var k=n({},c);this.barCtx.isHorizontal&&a<0&&("start"===c.textAnchor?k.textAnchor="end":"end"===c.textAnchor&&(k.textAnchor="start")),u.plotDataLabelsText({x:e,y:i,text:v,i:s,j:r,parent:b,dataLabelsConfig:k,alwaysDrawDataLabel:!0,offsetCorrection:!0})}return b}}]),t}(),M=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.legendInactiveClass="legend-mouseover-inactive"}return a(t,[{key:"getAllSeriesEls",value:function(){return this.w.globals.dom.baseEl.getElementsByClassName("apexcharts-series")}},{key:"getSeriesByName",value:function(t){return this.w.globals.dom.baseEl.querySelector("[seriesName='".concat(g.escapeString(t),"']"))}},{key:"isSeriesHidden",value:function(t){var e=this.getSeriesByName(t),i=parseInt(e.getAttribute("data:realIndex"),10);return{isHidden:e.classList.contains("apexcharts-series-collapsed"),realIndex:i}}},{key:"addCollapsedClassToSeries",value:function(t,e){var i=this.w;function a(i){for(var a=0;a<i.length;a++)i[a].index===e&&t.node.classList.add("apexcharts-series-collapsed")}a(i.globals.collapsedSeries),a(i.globals.ancillaryCollapsedSeries)}},{key:"toggleSeries",value:function(t){var e=this.isSeriesHidden(t);return this.ctx.legend.legendHelpers.toggleDataSeries(e.realIndex,e.isHidden),e.isHidden}},{key:"showSeries",value:function(t){var e=this.isSeriesHidden(t);e.isHidden&&this.ctx.legend.legendHelpers.toggleDataSeries(e.realIndex,!0)}},{key:"hideSeries",value:function(t){var e=this.isSeriesHidden(t);e.isHidden||this.ctx.legend.legendHelpers.toggleDataSeries(e.realIndex,!1)}},{key:"resetSeries",value:function(){var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],a=this.w,s=a.globals.initialSeries.slice();a.config.series=s,a.globals.previousPaths=[],i&&(a.globals.collapsedSeries=[],a.globals.ancillaryCollapsedSeries=[],a.globals.collapsedSeriesIndices=[],a.globals.ancillaryCollapsedSeriesIndices=[]),t&&(e&&(a.globals.zoomed=!1,this.ctx.updateHelpers.revertDefaultAxisMinMax()),this.ctx.updateHelpers._updateSeries(s,a.config.chart.animations.dynamicAnimation.enabled))}},{key:"toggleSeriesOnHover",value:function(t,e){var i=this.w,a=i.globals.dom.baseEl.querySelectorAll(".apexcharts-series, .apexcharts-datalabels");if("mousemove"===t.type){var s=parseInt(e.getAttribute("rel"),10)-1,r=null,n=null;i.globals.axisCharts||"radialBar"===i.config.chart.type?i.globals.axisCharts?(r=i.globals.dom.baseEl.querySelector(".apexcharts-series[data\\:realIndex='".concat(s,"']")),n=i.globals.dom.baseEl.querySelector(".apexcharts-datalabels[data\\:realIndex='".concat(s,"']"))):r=i.globals.dom.baseEl.querySelector(".apexcharts-series[rel='".concat(s+1,"']")):r=i.globals.dom.baseEl.querySelector(".apexcharts-series[rel='".concat(s+1,"'] path"));for(var o=0;o<a.length;o++)a[o].classList.add(this.legendInactiveClass);null!==r&&(i.globals.axisCharts||r.parentNode.classList.remove(this.legendInactiveClass),r.classList.remove(this.legendInactiveClass),null!==n&&n.classList.remove(this.legendInactiveClass))}else if("mouseout"===t.type)for(var l=0;l<a.length;l++)a[l].classList.remove(this.legendInactiveClass)}},{key:"highlightRangeInSeries",value:function(t,e){var i=this,a=this.w,s=a.globals.dom.baseEl.getElementsByClassName("apexcharts-heatmap-rect"),r=function(t){for(var e=0;e<s.length;e++)s[e].classList[t](i.legendInactiveClass)};if("mousemove"===t.type){var n=parseInt(e.getAttribute("rel"),10)-1;r("add"),function(t){for(var e=0;e<s.length;e++){var a=parseInt(s[e].getAttribute("val"),10);a>=t.from&&a<=t.to&&s[e].classList.remove(i.legendInactiveClass)}}(a.config.plotOptions.heatmap.colorScale.ranges[n])}else"mouseout"===t.type&&r("remove")}},{key:"getActiveConfigSeriesIndex",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=this.w,i=0;if(e.config.series.length>1)for(var a=e.config.series.map((function(i,a){var s=!1;return t&&(s="bar"===e.config.series[a].type||"column"===e.config.series[a].type),i.data&&i.data.length>0&&!s?a:-1})),s=0;s<a.length;s++)if(-1!==a[s]){i=a[s];break}return i}},{key:"getPreviousPaths",value:function(){var t=this.w;function e(e,i,a){for(var s=e[i].childNodes,r={type:a,paths:[],realIndex:e[i].getAttribute("data:realIndex")},n=0;n<s.length;n++)if(s[n].hasAttribute("pathTo")){var o=s[n].getAttribute("pathTo");r.paths.push({d:o})}t.globals.previousPaths.push(r)}t.globals.previousPaths=[];["line","area","bar","candlestick","radar"].forEach((function(i){for(var a,s=(a=i,t.globals.dom.baseEl.querySelectorAll(".apexcharts-".concat(a,"-series .apexcharts-series"))),r=0;r<s.length;r++)e(s,r,i)})),this.handlePrevBubbleScatterPaths("bubble"),this.handlePrevBubbleScatterPaths("scatter");var i=t.globals.dom.baseEl.querySelectorAll(".apexcharts-heatmap .apexcharts-series");if(i.length>0)for(var a=0;a<i.length;a++){for(var s=t.globals.dom.baseEl.querySelectorAll(".apexcharts-heatmap .apexcharts-series[data\\:realIndex='".concat(a,"'] rect")),r=[],n=0;n<s.length;n++)r.push({color:s[n].getAttribute("color")});t.globals.previousPaths.push(r)}t.globals.axisCharts||(t.globals.previousPaths=t.globals.series)}},{key:"handlePrevBubbleScatterPaths",value:function(t){var e=this.w,i=e.globals.dom.baseEl.querySelectorAll(".apexcharts-".concat(t,"-series .apexcharts-series"));if(i.length>0)for(var a=0;a<i.length;a++){for(var s=e.globals.dom.baseEl.querySelectorAll(".apexcharts-".concat(t,"-series .apexcharts-series[data\\:realIndex='").concat(a,"'] circle")),r=[],n=0;n<s.length;n++)r.push({x:s[n].getAttribute("cx"),y:s[n].getAttribute("cy"),r:s[n].getAttribute("r")});e.globals.previousPaths.push(r)}}},{key:"clearPreviousPaths",value:function(){var t=this.w;t.globals.previousPaths=[],t.globals.allSeriesCollapsed=!1}},{key:"handleNoData",value:function(){var t=this.w,e=t.config.noData,i=new p(this.ctx),a=t.globals.svgWidth/2,s=t.globals.svgHeight/2,r="middle";if(t.globals.noData=!0,t.globals.animationEnded=!0,"left"===e.align?(a=10,r="start"):"right"===e.align&&(a=t.globals.svgWidth-10,r="end"),"top"===e.verticalAlign?s=50:"bottom"===e.verticalAlign&&(s=t.globals.svgHeight-50),a+=e.offsetX,s=s+parseInt(e.style.fontSize,10)+2+e.offsetY,void 0!==e.text&&""!==e.text){var n=i.drawText({x:a,y:s,text:e.text,textAnchor:r,fontSize:e.style.fontSize,fontFamily:e.style.fontFamily,foreColor:e.style.color,opacity:1,class:"apexcharts-text-nodata"});t.globals.dom.Paper.add(n)}}},{key:"setNullSeriesToZeroValues",value:function(t){for(var e=this.w,i=0;i<t.length;i++)if(0===t[i].length)for(var a=0;a<t[e.globals.maxValsInArrayIndex].length;a++)t[i].push(0);return t}},{key:"hasAllSeriesEqualX",value:function(){for(var t=!0,e=this.w,i=this.filteredSeriesX(),a=0;a<i.length-1;a++)if(i[a][0]!==i[a+1][0]){t=!1;break}return e.globals.allSeriesHasEqualX=t,t}},{key:"filteredSeriesX",value:function(){var t=this.w.globals.seriesX.map((function(t){return t.length>0?t:[]}));return t}}]),t}(),X=function(){function t(i){e(this,t),this.w=i.w,this.barCtx=i}return a(t,[{key:"initVariables",value:function(t){var e=this.w;this.barCtx.series=t,this.barCtx.totalItems=0,this.barCtx.seriesLen=0,this.barCtx.visibleI=-1,this.barCtx.visibleItems=1;for(var i=0;i<t.length;i++)if(t[i].length>0&&(this.barCtx.seriesLen=this.barCtx.seriesLen+1,this.barCtx.totalItems+=t[i].length),e.globals.isXNumeric)for(var a=0;a<t[i].length;a++)e.globals.seriesX[i][a]>e.globals.minX&&e.globals.seriesX[i][a]<e.globals.maxX&&this.barCtx.visibleItems++;else this.barCtx.visibleItems=e.globals.dataPoints;0===this.barCtx.seriesLen&&(this.barCtx.seriesLen=1)}},{key:"initialPositions",value:function(){var t,e,i,a,s,r,n,o,l=this.w,h=l.globals.dataPoints;if(this.barCtx.isTimelineBar&&(h=l.globals.labels.length),this.barCtx.isHorizontal)s=(i=l.globals.gridHeight/h)/this.barCtx.seriesLen,l.globals.isXNumeric&&(s=(i=l.globals.gridHeight/this.barCtx.totalItems)/this.barCtx.seriesLen),s=s*parseInt(this.barCtx.barOptions.barHeight,10)/100,o=this.barCtx.baseLineInvertedY+l.globals.padHorizontal+(this.barCtx.isReversed?l.globals.gridWidth:0)-(this.barCtx.isReversed?2*this.barCtx.baseLineInvertedY:0),e=(i-s*this.barCtx.seriesLen)/2;else{if(a=l.globals.gridWidth/this.barCtx.visibleItems,l.config.xaxis.convertedCatToNumeric&&(a=l.globals.gridWidth/l.globals.dataPoints),r=a/this.barCtx.seriesLen*parseInt(this.barCtx.barOptions.columnWidth,10)/100,l.globals.isXNumeric){var c=this.barCtx.xRatio;l.config.xaxis.convertedCatToNumeric&&(c=this.barCtx.initialXRatio),l.globals.minXDiff&&l.globals.minXDiff/c>0&&(a=l.globals.minXDiff/c),(r=a/this.barCtx.seriesLen*parseInt(this.barCtx.barOptions.columnWidth,10)/100)<1&&(r=1)}n=l.globals.gridHeight-this.barCtx.baseLineY[this.barCtx.yaxisIndex]-(this.barCtx.isReversed?l.globals.gridHeight:0)+(this.barCtx.isReversed?2*this.barCtx.baseLineY[this.barCtx.yaxisIndex]:0),t=l.globals.padHorizontal+(a-r*this.barCtx.seriesLen)/2}return{x:t,y:e,yDivision:i,xDivision:a,barHeight:s,barWidth:r,zeroH:n,zeroW:o}}},{key:"getPathFillColor",value:function(t,e,i,a){var s=this.w,r=new L(this.barCtx.ctx),n=null,o=this.barCtx.barOptions.distributed?i:e;this.barCtx.barOptions.colors.ranges.length>0&&this.barCtx.barOptions.colors.ranges.map((function(a){t[e][i]>=a.from&&t[e][i]<=a.to&&(n=a.color)}));return s.config.series[e].data[i]&&s.config.series[e].data[i].fillColor&&(n=s.config.series[e].data[i].fillColor),r.fillPath({seriesNumber:this.barCtx.barOptions.distributed?o:a,dataPointIndex:i,color:n,value:t[e][i]})}},{key:"getStrokeWidth",value:function(t,e,i){var a=0,s=this.w;return void 0===this.barCtx.series[t][e]||null===this.barCtx.series[t][e]?this.barCtx.isNullValue=!0:this.barCtx.isNullValue=!1,s.config.stroke.show&&(this.barCtx.isNullValue||(a=Array.isArray(this.barCtx.strokeWidth)?this.barCtx.strokeWidth[i]:this.barCtx.strokeWidth)),a}},{key:"barBackground",value:function(t){var e=t.bc,i=t.i,a=t.x1,s=t.x2,r=t.y1,n=t.y2,o=t.elSeries,l=this.w,h=new p(this.barCtx.ctx),c=new M(this.barCtx.ctx).getActiveConfigSeriesIndex();if(this.barCtx.barOptions.colors.backgroundBarColors.length>0&&c===i){e>=this.barCtx.barOptions.colors.backgroundBarColors.length&&(e=0);var d=this.barCtx.barOptions.colors.backgroundBarColors[e],g=h.drawRect(void 0!==a?a:0,void 0!==r?r:0,void 0!==s?s:l.globals.gridWidth,void 0!==n?n:l.globals.gridHeight,this.barCtx.barOptions.colors.backgroundBarRadius,d,this.barCtx.barOptions.colors.backgroundBarOpacity);o.add(g),g.node.classList.add("apexcharts-backgroundBar")}}},{key:"getColumnPaths",value:function(t){var e=t.barWidth,i=t.barXPosition,a=t.yRatio,s=t.y1,r=t.y2,n=t.strokeWidth,o=t.series,l=t.realIndex,h=t.i,c=t.j,d=t.w,g=new p(this.barCtx.ctx);(n=Array.isArray(n)?n[l]:n)||(n=0);var u={barWidth:e,strokeWidth:n,yRatio:a,barXPosition:i,y1:s,y2:r},f=this.getRoundedBars(d,u,o,h,c),x=i,b=i+e,m=g.move(x,f.y1),v=g.move(x,f.y1);return d.globals.previousPaths.length>0&&(v=this.barCtx.getPreviousPath(l,c,!1)),{pathTo:m=m+g.line(x,f.y2)+f.endingPath+g.line(b-n,f.y2)+g.line(b-n,f.y1)+f.startingPath+"z",pathFrom:v=v+g.line(x,s)+g.line(b-n,s)+g.line(b-n,s)+g.line(b-n,s)+g.line(x,s)}}},{key:"getBarpaths",value:function(t){var e=t.barYPosition,i=t.barHeight,a=t.x1,s=t.x2,r=t.strokeWidth,n=t.series,o=t.realIndex,l=t.i,h=t.j,c=t.w,d=new p(this.barCtx.ctx);(r=Array.isArray(r)?r[o]:r)||(r=0);var g={barHeight:i,strokeWidth:r,barYPosition:e,x2:s,x1:a},u=this.getRoundedBars(c,g,n,l,h),f=d.move(u.x1,e),x=d.move(u.x1,e);c.globals.previousPaths.length>0&&(x=this.barCtx.getPreviousPath(o,h,!1));var b=e,m=e+i;return{pathTo:f=f+d.line(u.x2,b)+u.endingPath+d.line(u.x2,m-r)+d.line(u.x1,m-r)+u.startingPath+"z",pathFrom:x=x+d.line(a,b)+d.line(a,m-r)+d.line(a,m-r)+d.line(a,m-r)+d.line(a,b)}}},{key:"getRoundedBars",value:function(t,e,i,a,s){var r=new p(this.barCtx.ctx),n=Array.isArray(e.strokeWidth)?e.strokeWidth[a]:e.strokeWidth;if(n||(n=0),this.barCtx.isHorizontal){var o=null,l="",h=e.x2,c=e.x1;if(void 0!==i[a][s]||null!==i[a][s]){var d=i[a][s]<0,g=e.barHeight/2-n;switch(d&&(g=-e.barHeight/2-n),g>Math.abs(h-c)&&(g=Math.abs(h-c)),"rounded"===this.barCtx.barOptions.endingShape&&(h=e.x2-g/2),"rounded"===this.barCtx.barOptions.startingShape&&(c=e.x1+g/2),this.barCtx.barOptions.endingShape){case"flat":o=r.line(h,e.barYPosition+e.barHeight-n);break;case"rounded":o=r.quadraticCurve(h+g,e.barYPosition+(e.barHeight-n)/2,h,e.barYPosition+e.barHeight-n)}switch(this.barCtx.barOptions.startingShape){case"flat":l=r.line(c,e.barYPosition+e.barHeight-n);break;case"rounded":l=r.quadraticCurve(c-g,e.barYPosition+e.barHeight/2,c,e.barYPosition)}}return{endingPath:o,startingPath:l,x2:h,x1:c}}var u=null,f="",x=e.y2,b=e.y1;if(void 0!==i[a][s]||null!==i[a][s]){var m=i[a][s]<0,v=e.barWidth/2-n;switch(m&&(v=-e.barWidth/2-n),v>Math.abs(x-b)&&(v=Math.abs(x-b)),"rounded"===this.barCtx.barOptions.endingShape&&(x+=v/2),"rounded"===this.barCtx.barOptions.startingShape&&(b-=v/2),this.barCtx.barOptions.endingShape){case"flat":u=r.line(e.barXPosition+e.barWidth-n,x);break;case"rounded":u=r.quadraticCurve(e.barXPosition+(e.barWidth-n)/2,x-v,e.barXPosition+e.barWidth-n,x)}switch(this.barCtx.barOptions.startingShape){case"flat":f=r.line(e.barXPosition+e.barWidth-n,b);break;case"rounded":f=r.quadraticCurve(e.barXPosition+(e.barWidth-n)/2,b+v,e.barXPosition,b)}}return{endingPath:u,startingPath:f,y2:x,y1:b}}}]),t}(),E=function(){function t(i,a){e(this,t),this.ctx=i,this.w=i.w;var s=this.w;this.barOptions=s.config.plotOptions.bar,this.isHorizontal=this.barOptions.horizontal,this.strokeWidth=s.config.stroke.width,this.isNullValue=!1,this.isTimelineBar="datetime"===s.config.xaxis.type&&s.globals.seriesRangeBarTimeline.length,this.xyRatios=a,null!==this.xyRatios&&(this.xRatio=a.xRatio,this.initialXRatio=a.initialXRatio,this.yRatio=a.yRatio,this.invertedXRatio=a.invertedXRatio,this.invertedYRatio=a.invertedYRatio,this.baseLineY=a.baseLineY,this.baseLineInvertedY=a.baseLineInvertedY),this.yaxisIndex=0,this.seriesLen=0,this.barHelpers=new X(this)}return a(t,[{key:"draw",value:function(t,e){var i=this.w,a=new p(this.ctx),s=new m(this.ctx,i);t=s.getLogSeries(t),this.series=t,this.yRatio=s.getLogYRatios(this.yRatio),this.barHelpers.initVariables(t);var r=a.group({class:"apexcharts-bar-series apexcharts-plot-series"});i.config.dataLabels.enabled&&this.totalItems>this.barOptions.dataLabels.maxItems&&console.warn("WARNING: DataLabels are enabled but there are too many to display. This may cause performance issue when rendering.");for(var o=0,l=0;o<t.length;o++,l++){var h,c,d,u,f=void 0,x=void 0,b=[],v=[],y=i.globals.comboCharts?e[o]:o,w=a.group({class:"apexcharts-series",rel:o+1,seriesName:g.escapeString(i.globals.seriesNames[y]),"data:realIndex":y});this.ctx.series.addCollapsedClassToSeries(w,y),t[o].length>0&&(this.visibleI=this.visibleI+1);var k=0,A=0;this.yRatio.length>1&&(this.yaxisIndex=y),this.isReversed=i.config.yaxis[this.yaxisIndex]&&i.config.yaxis[this.yaxisIndex].reversed;var S=this.barHelpers.initialPositions();x=S.y,k=S.barHeight,c=S.yDivision,u=S.zeroW,f=S.x,A=S.barWidth,h=S.xDivision,d=S.zeroH,this.horizontal||v.push(f+A/2);for(var C=a.group({class:"apexcharts-datalabels","data:realIndex":y}),L=0;L<i.globals.dataPoints;L++){var P=this.barHelpers.getStrokeWidth(o,L,y),T=null,z={indexes:{i:o,j:L,realIndex:y,bc:l},x:f,y:x,strokeWidth:P,elSeries:w};this.isHorizontal?(T=this.drawBarPaths(n({},z,{barHeight:k,zeroW:u,yDivision:c})),A=this.series[o][L]/this.invertedYRatio):(T=this.drawColumnPaths(n({},z,{xDivision:h,barWidth:A,zeroH:d})),k=this.series[o][L]/this.yRatio[this.yaxisIndex]),x=T.y,f=T.x,L>0&&v.push(f+A/2),b.push(x);var I=this.barHelpers.getPathFillColor(t,o,L,y);this.renderSeries({realIndex:y,pathFill:I,j:L,i:o,pathFrom:T.pathFrom,pathTo:T.pathTo,strokeWidth:P,elSeries:w,x:f,y:x,series:t,barHeight:k,barWidth:A,elDataLabelsWrap:C,visibleSeries:this.visibleI,type:"bar"})}i.globals.seriesXvalues[y]=v,i.globals.seriesYvalues[y]=b,r.add(w)}return r}},{key:"renderSeries",value:function(t){var e=t.realIndex,i=t.pathFill,a=t.lineFill,s=t.j,r=t.i,n=t.pathFrom,o=t.pathTo,l=t.strokeWidth,h=t.elSeries,c=t.x,d=t.y,g=t.y1,f=t.y2,x=t.series,b=t.barHeight,m=t.barWidth,v=t.barYPosition,y=t.elDataLabelsWrap,w=t.visibleSeries,k=t.type,A=this.w,S=new p(this.ctx);a||(a=this.barOptions.distributed?A.globals.stroke.colors[s]:A.globals.stroke.colors[e]),A.config.series[r].data[s]&&A.config.series[r].data[s].strokeColor&&(a=A.config.series[r].data[s].strokeColor),this.isNullValue&&(i="none");var C=s/A.config.chart.animations.animateGradually.delay*(A.config.chart.animations.speed/A.globals.dataPoints)/2.4,L=S.renderPaths({i:r,j:s,realIndex:e,pathFrom:n,pathTo:o,stroke:a,strokeWidth:l,strokeLineCap:A.config.stroke.lineCap,fill:i,animationDelay:C,initialSpeed:A.config.chart.animations.speed,dataChangeSpeed:A.config.chart.animations.dynamicAnimation.speed,className:"apexcharts-".concat(k,"-area")});L.attr("clip-path","url(#gridRectMask".concat(A.globals.cuid,")")),void 0!==g&&void 0!==f&&(L.attr("data-range-y1",g),L.attr("data-range-y2",f)),new u(this.ctx).setSelectionFilter(L,e,s),h.add(L);var P=new I(this).handleBarDataLabels({x:c,y:d,y1:g,y2:f,i:r,j:s,series:x,realIndex:e,barHeight:b,barWidth:m,barYPosition:v,renderedPath:L,visibleSeries:w});return null!==P&&y.add(P),h.add(y),h}},{key:"drawBarPaths",value:function(t){var e=t.indexes,i=t.barHeight,a=t.strokeWidth,s=t.zeroW,r=t.x,n=t.y,o=t.yDivision,l=t.elSeries,h=this.w,c=e.i,d=e.j,g=e.bc;h.globals.isXNumeric&&(n=(h.globals.seriesX[c][d]-h.globals.minX)/this.invertedXRatio-i);var u=n+i*this.visibleI;r=void 0===this.series[c][d]||null===this.series[c][d]?s:s+this.series[c][d]/this.invertedYRatio-2*(this.isReversed?this.series[c][d]/this.invertedYRatio:0);var f=this.barHelpers.getBarpaths({barYPosition:u,barHeight:i,x1:s,x2:r,strokeWidth:a,series:this.series,realIndex:e.realIndex,i:c,j:d,w:h});return h.globals.isXNumeric||(n+=o),this.barHelpers.barBackground({bc:g,i:c,y1:u-i*this.visibleI,y2:i*this.seriesLen,elSeries:l}),{pathTo:f.pathTo,pathFrom:f.pathFrom,x:r,y:n,barYPosition:u}}},{key:"drawColumnPaths",value:function(t){var e=t.indexes,i=t.x,a=t.y,s=t.xDivision,r=t.barWidth,n=t.zeroH,o=t.strokeWidth,l=t.elSeries,h=this.w,c=e.i,d=e.j,g=e.bc;if(h.globals.isXNumeric){var u=c;h.globals.seriesX[c].length||(u=h.globals.maxValsInArrayIndex),i=(h.globals.seriesX[u][d]-h.globals.minX)/this.xRatio-r*this.seriesLen/2}var f=i+r*this.visibleI;a=void 0===this.series[c][d]||null===this.series[c][d]?n:n-this.series[c][d]/this.yRatio[this.yaxisIndex]+2*(this.isReversed?this.series[c][d]/this.yRatio[this.yaxisIndex]:0);var p=this.barHelpers.getColumnPaths({barXPosition:f,barWidth:r,y1:n,y2:a,strokeWidth:o,series:this.series,realIndex:e.realIndex,i:c,j:d,w:h});return h.globals.isXNumeric||(i+=s),this.barHelpers.barBackground({bc:g,i:c,x1:f-o/2-r*this.visibleI,x2:r*this.seriesLen+o/2,elSeries:l}),{pathTo:p.pathTo,pathFrom:p.pathFrom,x:i,y:a,barXPosition:f}}},{key:"getPreviousPath",value:function(t,e){for(var i,a=this.w,s=0;s<a.globals.previousPaths.length;s++){var r=a.globals.previousPaths[s];r.paths&&r.paths.length>0&&parseInt(r.realIndex,10)===parseInt(t,10)&&void 0!==a.globals.previousPaths[s].paths[e]&&(i=a.globals.previousPaths[s].paths[e].d)}return i}}]),t}(),Y=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.months31=[1,3,5,7,8,10,12],this.months30=[2,4,6,9,11],this.daysCntOfYear=[0,31,59,90,120,151,181,212,243,273,304,334]}return a(t,[{key:"isValidDate",value:function(t){return!isNaN(this.parseDate(t))}},{key:"getTimeStamp",value:function(t){return Date.parse(t)?this.w.config.xaxis.labels.datetimeUTC?new Date(new Date(t).toISOString().substr(0,25)).getTime():new Date(t).getTime():t}},{key:"getDate",value:function(t){return this.w.config.xaxis.labels.datetimeUTC?new Date(new Date(t).toUTCString()):new Date(t)}},{key:"parseDate",value:function(t){var e=Date.parse(t);if(!isNaN(e))return this.getTimeStamp(t);var i=Date.parse(t.replace(/-/g,"/").replace(/[a-z]+/gi," "));return i=this.getTimeStamp(i)}},{key:"formatDate",value:function(t,e){var i=this.w.globals.locale,a=this.w.config.xaxis.labels.datetimeUTC,s=["\0"].concat(d(i.months)),r=["\x01"].concat(d(i.shortMonths)),n=["\x02"].concat(d(i.days)),o=["\x03"].concat(d(i.shortDays));function l(t,e){var i=t+"";for(e=e||2;i.length<e;)i="0"+i;return i}var h=a?t.getUTCFullYear():t.getFullYear();e=(e=(e=e.replace(/(^|[^\\])yyyy+/g,"$1"+h)).replace(/(^|[^\\])yy/g,"$1"+h.toString().substr(2,2))).replace(/(^|[^\\])y/g,"$1"+h);var c=(a?t.getUTCMonth():t.getMonth())+1;e=(e=(e=(e=e.replace(/(^|[^\\])MMMM+/g,"$1"+s[0])).replace(/(^|[^\\])MMM/g,"$1"+r[0])).replace(/(^|[^\\])MM/g,"$1"+l(c))).replace(/(^|[^\\])M/g,"$1"+c);var g=a?t.getUTCDate():t.getDate();e=(e=(e=(e=e.replace(/(^|[^\\])dddd+/g,"$1"+n[0])).replace(/(^|[^\\])ddd/g,"$1"+o[0])).replace(/(^|[^\\])dd/g,"$1"+l(g))).replace(/(^|[^\\])d/g,"$1"+g);var u=a?t.getUTCHours():t.getHours(),f=u>12?u-12:0===u?12:u;e=(e=(e=(e=e.replace(/(^|[^\\])HH+/g,"$1"+l(u))).replace(/(^|[^\\])H/g,"$1"+u)).replace(/(^|[^\\])hh+/g,"$1"+l(f))).replace(/(^|[^\\])h/g,"$1"+f);var p=a?t.getUTCMinutes():t.getMinutes();e=(e=e.replace(/(^|[^\\])mm+/g,"$1"+l(p))).replace(/(^|[^\\])m/g,"$1"+p);var x=a?t.getUTCSeconds():t.getSeconds();e=(e=e.replace(/(^|[^\\])ss+/g,"$1"+l(x))).replace(/(^|[^\\])s/g,"$1"+x);var b=a?t.getUTCMilliseconds():t.getMilliseconds();e=e.replace(/(^|[^\\])fff+/g,"$1"+l(b,3)),b=Math.round(b/10),e=e.replace(/(^|[^\\])ff/g,"$1"+l(b)),b=Math.round(b/10);var m=u<12?"AM":"PM";e=(e=(e=e.replace(/(^|[^\\])f/g,"$1"+b)).replace(/(^|[^\\])TT+/g,"$1"+m)).replace(/(^|[^\\])T/g,"$1"+m.charAt(0));var v=m.toLowerCase();e=(e=e.replace(/(^|[^\\])tt+/g,"$1"+v)).replace(/(^|[^\\])t/g,"$1"+v.charAt(0));var y=-t.getTimezoneOffset(),w=a||!y?"Z":y>0?"+":"-";if(!a){var k=(y=Math.abs(y))%60;w+=l(Math.floor(y/60))+":"+l(k)}e=e.replace(/(^|[^\\])K/g,"$1"+w);var A=(a?t.getUTCDay():t.getDay())+1;return e=(e=(e=(e=(e=e.replace(new RegExp(n[0],"g"),n[A])).replace(new RegExp(o[0],"g"),o[A])).replace(new RegExp(s[0],"g"),s[c])).replace(new RegExp(r[0],"g"),r[c])).replace(/\\(.)/g,"$1")}},{key:"getTimeUnitsfromTimestamp",value:function(t,e,i){var a=this.w;void 0!==a.config.xaxis.min&&(t=a.config.xaxis.min),void 0!==a.config.xaxis.max&&(e=a.config.xaxis.max);var s=this.getDate(t),r=this.getDate(e),n=this.formatDate(s,"yyyy MM dd HH mm").split(" "),o=this.formatDate(r,"yyyy MM dd HH mm").split(" ");return{minMinute:parseInt(n[4],10),maxMinute:parseInt(o[4],10),minHour:parseInt(n[3],10),maxHour:parseInt(o[3],10),minDate:parseInt(n[2],10),maxDate:parseInt(o[2],10),minMonth:parseInt(n[1],10)-1,maxMonth:parseInt(o[1],10)-1,minYear:parseInt(n[0],10),maxYear:parseInt(o[0],10)}}},{key:"isLeapYear",value:function(t){return t%4==0&&t%100!=0||t%400==0}},{key:"calculcateLastDaysOfMonth",value:function(t,e,i){return this.determineDaysOfMonths(t,e)-i}},{key:"determineDaysOfYear",value:function(t){var e=365;return this.isLeapYear(t)&&(e=366),e}},{key:"determineRemainingDaysOfYear",value:function(t,e,i){var a=this.daysCntOfYear[e]+i;return e>1&&this.isLeapYear()&&a++,a}},{key:"determineDaysOfMonths",value:function(t,e){var i=30;switch(t=g.monthMod(t),!0){case this.months30.indexOf(t)>-1:2===t&&(i=this.isLeapYear(e)?29:28);break;case this.months31.indexOf(t)>-1:default:i=31}return i}}]),t}(),F=function(t){function i(){return e(this,i),c(this,l(i).apply(this,arguments))}return o(i,t),a(i,[{key:"draw",value:function(t,e){var i=this.w,a=new p(this.ctx);this.rangeBarOptions=this.w.config.plotOptions.rangeBar,this.series=t,this.seriesRangeStart=i.globals.seriesRangeStart,this.seriesRangeEnd=i.globals.seriesRangeEnd,this.barHelpers.initVariables(t);for(var s=a.group({class:"apexcharts-rangebar-series apexcharts-plot-series"}),r=0;r<t.length;r++){var o,l,h,c=void 0,d=void 0,u=void 0,f=i.globals.comboCharts?e[r]:r,x=a.group({class:"apexcharts-series",seriesName:g.escapeString(i.globals.seriesNames[f]),rel:r+1,"data:realIndex":f});t[r].length>0&&(this.visibleI=this.visibleI+1);var b=0,m=0;this.yRatio.length>1&&(this.yaxisIndex=f);var v=this.barHelpers.initialPositions();d=v.y,h=v.zeroW,c=v.x,m=v.barWidth,o=v.xDivision,l=v.zeroH;for(var y=a.group({class:"apexcharts-datalabels","data:realIndex":f}),w=0;w<i.globals.dataPoints;w++){var k=this.barHelpers.getStrokeWidth(r,w,f),A=this.seriesRangeStart[r][w],S=this.seriesRangeEnd[r][w],C=null,L=null,P={x:c,y:d,strokeWidth:k,elSeries:x};if(u=v.yDivision,b=v.barHeight,this.isHorizontal){L=d+b*this.visibleI;var T=(u-b*this.seriesLen)/2;if(void 0===i.config.series[r].data[w])break;if(this.isTimelineBar&&i.config.series[r].data[w].x){var z=this.detectOverlappingBars({i:r,j:w,barYPosition:L,srty:T,barHeight:b,yDivision:u,initPositions:v});b=z.barHeight,L=z.barYPosition}m=(C=this.drawRangeBarPaths(n({indexes:{i:r,j:w,realIndex:f},barHeight:b,barYPosition:L,zeroW:h,yDivision:u,y1:A,y2:S},P))).barWidth}else b=(C=this.drawRangeColumnPaths(n({indexes:{i:r,j:w,realIndex:f},zeroH:l,barWidth:m,xDivision:o},P))).barHeight;d=C.y,c=C.x;var I=this.barHelpers.getPathFillColor(t,r,w,f),M=i.globals.stroke.colors[f];this.renderSeries({realIndex:f,pathFill:I,lineFill:M,j:w,i:r,x:c,y:d,y1:A,y2:S,pathFrom:C.pathFrom,pathTo:C.pathTo,strokeWidth:k,elSeries:x,series:t,barHeight:b,barYPosition:L,barWidth:m,elDataLabelsWrap:y,visibleSeries:this.visibleI,type:"rangebar"})}s.add(x)}return s}},{key:"detectOverlappingBars",value:function(t){var e=t.i,i=t.j,a=t.barYPosition,s=t.srty,r=t.barHeight,n=t.yDivision,o=t.initPositions,l=this.w,h=[],c=l.config.series[e].data[i].rangeName,d=l.config.series[e].data[i].x,g=l.globals.labels.indexOf(d),u=l.globals.seriesRangeBarTimeline[e].findIndex((function(t){return t.x===d&&t.overlaps.length>0}));return a=s+r*this.visibleI+n*g,u>-1&&!l.config.plotOptions.bar.rangeBarOverlap&&(h=l.globals.seriesRangeBarTimeline[e][u].overlaps).indexOf(c)>-1&&(a=(r=o.barHeight/h.length)*this.visibleI+n*(100-parseInt(this.barOptions.barHeight,10))/100/2+r*(this.visibleI+h.indexOf(c))+n*g),{barYPosition:a,barHeight:r}}},{key:"drawRangeColumnPaths",value:function(t){var e=t.indexes,i=t.x,a=(t.strokeWidth,t.xDivision),s=t.barWidth,r=t.zeroH,n=this.w,o=e.i,l=e.j,h=this.yRatio[this.yaxisIndex],c=e.realIndex,d=this.getRangeValue(c,l),g=Math.min(d.start,d.end),u=Math.max(d.start,d.end);n.globals.isXNumeric&&(i=(n.globals.seriesX[o][l]-n.globals.minX)/this.xRatio-s/2);var f=i+s*this.visibleI;void 0===this.series[o][l]||null===this.series[o][l]?g=r:(g=r-g/h,u=r-u/h);var p=Math.abs(u-g),x=this.barHelpers.getColumnPaths({barXPosition:f,barWidth:s,y1:g,y2:u,strokeWidth:this.strokeWidth,series:this.seriesRangeEnd,i:c,j:l,w:n});return n.globals.isXNumeric||(i+=a),{pathTo:x.pathTo,pathFrom:x.pathFrom,barHeight:p,x:i,y:u,barXPosition:f}}},{key:"drawRangeBarPaths",value:function(t){var e=t.indexes,i=t.y,a=t.y1,s=t.y2,r=t.yDivision,n=t.barHeight,o=t.barYPosition,l=t.zeroW,h=this.w,c=l+a/this.invertedYRatio,d=l+s/this.invertedYRatio,g=Math.abs(d-c),u=this.barHelpers.getBarpaths({barYPosition:o,barHeight:n,x1:c,x2:d,strokeWidth:this.strokeWidth,series:this.seriesRangeEnd,i:e.realIndex,j:e.j,w:h});return h.globals.isXNumeric||(i+=r),{pathTo:u.pathTo,pathFrom:u.pathFrom,barWidth:g,x:d,y:i}}},{key:"getRangeValue",value:function(t,e){var i=this.w;return{start:i.globals.seriesRangeStart[t][e],end:i.globals.seriesRangeEnd[t][e]}}},{key:"getTooltipValues",value:function(t){var e=t.ctx,i=t.seriesIndex,a=t.dataPointIndex,s=t.y1,r=t.y2,n=t.w,o=n.globals.seriesRangeStart[i][a],l=n.globals.seriesRangeEnd[i][a],h=n.globals.labels[a],c=n.config.series[i].name,d=n.config.tooltip.y.formatter,g=n.config.tooltip.y.title.formatter,u={w:n,seriesIndex:i,dataPointIndex:a};"function"==typeof g&&(c=g(c,u)),s&&r&&(o=s,l=r,n.config.series[i].data[a].x&&(h=n.config.series[i].data[a].x+":"),"function"==typeof d&&(h=d(h,u)));var f="",p="",x=n.globals.colors[i];if(void 0===n.config.tooltip.x.formatter)if("datetime"===n.config.xaxis.type){var b=new Y(e);f=b.formatDate(b.getDate(o),n.config.tooltip.x.format),p=b.formatDate(b.getDate(l),n.config.tooltip.x.format)}else f=o,p=l;else f=n.config.tooltip.x.formatter(o),p=n.config.tooltip.x.formatter(l);return{start:o,end:l,startVal:f,endVal:p,ylabel:h,color:x,seriesName:c}}},{key:"buildCustomTooltipHTML",value:function(t){var e=t.color,i=t.seriesName;return'<div class="apexcharts-tooltip-rangebar"><div> <span class="series-name" style="color: '+e+'">'+(i||"")+'</span></div><div> <span class="category">'+t.ylabel+' </span> <span class="value start-value">'+t.start+'</span> <span class="separator">-</span> <span class="value end-value">'+t.end+"</span></div></div>"}}]),i}(E),R=function(){function t(i){e(this,t),this.opts=i}return a(t,[{key:"line",value:function(){return{chart:{animations:{easing:"swing"}},dataLabels:{enabled:!1},stroke:{width:5,curve:"straight"},markers:{size:0,hover:{sizeOffset:6}},xaxis:{crosshairs:{width:1}}}}},{key:"sparkline",value:function(t){this.opts.yaxis[0].show=!1,this.opts.yaxis[0].title.text="",this.opts.yaxis[0].axisBorder.show=!1,this.opts.yaxis[0].axisTicks.show=!1,this.opts.yaxis[0].floating=!0;return g.extend(t,{grid:{show:!1,padding:{left:0,right:0,top:0,bottom:0}},legend:{show:!1},xaxis:{labels:{show:!1},tooltip:{enabled:!1},axisBorder:{show:!1},axisTicks:{show:!1}},chart:{toolbar:{show:!1},zoom:{enabled:!1}},dataLabels:{enabled:!1}})}},{key:"bar",value:function(){return{chart:{stacked:!1,animations:{easing:"swing"}},plotOptions:{bar:{dataLabels:{position:"center"}}},dataLabels:{style:{colors:["#fff"]},background:{enabled:!1}},stroke:{width:0,lineCap:"square"},fill:{opacity:.85},legend:{markers:{shape:"square",radius:2,size:8}},tooltip:{shared:!1},xaxis:{tooltip:{enabled:!1},tickPlacement:"between",crosshairs:{width:"barWidth",position:"back",fill:{type:"gradient"},dropShadow:{enabled:!1},stroke:{width:0}}}}}},{key:"candlestick",value:function(){return{stroke:{width:1,colors:["#333"]},fill:{opacity:1},dataLabels:{enabled:!1},tooltip:{shared:!0,custom:function(t){var e=t.seriesIndex,i=t.dataPointIndex,a=t.w;return'<div class="apexcharts-tooltip-candlestick"><div>Open: <span class="value">'+a.globals.seriesCandleO[e][i]+'</span></div><div>High: <span class="value">'+a.globals.seriesCandleH[e][i]+'</span></div><div>Low: <span class="value">'+a.globals.seriesCandleL[e][i]+'</span></div><div>Close: <span class="value">'+a.globals.seriesCandleC[e][i]+"</span></div></div>"}},states:{active:{filter:{type:"none"}}},xaxis:{crosshairs:{width:1}}}}},{key:"rangeBar",value:function(){return{stroke:{width:0,lineCap:"square"},plotOptions:{bar:{dataLabels:{position:"center"}}},dataLabels:{enabled:!1,formatter:function(t,e){e.ctx;var i=e.seriesIndex,a=e.dataPointIndex,s=e.w,r=s.globals.seriesRangeStart[i][a];return s.globals.seriesRangeEnd[i][a]-r},background:{enabled:!1},style:{colors:["#fff"]}},tooltip:{shared:!1,followCursor:!0,custom:function(t){return t.w.config.plotOptions&&t.w.config.plotOptions.bar&&t.w.config.plotOptions.bar.horizontal?function(t){var e=new F(t.ctx,null),i=e.getTooltipValues(t),a=i.color,s=i.seriesName,r=i.ylabel,n=i.startVal,o=i.endVal;return e.buildCustomTooltipHTML({color:a,seriesName:s,ylabel:r,start:n,end:o})}(t):function(t){var e=new F(t.ctx,null),i=e.getTooltipValues(t),a=i.color,s=i.seriesName,r=i.ylabel,n=i.start,o=i.end;return e.buildCustomTooltipHTML({color:a,seriesName:s,ylabel:r,start:n,end:o})}(t)}},xaxis:{tickPlacement:"between",tooltip:{enabled:!1},crosshairs:{stroke:{width:0}}}}}},{key:"area",value:function(){return{stroke:{width:4},fill:{type:"gradient",gradient:{inverseColors:!1,shade:"light",type:"vertical",opacityFrom:.65,opacityTo:.5,stops:[0,100,100]}},markers:{size:0,hover:{sizeOffset:6}},tooltip:{followCursor:!1}}}},{key:"brush",value:function(t){return g.extend(t,{chart:{toolbar:{autoSelected:"selection",show:!1},zoom:{enabled:!1}},dataLabels:{enabled:!1},stroke:{width:1},tooltip:{enabled:!1},xaxis:{tooltip:{enabled:!1}}})}},{key:"stacked100",value:function(t){t.dataLabels=t.dataLabels||{},t.dataLabels.formatter=t.dataLabels.formatter||void 0;var e=t.dataLabels.formatter;return t.yaxis.forEach((function(e,i){t.yaxis[i].min=0,t.yaxis[i].max=100})),"bar"===t.chart.type&&(t.dataLabels.formatter=e||function(t){return"number"==typeof t&&t?t.toFixed(0)+"%":t}),t}},{key:"convertCatToNumeric",value:function(t){return t.xaxis.convertedCatToNumeric=!0,t}},{key:"convertCatToNumericXaxis",value:function(t,e,i){t.xaxis.type="numeric",t.xaxis.labels=t.xaxis.labels||{},t.xaxis.labels.formatter=t.xaxis.labels.formatter||function(t){return g.isNumber(t)?Math.floor(t):t};var a=t.xaxis.labels.formatter,s=t.xaxis.categories&&t.xaxis.categories.length?t.xaxis.categories:t.labels;return i&&i.length&&(s=i.map((function(t){return t.toString()}))),s&&s.length&&(t.xaxis.labels.formatter=function(t){return g.isNumber(t)?a(s[Math.floor(t)-1]):a(t)}),t.xaxis.categories=[],t.labels=[],t.xaxis.tickAmount=t.xaxis.tickAmount||"dataPoints",t}},{key:"bubble",value:function(){return{dataLabels:{style:{colors:["#fff"]}},tooltip:{shared:!1,intersect:!0},xaxis:{crosshairs:{width:0}},fill:{type:"solid",gradient:{shade:"light",inverse:!0,shadeIntensity:.55,opacityFrom:.4,opacityTo:.8}}}}},{key:"scatter",value:function(){return{dataLabels:{enabled:!1},tooltip:{shared:!1,intersect:!0},markers:{size:6,strokeWidth:1,hover:{sizeOffset:2}}}}},{key:"heatmap",value:function(){return{chart:{stacked:!1},fill:{opacity:1},dataLabels:{style:{colors:["#fff"]}},stroke:{colors:["#fff"]},tooltip:{followCursor:!0,marker:{show:!1},x:{show:!1}},legend:{position:"top",markers:{shape:"square",size:10,offsetY:2}},grid:{padding:{right:20}}}}},{key:"pie",value:function(){return{chart:{toolbar:{show:!1}},plotOptions:{pie:{donut:{labels:{show:!1}}}},dataLabels:{formatter:function(t){return t.toFixed(1)+"%"},style:{colors:["#fff"]},dropShadow:{enabled:!0}},stroke:{colors:["#fff"]},fill:{opacity:1,gradient:{shade:"light",stops:[0,100]}},tooltip:{theme:"dark",fillSeriesColor:!0},legend:{position:"right"}}}},{key:"donut",value:function(){return{chart:{toolbar:{show:!1}},dataLabels:{formatter:function(t){return t.toFixed(1)+"%"},style:{colors:["#fff"]},dropShadow:{enabled:!0}},stroke:{colors:["#fff"]},fill:{opacity:1,gradient:{shade:"light",shadeIntensity:.35,stops:[80,100],opacityFrom:1,opacityTo:1}},tooltip:{theme:"dark",fillSeriesColor:!0},legend:{position:"right"}}}},{key:"polarArea",value:function(){return this.opts.yaxis[0].tickAmount=this.opts.yaxis[0].tickAmount?this.opts.yaxis[0].tickAmount:6,{chart:{toolbar:{show:!1}},dataLabels:{formatter:function(t){return t.toFixed(1)+"%"},enabled:!1},stroke:{show:!0,width:2},fill:{opacity:.7},tooltip:{theme:"dark",fillSeriesColor:!0},legend:{position:"right"}}}},{key:"radar",value:function(){return this.opts.yaxis[0].labels.offsetY=this.opts.yaxis[0].labels.offsetY?this.opts.yaxis[0].labels.offsetY:6,{dataLabels:{enabled:!1,style:{fontSize:"11px"}},stroke:{width:2},markers:{size:3,strokeWidth:1,strokeOpacity:1},fill:{opacity:.2},tooltip:{shared:!1,intersect:!0,followCursor:!0},grid:{show:!1},xaxis:{labels:{formatter:function(t){return t},style:{colors:["#a8a8a8"],fontSize:"11px"}},tooltip:{enabled:!1},crosshairs:{show:!1}}}}},{key:"radialBar",value:function(){return{chart:{animations:{dynamicAnimation:{enabled:!0,speed:800}},toolbar:{show:!1}},fill:{gradient:{shade:"dark",shadeIntensity:.4,inverseColors:!1,type:"diagonal2",opacityFrom:1,opacityTo:1,stops:[70,98,100]}},legend:{show:!1,position:"right"},tooltip:{enabled:!1,fillSeriesColor:!0}}}}]),t}(),D=function(){function i(t){e(this,i),this.opts=t}return a(i,[{key:"init",value:function(e){var i=e.responsiveOverride,a=this.opts,s=new S,r=new R(a);this.chartType=a.chart.type,"histogram"===this.chartType&&(a.chart.type="bar",a=g.extend({plotOptions:{bar:{columnWidth:"99.99%"}}},a)),a=this.extendYAxis(a),a=this.extendAnnotations(a);var n=s.init(),o={};if(a&&"object"===t(a)){var l={};l=-1!==["line","area","bar","candlestick","rangeBar","histogram","bubble","scatter","heatmap","pie","polarArea","donut","radar","radialBar"].indexOf(a.chart.type)?r[a.chart.type]():r.line(),a.chart.brush&&a.chart.brush.enabled&&(l=r.brush(l)),a.chart.stacked&&"100%"===a.chart.stackType&&(a=r.stacked100(a)),this.checkForDarkTheme(window.Apex),this.checkForDarkTheme(a),a.xaxis=a.xaxis||window.Apex.xaxis||{},i||(a.xaxis.convertedCatToNumeric=!1),((a=this.checkForCatToNumericXAxis(this.chartType,l,a)).chart.sparkline&&a.chart.sparkline.enabled||window.Apex.chart&&window.Apex.chart.sparkline&&window.Apex.chart.sparkline.enabled)&&(l=r.sparkline(l)),o=g.extend(n,l)}var h=g.extend(o,window.Apex);return n=g.extend(h,a),n=this.handleUserInputErrors(n)}},{key:"checkForCatToNumericXAxis",value:function(t,e,i){var a=new R(i),s="bar"===t&&i.plotOptions&&i.plotOptions.bar&&i.plotOptions.bar.horizontal,r="pie"===t||"polarArea"===t||"donut"===t||"radar"===t||"radialBar"===t||"heatmap"===t,n="datetime"!==i.xaxis.type&&"numeric"!==i.xaxis.type,o=i.xaxis.tickPlacement?i.xaxis.tickPlacement:e.xaxis&&e.xaxis.tickPlacement;return s||r||!n||"between"===o||(i=a.convertCatToNumeric(i)),i}},{key:"extendYAxis",value:function(t,e){var i=new S;(void 0===t.yaxis||!t.yaxis||Array.isArray(t.yaxis)&&0===t.yaxis.length)&&(t.yaxis={}),t.yaxis.constructor!==Array&&window.Apex.yaxis&&window.Apex.yaxis.constructor!==Array&&(t.yaxis=g.extend(t.yaxis,window.Apex.yaxis)),t.yaxis.constructor!==Array?t.yaxis=[g.extend(i.yAxis,t.yaxis)]:t.yaxis=g.extendArray(t.yaxis,i.yAxis);var a=!1;t.yaxis.forEach((function(t){t.logarithmic&&(a=!0)}));var s=t.series;return e&&!s&&(s=e.config.series),a&&s.length!==t.yaxis.length&&s.length&&(t.yaxis=s.map((function(e,a){if(e.name||(s[a].name="series-".concat(a+1)),t.yaxis[a])return t.yaxis[a].seriesName=s[a].name,t.yaxis[a];var r=g.extend(i.yAxis,t.yaxis[0]);return r.show=!1,r}))),a&&s.length>1&&s.length!==t.yaxis.length&&console.warn("A multi-series logarithmic chart should have equal number of series and y-axes. Please make sure to equalize both."),t}},{key:"extendAnnotations",value:function(t){return void 0===t.annotations&&(t.annotations={},t.annotations.yaxis=[],t.annotations.xaxis=[],t.annotations.points=[]),t=this.extendYAxisAnnotations(t),t=this.extendXAxisAnnotations(t),t=this.extendPointAnnotations(t)}},{key:"extendYAxisAnnotations",value:function(t){var e=new S;return t.annotations.yaxis=g.extendArray(void 0!==t.annotations.yaxis?t.annotations.yaxis:[],e.yAxisAnnotation),t}},{key:"extendXAxisAnnotations",value:function(t){var e=new S;return t.annotations.xaxis=g.extendArray(void 0!==t.annotations.xaxis?t.annotations.xaxis:[],e.xAxisAnnotation),t}},{key:"extendPointAnnotations",value:function(t){var e=new S;return t.annotations.points=g.extendArray(void 0!==t.annotations.points?t.annotations.points:[],e.pointAnnotation),t}},{key:"checkForDarkTheme",value:function(t){t.theme&&"dark"===t.theme.mode&&(t.tooltip||(t.tooltip={}),"light"!==t.tooltip.theme&&(t.tooltip.theme="dark"),t.chart.foreColor||(t.chart.foreColor="#f6f7f8"),t.theme.palette||(t.theme.palette="palette4"))}},{key:"handleUserInputErrors",value:function(t){var e=t;if(e.tooltip.shared&&e.tooltip.intersect)throw new Error("tooltip.shared cannot be enabled when tooltip.intersect is true. Turn off any other option by setting it to false.");if(("bar"===e.chart.type||"rangeBar"===e.chart.type)&&e.plotOptions.bar.horizontal){if(e.yaxis.length>1)throw new Error("Multiple Y Axis for bars are not supported. Switch to column chart by setting plotOptions.bar.horizontal=false");e.yaxis[0].reversed&&(e.yaxis[0].opposite=!0),e.xaxis.tooltip.enabled=!1,e.yaxis[0].tooltip.enabled=!1,e.chart.zoom.enabled=!1}return"bar"!==e.chart.type&&"rangeBar"!==e.chart.type||e.tooltip.shared&&("barWidth"===e.xaxis.crosshairs.width&&e.series.length>1&&(console.warn('crosshairs.width = "barWidth" is only supported in single series, not in a multi-series barChart.'),e.xaxis.crosshairs.width="tickWidth"),e.plotOptions.bar.horizontal&&(e.states.hover.type="none",e.tooltip.shared=!1),e.tooltip.followCursor||(console.warn("followCursor option in shared columns cannot be turned off. Please set %ctooltip.followCursor: true","color: blue;"),e.tooltip.followCursor=!0)),"candlestick"===e.chart.type&&e.yaxis[0].reversed&&(console.warn("Reversed y-axis in candlestick chart is not supported."),e.yaxis[0].reversed=!1),e.chart.group&&0===e.yaxis[0].labels.minWidth&&console.warn("It looks like you have multiple charts in synchronization. You must provide yaxis.labels.minWidth which must be EQUAL for all grouped charts to prevent incorrect behaviour."),Array.isArray(e.stroke.width)&&"line"!==e.chart.type&&"area"!==e.chart.type&&(console.warn("stroke.width option accepts array only for line and area charts. Reverted back to Number"),e.stroke.width=e.stroke.width[0]),e}}]),i}(),H=function(){function t(){e(this,t)}return a(t,[{key:"initGlobalVars",value:function(t){t.series=[],t.seriesCandleO=[],t.seriesCandleH=[],t.seriesCandleL=[],t.seriesCandleC=[],t.seriesRangeStart=[],t.seriesRangeEnd=[],t.seriesRangeBarTimeline=[],t.seriesPercent=[],t.seriesX=[],t.seriesZ=[],t.seriesNames=[],t.seriesTotals=[],t.seriesLog=[],t.stackedSeriesTotals=[],t.seriesXvalues=[],t.seriesYvalues=[],t.labels=[],t.categoryLabels=[],t.timescaleLabels=[],t.noLabelsProvided=!1,t.resizeTimer=null,t.selectionResizeTimer=null,t.delayedElements=[],t.pointsArray=[],t.dataLabelsRects=[],t.isXNumeric=!1,t.xaxisLabelsCount=0,t.skipLastTimelinelabel=!1,t.skipFirstTimelinelabel=!1,t.x2SpaceAvailable=0,t.isDataXYZ=!1,t.isMultiLineX=!1,t.isMultipleYAxis=!1,t.maxY=-Number.MAX_VALUE,t.minY=Number.MIN_VALUE,t.minYArr=[],t.maxYArr=[],t.maxX=-Number.MAX_VALUE,t.minX=Number.MAX_VALUE,t.initialMaxX=-Number.MAX_VALUE,t.initialMinX=Number.MAX_VALUE,t.maxDate=0,t.minDate=Number.MAX_VALUE,t.minZ=Number.MAX_VALUE,t.maxZ=-Number.MAX_VALUE,t.minXDiff=Number.MAX_VALUE,t.yAxisScale=[],t.xAxisScale=null,t.xAxisTicksPositions=[],t.yLabelsCoords=[],t.yTitleCoords=[],t.barPadForNumericAxis=0,t.padHorizontal=0,t.xRange=0,t.yRange=[],t.zRange=0,t.dataPoints=0,t.xTickAmount=0}},{key:"globalVars",value:function(t){return{chartID:null,cuid:null,events:{beforeMount:[],mounted:[],updated:[],clicked:[],selection:[],dataPointSelection:[],zoomed:[],scrolled:[]},colors:[],clientX:null,clientY:null,fill:{colors:[]},stroke:{colors:[]},dataLabels:{style:{colors:[]}},radarPolygons:{fill:{colors:[]}},markers:{colors:[],size:t.markers.size,largestSize:0},animationEnded:!1,isTouchDevice:"ontouchstart"in window||navigator.msMaxTouchPoints,isDirty:!1,isExecCalled:!1,initialConfig:null,lastXAxis:[],lastYAxis:[],columnSeries:null,labels:[],timescaleLabels:[],noLabelsProvided:!1,allSeriesCollapsed:!1,collapsedSeries:[],collapsedSeriesIndices:[],ancillaryCollapsedSeries:[],ancillaryCollapsedSeriesIndices:[],risingSeries:[],dataFormatXNumeric:!1,capturedSeriesIndex:-1,capturedDataPointIndex:-1,selectedDataPoints:[],goldenPadding:35,invalidLogScale:!1,ignoreYAxisIndexes:[],yAxisSameScaleIndices:[],maxValsInArrayIndex:0,radialSize:0,zoomEnabled:"zoom"===t.chart.toolbar.autoSelected&&t.chart.toolbar.tools.zoom&&t.chart.zoom.enabled,panEnabled:"pan"===t.chart.toolbar.autoSelected&&t.chart.toolbar.tools.pan,selectionEnabled:"selection"===t.chart.toolbar.autoSelected&&t.chart.toolbar.tools.selection,yaxis:null,mousedown:!1,lastClientPosition:{},visibleXRange:void 0,yValueDecimal:0,total:0,SVGNS:"http://www.w3.org/2000/svg",svgWidth:0,svgHeight:0,noData:!1,locale:{},dom:{},memory:{methodsToExec:[]},shouldAnimate:!0,skipLastTimelinelabel:!1,skipFirstTimelinelabel:!1,delayedElements:[],axisCharts:!0,isDataXYZ:!1,resized:!1,resizeTimer:null,comboCharts:!1,dataChanged:!1,previousPaths:[],allSeriesHasEqualX:!0,pointsArray:[],dataLabelsRects:[],lastDrawnDataLabelsIndexes:[],x2SpaceAvailable:0,hasNullValues:!1,easing:null,zoomed:!1,gridWidth:0,gridHeight:0,rotateXLabels:!1,defaultLabels:!1,xLabelFormatter:void 0,yLabelFormatters:[],xaxisTooltipFormatter:void 0,ttKeyFormatter:void 0,ttVal:void 0,ttZFormatter:void 0,LINE_HEIGHT_RATIO:1.618,xAxisLabelsHeight:0,yAxisLabelsWidth:0,scaleX:1,scaleY:1,translateX:0,translateY:0,translateYAxisX:[],yAxisWidths:[],translateXAxisY:0,translateXAxisX:0,tooltip:null}}},{key:"init",value:function(t){var e=this.globalVars(t);return this.initGlobalVars(e),e.initialConfig=g.extend({},t),e.initialSeries=JSON.parse(JSON.stringify(e.initialConfig.series)),e.lastXAxis=JSON.parse(JSON.stringify(e.initialConfig.xaxis)),e.lastYAxis=JSON.parse(JSON.stringify(e.initialConfig.yaxis)),e}}]),t}(),N=function(){function t(i){e(this,t),this.opts=i}return a(t,[{key:"init",value:function(){var t=new D(this.opts).init({responsiveOverride:!1});return{config:t,globals:(new H).init(t)}}}]),t}(),O=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.twoDSeries=[],this.threeDSeries=[],this.twoDSeriesX=[],this.coreUtils=new m(this.ctx)}return a(t,[{key:"isMultiFormat",value:function(){return this.isFormatXY()||this.isFormat2DArray()}},{key:"isFormatXY",value:function(){var t=this.w.config.series.slice(),e=new M(this.ctx);if(this.activeSeriesIndex=e.getActiveConfigSeriesIndex(),void 0!==t[this.activeSeriesIndex].data&&t[this.activeSeriesIndex].data.length>0&&null!==t[this.activeSeriesIndex].data[0]&&void 0!==t[this.activeSeriesIndex].data[0].x&&null!==t[this.activeSeriesIndex].data[0])return!0}},{key:"isFormat2DArray",value:function(){var t=this.w.config.series.slice(),e=new M(this.ctx);if(this.activeSeriesIndex=e.getActiveConfigSeriesIndex(),void 0!==t[this.activeSeriesIndex].data&&t[this.activeSeriesIndex].data.length>0&&void 0!==t[this.activeSeriesIndex].data[0]&&null!==t[this.activeSeriesIndex].data[0]&&t[this.activeSeriesIndex].data[0].constructor===Array)return!0}},{key:"handleFormat2DArray",value:function(t,e){var i=this.w.config,a=this.w.globals;i.xaxis.sorted&&("datetime"===i.xaxis.type?t[e].data.sort((function(t,e){return new Date(t[0]).getTime()-new Date(e[0]).getTime()})):"numeric"===i.xaxis.type&&t[e].data.sort((function(t,e){return t[0]-e[0]})));for(var s=0;s<t[e].data.length;s++)if(void 0!==t[e].data[s][1]&&(Array.isArray(t[e].data[s][1])&&4===t[e].data[s][1].length?this.twoDSeries.push(g.parseNumber(t[e].data[s][1][3])):5===t[e].data[s].length?this.twoDSeries.push(g.parseNumber(t[e].data[s][4])):this.twoDSeries.push(g.parseNumber(t[e].data[s][1])),a.dataFormatXNumeric=!0),"datetime"===i.xaxis.type){var r=new Date(t[e].data[s][0]);r=new Date(r).getTime(),this.twoDSeriesX.push(r)}else this.twoDSeriesX.push(t[e].data[s][0]);for(var n=0;n<t[e].data.length;n++)void 0!==t[e].data[n][2]&&(this.threeDSeries.push(t[e].data[n][2]),a.isDataXYZ=!0)}},{key:"handleFormatXY",value:function(t,e){var i=this.w.config,a=this.w.globals,s=new Y(this.ctx),r=e;a.collapsedSeriesIndices.indexOf(e)>-1&&(r=this.activeSeriesIndex),i.xaxis.sorted&&("datetime"===i.xaxis.type?t[e].data.sort((function(t,e){return new Date(t.x).getTime()-new Date(e.x).getTime()})):"numeric"===i.xaxis.type&&t[e].data.sort((function(t,e){return t.x-e.x})));for(var n=0;n<t[e].data.length;n++)void 0!==t[e].data[n].y&&(Array.isArray(t[e].data[n].y)?this.twoDSeries.push(g.parseNumber(t[e].data[n].y[t[e].data[n].y.length-1])):this.twoDSeries.push(g.parseNumber(t[e].data[n].y)));for(var o=0;o<t[r].data.length;o++){var l="string"==typeof t[r].data[o].x,h=Array.isArray(t[r].data[o].x),c=!h&&!!s.isValidDate(t[r].data[o].x.toString());if(l||c)if(l||i.xaxis.convertedCatToNumeric){var d=a.isBarHorizontal&&a.isRangeData;"datetime"!==i.xaxis.type||d?(this.fallbackToCategory=!0,this.twoDSeriesX.push(t[r].data[o].x)):this.twoDSeriesX.push(s.parseDate(t[r].data[o].x))}else"datetime"===i.xaxis.type?this.twoDSeriesX.push(s.parseDate(t[r].data[o].x.toString())):(a.dataFormatXNumeric=!0,a.isXNumeric=!0,this.twoDSeriesX.push(parseFloat(t[r].data[o].x)));else h?(this.fallbackToCategory=!0,this.twoDSeriesX.push(t[r].data[o].x)):(a.isXNumeric=!0,a.dataFormatXNumeric=!0,this.twoDSeriesX.push(t[r].data[o].x))}if(t[e].data[0]&&void 0!==t[e].data[0].z){for(var u=0;u<t[e].data.length;u++)this.threeDSeries.push(t[e].data[u].z);a.isDataXYZ=!0}}},{key:"handleRangeData",value:function(t,e){var i=this.w.config,a=this.w.globals,s={};return this.isFormat2DArray()?s=this.handleRangeDataFormat("array",t,e):this.isFormatXY()&&(s=this.handleRangeDataFormat("xy",t,e)),a.seriesRangeStart.push(s.start),a.seriesRangeEnd.push(s.end),"datetime"===i.xaxis.type&&a.seriesRangeBarTimeline.push(s.rangeUniques),a.seriesRangeBarTimeline.forEach((function(t,e){t&&t.forEach((function(t,e){t.y.forEach((function(e,i){for(var a=0;a<t.y.length;a++)if(i!==a){var s=e.y1,r=e.y2,n=t.y[a].y1;s<=t.y[a].y2&&n<=r&&(t.overlaps.indexOf(e.rangeName)<0&&t.overlaps.push(e.rangeName),t.overlaps.indexOf(t.y[a].rangeName)<0&&t.overlaps.push(t.y[a].rangeName))}}))}))})),s}},{key:"handleCandleStickData",value:function(t,e){var i=this.w.globals,a={};return this.isFormat2DArray()?a=this.handleCandleStickDataFormat("array",t,e):this.isFormatXY()&&(a=this.handleCandleStickDataFormat("xy",t,e)),i.seriesCandleO[e]=a.o,i.seriesCandleH[e]=a.h,i.seriesCandleL[e]=a.l,i.seriesCandleC[e]=a.c,a}},{key:"handleRangeDataFormat",value:function(t,e,i){var a=[],s=[],r=e[i].data.filter((function(t,e,i){return e===i.findIndex((function(e){return e.x===t.x}))})).map((function(t,e){return{x:t.x,overlaps:[],y:[]}})),n="Please provide [Start, End] values in valid format. Read more https://apexcharts.com/docs/series/#rangecharts",o=new M(this.ctx).getActiveConfigSeriesIndex();if("array"===t){if(2!==e[o].data[0][1].length)throw new Error(n);for(var l=0;l<e[i].data.length;l++)a.push(e[i].data[l][1][0]),s.push(e[i].data[l][1][1])}else if("xy"===t){if(2!==e[o].data[0].y.length)throw new Error(n);for(var h=function(t){var n=g.randomId(),o=e[i].data[t].x,l={y1:e[i].data[t].y[0],y2:e[i].data[t].y[1],rangeName:n};e[i].data[t].rangeName=n;var h=r.findIndex((function(t){return t.x===o}));r[h].y.push(l),a.push(l.y1),s.push(l.y2)},c=0;c<e[i].data.length;c++)h(c)}return{start:a,end:s,rangeUniques:r}}},{key:"handleCandleStickDataFormat",value:function(t,e,i){var a=[],s=[],r=[],n=[],o="Please provide [Open, High, Low and Close] values in valid format. Read more https://apexcharts.com/docs/series/#candlestick";if("array"===t){if(!Array.isArray(e[i].data[0][1])&&5!==e[i].data[0].length||Array.isArray(e[i].data[0][1])&&4!==e[i].data[0][1].length)throw new Error(o);if(5===e[i].data[0].length)for(var l=0;l<e[i].data.length;l++)a.push(e[i].data[l][1]),s.push(e[i].data[l][2]),r.push(e[i].data[l][3]),n.push(e[i].data[l][4]);else for(var h=0;h<e[i].data.length;h++)a.push(e[i].data[h][1][0]),s.push(e[i].data[h][1][1]),r.push(e[i].data[h][1][2]),n.push(e[i].data[h][1][3])}else if("xy"===t){if(4!==e[i].data[0].y.length)throw new Error(o);for(var c=0;c<e[i].data.length;c++)a.push(e[i].data[c].y[0]),s.push(e[i].data[c].y[1]),r.push(e[i].data[c].y[2]),n.push(e[i].data[c].y[3])}return{o:a,h:s,l:r,c:n}}},{key:"parseDataAxisCharts",value:function(t){for(var e=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.ctx,a=this.w.config,s=this.w.globals,r=new Y(i),n=a.labels.length>0?a.labels.slice():a.xaxis.categories.slice(),o=function(){for(var t=0;t<n.length;t++)if("string"==typeof n[t]){if(!r.isValidDate(n[t]))throw new Error("You have provided invalid Date format. Please provide a valid JavaScript Date");e.twoDSeriesX.push(r.parseDate(n[t]))}else{if(13!==String(n[t]).length)throw new Error("Please provide a valid JavaScript timestamp");e.twoDSeriesX.push(n[t])}},l=0;l<t.length;l++){if(this.twoDSeries=[],this.twoDSeriesX=[],this.threeDSeries=[],void 0===t[l].data)return void console.error("It is a possibility that you may have not included 'data' property in series.");if("rangeBar"!==a.chart.type&&"rangeArea"!==a.chart.type&&"rangeBar"!==t[l].type&&"rangeArea"!==t[l].type||(s.isRangeData=!0,this.handleRangeData(t,l)),this.isMultiFormat())this.isFormat2DArray()?this.handleFormat2DArray(t,l):this.isFormatXY()&&this.handleFormatXY(t,l),"candlestick"!==a.chart.type&&"candlestick"!==t[l].type||this.handleCandleStickData(t,l),s.series.push(this.twoDSeries),s.labels.push(this.twoDSeriesX),s.seriesX.push(this.twoDSeriesX),l!==this.activeSeriesIndex||this.fallbackToCategory||(s.isXNumeric=!0);else{"datetime"===a.xaxis.type?(s.isXNumeric=!0,o(),s.seriesX.push(this.twoDSeriesX)):"numeric"===a.xaxis.type&&(s.isXNumeric=!0,n.length>0&&(this.twoDSeriesX=n,s.seriesX.push(this.twoDSeriesX))),s.labels.push(this.twoDSeriesX);var h=t[l].data.map((function(t){return g.parseNumber(t)}));s.series.push(h)}s.seriesZ.push(this.threeDSeries),void 0!==t[l].name?s.seriesNames.push(t[l].name):s.seriesNames.push("series-"+parseInt(l+1,10))}return this.w}},{key:"parseDataNonAxisCharts",value:function(t){var e=this.w.globals,i=this.w.config;e.series=t.slice(),e.seriesNames=i.labels.slice();for(var a=0;a<e.series.length;a++)void 0===e.seriesNames[a]&&e.seriesNames.push("series-"+(a+1));return this.w}},{key:"handleExternalLabelsData",value:function(t){var e=this.w.config,i=this.w.globals;if(e.xaxis.categories.length>0)i.labels=e.xaxis.categories;else if(e.labels.length>0)i.labels=e.labels.slice();else if(this.fallbackToCategory){if(i.labels=i.labels[0],i.seriesRangeBarTimeline.length&&(i.seriesRangeBarTimeline.map((function(t){t.forEach((function(t){i.labels.indexOf(t.x)<0&&t.x&&i.labels.push(t.x)}))})),i.labels=i.labels.filter((function(t,e,i){return i.indexOf(t)===e}))),e.xaxis.convertedCatToNumeric)new R(e).convertCatToNumericXaxis(e,this.ctx,i.seriesX[0]),this._generateExternalLabels(t)}else this._generateExternalLabels(t)}},{key:"_generateExternalLabels",value:function(t){var e=this.w.globals,i=this.w.config,a=[];if(e.axisCharts){if(e.series.length>0)for(var s=0;s<e.series[e.maxValsInArrayIndex].length;s++)a.push(s+1);e.seriesX=[];for(var r=0;r<t.length;r++)e.seriesX.push(a);e.isXNumeric=!0}if(0===a.length){a=e.axisCharts?[]:e.series.map((function(t,e){return e+1}));for(var n=0;n<t.length;n++)e.seriesX.push(a)}e.labels=a,i.xaxis.convertedCatToNumeric&&(e.categoryLabels=a.map((function(t){return i.xaxis.labels.formatter(t)}))),e.noLabelsProvided=!0}},{key:"parseData",value:function(t){var e=this.w,i=e.config,a=e.globals;if(this.excludeCollapsedSeriesInYAxis(),this.fallbackToCategory=!1,this.ctx.core.resetGlobals(),this.ctx.core.isMultipleY(),a.axisCharts?this.parseDataAxisCharts(t):this.parseDataNonAxisCharts(t),this.coreUtils.getLargestSeries(),"bar"===i.chart.type&&i.chart.stacked){var s=new M(this.ctx);a.series=s.setNullSeriesToZeroValues(a.series)}this.coreUtils.getSeriesTotals(),a.axisCharts&&this.coreUtils.getStackedSeriesTotals(),this.coreUtils.getPercentSeries(),a.dataFormatXNumeric||a.isXNumeric&&("numeric"!==i.xaxis.type||0!==i.labels.length||0!==i.xaxis.categories.length)||this.handleExternalLabelsData(t);for(var r=this.coreUtils.getCategoryLabels(a.labels),n=0;n<r.length;n++)if(Array.isArray(r[n])){a.isMultiLineX=!0;break}}},{key:"excludeCollapsedSeriesInYAxis",value:function(){var t=this,e=this.w;e.globals.ignoreYAxisIndexes=e.globals.collapsedSeries.map((function(i,a){if(t.w.globals.isMultipleYAxis&&!e.config.chart.stacked)return i.index}))}}]),t}(),W=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.tooltipKeyFormat="dd MMM"}return a(t,[{key:"xLabelFormat",value:function(t,e,i){var a=this.w;if("datetime"===a.config.xaxis.type&&void 0===a.config.xaxis.labels.formatter&&void 0===a.config.tooltip.x.formatter){var s=new Y(this.ctx);return s.formatDate(s.getDate(e),a.config.tooltip.x.format)}return t(e,i)}},{key:"defaultGeneralFormatter",value:function(t){return Array.isArray(t)?t.map((function(t){return t})):t}},{key:"defaultYFormatter",value:function(t,e,i){var a=this.w;return g.isNumber(t)&&(t=0!==a.globals.yValueDecimal?t.toFixed(void 0!==e.decimalsInFloat?e.decimalsInFloat:a.globals.yValueDecimal):a.globals.maxYArr[i]-a.globals.minYArr[i]<10?t.toFixed(1):t.toFixed(0)),t}},{key:"setLabelFormatters",value:function(){var t=this,e=this.w;return e.globals.xLabelFormatter=function(e){return t.defaultGeneralFormatter(e)},e.globals.xaxisTooltipFormatter=function(e){return t.defaultGeneralFormatter(e)},e.globals.ttKeyFormatter=function(e){return t.defaultGeneralFormatter(e)},e.globals.ttZFormatter=function(t){return t},e.globals.legendFormatter=function(e){return t.defaultGeneralFormatter(e)},void 0!==e.config.xaxis.labels.formatter?e.globals.xLabelFormatter=e.config.xaxis.labels.formatter:e.globals.xLabelFormatter=function(t){if(g.isNumber(t)){if(!e.config.xaxis.convertedCatToNumeric&&"numeric"===e.config.xaxis.type&&e.globals.dataPoints<50)return t.toFixed(1);if(e.globals.isBarHorizontal)if(e.globals.maxY-e.globals.minYArr<4)return t.toFixed(1);return t.toFixed(0)}return t},"function"==typeof e.config.tooltip.x.formatter?e.globals.ttKeyFormatter=e.config.tooltip.x.formatter:e.globals.ttKeyFormatter=e.globals.xLabelFormatter,"function"==typeof e.config.xaxis.tooltip.formatter&&(e.globals.xaxisTooltipFormatter=e.config.xaxis.tooltip.formatter),Array.isArray(e.config.tooltip.y)?e.globals.ttVal=e.config.tooltip.y:void 0!==e.config.tooltip.y.formatter&&(e.globals.ttVal=e.config.tooltip.y),void 0!==e.config.tooltip.z.formatter&&(e.globals.ttZFormatter=e.config.tooltip.z.formatter),void 0!==e.config.legend.formatter&&(e.globals.legendFormatter=e.config.legend.formatter),e.config.yaxis.forEach((function(i,a){void 0!==i.labels.formatter?e.globals.yLabelFormatters[a]=i.labels.formatter:e.globals.yLabelFormatters[a]=function(s){return e.globals.xyCharts?Array.isArray(s)?s.map((function(e){return t.defaultYFormatter(e,i,a)})):t.defaultYFormatter(s,i,a):s}})),e.globals}},{key:"heatmapLabelFormatters",value:function(){var t=this.w;if("heatmap"===t.config.chart.type){t.globals.yAxisScale[0].result=t.globals.seriesNames.slice();var e=t.globals.seriesNames.reduce((function(t,e){return t.length>e.length?t:e}),0);t.globals.yAxisScale[0].niceMax=e,t.globals.yAxisScale[0].niceMin=e}}}]),t}(),B=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"getLabel",value:function(t,e,i,a){var s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[],r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:"12px",n=this.w,o=void 0===t[a]?"":t[a],l=o,h=n.globals.xLabelFormatter,c=n.config.xaxis.labels.formatter,d=!1,g=new W(this.ctx),u=o;l=g.xLabelFormat(h,o,u),void 0!==c&&(l=c(o,t[a],a));var f=function(t){var i=null;return e.forEach((function(t){"month"===t.unit?i="year":"day"===t.unit?i="month":"hour"===t.unit?i="day":"minute"===t.unit&&(i="hour")})),i===t};e.length>0?(d=f(e[a].unit),i=e[a].position,l=e[a].value):"datetime"===n.config.xaxis.type&&void 0===c&&(l=""),void 0===l&&(l=""),l=Array.isArray(l)?l:l.toString();var x=new p(this.ctx),b={};return b=n.globals.rotateXLabels?x.getTextRects(l,parseInt(r,10),null,"rotate(".concat(n.config.xaxis.labels.rotate," 0 0)"),!1):x.getTextRects(l,parseInt(r,10)),!Array.isArray(l)&&(0===l.indexOf("NaN")||0===l.toLowerCase().indexOf("invalid")||l.toLowerCase().indexOf("infinity")>=0||s.indexOf(l)>=0&&!n.config.xaxis.labels.showDuplicates)&&(l=""),{x:i,text:l,textRect:b,isBold:d}}},{key:"checkForOverflowingLabels",value:function(t,e,i,a,s){var r=this.w;if(0===t&&r.globals.skipFirstTimelinelabel&&(e.text=""),t===i-1&&r.globals.skipLastTimelinelabel&&(e.text=""),r.config.xaxis.labels.hideOverlappingLabels&&a.length>0){var n=s[s.length-1];e.x<n.textRect.width/(r.globals.rotateXLabels?Math.abs(r.config.xaxis.labels.rotate)/12:1.01)+n.x&&(e.text="")}return e}},{key:"checkForReversedLabels",value:function(t,e){var i=this.w;return i.config.yaxis[t]&&i.config.yaxis[t].reversed&&e.reverse(),e}},{key:"isYAxisHidden",value:function(t){var e=this.w,i=new m(this.ctx);return!e.config.yaxis[t].show||!e.config.yaxis[t].showForNullSeries&&i.isSeriesNull(t)&&-1===e.globals.collapsedSeriesIndices.indexOf(t)}},{key:"drawYAxisTicks",value:function(t,e,i,a,s,r,n){var o=this.w,l=new p(this.ctx),h=o.globals.translateY;if(a.show&&e>0){!0===o.config.yaxis[s].opposite&&(t+=a.width);for(var c=e;c>=0;c--){var d=h+e/10+o.config.yaxis[s].labels.offsetY-1;o.globals.isBarHorizontal&&(d=r*c),"heatmap"===o.config.chart.type&&(d+=r/2);var g=l.drawLine(t+i.offsetX-a.width+a.offsetX,d+a.offsetY,t+i.offsetX+a.offsetX,d+a.offsetY,a.color);n.add(g),h+=r}}}}]),t}(),V=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"fixSvgStringForIe11",value:function(t){if(!g.isIE11())return t;var e=0,i=t.replace(/xmlns="http:\/\/www.w3.org\/2000\/svg"/g,(function(t){return 2===++e?'xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"':t}));return i=(i=i.replace(/xmlns:NS\d+=""/g,"")).replace(/NS\d+:(\w+:\w+=")/g,"$1")}},{key:"getSvgString",value:function(){var t=this.w.globals.dom.Paper.svg();return this.fixSvgStringForIe11(t)}},{key:"cleanup",value:function(){var t=this.w,e=t.globals.dom.baseEl.getElementsByClassName("apexcharts-xcrosshairs"),i=t.globals.dom.baseEl.getElementsByClassName("apexcharts-ycrosshairs"),a=t.globals.dom.baseEl.querySelectorAll(".apexcharts-zoom-rect, .apexcharts-selection-rect");Array.prototype.forEach.call(a,(function(t){t.setAttribute("width",0)})),e&&e[0]&&(e[0].setAttribute("x",-500),e[0].setAttribute("x1",-500),e[0].setAttribute("x2",-500)),i&&i[0]&&(i[0].setAttribute("y",-100),i[0].setAttribute("y1",-100),i[0].setAttribute("y2",-100))}},{key:"svgUrl",value:function(){this.cleanup();var t=this.getSvgString(),e=new Blob([t],{type:"image/svg+xml;charset=utf-8"});return URL.createObjectURL(e)}},{key:"dataURI",value:function(){var t=this;return new Promise((function(e){var i=t.w;t.cleanup();var a=document.createElement("canvas");a.width=i.globals.svgWidth,a.height=parseInt(i.globals.dom.elWrap.style.height,10);var s="transparent"===i.config.chart.background?"#fff":i.config.chart.background,r=a.getContext("2d");r.fillStyle=s,r.fillRect(0,0,a.width,a.height);var n=t.getSvgString();if(window.canvg&&g.isIE11()){var o=window.canvg.Canvg.fromString(r,n,{ignoreClear:!0,ignoreDimensions:!0});o.start();var l=a.msToBlob();o.stop(),e({blob:l})}else{var h="data:image/svg+xml,"+encodeURIComponent(n),c=new Image;c.crossOrigin="anonymous",c.onload=function(){if(r.drawImage(c,0,0),a.msToBlob){var t=a.msToBlob();e({blob:t})}else{var i=a.toDataURL("image/png");e({imgURI:i})}},c.src=h}}))}},{key:"exportToSVG",value:function(){this.triggerDownload(this.svgUrl(),".svg")}},{key:"exportToPng",value:function(){var t=this;this.dataURI().then((function(e){var i=e.imgURI,a=e.blob;a?navigator.msSaveOrOpenBlob(a,t.w.globals.chartID+".png"):t.triggerDownload(i,".png")}))}},{key:"exportToCSV",value:function(t){var e=this,i=t.series,a=t.columnDelimiter,s=void 0===a?",":a,r=t.lineDelimiter,n=void 0===r?"\n":r,o=this.w,l=[],h=[],c="data:text/csv;charset=utf-8,",d=new O(this.ctx),g=new B(this.ctx),u=function(t){var i="";if(o.globals.axisCharts){if("category"===o.config.xaxis.type||o.config.xaxis.convertedCatToNumeric)if(o.globals.isBarHorizontal){var a=o.globals.yLabelFormatters[0],s=new M(e.ctx).getActiveConfigSeriesIndex();i=a(o.globals.labels[t],{seriesIndex:s,dataPointIndex:t,w:o})}else i=g.getLabel(o.globals.labels,o.globals.timescaleLabels,0,t).text;"datetime"===o.config.xaxis.type&&(o.config.xaxis.categories.length?i=o.config.xaxis.categories[t]:o.config.labels.length&&(i=o.config.labels[t]))}else i=o.config.labels[t];return i};l.push("category"),i.map((function(t,e){o.globals.axisCharts&&l.push(t.name?t.name:"series-".concat(e))})),o.globals.axisCharts||(l.push("value"),h.push(l.join(s))),i.map((function(t,e){o.globals.axisCharts?function(t,e){if(l.length&&0===e&&h.push(l.join(s)),t.data&&t.data.length)for(var a=0;a<t.data.length;a++){l=[];var r=u(a);if(r||(d.isFormatXY()?r=i[e].data[a].x:d.isFormat2DArray()&&(r=i[e].data[a]?i[e].data[a][0]:"")),0===e){l.push(r);for(var n=0;n<o.globals.series.length;n++)l.push(o.globals.series[n][a])}("candlestick"===o.config.chart.type||t.type&&"candlestick"===t.type)&&(l.pop(),l.push(o.globals.seriesCandleO[e][a]),l.push(o.globals.seriesCandleH[e][a]),l.push(o.globals.seriesCandleL[e][a]),l.push(o.globals.seriesCandleC[e][a])),"rangeBar"===o.config.chart.type&&(l.pop(),l.push(o.globals.seriesRangeStart[e][a]),l.push(o.globals.seriesRangeEnd[e][a])),l.length&&h.push(l.join(s))}}(t,e):((l=[]).push(o.globals.labels[e]),l.push(o.globals.series[e]),h.push(l.join(s)))})),c+=h.join(n),this.triggerDownload(encodeURI(c),".csv")}},{key:"triggerDownload",value:function(t,e){var i=document.createElement("a");i.href=t,i.download=this.w.globals.chartID+e,document.body.appendChild(i),i.click(),document.body.removeChild(i)}}]),t}(),G=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w;var a=this.w;this.axesUtils=new B(i),this.xaxisLabels=a.globals.labels.slice(),a.globals.timescaleLabels.length>0&&!a.globals.isBarHorizontal&&(this.xaxisLabels=a.globals.timescaleLabels.slice()),this.drawnLabels=[],this.drawnLabelsRects=[],"top"===a.config.xaxis.position?this.offY=0:this.offY=a.globals.gridHeight+1,this.offY=this.offY+a.config.xaxis.axisBorder.offsetY,this.isCategoryBarHorizontal="bar"===a.config.chart.type&&a.config.plotOptions.bar.horizontal,this.xaxisFontSize=a.config.xaxis.labels.style.fontSize,this.xaxisFontFamily=a.config.xaxis.labels.style.fontFamily,this.xaxisForeColors=a.config.xaxis.labels.style.colors,this.xaxisBorderWidth=a.config.xaxis.axisBorder.width,this.isCategoryBarHorizontal&&(this.xaxisBorderWidth=a.config.yaxis[0].axisBorder.width.toString()),this.xaxisBorderWidth.indexOf("%")>-1?this.xaxisBorderWidth=a.globals.gridWidth*parseInt(this.xaxisBorderWidth,10)/100:this.xaxisBorderWidth=parseInt(this.xaxisBorderWidth,10),this.xaxisBorderHeight=a.config.xaxis.axisBorder.height,this.yaxis=a.config.yaxis[0]}return a(t,[{key:"drawXaxis",value:function(){var t,e=this,i=this.w,a=new p(this.ctx),s=a.group({class:"apexcharts-xaxis",transform:"translate(".concat(i.config.xaxis.offsetX,", ").concat(i.config.xaxis.offsetY,")")}),r=a.group({class:"apexcharts-xaxis-texts-g",transform:"translate(".concat(i.globals.translateXAxisX,", ").concat(i.globals.translateXAxisY,")")});s.add(r);for(var n=i.globals.padHorizontal,o=[],l=0;l<this.xaxisLabels.length;l++)o.push(this.xaxisLabels[l]);var h=o.length;if(i.globals.isXNumeric){var c=h>1?h-1:h;t=i.globals.gridWidth/c,n=n+t/2+i.config.xaxis.labels.offsetX}else t=i.globals.gridWidth/o.length,n=n+t+i.config.xaxis.labels.offsetX;if(i.config.xaxis.labels.show)for(var d=function(s){var l=n-t/2+i.config.xaxis.labels.offsetX;0===s&&1===h&&t/2===n&&1===i.globals.dataPoints&&(l=i.globals.gridWidth/2);var c=e.axesUtils.getLabel(o,i.globals.timescaleLabels,l,s,e.drawnLabels,e.xaxisFontSize),d=28;i.globals.rotateXLabels&&(d=22);(c=e.axesUtils.checkForOverflowingLabels(s,c,h,e.drawnLabels,e.drawnLabelsRects)).text&&i.globals.xaxisLabelsCount++;var g=a.drawText({x:c.x,y:e.offY+i.config.xaxis.labels.offsetY+d-("top"===i.config.xaxis.position?i.globals.xAxisHeight+i.config.xaxis.axisTicks.height-2:0),text:c.text,textAnchor:"middle",fontWeight:c.isBold?600:i.config.xaxis.labels.style.fontWeight,fontSize:e.xaxisFontSize,fontFamily:e.xaxisFontFamily,foreColor:Array.isArray(e.xaxisForeColors)?i.config.xaxis.convertedCatToNumeric?e.xaxisForeColors[i.globals.minX+s-1]:e.xaxisForeColors[s]:e.xaxisForeColors,isPlainText:!1,cssClass:"apexcharts-xaxis-label "+i.config.xaxis.labels.style.cssClass});r.add(g);var u=document.createElementNS(i.globals.SVGNS,"title");u.textContent=c.text,g.node.appendChild(u),""!==c.text&&(e.drawnLabels.push(c.text),e.drawnLabelsRects.push(c)),n+=t},g=0;g<=h-1;g++)d(g);if(void 0!==i.config.xaxis.title.text){var u=a.group({class:"apexcharts-xaxis-title"}),f=a.drawText({x:i.globals.gridWidth/2+i.config.xaxis.title.offsetX,y:this.offY-parseFloat(this.xaxisFontSize)+i.globals.xAxisLabelsHeight+i.config.xaxis.title.offsetY,text:i.config.xaxis.title.text,textAnchor:"middle",fontSize:i.config.xaxis.title.style.fontSize,fontFamily:i.config.xaxis.title.style.fontFamily,fontWeight:i.config.xaxis.title.style.fontWeight,foreColor:i.config.xaxis.title.style.color,cssClass:"apexcharts-xaxis-title-text "+i.config.xaxis.title.style.cssClass});u.add(f),s.add(u)}if(i.config.xaxis.axisBorder.show){var x=0;"bar"===i.config.chart.type&&i.globals.isXNumeric&&(x-=15);var b=a.drawLine(i.globals.padHorizontal+x+i.config.xaxis.axisBorder.offsetX,this.offY,this.xaxisBorderWidth,this.offY,i.config.xaxis.axisBorder.color,0,this.xaxisBorderHeight);s.add(b)}return s}},{key:"drawXaxisInversed",value:function(t){var e,i,a=this.w,s=new p(this.ctx),r=a.config.yaxis[0].opposite?a.globals.translateYAxisX[t]:0,n=s.group({class:"apexcharts-yaxis apexcharts-xaxis-inversed",rel:t}),o=s.group({class:"apexcharts-yaxis-texts-g apexcharts-xaxis-inversed-texts-g",transform:"translate("+r+", 0)"});n.add(o);var l=[];if(a.config.yaxis[t].show)for(var h=0;h<this.xaxisLabels.length;h++)l.push(this.xaxisLabels[h]);i=-(e=a.globals.gridHeight/l.length)/2.2;var c=a.globals.yLabelFormatters[0],d=a.config.yaxis[0].labels;if(d.show)for(var g=0;g<=l.length-1;g++){var u=void 0===l[g]?"":l[g];u=c(u,{seriesIndex:t,dataPointIndex:g,w:a});var f=0;Array.isArray(u)&&(f=u.length/2*parseInt(d.style.fontSize,10));var x=s.drawText({x:d.offsetX-15,y:i+e+d.offsetY-f,text:u,textAnchor:this.yaxis.opposite?"start":"end",foreColor:Array.isArray(d.style.colors)?d.style.colors[g]:d.style.colors,fontSize:d.style.fontSize,fontFamily:d.style.fontFamily,fontWeight:d.style.fontWeight,isPlainText:!1,cssClass:"apexcharts-yaxis-label "+d.style.cssClass});o.add(x);var b=document.createElementNS(a.globals.SVGNS,"title");if(b.textContent=u.text,x.node.appendChild(b),0!==a.config.yaxis[t].labels.rotate){var m=s.rotateAroundCenter(x.node);x.node.setAttribute("transform","rotate(".concat(a.config.yaxis[t].labels.rotate," 0 ").concat(m.y,")"))}i+=e}if(void 0!==a.config.yaxis[0].title.text){var v=s.group({class:"apexcharts-yaxis-title apexcharts-xaxis-title-inversed",transform:"translate("+r+", 0)"}),y=s.drawText({x:0,y:a.globals.gridHeight/2,text:a.config.yaxis[0].title.text,textAnchor:"middle",foreColor:a.config.yaxis[0].title.style.color,fontSize:a.config.yaxis[0].title.style.fontSize,fontWeight:a.config.yaxis[0].title.style.fontWeight,fontFamily:a.config.yaxis[0].title.style.fontFamily,cssClass:"apexcharts-yaxis-title-text "+a.config.yaxis[0].title.style.cssClass});v.add(y),n.add(v)}var w=0;this.isCategoryBarHorizontal&&a.config.yaxis[0].opposite&&(w=a.globals.gridWidth);var k=a.config.xaxis.axisBorder;if(k.show){var A=s.drawLine(a.globals.padHorizontal+k.offsetX+w,1+k.offsetY,a.globals.padHorizontal+k.offsetX+w,a.globals.gridHeight+k.offsetY,k.color,0);n.add(A)}return a.config.yaxis[0].axisTicks.show&&this.axesUtils.drawYAxisTicks(w,l.length,a.config.yaxis[0].axisBorder,a.config.yaxis[0].axisTicks,0,e,n),n}},{key:"drawXaxisTicks",value:function(t,e){var i=this.w,a=t;if(!(t<0||t-2>i.globals.gridWidth)){var s=this.offY+i.config.xaxis.axisTicks.offsetY,r=s+i.config.xaxis.axisTicks.height;if("top"===i.config.xaxis.position&&(r=s-i.config.xaxis.axisTicks.height),i.config.xaxis.axisTicks.show){var n=new p(this.ctx).drawLine(t+i.config.xaxis.axisTicks.offsetX,s+i.config.xaxis.offsetY,a+i.config.xaxis.axisTicks.offsetX,r+i.config.xaxis.offsetY,i.config.xaxis.axisTicks.color);e.add(n),n.node.classList.add("apexcharts-xaxis-tick")}}}},{key:"getXAxisTicksPositions",value:function(){var t=this.w,e=[],i=this.xaxisLabels.length,a=t.globals.padHorizontal;if(t.globals.timescaleLabels.length>0)for(var s=0;s<i;s++)a=this.xaxisLabels[s].position,e.push(a);else for(var r=i,n=0;n<r;n++){var o=r;t.globals.isXNumeric&&"bar"!==t.config.chart.type&&(o-=1),a+=t.globals.gridWidth/o,e.push(a)}return e}},{key:"xAxisLabelCorrections",value:function(){var t=this.w,e=new p(this.ctx),i=t.globals.dom.baseEl.querySelector(".apexcharts-xaxis-texts-g"),a=t.globals.dom.baseEl.querySelectorAll(".apexcharts-xaxis-texts-g text"),s=t.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxis-inversed text"),r=t.globals.dom.baseEl.querySelectorAll(".apexcharts-xaxis-inversed-texts-g text tspan");if(t.globals.rotateXLabels||t.config.xaxis.labels.rotateAlways)for(var n=0;n<a.length;n++){var o=e.rotateAroundCenter(a[n]);o.y=o.y-1,o.x=o.x+1,a[n].setAttribute("transform","rotate(".concat(t.config.xaxis.labels.rotate," ").concat(o.x," ").concat(o.y,")")),a[n].setAttribute("text-anchor","end");i.setAttribute("transform","translate(0, ".concat(-10,")"));var l=a[n].childNodes;t.config.xaxis.labels.trim&&Array.prototype.forEach.call(l,(function(i){e.placeTextWithEllipsis(i,i.textContent,t.config.xaxis.labels.maxHeight-("bottom"===t.config.legend.position?20:10))}))}else!function(){for(var i=t.globals.gridWidth/(t.globals.labels.length+1),s=0;s<a.length;s++){var r=a[s].childNodes;t.config.xaxis.labels.trim&&"datetime"!==t.config.xaxis.type&&Array.prototype.forEach.call(r,(function(t){e.placeTextWithEllipsis(t,t.textContent,i)}))}}();if(s.length>0){var h=s[s.length-1].getBBox(),c=s[0].getBBox();h.x<-20&&s[s.length-1].parentNode.removeChild(s[s.length-1]),c.x+c.width>t.globals.gridWidth&&!t.globals.isBarHorizontal&&s[0].parentNode.removeChild(s[0]);for(var d=0;d<r.length;d++)e.placeTextWithEllipsis(r[d],r[d].textContent,t.config.yaxis[0].labels.maxWidth-2*parseFloat(t.config.yaxis[0].title.style.fontSize)-20)}}}]),t}(),_=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w;var a=this.w;this.xaxisLabels=a.globals.labels.slice(),this.axesUtils=new B(i),this.isTimelineBar="datetime"===a.config.xaxis.type&&a.globals.seriesRangeBarTimeline.length,a.globals.timescaleLabels.length>0&&(this.xaxisLabels=a.globals.timescaleLabels.slice())}return a(t,[{key:"drawGridArea",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=this.w,i=new p(this.ctx);null===t&&(t=i.group({class:"apexcharts-grid"}));var a=i.drawLine(e.globals.padHorizontal,1,e.globals.padHorizontal,e.globals.gridHeight,"transparent"),s=i.drawLine(e.globals.padHorizontal,e.globals.gridHeight,e.globals.gridWidth,e.globals.gridHeight,"transparent");return t.add(s),t.add(a),t}},{key:"drawGrid",value:function(){var t=null;return this.w.globals.axisCharts&&(t=this.renderGrid(),this.drawGridArea(t.el)),t}},{key:"createGridMask",value:function(){var t=this.w,e=t.globals,i=new p(this.ctx),a=Array.isArray(t.config.stroke.width)?0:t.config.stroke.width;if(Array.isArray(t.config.stroke.width)){var s=0;t.config.stroke.width.forEach((function(t){s=Math.max(s,t)})),a=s}e.dom.elGridRectMask=document.createElementNS(e.SVGNS,"clipPath"),e.dom.elGridRectMask.setAttribute("id","gridRectMask".concat(e.cuid)),e.dom.elGridRectMarkerMask=document.createElementNS(e.SVGNS,"clipPath"),e.dom.elGridRectMarkerMask.setAttribute("id","gridRectMarkerMask".concat(e.cuid));var r=t.config.chart.type,n=0,o=0;("bar"===r||"rangeBar"===r||t.globals.comboBarCount>0)&&t.globals.isXNumeric&&!t.globals.isBarHorizontal&&(n=t.config.grid.padding.left,o=t.config.grid.padding.right,e.barPadForNumericAxis>n&&(n=e.barPadForNumericAxis,o=e.barPadForNumericAxis)),e.dom.elGridRect=i.drawRect(-a/2-n-2,-a/2,e.gridWidth+a+o+n+4,e.gridHeight+a,0,"#fff"),new m(this).getLargestMarkerSize();var l=t.globals.markers.largestSize+1;e.dom.elGridRectMarker=i.drawRect(2*-l,2*-l,e.gridWidth+4*l,e.gridHeight+4*l,0,"#fff"),e.dom.elGridRectMask.appendChild(e.dom.elGridRect.node),e.dom.elGridRectMarkerMask.appendChild(e.dom.elGridRectMarker.node);var h=e.dom.baseEl.querySelector("defs");h.appendChild(e.dom.elGridRectMask),h.appendChild(e.dom.elGridRectMarkerMask)}},{key:"_drawGridLines",value:function(t){var e=t.i,i=t.x1,a=t.y1,s=t.x2,r=t.y2,n=t.xCount,o=t.parent,l=this.w;0===e&&l.globals.skipFirstTimelinelabel||e===n-1&&l.globals.skipLastTimelinelabel||"radar"===l.config.chart.type||(l.config.grid.xaxis.lines.show&&this._drawGridLine({x1:i,y1:a,x2:s,y2:r,parent:o}),new G(this.ctx).drawXaxisTicks(i,this.elg))}},{key:"_drawGridLine",value:function(t){var e=t.x1,i=t.y1,a=t.x2,s=t.y2,r=t.parent,n=this.w,o=n.config.grid.strokeDashArray,l=new p(this).drawLine(e,i,a,s,n.config.grid.borderColor,o);l.node.classList.add("apexcharts-gridline"),r.add(l)}},{key:"_drawGridBandRect",value:function(t){var e=t.c,i=t.x1,a=t.y1,s=t.x2,r=t.y2,n=t.type,o=this.w,l=new p(this.ctx);if("column"!==n||"datetime"!==o.config.xaxis.type){var h=o.config.grid[n].colors[e],c=l.drawRect(i,a,s,r,0,h,o.config.grid[n].opacity);this.elg.add(c),c.attr("clip-path","url(#gridRectMask".concat(o.globals.cuid,")")),c.node.classList.add("apexcharts-grid-".concat(n))}}},{key:"_drawXYLines",value:function(t){var e=this,i=t.xCount,a=t.tickAmount,s=this.w;if(s.config.grid.xaxis.lines.show||s.config.xaxis.axisTicks.show){var r=s.globals.padHorizontal,n=s.globals.gridHeight;s.globals.timescaleLabels.length?function(t){for(var a=t.xC,s=t.x1,r=t.y1,n=t.x2,o=t.y2,l=0;l<a;l++)s=e.xaxisLabels[l].position,n=e.xaxisLabels[l].position,e._drawGridLines({i:l,x1:s,y1:r,x2:n,y2:o,xCount:i,parent:e.elgridLinesV})}({xC:i,x1:r,y1:0,x2:void 0,y2:n}):(s.globals.isXNumeric&&(i=s.globals.xAxisScale.result.length),s.config.xaxis.convertedCatToNumeric&&(i=s.globals.xaxisLabelsCount),function(t){for(var a=t.xC,r=t.x1,n=t.y1,o=t.x2,l=t.y2,h=0;h<a+(s.globals.isXNumeric?0:1);h++)0===h&&1===a&&1===s.globals.dataPoints&&(o=r=s.globals.gridWidth/2),e._drawGridLines({i:h,x1:r,y1:n,x2:o,y2:l,xCount:i,parent:e.elgridLinesV}),o=r+=s.globals.gridWidth/(s.globals.isXNumeric?a-1:a)}({xC:i,x1:r,y1:0,x2:void 0,y2:n}))}if(s.config.grid.yaxis.lines.show){var o=0,l=0,h=s.globals.gridWidth,c=a+1;this.isTimelineBar&&(c=s.globals.labels.length);for(var d=0;d<c+(this.isTimelineBar?1:0);d++)this._drawGridLine({x1:0,y1:o,x2:h,y2:l,parent:this.elgridLinesH}),l=o+=s.globals.gridHeight/(this.isTimelineBar?c:a)}}},{key:"_drawInvertedXYLines",value:function(t){var e=t.xCount,i=this.w;if(i.config.grid.xaxis.lines.show||i.config.xaxis.axisTicks.show)for(var a,s=i.globals.padHorizontal,r=i.globals.gridHeight,n=0;n<e+1;n++){i.config.grid.xaxis.lines.show&&this._drawGridLine({x1:s,y1:0,x2:a,y2:r,parent:this.elgridLinesV}),new G(this.ctx).drawXaxisTicks(s,this.elg),a=s=s+i.globals.gridWidth/e+.3}if(i.config.grid.yaxis.lines.show)for(var o=0,l=0,h=i.globals.gridWidth,c=0;c<i.globals.dataPoints+1;c++)this._drawGridLine({x1:0,y1:o,x2:h,y2:l,parent:this.elgridLinesH}),l=o+=i.globals.gridHeight/i.globals.dataPoints}},{key:"renderGrid",value:function(){var t=this.w,e=new p(this.ctx);this.elg=e.group({class:"apexcharts-grid"}),this.elgridLinesH=e.group({class:"apexcharts-gridlines-horizontal"}),this.elgridLinesV=e.group({class:"apexcharts-gridlines-vertical"}),this.elg.add(this.elgridLinesH),this.elg.add(this.elgridLinesV),t.config.grid.show||(this.elgridLinesV.hide(),this.elgridLinesH.hide());for(var i,a=t.globals.yAxisScale.length?t.globals.yAxisScale[0].result.length-1:5,s=0;s<t.globals.series.length&&(void 0!==t.globals.yAxisScale[s]&&(a=t.globals.yAxisScale[s].result.length-1),!(a>2));s++);return!t.globals.isBarHorizontal||this.isTimelineBar?(i=this.xaxisLabels.length,this.isTimelineBar&&(a=t.globals.labels.length),this._drawXYLines({xCount:i,tickAmount:a})):(i=a,a=t.globals.xTickAmount,this._drawInvertedXYLines({xCount:i,tickAmount:a})),this.drawGridBands(i,a),{el:this.elg,xAxisTickWidth:t.globals.gridWidth/i}}},{key:"drawGridBands",value:function(t,e){var i=this.w;if(void 0!==i.config.grid.row.colors&&i.config.grid.row.colors.length>0)for(var a=0,s=i.globals.gridHeight/e,r=i.globals.gridWidth,n=0,o=0;n<e;n++,o++)o>=i.config.grid.row.colors.length&&(o=0),this._drawGridBandRect({c:o,x1:0,y1:a,x2:r,y2:s,type:"row"}),a+=i.globals.gridHeight/e;if(void 0!==i.config.grid.column.colors&&i.config.grid.column.colors.length>0)for(var l=i.globals.isBarHorizontal||"category"!==i.config.xaxis.type&&!i.config.xaxis.convertedCatToNumeric?t:t-1,h=i.globals.padHorizontal,c=i.globals.padHorizontal+i.globals.gridWidth/l,d=i.globals.gridHeight,g=0,u=0;g<t;g++,u++)u>=i.config.grid.column.colors.length&&(u=0),this._drawGridBandRect({c:u,x1:h,y1:0,x2:c,y2:d,type:"column"}),h+=i.globals.gridWidth/l}}]),t}(),j=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"niceScale",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:10,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0,s=arguments.length>4?arguments[4]:void 0,r=this.w;if("dataPoints"===i&&(i=r.globals.dataPoints-1),t===Number.MIN_VALUE&&0===e||!g.isNumber(t)&&!g.isNumber(e)||t===Number.MIN_VALUE&&e===-Number.MAX_VALUE){t=0,e=i;var n=this.linearScale(t,e,i);return n}t>e?(console.warn("axis.min cannot be greater than axis.max"),e=t+.1):t===e&&(t=0===t?0:t-.5,e=0===e?2:e+.5);var o=[],l=Math.abs(e-t);l<1&&s&&("candlestick"===r.config.chart.type||"candlestick"===r.config.series[a].type||r.globals.isRangeData)&&(e*=1.01);var h=i+1;h<2?h=2:h>2&&(h-=2);var c=l/h,d=Math.floor(g.log10(c)),u=Math.pow(10,d),f=Math.round(c/u);f<1&&(f=1);var p=f*u,x=p*Math.floor(t/p),b=p*Math.ceil(e/p),m=x;if(s&&l>2){for(;o.push(m),!((m+=p)>b););return{result:o,niceMin:o[0],niceMax:o[o.length-1]}}var v=t;(o=[]).push(v);for(var y=Math.abs(e-t)/i,w=0;w<=i;w++)v+=y,o.push(v);return o[o.length-2]>=e&&o.pop(),{result:o,niceMin:o[0],niceMax:o[o.length-1]}}},{key:"linearScale",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:10,a=Math.abs(e-t),s=a/i;i===Number.MAX_VALUE&&(i=10,s=1);for(var r=[],n=t;i>=0;)r.push(n),n+=s,i-=1;return{result:r,niceMin:r[0],niceMax:r[r.length-1]}}},{key:"logarithmicScale",value:function(t,e,i,a){(e<0||e===Number.MIN_VALUE)&&(e=.01);for(var s=Math.log(e)/Math.log(10),r=Math.log(i)/Math.log(10),n=Math.abs(i-e)/a,o=[],l=e;a>=0;)o.push(l),l+=n,a-=1;var h=o.map((function(t,a){t<=0&&(t=.01);var n=(r-s)/(i-e),o=Math.pow(10,s+n*(t-s));return Math.round(o/g.roundToBase(o,10))*g.roundToBase(o,10)}));return 0===h[0]&&(h[0]=1),{result:h,niceMin:h[0],niceMax:h[h.length-1]}}},{key:"setYScaleForIndex",value:function(t,e,i){var a=this.w.globals,s=this.w.config,r=a.isBarHorizontal?s.xaxis:s.yaxis[t];void 0===a.yAxisScale[t]&&(a.yAxisScale[t]=[]);var n=Math.abs(i-e);if(r.logarithmic&&n<=5&&(a.invalidLogScale=!0),r.logarithmic&&n>5)a.allSeriesCollapsed=!1,a.yAxisScale[t]=this.logarithmicScale(t,e,i,r.tickAmount?r.tickAmount:Math.floor(Math.log10(i)));else if(i!==-Number.MAX_VALUE&&g.isNumber(i))if(a.allSeriesCollapsed=!1,void 0===r.min&&void 0===r.max||r.forceNiceScale){var o=void 0===s.yaxis[t].max&&void 0===s.yaxis[t].min||s.yaxis[t].forceNiceScale;a.yAxisScale[t]=this.niceScale(e,i,r.tickAmount?r.tickAmount:n<5&&n>1?n+1:5,t,o)}else a.yAxisScale[t]=this.linearScale(e,i,r.tickAmount);else a.yAxisScale[t]=this.linearScale(0,5,5)}},{key:"setXScale",value:function(t,e){var i=this.w,a=i.globals,s=i.config.xaxis,r=Math.abs(e-t);return e!==-Number.MAX_VALUE&&g.isNumber(e)?a.xAxisScale=this.niceScale(t,e,s.tickAmount?s.tickAmount:r<5&&r>1?r+1:5,0):a.xAxisScale=this.linearScale(0,5,5),a.xAxisScale}},{key:"setMultipleYScales",value:function(){var t=this,e=this.w.globals,i=this.w.config,a=e.minYArr.concat([]),s=e.maxYArr.concat([]),r=[];i.yaxis.forEach((function(e,n){var o=n;i.series.forEach((function(t,i){t.name===e.seriesName&&(o=i,n!==i?r.push({index:i,similarIndex:n,alreadyExists:!0}):r.push({index:i}))}));var l=a[o],h=s[o];t.setYScaleForIndex(n,l,h)})),this.sameScaleInMultipleAxes(a,s,r)}},{key:"sameScaleInMultipleAxes",value:function(t,e,i){var a=this,s=this.w.config,r=this.w.globals,n=[];i.forEach((function(t){t.alreadyExists&&(void 0===n[t.index]&&(n[t.index]=[]),n[t.index].push(t.index),n[t.index].push(t.similarIndex))})),r.yAxisSameScaleIndices=n,n.forEach((function(t,e){n.forEach((function(i,a){var s,r;e!==a&&(s=t,r=i,s.filter((function(t){return-1!==r.indexOf(t)}))).length>0&&(n[e]=n[e].concat(n[a]))}))}));var o=n.map((function(t){return t.filter((function(e,i){return t.indexOf(e)===i}))})).map((function(t){return t.sort()}));n=n.filter((function(t){return!!t}));var l=o.slice(),h=l.map((function(t){return JSON.stringify(t)}));l=l.filter((function(t,e){return h.indexOf(JSON.stringify(t))===e}));var c=[],d=[];t.forEach((function(t,i){l.forEach((function(a,s){a.indexOf(i)>-1&&(void 0===c[s]&&(c[s]=[],d[s]=[]),c[s].push({key:i,value:t}),d[s].push({key:i,value:e[i]}))}))}));var g=Array.apply(null,Array(l.length)).map(Number.prototype.valueOf,Number.MIN_VALUE),u=Array.apply(null,Array(l.length)).map(Number.prototype.valueOf,-Number.MAX_VALUE);c.forEach((function(t,e){t.forEach((function(t,i){g[e]=Math.min(t.value,g[e])}))})),d.forEach((function(t,e){t.forEach((function(t,i){u[e]=Math.max(t.value,u[e])}))})),t.forEach((function(t,e){d.forEach((function(t,i){var n=g[i],o=u[i];s.chart.stacked&&(o=0,t.forEach((function(t,e){t.value!==-Number.MAX_VALUE&&(o+=t.value),n!==Number.MIN_VALUE&&(n+=c[i][e].value)}))),t.forEach((function(i,l){t[l].key===e&&(void 0!==s.yaxis[e].min&&(n="function"==typeof s.yaxis[e].min?s.yaxis[e].min(r.minY):s.yaxis[e].min),void 0!==s.yaxis[e].max&&(o="function"==typeof s.yaxis[e].max?s.yaxis[e].max(r.maxY):s.yaxis[e].max),a.setYScaleForIndex(e,n,o))}))}))}))}},{key:"autoScaleY",value:function(t,e,i){t||(t=this);var a=t.w;if(a.globals.isMultipleYAxis||a.globals.collapsedSeries.length)return console.warn("autoScaleYaxis is not supported in a multi-yaxis chart."),e;var s=a.globals.seriesX[0],r=a.config.chart.stacked;return e.forEach((function(t,n){for(var o=0,l=0;l<s.length;l++)if(s[l]>=i.xaxis.min){o=l;break}var h,c,d=a.globals.minYArr[n],g=a.globals.maxYArr[n],u=a.globals.stackedSeriesTotals;a.globals.series.forEach((function(n,l){var f=n[o];r?(f=u[o],h=c=f,u.forEach((function(t,e){s[e]<=i.xaxis.max&&s[e]>=i.xaxis.min&&(t>c&&null!==t&&(c=t),n[e]<h&&null!==n[e]&&(h=n[e]))}))):(h=c=f,n.forEach((function(t,e){if(s[e]<=i.xaxis.max&&s[e]>=i.xaxis.min){var r=t,n=t;a.globals.series.forEach((function(i,a){null!==t&&(r=Math.min(i[e],r),n=Math.max(i[e],n))})),n>c&&null!==n&&(c=n),r<h&&null!==r&&(h=r)}}))),void 0===h&&void 0===c&&(h=d,c=g),(c*=c<0?.9:1.1)<0&&c<g&&(c=g),(h*=h<0?1.1:.9)<0&&h>d&&(h=d),e.length>1?(e[l].min=void 0===t.min?h:t.min,e[l].max=void 0===t.max?c:t.max):(e[0].min=void 0===t.min?h:t.min,e[0].max=void 0===t.max?c:t.max)}))})),e}}]),t}(),U=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.scales=new j(i)}return a(t,[{key:"init",value:function(){this.setYRange(),this.setXRange(),this.setZRange()}},{key:"getMinYMaxY",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:Number.MAX_VALUE,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:-Number.MAX_VALUE,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,s=this.w.config,r=this.w.globals,n=-Number.MAX_VALUE,o=Number.MIN_VALUE;null===a&&(a=t+1);var l=r.series,h=l,c=l;"candlestick"===s.chart.type?(h=r.seriesCandleL,c=r.seriesCandleH):r.isRangeData&&(h=r.seriesRangeStart,c=r.seriesRangeEnd);for(var d=t;d<a;d++){r.dataPoints=Math.max(r.dataPoints,l[d].length);for(var u=0;u<r.series[d].length;u++){var f=l[d][u];null!==f&&g.isNumber(f)?(n=Math.max(n,c[d][u]),e=Math.min(e,h[d][u]),i=Math.max(i,h[d][u]),"candlestick"===this.w.config.chart.type&&(n=Math.max(n,r.seriesCandleO[d][u]),n=Math.max(n,r.seriesCandleH[d][u]),n=Math.max(n,r.seriesCandleL[d][u]),i=n=Math.max(n,r.seriesCandleC[d][u])),g.isFloat(f)&&(f=g.noExponents(f),r.yValueDecimal=Math.max(r.yValueDecimal,f.toString().split(".")[1].length)),o>h[d][u]&&h[d][u]<0&&(o=h[d][u])):r.hasNullValues=!0}}return"rangeBar"===s.chart.type&&r.seriesRangeStart.length&&r.isBarHorizontal&&"datetime"===s.xaxis.type&&(o=e),"bar"===s.chart.type&&(o<0&&n<0&&(n=0),o===Number.MIN_VALUE&&(o=0)),{minY:o,maxY:n,lowestY:e,highestY:i}}},{key:"setYRange",value:function(){var t=this.w.globals,e=this.w.config;t.maxY=-Number.MAX_VALUE,t.minY=Number.MIN_VALUE;var i=Number.MAX_VALUE;if(t.isMultipleYAxis)for(var a=0;a<t.series.length;a++){var s=this.getMinYMaxY(a,i,null,a+1);t.minYArr.push(s.minY),t.maxYArr.push(s.maxY),i=s.lowestY}var r=this.getMinYMaxY(0,i,null,t.series.length);if(t.minY=r.minY,t.maxY=r.maxY,i=r.lowestY,e.chart.stacked&&this._setStackedMinMax(),("line"===e.chart.type||"area"===e.chart.type||"candlestick"===e.chart.type||"rangeBar"===e.chart.type&&!t.isBarHorizontal)&&t.minY===Number.MIN_VALUE&&i!==-Number.MAX_VALUE&&i!==t.maxY){var n=t.maxY-i;i>=0&&i<=10&&(n=0),t.minY=i-5*n/100,i>0&&t.minY<0&&(t.minY=0),t.maxY=t.maxY+5*n/100}if(e.yaxis.forEach((function(e,i){void 0!==e.max&&("number"==typeof e.max?t.maxYArr[i]=e.max:"function"==typeof e.max&&(t.maxYArr[i]=e.max(t.maxY)),t.maxY=t.maxYArr[i]),void 0!==e.min&&("number"==typeof e.min?t.minYArr[i]=e.min:"function"==typeof e.min&&(t.minYArr[i]=e.min(t.minY)),t.minY=t.minYArr[i])})),t.isBarHorizontal){["min","max"].forEach((function(i){void 0!==e.xaxis[i]&&"number"==typeof e.xaxis[i]&&("min"===i?t.minY=e.xaxis[i]:t.maxY=e.xaxis[i])}))}return t.isMultipleYAxis?(this.scales.setMultipleYScales(),t.minY=i,t.yAxisScale.forEach((function(e,i){t.minYArr[i]=e.niceMin,t.maxYArr[i]=e.niceMax}))):(this.scales.setYScaleForIndex(0,t.minY,t.maxY),t.minY=t.yAxisScale[0].niceMin,t.maxY=t.yAxisScale[0].niceMax,t.minYArr[0]=t.yAxisScale[0].niceMin,t.maxYArr[0]=t.yAxisScale[0].niceMax),{minY:t.minY,maxY:t.maxY,minYArr:t.minYArr,maxYArr:t.maxYArr}}},{key:"setXRange",value:function(){var t=this.w.globals,e=this.w.config,i="numeric"===e.xaxis.type||"datetime"===e.xaxis.type||"category"===e.xaxis.type&&!t.noLabelsProvided||t.noLabelsProvided||t.isXNumeric;if(t.isXNumeric&&function(){for(var e=0;e<t.series.length;e++)if(t.labels[e])for(var i=0;i<t.labels[e].length;i++)null!==t.labels[e][i]&&g.isNumber(t.labels[e][i])&&(t.maxX=Math.max(t.maxX,t.labels[e][i]),t.initialMaxX=Math.max(t.maxX,t.labels[e][i]),t.minX=Math.min(t.minX,t.labels[e][i]),t.initialMinX=Math.min(t.minX,t.labels[e][i]))}(),t.noLabelsProvided&&0===e.xaxis.categories.length&&(t.maxX=t.labels[t.labels.length-1],t.initialMaxX=t.labels[t.labels.length-1],t.minX=1,t.initialMinX=1),t.isXNumeric||t.noLabelsProvided||t.dataFormatXNumeric){var a;if(void 0===e.xaxis.tickAmount?(a=Math.round(t.svgWidth/150),"numeric"===e.xaxis.type&&t.dataPoints<30&&(a=t.dataPoints-1),a>t.dataPoints&&0!==t.dataPoints&&(a=t.dataPoints-1)):"dataPoints"===e.xaxis.tickAmount?(t.series.length>1&&(a=t.series[t.maxValsInArrayIndex].length-1),t.isXNumeric&&(a=t.maxX-t.minX-1)):a=e.xaxis.tickAmount,t.xTickAmount=a,void 0!==e.xaxis.max&&"number"==typeof e.xaxis.max&&(t.maxX=e.xaxis.max),void 0!==e.xaxis.min&&"number"==typeof e.xaxis.min&&(t.minX=e.xaxis.min),void 0!==e.xaxis.range&&(t.minX=t.maxX-e.xaxis.range),t.minX!==Number.MAX_VALUE&&t.maxX!==-Number.MAX_VALUE)if(e.xaxis.convertedCatToNumeric&&!t.dataFormatXNumeric){for(var s=[],r=t.minX-1;r<t.maxX;r++)s.push(r+1);t.xAxisScale={result:s,niceMin:s[0],niceMax:s[s.length-1]}}else t.xAxisScale=this.scales.setXScale(t.minX,t.maxX);else t.xAxisScale=this.scales.linearScale(1,a,a),t.noLabelsProvided&&t.labels.length>0&&(t.xAxisScale=this.scales.linearScale(1,t.labels.length,a-1),t.seriesX=t.labels.slice());i&&(t.labels=t.xAxisScale.result.slice())}return t.isBarHorizontal&&t.labels.length&&(t.xTickAmount=t.labels.length),this._handleSingleDataPoint(),this._getMinXDiff(),{minX:t.minX,maxX:t.maxX}}},{key:"setZRange",value:function(){var t=this.w.globals;if(t.isDataXYZ)for(var e=0;e<t.series.length;e++)if(void 0!==t.seriesZ[e])for(var i=0;i<t.seriesZ[e].length;i++)null!==t.seriesZ[e][i]&&g.isNumber(t.seriesZ[e][i])&&(t.maxZ=Math.max(t.maxZ,t.seriesZ[e][i]),t.minZ=Math.min(t.minZ,t.seriesZ[e][i]))}},{key:"_handleSingleDataPoint",value:function(){var t=this.w.globals,e=this.w.config;if(t.minX===t.maxX){var i=new Y(this.ctx);if("datetime"===e.xaxis.type){var a=i.getDate(t.minX);a.setUTCDate(a.getDate()-2),t.minX=new Date(a).getTime();var s=i.getDate(t.maxX);s.setUTCDate(s.getDate()+2),t.maxX=new Date(s).getTime()}else("numeric"===e.xaxis.type||"category"===e.xaxis.type&&!t.noLabelsProvided)&&(t.minX=t.minX-2,t.initialMinX=t.minX,t.maxX=t.maxX+2,t.initialMaxX=t.maxX)}}},{key:"_getMinXDiff",value:function(){var t=this.w.globals;t.isXNumeric&&t.seriesX.forEach((function(e,i){1===e.length&&e.push(t.seriesX[t.maxValsInArrayIndex][t.seriesX[t.maxValsInArrayIndex].length-1]);var a=e.slice();a.sort((function(t,e){return t-e})),a.forEach((function(e,a){if(a>0){var s=e-t.seriesX[i][a-1];s>0&&(t.minXDiff=Math.min(s,t.minXDiff))}})),1===t.dataPoints&&t.minXDiff===Number.MAX_VALUE&&(t.minXDiff=.5)}))}},{key:"_setStackedMinMax",value:function(){var t=this.w.globals,e=[],i=[];if(t.series.length)for(var a=0;a<t.series[t.maxValsInArrayIndex].length;a++)for(var s=0,r=0,n=0;n<t.series.length;n++)null!==t.series[n][a]&&g.isNumber(t.series[n][a])&&(t.series[n][a]>0?s=s+parseFloat(t.series[n][a])+1e-4:r+=parseFloat(t.series[n][a])),n===t.series.length-1&&(e.push(s),i.push(r));for(var o=0;o<e.length;o++)t.maxY=Math.max(t.maxY,e[o]),t.minY=Math.min(t.minY,i[o])}}]),t}(),q=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w;var a=this.w;this.xaxisFontSize=a.config.xaxis.labels.style.fontSize,this.axisFontFamily=a.config.xaxis.labels.style.fontFamily,this.xaxisForeColors=a.config.xaxis.labels.style.colors,this.isCategoryBarHorizontal="bar"===a.config.chart.type&&a.config.plotOptions.bar.horizontal,this.xAxisoffX=0,"bottom"===a.config.xaxis.position&&(this.xAxisoffX=a.globals.gridHeight),this.drawnLabels=[],this.axesUtils=new B(i)}return a(t,[{key:"drawYaxis",value:function(t){var e=this.w,i=new p(this.ctx),a=e.config.yaxis[t].labels.style,s=a.fontSize,r=a.fontFamily,n=a.fontWeight,o=i.group({class:"apexcharts-yaxis",rel:t,transform:"translate("+e.globals.translateYAxisX[t]+", 0)"});if(this.axesUtils.isYAxisHidden(t))return o;var l=i.group({class:"apexcharts-yaxis-texts-g"});o.add(l);var h=e.globals.yAxisScale[t].result.length-1,c=e.globals.gridHeight/h,d=e.globals.translateY,g=e.globals.yLabelFormatters[t],u=e.globals.yAxisScale[t].result.slice();u=this.axesUtils.checkForReversedLabels(t,u);var f="";if(e.config.yaxis[t].labels.show)for(var x=function(o){var p=u[o];p=g(p,o);var x=e.config.yaxis[t].labels.padding;e.config.yaxis[t].opposite&&0!==e.config.yaxis.length&&(x*=-1);var b=i.drawText({x:x,y:d+h/10+e.config.yaxis[t].labels.offsetY+1,text:p,textAnchor:e.config.yaxis[t].opposite?"start":"end",fontSize:s,fontFamily:r,fontWeight:n,foreColor:Array.isArray(a.colors)?a.colors[o]:a.colors,isPlainText:!1,cssClass:"apexcharts-yaxis-label "+a.cssClass});if(o===h&&(f=b),l.add(b),0!==e.config.yaxis[t].labels.rotate){var m=i.rotateAroundCenter(f.node),v=i.rotateAroundCenter(b.node);b.node.setAttribute("transform","rotate(".concat(e.config.yaxis[t].labels.rotate," ").concat(m.x," ").concat(v.y,")"))}d+=c},b=h;b>=0;b--)x(b);if(void 0!==e.config.yaxis[t].title.text){var m=i.group({class:"apexcharts-yaxis-title"}),v=0;e.config.yaxis[t].opposite&&(v=e.globals.translateYAxisX[t]);var y=i.drawText({x:v,y:e.globals.gridHeight/2+e.globals.translateY+e.config.yaxis[t].title.offsetY,text:e.config.yaxis[t].title.text,textAnchor:"end",foreColor:e.config.yaxis[t].title.style.color,fontSize:e.config.yaxis[t].title.style.fontSize,fontWeight:e.config.yaxis[t].title.style.fontWeight,fontFamily:e.config.yaxis[t].title.style.fontFamily,cssClass:"apexcharts-yaxis-title-text "+e.config.yaxis[t].title.style.cssClass});m.add(y),o.add(m)}var w=e.config.yaxis[t].axisBorder,k=31+w.offsetX;if(e.config.yaxis[t].opposite&&(k=-31-w.offsetX),w.show){var A=i.drawLine(k,e.globals.translateY+w.offsetY-2,k,e.globals.gridHeight+e.globals.translateY+w.offsetY+2,w.color,0,w.width);o.add(A)}return e.config.yaxis[t].axisTicks.show&&this.axesUtils.drawYAxisTicks(k,h,w,e.config.yaxis[t].axisTicks,t,c,o),o}},{key:"drawYaxisInversed",value:function(t){var e=this.w,i=new p(this.ctx),a=i.group({class:"apexcharts-xaxis apexcharts-yaxis-inversed"}),s=i.group({class:"apexcharts-xaxis-texts-g",transform:"translate(".concat(e.globals.translateXAxisX,", ").concat(e.globals.translateXAxisY,")")});a.add(s);var r=e.globals.yAxisScale[t].result.length-1,n=e.globals.gridWidth/r+.1,o=n+e.config.xaxis.labels.offsetX,l=e.globals.xLabelFormatter,h=e.globals.yAxisScale[t].result.slice(),c=e.globals.timescaleLabels;c.length>0&&(this.xaxisLabels=c.slice(),r=(h=c.slice()).length),h=this.axesUtils.checkForReversedLabels(t,h);var d=c.length;if(e.config.xaxis.labels.show)for(var g=d?0:r;d?g<d:g>=0;d?g++:g--){var u=h[g];u=l(u,g);var f=e.globals.gridWidth+e.globals.padHorizontal-(o-n+e.config.xaxis.labels.offsetX);if(c.length){var x=this.axesUtils.getLabel(h,c,f,g,this.drawnLabels,this.xaxisFontSize);f=x.x,u=x.text,this.drawnLabels.push(x.text),0===g&&e.globals.skipFirstTimelinelabel&&(u=""),g===h.length-1&&e.globals.skipLastTimelinelabel&&(u="")}var b=i.drawText({x:f,y:this.xAxisoffX+e.config.xaxis.labels.offsetY+30-("top"===e.config.xaxis.position?e.globals.xAxisHeight+e.config.xaxis.axisTicks.height-2:0),text:u,textAnchor:"middle",foreColor:Array.isArray(this.xaxisForeColors)?this.xaxisForeColors[t]:this.xaxisForeColors,fontSize:this.xaxisFontSize,fontFamily:this.xaxisFontFamily,fontWeight:e.config.xaxis.labels.style.fontWeight,isPlainText:!1,cssClass:"apexcharts-xaxis-label "+e.config.xaxis.labels.style.cssClass});s.add(b),b.tspan(u);var m=document.createElementNS(e.globals.SVGNS,"title");m.textContent=u,b.node.appendChild(m),o+=n}return this.inversedYAxisTitleText(a),this.inversedYAxisBorder(a),a}},{key:"inversedYAxisBorder",value:function(t){var e=this.w,i=new p(this.ctx),a=e.config.xaxis.axisBorder;if(a.show){var s=0;"bar"===e.config.chart.type&&e.globals.isXNumeric&&(s-=15);var r=i.drawLine(e.globals.padHorizontal+s+a.offsetX,this.xAxisoffX,e.globals.gridWidth,this.xAxisoffX,a.color,0,a.height);t.add(r)}}},{key:"inversedYAxisTitleText",value:function(t){var e=this.w,i=new p(this.ctx);if(void 0!==e.config.xaxis.title.text){var a=i.group({class:"apexcharts-xaxis-title apexcharts-yaxis-title-inversed"}),s=i.drawText({x:e.globals.gridWidth/2+e.config.xaxis.title.offsetX,y:this.xAxisoffX+parseFloat(this.xaxisFontSize)+parseFloat(e.config.xaxis.title.style.fontSize)+e.config.xaxis.title.offsetY+20,text:e.config.xaxis.title.text,textAnchor:"middle",fontSize:e.config.xaxis.title.style.fontSize,fontFamily:e.config.xaxis.title.style.fontFamily,fontWeight:e.config.xaxis.title.style.fontWeight,cssClass:"apexcharts-xaxis-title-text "+e.config.xaxis.title.style.cssClass});a.add(s),t.add(a)}}},{key:"yAxisTitleRotate",value:function(t,e){var i=this.w,a=new p(this.ctx),s={width:0,height:0},r={width:0,height:0},n=i.globals.dom.baseEl.querySelector(" .apexcharts-yaxis[rel='".concat(t,"'] .apexcharts-yaxis-texts-g"));null!==n&&(s=n.getBoundingClientRect());var o=i.globals.dom.baseEl.querySelector(".apexcharts-yaxis[rel='".concat(t,"'] .apexcharts-yaxis-title text"));if(null!==o&&(r=o.getBoundingClientRect()),null!==o){var l=this.xPaddingForYAxisTitle(t,s,r,e);o.setAttribute("x",l.xPos-(e?10:0))}if(null!==o){var h=a.rotateAroundCenter(o);o.setAttribute("transform","rotate(".concat(e?"":"-").concat(i.config.yaxis[t].title.rotate," ").concat(h.x," ").concat(h.y,")"))}}},{key:"xPaddingForYAxisTitle",value:function(t,e,i,a){var s=this.w,r=0,n=0,o=10;return void 0===s.config.yaxis[t].title.text||t<0?{xPos:n,padd:0}:(a?(n=e.width+s.config.yaxis[t].title.offsetX+i.width/2+o/2,0===(r+=1)&&(n-=o/2)):(n=-1*e.width+s.config.yaxis[t].title.offsetX+o/2+i.width/2,s.globals.isBarHorizontal&&(o=25,n=-1*e.width-s.config.yaxis[t].title.offsetX-o)),{xPos:n,padd:o})}},{key:"setYAxisXPosition",value:function(t,e){var i=this.w,a=0,s=0,r=18,n=1;i.config.yaxis.length>1&&(this.multipleYs=!0),i.config.yaxis.map((function(o,l){var h=i.globals.ignoreYAxisIndexes.indexOf(l)>-1||!o.show||o.floating||0===t[l].width,c=t[l].width+e[l].width;o.opposite?i.globals.isBarHorizontal?(s=i.globals.gridWidth+i.globals.translateX-1,i.globals.translateYAxisX[l]=s-o.labels.offsetX):(s=i.globals.gridWidth+i.globals.translateX+n,h||(n=n+c+20),i.globals.translateYAxisX[l]=s-o.labels.offsetX+20):(a=i.globals.translateX-r,h||(r=r+c+20),i.globals.translateYAxisX[l]=a+o.labels.offsetX)}))}},{key:"setYAxisTextAlignments",value:function(){var t=this.w,e=t.globals.dom.baseEl.getElementsByClassName("apexcharts-yaxis");(e=g.listToArray(e)).forEach((function(e,i){var a=t.config.yaxis[i];if(void 0!==a.labels.align){var s=t.globals.dom.baseEl.querySelector(".apexcharts-yaxis[rel='".concat(i,"'] .apexcharts-yaxis-texts-g")),r=t.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxis[rel='".concat(i,"'] .apexcharts-yaxis-label"));r=g.listToArray(r);var n=s.getBoundingClientRect();"left"===a.labels.align?(r.forEach((function(t,e){t.setAttribute("text-anchor","start")})),a.opposite||s.setAttribute("transform","translate(-".concat(n.width,", 0)"))):"center"===a.labels.align?(r.forEach((function(t,e){t.setAttribute("text-anchor","middle")})),s.setAttribute("transform","translate(".concat(n.width/2*(a.opposite?1:-1),", 0)"))):"right"===a.labels.align&&(r.forEach((function(t,e){t.setAttribute("text-anchor","end")})),a.opposite&&s.setAttribute("transform","translate(".concat(n.width,", 0)")))}}))}}]),t}(),Z=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.documentEvent=g.bind(this.documentEvent,this)}return a(t,[{key:"addEventListener",value:function(t,e){var i=this.w;i.globals.events.hasOwnProperty(t)?i.globals.events[t].push(e):i.globals.events[t]=[e]}},{key:"removeEventListener",value:function(t,e){var i=this.w;if(i.globals.events.hasOwnProperty(t)){var a=i.globals.events[t].indexOf(e);-1!==a&&i.globals.events[t].splice(a,1)}}},{key:"fireEvent",value:function(t,e){var i=this.w;if(i.globals.events.hasOwnProperty(t)){e&&e.length||(e=[]);for(var a=i.globals.events[t],s=a.length,r=0;r<s;r++)a[r].apply(null,e)}}},{key:"setupEventHandlers",value:function(){var t=this,e=this.w,i=this.ctx,a=e.globals.dom.baseEl.querySelector(e.globals.chartClass);this.ctx.eventList.forEach((function(t){a.addEventListener(t,(function(t){var a=Object.assign({},e,{seriesIndex:e.globals.capturedSeriesIndex,dataPointIndex:e.globals.capturedDataPointIndex});"mousemove"===t.type||"touchmove"===t.type?"function"==typeof e.config.chart.events.mouseMove&&e.config.chart.events.mouseMove(t,i,a):("mouseup"===t.type&&1===t.which||"touchend"===t.type)&&("function"==typeof e.config.chart.events.click&&e.config.chart.events.click(t,i,a),i.ctx.events.fireEvent("click",[t,i,a]))}),{capture:!1,passive:!0})})),this.ctx.eventList.forEach((function(e){document.addEventListener(e,t.documentEvent)})),this.ctx.core.setupBrushHandler()}},{key:"documentEvent",value:function(t){var e=this.w,i=t.target.className;if("click"===t.type){var a=e.globals.dom.baseEl.querySelector(".apexcharts-menu");a&&a.classList.contains("apexcharts-menu-open")&&"apexcharts-menu-icon"!==i&&a.classList.remove("apexcharts-menu-open")}if("mousedown"===t.type){var s=e.globals.dom.Paper.select(".apexcharts-resizable-element").members;Array.prototype.forEach.call(s,(function(e){t.target.classList.contains("apexcharts-resizable-element")||t.target.classList.contains("svg_select_points")||e.selectize(!1)}))}e.globals.clientX="touchmove"===t.type?t.touches[0].clientX:t.clientX,e.globals.clientY="touchmove"===t.type?t.touches[0].clientY:t.clientY}}]),t}(),$=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"setCurrentLocaleValues",value:function(t){var e=this.w.config.chart.locales;window.Apex.chart&&window.Apex.chart.locales&&window.Apex.chart.locales.length>0&&(e=this.w.config.chart.locales.concat(window.Apex.chart.locales));var i=e.filter((function(e){return e.name===t}))[0];if(!i)throw new Error("Wrong locale name provided. Please make sure you set the correct locale name in options");var a=g.extend(A,i);this.w.globals.locale=a.options}}]),t}(),J=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"drawAxis",value:function(t,e){var i,a,s=this.w.globals,r=this.w.config,n=new G(this.ctx),o=new q(this.ctx);s.axisCharts&&"radar"!==t&&(s.isBarHorizontal?(a=o.drawYaxisInversed(0),i=n.drawXaxisInversed(0),s.dom.elGraphical.add(i),s.dom.elGraphical.add(a)):(i=n.drawXaxis(),s.dom.elGraphical.add(i),r.yaxis.map((function(t,e){-1===s.ignoreYAxisIndexes.indexOf(e)&&(a=o.drawYaxis(e),s.dom.Paper.add(a))}))));r.yaxis.map((function(t,e){-1===s.ignoreYAxisIndexes.indexOf(e)&&o.yAxisTitleRotate(e,t.opposite)}))}}]),t}(),Q=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"drawXCrosshairs",value:function(){var t=this.w,e=new p(this.ctx),i=new u(this.ctx),a=t.config.xaxis.crosshairs.fill.gradient,s=t.config.xaxis.crosshairs.dropShadow,r=t.config.xaxis.crosshairs.fill.type,n=a.colorFrom,o=a.colorTo,l=a.opacityFrom,h=a.opacityTo,c=a.stops,d=s.enabled,f=s.left,x=s.top,b=s.blur,m=s.color,v=s.opacity,y=t.config.xaxis.crosshairs.fill.color;if(t.config.xaxis.crosshairs.show){"gradient"===r&&(y=e.drawGradient("vertical",n,o,l,h,null,c,null));var w=e.drawRect();1===t.config.xaxis.crosshairs.width&&(w=e.drawLine()),w.attr({class:"apexcharts-xcrosshairs",x:0,y:0,y2:t.globals.gridHeight,width:g.isNumber(t.config.xaxis.crosshairs.width)?t.config.xaxis.crosshairs.width:0,height:t.globals.gridHeight,fill:y,filter:"none","fill-opacity":t.config.xaxis.crosshairs.opacity,stroke:t.config.xaxis.crosshairs.stroke.color,"stroke-width":t.config.xaxis.crosshairs.stroke.width,"stroke-dasharray":t.config.xaxis.crosshairs.stroke.dashArray}),d&&(w=i.dropShadow(w,{left:f,top:x,blur:b,color:m,opacity:v})),t.globals.dom.elGraphical.add(w)}}},{key:"drawYCrosshairs",value:function(){var t=this.w,e=new p(this.ctx),i=t.config.yaxis[0].crosshairs;if(t.config.yaxis[0].crosshairs.show){var a=e.drawLine(0,0,t.globals.gridWidth,0,i.stroke.color,i.stroke.dashArray,i.stroke.width);a.attr({class:"apexcharts-ycrosshairs"}),t.globals.dom.elGraphical.add(a)}var s=e.drawLine(0,0,t.globals.gridWidth,0,i.stroke.color,0,0);s.attr({class:"apexcharts-ycrosshairs-hidden"}),t.globals.dom.elGraphical.add(s)}}]),t}(),K=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"checkResponsiveConfig",value:function(t){var e=this,i=this.w,a=i.config;if(0!==a.responsive.length){var s=a.responsive.slice();s.sort((function(t,e){return t.breakpoint>e.breakpoint?1:e.breakpoint>t.breakpoint?-1:0})).reverse();var r=new D({}),n=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},a=s[0].breakpoint,n=window.innerWidth>0?window.innerWidth:screen.width;if(n>a){var o=m.extendArrayProps(r,i.globals.initialConfig,i);t=g.extend(o,t),t=g.extend(i.config,t),e.overrideResponsiveOptions(t)}else for(var l=0;l<s.length;l++)n<s[l].breakpoint&&(t=m.extendArrayProps(r,s[l].options,i),t=g.extend(i.config,t),e.overrideResponsiveOptions(t))};if(t){var o=m.extendArrayProps(r,t,i);o=g.extend(i.config,o),n(o=g.extend(o,t))}else n({})}}},{key:"overrideResponsiveOptions",value:function(t){var e=new D(t).init({responsiveOverride:!0});this.w.config=e}}]),t}(),tt=function(){function t(i){e(this,t),this.ctx=i,this.colors=[],this.w=i.w;var a=this.w;this.isColorFn=!1,this.isBarDistributed=a.config.plotOptions.bar.distributed&&("bar"===a.config.chart.type||"rangeBar"===a.config.chart.type)}return a(t,[{key:"init",value:function(){this.setDefaultColors()}},{key:"setDefaultColors",value:function(){var t=this,e=this.w,i=new g;if(e.globals.dom.elWrap.classList.add("apexcharts-theme-".concat(e.config.theme.mode)),void 0===e.config.colors?e.globals.colors=this.predefined():(e.globals.colors=e.config.colors,Array.isArray(e.config.colors)&&e.config.colors.length>0&&"function"==typeof e.config.colors[0]&&(e.globals.colors=e.config.series.map((function(i,a){var s=e.config.colors[a];return s||(s=e.config.colors[0]),"function"==typeof s?(t.isColorFn=!0,s({value:e.globals.axisCharts?e.globals.series[a][0]?e.globals.series[a][0]:0:e.globals.series[a],seriesIndex:a,dataPointIndex:a,w:e})):s})))),e.config.theme.monochrome.enabled){var a=[],s=e.globals.series.length;this.isBarDistributed&&(s=e.globals.series[0].length*e.globals.series.length);for(var r=e.config.theme.monochrome.color,n=1/(s/e.config.theme.monochrome.shadeIntensity),o=e.config.theme.monochrome.shadeTo,l=0,h=0;h<s;h++){var c=void 0;"dark"===o?(c=i.shadeColor(-1*l,r),l+=n):(c=i.shadeColor(l,r),l+=n),a.push(c)}e.globals.colors=a.slice()}var d=e.globals.colors.slice();this.pushExtraColors(e.globals.colors);["fill","stroke"].forEach((function(i){void 0===e.config[i].colors?e.globals[i].colors=t.isColorFn?e.config.colors:d:e.globals[i].colors=e.config[i].colors.slice(),t.pushExtraColors(e.globals[i].colors)})),void 0===e.config.dataLabels.style.colors?e.globals.dataLabels.style.colors=d:e.globals.dataLabels.style.colors=e.config.dataLabels.style.colors.slice(),this.pushExtraColors(e.globals.dataLabels.style.colors,50),void 0===e.config.plotOptions.radar.polygons.fill.colors?e.globals.radarPolygons.fill.colors=["dark"===e.config.theme.mode?"#202D48":"#fff"]:e.globals.radarPolygons.fill.colors=e.config.plotOptions.radar.polygons.fill.colors.slice(),this.pushExtraColors(e.globals.radarPolygons.fill.colors,20),void 0===e.config.markers.colors?e.globals.markers.colors=d:e.globals.markers.colors=e.config.markers.colors.slice(),this.pushExtraColors(e.globals.markers.colors)}},{key:"pushExtraColors",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,a=this.w,s=e||a.globals.series.length;if(null===i&&(i=this.isBarDistributed||"heatmap"===a.config.chart.type&&a.config.plotOptions.heatmap.colorScale.inverse),i&&(s=a.globals.series[0].length*a.globals.series.length),t.length<s)for(var r=s-t.length,n=0;n<r;n++)t.push(t[n])}},{key:"updateThemeOptions",value:function(t){t.chart=t.chart||{},t.tooltip=t.tooltip||{};var e=t.theme.mode||"light",i=t.theme.palette?t.theme.palette:"dark"===e?"palette4":"palette1",a=t.chart.foreColor?t.chart.foreColor:"dark"===e?"#f6f7f8":"#373d3f";return t.tooltip.theme=e,t.chart.foreColor=a,t.theme.palette=i,t}},{key:"predefined",value:function(){switch(this.w.config.theme.palette){case"palette1":this.colors=["#008FFB","#00E396","#FEB019","#FF4560","#775DD0"];break;case"palette2":this.colors=["#3f51b5","#03a9f4","#4caf50","#f9ce1d","#FF9800"];break;case"palette3":this.colors=["#33b2df","#546E7A","#d4526e","#13d8aa","#A5978B"];break;case"palette4":this.colors=["#4ecdc4","#c7f464","#81D4FA","#fd6a6a","#546E7A"];break;case"palette5":this.colors=["#2b908f","#f9a3a4","#90ee7e","#fa4443","#69d2e7"];break;case"palette6":this.colors=["#449DD1","#F86624","#EA3546","#662E9B","#C5D86D"];break;case"palette7":this.colors=["#D7263D","#1B998B","#2E294E","#F46036","#E2C044"];break;case"palette8":this.colors=["#662E9B","#F86624","#F9C80E","#EA3546","#43BCCD"];break;case"palette9":this.colors=["#5C4742","#A5978B","#8D5B4C","#5A2A27","#C4BBAF"];break;case"palette10":this.colors=["#A300D6","#7D02EB","#5653FE","#2983FF","#00B1F2"];break;default:this.colors=["#008FFB","#00E396","#FEB019","#FF4560","#775DD0"]}return this.colors}}]),t}(),et=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"draw",value:function(){this.drawTitleSubtitle("title"),this.drawTitleSubtitle("subtitle")}},{key:"drawTitleSubtitle",value:function(t){var e=this.w,i="title"===t?e.config.title:e.config.subtitle,a=e.globals.svgWidth/2,s=i.offsetY,r="middle";if("left"===i.align?(a=10,r="start"):"right"===i.align&&(a=e.globals.svgWidth-10,r="end"),a+=i.offsetX,s=s+parseInt(i.style.fontSize,10)+i.margin/2,void 0!==i.text){var n=new p(this.ctx).drawText({x:a,y:s,text:i.text,textAnchor:r,fontSize:i.style.fontSize,fontFamily:i.style.fontFamily,fontWeight:i.style.fontWeight,foreColor:i.style.color,opacity:1});n.node.setAttribute("class","apexcharts-".concat(t,"-text")),e.globals.dom.Paper.add(n)}}}]),t}(),it=function(){function t(i){e(this,t),this.w=i.w,this.dCtx=i}return a(t,[{key:"getTitleSubtitleCoords",value:function(t){var e=this.w,i=0,a=0,s="title"===t?e.config.title.floating:e.config.subtitle.floating,r=e.globals.dom.baseEl.querySelector(".apexcharts-".concat(t,"-text"));if(null!==r&&!s){var n=r.getBoundingClientRect();i=n.width,a=e.globals.axisCharts?n.height+5:n.height}return{width:i,height:a}}},{key:"getLegendsRect",value:function(){var t=this.w,e=t.globals.dom.baseEl.querySelector(".apexcharts-legend"),i=Object.assign({},g.getBoundingClientRect(e));return null!==e&&!t.config.legend.floating&&t.config.legend.show?this.dCtx.lgRect={x:i.x,y:i.y,height:i.height,width:0===i.height?0:i.width}:this.dCtx.lgRect={x:0,y:0,height:0,width:0},"left"!==t.config.legend.position&&"right"!==t.config.legend.position||1.5*this.dCtx.lgRect.width>t.globals.svgWidth&&(this.dCtx.lgRect.width=t.globals.svgWidth/1.5),this.dCtx.lgRect}},{key:"getLargestStringFromMultiArr",value:function(t,e){var i=t;if(this.w.globals.isMultiLineX){var a=e.map((function(t,e){return Array.isArray(t)?t.length:1})),s=Math.max.apply(Math,d(a));i=e[a.indexOf(s)]}return i}}]),t}(),at=function(){function t(i){e(this,t),this.w=i.w,this.dCtx=i}return a(t,[{key:"getxAxisLabelsCoords",value:function(){var t,e=this.w,i=e.globals.labels.slice();if(e.config.xaxis.convertedCatToNumeric&&0===i.length&&(i=e.globals.categoryLabels),e.globals.timescaleLabels.length>0){var a=this.getxAxisTimeScaleLabelsCoords();t={width:a.width,height:a.height},e.globals.rotateXLabels=!1}else{this.dCtx.lgWidthForSideLegends="left"!==e.config.legend.position&&"right"!==e.config.legend.position||e.config.legend.floating?0:this.dCtx.lgRect.width;var s=e.globals.xLabelFormatter,r=g.getLargestStringFromArr(i),n=this.dCtx.dimHelpers.getLargestStringFromMultiArr(r,i);e.globals.isBarHorizontal&&(n=r=e.globals.yAxisScale[0].result.reduce((function(t,e){return t.length>e.length?t:e}),0));var o=new W(this.dCtx.ctx),l=r;r=o.xLabelFormat(s,r,l),n=o.xLabelFormat(s,n,l),(e.config.xaxis.convertedCatToNumeric&&void 0===r||""===String(r).trim())&&(n=r="1");var h=new p(this.dCtx.ctx),c=h.getTextRects(r,e.config.xaxis.labels.style.fontSize),d=c;if(r!==n&&(d=h.getTextRects(n,e.config.xaxis.labels.style.fontSize)),(t={width:c.width>=d.width?c.width:d.width,height:c.height>=d.height?c.height:d.height}).width*i.length>e.globals.svgWidth-this.dCtx.lgWidthForSideLegends-this.dCtx.yAxisWidth-this.dCtx.gridPad.left-this.dCtx.gridPad.right&&0!==e.config.xaxis.labels.rotate||e.config.xaxis.labels.rotateAlways){if(!e.globals.isBarHorizontal){e.globals.rotateXLabels=!0;var u=function(t){return h.getTextRects(t,e.config.xaxis.labels.style.fontSize,e.config.xaxis.labels.style.fontFamily,"rotate(".concat(e.config.xaxis.labels.rotate," 0 0)"),!1)};c=u(r),r!==n&&(d=u(n)),t.height=(c.height>d.height?c.height:d.height)/1.5,t.width=c.width>d.width?c.width:d.width}}else e.globals.rotateXLabels=!1}return e.config.xaxis.labels.show||(t={width:0,height:0}),{width:t.width,height:t.height}}},{key:"getxAxisTitleCoords",value:function(){var t=this.w,e=0,i=0;if(void 0!==t.config.xaxis.title.text){var a=new p(this.dCtx.ctx).getTextRects(t.config.xaxis.title.text,t.config.xaxis.title.style.fontSize);e=a.width,i=a.height}return{width:e,height:i}}},{key:"getxAxisTimeScaleLabelsCoords",value:function(){var t,e=this.w;this.dCtx.timescaleLabels=e.globals.timescaleLabels.slice();var i=this.dCtx.timescaleLabels.map((function(t){return t.value})),a=i.reduce((function(t,e){return void 0===t?(console.error("You have possibly supplied invalid Date format. Please supply a valid JavaScript Date"),0):t.length>e.length?t:e}),0);return 1.05*(t=new p(this.dCtx.ctx).getTextRects(a,e.config.xaxis.labels.style.fontSize)).width*i.length>e.globals.gridWidth&&0!==e.config.xaxis.labels.rotate&&(e.globals.overlappingXLabels=!0),t}},{key:"additionalPaddingXLabels",value:function(t){var e=this,i=this.w,a=i.globals,s=i.config,r=s.xaxis.type,n=t.width;a.skipLastTimelinelabel=!1,a.skipFirstTimelinelabel=!1;var o=i.config.yaxis[0].opposite&&i.globals.isBarHorizontal,l=function(t,o){(function(t){return-1!==a.collapsedSeriesIndices.indexOf(t)})(o)||("datetime"!==r&&e.dCtx.gridPad.left<n/2-e.dCtx.yAxisWidthLeft&&!a.rotateXLabels&&!s.xaxis.labels.trim&&(e.dCtx.xPadLeft=n/2+1),function(t){if(e.dCtx.timescaleLabels&&e.dCtx.timescaleLabels.length){var s=e.dCtx.timescaleLabels[0],o=e.dCtx.timescaleLabels[e.dCtx.timescaleLabels.length-1].position+n/1.75-e.dCtx.yAxisWidthRight,l=s.position-n/1.75+e.dCtx.yAxisWidthLeft;o>a.gridWidth&&(a.skipLastTimelinelabel=!0),l<0&&(a.skipFirstTimelinelabel=!0)}else"datetime"===r?e.dCtx.gridPad.right<n&&!a.rotateXLabels&&(a.skipLastTimelinelabel=!0):"datetime"!==r&&e.dCtx.gridPad.right<n/2-e.dCtx.yAxisWidthRight&&!a.rotateXLabels&&("between"!==i.config.xaxis.tickPlacement||i.globals.isBarHorizontal)&&(e.dCtx.xPadRight=n/2+1)}())};s.yaxis.forEach((function(t,i){o?(e.dCtx.gridPad.left<n&&(e.dCtx.xPadLeft=n/2+1),e.dCtx.xPadRight=n/2+1):l(0,i)}))}}]),t}(),st=function(){function t(i){e(this,t),this.w=i.w,this.dCtx=i}return a(t,[{key:"getyAxisLabelsCoords",value:function(){var t=this,e=this.w,i=[],a=10,s=new B(this.dCtx.ctx);return e.config.yaxis.map((function(r,n){if(!s.isYAxisHidden(n)&&r.labels.show&&e.globals.yAxisScale[n].result.length){var o=e.globals.yLabelFormatters[n],l=o(e.globals.yAxisScale[n].niceMax,{seriesIndex:n,dataPointIndex:-1,w:e}),h=l;if(void 0!==l&&0!==l.length||(l=e.globals.yAxisScale[n].niceMax),e.globals.isBarHorizontal){a=0;var c=e.globals.labels.slice();l=o(l=g.getLargestStringFromArr(c),{seriesIndex:n,dataPointIndex:-1,w:e}),h=t.dCtx.dimHelpers.getLargestStringFromMultiArr(l,c)}var d=new p(t.dCtx.ctx),u=d.getTextRects(l,r.labels.style.fontSize),f=u;l!==h&&(f=d.getTextRects(h,r.labels.style.fontSize)),i.push({width:(f.width>u.width?f.width:u.width)+a,height:f.height>u.height?f.height:u.height})}else i.push({width:0,height:0})})),i}},{key:"getyAxisTitleCoords",value:function(){var t=this,e=this.w,i=[];return e.config.yaxis.map((function(e,a){if(e.show&&void 0!==e.title.text){var s=new p(t.dCtx.ctx).getTextRects(e.title.text,e.title.style.fontSize,e.title.style.fontFamily,"rotate(-90 0 0)",!1);i.push({width:s.width,height:s.height})}else i.push({width:0,height:0})})),i}},{key:"getTotalYAxisWidth",value:function(){var t=this.w,e=0,i=0,a=0,s=t.globals.yAxisScale.length>1?10:0,r=new B(this.dCtx.ctx),n=function(n,o){var l=t.config.yaxis[o].floating,h=0;n.width>0&&!l?(h=n.width+s,function(e){return t.globals.ignoreYAxisIndexes.indexOf(e)>-1}(o)&&(h=h-n.width-s)):h=l||r.isYAxisHidden(o)?0:5,t.config.yaxis[o].opposite?a+=h:i+=h,e+=h};return t.globals.yLabelsCoords.map((function(t,e){n(t,e)})),t.globals.yTitleCoords.map((function(t,e){n(t,e)})),t.globals.isBarHorizontal&&(e=t.globals.yLabelsCoords[0].width+t.globals.yTitleCoords[0].width+15),this.dCtx.yAxisWidthLeft=i,this.dCtx.yAxisWidthRight=a,e}}]),t}(),rt=function(){function t(i){e(this,t),this.w=i.w,this.dCtx=i}return a(t,[{key:"gridPadForColumnsInNumericAxis",value:function(t){var e=this.w;if(e.globals.noData||e.globals.allSeriesCollapsed)return 0;var i=e.config.chart.type,a=0,s="bar"===i||"rangeBar"===i?e.config.series.length:1;if(e.globals.comboBarCount>0&&(s=e.globals.comboBarCount),e.globals.collapsedSeries.forEach((function(t){"bar"!==t.type&&"rangeBar"!==t.type||(s-=1)})),e.config.chart.stacked&&(s=1),("bar"===i||"rangeBar"===i||e.globals.comboBarCount>0)&&e.globals.isXNumeric&&!e.globals.isBarHorizontal&&s>0){var r,n,o=Math.abs(e.globals.initialMaxX-e.globals.initialMinX);o<=3&&(o=e.globals.dataPoints),r=o/t,e.globals.minXDiff&&e.globals.minXDiff/r>0&&(n=e.globals.minXDiff/r),(a=n/s*parseInt(e.config.plotOptions.bar.columnWidth,10)/100)<1&&(a=1),a=a/(s>1?1:1.5)+5,e.globals.barPadForNumericAxis=a}return a}},{key:"gridPadFortitleSubtitle",value:function(){var t=this,e=this.w,i=e.globals,a=this.dCtx.isSparkline||!e.globals.axisCharts?0:10;["title","subtitle"].forEach((function(i){void 0!==e.config[i].text?a+=e.config[i].margin:a+=t.dCtx.isSparkline||!e.globals.axisCharts?0:5}));var s=e.config.series.length>1||!e.globals.axisCharts||e.config.legend.showForSingleSeries;e.config.legend.show&&"bottom"===e.config.legend.position&&!e.config.legend.floating&&s&&(a+=10);var r=this.dCtx.dimHelpers.getTitleSubtitleCoords("title"),n=this.dCtx.dimHelpers.getTitleSubtitleCoords("subtitle");i.gridHeight=i.gridHeight-r.height-n.height-a,i.translateY=i.translateY+r.height+n.height+a}},{key:"setGridXPosForDualYAxis",value:function(t,e){var i=this.w,a=new B(this.dCtx.ctx);i.config.yaxis.map((function(s,r){-1!==i.globals.ignoreYAxisIndexes.indexOf(r)||s.floating||a.isYAxisHidden(r)||s.opposite&&(i.globals.translateX=i.globals.translateX-(e[r].width+t[r].width)-parseInt(i.config.yaxis[r].labels.style.fontSize,10)/1.2-12)}))}}]),t}(),nt=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.lgRect={},this.yAxisWidth=0,this.yAxisWidthLeft=0,this.yAxisWidthRight=0,this.xAxisHeight=0,this.isSparkline=this.w.config.chart.sparkline.enabled,this.dimHelpers=new it(this),this.dimYAxis=new st(this),this.dimXAxis=new at(this),this.dimGrid=new rt(this),this.lgWidthForSideLegends=0,this.gridPad=this.w.config.grid.padding,this.xPadRight=0,this.xPadLeft=0}return a(t,[{key:"plotCoords",value:function(){var t=this.w.globals;this.lgRect=this.dimHelpers.getLegendsRect(),t.axisCharts?this.setDimensionsForAxisCharts():this.setDimensionsForNonAxisCharts(),this.dimGrid.gridPadFortitleSubtitle(),t.gridHeight=t.gridHeight-this.gridPad.top-this.gridPad.bottom,t.gridWidth=t.gridWidth-this.gridPad.left-this.gridPad.right-this.xPadRight-this.xPadLeft;var e=this.dimGrid.gridPadForColumnsInNumericAxis(t.gridWidth);t.gridWidth=t.gridWidth-2*e,t.translateX=t.translateX+this.gridPad.left+this.xPadLeft+(e>0?e+4:0),t.translateY=t.translateY+this.gridPad.top}},{key:"setDimensionsForAxisCharts",value:function(){var t=this,e=this.w,i=e.globals,a=this.dimYAxis.getyAxisLabelsCoords(),s=this.dimYAxis.getyAxisTitleCoords();e.globals.yLabelsCoords=[],e.globals.yTitleCoords=[],e.config.yaxis.map((function(t,i){e.globals.yLabelsCoords.push({width:a[i].width,index:i}),e.globals.yTitleCoords.push({width:s[i].width,index:i})})),this.yAxisWidth=this.dimYAxis.getTotalYAxisWidth();var r=this.dimXAxis.getxAxisLabelsCoords(),n=this.dimXAxis.getxAxisTitleCoords();this.conditionalChecksForAxisCoords(r,n),i.translateXAxisY=e.globals.rotateXLabels?this.xAxisHeight/8:-4,i.translateXAxisX=e.globals.rotateXLabels&&e.globals.isXNumeric&&e.config.xaxis.labels.rotate<=-45?-this.xAxisWidth/4:0,e.globals.isBarHorizontal&&(i.rotateXLabels=!1,i.translateXAxisY=parseInt(e.config.xaxis.labels.style.fontSize,10)/1.5*-1),i.translateXAxisY=i.translateXAxisY+e.config.xaxis.labels.offsetY,i.translateXAxisX=i.translateXAxisX+e.config.xaxis.labels.offsetX;var o=this.yAxisWidth,l=this.xAxisHeight;i.xAxisLabelsHeight=this.xAxisHeight,i.xAxisHeight=this.xAxisHeight;var h=10;("radar"===e.config.chart.type||this.isSparkline)&&(o=0,l=i.goldenPadding),this.isSparkline&&(this.lgRect={height:0,width:0},l=0,o=0,h=0),this.dimXAxis.additionalPaddingXLabels(r);var c=function(){i.translateX=o,i.gridHeight=i.svgHeight-t.lgRect.height-l-(t.isSparkline?0:e.globals.rotateXLabels?10:15),i.gridWidth=i.svgWidth-o};switch("top"===e.config.xaxis.position&&(h=i.xAxisHeight-e.config.xaxis.axisTicks.height-5),e.config.legend.position){case"bottom":i.translateY=h,c();break;case"top":i.translateY=this.lgRect.height+h,c();break;case"left":i.translateY=h,i.translateX=this.lgRect.width+o,i.gridHeight=i.svgHeight-l-12,i.gridWidth=i.svgWidth-this.lgRect.width-o;break;case"right":i.translateY=h,i.translateX=o,i.gridHeight=i.svgHeight-l-12,i.gridWidth=i.svgWidth-this.lgRect.width-o-5;break;default:throw new Error("Legend position not supported")}this.dimGrid.setGridXPosForDualYAxis(s,a),new q(this.ctx).setYAxisXPosition(a,s)}},{key:"setDimensionsForNonAxisCharts",value:function(){var t=this.w,e=t.globals,i=t.config,a=0;t.config.legend.show&&!t.config.legend.floating&&(a=20);var s="pie"===i.chart.type||"polarArea"===i.chart.type||"donut"===i.chart.type?"pie":"radialBar",r=i.plotOptions[s].offsetY,n=i.plotOptions[s].offsetX;if(!i.legend.show||i.legend.floating)return e.gridHeight=e.svgHeight-i.grid.padding.left+i.grid.padding.right,e.gridWidth=e.gridHeight,e.translateY=r,void(e.translateX=n+(e.svgWidth-e.gridWidth)/2);switch(i.legend.position){case"bottom":e.gridHeight=e.svgHeight-this.lgRect.height-e.goldenPadding,e.gridWidth=e.gridHeight,e.translateY=r-10,e.translateX=n+(e.svgWidth-e.gridWidth)/2;break;case"top":e.gridHeight=e.svgHeight-this.lgRect.height-e.goldenPadding,e.gridWidth=e.gridHeight,e.translateY=this.lgRect.height+r+10,e.translateX=n+(e.svgWidth-e.gridWidth)/2;break;case"left":e.gridWidth=e.svgWidth-this.lgRect.width-a,e.gridHeight="auto"!==i.chart.height?e.svgHeight:e.gridWidth,e.translateY=r,e.translateX=n+this.lgRect.width+a;break;case"right":e.gridWidth=e.svgWidth-this.lgRect.width-a-5,e.gridHeight="auto"!==i.chart.height?e.svgHeight:e.gridWidth,e.translateY=r,e.translateX=n+10;break;default:throw new Error("Legend position not supported")}}},{key:"conditionalChecksForAxisCoords",value:function(t,e){var i=this.w;this.xAxisHeight=(t.height+e.height)*(i.globals.isMultiLineX?1.2:i.globals.LINE_HEIGHT_RATIO)+(i.globals.rotateXLabels?22:10),this.xAxisWidth=t.width,this.xAxisHeight-e.height>i.config.xaxis.labels.maxHeight&&(this.xAxisHeight=i.config.xaxis.labels.maxHeight),i.config.xaxis.labels.minHeight&&this.xAxisHeight<i.config.xaxis.labels.minHeight&&(this.xAxisHeight=i.config.xaxis.labels.minHeight),i.config.xaxis.floating&&(this.xAxisHeight=0);var a=0,s=0;i.config.yaxis.forEach((function(t){a+=t.labels.minWidth,s+=t.labels.maxWidth})),this.yAxisWidth<a&&(this.yAxisWidth=a),this.yAxisWidth>s&&(this.yAxisWidth=s)}}]),t}(),ot=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"drawYAxisTexts",value:function(t,e,i,a){var s=this.w,r=s.config.yaxis[0],n=s.globals.yLabelFormatters[0];return new p(this.ctx).drawText({x:t+r.labels.offsetX,y:e+r.labels.offsetY,text:n(a,i),textAnchor:"middle",fontSize:r.labels.style.fontSize,fontFamily:r.labels.style.fontFamily,foreColor:r.labels.style.color})}}]),t}(),lt=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.chartType=this.w.config.chart.type,this.initialAnim=this.w.config.chart.animations.enabled,this.dynamicAnim=this.initialAnim&&this.w.config.chart.animations.dynamicAnimation.enabled,this.animBeginArr=[0],this.animDur=0,this.donutDataLabels=this.w.config.plotOptions.pie.donut.labels;var a=this.w;this.lineColorArr=void 0!==a.globals.stroke.colors?a.globals.stroke.colors:a.globals.colors,this.defaultSize=a.globals.svgHeight<a.globals.svgWidth?a.globals.gridHeight:a.globals.gridWidth,this.centerY=this.defaultSize/2,this.centerX=a.globals.gridWidth/2,this.fullAngle=360,a.globals.radialSize=this.defaultSize/2.05-a.config.stroke.width-(a.config.chart.sparkline.enabled?0:a.config.chart.dropShadow.blur),this.donutSize=a.globals.radialSize*parseInt(a.config.plotOptions.pie.donut.size,10)/100,this.maxY=0,this.sliceLabels=[],this.sliceSizes=[],this.prevSectorAngleArr=[]}return a(t,[{key:"draw",value:function(t){var e=this,i=this.w,a=new p(this.ctx);if(this.ret=a.group({class:"apexcharts-pie"}),i.globals.noData)return this.ret;for(var s=0,r=0;r<t.length;r++)s+=g.negToZero(t[r]);var n=[],o=a.group();0===s&&(s=1e-5),t.forEach((function(t){e.maxY=Math.max(e.maxY,t)})),"polarArea"===this.chartType&&this.drawPolarElements();for(var l=0;l<t.length;l++){var h=this.fullAngle*g.negToZero(t[l])/s;n.push(h),"polarArea"===this.chartType?(n[l]=this.fullAngle/t.length,this.sliceSizes.push(i.globals.radialSize*t[l]/this.maxY)):this.sliceSizes.push(i.globals.radialSize)}if(i.globals.dataChanged){for(var c,d=0,u=0;u<i.globals.previousPaths.length;u++)d+=g.negToZero(i.globals.previousPaths[u]);for(var f=0;f<i.globals.previousPaths.length;f++)c=this.fullAngle*g.negToZero(i.globals.previousPaths[f])/d,this.prevSectorAngleArr.push(c)}this.donutSize<0&&(this.donutSize=0);var x=i.config.plotOptions.pie.customScale,b=i.globals.gridWidth/2,m=i.globals.gridHeight/2,v=b-i.globals.gridWidth/2*x,y=m-i.globals.gridHeight/2*x;if("donut"===this.chartType){var w=a.drawCircle(this.donutSize);w.attr({cx:this.centerX,cy:this.centerY,fill:i.config.plotOptions.pie.donut.background?i.config.plotOptions.pie.donut.background:"transparent"}),o.add(w)}var k=this.drawArcs(n,t);if(this.sliceLabels.forEach((function(t){k.add(t)})),o.attr({transform:"translate(".concat(v,", ").concat(y,") scale(").concat(x,")")}),o.add(k),this.ret.add(o),this.donutDataLabels.show){var A=this.renderInnerDataLabels(this.donutDataLabels,{hollowSize:this.donutSize,centerX:this.centerX,centerY:this.centerY,opacity:this.donutDataLabels.show,translateX:v,translateY:y});this.ret.add(A)}return this.ret}},{key:"drawArcs",value:function(t,e){var i=this.w,a=new u(this.ctx),s=new p(this.ctx),r=new L(this.ctx),n=s.group({class:"apexcharts-slices"}),o=0,l=0,h=0,c=0;this.strokeWidth=i.config.stroke.show?i.config.stroke.width:0;for(var d=0;d<t.length;d++){var f=s.group({class:"apexcharts-series apexcharts-pie-series",seriesName:g.escapeString(i.globals.seriesNames[d]),rel:d+1,"data:realIndex":d});n.add(f),l=c,h=(o=h)+t[d],c=l+this.prevSectorAngleArr[d];var x=h-o,b=r.fillPath({seriesNumber:d,size:this.sliceSizes[d],value:e[d]}),m=this.getChangedPath(l,c),v=s.drawPath({d:m,stroke:this.lineColorArr instanceof Array?this.lineColorArr[d]:this.lineColorArr,strokeWidth:0,fill:b,fillOpacity:i.config.fill.opacity,classes:"apexcharts-pie-area apexcharts-".concat(this.chartType.toLowerCase(),"-slice-").concat(d)});if(v.attr({index:0,j:d}),i.config.chart.dropShadow.enabled){var y=i.config.chart.dropShadow;a.dropShadow(v,y,d)}this.addListeners(v,this.donutDataLabels),p.setAttrs(v.node,{"data:angle":x,"data:startAngle":o,"data:strokeWidth":this.strokeWidth,"data:value":e[d]});var w={x:0,y:0};"pie"===this.chartType||"polarArea"===this.chartType?w=g.polarToCartesian(this.centerX,this.centerY,i.globals.radialSize/1.25+i.config.plotOptions.pie.dataLabels.offset,o+(h-o)/2):"donut"===this.chartType&&(w=g.polarToCartesian(this.centerX,this.centerY,(i.globals.radialSize+this.donutSize)/2+i.config.plotOptions.pie.dataLabels.offset,o+(h-o)/2)),f.add(v);var k=0;if(!this.initialAnim||i.globals.resized||i.globals.dataChanged?this.animBeginArr.push(0):(0===(k=(h-o)/this.fullAngle*i.config.chart.animations.speed)&&(k=1),this.animDur=k+this.animDur,this.animBeginArr.push(this.animDur)),this.dynamicAnim&&i.globals.dataChanged?this.animatePaths(v,{size:this.sliceSizes[d],endAngle:h,startAngle:o,prevStartAngle:l,prevEndAngle:c,animateStartingPos:!0,i:d,animBeginArr:this.animBeginArr,shouldSetPrevPaths:!0,dur:i.config.chart.animations.dynamicAnimation.speed}):this.animatePaths(v,{size:this.sliceSizes[d],endAngle:h,startAngle:o,i:d,totalItems:t.length-1,animBeginArr:this.animBeginArr,dur:k}),i.config.plotOptions.pie.expandOnClick&&"polarArea"!==this.chartType&&v.click(this.pieClicked.bind(this,d)),i.config.dataLabels.enabled){var A=w.x,S=w.y,C=100*(h-o)/360+"%";if(0!==x&&i.config.plotOptions.pie.dataLabels.minAngleToShowLabel<t[d]){var P=i.config.dataLabels.formatter;void 0!==P&&(C=P(i.globals.seriesPercent[d][0],{seriesIndex:d,w:i}));var T=i.globals.dataLabels.style.colors[d],z=s.drawText({x:A,y:S,text:C,textAnchor:"middle",fontSize:i.config.dataLabels.style.fontSize,fontFamily:i.config.dataLabels.style.fontFamily,fontWeight:i.config.dataLabels.style.fontWeight,foreColor:T});if(i.config.dataLabels.dropShadow.enabled){var I=i.config.dataLabels.dropShadow;a.dropShadow(z,I)}z.node.classList.add("apexcharts-pie-label"),i.config.chart.animations.animate&&!1===i.globals.resized&&(z.node.classList.add("apexcharts-pie-label-delay"),z.node.style.animationDelay=i.config.chart.animations.speed/940+"s"),this.sliceLabels.push(z)}}}return n}},{key:"addListeners",value:function(t,e){var i=new p(this.ctx);t.node.addEventListener("mouseenter",i.pathMouseEnter.bind(this,t)),t.node.addEventListener("mouseleave",i.pathMouseLeave.bind(this,t)),t.node.addEventListener("mouseleave",this.revertDataLabelsInner.bind(this,t.node,e)),t.node.addEventListener("mousedown",i.pathMouseDown.bind(this,t)),this.donutDataLabels.total.showAlways||(t.node.addEventListener("mouseenter",this.printDataLabelsInner.bind(this,t.node,e)),t.node.addEventListener("mousedown",this.printDataLabelsInner.bind(this,t.node,e)))}},{key:"animatePaths",value:function(t,e){var i=this.w,a=e.endAngle-e.startAngle,s=a,r=e.startAngle,n=e.startAngle;void 0!==e.prevStartAngle&&void 0!==e.prevEndAngle&&(r=e.prevEndAngle,s=e.prevEndAngle-e.prevStartAngle),e.i===i.config.series.length-1&&(a+n>this.fullAngle?e.endAngle=e.endAngle-(a+n):a+n<this.fullAngle&&(e.endAngle=e.endAngle+(this.fullAngle-(a+n)))),a===this.fullAngle&&(a=this.fullAngle-.01),this.animateArc(t,r,n,a,s,e)}},{key:"animateArc",value:function(t,e,i,a,s,r){var n,o=this,l=this.w,h=new f(this.ctx),c=r.size;(isNaN(e)||isNaN(s))&&(e=i,s=a,r.dur=0);var d=a,g=i,u=e-i;l.globals.dataChanged&&r.shouldSetPrevPaths&&r.prevEndAngle&&(n=o.getPiePath({me:o,startAngle:r.prevStartAngle,angle:r.prevEndAngle-r.prevStartAngle,size:c}),t.attr({d:n})),0!==r.dur?t.animate(r.dur,l.globals.easing,r.animBeginArr[r.i]).afterAll((function(){"pie"!==o.chartType&&"donut"!==o.chartType&&"polarArea"!==o.chartType||this.animate(l.config.chart.animations.dynamicAnimation.speed).attr({"stroke-width":o.strokeWidth}),r.i===l.config.series.length-1&&h.animationCompleted(t)})).during((function(l){d=u+(a-u)*l,r.animateStartingPos&&(d=s+(a-s)*l,g=e-s+(i-(e-s))*l),n=o.getPiePath({me:o,startAngle:g,angle:d,size:c}),t.node.setAttribute("data:pathOrig",n),t.attr({d:n})})):(n=o.getPiePath({me:o,startAngle:g,angle:a,size:c}),r.isTrack||(l.globals.animationEnded=!0),t.node.setAttribute("data:pathOrig",n),t.attr({d:n,"stroke-width":o.strokeWidth}))}},{key:"pieClicked",value:function(t){var e,i=this.w,a=this.sliceSizes[t]+(i.config.plotOptions.pie.expandOnClick?4:0),s=i.globals.dom.Paper.select(".apexcharts-".concat(this.chartType.toLowerCase(),"-slice-").concat(t)).members[0];if("true"!==s.attr("data:pieClicked")){var r=i.globals.dom.baseEl.getElementsByClassName("apexcharts-pie-area");Array.prototype.forEach.call(r,(function(t){t.setAttribute("data:pieClicked","false");var e=t.getAttribute("data:pathOrig");t.setAttribute("d",e)})),s.attr("data:pieClicked","true");var n=parseInt(s.attr("data:startAngle"),10),o=parseInt(s.attr("data:angle"),10);e=this.getPiePath({me:this,startAngle:n,angle:o,size:a}),360!==o&&s.plot(e)}else{s.attr({"data:pieClicked":"false"}),this.revertDataLabelsInner(s.node,this.donutDataLabels);var l=s.attr("data:pathOrig");s.attr({d:l})}}},{key:"getChangedPath",value:function(t,e){var i="";return this.dynamicAnim&&this.w.globals.dataChanged&&(i=this.getPiePath({me:this,startAngle:t,angle:e-t,size:this.size})),i}},{key:"getPiePath",value:function(t){var e=t.me,i=t.startAngle,a=t.angle,s=t.size,r=i,n=Math.PI*(r-90)/180,o=a+i;Math.ceil(o)>=360&&(o=359.99);var l=Math.PI*(o-90)/180,h=e.centerX+s*Math.cos(n),c=e.centerY+s*Math.sin(n),d=e.centerX+s*Math.cos(l),u=e.centerY+s*Math.sin(l),f=g.polarToCartesian(e.centerX,e.centerY,e.donutSize,o),p=g.polarToCartesian(e.centerX,e.centerY,e.donutSize,r),x=a>180?1:0,b=["M",h,c,"A",s,s,0,x,1,d,u];return"donut"===e.chartType?[].concat(b,["L",f.x,f.y,"A",e.donutSize,e.donutSize,0,x,0,p.x,p.y,"L",h,c,"z"]).join(" "):"pie"===e.chartType||"polarArea"===e.chartType?[].concat(b,["L",e.centerX,e.centerY,"L",h,c]).join(" "):[].concat(b).join(" ")}},{key:"drawPolarElements",value:function(){var t=this.w,e=new j(this.ctx),i=new p(this.ctx),a=new ot(this.ctx),s=i.group(),r=i.group(),n=void 0===t.config.yaxis[0].max&&void 0===t.config.yaxis[0].min,o=e.niceScale(0,Math.ceil(this.maxY),t.config.yaxis[0].tickAmount,0,n),l=o.result.reverse(),h=o.result.length;this.maxY=o.niceMax;for(var c=t.globals.radialSize,d=c/(h-1),g=0;g<h-1;g++){var u=i.drawCircle(c);if(u.attr({cx:this.centerX,cy:this.centerY,fill:"none","stroke-width":t.config.plotOptions.polarArea.rings.strokeWidth,stroke:t.config.plotOptions.polarArea.rings.strokeColor}),t.config.yaxis[0].show){var f=a.drawYAxisTexts(this.centerX,this.centerY-c+parseInt(t.config.yaxis[0].labels.style.fontSize,10)/2,g,l[g]);r.add(f)}s.add(u),c-=d}this.ret.add(s),this.ret.add(r)}},{key:"renderInnerDataLabels",value:function(t,e){var i=this.w,a=new p(this.ctx),s=a.group({class:"apexcharts-datalabels-group",transform:"translate(".concat(e.translateX?e.translateX:0,", ").concat(e.translateY?e.translateY:0,") scale(").concat(i.config.plotOptions.pie.customScale,")")}),r=t.total.show;s.node.style.opacity=e.opacity;var n,o,l=e.centerX,h=e.centerY;n=void 0===t.name.color?i.globals.colors[0]:t.name.color;var c=t.name.fontSize,d=t.name.fontFamily,g=t.value.fontWeight;o=void 0===t.value.color?i.config.chart.foreColor:t.value.color;var u=t.value.formatter,f="",x="";if(r?(n=t.total.color,c=t.total.fontSize,d=t.total.fontFamily,g=t.total.fontWeight,x=t.total.label,f=t.total.formatter(i)):1===i.globals.series.length&&(f=u(i.globals.series[0],i),x=i.globals.seriesNames[0]),x&&(x=t.name.formatter(x,t.total.show,i)),t.name.show){var b=a.drawText({x:l,y:h+parseFloat(t.name.offsetY),text:x,textAnchor:"middle",foreColor:n,fontSize:c,fontWeight:g,fontFamily:d});b.node.classList.add("apexcharts-datalabel-label"),s.add(b)}if(t.value.show){var m=t.name.show?parseFloat(t.value.offsetY)+16:t.value.offsetY,v=a.drawText({x:l,y:h+m,text:f,textAnchor:"middle",foreColor:o,fontWeight:t.value.fontWeight,fontSize:t.value.fontSize,fontFamily:t.value.fontFamily});v.node.classList.add("apexcharts-datalabel-value"),s.add(v)}return s}},{key:"printInnerLabels",value:function(t,e,i,a){var s,r=this.w;a?s=void 0===t.name.color?r.globals.colors[parseInt(a.parentNode.getAttribute("rel"),10)-1]:t.name.color:r.globals.series.length>1&&t.total.show&&(s=t.total.color);var n=r.globals.dom.baseEl.querySelector(".apexcharts-datalabel-label"),o=r.globals.dom.baseEl.querySelector(".apexcharts-datalabel-value");i=(0,t.value.formatter)(i,r),a||"function"!=typeof t.total.formatter||(i=t.total.formatter(r));var l=e===t.total.label;e=t.name.formatter(e,l,r),null!==n&&(n.textContent=e),null!==o&&(o.textContent=i),null!==n&&(n.style.fill=s)}},{key:"printDataLabelsInner",value:function(t,e){var i=this.w,a=t.getAttribute("data:value"),s=i.globals.seriesNames[parseInt(t.parentNode.getAttribute("rel"),10)-1];i.globals.series.length>1&&this.printInnerLabels(e,s,a,t);var r=i.globals.dom.baseEl.querySelector(".apexcharts-datalabels-group");null!==r&&(r.style.opacity=1)}},{key:"revertDataLabelsInner",value:function(t,e,i){var a=this,s=this.w,r=s.globals.dom.baseEl.querySelector(".apexcharts-datalabels-group"),n=!1,o=s.globals.dom.baseEl.getElementsByClassName("apexcharts-pie-area"),l=function(t){var i=t.makeSliceOut,s=t.printLabel;Array.prototype.forEach.call(o,(function(t){"true"===t.getAttribute("data:pieClicked")&&(i&&(n=!0),s&&a.printDataLabelsInner(t,e))}))};if(l({makeSliceOut:!0,printLabel:!1}),e.total.show&&s.globals.series.length>1)n&&!e.total.showAlways?l({makeSliceOut:!1,printLabel:!0}):this.printInnerLabels(e,e.total.label,e.total.formatter(s));else if(l({makeSliceOut:!1,printLabel:!0}),!n)if(s.globals.selectedDataPoints.length&&s.globals.series.length>1)if(s.globals.selectedDataPoints[0].length>0){var h=s.globals.selectedDataPoints[0],c=s.globals.dom.baseEl.querySelector(".apexcharts-".concat(this.chartType.toLowerCase(),"-slice-").concat(h));this.printDataLabelsInner(c,e)}else r&&s.globals.selectedDataPoints.length&&0===s.globals.selectedDataPoints[0].length&&(r.style.opacity=0);else r&&s.globals.series.length>1&&(r.style.opacity=0)}}]),t}(),ht=function(){function t(i){e(this,t),this.w=i.w,this.lgCtx=i}return a(t,[{key:"getLegendStyles",value:function(){var t=document.createElement("style");t.setAttribute("type","text/css");var e=document.createTextNode("\t\n    \t\n      .apexcharts-legend {\t\n        display: flex;\t\n        overflow: auto;\t\n        padding: 0 10px;\t\n      }\t\n      .apexcharts-legend.position-bottom, .apexcharts-legend.position-top {\t\n        flex-wrap: wrap\t\n      }\t\n      .apexcharts-legend.position-right, .apexcharts-legend.position-left {\t\n        flex-direction: column;\t\n        bottom: 0;\t\n      }\t\n      .apexcharts-legend.position-bottom.apexcharts-align-left, .apexcharts-legend.position-top.apexcharts-align-left, .apexcharts-legend.position-right, .apexcharts-legend.position-left {\t\n        justify-content: flex-start;\t\n      }\t\n      .apexcharts-legend.position-bottom.apexcharts-align-center, .apexcharts-legend.position-top.apexcharts-align-center {\t\n        justify-content: center;  \t\n      }\t\n      .apexcharts-legend.position-bottom.apexcharts-align-right, .apexcharts-legend.position-top.apexcharts-align-right {\t\n        justify-content: flex-end;\t\n      }\t\n      .apexcharts-legend-series {\t\n        cursor: pointer;\t\n        line-height: normal;\t\n      }\t\n      .apexcharts-legend.position-bottom .apexcharts-legend-series, .apexcharts-legend.position-top .apexcharts-legend-series{\t\n        display: flex;\t\n        align-items: center;\t\n      }\t\n      .apexcharts-legend-text {\t\n        position: relative;\t\n        font-size: 14px;\t\n      }\t\n      .apexcharts-legend-text *, .apexcharts-legend-marker * {\t\n        pointer-events: none;\t\n      }\t\n      .apexcharts-legend-marker {\t\n        position: relative;\t\n        display: inline-block;\t\n        cursor: pointer;\t\n        margin-right: 3px;\t\n        border-style: solid;\n      }\t\n      \t\n      .apexcharts-legend.apexcharts-align-right .apexcharts-legend-series, .apexcharts-legend.apexcharts-align-left .apexcharts-legend-series{\t\n        display: inline-block;\t\n      }\t\n      .apexcharts-legend-series.apexcharts-no-click {\t\n        cursor: auto;\t\n      }\t\n      .apexcharts-legend .apexcharts-hidden-zero-series, .apexcharts-legend .apexcharts-hidden-null-series {\t\n        display: none !important;\t\n      }\t\n      .apexcharts-inactive-legend {\t\n        opacity: 0.45;\t\n      }");return t.appendChild(e),t}},{key:"getLegendBBox",value:function(){var t=this.w.globals.dom.baseEl.querySelector(".apexcharts-legend").getBoundingClientRect(),e=t.width;return{clwh:t.height,clww:e}}},{key:"appendToForeignObject",value:function(){var t=this.w.globals;t.dom.elLegendForeign=document.createElementNS(t.SVGNS,"foreignObject");var e=t.dom.elLegendForeign;e.setAttribute("x",0),e.setAttribute("y",0),e.setAttribute("width",t.svgWidth),e.setAttribute("height",t.svgHeight),t.dom.elLegendWrap.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),e.appendChild(t.dom.elLegendWrap),e.appendChild(this.getLegendStyles()),t.dom.Paper.node.insertBefore(e,t.dom.elGraphical.node)}},{key:"toggleDataSeries",value:function(t,e){var i=this,a=this.w;if(a.globals.axisCharts||"radialBar"===a.config.chart.type){a.globals.resized=!0;var s=null,r=null;if(a.globals.risingSeries=[],a.globals.axisCharts?(s=a.globals.dom.baseEl.querySelector(".apexcharts-series[data\\:realIndex='".concat(t,"']")),r=parseInt(s.getAttribute("data:realIndex"),10)):(s=a.globals.dom.baseEl.querySelector(".apexcharts-series[rel='".concat(t+1,"']")),r=parseInt(s.getAttribute("rel"),10)-1),e)[{cs:a.globals.collapsedSeries,csi:a.globals.collapsedSeriesIndices},{cs:a.globals.ancillaryCollapsedSeries,csi:a.globals.ancillaryCollapsedSeriesIndices}].forEach((function(t){i.riseCollapsedSeries(t.cs,t.csi,r)}));else this.hideSeries({seriesEl:s,realIndex:r})}else{var n=a.globals.dom.Paper.select(" .apexcharts-series[rel='".concat(t+1,"'] path")),o=a.config.chart.type;if("pie"===o||"polarArea"===o||"donut"===o){var l=a.config.plotOptions.pie.donut.labels,h=new p(this.lgCtx.ctx),c=new lt(this.lgCtx.ctx);h.pathMouseDown(n.members[0],null),c.printDataLabelsInner(n.members[0].node,l)}n.fire("click")}}},{key:"hideSeries",value:function(t){var e=t.seriesEl,i=t.realIndex,a=this.w;if(a.globals.axisCharts){var s=!1;if(a.config.yaxis[i]&&a.config.yaxis[i].show&&a.config.yaxis[i].showAlways&&(s=!0,a.globals.ancillaryCollapsedSeriesIndices.indexOf(i)<0&&(a.globals.ancillaryCollapsedSeries.push({index:i,data:a.config.series[i].data.slice(),type:e.parentNode.className.baseVal.split("-")[1]}),a.globals.ancillaryCollapsedSeriesIndices.push(i))),!s){a.globals.collapsedSeries.push({index:i,data:a.config.series[i].data.slice(),type:e.parentNode.className.baseVal.split("-")[1]}),a.globals.collapsedSeriesIndices.push(i);var r=a.globals.risingSeries.indexOf(i);a.globals.risingSeries.splice(r,1)}a.config.series[i].data=[]}else a.globals.collapsedSeries.push({index:i,data:a.config.series[i]}),a.globals.collapsedSeriesIndices.push(i),a.config.series[i]=0;for(var n=e.childNodes,o=0;o<n.length;o++)n[o].classList.contains("apexcharts-series-markers-wrap")&&(n[o].classList.contains("apexcharts-hide")?n[o].classList.remove("apexcharts-hide"):n[o].classList.add("apexcharts-hide"));a.globals.allSeriesCollapsed=a.globals.collapsedSeries.length===a.config.series.length,this.lgCtx.ctx.updateHelpers._updateSeries(a.config.series,a.config.chart.animations.dynamicAnimation.enabled)}},{key:"riseCollapsedSeries",value:function(t,e,i){var a=this.w;if(t.length>0)for(var s=0;s<t.length;s++)t[s].index===i&&(a.globals.axisCharts?(a.config.series[i].data=t[s].data.slice(),t.splice(s,1),e.splice(s,1),a.globals.risingSeries.push(i)):(a.config.series[i]=t[s].data,t.splice(s,1),e.splice(s,1),a.globals.risingSeries.push(i)),this.lgCtx.ctx.updateHelpers._updateSeries(a.config.series,a.config.chart.animations.dynamicAnimation.enabled))}}]),t}(),ct=function(){function t(i,a){e(this,t),this.ctx=i,this.w=i.w,this.onLegendClick=this.onLegendClick.bind(this),this.onLegendHovered=this.onLegendHovered.bind(this),this.isBarsDistributed="bar"===this.w.config.chart.type&&this.w.config.plotOptions.bar.distributed&&1===this.w.config.series.length,this.legendHelpers=new ht(this)}return a(t,[{key:"init",value:function(){var t=this.w,e=t.globals,i=t.config;if((i.legend.showForSingleSeries&&1===e.series.length||this.isBarsDistributed||e.series.length>1||!e.axisCharts)&&i.legend.show){for(;e.dom.elLegendWrap.firstChild;)e.dom.elLegendWrap.removeChild(e.dom.elLegendWrap.firstChild);this.drawLegends(),g.isIE11()?document.getElementsByTagName("head")[0].appendChild(this.legendHelpers.getLegendStyles()):this.legendHelpers.appendToForeignObject(),"bottom"===i.legend.position||"top"===i.legend.position?this.legendAlignHorizontal():"right"!==i.legend.position&&"left"!==i.legend.position||this.legendAlignVertical()}}},{key:"drawLegends",value:function(){var t=this.w,e=t.config.legend.fontFamily,i=t.globals.seriesNames,a=t.globals.colors.slice();if("heatmap"===t.config.chart.type){var s=t.config.plotOptions.heatmap.colorScale.ranges;i=s.map((function(t){return t.name?t.name:t.from+" - "+t.to})),a=s.map((function(t){return t.color}))}else this.isBarsDistributed&&(i=t.globals.labels.slice());for(var r=t.globals.legendFormatter,n=t.config.legend.inverseOrder,o=n?i.length-1:0;n?o>=0:o<=i.length-1;n?o--:o++){var l=r(i[o],{seriesIndex:o,w:t}),h=!1,c=!1;if(t.globals.collapsedSeries.length>0)for(var d=0;d<t.globals.collapsedSeries.length;d++)t.globals.collapsedSeries[d].index===o&&(h=!0);if(t.globals.ancillaryCollapsedSeriesIndices.length>0)for(var g=0;g<t.globals.ancillaryCollapsedSeriesIndices.length;g++)t.globals.ancillaryCollapsedSeriesIndices[g]===o&&(c=!0);var u=document.createElement("span");u.classList.add("apexcharts-legend-marker");var f=t.config.legend.markers.offsetX,x=t.config.legend.markers.offsetY,b=t.config.legend.markers.height,v=t.config.legend.markers.width,y=t.config.legend.markers.strokeWidth,w=t.config.legend.markers.strokeColor,k=t.config.legend.markers.radius,A=u.style;A.background=a[o],A.color=a[o],t.config.legend.markers.fillColors&&t.config.legend.markers.fillColors[o]&&(A.background=t.config.legend.markers.fillColors[o]),A.height=Array.isArray(b)?parseFloat(b[o])+"px":parseFloat(b)+"px",A.width=Array.isArray(v)?parseFloat(v[o])+"px":parseFloat(v)+"px",A.left=Array.isArray(f)?f[o]:f,A.top=Array.isArray(x)?x[o]:x,A.borderWidth=Array.isArray(y)?y[o]:y,A.borderColor=Array.isArray(w)?w[o]:w,A.borderRadius=Array.isArray(k)?parseFloat(k[o])+"px":parseFloat(k)+"px",t.config.legend.markers.customHTML&&(Array.isArray(t.config.legend.markers.customHTML)?u.innerHTML=t.config.legend.markers.customHTML[o]():u.innerHTML=t.config.legend.markers.customHTML()),p.setAttrs(u,{rel:o+1,"data:collapsed":h||c}),(h||c)&&u.classList.add("apexcharts-inactive-legend");var S=document.createElement("div"),C=document.createElement("span");C.classList.add("apexcharts-legend-text"),C.innerHTML=Array.isArray(l)?l.join(" "):l;var L=t.config.legend.labels.useSeriesColors?t.globals.colors[o]:t.config.legend.labels.colors;L||(L=t.config.chart.foreColor),C.style.color=L,C.style.fontSize=parseFloat(t.config.legend.fontSize)+"px",C.style.fontWeight=t.config.legend.fontWeight,C.style.fontFamily=e||t.config.chart.fontFamily,p.setAttrs(C,{rel:o+1,i:o,"data:default-text":encodeURIComponent(l),"data:collapsed":h||c}),S.appendChild(u),S.appendChild(C);var P=new m(this.ctx);if(!t.config.legend.showForZeroSeries)0===P.getSeriesTotalByIndex(o)&&P.seriesHaveSameValues(o)&&!P.isSeriesNull(o)&&-1===t.globals.collapsedSeriesIndices.indexOf(o)&&-1===t.globals.ancillaryCollapsedSeriesIndices.indexOf(o)&&S.classList.add("apexcharts-hidden-zero-series");t.config.legend.showForNullSeries||P.isSeriesNull(o)&&-1===t.globals.collapsedSeriesIndices.indexOf(o)&&-1===t.globals.ancillaryCollapsedSeriesIndices.indexOf(o)&&S.classList.add("apexcharts-hidden-null-series"),t.globals.dom.elLegendWrap.appendChild(S),t.globals.dom.elLegendWrap.classList.add("apexcharts-align-".concat(t.config.legend.horizontalAlign)),t.globals.dom.elLegendWrap.classList.add("position-"+t.config.legend.position),S.classList.add("apexcharts-legend-series"),S.style.margin="".concat(t.config.legend.itemMargin.vertical,"px ").concat(t.config.legend.itemMargin.horizontal,"px"),t.globals.dom.elLegendWrap.style.width=t.config.legend.width?t.config.legend.width+"px":"",t.globals.dom.elLegendWrap.style.height=t.config.legend.height?t.config.legend.height+"px":"",p.setAttrs(S,{rel:o+1,"data:collapsed":h||c}),(h||c)&&S.classList.add("apexcharts-inactive-legend"),t.config.legend.onItemClick.toggleDataSeries||S.classList.add("apexcharts-no-click")}"heatmap"!==t.config.chart.type&&!this.isBarsDistributed&&t.config.legend.onItemClick.toggleDataSeries&&t.globals.dom.elWrap.addEventListener("click",this.onLegendClick,!0),t.config.legend.onItemHover.highlightDataSeries&&(t.globals.dom.elWrap.addEventListener("mousemove",this.onLegendHovered,!0),t.globals.dom.elWrap.addEventListener("mouseout",this.onLegendHovered,!0))}},{key:"setLegendWrapXY",value:function(t,e){var i=this.w,a=i.globals.dom.baseEl.querySelector(".apexcharts-legend"),s=a.getBoundingClientRect(),r=0,n=0;if("bottom"===i.config.legend.position)n+=i.globals.svgHeight-s.height/2;else if("top"===i.config.legend.position){var o=new nt(this.ctx),l=o.dimHelpers.getTitleSubtitleCoords("title").height,h=o.dimHelpers.getTitleSubtitleCoords("subtitle").height;n=n+(l>0?l-10:0)+(h>0?h-10:0)}a.style.position="absolute",r=r+t+i.config.legend.offsetX,n=n+e+i.config.legend.offsetY,a.style.left=r+"px",a.style.top=n+"px","bottom"===i.config.legend.position?(a.style.top="auto",a.style.bottom=5-i.config.legend.offsetY+"px"):"right"===i.config.legend.position&&(a.style.left="auto",a.style.right=25+i.config.legend.offsetX+"px");["width","height"].forEach((function(t){a.style[t]&&(a.style[t]=parseInt(i.config.legend[t],10)+"px")}))}},{key:"legendAlignHorizontal",value:function(){var t=this.w;t.globals.dom.baseEl.querySelector(".apexcharts-legend").style.right=0;var e=this.legendHelpers.getLegendBBox(),i=new nt(this.ctx),a=i.dimHelpers.getTitleSubtitleCoords("title"),s=i.dimHelpers.getTitleSubtitleCoords("subtitle"),r=0;"bottom"===t.config.legend.position?r=-e.clwh/1.8:"top"===t.config.legend.position&&(r=a.height+s.height+t.config.title.margin+t.config.subtitle.margin-10),this.setLegendWrapXY(20,r)}},{key:"legendAlignVertical",value:function(){var t=this.w,e=this.legendHelpers.getLegendBBox(),i=0;"left"===t.config.legend.position&&(i=20),"right"===t.config.legend.position&&(i=t.globals.svgWidth-e.clww-10),this.setLegendWrapXY(i,20)}},{key:"onLegendHovered",value:function(t){var e=this.w,i=t.target.classList.contains("apexcharts-legend-text")||t.target.classList.contains("apexcharts-legend-marker");if("heatmap"===e.config.chart.type||this.isBarsDistributed){if(i){var a=parseInt(t.target.getAttribute("rel"),10)-1;this.ctx.events.fireEvent("legendHover",[this.ctx,a,this.w]),new M(this.ctx).highlightRangeInSeries(t,t.target)}}else!t.target.classList.contains("apexcharts-inactive-legend")&&i&&new M(this.ctx).toggleSeriesOnHover(t,t.target)}},{key:"onLegendClick",value:function(t){if(t.target.classList.contains("apexcharts-legend-text")||t.target.classList.contains("apexcharts-legend-marker")){var e=parseInt(t.target.getAttribute("rel"),10)-1,i="true"===t.target.getAttribute("data:collapsed"),a=this.w.config.chart.events.legendClick;"function"==typeof a&&a(this.ctx,e,this.w),this.ctx.events.fireEvent("legendClick",[this.ctx,e,this.w]);var s=this.w.config.legend.markers.onClick;"function"==typeof s&&t.target.classList.contains("apexcharts-legend-marker")&&(s(this.ctx,e,this.w),this.ctx.events.fireEvent("legendMarkerClick",[this.ctx,e,this.w])),this.legendHelpers.toggleDataSeries(e,i)}}}]),t}(),dt=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.ev=this.w.config.chart.events,this.selectedClass="apexcharts-selected",this.localeValues=this.w.globals.locale.toolbar}return a(t,[{key:"createToolbar",value:function(){var t=this,e=this.w,i=function(){return document.createElement("div")},a=i();if(a.setAttribute("class","apexcharts-toolbar"),a.style.top=e.config.chart.toolbar.offsetY+"px",a.style.right=3-e.config.chart.toolbar.offsetX+"px",e.globals.dom.elWrap.appendChild(a),this.elZoom=i(),this.elZoomIn=i(),this.elZoomOut=i(),this.elPan=i(),this.elSelection=i(),this.elZoomReset=i(),this.elMenuIcon=i(),this.elMenu=i(),this.elCustomIcons=[],this.t=e.config.chart.toolbar.tools,Array.isArray(this.t.customIcons))for(var s=0;s<this.t.customIcons.length;s++)this.elCustomIcons.push(i());var r=[],n=function(i,a,s){var n=i.toLowerCase();t.t[n]&&e.config.chart.zoom.enabled&&r.push({el:a,icon:"string"==typeof t.t[n]?t.t[n]:s,title:t.localeValues[i],class:"apexcharts-".concat(n,"-icon")})};n("zoomIn",this.elZoomIn,'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">\n    <path d="M0 0h24v24H0z" fill="none"/>\n    <path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>\n</svg>\n'),n("zoomOut",this.elZoomOut,'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">\n    <path d="M0 0h24v24H0z" fill="none"/>\n    <path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>\n</svg>\n');var o=function(i){t.t[i]&&e.config.chart[i].enabled&&r.push({el:"zoom"===i?t.elZoom:t.elSelection,icon:"string"==typeof t.t[i]?t.t[i]:"zoom"===i?'<svg xmlns="http://www.w3.org/2000/svg" fill="#000000" height="24" viewBox="0 0 24 24" width="24">\n    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>\n    <path d="M0 0h24v24H0V0z" fill="none"/>\n    <path d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"/>\n</svg>':'<svg fill="#6E8192" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n    <path d="M0 0h24v24H0z" fill="none"/>\n    <path d="M3 5h2V3c-1.1 0-2 .9-2 2zm0 8h2v-2H3v2zm4 8h2v-2H7v2zM3 9h2V7H3v2zm10-6h-2v2h2V3zm6 0v2h2c0-1.1-.9-2-2-2zM5 21v-2H3c0 1.1.9 2 2 2zm-2-4h2v-2H3v2zM9 3H7v2h2V3zm2 18h2v-2h-2v2zm8-8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2zm0-12h2V7h-2v2zm0 8h2v-2h-2v2zm-4 4h2v-2h-2v2zm0-16h2V3h-2v2z"/>\n</svg>',title:t.localeValues["zoom"===i?"selectionZoom":"selection"],class:e.globals.isTouchDevice?"apexcharts-element-hidden":"apexcharts-".concat(i,"-icon")})};o("zoom"),o("selection"),this.t.pan&&e.config.chart.zoom.enabled&&r.push({el:this.elPan,icon:"string"==typeof this.t.pan?this.t.pan:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" height="24" viewBox="0 0 24 24" width="24">\n    <defs>\n        <path d="M0 0h24v24H0z" id="a"/>\n    </defs>\n    <clipPath id="b">\n        <use overflow="visible" xlink:href="#a"/>\n    </clipPath>\n    <path clip-path="url(#b)" d="M23 5.5V20c0 2.2-1.8 4-4 4h-7.3c-1.08 0-2.1-.43-2.85-1.19L1 14.83s1.26-1.23 1.3-1.25c.22-.19.49-.29.79-.29.22 0 .42.06.6.16.04.01 4.31 2.46 4.31 2.46V4c0-.83.67-1.5 1.5-1.5S11 3.17 11 4v7h1V1.5c0-.83.67-1.5 1.5-1.5S15 .67 15 1.5V11h1V2.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5V11h1V5.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5z"/>\n</svg>',title:this.localeValues.pan,class:e.globals.isTouchDevice?"apexcharts-element-hidden":"apexcharts-pan-icon"}),n("reset",this.elZoomReset,'<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">\n    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>\n    <path d="M0 0h24v24H0z" fill="none"/>\n</svg>'),this.t.download&&r.push({el:this.elMenuIcon,icon:"string"==typeof this.t.download?this.t.download:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>',title:this.localeValues.menu,class:"apexcharts-menu-icon"});for(var l=0;l<this.elCustomIcons.length;l++)r.push({el:this.elCustomIcons[l],icon:this.t.customIcons[l].icon,title:this.t.customIcons[l].title,index:this.t.customIcons[l].index,class:"apexcharts-toolbar-custom-icon "+this.t.customIcons[l].class});r.forEach((function(t,e){t.index&&g.moveIndexInArray(r,e,t.index)}));for(var h=0;h<r.length;h++)p.setAttrs(r[h].el,{class:r[h].class,title:r[h].title}),r[h].el.innerHTML=r[h].icon,a.appendChild(r[h].el);this._createHamburgerMenu(a),e.globals.zoomEnabled?this.elZoom.classList.add(this.selectedClass):e.globals.panEnabled?this.elPan.classList.add(this.selectedClass):e.globals.selectionEnabled&&this.elSelection.classList.add(this.selectedClass),this.addToolbarEventListeners()}},{key:"_createHamburgerMenu",value:function(t){this.elMenuItems=[],t.appendChild(this.elMenu),p.setAttrs(this.elMenu,{class:"apexcharts-menu"});var e=[{name:"exportSVG",title:this.localeValues.exportToSVG},{name:"exportPNG",title:this.localeValues.exportToPNG},{name:"exportCSV",title:this.localeValues.exportToCSV}];this.w.globals.allSeriesHasEqualX||e.splice(2,1);for(var i=0;i<e.length;i++)this.elMenuItems.push(document.createElement("div")),this.elMenuItems[i].innerHTML=e[i].title,p.setAttrs(this.elMenuItems[i],{class:"apexcharts-menu-item ".concat(e[i].name),title:e[i].title}),this.elMenu.appendChild(this.elMenuItems[i])}},{key:"addToolbarEventListeners",value:function(){var t=this;this.elZoomReset.addEventListener("click",this.handleZoomReset.bind(this)),this.elSelection.addEventListener("click",this.toggleZoomSelection.bind(this,"selection")),this.elZoom.addEventListener("click",this.toggleZoomSelection.bind(this,"zoom")),this.elZoomIn.addEventListener("click",this.handleZoomIn.bind(this)),this.elZoomOut.addEventListener("click",this.handleZoomOut.bind(this)),this.elPan.addEventListener("click",this.togglePanning.bind(this)),this.elMenuIcon.addEventListener("click",this.toggleMenu.bind(this)),this.elMenuItems.forEach((function(e){e.classList.contains("exportSVG")?e.addEventListener("click",t.handleDownload.bind(t,"svg")):e.classList.contains("exportPNG")?e.addEventListener("click",t.handleDownload.bind(t,"png")):e.classList.contains("exportCSV")&&e.addEventListener("click",t.handleDownload.bind(t,"csv"))}));for(var e=0;e<this.t.customIcons.length;e++)this.elCustomIcons[e].addEventListener("click",this.t.customIcons[e].click.bind(this,this.ctx,this.ctx.w))}},{key:"toggleZoomSelection",value:function(t){this.toggleOtherControls();var e="selection"===t?this.elSelection:this.elZoom,i="selection"===t?"selectionEnabled":"zoomEnabled";this.w.globals[i]=!this.w.globals[i],e.classList.contains(this.selectedClass)?e.classList.remove(this.selectedClass):e.classList.add(this.selectedClass)}},{key:"getToolbarIconsReference",value:function(){var t=this.w;this.elZoom||(this.elZoom=t.globals.dom.baseEl.querySelector(".apexcharts-zoom-icon")),this.elPan||(this.elPan=t.globals.dom.baseEl.querySelector(".apexcharts-pan-icon")),this.elSelection||(this.elSelection=t.globals.dom.baseEl.querySelector(".apexcharts-selection-icon"))}},{key:"enableZoomPanFromToolbar",value:function(t){this.toggleOtherControls(),"pan"===t?this.w.globals.panEnabled=!0:this.w.globals.zoomEnabled=!0;var e="pan"===t?this.elPan:this.elZoom,i="pan"===t?this.elZoom:this.elPan;e&&e.classList.add(this.selectedClass),i&&i.classList.remove(this.selectedClass)}},{key:"togglePanning",value:function(){this.toggleOtherControls(),this.w.globals.panEnabled=!this.w.globals.panEnabled,this.elPan.classList.contains(this.selectedClass)?this.elPan.classList.remove(this.selectedClass):this.elPan.classList.add(this.selectedClass)}},{key:"toggleOtherControls",value:function(){var t=this,e=this.w;e.globals.panEnabled=!1,e.globals.zoomEnabled=!1,e.globals.selectionEnabled=!1,this.getToolbarIconsReference(),[this.elPan,this.elSelection,this.elZoom].forEach((function(e){e&&e.classList.remove(t.selectedClass)}))}},{key:"handleZoomIn",value:function(){var t=this.w,e=(t.globals.minX+t.globals.maxX)/2,i=(t.globals.minX+e)/2,a=(t.globals.maxX+e)/2,s=this._getNewMinXMaxX(i,a);t.globals.disableZoomIn||this.zoomUpdateOptions(s.minX,s.maxX)}},{key:"handleZoomOut",value:function(){var t=this.w;if(!("datetime"===t.config.xaxis.type&&new Date(t.globals.minX).getUTCFullYear()<1e3)){var e=(t.globals.minX+t.globals.maxX)/2,i=t.globals.minX-(e-t.globals.minX),a=t.globals.maxX-(e-t.globals.maxX),s=this._getNewMinXMaxX(i,a);t.globals.disableZoomOut||this.zoomUpdateOptions(s.minX,s.maxX)}}},{key:"_getNewMinXMaxX",value:function(t,e){var i=this.w.config.xaxis.convertedCatToNumeric;return{minX:i?Math.floor(t):t,maxX:i?Math.floor(e):e}}},{key:"zoomUpdateOptions",value:function(t,e){var i=this.w;if(void 0!==t||void 0!==e){if(!(i.config.xaxis.convertedCatToNumeric&&(t<1&&(t=1,e=i.globals.dataPoints),e-t<2))){var a={min:t,max:e},s=this.getBeforeZoomRange(a);s&&(a=s.xaxis);var r={xaxis:a},n=g.clone(i.globals.initialConfig.yaxis);if(i.config.chart.zoom.autoScaleYaxis)n=new j(this.ctx).autoScaleY(this.ctx,n,{xaxis:a});i.config.chart.group||(r.yaxis=n),this.w.globals.zoomed=!0,this.ctx.updateHelpers._updateOptions(r,!1,this.w.config.chart.animations.dynamicAnimation.enabled),this.zoomCallback(a,n)}}else this.handleZoomReset()}},{key:"zoomCallback",value:function(t,e){"function"==typeof this.ev.zoomed&&this.ev.zoomed(this.ctx,{xaxis:t,yaxis:e})}},{key:"getBeforeZoomRange",value:function(t,e){var i=null;return"function"==typeof this.ev.beforeZoom&&(i=this.ev.beforeZoom(this,{xaxis:t,yaxis:e})),i}},{key:"toggleMenu",value:function(){var t=this;window.setTimeout((function(){t.elMenu.classList.contains("apexcharts-menu-open")?t.elMenu.classList.remove("apexcharts-menu-open"):t.elMenu.classList.add("apexcharts-menu-open")}),0)}},{key:"handleDownload",value:function(t){var e=this.w,i=new V(this.ctx);switch(t){case"svg":i.exportToSVG(this.ctx);break;case"png":i.exportToPng(this.ctx);break;case"csv":i.exportToCSV({series:e.config.series})}}},{key:"handleZoomReset",value:function(t){var e=this;this.ctx.getSyncedCharts().forEach((function(t){var i=t.w;i.globals.lastXAxis.min=void 0,i.globals.lastXAxis.max=void 0,t.updateHelpers.revertDefaultAxisMinMax(),"function"==typeof i.config.chart.events.zoomed&&e.zoomCallback({min:i.config.xaxis.min,max:i.config.xaxis.max}),i.globals.zoomed=!1,t.updateHelpers._updateSeries(i.globals.initialSeries,i.config.chart.animations.dynamicAnimation.enabled)}))}},{key:"destroy",value:function(){this.elZoom=null,this.elZoomIn=null,this.elZoomOut=null,this.elPan=null,this.elSelection=null,this.elZoomReset=null,this.elMenuIcon=null}}]),t}(),gt=function(t){function i(t){var a;return e(this,i),(a=c(this,l(i).call(this,t))).ctx=t,a.w=t.w,a.dragged=!1,a.graphics=new p(a.ctx),a.eventList=["mousedown","mouseleave","mousemove","touchstart","touchmove","mouseup","touchend"],a.clientX=0,a.clientY=0,a.startX=0,a.endX=0,a.dragX=0,a.startY=0,a.endY=0,a.dragY=0,a.moveDirection="none",a}return o(i,t),a(i,[{key:"init",value:function(t){var e=this,i=t.xyRatios,a=this.w,s=this;this.xyRatios=i,this.zoomRect=this.graphics.drawRect(0,0,0,0),this.selectionRect=this.graphics.drawRect(0,0,0,0),this.gridRect=a.globals.dom.baseEl.querySelector(".apexcharts-grid"),this.zoomRect.node.classList.add("apexcharts-zoom-rect"),this.selectionRect.node.classList.add("apexcharts-selection-rect"),a.globals.dom.elGraphical.add(this.zoomRect),a.globals.dom.elGraphical.add(this.selectionRect),"x"===a.config.chart.selection.type?this.slDraggableRect=this.selectionRect.draggable({minX:0,minY:0,maxX:a.globals.gridWidth,maxY:a.globals.gridHeight}).on("dragmove",this.selectionDragging.bind(this,"dragging")):"y"===a.config.chart.selection.type?this.slDraggableRect=this.selectionRect.draggable({minX:0,maxX:a.globals.gridWidth}).on("dragmove",this.selectionDragging.bind(this,"dragging")):this.slDraggableRect=this.selectionRect.draggable().on("dragmove",this.selectionDragging.bind(this,"dragging")),this.preselectedSelection(),this.hoverArea=a.globals.dom.baseEl.querySelector(a.globals.chartClass),this.hoverArea.classList.add("apexcharts-zoomable"),this.eventList.forEach((function(t){e.hoverArea.addEventListener(t,s.svgMouseEvents.bind(s,i),{capture:!1,passive:!0})}))}},{key:"destroy",value:function(){this.slDraggableRect&&(this.slDraggableRect.draggable(!1),this.slDraggableRect.off(),this.selectionRect.off()),this.selectionRect=null,this.zoomRect=null,this.gridRect=null}},{key:"svgMouseEvents",value:function(t,e){var i=this.w,a=this,s=this.ctx.toolbar,r=i.globals.zoomEnabled?i.config.chart.zoom.type:i.config.chart.selection.type;if(e.shiftKey?(this.shiftWasPressed=!0,s.enableZoomPanFromToolbar("pan")):this.shiftWasPressed&&(s.enableZoomPanFromToolbar("zoom"),this.shiftWasPressed=!1),!(e.target.classList.contains("apexcharts-selection-rect")||e.target.parentNode.classList.contains("apexcharts-toolbar"))){if(a.clientX="touchmove"===e.type||"touchstart"===e.type?e.touches[0].clientX:"touchend"===e.type?e.changedTouches[0].clientX:e.clientX,a.clientY="touchmove"===e.type||"touchstart"===e.type?e.touches[0].clientY:"touchend"===e.type?e.changedTouches[0].clientY:e.clientY,"mousedown"===e.type&&1===e.which){var n=a.gridRect.getBoundingClientRect();a.startX=a.clientX-n.left,a.startY=a.clientY-n.top,a.dragged=!1,a.w.globals.mousedown=!0}if(("mousemove"===e.type&&1===e.which||"touchmove"===e.type)&&(a.dragged=!0,i.globals.panEnabled?(i.globals.selection=null,a.w.globals.mousedown&&a.panDragging({context:a,zoomtype:r,xyRatios:t})):(a.w.globals.mousedown&&i.globals.zoomEnabled||a.w.globals.mousedown&&i.globals.selectionEnabled)&&(a.selection=a.selectionDrawing({context:a,zoomtype:r}))),"mouseup"===e.type||"touchend"===e.type||"mouseleave"===e.type){var o=a.gridRect.getBoundingClientRect();a.w.globals.mousedown&&(a.endX=a.clientX-o.left,a.endY=a.clientY-o.top,a.dragX=Math.abs(a.endX-a.startX),a.dragY=Math.abs(a.endY-a.startY),(i.globals.zoomEnabled||i.globals.selectionEnabled)&&a.selectionDrawn({context:a,zoomtype:r}),i.globals.panEnabled&&i.config.xaxis.convertedCatToNumeric&&a.delayedPanScrolled()),i.globals.zoomEnabled&&a.hideSelectionRect(this.selectionRect),a.dragged=!1,a.w.globals.mousedown=!1}this.makeSelectionRectDraggable()}}},{key:"makeSelectionRectDraggable",value:function(){var t=this.w;if(this.selectionRect){var e=this.selectionRect.node.getBoundingClientRect();e.width>0&&e.height>0&&this.slDraggableRect.selectize({points:"l, r",pointSize:8,pointType:"rect"}).resize({constraint:{minX:0,minY:0,maxX:t.globals.gridWidth,maxY:t.globals.gridHeight}}).on("resizing",this.selectionDragging.bind(this,"resizing"))}}},{key:"preselectedSelection",value:function(){var t=this.w,e=this.xyRatios;if(!t.globals.zoomEnabled)if(void 0!==t.globals.selection&&null!==t.globals.selection)this.drawSelectionRect(t.globals.selection);else if(void 0!==t.config.chart.selection.xaxis.min&&void 0!==t.config.chart.selection.xaxis.max){var i=(t.config.chart.selection.xaxis.min-t.globals.minX)/e.xRatio,a={x:i,y:0,width:t.globals.gridWidth-(t.globals.maxX-t.config.chart.selection.xaxis.max)/e.xRatio-i,height:t.globals.gridHeight,translateX:0,translateY:0,selectionEnabled:!0};this.drawSelectionRect(a),this.makeSelectionRectDraggable(),"function"==typeof t.config.chart.events.selection&&t.config.chart.events.selection(this.ctx,{xaxis:{min:t.config.chart.selection.xaxis.min,max:t.config.chart.selection.xaxis.max},yaxis:{}})}}},{key:"drawSelectionRect",value:function(t){var e=t.x,i=t.y,a=t.width,s=t.height,r=t.translateX,n=void 0===r?0:r,o=t.translateY,l=void 0===o?0:o,h=this.w,c=this.zoomRect,d=this.selectionRect;if(this.dragged||null!==h.globals.selection){var g={transform:"translate("+n+", "+l+")"};h.globals.zoomEnabled&&this.dragged&&(a<0&&(a=1),c.attr({x:e,y:i,width:a,height:s,fill:h.config.chart.zoom.zoomedArea.fill.color,"fill-opacity":h.config.chart.zoom.zoomedArea.fill.opacity,stroke:h.config.chart.zoom.zoomedArea.stroke.color,"stroke-width":h.config.chart.zoom.zoomedArea.stroke.width,"stroke-opacity":h.config.chart.zoom.zoomedArea.stroke.opacity}),p.setAttrs(c.node,g)),h.globals.selectionEnabled&&(d.attr({x:e,y:i,width:a>0?a:0,height:s>0?s:0,fill:h.config.chart.selection.fill.color,"fill-opacity":h.config.chart.selection.fill.opacity,stroke:h.config.chart.selection.stroke.color,"stroke-width":h.config.chart.selection.stroke.width,"stroke-dasharray":h.config.chart.selection.stroke.dashArray,"stroke-opacity":h.config.chart.selection.stroke.opacity}),p.setAttrs(d.node,g))}}},{key:"hideSelectionRect",value:function(t){t&&t.attr({x:0,y:0,width:0,height:0})}},{key:"selectionDrawing",value:function(t){var e=t.context,i=t.zoomtype,a=this.w,s=e,r=this.gridRect.getBoundingClientRect(),n=s.startX-1,o=s.startY,l=s.clientX-r.left-n,h=s.clientY-r.top-o,c=0,d=0,g={};return Math.abs(l+n)>a.globals.gridWidth?l=a.globals.gridWidth-n:s.clientX-r.left<0&&(l=n),n>s.clientX-r.left&&(c=-(l=Math.abs(l))),o>s.clientY-r.top&&(d=-(h=Math.abs(h))),g="x"===i?{x:n,y:0,width:l,height:a.globals.gridHeight,translateX:c,translateY:0}:"y"===i?{x:0,y:o,width:a.globals.gridWidth,height:h,translateX:0,translateY:d}:{x:n,y:o,width:l,height:h,translateX:c,translateY:d},s.drawSelectionRect(g),s.selectionDragging("resizing"),g}},{key:"selectionDragging",value:function(t,e){var i=this,a=this.w,s=this.xyRatios,r=this.selectionRect,n=0;"resizing"===t&&(n=30);var o=function(t){return parseFloat(r.node.getAttribute(t))},l={x:o("x"),y:o("y"),width:o("width"),height:o("height")};a.globals.selection=l,"function"==typeof a.config.chart.events.selection&&a.globals.selectionEnabled&&(clearTimeout(this.w.globals.selectionResizeTimer),this.w.globals.selectionResizeTimer=window.setTimeout((function(){var t=i.gridRect.getBoundingClientRect(),e=r.node.getBoundingClientRect(),n=a.globals.xAxisScale.niceMin+(e.left-t.left)*s.xRatio,o=a.globals.xAxisScale.niceMin+(e.right-t.left)*s.xRatio,l=a.globals.yAxisScale[0].niceMin+(t.bottom-e.bottom)*s.yRatio[0],h=a.globals.yAxisScale[0].niceMax-(e.top-t.top)*s.yRatio[0];a.config.chart.events.selection(i.ctx,{xaxis:{min:n,max:o},yaxis:{min:l,max:h}})}),n))}},{key:"selectionDrawn",value:function(t){var e=t.context,i=t.zoomtype,a=this.w,s=e,r=this.xyRatios,n=this.ctx.toolbar;if(s.startX>s.endX){var o=s.startX;s.startX=s.endX,s.endX=o}if(s.startY>s.endY){var l=s.startY;s.startY=s.endY,s.endY=l}var h=a.globals.xAxisScale.niceMin+s.startX*r.xRatio,c=a.globals.xAxisScale.niceMin+s.endX*r.xRatio,d=[],u=[];if(a.config.yaxis.forEach((function(t,e){d.push(a.globals.yAxisScale[e].niceMax-r.yRatio[e]*s.startY),u.push(a.globals.yAxisScale[e].niceMax-r.yRatio[e]*s.endY)})),s.dragged&&(s.dragX>10||s.dragY>10)&&h!==c)if(a.globals.zoomEnabled){var f=g.clone(a.globals.initialConfig.yaxis),p=g.clone(a.globals.initialConfig.xaxis);if(a.globals.zoomed=!0,a.globals.zoomed||(a.globals.lastXAxis=g.clone(a.config.xaxis),a.globals.lastYAxis=g.clone(a.config.yaxis)),a.config.xaxis.convertedCatToNumeric&&(h=Math.floor(h),c=Math.floor(c),h<1&&(h=1,c=a.globals.dataPoints),c-h<2&&(c=h+1)),"xy"!==i&&"x"!==i||(p={min:h,max:c}),"xy"!==i&&"y"!==i||f.forEach((function(t,e){f[e].min=u[e],f[e].max=d[e]})),a.config.chart.zoom.autoScaleYaxis){var x=new j(s.ctx);f=x.autoScaleY(s.ctx,f,{xaxis:p})}if(n){var b=n.getBeforeZoomRange(p,f);b&&(p=b.xaxis?b.xaxis:p,f=b.yaxis?b.yaxe:f)}var m={xaxis:p};a.config.chart.group||(m.yaxis=f),s.ctx.updateHelpers._updateOptions(m,!1,s.w.config.chart.animations.dynamicAnimation.enabled),"function"==typeof a.config.chart.events.zoomed&&n.zoomCallback(p,f)}else if(a.globals.selectionEnabled){var v,y=null;v={min:h,max:c},"xy"!==i&&"y"!==i||(y=g.clone(a.config.yaxis)).forEach((function(t,e){y[e].min=u[e],y[e].max=d[e]})),a.globals.selection=s.selection,"function"==typeof a.config.chart.events.selection&&a.config.chart.events.selection(s.ctx,{xaxis:v,yaxis:y})}}},{key:"panDragging",value:function(t){var e=t.context,i=this.w,a=e;if(void 0!==i.globals.lastClientPosition.x){var s=i.globals.lastClientPosition.x-a.clientX,r=i.globals.lastClientPosition.y-a.clientY;Math.abs(s)>Math.abs(r)&&s>0?this.moveDirection="left":Math.abs(s)>Math.abs(r)&&s<0?this.moveDirection="right":Math.abs(r)>Math.abs(s)&&r>0?this.moveDirection="up":Math.abs(r)>Math.abs(s)&&r<0&&(this.moveDirection="down")}i.globals.lastClientPosition={x:a.clientX,y:a.clientY};var n=i.globals.minX,o=i.globals.maxX;i.config.xaxis.convertedCatToNumeric||a.panScrolled(n,o)}},{key:"delayedPanScrolled",value:function(){var t=this.w,e=t.globals.minX,i=t.globals.maxX,a=(t.globals.maxX-t.globals.minX)/2;"left"===this.moveDirection?(e=t.globals.minX+a,i=t.globals.maxX+a):"right"===this.moveDirection&&(e=t.globals.minX-a,i=t.globals.maxX-a),e=Math.floor(e),i=Math.floor(i),this.updateScrolledChart({xaxis:{min:e,max:i}},e,i)}},{key:"panScrolled",value:function(t,e){var i=this.w,a=this.xyRatios,s=g.clone(i.globals.initialConfig.yaxis);"left"===this.moveDirection?(t=i.globals.minX+i.globals.gridWidth/15*a.xRatio,e=i.globals.maxX+i.globals.gridWidth/15*a.xRatio):"right"===this.moveDirection&&(t=i.globals.minX-i.globals.gridWidth/15*a.xRatio,e=i.globals.maxX-i.globals.gridWidth/15*a.xRatio),(t<i.globals.initialMinX||e>i.globals.initialMaxX)&&(t=i.globals.minX,e=i.globals.maxX);var r={min:t,max:e};i.config.chart.zoom.autoScaleYaxis&&(s=new j(this.ctx).autoScaleY(this.ctx,s,{xaxis:r}));var n={xaxis:{min:t,max:e}};i.config.chart.group||(n.yaxis=s),this.updateScrolledChart(n,t,e)}},{key:"updateScrolledChart",value:function(t,e,i){var a=this.w;this.ctx.updateHelpers._updateOptions(t,!1,!1),"function"==typeof a.config.chart.events.scrolled&&a.config.chart.events.scrolled(this.ctx,{xaxis:{min:e,max:i}})}}]),i}(dt),ut=function(){function t(i){e(this,t),this.w=i.w,this.ttCtx=i,this.ctx=i.ctx}return a(t,[{key:"getNearestValues",value:function(t){var e=t.hoverArea,i=t.elGrid,a=t.clientX,s=t.clientY,r=this.w,n=r.globals.gridWidth,o=n/(r.globals.dataPoints-1),l=i.getBoundingClientRect(),h=this.hasBars();(r.globals.comboCharts||h)&&(o=n/r.globals.dataPoints);var c=a-l.left,d=s-l.top;c<0||d<0||c>r.globals.gridWidth||d>r.globals.gridHeight?(e.classList.remove("hovering-zoom"),e.classList.remove("hovering-pan")):r.globals.zoomEnabled?(e.classList.remove("hovering-pan"),e.classList.add("hovering-zoom")):r.globals.panEnabled&&(e.classList.remove("hovering-zoom"),e.classList.add("hovering-pan"));var u=Math.round(c/o);h&&(u=Math.ceil(c/o),u-=1);for(var f,p=null,x=null,b=[],m=0;m<r.globals.seriesXvalues.length;m++)b.push([r.globals.seriesXvalues[m][0]-1e-6].concat(r.globals.seriesXvalues[m]));return b=b.map((function(t){return t.filter((function(t){return t}))})),f=r.globals.seriesYvalues.map((function(t){return t.filter((function(t){return g.isNumber(t)}))})),r.globals.isXNumeric&&(p=(x=this.closestInMultiArray(c,d,b,f)).index,u=x.j,null!==p&&(b=r.globals.seriesXvalues[p],u=(x=this.closestInArray(c,b)).index)),r.globals.capturedSeriesIndex=null===p?-1:p,(!u||u<1)&&(u=0),r.globals.capturedDataPointIndex=u,{capturedSeries:p,j:u,hoverX:c,hoverY:d}}},{key:"closestInMultiArray",value:function(t,e,i,a){var s=this.w,r=0,n=null,o=-1;s.globals.series.length>1?r=this.getFirstActiveXArray(i):n=0;var l=a[r][0],h=i[r][0],c=Math.abs(t-h),d=Math.abs(e-l),g=d+c;return a.map((function(s,r){s.map((function(s,l){var h=Math.abs(e-a[r][l]),u=Math.abs(t-i[r][l]),f=u+h;f<g&&(g=f,c=u,d=h,n=r,o=l)}))})),{index:n,j:o}}},{key:"getFirstActiveXArray",value:function(t){for(var e=0,i=new m(this.ctx),a=t.map((function(t,e){return t.length>0?e:-1})),s=0;s<a.length;s++){var r=i.getSeriesTotalByIndex(s);if(-1!==a[s]&&0!==r&&!i.seriesHaveSameValues(s)){e=a[s];break}}return e}},{key:"closestInArray",value:function(t,e){for(var i=e[0],a=null,s=Math.abs(t-i),r=0;r<e.length;r++){var n=Math.abs(t-e[r]);n<s&&(s=n,a=r)}return{index:a}}},{key:"isXoverlap",value:function(t){var e=[],i=this.w.globals.seriesX.filter((function(t){return void 0!==t[0]}));if(i.length>0)for(var a=0;a<i.length-1;a++)void 0!==i[a][t]&&void 0!==i[a+1][t]&&i[a][t]!==i[a+1][t]&&e.push("unEqual");return 0===e.length}},{key:"isInitialSeriesSameLen",value:function(){for(var t=!0,e=this.w.globals.initialSeries,i=0;i<e.length-1;i++)if(e[i].data.length!==e[i+1].data.length){t=!1;break}return t}},{key:"getBarsHeight",value:function(t){return d(t).reduce((function(t,e){return t+e.getBBox().height}),0)}},{key:"getElMarkers",value:function(){return this.w.globals.dom.baseEl.querySelectorAll(" .apexcharts-series-markers")}},{key:"getAllMarkers",value:function(){var t=this.w.globals.dom.baseEl.querySelectorAll(".apexcharts-series-markers-wrap");(t=d(t)).sort((function(t,e){return Number(e.getAttribute("data:realIndex"))<Number(t.getAttribute("data:realIndex"))?0:-1}));var e=[];return t.forEach((function(t){e.push(t.querySelector(".apexcharts-marker"))})),e}},{key:"hasMarkers",value:function(){return this.getElMarkers().length>0}},{key:"getElBars",value:function(){return this.w.globals.dom.baseEl.querySelectorAll(".apexcharts-bar-series,  .apexcharts-candlestick-series, .apexcharts-rangebar-series")}},{key:"hasBars",value:function(){return this.getElBars().length>0}},{key:"getHoverMarkerSize",value:function(t){var e=this.w,i=e.config.markers.hover.size;return void 0===i&&(i=e.globals.markers.size[t]+e.config.markers.hover.sizeOffset),i}},{key:"toggleAllTooltipSeriesGroups",value:function(t){var e=this.w,i=this.ttCtx;0===i.allTooltipSeriesGroups.length&&(i.allTooltipSeriesGroups=e.globals.dom.baseEl.querySelectorAll(".apexcharts-tooltip-series-group"));for(var a=i.allTooltipSeriesGroups,s=0;s<a.length;s++)"enable"===t?(a[s].classList.add("apexcharts-active"),a[s].style.display=e.config.tooltip.items.display):(a[s].classList.remove("apexcharts-active"),a[s].style.display="none")}}]),t}(),ft=function(){function t(i){e(this,t),this.w=i.w,this.ctx=i.ctx,this.ttCtx=i,this.tooltipUtil=new ut(i)}return a(t,[{key:"drawSeriesTexts",value:function(t){var e=t.shared,i=void 0===e||e,a=t.ttItems,s=t.i,r=void 0===s?0:s,n=t.j,o=void 0===n?null:n,l=t.y1,h=t.y2,c=this.w;void 0!==c.config.tooltip.custom?this.handleCustomTooltip({i:r,j:o,y1:l,y2:h,w:c}):this.toggleActiveInactiveSeries(i);var d=this.getValuesToPrint({i:r,j:o});this.printLabels({i:r,j:o,values:d,ttItems:a,shared:i});var g=this.ttCtx.getElTooltip();this.ttCtx.tooltipRect.ttWidth=g.getBoundingClientRect().width,this.ttCtx.tooltipRect.ttHeight=g.getBoundingClientRect().height}},{key:"printLabels",value:function(t){var e,i=this,a=t.i,s=t.j,r=t.values,n=t.ttItems,o=t.shared,l=this.w,h=r.xVal,c=r.zVal,d=r.xAxisTTVal,g="",u=l.globals.colors[a];null!==s&&l.config.plotOptions.bar.distributed&&(u=l.globals.colors[s]);for(var f=function(t,r){var f=i.getFormatters(a);g=i.getSeriesName({fn:f.yLbTitleFormatter,index:a,seriesIndex:a,j:s});var p=l.config.tooltip.inverseOrder?r:t;if(l.globals.axisCharts){var x=function(t){return f.yLbFormatter(l.globals.series[t][s],{series:l.globals.series,seriesIndex:t,dataPointIndex:s,w:l})};o?(f=i.getFormatters(p),g=i.getSeriesName({fn:f.yLbTitleFormatter,index:p,seriesIndex:a,j:s}),u=l.globals.colors[p],e=x(p)):e=x(a)}null===s&&(e=f.yLbFormatter(l.globals.series[a],l)),i.DOMHandling({i:a,t:p,j:s,ttItems:n,values:{val:e,xVal:h,xAxisTTVal:d,zVal:c},seriesName:g,shared:o,pColor:u})},p=0,x=l.globals.series.length-1;p<l.globals.series.length;p++,x--)f(p,x)}},{key:"getFormatters",value:function(t){var e,i=this.w,a=i.globals.yLabelFormatters[t];return void 0!==i.globals.ttVal?Array.isArray(i.globals.ttVal)?(a=i.globals.ttVal[t]&&i.globals.ttVal[t].formatter,e=i.globals.ttVal[t]&&i.globals.ttVal[t].title&&i.globals.ttVal[t].title.formatter):(a=i.globals.ttVal.formatter,"function"==typeof i.globals.ttVal.title.formatter&&(e=i.globals.ttVal.title.formatter)):e=i.config.tooltip.y.title.formatter,"function"!=typeof a&&(a=i.globals.yLabelFormatters[0]?i.globals.yLabelFormatters[0]:function(t){return t}),"function"!=typeof e&&(e=function(t){return t}),{yLbFormatter:a,yLbTitleFormatter:e}}},{key:"getSeriesName",value:function(t){var e=t.fn,i=t.index,a=t.seriesIndex,s=t.j,r=this.w;return e(String(r.globals.seriesNames[i]),{series:r.globals.series,seriesIndex:a,dataPointIndex:s,w:r})}},{key:"DOMHandling",value:function(t){var e=t.i,i=t.t,a=(t.j,t.ttItems),s=t.values,r=t.seriesName,n=t.shared,o=t.pColor,l=this.w,h=this.ttCtx,c=s.val,d=s.xVal,g=s.xAxisTTVal,u=s.zVal,f=null;f=a[i].children,l.config.tooltip.fillSeriesColor&&(a[i].style.backgroundColor=o,f[0].style.display="none"),h.showTooltipTitle&&(null===h.tooltipTitle&&(h.tooltipTitle=l.globals.dom.baseEl.querySelector(".apexcharts-tooltip-title")),h.tooltipTitle.innerHTML=d),h.blxaxisTooltip&&(h.xaxisTooltipText.innerHTML=""!==g?g:d);var p=a[i].querySelector(".apexcharts-tooltip-text-label");p&&(p.innerHTML=r?r+": ":"");var x=a[i].querySelector(".apexcharts-tooltip-text-value");(x&&(x.innerHTML=void 0!==c?c:""),f[0]&&f[0].classList.contains("apexcharts-tooltip-marker")&&(l.config.tooltip.marker.fillColors&&Array.isArray(l.config.tooltip.marker.fillColors)&&(o=l.config.tooltip.marker.fillColors[e]),f[0].style.backgroundColor=o),l.config.tooltip.marker.show||(f[0].style.display="none"),null!==u)&&(a[i].querySelector(".apexcharts-tooltip-text-z-label").innerHTML=l.config.tooltip.z.title,a[i].querySelector(".apexcharts-tooltip-text-z-value").innerHTML=void 0!==u?u:"");n&&f[0]&&(null==c||l.globals.collapsedSeriesIndices.indexOf(i)>-1?f[0].parentNode.style.display="none":f[0].parentNode.style.display=l.config.tooltip.items.display)}},{key:"toggleActiveInactiveSeries",value:function(t){var e=this.w;if(t)this.tooltipUtil.toggleAllTooltipSeriesGroups("enable");else{this.tooltipUtil.toggleAllTooltipSeriesGroups("disable");var i=e.globals.dom.baseEl.querySelector(".apexcharts-tooltip-series-group");i&&(i.classList.add("apexcharts-active"),i.style.display=e.config.tooltip.items.display)}}},{key:"getValuesToPrint",value:function(t){var e=t.i,i=t.j,a=this.w,s=this.ctx.series.filteredSeriesX(),r="",n="",o=null,l=null,h={series:a.globals.series,seriesIndex:e,dataPointIndex:i,w:a},c=a.globals.ttZFormatter;null===i?l=a.globals.series[e]:a.globals.isXNumeric?(r=s[e][i],0===s[e].length&&(r=s[this.tooltipUtil.getFirstActiveXArray(s)][i])):r=void 0!==a.globals.labels[i]?a.globals.labels[i]:"";var d=r;a.globals.isXNumeric&&"datetime"===a.config.xaxis.type?r=new W(this.ctx).xLabelFormat(a.globals.ttKeyFormatter,d,d):a.globals.isBarHorizontal||(r=a.globals.xLabelFormatter(d,h));return void 0!==a.config.tooltip.x.formatter&&(r=a.globals.ttKeyFormatter(d,h)),a.globals.seriesZ.length>0&&a.globals.seriesZ[0].length>0&&(o=c(a.globals.seriesZ[e][i],a)),n="function"==typeof a.config.xaxis.tooltip.formatter?a.globals.xaxisTooltipFormatter(d,h):r,{val:Array.isArray(l)?l.join(" "):l,xVal:Array.isArray(r)?r.join(" "):r,xAxisTTVal:Array.isArray(n)?n.join(" "):n,zVal:o}}},{key:"handleCustomTooltip",value:function(t){var e=t.i,i=t.j,a=t.y1,s=t.y2,r=t.w,n=this.ttCtx.getElTooltip(),o=r.config.tooltip.custom;Array.isArray(o)&&o[e]&&(o=o[e]),n.innerHTML=o({ctx:this.ctx,series:r.globals.series,seriesIndex:e,dataPointIndex:i,y1:a,y2:s,w:r})}}]),t}(),pt=function(){function t(i){e(this,t),this.ttCtx=i,this.ctx=i.ctx,this.w=i.w}return a(t,[{key:"moveXCrosshairs",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=this.ttCtx,a=this.w,s=i.getElXCrosshairs(),r=t-i.xcrosshairsWidth/2,n=a.globals.labels.slice().length;if(null!==e&&(r=a.globals.gridWidth/n*e),null!==s&&(s.setAttribute("x",r),s.setAttribute("x1",r),s.setAttribute("x2",r),s.setAttribute("y2",a.globals.gridHeight),s.classList.add("apexcharts-active")),r<0&&(r=0),r>a.globals.gridWidth&&(r=a.globals.gridWidth),i.blxaxisTooltip){var o=r;"tickWidth"!==a.config.xaxis.crosshairs.width&&"barWidth"!==a.config.xaxis.crosshairs.width||(o=r+i.xcrosshairsWidth/2),this.moveXAxisTooltip(o)}}},{key:"moveYCrosshairs",value:function(t){var e=this.ttCtx;null!==e.ycrosshairs&&(p.setAttrs(e.ycrosshairs,{y1:t,y2:t}),p.setAttrs(e.ycrosshairsHidden,{y1:t,y2:t}))}},{key:"moveXAxisTooltip",value:function(t){var e=this.w,i=this.ttCtx;if(null!==i.xaxisTooltip){i.xaxisTooltip.classList.add("apexcharts-active");var a=i.xaxisOffY+e.config.xaxis.tooltip.offsetY+e.globals.translateY+1+e.config.xaxis.offsetY;if(t-=i.xaxisTooltip.getBoundingClientRect().width/2,!isNaN(t)){t+=e.globals.translateX;var s;s=new p(this.ctx).getTextRects(i.xaxisTooltipText.innerHTML),i.xaxisTooltipText.style.minWidth=s.width+"px",i.xaxisTooltip.style.left=t+"px",i.xaxisTooltip.style.top=a+"px"}}}},{key:"moveYAxisTooltip",value:function(t){var e=this.w,i=this.ttCtx;null===i.yaxisTTEls&&(i.yaxisTTEls=e.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxistooltip"));var a=parseInt(i.ycrosshairsHidden.getAttribute("y1"),10),s=e.globals.translateY+a,r=i.yaxisTTEls[t].getBoundingClientRect().height,n=e.globals.translateYAxisX[t]-2;e.config.yaxis[t].opposite&&(n-=26),s-=r/2,-1===e.globals.ignoreYAxisIndexes.indexOf(t)?(i.yaxisTTEls[t].classList.add("apexcharts-active"),i.yaxisTTEls[t].style.top=s+"px",i.yaxisTTEls[t].style.left=n+e.config.yaxis[t].tooltip.offsetX+"px"):i.yaxisTTEls[t].classList.remove("apexcharts-active")}},{key:"moveTooltip",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,a=this.w,s=this.ttCtx,r=s.getElTooltip(),n=s.tooltipRect,o=null!==i?parseFloat(i):1,l=parseFloat(t)+o+5,h=parseFloat(e)+o/2;if(l>a.globals.gridWidth/2&&(l=l-n.ttWidth-o-15),l>a.globals.gridWidth-n.ttWidth-10&&(l=a.globals.gridWidth-n.ttWidth),l<-20&&(l=-20),a.config.tooltip.followCursor){var c=s.getElGrid(),d=c.getBoundingClientRect();h=s.e.clientY+a.globals.translateY-d.top-n.ttHeight/2}if(!a.config.tooltip.followCursor){var g=this.positionChecks(n,l,h);l=g.x,h=g.y}isNaN(l)||(l+=a.globals.translateX,r.style.left=l+"px",r.style.top=h+"px")}},{key:"positionChecks",value:function(t,e,i){var a=this.w;return t.ttHeight/2+i>a.globals.gridHeight&&(i=a.globals.gridHeight-t.ttHeight+a.globals.translateY),i<0&&(i=0),{x:e,y:i}}},{key:"moveMarkers",value:function(t,e){var i=this.w,a=this.ttCtx;if(i.globals.markers.size[t]>0)for(var s=i.globals.dom.baseEl.querySelectorAll(" .apexcharts-series[data\\:realIndex='".concat(t,"'] .apexcharts-marker")),r=0;r<s.length;r++)parseInt(s[r].getAttribute("rel"),10)===e&&(a.marker.resetPointsSize(),a.marker.enlargeCurrentPoint(e,s[r]));else a.marker.resetPointsSize(),this.moveDynamicPointOnHover(e,t)}},{key:"moveDynamicPointOnHover",value:function(t,e){var i,a,s=this.w,r=this.ttCtx,n=s.globals.pointsArray,o=r.tooltipUtil.getHoverMarkerSize(e),l=s.config.series[e].type;if(!l||"column"!==l&&"candlestick"!==l){i=n[e][t][0],a=n[e][t][1]?n[e][t][1]:0;var h=s.globals.dom.baseEl.querySelector(".apexcharts-series[data\\:realIndex='".concat(e,"'] .apexcharts-series-markers circle"));h&&(h.setAttribute("r",o),h.setAttribute("cx",i),h.setAttribute("cy",a)),this.moveXCrosshairs(i),r.fixedTooltip||this.moveTooltip(i,a,o)}}},{key:"moveDynamicPointsOnHover",value:function(t){var e,i=this.ttCtx,a=i.w,s=0,r=0,n=a.globals.pointsArray;e=new M(this.ctx).getActiveConfigSeriesIndex(!0);var o=i.tooltipUtil.getHoverMarkerSize(e);n[e]&&(s=n[e][t][0],r=n[e][t][1]);var l=i.tooltipUtil.getAllMarkers();if(null!==l)for(var h=0;h<a.globals.series.length;h++){var c=n[h];if(a.globals.comboCharts&&void 0===c&&l.splice(h,0,null),c&&c.length){var d=n[h][t][1];l[h].setAttribute("cx",s),null===d||isNaN(d)?l[h]&&l[h].setAttribute("r",0):(l[h]&&l[h].setAttribute("r",o),l[h]&&l[h].setAttribute("cy",d))}}if(this.moveXCrosshairs(s),!i.fixedTooltip){var g=r||a.globals.gridHeight;this.moveTooltip(s,g,o)}}},{key:"moveStickyTooltipOverBars",value:function(t){var e,i=this.w,a=this.ttCtx,s=i.globals.columnSeries?i.globals.columnSeries.length:i.globals.series.length,r=s>=2&&s%2==0?Math.floor(s/2):Math.floor(s/2)+1,n=i.globals.dom.baseEl.querySelector(".apexcharts-bar-series .apexcharts-series[rel='".concat(r,"'] path[j='").concat(t,"'], .apexcharts-candlestick-series .apexcharts-series[rel='").concat(r,"'] path[j='").concat(t,"'], .apexcharts-rangebar-series .apexcharts-series[rel='").concat(r,"'] path[j='").concat(t,"']")),o=n?parseFloat(n.getAttribute("cx")):0,l=n?parseFloat(n.getAttribute("barWidth")):0;i.globals.isXNumeric?o-=s%2!=0?l/2:0:(o=a.xAxisTicksPositions[t-1]+a.dataPointsDividedWidth/2,isNaN(o)&&(o=a.xAxisTicksPositions[t]-a.dataPointsDividedWidth/2));var h=a.getElGrid().getBoundingClientRect();if(e=a.e.clientY-h.top-a.tooltipRect.ttHeight/2,this.moveXCrosshairs(o),!a.fixedTooltip){var c=e||i.globals.gridHeight;this.moveTooltip(o,c)}}}]),t}(),xt=function(){function t(i){e(this,t),this.w=i.w,this.ttCtx=i,this.ctx=i.ctx,this.tooltipPosition=new pt(i)}return a(t,[{key:"drawDynamicPoints",value:function(){var t=this.w,e=new p(this.ctx),i=new P(this.ctx),a=t.globals.dom.baseEl.querySelectorAll(".apexcharts-series");(a=d(a)).sort((function(t,e){return Number(e.getAttribute("data:realIndex"))<Number(t.getAttribute("data:realIndex"))?0:-1}));for(var s=0;s<a.length;s++){var r=a[s].querySelector(".apexcharts-series-markers-wrap");if(null!==r){var n=void 0,o="apexcharts-marker w".concat((Math.random()+1).toString(36).substring(4));"line"!==t.config.chart.type&&"area"!==t.config.chart.type||t.globals.comboCharts||t.config.tooltip.intersect||(o+=" no-pointer-events");var l=i.getMarkerConfig(o,s);(n=e.drawMarker(0,0,l)).node.setAttribute("default-marker-size",0);var h=document.createElementNS(t.globals.SVGNS,"g");h.classList.add("apexcharts-series-markers"),h.appendChild(n.node),r.appendChild(h)}}}},{key:"enlargeCurrentPoint",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,s=this.w;"bubble"!==s.config.chart.type&&this.newPointSize(t,e);var r=e.getAttribute("cx"),n=e.getAttribute("cy");if(null!==i&&null!==a&&(r=i,n=a),this.tooltipPosition.moveXCrosshairs(r),!this.fixedTooltip){if("radar"===s.config.chart.type){var o=this.ttCtx.getElGrid(),l=o.getBoundingClientRect();r=this.ttCtx.e.clientX-l.left}this.tooltipPosition.moveTooltip(r,n,s.config.markers.hover.size)}}},{key:"enlargePoints",value:function(t){for(var e=this.w,i=this.ttCtx,a=t,s=e.globals.dom.baseEl.querySelectorAll(".apexcharts-series:not(.apexcharts-series-collapsed) .apexcharts-marker"),r=e.config.markers.hover.size,n=0;n<s.length;n++){var o=s[n].getAttribute("rel"),l=s[n].getAttribute("index");if(void 0===r&&(r=e.globals.markers.size[l]+e.config.markers.hover.sizeOffset),a===parseInt(o,10)){this.newPointSize(a,s[n]);var h=s[n].getAttribute("cx"),c=s[n].getAttribute("cy");this.tooltipPosition.moveXCrosshairs(h),i.fixedTooltip||this.tooltipPosition.moveTooltip(h,c,r)}else this.oldPointSize(s[n])}}},{key:"newPointSize",value:function(t,e){var i=this.w,a=i.config.markers.hover.size,s=0===t?e.parentNode.firstChild:e.parentNode.lastChild;if("0"!==s.getAttribute("default-marker-size")){var r=parseInt(s.getAttribute("index"),10);void 0===a&&(a=i.globals.markers.size[r]+i.config.markers.hover.sizeOffset),s.setAttribute("r",a)}}},{key:"oldPointSize",value:function(t){var e=parseFloat(t.getAttribute("default-marker-size"));t.setAttribute("r",e)}},{key:"resetPointsSize",value:function(){for(var t=this.w.globals.dom.baseEl.querySelectorAll(".apexcharts-series:not(.apexcharts-series-collapsed) .apexcharts-marker"),e=0;e<t.length;e++){var i=parseFloat(t[e].getAttribute("default-marker-size"));g.isNumber(i)?t[e].setAttribute("r",i):t[e].setAttribute("r",0)}}}]),t}(),bt=function(){function t(i){e(this,t),this.w=i.w,this.ttCtx=i}return a(t,[{key:"getAttr",value:function(t,e){return parseFloat(t.target.getAttribute(e))}},{key:"handleHeatTooltip",value:function(t){var e=t.e,i=t.opt,a=t.x,s=t.y,r=this.ttCtx,n=this.w;if(e.target.classList.contains("apexcharts-heatmap-rect")){var o=this.getAttr(e,"i"),l=this.getAttr(e,"j"),h=this.getAttr(e,"cx"),c=this.getAttr(e,"cy"),d=this.getAttr(e,"width"),g=this.getAttr(e,"height");if(r.tooltipLabels.drawSeriesTexts({ttItems:i.ttItems,i:o,j:l,shared:!1}),n.globals.capturedSeriesIndex=o,n.globals.capturedDataPointIndex=l,a=h+r.tooltipRect.ttWidth/2+d,s=c+r.tooltipRect.ttHeight/2-g/2,r.tooltipPosition.moveXCrosshairs(h+d/2),a>n.globals.gridWidth/2&&(a=h-r.tooltipRect.ttWidth/2+d),r.w.config.tooltip.followCursor){var u=r.getElGrid().getBoundingClientRect();s=r.e.clientY-u.top+n.globals.translateY/2-10}}return{x:a,y:s}}},{key:"handleMarkerTooltip",value:function(t){var e,i,a=t.e,s=t.opt,r=t.x,n=t.y,o=this.w,l=this.ttCtx;if(a.target.classList.contains("apexcharts-marker")){var h=parseInt(s.paths.getAttribute("cx"),10),c=parseInt(s.paths.getAttribute("cy"),10),d=parseFloat(s.paths.getAttribute("val"));if(i=parseInt(s.paths.getAttribute("rel"),10),e=parseInt(s.paths.parentNode.parentNode.parentNode.getAttribute("rel"),10)-1,l.intersect){var u=g.findAncestor(s.paths,"apexcharts-series");u&&(e=parseInt(u.getAttribute("data:realIndex"),10))}if(l.tooltipLabels.drawSeriesTexts({ttItems:s.ttItems,i:e,j:i,shared:!l.showOnIntersect&&o.config.tooltip.shared}),"mouseup"===a.type&&l.markerClick(a,e,i),o.globals.capturedSeriesIndex=e,o.globals.capturedDataPointIndex=i,r=h,n=c+o.globals.translateY-1.4*l.tooltipRect.ttHeight,l.w.config.tooltip.followCursor){var f=l.getElGrid().getBoundingClientRect();n=l.e.clientY+o.globals.translateY-f.top}d<0&&(n=c),l.marker.enlargeCurrentPoint(i,s.paths,r,n)}return{x:r,y:n}}},{key:"handleBarTooltip",value:function(t){var e,i,a=t.e,s=t.opt,r=this.w,n=this.ttCtx,o=n.getElTooltip(),l=0,h=0,c=0,d=this.getBarTooltipXY({e:a,opt:s});e=d.i;var g=d.barHeight,u=d.j;if(r.globals.capturedSeriesIndex=e,r.globals.capturedDataPointIndex=u,r.globals.isBarHorizontal&&n.tooltipUtil.hasBars()||!r.config.tooltip.shared?(h=d.x,c=d.y,i=Array.isArray(r.config.stroke.width)?r.config.stroke.width[e]:r.config.stroke.width,l=h):r.globals.comboCharts||r.config.tooltip.shared||(l/=2),isNaN(c)?c=r.globals.svgHeight-n.tooltipRect.ttHeight:c<0&&(c=0),h+n.tooltipRect.ttWidth>r.globals.gridWidth?h-=n.tooltipRect.ttWidth:h<0&&(h=0),n.w.config.tooltip.followCursor){var f=n.getElGrid().getBoundingClientRect();c=n.e.clientY-f.top}if(null===n.tooltip&&(n.tooltip=r.globals.dom.baseEl.querySelector(".apexcharts-tooltip")),r.config.tooltip.shared||(r.globals.comboBarCount>0?n.tooltipPosition.moveXCrosshairs(l+i/2):n.tooltipPosition.moveXCrosshairs(l)),!n.fixedTooltip&&(!r.config.tooltip.shared||r.globals.isBarHorizontal&&n.tooltipUtil.hasBars())){var p=r.globals.isMultipleYAxis?r.config.yaxis[x]&&r.config.yaxis[x].reversed:r.config.yaxis[0].reversed;p&&(h-=n.tooltipRect.ttWidth)<0&&(h=0),o.style.left=h+r.globals.translateX+"px";var x=parseInt(s.paths.parentNode.getAttribute("data:realIndex"),10);!p||r.globals.isBarHorizontal&&n.tooltipUtil.hasBars()||(c=c+g-2*(r.globals.series[e][u]<0?g:0)),n.tooltipRect.ttHeight+c>r.globals.gridHeight?(c=r.globals.gridHeight-n.tooltipRect.ttHeight+r.globals.translateY,o.style.top=c+"px"):o.style.top=c+r.globals.translateY-n.tooltipRect.ttHeight/2+"px"}}},{key:"getBarTooltipXY",value:function(t){var e=t.e,i=t.opt,a=this.w,s=null,r=this.ttCtx,n=0,o=0,l=0,h=0,c=0,d=e.target.classList;if(d.contains("apexcharts-bar-area")||d.contains("apexcharts-candlestick-area")||d.contains("apexcharts-rangebar-area")){var g=e.target,u=g.getBoundingClientRect(),f=i.elGrid.getBoundingClientRect(),p=u.height;c=u.height;var x=u.width,b=parseInt(g.getAttribute("cx"),10),m=parseInt(g.getAttribute("cy"),10);h=parseFloat(g.getAttribute("barWidth"));var v="touchmove"===e.type?e.touches[0].clientX:e.clientX;s=parseInt(g.getAttribute("j"),10),n=parseInt(g.parentNode.getAttribute("rel"),10)-1;var y=g.getAttribute("data-range-y1"),w=g.getAttribute("data-range-y2");a.globals.comboCharts&&(n=parseInt(g.parentNode.getAttribute("data:realIndex"),10)),r.tooltipLabels.drawSeriesTexts({ttItems:i.ttItems,i:n,j:s,y1:y?parseInt(y,10):null,y2:w?parseInt(w,10):null,shared:!r.showOnIntersect&&a.config.tooltip.shared}),a.config.tooltip.followCursor?a.globals.isBarHorizontal?(o=v-f.left+15,l=m-r.dataPointsDividedHeight+p/2-r.tooltipRect.ttHeight/2):(o=a.globals.isXNumeric?b-x/2:b-r.dataPointsDividedWidth+x/2,l=e.clientY-f.top-r.tooltipRect.ttHeight/2-15):a.globals.isBarHorizontal?((o=b)<r.xyRatios.baseLineInvertedY&&(o=b-r.tooltipRect.ttWidth),l=m-r.dataPointsDividedHeight+p/2-r.tooltipRect.ttHeight/2):(o=a.globals.isXNumeric?b-x/2:b-r.dataPointsDividedWidth+x/2,l=m)}return{x:o,y:l,barHeight:c,barWidth:h,i:n,j:s}}}]),t}(),mt=function(){function t(i){e(this,t),this.w=i.w,this.ttCtx=i}return a(t,[{key:"drawXaxisTooltip",value:function(){var t=this.w,e=this.ttCtx,i="bottom"===t.config.xaxis.position;e.xaxisOffY=i?t.globals.gridHeight+1:-t.globals.xAxisHeight-t.config.xaxis.axisTicks.height+3;var a=i?"apexcharts-xaxistooltip apexcharts-xaxistooltip-bottom":"apexcharts-xaxistooltip apexcharts-xaxistooltip-top",s=t.globals.dom.elWrap;e.blxaxisTooltip&&(null===t.globals.dom.baseEl.querySelector(".apexcharts-xaxistooltip")&&(e.xaxisTooltip=document.createElement("div"),e.xaxisTooltip.setAttribute("class",a+" apexcharts-theme-"+t.config.tooltip.theme),s.appendChild(e.xaxisTooltip),e.xaxisTooltipText=document.createElement("div"),e.xaxisTooltipText.classList.add("apexcharts-xaxistooltip-text"),e.xaxisTooltipText.style.fontFamily=t.config.xaxis.tooltip.style.fontFamily||t.config.chart.fontFamily,e.xaxisTooltipText.style.fontSize=t.config.xaxis.tooltip.style.fontSize,e.xaxisTooltip.appendChild(e.xaxisTooltipText)))}},{key:"drawYaxisTooltip",value:function(){for(var t=this.w,e=this.ttCtx,i=function(i){var a=t.config.yaxis[i].opposite||t.config.yaxis[i].crosshairs.opposite;e.yaxisOffX=a?t.globals.gridWidth+1:1;var s="apexcharts-yaxistooltip apexcharts-yaxistooltip-".concat(i,a?" apexcharts-yaxistooltip-right":" apexcharts-yaxistooltip-left");t.globals.yAxisSameScaleIndices.map((function(e,a){e.map((function(e,a){a===i&&(s+=t.config.yaxis[a].show?" ":" apexcharts-yaxistooltip-hidden")}))}));var r=t.globals.dom.elWrap;e.blyaxisTooltip&&(null===t.globals.dom.baseEl.querySelector(".apexcharts-yaxistooltip apexcharts-yaxistooltip-".concat(i))&&(e.yaxisTooltip=document.createElement("div"),e.yaxisTooltip.setAttribute("class",s+" apexcharts-theme-"+t.config.tooltip.theme),r.appendChild(e.yaxisTooltip),0===i&&(e.yaxisTooltipText=[]),e.yaxisTooltipText.push(document.createElement("div")),e.yaxisTooltipText[i].classList.add("apexcharts-yaxistooltip-text"),e.yaxisTooltip.appendChild(e.yaxisTooltipText[i])))},a=0;a<t.config.yaxis.length;a++)i(a)}},{key:"setXCrosshairWidth",value:function(){var t=this.w,e=this.ttCtx,i=e.getElXCrosshairs();if(e.xcrosshairsWidth=parseInt(t.config.xaxis.crosshairs.width,10),t.globals.comboCharts){var a=t.globals.dom.baseEl.querySelector(".apexcharts-bar-area");if(null!==a&&"barWidth"===t.config.xaxis.crosshairs.width){var s=parseFloat(a.getAttribute("barWidth"));e.xcrosshairsWidth=s}else if("tickWidth"===t.config.xaxis.crosshairs.width){var r=t.globals.labels.length;e.xcrosshairsWidth=t.globals.gridWidth/r}}else if("tickWidth"===t.config.xaxis.crosshairs.width){var n=t.globals.labels.length;e.xcrosshairsWidth=t.globals.gridWidth/n}else if("barWidth"===t.config.xaxis.crosshairs.width){var o=t.globals.dom.baseEl.querySelector(".apexcharts-bar-area");if(null!==o){var l=parseFloat(o.getAttribute("barWidth"));e.xcrosshairsWidth=l}else e.xcrosshairsWidth=1}t.globals.isBarHorizontal&&(e.xcrosshairsWidth=0),null!==i&&e.xcrosshairsWidth>0&&i.setAttribute("width",e.xcrosshairsWidth)}},{key:"handleYCrosshair",value:function(){var t=this.w,e=this.ttCtx;e.ycrosshairs=t.globals.dom.baseEl.querySelector(".apexcharts-ycrosshairs"),e.ycrosshairsHidden=t.globals.dom.baseEl.querySelector(".apexcharts-ycrosshairs-hidden")}},{key:"drawYaxisTooltipText",value:function(t,e,i){var a=this.ttCtx,s=this.w,r=s.globals.yLabelFormatters[t];if(a.blyaxisTooltip){var n=a.getElGrid().getBoundingClientRect(),o=(e-n.top)*i.yRatio[t],l=s.globals.maxYArr[t]-s.globals.minYArr[t],h=s.globals.minYArr[t]+(l-o);a.tooltipPosition.moveYCrosshairs(e-n.top),a.yaxisTooltipText[t].innerHTML=r(h),a.tooltipPosition.moveYAxisTooltip(t)}}}]),t}(),vt=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w;var a=this.w;this.tConfig=a.config.tooltip,this.tooltipUtil=new ut(this),this.tooltipLabels=new ft(this),this.tooltipPosition=new pt(this),this.marker=new xt(this),this.intersect=new bt(this),this.axesTooltip=new mt(this),this.showOnIntersect=this.tConfig.intersect,this.showTooltipTitle=this.tConfig.x.show,this.fixedTooltip=this.tConfig.fixed.enabled,this.xaxisTooltip=null,this.yaxisTTEls=null,this.isBarShared=!a.globals.isBarHorizontal&&this.tConfig.shared}return a(t,[{key:"getElTooltip",value:function(t){return t||(t=this),t.w.globals.dom.baseEl.querySelector(".apexcharts-tooltip")}},{key:"getElXCrosshairs",value:function(){return this.w.globals.dom.baseEl.querySelector(".apexcharts-xcrosshairs")}},{key:"getElGrid",value:function(){return this.w.globals.dom.baseEl.querySelector(".apexcharts-grid")}},{key:"drawTooltip",value:function(t){var e=this.w;this.xyRatios=t,this.blxaxisTooltip=e.config.xaxis.tooltip.enabled&&e.globals.axisCharts,this.blyaxisTooltip=e.config.yaxis[0].tooltip.enabled&&e.globals.axisCharts,this.allTooltipSeriesGroups=[],e.globals.axisCharts||(this.showTooltipTitle=!1);var i=document.createElement("div");if(i.classList.add("apexcharts-tooltip"),i.classList.add("apexcharts-theme-".concat(this.tConfig.theme)),e.globals.dom.elWrap.appendChild(i),e.globals.axisCharts){this.axesTooltip.drawXaxisTooltip(),this.axesTooltip.drawYaxisTooltip(),this.axesTooltip.setXCrosshairWidth(),this.axesTooltip.handleYCrosshair();var a=new G(this.ctx);this.xAxisTicksPositions=a.getXAxisTicksPositions()}if(!e.globals.comboCharts&&!this.tConfig.intersect&&"bar"!==e.config.chart.type&&"rangeBar"!==e.config.chart.type||this.tConfig.shared||(this.showOnIntersect=!0),0!==e.config.markers.size&&0!==e.globals.markers.largestSize||this.marker.drawDynamicPoints(this),e.globals.collapsedSeries.length!==e.globals.series.length){this.dataPointsDividedHeight=e.globals.gridHeight/e.globals.dataPoints,this.dataPointsDividedWidth=e.globals.gridWidth/e.globals.dataPoints,this.showTooltipTitle&&(this.tooltipTitle=document.createElement("div"),this.tooltipTitle.classList.add("apexcharts-tooltip-title"),this.tooltipTitle.style.fontFamily=this.tConfig.style.fontFamily||e.config.chart.fontFamily,this.tooltipTitle.style.fontSize=this.tConfig.style.fontSize,i.appendChild(this.tooltipTitle));var s=e.globals.series.length;(e.globals.xyCharts||e.globals.comboCharts)&&this.tConfig.shared&&(s=this.showOnIntersect?1:e.globals.series.length),this.legendLabels=e.globals.dom.baseEl.querySelectorAll(".apexcharts-legend-text"),this.ttItems=this.createTTElements(s),this.addSVGEvents()}}},{key:"createTTElements",value:function(t){for(var e=this.w,i=[],a=this.getElTooltip(),s=0;s<t;s++){var r=document.createElement("div");r.classList.add("apexcharts-tooltip-series-group"),this.tConfig.shared&&this.tConfig.enabledOnSeries&&Array.isArray(this.tConfig.enabledOnSeries)&&this.tConfig.enabledOnSeries.indexOf(s)<0&&r.classList.add("apexcharts-tooltip-series-group-hidden");var n=document.createElement("span");n.classList.add("apexcharts-tooltip-marker"),n.style.backgroundColor=e.globals.colors[s],r.appendChild(n);var o=document.createElement("div");o.classList.add("apexcharts-tooltip-text"),o.style.fontFamily=this.tConfig.style.fontFamily||e.config.chart.fontFamily,o.style.fontSize=this.tConfig.style.fontSize;var l=document.createElement("div");l.classList.add("apexcharts-tooltip-y-group");var h=document.createElement("span");h.classList.add("apexcharts-tooltip-text-label"),l.appendChild(h);var c=document.createElement("span");c.classList.add("apexcharts-tooltip-text-value"),l.appendChild(c);var d=document.createElement("div");d.classList.add("apexcharts-tooltip-z-group");var g=document.createElement("span");g.classList.add("apexcharts-tooltip-text-z-label"),d.appendChild(g);var u=document.createElement("span");u.classList.add("apexcharts-tooltip-text-z-value"),d.appendChild(u),o.appendChild(l),o.appendChild(d),r.appendChild(o),a.appendChild(r),i.push(r)}return i}},{key:"addSVGEvents",value:function(){var t=this.w,e=t.config.chart.type,i=this.getElTooltip(),a=!("bar"!==e&&"candlestick"!==e&&"rangeBar"!==e),s="area"===e||"line"===e||"scatter"===e||"bubble"===e||"radar"===e,r=t.globals.dom.Paper.node,n=this.getElGrid();n&&(this.seriesBound=n.getBoundingClientRect());var o,l=[],h=[],c={hoverArea:r,elGrid:n,tooltipEl:i,tooltipY:l,tooltipX:h,ttItems:this.ttItems};if(t.globals.axisCharts&&(s?o=t.globals.dom.baseEl.querySelectorAll(".apexcharts-series[data\\:longestSeries='true'] .apexcharts-marker"):a?o=t.globals.dom.baseEl.querySelectorAll(".apexcharts-series .apexcharts-bar-area, .apexcharts-series .apexcharts-candlestick-area, .apexcharts-series .apexcharts-rangebar-area"):"heatmap"===e&&(o=t.globals.dom.baseEl.querySelectorAll(".apexcharts-series .apexcharts-heatmap")),o&&o.length))for(var d=0;d<o.length;d++)l.push(o[d].getAttribute("cy")),h.push(o[d].getAttribute("cx"));if(t.globals.xyCharts&&!this.showOnIntersect||t.globals.comboCharts&&!this.showOnIntersect||a&&this.tooltipUtil.hasBars()&&this.tConfig.shared)this.addPathsEventListeners([r],c);else if(a&&!t.globals.comboCharts||s&&this.showOnIntersect)this.addDatapointEventsListeners(c);else if(!t.globals.axisCharts||"heatmap"===e){var g=t.globals.dom.baseEl.querySelectorAll(".apexcharts-series");this.addPathsEventListeners(g,c)}if(this.showOnIntersect){var u=t.globals.dom.baseEl.querySelectorAll(".apexcharts-line-series .apexcharts-marker, .apexcharts-area-series .apexcharts-marker");u.length>0&&this.addPathsEventListeners(u,c),this.tooltipUtil.hasBars()&&!this.tConfig.shared&&this.addDatapointEventsListeners(c)}}},{key:"drawFixedTooltipRect",value:function(){var t=this.w,e=this.getElTooltip(),i=e.getBoundingClientRect(),a=i.width+10,s=i.height+10,r=this.tConfig.fixed.offsetX,n=this.tConfig.fixed.offsetY,o=this.tConfig.fixed.position.toLowerCase();return o.indexOf("right")>-1&&(r=r+t.globals.svgWidth-a+10),o.indexOf("bottom")>-1&&(n=n+t.globals.svgHeight-s-10),e.style.left=r+"px",e.style.top=n+"px",{x:r,y:n,ttWidth:a,ttHeight:s}}},{key:"addDatapointEventsListeners",value:function(t){var e=this.w.globals.dom.baseEl.querySelectorAll(".apexcharts-series-markers .apexcharts-marker, .apexcharts-bar-area, .apexcharts-candlestick-area, .apexcharts-rangebar-area");this.addPathsEventListeners(e,t)}},{key:"addPathsEventListeners",value:function(t,e){for(var i=this,a=function(a){var s={paths:t[a],tooltipEl:e.tooltipEl,tooltipY:e.tooltipY,tooltipX:e.tooltipX,elGrid:e.elGrid,hoverArea:e.hoverArea,ttItems:e.ttItems};["mousemove","mouseup","touchmove","mouseout","touchend"].map((function(e){return t[a].addEventListener(e,i.seriesHover.bind(i,s),{capture:!1,passive:!0})}))},s=0;s<t.length;s++)a(s)}},{key:"seriesHover",value:function(t,e){var i=this,a=[],s=this.w;s.config.chart.group&&(a=this.ctx.getGroupedCharts()),s.globals.axisCharts&&(s.globals.minX===-1/0&&s.globals.maxX===1/0||0===s.globals.dataPoints)||(a.length?a.forEach((function(a){var s=i.getElTooltip(a),r={paths:t.paths,tooltipEl:s,tooltipY:t.tooltipY,tooltipX:t.tooltipX,elGrid:t.elGrid,hoverArea:t.hoverArea,ttItems:a.w.globals.tooltip.ttItems};a.w.globals.minX===i.w.globals.minX&&a.w.globals.maxX===i.w.globals.maxX&&a.w.globals.tooltip.seriesHoverByContext({chartCtx:a,ttCtx:a.w.globals.tooltip,opt:r,e:e})})):this.seriesHoverByContext({chartCtx:this.ctx,ttCtx:this.w.globals.tooltip,opt:t,e:e}))}},{key:"seriesHoverByContext",value:function(t){var e=t.chartCtx,i=t.ttCtx,a=t.opt,s=t.e,r=e.w,n=this.getElTooltip();(i.tooltipRect={x:0,y:0,ttWidth:n.getBoundingClientRect().width,ttHeight:n.getBoundingClientRect().height},i.e=s,!i.tooltipUtil.hasBars()||r.globals.comboCharts||i.isBarShared)||this.tConfig.onDatasetHover.highlightDataSeries&&new M(e).toggleSeriesOnHover(s,s.target.parentNode);i.fixedTooltip&&i.drawFixedTooltipRect(),r.globals.axisCharts?i.axisChartsTooltips({e:s,opt:a,tooltipRect:i.tooltipRect}):i.nonAxisChartsTooltips({e:s,opt:a,tooltipRect:i.tooltipRect})}},{key:"axisChartsTooltips",value:function(t){var e,i,a=t.e,s=t.opt,r=this.w,n=s.elGrid.getBoundingClientRect(),o="touchmove"===a.type?a.touches[0].clientX:a.clientX,l="touchmove"===a.type?a.touches[0].clientY:a.clientY;if(this.clientY=l,this.clientX=o,r.globals.capturedSeriesIndex=-1,r.globals.capturedDataPointIndex=-1,l<n.top||l>n.top+n.height)this.handleMouseOut(s);else{if(Array.isArray(this.tConfig.enabledOnSeries)&&!r.config.tooltip.shared){var h=parseInt(s.paths.getAttribute("index"),10);if(this.tConfig.enabledOnSeries.indexOf(h)<0)return void this.handleMouseOut(s)}var c=this.getElTooltip(),d=this.getElXCrosshairs(),g=r.globals.xyCharts||"bar"===r.config.chart.type&&!r.globals.isBarHorizontal&&this.tooltipUtil.hasBars()&&this.tConfig.shared||r.globals.comboCharts&&this.tooltipUtil.hasBars();if(r.globals.isBarHorizontal&&this.tooltipUtil.hasBars()&&(g=!1),"mousemove"===a.type||"touchmove"===a.type||"mouseup"===a.type){if(null!==d&&d.classList.add("apexcharts-active"),null!==this.ycrosshairs&&this.blyaxisTooltip&&this.ycrosshairs.classList.add("apexcharts-active"),g&&!this.showOnIntersect)this.handleStickyTooltip(a,o,l,s);else if("heatmap"===r.config.chart.type){var u=this.intersect.handleHeatTooltip({e:a,opt:s,x:e,y:i});e=u.x,i=u.y,c.style.left=e+"px",c.style.top=i+"px"}else this.tooltipUtil.hasBars()&&this.intersect.handleBarTooltip({e:a,opt:s}),this.tooltipUtil.hasMarkers()&&this.intersect.handleMarkerTooltip({e:a,opt:s,x:e,y:i});if(this.blyaxisTooltip)for(var f=0;f<r.config.yaxis.length;f++)this.axesTooltip.drawYaxisTooltipText(f,l,this.xyRatios);s.tooltipEl.classList.add("apexcharts-active")}else"mouseout"!==a.type&&"touchend"!==a.type||this.handleMouseOut(s)}}},{key:"nonAxisChartsTooltips",value:function(t){var e=t.e,i=t.opt,a=t.tooltipRect,s=this.w,r=i.paths.getAttribute("rel"),n=this.getElTooltip(),o=s.globals.dom.elWrap.getBoundingClientRect();if("mousemove"===e.type||"touchmove"===e.type){n.classList.add("apexcharts-active"),this.tooltipLabels.drawSeriesTexts({ttItems:i.ttItems,i:parseInt(r,10)-1,shared:!1});var l=s.globals.clientX-o.left-a.ttWidth/2,h=s.globals.clientY-o.top-a.ttHeight-10;n.style.left=l+"px",n.style.top=h+"px"}else"mouseout"!==e.type&&"touchend"!==e.type||n.classList.remove("apexcharts-active")}},{key:"handleStickyTooltip",value:function(t,e,i,a){var s=this.w,r=this.tooltipUtil.getNearestValues({context:this,hoverArea:a.hoverArea,elGrid:a.elGrid,clientX:e,clientY:i}),n=r.j,o=r.capturedSeries;r.hoverX<0||r.hoverX>s.globals.gridWidth?this.handleMouseOut(a):null!==o?this.handleStickyCapturedSeries(t,o,a,n):this.tooltipUtil.isXoverlap(n)&&this.create(t,this,0,n,a.ttItems)}},{key:"handleStickyCapturedSeries",value:function(t,e,i,a){var s=this.w;null===s.globals.series[e][a]?this.handleMouseOut(i):void 0!==s.globals.series[e][a]?this.tConfig.shared&&this.tooltipUtil.isXoverlap(a)&&this.tooltipUtil.isInitialSeriesSameLen()?this.create(t,this,e,a,i.ttItems):this.create(t,this,e,a,i.ttItems,!1):this.tooltipUtil.isXoverlap(a)&&this.create(t,this,0,a,i.ttItems)}},{key:"deactivateHoverFilter",value:function(){for(var t=this.w,e=new p(this.ctx),i=t.globals.dom.Paper.select(".apexcharts-bar-area"),a=0;a<i.length;a++)e.pathMouseLeave(i[a])}},{key:"handleMouseOut",value:function(t){var e=this.w,i=this.getElXCrosshairs();if(t.tooltipEl.classList.remove("apexcharts-active"),this.deactivateHoverFilter(),"bubble"!==e.config.chart.type&&this.marker.resetPointsSize(),null!==i&&i.classList.remove("apexcharts-active"),null!==this.ycrosshairs&&this.ycrosshairs.classList.remove("apexcharts-active"),this.blxaxisTooltip&&this.xaxisTooltip.classList.remove("apexcharts-active"),this.blyaxisTooltip){null===this.yaxisTTEls&&(this.yaxisTTEls=e.globals.dom.baseEl.querySelectorAll(".apexcharts-yaxistooltip"));for(var a=0;a<this.yaxisTTEls.length;a++)this.yaxisTTEls[a].classList.remove("apexcharts-active")}e.config.legend.tooltipHoverFormatter&&this.legendLabels.forEach((function(t){var e=t.getAttribute("data:default-text");t.innerHTML=decodeURIComponent(e)}))}},{key:"markerClick",value:function(t,e,i){var a=this.w;"function"==typeof a.config.chart.events.markerClick&&a.config.chart.events.markerClick(t,this.ctx,{seriesIndex:e,dataPointIndex:i,w:a}),this.ctx.events.fireEvent("markerClick",[t,this.ctx,{seriesIndex:e,dataPointIndex:i,w:a}])}},{key:"create",value:function(t,e,i,a,s){var r=arguments.length>5&&void 0!==arguments[5]?arguments[5]:null,n=this.w,o=e;"mouseup"===t.type&&this.markerClick(t,i,a),null===r&&(r=this.tConfig.shared);var l=this.tooltipUtil.hasMarkers(),h=this.tooltipUtil.getElBars();if(n.config.legend.tooltipHoverFormatter){var c=n.config.legend.tooltipHoverFormatter,d=Array.from(this.legendLabels);d.forEach((function(t){var e=t.getAttribute("data:default-text");t.innerHTML=decodeURIComponent(e)}));for(var g=0;g<d.length;g++){var u=d[g],f=parseInt(u.getAttribute("i"),10),x=decodeURIComponent(u.getAttribute("data:default-text")),b=c(x,{seriesIndex:r?f:i,dataPointIndex:a,w:n});if(r)u.innerHTML=n.globals.collapsedSeriesIndices.indexOf(f)<0?b:x;else if(u.innerHTML=f===i?b:x,i===f)break}}if(r){if(o.tooltipLabels.drawSeriesTexts({ttItems:s,i:i,j:a,shared:!this.showOnIntersect&&this.tConfig.shared}),l&&(n.globals.markers.largestSize>0?o.marker.enlargePoints(a):o.tooltipPosition.moveDynamicPointsOnHover(a)),this.tooltipUtil.hasBars()&&(this.barSeriesHeight=this.tooltipUtil.getBarsHeight(h),this.barSeriesHeight>0)){var m=new p(this.ctx),v=n.globals.dom.Paper.select(".apexcharts-bar-area[j='".concat(a,"']"));this.deactivateHoverFilter(),this.tooltipPosition.moveStickyTooltipOverBars(a);for(var y=0;y<v.length;y++)m.pathMouseEnter(v[y])}}else o.tooltipLabels.drawSeriesTexts({shared:!1,ttItems:s,i:i,j:a}),this.tooltipUtil.hasBars()&&o.tooltipPosition.moveStickyTooltipOverBars(a),l&&o.tooltipPosition.moveMarkers(i,a)}}]),t}(),yt=function(t){function i(){return e(this,i),c(this,l(i).apply(this,arguments))}return o(i,t),a(i,[{key:"draw",value:function(t,e){var i=this,a=this.w;this.graphics=new p(this.ctx),this.bar=new E(this.ctx,this.xyRatios);var s=new m(this.ctx,a);t=s.getLogSeries(t),this.yRatio=s.getLogYRatios(this.yRatio),this.barHelpers.initVariables(t),"100%"===a.config.chart.stackType&&(t=a.globals.seriesPercent.slice()),this.series=t,this.totalItems=0,this.prevY=[],this.prevX=[],this.prevYF=[],this.prevXF=[],this.prevYVal=[],this.prevXVal=[],this.xArrj=[],this.xArrjF=[],this.xArrjVal=[],this.yArrj=[],this.yArrjF=[],this.yArrjVal=[];for(var r=0;r<t.length;r++)t[r].length>0&&(this.totalItems+=t[r].length);for(var o=this.graphics.group({class:"apexcharts-bar-series apexcharts-plot-series"}),l=0,h=0,c=function(s,r){var c=void 0,d=void 0,u=void 0,f=void 0,p=[],x=[],b=a.globals.comboCharts?e[s]:s;i.yRatio.length>1&&(i.yaxisIndex=b),i.isReversed=a.config.yaxis[i.yaxisIndex]&&a.config.yaxis[i.yaxisIndex].reversed;var m=i.graphics.group({class:"apexcharts-series",seriesName:g.escapeString(a.globals.seriesNames[b]),rel:s+1,"data:realIndex":b}),v=i.graphics.group({class:"apexcharts-datalabels","data:realIndex":b}),y=0,w=0,k=i.initialPositions(l,h,c,d,u,f);h=k.y,y=k.barHeight,d=k.yDivision,f=k.zeroW,l=k.x,w=k.barWidth,c=k.xDivision,u=k.zeroH,i.yArrj=[],i.yArrjF=[],i.yArrjVal=[],i.xArrj=[],i.xArrjF=[],i.xArrjVal=[],1===i.prevY.length&&i.prevY[0].every((function(t){return isNaN(t)}))&&(i.prevY[0]=i.prevY[0].map((function(t){return u})),i.prevYF[0]=i.prevYF[0].map((function(t){return 0})));for(var A=0;A<a.globals.dataPoints;A++){var S=i.barHelpers.getStrokeWidth(s,A,b),C={indexes:{i:s,j:A,realIndex:b,bc:r},strokeWidth:S,x:l,y:h,elSeries:m},L=null;i.isHorizontal?(L=i.drawStackedBarPaths(n({},C,{zeroW:f,barHeight:y,yDivision:d})),w=i.series[s][A]/i.invertedYRatio):(L=i.drawStackedColumnPaths(n({},C,{xDivision:c,barWidth:w,zeroH:u})),y=i.series[s][A]/i.yRatio[i.yaxisIndex]),h=L.y,l=L.x,p.push(l),x.push(h);var P=i.barHelpers.getPathFillColor(t,s,A,b);m=i.renderSeries({realIndex:b,pathFill:P,j:A,i:s,pathFrom:L.pathFrom,pathTo:L.pathTo,strokeWidth:S,elSeries:m,x:l,y:h,series:t,barHeight:y,barWidth:w,elDataLabelsWrap:v,type:"bar",visibleSeries:0})}a.globals.seriesXvalues[b]=p,a.globals.seriesYvalues[b]=x,i.prevY.push(i.yArrj),i.prevYF.push(i.yArrjF),i.prevYVal.push(i.yArrjVal),i.prevX.push(i.xArrj),i.prevXF.push(i.xArrjF),i.prevXVal.push(i.xArrjVal),o.add(m)},d=0,u=0;d<t.length;d++,u++)c(d,u);return o}},{key:"initialPositions",value:function(t,e,i,a,s,r){var n,o,l=this.w;return this.isHorizontal?(n=(n=a=l.globals.gridHeight/l.globals.dataPoints)*parseInt(l.config.plotOptions.bar.barHeight,10)/100,r=this.baseLineInvertedY+l.globals.padHorizontal+(this.isReversed?l.globals.gridWidth:0)-(this.isReversed?2*this.baseLineInvertedY:0),e=(a-n)/2):(o=i=l.globals.gridWidth/l.globals.dataPoints,o=l.globals.isXNumeric?(i=l.globals.minXDiff/this.xRatio)*parseInt(this.barOptions.columnWidth,10)/100:o*parseInt(l.config.plotOptions.bar.columnWidth,10)/100,s=this.baseLineY[this.yaxisIndex]+(this.isReversed?l.globals.gridHeight:0)-(this.isReversed?2*this.baseLineY[this.yaxisIndex]:0),t=l.globals.padHorizontal+(i-o)/2),{x:t,y:e,yDivision:a,xDivision:i,barHeight:n,barWidth:o,zeroH:s,zeroW:r}}},{key:"drawStackedBarPaths",value:function(t){for(var e,i=t.indexes,a=t.barHeight,s=t.strokeWidth,r=t.zeroW,n=t.x,o=t.y,l=t.yDivision,h=t.elSeries,c=this.w,d=o,g=i.i,u=i.j,f=i.bc,p=0,x=0;x<this.prevXF.length;x++)p+=this.prevXF[x][u];if(g>0){var b=r;this.prevXVal[g-1][u]<0?b=this.series[g][u]>=0?this.prevX[g-1][u]+p-2*(this.isReversed?p:0):this.prevX[g-1][u]:this.prevXVal[g-1][u]>=0&&(b=this.series[g][u]>=0?this.prevX[g-1][u]:this.prevX[g-1][u]-p+2*(this.isReversed?p:0)),e=b}else e=r;n=null===this.series[g][u]?e:e+this.series[g][u]/this.invertedYRatio-2*(this.isReversed?this.series[g][u]/this.invertedYRatio:0),this.xArrj.push(n),this.xArrjF.push(Math.abs(e-n)),this.xArrjVal.push(this.series[g][u]);var m=this.barHelpers.getBarpaths({barYPosition:d,barHeight:a,x1:e,x2:n,strokeWidth:s,series:this.series,realIndex:i.realIndex,i:g,j:u,w:c});return this.barHelpers.barBackground({bc:f,i:g,y1:d,y2:a,elSeries:h}),o+=l,{pathTo:m.pathTo,pathFrom:m.pathFrom,x:n,y:o}}},{key:"drawStackedColumnPaths",value:function(t){var e=t.indexes,i=t.x,a=t.y,s=t.xDivision,r=t.barWidth,n=t.zeroH,o=(t.strokeWidth,t.elSeries),l=this.w,h=e.i,c=e.j,d=e.bc;if(l.globals.isXNumeric){var g=l.globals.seriesX[h][c];g||(g=0),i=(g-l.globals.minX)/this.xRatio-r/2}for(var u,f=i,p=0,x=0;x<this.prevYF.length;x++)p+=isNaN(this.prevYF[x][c])?0:this.prevYF[x][c];if(h>0&&!l.globals.isXNumeric||h>0&&l.globals.isXNumeric&&l.globals.seriesX[h-1][c]===l.globals.seriesX[h][c]){var b,m,v=Math.min(this.yRatio.length+1,h+1);if(void 0!==this.prevY[h-1])for(var y=1;y<v;y++)if(!isNaN(this.prevY[h-y][c])){m=this.prevY[h-y][c];break}for(var w=1;w<v;w++){if(this.prevYVal[h-w][c]<0){b=this.series[h][c]>=0?m-p+2*(this.isReversed?p:0):m;break}if(this.prevYVal[h-w][c]>=0){b=this.series[h][c]>=0?m:m+p-2*(this.isReversed?p:0);break}}void 0===b&&(b=l.globals.gridHeight),u=this.prevYF[0].every((function(t){return 0===t}))&&this.prevYF.slice(1,h).every((function(t){return t.every((function(t){return isNaN(t)}))}))?l.globals.gridHeight-n:b}else u=l.globals.gridHeight-n;a=u-this.series[h][c]/this.yRatio[this.yaxisIndex]+2*(this.isReversed?this.series[h][c]/this.yRatio[this.yaxisIndex]:0),this.yArrj.push(a),this.yArrjF.push(Math.abs(u-a)),this.yArrjVal.push(this.series[h][c]);var k=this.barHelpers.getColumnPaths({barXPosition:f,barWidth:r,y1:u,y2:a,yRatio:this.yRatio[this.yaxisIndex],strokeWidth:this.strokeWidth,series:this.series,realIndex:e.realIndex,i:h,j:c,w:l});return this.barHelpers.barBackground({bc:d,i:h,x1:f,x2:r,elSeries:o}),i+=s,{pathTo:k.pathTo,pathFrom:k.pathFrom,x:l.globals.isXNumeric?i-s:i,y:a}}}]),i}(E),wt=function(t){function i(){return e(this,i),c(this,l(i).apply(this,arguments))}return o(i,t),a(i,[{key:"draw",value:function(t,e){var i=this.w,a=new p(this.ctx),s=new L(this.ctx);this.candlestickOptions=this.w.config.plotOptions.candlestick;var r=new m(this.ctx,i);t=r.getLogSeries(t),this.series=t,this.yRatio=r.getLogYRatios(this.yRatio),this.barHelpers.initVariables(t);for(var n=a.group({class:"apexcharts-candlestick-series apexcharts-plot-series"}),o=0;o<t.length;o++){var l,h,c=void 0,d=void 0,u=[],f=[],x=i.globals.comboCharts?e[o]:o,b=a.group({class:"apexcharts-series",seriesName:g.escapeString(i.globals.seriesNames[x]),rel:o+1,"data:realIndex":x});t[o].length>0&&(this.visibleI=this.visibleI+1);var v,y;this.yRatio.length>1&&(this.yaxisIndex=x);var w=this.barHelpers.initialPositions();d=w.y,v=w.barHeight,c=w.x,y=w.barWidth,l=w.xDivision,h=w.zeroH,f.push(c+y/2);for(var k=a.group({class:"apexcharts-datalabels","data:realIndex":x}),A=0;A<i.globals.dataPoints;A++){var S,C=this.barHelpers.getStrokeWidth(o,A,x),P=this.drawCandleStickPaths({indexes:{i:o,j:A,realIndex:x},x:c,y:d,xDivision:l,barWidth:y,zeroH:h,strokeWidth:C,elSeries:b});d=P.y,c=P.x,S=P.color,A>0&&f.push(c+y/2),u.push(d);var T=s.fillPath({seriesNumber:x,dataPointIndex:A,color:S,value:t[o][A]}),z=this.candlestickOptions.wick.useFillColor?S:void 0;this.renderSeries({realIndex:x,pathFill:T,lineFill:z,j:A,i:o,pathFrom:P.pathFrom,pathTo:P.pathTo,strokeWidth:C,elSeries:b,x:c,y:d,series:t,barHeight:v,barWidth:y,elDataLabelsWrap:k,visibleSeries:this.visibleI,type:"candlestick"})}i.globals.seriesXvalues[x]=f,i.globals.seriesYvalues[x]=u,n.add(b)}return n}},{key:"drawCandleStickPaths",value:function(t){var e=t.indexes,i=t.x,a=(t.y,t.xDivision),s=t.barWidth,r=t.zeroH,n=t.strokeWidth,o=this.w,l=new p(this.ctx),h=e.i,c=e.j,d=!0,g=o.config.plotOptions.candlestick.colors.upward,u=o.config.plotOptions.candlestick.colors.downward,f=this.yRatio[this.yaxisIndex],x=e.realIndex,b=this.getOHLCValue(x,c),m=r,v=r;b.o>b.c&&(d=!1);var y=Math.min(b.o,b.c),w=Math.max(b.o,b.c);o.globals.isXNumeric&&(i=(o.globals.seriesX[x][c]-o.globals.minX)/this.xRatio-s/2);var k=i+s*this.visibleI;void 0===this.series[h][c]||null===this.series[h][c]?y=r:(y=r-y/f,w=r-w/f,m=r-b.h/f,v=r-b.l/f);var A=l.move(k,r),S=l.move(k,y);return o.globals.previousPaths.length>0&&(S=this.getPreviousPath(x,c,!0)),A=l.move(k,w)+l.line(k+s/2,w)+l.line(k+s/2,m)+l.line(k+s/2,w)+l.line(k+s,w)+l.line(k+s,y)+l.line(k+s/2,y)+l.line(k+s/2,v)+l.line(k+s/2,y)+l.line(k,y)+l.line(k,w-n/2),S+=l.move(k,y),o.globals.isXNumeric||(i+=a),{pathTo:A,pathFrom:S,x:i,y:w,barXPosition:k,color:d?g:u}}},{key:"getOHLCValue",value:function(t,e){var i=this.w;return{o:i.globals.seriesCandleO[t][e],h:i.globals.seriesCandleH[t][e],l:i.globals.seriesCandleL[t][e],c:i.globals.seriesCandleC[t][e]}}}]),i}(E),kt=function(){function t(i,a){e(this,t),this.ctx=i,this.w=i.w,this.xRatio=a.xRatio,this.yRatio=a.yRatio,this.negRange=!1,this.dynamicAnim=this.w.config.chart.animations.dynamicAnimation,this.rectRadius=this.w.config.plotOptions.heatmap.radius,this.strokeWidth=this.w.config.stroke.show?this.w.config.stroke.width:0}return a(t,[{key:"draw",value:function(t){var e=this.w,i=new p(this.ctx),a=i.group({class:"apexcharts-heatmap"});a.attr("clip-path","url(#gridRectMask".concat(e.globals.cuid,")"));var s=e.globals.gridWidth/e.globals.dataPoints,r=e.globals.gridHeight/e.globals.series.length,n=0,o=!1;this.checkColorRange();var l=t.slice();e.config.yaxis[0].reversed&&(o=!0,l.reverse());for(var h=o?0:l.length-1;o?h<l.length:h>=0;o?h++:h--){var c=i.group({class:"apexcharts-series apexcharts-heatmap-series",seriesName:g.escapeString(e.globals.seriesNames[h]),rel:h+1,"data:realIndex":h});if(e.config.chart.dropShadow.enabled){var d=e.config.chart.dropShadow;new u(this.ctx).dropShadow(c,d,h)}for(var f=0,x=0;x<l[h].length;x++){var b=1,m=e.config.plotOptions.heatmap.shadeIntensity,v=this.determineHeatColor(h,x);b=e.globals.hasNegs||this.negRange?e.config.plotOptions.heatmap.reverseNegativeShade?v.percent<0?v.percent/100*(1.25*m):(1-v.percent/100)*(1.25*m):v.percent<=0?1-(1+v.percent/100)*m:(1-v.percent/100)*m:1-v.percent/100;var y=v.color,w=new g;if(e.config.plotOptions.heatmap.enableShades&&(b<0&&(b=0),y=g.hexToRgba(w.shadeColor(b,v.color),e.config.fill.opacity)),"image"===e.config.fill.type)y=new L(this.ctx).fillPath({seriesNumber:h,dataPointIndex:x,opacity:e.globals.hasNegs?v.percent<0?1-(1+v.percent/100):m+v.percent/100:v.percent/100,patternID:g.randomId(),width:e.config.fill.image.width?e.config.fill.image.width:s,height:e.config.fill.image.height?e.config.fill.image.height:r});var k=this.rectRadius,A=i.drawRect(f,n,s,r,k);if(A.attr({cx:f,cy:n}),A.node.classList.add("apexcharts-heatmap-rect"),c.add(A),A.attr({fill:y,i:h,index:h,j:x,val:l[h][x],"stroke-width":this.strokeWidth,stroke:e.config.plotOptions.heatmap.useFillColorAsStroke?y:e.globals.stroke.colors[0],color:y}),A.node.addEventListener("mouseenter",i.pathMouseEnter.bind(this,A)),A.node.addEventListener("mouseleave",i.pathMouseLeave.bind(this,A)),A.node.addEventListener("mousedown",i.pathMouseDown.bind(this,A)),e.config.chart.animations.enabled&&!e.globals.dataChanged){var S=1;e.globals.resized||(S=e.config.chart.animations.speed),this.animateHeatMap(A,f,n,s,r,S)}if(e.globals.dataChanged){var C=1;if(this.dynamicAnim.enabled&&e.globals.shouldAnimate){C=this.dynamicAnim.speed;var P=e.globals.previousPaths[h]&&e.globals.previousPaths[h][x]&&e.globals.previousPaths[h][x].color;P||(P="rgba(255, 255, 255, 0)"),this.animateHeatColor(A,g.isColorHex(P)?P:g.rgb2hex(P),g.isColorHex(y)?y:g.rgb2hex(y),C)}}var T=this.calculateHeatmapDataLabels({x:f,y:n,i:h,j:x,heatColorProps:v,series:l,rectHeight:r,rectWidth:s});null!==T&&c.add(T),f+=s}n+=r,a.add(c)}var z=e.globals.yAxisScale[0].result.slice();e.config.yaxis[0].reversed?z.unshift(""):z.push(""),e.globals.yAxisScale[0].result=z;var I=e.globals.gridHeight/e.globals.series.length;return e.config.yaxis[0].labels.offsetY=-I/2,a}},{key:"checkColorRange",value:function(){var t=this,e=this.w.config.plotOptions.heatmap;e.colorScale.ranges.length>0&&e.colorScale.ranges.map((function(e,i){e.from<=0&&(t.negRange=!0)}))}},{key:"determineHeatColor",value:function(t,e){var i=this.w,a=i.globals.series[t][e],s=i.config.plotOptions.heatmap,r=s.colorScale.inverse?e:t,n=i.globals.colors[r],o=null,l=Math.min.apply(Math,d(i.globals.series[t])),h=Math.max.apply(Math,d(i.globals.series[t]));s.distributed||(l=i.globals.minY,h=i.globals.maxY),void 0!==s.colorScale.min&&(l=s.colorScale.min<i.globals.minY?s.colorScale.min:i.globals.minY,h=s.colorScale.max>i.globals.maxY?s.colorScale.max:i.globals.maxY);var c=Math.abs(h)+Math.abs(l),g=100*a/(0===c?c-1e-6:c);s.colorScale.ranges.length>0&&s.colorScale.ranges.map((function(t,e){if(a>=t.from&&a<=t.to){n=t.color,o=t.foreColor?t.foreColor:null,l=t.from,h=t.to;var i=Math.abs(h)+Math.abs(l);g=100*a/(0===i?i-1e-6:i)}}));return{color:n,foreColor:o,percent:g}}},{key:"calculateHeatmapDataLabels",value:function(t){var e=t.x,i=t.y,a=t.i,s=t.j,r=t.heatColorProps,n=(t.series,t.rectHeight),o=t.rectWidth,l=this.w,h=l.config.dataLabels,c=new p(this.ctx),d=new z(this.ctx),g=h.formatter,u=null;if(h.enabled){u=c.group({class:"apexcharts-data-labels"});var f=h.offsetX,x=h.offsetY,b=e+o/2+f,m=i+n/2+parseFloat(h.style.fontSize)/3+x,v=g(l.globals.series[a][s],{seriesIndex:a,dataPointIndex:s,w:l});d.plotDataLabelsText({x:b,y:m,text:v,i:a,j:s,color:r.foreColor,parent:u,dataLabelsConfig:h})}return u}},{key:"animateHeatMap",value:function(t,e,i,a,s,r){var n=new f(this.ctx);n.animateRect(t,{x:e+a/2,y:i+s/2,width:0,height:0},{x:e,y:i,width:a,height:s},r,(function(){n.animationCompleted(t)}))}},{key:"animateHeatColor",value:function(t,e,i,a){t.attr({fill:e}).animate(a).attr({fill:i})}}]),t}(),At=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.chartType=this.w.config.chart.type,this.initialAnim=this.w.config.chart.animations.enabled,this.dynamicAnim=this.initialAnim&&this.w.config.chart.animations.dynamicAnimation.enabled,this.animDur=0;var a=this.w;this.graphics=new p(this.ctx),this.lineColorArr=void 0!==a.globals.stroke.colors?a.globals.stroke.colors:a.globals.colors,this.defaultSize=a.globals.svgHeight<a.globals.svgWidth?a.globals.gridHeight+1.5*a.globals.goldenPadding:a.globals.gridWidth,this.maxValue=this.w.globals.maxY,this.minValue=this.w.globals.minY,this.polygons=a.config.plotOptions.radar.polygons;var s=a.globals.labels.slice().sort((function(t,e){return e.length-t.length}))[0],r=this.graphics.getTextRects(s,a.config.xaxis.labels.style.fontSize);this.strokeWidth=a.config.stroke.show?a.config.stroke.width:0,this.size=this.defaultSize/2.1-this.strokeWidth-a.config.chart.dropShadow.blur,a.config.xaxis.labels.show&&(this.size=this.size-r.width/1.75),void 0!==a.config.plotOptions.radar.size&&(this.size=a.config.plotOptions.radar.size),this.dataRadiusOfPercent=[],this.dataRadius=[],this.angleArr=[],this.yaxisLabelsTextsPos=[]}return a(t,[{key:"draw",value:function(t){var e=this,i=this.w,a=new L(this.ctx),s=[],r=new z(this.ctx);t.length&&(this.dataPointsLen=t[i.globals.maxValsInArrayIndex].length),this.disAngle=2*Math.PI/this.dataPointsLen;var o=i.globals.gridWidth/2,l=i.globals.gridHeight/2,h=o+i.config.plotOptions.radar.offsetX,c=l+i.config.plotOptions.radar.offsetY,d=this.graphics.group({class:"apexcharts-radar-series apexcharts-plot-series",transform:"translate(".concat(h||0,", ").concat(c||0,")")}),f=[],p=null,x=null;if(this.yaxisLabels=this.graphics.group({class:"apexcharts-yaxis"}),t.forEach((function(t,o){var l=t.length===i.globals.dataPoints,h=e.graphics.group().attr({class:"apexcharts-series","data:longestSeries":l,seriesName:g.escapeString(i.globals.seriesNames[o]),rel:o+1,"data:realIndex":o});e.dataRadiusOfPercent[o]=[],e.dataRadius[o]=[],e.angleArr[o]=[],t.forEach((function(t,i){var a=Math.abs(e.maxValue-e.minValue);t+=Math.abs(e.minValue),e.dataRadiusOfPercent[o][i]=t/a,e.dataRadius[o][i]=e.dataRadiusOfPercent[o][i]*e.size,e.angleArr[o][i]=i*e.disAngle})),f=e.getDataPointsPos(e.dataRadius[o],e.angleArr[o]);var c=e.createPaths(f,{x:0,y:0});p=e.graphics.group({class:"apexcharts-series-markers-wrap apexcharts-element-hidden"}),x=e.graphics.group({class:"apexcharts-datalabels","data:realIndex":o}),i.globals.delayedElements.push({el:p.node,index:o});var d={i:o,realIndex:o,animationDelay:o,initialSpeed:i.config.chart.animations.speed,dataChangeSpeed:i.config.chart.animations.dynamicAnimation.speed,className:"apexcharts-radar",shouldClipToGrid:!1,bindEventsOnPaths:!1,stroke:i.globals.stroke.colors[o],strokeLineCap:i.config.stroke.lineCap},b=null;i.globals.previousPaths.length>0&&(b=e.getPreviousPath(o));for(var m=0;m<c.linePathsTo.length;m++){var v=e.graphics.renderPaths(n({},d,{pathFrom:null===b?c.linePathsFrom[m]:b,pathTo:c.linePathsTo[m],strokeWidth:Array.isArray(e.strokeWidth)?e.strokeWidth[o]:e.strokeWidth,fill:"none",drawShadow:!1}));h.add(v);var y=a.fillPath({seriesNumber:o}),w=e.graphics.renderPaths(n({},d,{pathFrom:null===b?c.areaPathsFrom[m]:b,pathTo:c.areaPathsTo[m],strokeWidth:0,fill:y,drawShadow:!1}));if(i.config.chart.dropShadow.enabled){var k=new u(e.ctx),A=i.config.chart.dropShadow;k.dropShadow(w,Object.assign({},A,{noUserSpaceOnUse:!0}),o)}h.add(w)}t.forEach((function(t,a){var s=new P(e.ctx).getMarkerConfig("apexcharts-marker",o,a),l=e.graphics.drawMarker(f[a].x,f[a].y,s);l.attr("rel",a),l.attr("j",a),l.attr("index",o),l.node.setAttribute("default-marker-size",s.pSize);var c=e.graphics.group({class:"apexcharts-series-markers"});c&&c.add(l),p.add(c),h.add(p);var d=i.config.dataLabels;if(d.enabled){var g=d.formatter(i.globals.series[o][a],{seriesIndex:o,dataPointIndex:a,w:i});r.plotDataLabelsText({x:f[a].x,y:f[a].y,text:g,textAnchor:"middle",i:o,j:o,parent:x,offsetCorrection:!1,dataLabelsConfig:n({},d)})}h.add(x)})),s.push(h)})),this.drawPolygons({parent:d}),i.config.xaxis.labels.show){var b=this.drawXAxisTexts();d.add(b)}return d.add(this.yaxisLabels),s.forEach((function(t){d.add(t)})),d}},{key:"drawPolygons",value:function(t){for(var e=this,i=this.w,a=t.parent,s=new ot(this.ctx),r=i.globals.yAxisScale[0].result.reverse(),n=r.length,o=[],l=this.size/(n-1),h=0;h<n;h++)o[h]=l*h;o.reverse();var c=[],d=[];o.forEach((function(t,i){var a=e.getPolygonPos(t),s="";a.forEach((function(t,a){if(0===i){var r=e.graphics.drawLine(t.x,t.y,0,0,Array.isArray(e.polygons.connectorColors)?e.polygons.connectorColors[a]:e.polygons.connectorColors);d.push(r)}0===a&&e.yaxisLabelsTextsPos.push({x:t.x,y:t.y}),s+=t.x+","+t.y+" "})),c.push(s)})),c.forEach((function(t,s){var r=e.polygons.strokeColors,n=e.polygons.strokeWidth,o=e.graphics.drawPolygon(t,Array.isArray(r)?r[s]:r,Array.isArray(n)?n[s]:n,i.globals.radarPolygons.fill.colors[s]);a.add(o)})),d.forEach((function(t){a.add(t)})),i.config.yaxis[0].show&&this.yaxisLabelsTextsPos.forEach((function(t,i){var a=s.drawYAxisTexts(t.x,t.y,i,r[i]);e.yaxisLabels.add(a)}))}},{key:"drawXAxisTexts",value:function(){var t=this,e=this.w,i=e.config.xaxis.labels,a=this.graphics.group({class:"apexcharts-xaxis"}),s=this.getPolygonPos(this.size);return e.globals.labels.forEach((function(r,o){var l=e.config.xaxis.labels.formatter,h=new z(t.ctx);if(s[o]){var c=t.getTextPos(s[o],t.size),d=l(r,{seriesIndex:-1,dataPointIndex:o,w:e});h.plotDataLabelsText({x:c.newX,y:c.newY,text:d,textAnchor:c.textAnchor,i:o,j:o,parent:a,color:i.style.colors[o]?i.style.colors[o]:"#a8a8a8",dataLabelsConfig:n({textAnchor:c.textAnchor,dropShadow:{enabled:!1}},i),offsetCorrection:!1})}})),a}},{key:"createPaths",value:function(t,e){var i=this,a=[],s=[],r=[],n=[];if(t.length){s=[this.graphics.move(e.x,e.y)],n=[this.graphics.move(e.x,e.y)];var o=this.graphics.move(t[0].x,t[0].y),l=this.graphics.move(t[0].x,t[0].y);t.forEach((function(e,a){o+=i.graphics.line(e.x,e.y),l+=i.graphics.line(e.x,e.y),a===t.length-1&&(o+="Z",l+="Z")})),a.push(o),r.push(l)}return{linePathsFrom:s,linePathsTo:a,areaPathsFrom:n,areaPathsTo:r}}},{key:"getTextPos",value:function(t,e){var i="middle",a=t.x,s=t.y;return Math.abs(t.x)>=10?t.x>0?(i="start",a+=10):t.x<0&&(i="end",a-=10):i="middle",Math.abs(t.y)>=e-10&&(t.y<0?s-=10:t.y>0&&(s+=10)),{textAnchor:i,newX:a,newY:s}}},{key:"getPreviousPath",value:function(t){for(var e=this.w,i=null,a=0;a<e.globals.previousPaths.length;a++){var s=e.globals.previousPaths[a];s.paths.length>0&&parseInt(s.realIndex,10)===parseInt(t,10)&&void 0!==e.globals.previousPaths[a].paths[0]&&(i=e.globals.previousPaths[a].paths[0].d)}return i}},{key:"getDataPointsPos",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.dataPointsLen;t=t||[],e=e||[];for(var a=[],s=0;s<i;s++){var r={};r.x=t[s]*Math.sin(e[s]),r.y=-t[s]*Math.cos(e[s]),a.push(r)}return a}},{key:"getPolygonPos",value:function(t){for(var e=[],i=2*Math.PI/this.dataPointsLen,a=0;a<this.dataPointsLen;a++){var s={};s.x=t*Math.sin(a*i),s.y=-t*Math.cos(a*i),e.push(s)}return e}}]),t}(),St=function(t){function i(t){var a;e(this,i),(a=c(this,l(i).call(this,t))).ctx=t,a.w=t.w,a.animBeginArr=[0],a.animDur=0;var s=a.w;return a.startAngle=s.config.plotOptions.radialBar.startAngle,a.endAngle=s.config.plotOptions.radialBar.endAngle,a.totalAngle=Math.abs(s.config.plotOptions.radialBar.endAngle-s.config.plotOptions.radialBar.startAngle),a.trackStartAngle=s.config.plotOptions.radialBar.track.startAngle,a.trackEndAngle=s.config.plotOptions.radialBar.track.endAngle,a.radialDataLabels=s.config.plotOptions.radialBar.dataLabels,a.trackStartAngle||(a.trackStartAngle=a.startAngle),a.trackEndAngle||(a.trackEndAngle=a.endAngle),360===a.endAngle&&(a.endAngle=359.99),a.fullAngle=360-s.config.plotOptions.radialBar.endAngle-s.config.plotOptions.radialBar.startAngle,a.margin=parseInt(s.config.plotOptions.radialBar.track.margin,10),a}return o(i,t),a(i,[{key:"draw",value:function(t){var e=this.w,i=new p(this.ctx),a=i.group({class:"apexcharts-radialbar"});if(e.globals.noData)return a;var s=i.group(),r=this.defaultSize/2,n=e.globals.gridWidth/2,o=this.defaultSize/2.05;e.config.chart.sparkline.enabled||(o=o-e.config.stroke.width-e.config.chart.dropShadow.blur);var l=e.globals.fill.colors;if(e.config.plotOptions.radialBar.track.show){var h=this.drawTracks({size:o,centerX:n,centerY:r,colorArr:l,series:t});s.add(h)}var c=this.drawArcs({size:o,centerX:n,centerY:r,colorArr:l,series:t}),d=360;e.config.plotOptions.radialBar.startAngle<0&&(d=this.totalAngle);var g=(360-d)/360;if(e.globals.radialSize=o-o*g,this.radialDataLabels.value.show){var u=Math.max(this.radialDataLabels.value.offsetY,this.radialDataLabels.name.offsetY);e.globals.radialSize+=u*g}return s.add(c.g),"front"===e.config.plotOptions.radialBar.hollow.position&&(c.g.add(c.elHollow),c.dataLabels&&c.g.add(c.dataLabels)),a.add(s),a}},{key:"drawTracks",value:function(t){var e=this.w,i=new p(this.ctx),a=i.group({class:"apexcharts-tracks"}),s=new u(this.ctx),r=new L(this.ctx),n=this.getStrokeWidth(t);t.size=t.size-n/2;for(var o=0;o<t.series.length;o++){var l=i.group({class:"apexcharts-radialbar-track apexcharts-track"});a.add(l),l.attr({rel:o+1}),t.size=t.size-n-this.margin;var h=e.config.plotOptions.radialBar.track,c=r.fillPath({seriesNumber:0,size:t.size,fillColors:Array.isArray(h.background)?h.background[o]:h.background,solid:!0}),d=this.trackStartAngle,g=this.trackEndAngle;Math.abs(g)+Math.abs(d)>=360&&(g=360-Math.abs(this.startAngle)-.1);var f=i.drawPath({d:"",stroke:c,strokeWidth:n*parseInt(h.strokeWidth,10)/100,fill:"none",strokeOpacity:h.opacity,classes:"apexcharts-radialbar-area"});if(h.dropShadow.enabled){var x=h.dropShadow;s.dropShadow(f,x)}l.add(f),f.attr("id","apexcharts-radialbarTrack-"+o),this.animatePaths(f,{centerX:t.centerX,centerY:t.centerY,endAngle:g,startAngle:d,size:t.size,i:o,totalItems:2,animBeginArr:0,dur:0,isTrack:!0,easing:e.globals.easing})}return a}},{key:"drawArcs",value:function(t){var e=this.w,i=new p(this.ctx),a=new L(this.ctx),s=new u(this.ctx),r=i.group(),n=this.getStrokeWidth(t);t.size=t.size-n/2;var o=e.config.plotOptions.radialBar.hollow.background,l=t.size-n*t.series.length-this.margin*t.series.length-n*parseInt(e.config.plotOptions.radialBar.track.strokeWidth,10)/100/2,h=l-e.config.plotOptions.radialBar.hollow.margin;void 0!==e.config.plotOptions.radialBar.hollow.image&&(o=this.drawHollowImage(t,r,l,o));var c=this.drawHollow({size:h,centerX:t.centerX,centerY:t.centerY,fill:o||"transparent"});if(e.config.plotOptions.radialBar.hollow.dropShadow.enabled){var d=e.config.plotOptions.radialBar.hollow.dropShadow;s.dropShadow(c,d)}var f=1;!this.radialDataLabels.total.show&&e.globals.series.length>1&&(f=0);var x=null;this.radialDataLabels.show&&(x=this.renderInnerDataLabels(this.radialDataLabels,{hollowSize:l,centerX:t.centerX,centerY:t.centerY,opacity:f})),"back"===e.config.plotOptions.radialBar.hollow.position&&(r.add(c),x&&r.add(x));var b=!1;e.config.plotOptions.radialBar.inverseOrder&&(b=!0);for(var m=b?t.series.length-1:0;b?m>=0:m<t.series.length;b?m--:m++){var v=i.group({class:"apexcharts-series apexcharts-radial-series",seriesName:g.escapeString(e.globals.seriesNames[m])});r.add(v),v.attr({rel:m+1,"data:realIndex":m}),this.ctx.series.addCollapsedClassToSeries(v,m),t.size=t.size-n-this.margin;var y=a.fillPath({seriesNumber:m,size:t.size,value:t.series[m]}),w=this.startAngle,k=void 0,A=g.negToZero(t.series[m]>100?100:t.series[m])/100,S=Math.round(this.totalAngle*A)+this.startAngle,C=void 0;e.globals.dataChanged&&(k=this.startAngle,C=Math.round(this.totalAngle*g.negToZero(e.globals.previousPaths[m])/100)+k),Math.abs(S)+Math.abs(w)>=360&&(S-=.01),Math.abs(C)+Math.abs(k)>=360&&(C-=.01);var P=S-w,T=Array.isArray(e.config.stroke.dashArray)?e.config.stroke.dashArray[m]:e.config.stroke.dashArray,z=i.drawPath({d:"",stroke:y,strokeWidth:n,fill:"none",fillOpacity:e.config.fill.opacity,classes:"apexcharts-radialbar-area apexcharts-radialbar-slice-"+m,strokeDashArray:T});if(p.setAttrs(z.node,{"data:angle":P,"data:value":t.series[m]}),e.config.chart.dropShadow.enabled){var I=e.config.chart.dropShadow;s.dropShadow(z,I,m)}this.addListeners(z,this.radialDataLabels),v.add(z),z.attr({index:0,j:m});var M=0;!this.initialAnim||e.globals.resized||e.globals.dataChanged||(M=(S-w)/360*e.config.chart.animations.speed,this.animDur=M/(1.2*t.series.length)+this.animDur,this.animBeginArr.push(this.animDur)),e.globals.dataChanged&&(M=(S-w)/360*e.config.chart.animations.dynamicAnimation.speed,this.animDur=M/(1.2*t.series.length)+this.animDur,this.animBeginArr.push(this.animDur)),this.animatePaths(z,{centerX:t.centerX,centerY:t.centerY,endAngle:S,startAngle:w,prevEndAngle:C,prevStartAngle:k,size:t.size,i:m,totalItems:2,animBeginArr:this.animBeginArr,dur:M,shouldSetPrevPaths:!0,easing:e.globals.easing})}return{g:r,elHollow:c,dataLabels:x}}},{key:"drawHollow",value:function(t){var e=new p(this.ctx).drawCircle(2*t.size);return e.attr({class:"apexcharts-radialbar-hollow",cx:t.centerX,cy:t.centerY,r:t.size,fill:t.fill}),e}},{key:"drawHollowImage",value:function(t,e,i,a){var s=this.w,r=new L(this.ctx),n=g.randomId(),o=s.config.plotOptions.radialBar.hollow.image;if(s.config.plotOptions.radialBar.hollow.imageClipped)r.clippedImgArea({width:i,height:i,image:o,patternID:"pattern".concat(s.globals.cuid).concat(n)}),a="url(#pattern".concat(s.globals.cuid).concat(n,")");else{var l=s.config.plotOptions.radialBar.hollow.imageWidth,h=s.config.plotOptions.radialBar.hollow.imageHeight;if(void 0===l&&void 0===h){var c=s.globals.dom.Paper.image(o).loaded((function(e){this.move(t.centerX-e.width/2+s.config.plotOptions.radialBar.hollow.imageOffsetX,t.centerY-e.height/2+s.config.plotOptions.radialBar.hollow.imageOffsetY)}));e.add(c)}else{var d=s.globals.dom.Paper.image(o).loaded((function(e){this.move(t.centerX-l/2+s.config.plotOptions.radialBar.hollow.imageOffsetX,t.centerY-h/2+s.config.plotOptions.radialBar.hollow.imageOffsetY),this.size(l,h)}));e.add(d)}}return a}},{key:"getStrokeWidth",value:function(t){var e=this.w;return t.size*(100-parseInt(e.config.plotOptions.radialBar.hollow.size,10))/100/(t.series.length+1)-this.margin}}]),i}(lt),Ct=function(){function t(i){e(this,t),this.w=i.w,this.lineCtx=i}return a(t,[{key:"sameValueSeriesFix",value:function(t,e){var i=this.w;if("line"===i.config.chart.type&&("gradient"===i.config.fill.type||"gradient"===i.config.fill.type[t])&&new m(this.lineCtx.ctx,i).seriesHaveSameValues(t)){var a=e[t].slice();a[a.length-1]=a[a.length-1]+1e-6,e[t]=a}return e}},{key:"calculatePoints",value:function(t){var e=t.series,i=t.realIndex,a=t.x,s=t.y,r=t.i,n=t.j,o=t.prevY,l=this.w,h=[],c=[];if(0===n){var d=this.lineCtx.categoryAxisCorrection+l.config.markers.offsetX;l.globals.isXNumeric&&(d=(l.globals.seriesX[i][0]-l.globals.minX)/this.lineCtx.xRatio+l.config.markers.offsetX),h.push(d),c.push(g.isNumber(e[r][0])?o+l.config.markers.offsetY:null),h.push(a+l.config.markers.offsetX),c.push(g.isNumber(e[r][n+1])?s+l.config.markers.offsetY:null)}else h.push(a+l.config.markers.offsetX),c.push(g.isNumber(e[r][n+1])?s+l.config.markers.offsetY:null);return{x:h,y:c}}},{key:"checkPreviousPaths",value:function(t){for(var e=t.pathFromLine,i=t.pathFromArea,a=t.realIndex,s=this.w,r=0;r<s.globals.previousPaths.length;r++){var n=s.globals.previousPaths[r];("line"===n.type||"area"===n.type)&&n.paths.length>0&&parseInt(n.realIndex,10)===parseInt(a,10)&&("line"===n.type?(this.lineCtx.appendPathFrom=!1,e=s.globals.previousPaths[r].paths[0].d):"area"===n.type&&(this.lineCtx.appendPathFrom=!1,i=s.globals.previousPaths[r].paths[0].d,s.config.stroke.show&&s.globals.previousPaths[r].paths[1]&&(e=s.globals.previousPaths[r].paths[1].d)))}return{pathFromLine:e,pathFromArea:i}}},{key:"determineFirstPrevY",value:function(t){var e=t.i,i=t.series,a=t.prevY,s=t.lineYPosition,r=this.w;if(void 0!==i[e][0])a=(s=r.config.chart.stacked&&e>0?this.lineCtx.prevSeriesY[e-1][0]:this.lineCtx.zeroY)-i[e][0]/this.lineCtx.yRatio[this.lineCtx.yaxisIndex]+2*(this.lineCtx.isReversed?i[e][0]/this.lineCtx.yRatio[this.lineCtx.yaxisIndex]:0);else if(r.config.chart.stacked&&e>0&&void 0===i[e][0])for(var n=e-1;n>=0;n--)if(null!==i[n][0]&&void 0!==i[n][0]){a=s=this.lineCtx.prevSeriesY[n][0];break}return{prevY:a,lineYPosition:s}}}]),t}(),Lt=function(){function t(i,a,s){e(this,t),this.ctx=i,this.w=i.w,this.xyRatios=a,this.pointsChart=!("bubble"!==this.w.config.chart.type&&"scatter"!==this.w.config.chart.type)||s,this.scatter=new T(this.ctx),this.noNegatives=this.w.globals.minX===Number.MAX_VALUE,this.lineHelpers=new Ct(this),this.markers=new P(this.ctx),this.prevSeriesY=[],this.categoryAxisCorrection=0,this.yaxisIndex=0}return a(t,[{key:"draw",value:function(t,e,i){var a=this.w,s=new p(this.ctx),r=a.globals.comboCharts?e:a.config.chart.type,n=s.group({class:"apexcharts-".concat(r,"-series apexcharts-plot-series")}),o=new m(this.ctx,a);this.yRatio=this.xyRatios.yRatio,this.zRatio=this.xyRatios.zRatio,this.xRatio=this.xyRatios.xRatio,this.baseLineY=this.xyRatios.baseLineY,t=o.getLogSeries(t),this.yRatio=o.getLogYRatios(this.yRatio);for(var l=[],h=0;h<t.length;h++){t=this.lineHelpers.sameValueSeriesFix(h,t);var c=a.globals.comboCharts?i[h]:h;this._initSerieVariables(t,h,c);var d=[],g=[],u=a.globals.padHorizontal+this.categoryAxisCorrection;this.ctx.series.addCollapsedClassToSeries(this.elSeries,c),a.globals.isXNumeric&&a.globals.seriesX.length>0&&(u=(a.globals.seriesX[c][0]-a.globals.minX)/this.xRatio),g.push(u);var f,x=u,b=x,v=this.zeroY;v=this.lineHelpers.determineFirstPrevY({i:h,series:t,prevY:v,lineYPosition:0}).prevY,d.push(v),f=v;var y=this._calculatePathsFrom({series:t,i:h,realIndex:c,prevX:b,prevY:v}),w=this._iterateOverDataPoints({series:t,realIndex:c,i:h,x:u,y:1,pX:x,pY:f,pathsFrom:y,linePaths:[],areaPaths:[],seriesIndex:i,lineYPosition:0,xArrj:g,yArrj:d});this._handlePaths({type:r,realIndex:c,i:h,paths:w}),this.elSeries.add(this.elPointsMain),this.elSeries.add(this.elDataLabelsWrap),l.push(this.elSeries)}for(var k=l.length;k>0;k--)n.add(l[k-1]);return n}},{key:"_initSerieVariables",value:function(t,e,i){var a=this.w,s=new p(this.ctx);this.xDivision=a.globals.gridWidth/(a.globals.dataPoints-("on"===a.config.xaxis.tickPlacement?1:0)),this.strokeWidth=Array.isArray(a.config.stroke.width)?a.config.stroke.width[i]:a.config.stroke.width,this.yRatio.length>1&&(this.yaxisIndex=i),this.isReversed=a.config.yaxis[this.yaxisIndex]&&a.config.yaxis[this.yaxisIndex].reversed,this.zeroY=a.globals.gridHeight-this.baseLineY[this.yaxisIndex]-(this.isReversed?a.globals.gridHeight:0)+(this.isReversed?2*this.baseLineY[this.yaxisIndex]:0),this.areaBottomY=this.zeroY,this.zeroY>a.globals.gridHeight&&(this.areaBottomY=a.globals.gridHeight),this.categoryAxisCorrection=this.xDivision/2,this.elSeries=s.group({class:"apexcharts-series",seriesName:g.escapeString(a.globals.seriesNames[i])}),this.elPointsMain=s.group({class:"apexcharts-series-markers-wrap","data:realIndex":i}),this.elDataLabelsWrap=s.group({class:"apexcharts-datalabels","data:realIndex":i});var r=t[e].length===a.globals.dataPoints;this.elSeries.attr({"data:longestSeries":r,rel:e+1,"data:realIndex":i}),this.appendPathFrom=!0}},{key:"_calculatePathsFrom",value:function(t){var e,i,a,s,r=t.series,n=t.i,o=t.realIndex,l=t.prevX,h=t.prevY,c=this.w,d=new p(this.ctx);if(null===r[n][0]){for(var g=0;g<r[n].length;g++)if(null!==r[n][g]){l=this.xDivision*g,h=this.zeroY-r[n][g]/this.yRatio[this.yaxisIndex],e=d.move(l,h),i=d.move(l,this.areaBottomY);break}}else e=d.move(l,h),i=d.move(l,this.areaBottomY)+d.line(l,h);if(a=d.move(-1,this.zeroY)+d.line(-1,this.zeroY),s=d.move(-1,this.zeroY)+d.line(-1,this.zeroY),c.globals.previousPaths.length>0){var u=this.lineHelpers.checkPreviousPaths({pathFromLine:a,pathFromArea:s,realIndex:o});a=u.pathFromLine,s=u.pathFromArea}return{prevX:l,prevY:h,linePath:e,areaPath:i,pathFromLine:a,pathFromArea:s}}},{key:"_handlePaths",value:function(t){var e=t.type,i=t.realIndex,a=t.i,s=t.paths,r=this.w,o=new p(this.ctx),l=new L(this.ctx);this.prevSeriesY.push(s.yArrj),r.globals.seriesXvalues[i]=s.xArrj,r.globals.seriesYvalues[i]=s.yArrj,this.pointsChart||r.globals.delayedElements.push({el:this.elPointsMain.node,index:i});var h={i:a,realIndex:i,animationDelay:a,initialSpeed:r.config.chart.animations.speed,dataChangeSpeed:r.config.chart.animations.dynamicAnimation.speed,className:"apexcharts-".concat(e)};if("area"===e)for(var c=l.fillPath({seriesNumber:i}),d=0;d<s.areaPaths.length;d++){var g=o.renderPaths(n({},h,{pathFrom:s.pathFromArea,pathTo:s.areaPaths[d],stroke:"none",strokeWidth:0,strokeLineCap:null,fill:c}));this.elSeries.add(g)}if(r.config.stroke.show&&!this.pointsChart){var u=null;u="line"===e?l.fillPath({seriesNumber:i,i:a}):r.globals.stroke.colors[i];for(var f=0;f<s.linePaths.length;f++){var x=o.renderPaths(n({},h,{pathFrom:s.pathFromLine,pathTo:s.linePaths[f],stroke:u,strokeWidth:this.strokeWidth,strokeLineCap:r.config.stroke.lineCap,fill:"none"}));this.elSeries.add(x)}}}},{key:"_iterateOverDataPoints",value:function(t){for(var e=t.series,i=t.realIndex,a=t.i,s=t.x,r=t.y,n=t.pX,o=t.pY,l=t.pathsFrom,h=t.linePaths,c=t.areaPaths,d=t.seriesIndex,u=t.lineYPosition,f=t.xArrj,x=t.yArrj,b=this.w,m=new p(this.ctx),v=this.yRatio,y=l.prevY,w=l.linePath,k=l.areaPath,A=l.pathFromLine,S=l.pathFromArea,C=g.isNumber(b.globals.minYArr[i])?b.globals.minYArr[i]:b.globals.minY,L=b.globals.dataPoints>1?b.globals.dataPoints-1:b.globals.dataPoints,P=0;P<L;P++){var T=void 0===e[a][P+1]||null===e[a][P+1];if(b.globals.isXNumeric){var z=b.globals.seriesX[i][P+1];void 0===b.globals.seriesX[i][P+1]&&(z=b.globals.seriesX[i][L-1]),s=(z-b.globals.minX)/this.xRatio}else s+=this.xDivision;if(b.config.chart.stacked)if(a>0&&b.globals.collapsedSeries.length<b.config.series.length-1){u=this.prevSeriesY[function(t){for(var e=t,i=0;i<b.globals.series.length;i++)if(b.globals.collapsedSeriesIndices.indexOf(t)>-1){e--;break}return e>=0?e:0}(a-1)][P+1]}else u=this.zeroY;else u=this.zeroY;r=T?u-C/v[this.yaxisIndex]+2*(this.isReversed?C/v[this.yaxisIndex]:0):u-e[a][P+1]/v[this.yaxisIndex]+2*(this.isReversed?e[a][P+1]/v[this.yaxisIndex]:0),f.push(s),x.push(r);var I=this.lineHelpers.calculatePoints({series:e,x:s,y:r,realIndex:i,i:a,j:P,prevY:y}),M=this._createPaths({series:e,i:a,realIndex:i,j:P,x:s,y:r,pX:n,pY:o,linePath:w,areaPath:k,linePaths:h,areaPaths:c,seriesIndex:d});c=M.areaPaths,h=M.linePaths,n=M.pX,o=M.pY,k=M.areaPath,w=M.linePath,this.appendPathFrom&&(A+=m.line(s,this.zeroY),S+=m.line(s,this.zeroY)),this.handleNullDataPoints(e,I,a,P,i),this._handleMarkersAndLabels({pointsPos:I,series:e,x:s,y:r,prevY:y,i:a,j:P,realIndex:i})}return{yArrj:x,xArrj:f,pathFromArea:S,areaPaths:c,pathFromLine:A,linePaths:h}}},{key:"_handleMarkersAndLabels",value:function(t){var e=t.pointsPos,i=(t.series,t.x,t.y,t.prevY,t.i),a=t.j,s=t.realIndex,r=this.w,n=new z(this.ctx);if(this.pointsChart)this.scatter.draw(this.elSeries,a,{realIndex:s,pointsPos:e,zRatio:this.zRatio,elParent:this.elPointsMain});else{r.globals.series[i].length>1&&this.elPointsMain.node.classList.add("apexcharts-element-hidden");var o=this.markers.plotChartMarkers(e,s,a+1);null!==o&&this.elPointsMain.add(o)}var l=n.drawDataLabel(e,s,a+1,null);null!==l&&this.elDataLabelsWrap.add(l)}},{key:"_createPaths",value:function(t){var e=t.series,i=t.i,a=t.realIndex,s=t.j,r=t.x,n=t.y,o=t.pX,l=t.pY,h=t.linePath,c=t.areaPath,d=t.linePaths,g=t.areaPaths,u=t.seriesIndex,f=this.w,x=new p(this.ctx),b=f.config.stroke.curve,m=this.areaBottomY;if(Array.isArray(f.config.stroke.curve)&&(b=Array.isArray(u)?f.config.stroke.curve[u[i]]:f.config.stroke.curve[i]),"smooth"===b){var v=.35*(r-o);f.globals.hasNullValues?(null!==e[i][s]&&(null!==e[i][s+1]?(h=x.move(o,l)+x.curve(o+v,l,r-v,n,r+1,n),c=x.move(o+1,l)+x.curve(o+v,l,r-v,n,r+1,n)+x.line(r,m)+x.line(o,m)+"z"):(h=x.move(o,l),c=x.move(o,l)+"z")),d.push(h),g.push(c)):(h+=x.curve(o+v,l,r-v,n,r,n),c+=x.curve(o+v,l,r-v,n,r,n)),o=r,l=n,s===e[i].length-2&&(c=c+x.curve(o,l,r,n,r,m)+x.move(r,n)+"z",f.globals.hasNullValues||(d.push(h),g.push(c)))}else{if(null===e[i][s+1]){h+=x.move(r,n);var y=f.globals.isXNumeric?(f.globals.seriesX[a][s]-f.globals.minX)/this.xRatio:r-this.xDivision;c=c+x.line(y,m)+x.move(r,n)+"z"}null===e[i][s]&&(h+=x.move(r,n),c+=x.move(r,m)),"stepline"===b?(h=h+x.line(r,null,"H")+x.line(null,n,"V"),c=c+x.line(r,null,"H")+x.line(null,n,"V")):"straight"===b&&(h+=x.line(r,n),c+=x.line(r,n)),s===e[i].length-2&&(c=c+x.line(r,m)+x.move(r,n)+"z",d.push(h),g.push(c))}return{linePaths:d,areaPaths:g,pX:o,pY:l,linePath:h,areaPath:c}}},{key:"handleNullDataPoints",value:function(t,e,i,a,s){var r=this.w;if(null===t[i][a]&&r.config.markers.showNullDataPoints||1===t[i].length){var n=this.markers.plotChartMarkers(e,s,a+1,this.strokeWidth-r.config.markers.strokeWidth/2,!0);null!==n&&this.elPointsMain.add(n)}}}]),t}(),Pt=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w,this.timeScaleArray=[],this.utc=this.w.config.xaxis.labels.datetimeUTC}return a(t,[{key:"calculateTimeScaleTicks",value:function(t,e){var i=this,a=this.w;if(a.globals.allSeriesCollapsed)return a.globals.labels=[],a.globals.timescaleLabels=[],[];var s=new Y(this.ctx),r=(e-t)/864e5;this.determineInterval(r),a.globals.disableZoomIn=!1,a.globals.disableZoomOut=!1,r<.005?a.globals.disableZoomIn=!0:r>5e4&&(a.globals.disableZoomOut=!0);var o=s.getTimeUnitsfromTimestamp(t,e,this.utc),l=a.globals.gridWidth/r,h=l/24,c=h/60,d=Math.floor(24*r),g=Math.floor(24*r*60),u=Math.floor(r),f=Math.floor(r/30),p=Math.floor(r/365),x={minMinute:o.minMinute,minHour:o.minHour,minDate:o.minDate,minMonth:o.minMonth,minYear:o.minYear},b={firstVal:x,currentMinute:x.minMinute,currentHour:x.minHour,currentMonthDate:x.minDate,currentDate:x.minDate,currentMonth:x.minMonth,currentYear:x.minYear,daysWidthOnXAxis:l,hoursWidthOnXAxis:h,minutesWidthOnXAxis:c,numberOfMinutes:g,numberOfHours:d,numberOfDays:u,numberOfMonths:f,numberOfYears:p};switch(this.tickInterval){case"years":this.generateYearScale(b);break;case"months":case"half_year":this.generateMonthScale(b);break;case"months_days":case"months_fortnight":case"days":case"week_days":this.generateDayScale(b);break;case"hours":this.generateHourScale(b);break;case"minutes":this.generateMinuteScale(b)}var m=this.timeScaleArray.map((function(t){var e={position:t.position,unit:t.unit,year:t.year,day:t.day?t.day:1,hour:t.hour?t.hour:0,month:t.month+1};return"month"===t.unit?n({},e,{day:1,value:t.value+1}):"day"===t.unit||"hour"===t.unit?n({},e,{value:t.value}):"minute"===t.unit?n({},e,{value:t.value,minute:t.value}):t}));return m.filter((function(t){var e=1,s=Math.ceil(a.globals.gridWidth/120),r=t.value;void 0!==a.config.xaxis.tickAmount&&(s=a.config.xaxis.tickAmount),m.length>s&&(e=Math.floor(m.length/s));var n=!1,o=!1;switch(i.tickInterval){case"years":"year"===t.unit&&(n=!0);break;case"half_year":e=7,"year"===t.unit&&(n=!0);break;case"months":e=1,"year"===t.unit&&(n=!0);break;case"months_fortnight":e=15,"year"!==t.unit&&"month"!==t.unit||(n=!0),30===r&&(o=!0);break;case"months_days":e=10,"month"===t.unit&&(n=!0),30===r&&(o=!0);break;case"week_days":e=8,"month"===t.unit&&(n=!0);break;case"days":e=1,"month"===t.unit&&(n=!0);break;case"hours":"day"===t.unit&&(n=!0);break;case"minutes":r%5!=0&&(o=!0)}if("minutes"===i.tickInterval||"hours"===i.tickInterval){if(!o)return!0}else if((r%e==0||n)&&!o)return!0}))}},{key:"recalcDimensionsBasedOnFormat",value:function(t,e){var i=this.w,a=this.formatDates(t),s=this.removeOverlappingTS(a);i.globals.timescaleLabels=s.slice(),new nt(this.ctx).plotCoords()}},{key:"determineInterval",value:function(t){switch(!0){case t>1825:this.tickInterval="years";break;case t>800&&t<=1825:this.tickInterval="half_year";break;case t>180&&t<=800:this.tickInterval="months";break;case t>90&&t<=180:this.tickInterval="months_fortnight";break;case t>60&&t<=90:this.tickInterval="months_days";break;case t>30&&t<=60:this.tickInterval="week_days";break;case t>2&&t<=30:this.tickInterval="days";break;case t>.1&&t<=2:this.tickInterval="hours";break;case t<.1:this.tickInterval="minutes";break;default:this.tickInterval="days"}}},{key:"generateYearScale",value:function(t){var e=t.firstVal,i=t.currentMonth,a=t.currentYear,s=t.daysWidthOnXAxis,r=t.numberOfYears,n=e.minYear,o=0,l=new Y(this.ctx);if(e.minDate>1&&e.minMonth>0){var h=l.determineRemainingDaysOfYear(e.minYear,e.minMonth,e.minDate);o=(l.determineDaysOfYear(e.minYear)-h+1)*s,n=e.minYear+1,this.timeScaleArray.push({position:o,value:n,unit:"year",year:n,month:g.monthMod(i+1)})}else 1===e.minDate&&0===e.minMonth&&this.timeScaleArray.push({position:o,value:n,unit:"year",year:a,month:g.monthMod(i+1)});for(var c=n,d=o,u=0;u<r;u++)c++,d=l.determineDaysOfYear(c-1)*s+d,this.timeScaleArray.push({position:d,value:c,unit:"year",year:c,month:1})}},{key:"generateMonthScale",value:function(t){var e=t.firstVal,i=t.currentMonthDate,a=t.currentMonth,s=t.currentYear,r=t.daysWidthOnXAxis,n=t.numberOfMonths,o=a,l=0,h=new Y(this.ctx),c="month",d=0;if(e.minDate>1){l=(h.determineDaysOfMonths(a+1,e.minYear)-i+1)*r,o=g.monthMod(a+1);var u=s+d,f=g.monthMod(o),p=o;0===o&&(c="year",p=u,f=1,u+=d+=1),this.timeScaleArray.push({position:l,value:p,unit:c,year:u,month:f})}else this.timeScaleArray.push({position:l,value:o,unit:c,year:s,month:g.monthMod(a)});for(var x=o+1,b=l,m=0,v=1;m<n;m++,v++){0===(x=g.monthMod(x))?(c="year",d+=1):c="month";var y=this._getYear(s,x,d);b=h.determineDaysOfMonths(x,y)*r+b;var w=0===x?y:x;this.timeScaleArray.push({position:b,value:w,unit:c,year:y,month:0===x?1:x}),x++}}},{key:"generateDayScale",value:function(t){var e=t.firstVal,i=t.currentMonth,a=t.currentYear,s=t.hoursWidthOnXAxis,r=t.numberOfDays,n=new Y(this.ctx),o="day",l=e.minDate+1,h=l,c=function(t,e,i){return t>n.determineDaysOfMonths(e+1,i)?(h=1,o="month",u=e+=1,e):e},d=(24-e.minHour)*s,u=l,f=c(h,i,a);0===e.minHour&&1===e.minDate&&(d=0,u=g.monthMod(e.minMonth),o="month",h=e.minDate,r++),this.timeScaleArray.push({position:d,value:u,unit:o,year:this._getYear(a,f,0),month:g.monthMod(f),day:h});for(var p=d,x=0;x<r;x++){o="day",f=c(h+=1,f,this._getYear(a,f,0));var b=this._getYear(a,f,0);p=24*s+p;var m=1===h?g.monthMod(f):h;this.timeScaleArray.push({position:p,value:m,unit:o,year:b,month:g.monthMod(f),day:m})}}},{key:"generateHourScale",value:function(t){var e=t.firstVal,i=t.currentDate,a=t.currentMonth,s=t.currentYear,r=t.minutesWidthOnXAxis,n=t.numberOfHours,o=new Y(this.ctx),l="hour",h=function(t,e){return t>o.determineDaysOfMonths(e+1,s)&&(x=1,e+=1),{month:e,date:x}},c=function(t,e){return t>o.determineDaysOfMonths(e+1,s)?e+=1:e},d=60-e.minMinute,u=d*r,f=e.minHour+1,p=f+1;60===d&&(u=0,p=(f=e.minHour)+1);var x=i,b=c(x,a);this.timeScaleArray.push({position:u,value:f,unit:l,day:x,hour:p,year:s,month:g.monthMod(b)});for(var m=u,v=0;v<n;v++){if(l="hour",p>=24)p=0,l="day",b=h(x+=1,b).month,b=c(x,b);var y=this._getYear(s,b,0);m=0===p&&0===v?d*r:60*r+m;var w=0===p?x:p;this.timeScaleArray.push({position:m,value:w,unit:l,hour:p,day:x,year:y,month:g.monthMod(b)}),p++}}},{key:"generateMinuteScale",value:function(t){var e=t.firstVal,i=t.currentMinute,a=t.currentHour,s=t.currentDate,r=t.currentMonth,n=t.currentYear,o=t.minutesWidthOnXAxis,l=t.numberOfMinutes,h=o-(i-e.minMinute),c=e.minMinute+1,d=c+1,u=s,f=r,p=n,x=a;this.timeScaleArray.push({position:h,value:c,unit:"minute",day:u,hour:x,minute:d,year:p,month:g.monthMod(f)});for(var b=h,m=0;m<l;m++)d>=60&&(d=0,24===(x+=1)&&(x=0)),b=o+b,this.timeScaleArray.push({position:b,value:d,unit:"minute",hour:x,minute:d,day:u,year:this._getYear(n,f,0),month:g.monthMod(f)}),d++}},{key:"createRawDateString",value:function(t,e){var i=t.year;return i+="-"+("0"+t.month.toString()).slice(-2),"day"===t.unit?i+="day"===t.unit?"-"+("0"+e).slice(-2):"-01":i+="-"+("0"+(t.day?t.day:"1")).slice(-2),"hour"===t.unit?i+="hour"===t.unit?"T"+("0"+e).slice(-2):"T00":i+="T"+("0"+(t.hour?t.hour:"0")).slice(-2),i+="minute"===t.unit?":"+("0"+e).slice(-2)+":00":":00:00",this.utc&&(i+=".000Z"),i}},{key:"formatDates",value:function(t){var e=this,i=this.w;return t.map((function(t){var a=t.value.toString(),s=new Y(e.ctx),r=e.createRawDateString(t,a),n=s.getDate(r);if(void 0===i.config.xaxis.labels.format){var o="dd MMM",l=i.config.xaxis.labels.datetimeFormatter;"year"===t.unit&&(o=l.year),"month"===t.unit&&(o=l.month),"day"===t.unit&&(o=l.day),"hour"===t.unit&&(o=l.hour),"minute"===t.unit&&(o=l.minute),a=s.formatDate(n,o)}else a=s.formatDate(n,i.config.xaxis.labels.format);return{dateString:r,position:t.position,value:a,unit:t.unit,year:t.year,month:t.month}}))}},{key:"removeOverlappingTS",value:function(t){var e,i=this,a=new p(this.ctx),s=!1;t.length>0&&t[0].value&&t.every((function(e){return e.value.length===t[0].value.length}))&&(s=!0,e=a.getTextRects(t[0].value).width);var r=0,n=t.map((function(n,o){if(o>0&&i.w.config.xaxis.labels.hideOverlappingLabels){var l=s?e:a.getTextRects(t[r].value).width,h=t[r].position;return n.position>h+l+10?(r=o,n):null}return n}));return n=n.filter((function(t){return null!==t}))}},{key:"_getYear",value:function(t,e,i){return t+Math.floor(e/12)+i}}]),t}(),Tt=function(){function t(i,a){e(this,t),this.ctx=a,this.w=a.w,this.el=i}return a(t,[{key:"setupElements",value:function(){var t=this.w.globals,e=this.w.config,i=e.chart.type;t.axisCharts=["line","area","bar","rangeBar","candlestick","scatter","bubble","radar","heatmap"].indexOf(i)>-1,t.xyCharts=["line","area","bar","rangeBar","candlestick","scatter","bubble"].indexOf(i)>-1,t.isBarHorizontal=("bar"===e.chart.type||"rangeBar"===e.chart.type)&&e.plotOptions.bar.horizontal,t.chartClass=".apexcharts"+t.cuid,t.dom.baseEl=this.el,t.dom.elWrap=document.createElement("div"),p.setAttrs(t.dom.elWrap,{id:t.chartClass.substring(1),class:"apexcharts-canvas "+t.chartClass.substring(1)}),this.el.appendChild(t.dom.elWrap),t.dom.Paper=new window.SVG.Doc(t.dom.elWrap),t.dom.Paper.attr({class:"apexcharts-svg","xmlns:data":"ApexChartsNS",transform:"translate(".concat(e.chart.offsetX,", ").concat(e.chart.offsetY,")")}),t.dom.Paper.node.style.background=e.chart.background,this.setSVGDimensions(),t.dom.elGraphical=t.dom.Paper.group().attr({class:"apexcharts-inner apexcharts-graphical"}),t.dom.elAnnotations=t.dom.Paper.group().attr({class:"apexcharts-annotations"}),t.dom.elDefs=t.dom.Paper.defs(),t.dom.elLegendWrap=document.createElement("div"),t.dom.elLegendWrap.classList.add("apexcharts-legend"),t.dom.elWrap.appendChild(t.dom.elLegendWrap),t.dom.Paper.add(t.dom.elGraphical),t.dom.elGraphical.add(t.dom.elDefs)}},{key:"plotChartType",value:function(t,e){var i=this.w,a=i.config,s=i.globals,r={series:[],i:[]},n={series:[],i:[]},o={series:[],i:[]},l={series:[],i:[]},h={series:[],i:[]},c={series:[],i:[]};s.series.map((function(e,d){void 0!==t[d].type?("column"===t[d].type||"bar"===t[d].type?(s.series.length>1&&a.plotOptions.bar.horizontal&&console.warn("Horizontal bars are not supported in a mixed/combo chart. Please turn off `plotOptions.bar.horizontal`"),h.series.push(e),h.i.push(d),i.globals.columnSeries=h.series):"area"===t[d].type?(n.series.push(e),n.i.push(d)):"line"===t[d].type?(r.series.push(e),r.i.push(d)):"scatter"===t[d].type?(o.series.push(e),o.i.push(d)):"bubble"===t[d].type?(l.series.push(e),l.i.push(d)):"candlestick"===t[d].type?(c.series.push(e),c.i.push(d)):console.warn("You have specified an unrecognized chart type. Available types for this propery are line/area/column/bar/scatter/bubble"),s.comboCharts=!0):(r.series.push(e),r.i.push(d))}));var d=new Lt(this.ctx,e),g=new wt(this.ctx,e),u=new lt(this.ctx),f=new St(this.ctx),p=new F(this.ctx,e),x=new At(this.ctx),b=[];if(s.comboCharts){if(n.series.length>0&&b.push(d.draw(n.series,"area",n.i)),h.series.length>0)if(i.config.chart.stacked){var m=new yt(this.ctx,e);b.push(m.draw(h.series,h.i))}else{var v=new E(this.ctx,e);b.push(v.draw(h.series,h.i))}if(r.series.length>0&&b.push(d.draw(r.series,"line",r.i)),c.series.length>0&&b.push(g.draw(c.series,c.i)),o.series.length>0){var y=new Lt(this.ctx,e,!0);b.push(y.draw(o.series,"scatter",o.i))}if(l.series.length>0){var w=new Lt(this.ctx,e,!0);b.push(w.draw(l.series,"bubble",l.i))}}else switch(a.chart.type){case"line":b=d.draw(s.series,"line");break;case"area":b=d.draw(s.series,"area");break;case"bar":if(a.chart.stacked)b=new yt(this.ctx,e).draw(s.series);else b=new E(this.ctx,e).draw(s.series);break;case"candlestick":b=new wt(this.ctx,e).draw(s.series);break;case"rangeBar":b=p.draw(s.series);break;case"heatmap":b=new kt(this.ctx,e).draw(s.series);break;case"pie":case"donut":case"polarArea":b=u.draw(s.series);break;case"radialBar":b=f.draw(s.series);break;case"radar":b=x.draw(s.series);break;default:b=d.draw(s.series)}return b}},{key:"setSVGDimensions",value:function(){var t=this.w.globals,e=this.w.config;t.svgWidth=e.chart.width,t.svgHeight=e.chart.height;var i=g.getDimensions(this.el),a=e.chart.width.toString().split(/[0-9]+/g).pop();if("%"===a?g.isNumber(i[0])&&(0===i[0].width&&(i=g.getDimensions(this.el.parentNode)),t.svgWidth=i[0]*parseInt(e.chart.width,10)/100):"px"!==a&&""!==a||(t.svgWidth=parseInt(e.chart.width,10)),"auto"!==t.svgHeight&&""!==t.svgHeight)if("%"===e.chart.height.toString().split(/[0-9]+/g).pop()){var s=g.getDimensions(this.el.parentNode);t.svgHeight=s[1]*parseInt(e.chart.height,10)/100}else t.svgHeight=parseInt(e.chart.height,10);else t.axisCharts?t.svgHeight=t.svgWidth/1.61:t.svgHeight=t.svgWidth/1.2;t.svgWidth<0&&(t.svgWidth=0),t.svgHeight<0&&(t.svgHeight=0),p.setAttrs(t.dom.Paper.node,{width:t.svgWidth,height:t.svgHeight});var r=e.chart.sparkline.enabled?0:t.axisCharts?e.chart.parentHeightOffset:0;t.dom.Paper.node.parentNode.parentNode.style.minHeight=t.svgHeight+r+"px",t.dom.elWrap.style.width=t.svgWidth+"px",t.dom.elWrap.style.height=t.svgHeight+"px"}},{key:"shiftGraphPosition",value:function(){var t=this.w.globals,e=t.translateY,i={transform:"translate("+t.translateX+", "+e+")"};p.setAttrs(t.dom.elGraphical.node,i),t.x2SpaceAvailable=t.svgWidth-t.dom.elGraphical.x()-t.gridWidth}},{key:"resizeNonAxisCharts",value:function(){var t=this.w,e=t.globals,i=0,a=t.config.chart.sparkline.enabled?1:15;a+=t.config.grid.padding.bottom,"top"!==t.config.legend.position&&"bottom"!==t.config.legend.position||!t.config.legend.show||t.config.legend.floating||(i=new ct(this.ctx).legendHelpers.getLegendBBox().clwh+10);var s=t.globals.dom.baseEl.querySelector(".apexcharts-radialbar"),r=2.05*t.globals.radialSize;if(s&&!t.config.chart.sparkline.enabled){var n=g.getBoundingClientRect(s);r=n.bottom;var o=n.bottom-n.top;r=Math.max(2.05*t.globals.radialSize,o)}var l=r+e.translateY+i+a;e.dom.elLegendForeign&&e.dom.elLegendForeign.setAttribute("height",l),e.dom.elWrap.style.height=l+"px",p.setAttrs(e.dom.Paper.node,{height:l}),e.dom.Paper.node.parentNode.parentNode.style.minHeight=l+"px"}},{key:"coreCalculations",value:function(){new U(this.ctx).init()}},{key:"resetGlobals",value:function(){var t=this,e=function(){return t.w.config.series.map((function(t){return[]}))},i=new H,a=this.w.globals;i.initGlobalVars(a),a.seriesXvalues=e(),a.seriesYvalues=e()}},{key:"isMultipleY",value:function(){if(this.w.config.yaxis.constructor===Array&&this.w.config.yaxis.length>1)return this.w.globals.isMultipleYAxis=!0,!0}},{key:"xySettings",value:function(){var t=null,e=this.w;if(e.globals.axisCharts){if("back"===e.config.xaxis.crosshairs.position)new Q(this.ctx).drawXCrosshairs();if("back"===e.config.yaxis[0].crosshairs.position)new Q(this.ctx).drawYCrosshairs();if("datetime"===e.config.xaxis.type&&void 0===e.config.xaxis.labels.formatter){var i=new Pt(this.ctx),a=[];isFinite(e.globals.minX)&&isFinite(e.globals.maxX)&&!e.globals.isBarHorizontal?a=i.calculateTimeScaleTicks(e.globals.minX,e.globals.maxX):e.globals.isBarHorizontal&&(a=i.calculateTimeScaleTicks(e.globals.minY,e.globals.maxY)),i.recalcDimensionsBasedOnFormat(a)}t=new m(this.ctx).getCalculatedRatios()}return t}},{key:"updateSourceChart",value:function(t){this.ctx.w.globals.selection=void 0,this.ctx.updateHelpers._updateOptions({chart:{selection:{xaxis:{min:t.w.globals.minX,max:t.w.globals.maxX}}}},!1,!1)}},{key:"setupBrushHandler",value:function(){var t=this,e=this.w;if(e.config.chart.brush.enabled&&"function"!=typeof e.config.chart.events.selection){var i=e.config.chart.brush.targets||[e.config.chart.brush.target];i.forEach((function(e){var i=ApexCharts.getChartByID(e);i.w.globals.brushSource=t.ctx,"function"!=typeof i.w.config.chart.events.zoomed&&(i.w.config.chart.events.zoomed=function(){t.updateSourceChart(i)}),"function"!=typeof i.w.config.chart.events.scrolled&&(i.w.config.chart.events.scrolled=function(){t.updateSourceChart(i)})})),e.config.chart.events.selection=function(t,a){i.forEach((function(t){var i=ApexCharts.getChartByID(t),s=g.clone(e.config.yaxis);e.config.chart.brush.autoScaleYaxis&&1===i.w.globals.series.length&&(s=new j(i).autoScaleY(i,s,a));i.ctx.updateHelpers._updateOptions({xaxis:{min:a.xaxis.min,max:a.xaxis.max},yaxis:n({},i.w.config.yaxis[0],{min:s[0].min,max:s[0].max})},!1,!1,!1,!1)}))}}}}]),t}(),zt=function(){function i(t){e(this,i),this.ctx=t,this.w=t.w}return a(i,[{key:"_updateOptions",value:function(e){var i=this,a=arguments.length>1&&void 0!==arguments[1]&&arguments[1],s=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],r=!(arguments.length>3&&void 0!==arguments[3])||arguments[3],n=arguments.length>4&&void 0!==arguments[4]&&arguments[4],o=[this.ctx];r&&(o=this.ctx.getSyncedCharts()),this.ctx.w.globals.isExecCalled&&(o=[this.ctx],this.ctx.w.globals.isExecCalled=!1),o.forEach((function(r){var o=r.w;return o.globals.shouldAnimate=s,a||(o.globals.resized=!0,o.globals.dataChanged=!0,s&&r.series.getPreviousPaths()),e&&"object"===t(e)&&(r.config=new D(e),e=m.extendArrayProps(r.config,e,o),r.w.globals.chartID!==i.ctx.w.globals.chartID&&delete e.series,o.config=g.extend(o.config,e),n&&(o.globals.lastXAxis=[],o.globals.lastYAxis=[],o.globals.initialConfig=g.extend({},o.config),o.globals.initialSeries=JSON.parse(JSON.stringify(o.config.series)))),r.update(e)}))}},{key:"_updateSeries",value:function(t,e){var i,a=this,s=arguments.length>2&&void 0!==arguments[2]&&arguments[2],r=this.w;return r.globals.shouldAnimate=e,r.globals.dataChanged=!0,e&&this.ctx.series.getPreviousPaths(),r.globals.axisCharts?(0===(i=t.map((function(t,e){return a._extendSeries(t,e)}))).length&&(i=[{data:[]}]),r.config.series=i):r.config.series=t.slice(),s&&(r.globals.initialConfig.series=JSON.parse(JSON.stringify(r.config.series)),r.globals.initialSeries=JSON.parse(JSON.stringify(r.config.series))),this.ctx.update()}},{key:"_extendSeries",value:function(t,e){var i=this.w;return n({},i.config.series[e],{name:t.name?t.name:i.config.series[e]&&i.config.series[e].name,type:t.type?t.type:i.config.series[e]&&i.config.series[e].type,data:t.data?t.data:i.config.series[e]&&i.config.series[e].data})}},{key:"toggleDataPointSelection",value:function(t,e){var i=this.w,a=null,s=".apexcharts-series[data\\:realIndex='".concat(t,"']");i.globals.axisCharts?a=i.globals.dom.Paper.select("".concat(s," path[j='").concat(e,"'], ").concat(s," circle[j='").concat(e,"'], ").concat(s," rect[j='").concat(e,"']")).members[0]:void 0===e&&(a=i.globals.dom.Paper.select("".concat(s," path[j='").concat(t,"']")).members[0],("pie"===i.config.chart.type||"polarArea"===i.config.chart.type||"donut"===i.config.chart.type)&&new lt(this.ctx).pieClicked(t));return a?(new p(this.ctx).pathMouseDown(a,null),a.node?a.node:null):(console.warn("toggleDataPointSelection: Element not found"),null)}},{key:"forceXAxisUpdate",value:function(t){var e=this.w;if(["min","max"].forEach((function(i){void 0!==t.xaxis[i]&&(e.config.xaxis[i]=t.xaxis[i],e.globals.lastXAxis[i]=t.xaxis[i])})),t.xaxis.categories&&t.xaxis.categories.length&&(e.config.xaxis.categories=t.xaxis.categories),e.config.xaxis.convertedCatToNumeric){var i=new R(t);t=i.convertCatToNumericXaxis(t,this.ctx)}return t}},{key:"forceYAxisUpdate",value:function(t){var e=this.w;return e.config.chart.stacked&&"100%"===e.config.chart.stackType&&(Array.isArray(t.yaxis)?t.yaxis.forEach((function(e,i){t.yaxis[i].min=0,t.yaxis[i].max=100})):(t.yaxis.min=0,t.yaxis.max=100)),t}},{key:"revertDefaultAxisMinMax",value:function(){var t=this,e=this.w;e.config.xaxis.min=e.globals.lastXAxis.min,e.config.xaxis.max=e.globals.lastXAxis.max,e.config.yaxis.map((function(i,a){e.globals.zoomed?void 0!==e.globals.lastYAxis[a]&&(i.min=e.globals.lastYAxis[a].min,i.max=e.globals.lastYAxis[a].max):void 0!==t.ctx.opts.yaxis[a]&&(i.min=t.ctx.opts.yaxis[a].min,i.max=t.ctx.opts.yaxis[a].max)}))}}]),i}();w="undefined"!=typeof window?window:void 0,k=function(e,i){var a=(void 0!==this?this:e).SVG=function(t){if(a.supported)return t=new a.Doc(t),a.parser.draw||a.prepare(),t};if(a.ns="http://www.w3.org/2000/svg",a.xmlns="http://www.w3.org/2000/xmlns/",a.xlink="http://www.w3.org/1999/xlink",a.svgjs="http://svgjs.com/svgjs",a.supported=!0,!a.supported)return!1;a.did=1e3,a.eid=function(t){return"Svgjs"+d(t)+a.did++},a.create=function(t){var e=i.createElementNS(this.ns,t);return e.setAttribute("id",this.eid(t)),e},a.extend=function(){var t,e;e=(t=[].slice.call(arguments)).pop();for(var i=t.length-1;i>=0;i--)if(t[i])for(var s in e)t[i].prototype[s]=e[s];a.Set&&a.Set.inherit&&a.Set.inherit()},a.invent=function(t){var e="function"==typeof t.create?t.create:function(){this.constructor.call(this,a.create(t.create))};return t.inherit&&(e.prototype=new t.inherit),t.extend&&a.extend(e,t.extend),t.construct&&a.extend(t.parent||a.Container,t.construct),e},a.adopt=function(t){return t?t.instance?t.instance:((i="svg"==t.nodeName?t.parentNode instanceof e.SVGElement?new a.Nested:new a.Doc:"linearGradient"==t.nodeName?new a.Gradient("linear"):"radialGradient"==t.nodeName?new a.Gradient("radial"):a[d(t.nodeName)]?new(a[d(t.nodeName)]):new a.Element(t)).type=t.nodeName,i.node=t,t.instance=i,i instanceof a.Doc&&i.namespace().defs(),i.setData(JSON.parse(t.getAttribute("svgjs:data"))||{}),i):null;var i},a.prepare=function(){var t=i.getElementsByTagName("body")[0],e=(t?new a.Doc(t):a.adopt(i.documentElement).nested()).size(2,0);a.parser={body:t||i.documentElement,draw:e.style("opacity:0;position:absolute;left:-100%;top:-100%;overflow:hidden").node,poly:e.polyline().node,path:e.path().node,native:a.create("svg")}},a.parser={native:a.create("svg")},i.addEventListener("DOMContentLoaded",(function(){a.parser.draw||a.prepare()}),!1),a.regex={numberAndUnit:/^([+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?)([a-z%]*)$/i,hex:/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i,rgb:/rgb\((\d+),(\d+),(\d+)\)/,reference:/#([a-z0-9\-_]+)/i,transforms:/\)\s*,?\s*/,whitespace:/\s/g,isHex:/^#[a-f0-9]{3,6}$/i,isRgb:/^rgb\(/,isCss:/[^:]+:[^;]+;?/,isBlank:/^(\s+)?$/,isNumber:/^[+-]?(\d+(\.\d*)?|\.\d+)(e[+-]?\d+)?$/i,isPercent:/^-?[\d\.]+%$/,isImage:/\.(jpg|jpeg|png|gif|svg)(\?[^=]+.*)?/i,delimiter:/[\s,]+/,hyphen:/([^e])\-/gi,pathLetters:/[MLHVCSQTAZ]/gi,isPathLetter:/[MLHVCSQTAZ]/i,numbersWithDots:/((\d?\.\d+(?:e[+-]?\d+)?)((?:\.\d+(?:e[+-]?\d+)?)+))+/gi,dots:/\./g},a.utils={map:function(t,e){for(var i=t.length,a=[],s=0;s<i;s++)a.push(e(t[s]));return a},filter:function(t,e){for(var i=t.length,a=[],s=0;s<i;s++)e(t[s])&&a.push(t[s]);return a},filterSVGElements:function(t){return this.filter(t,(function(t){return t instanceof e.SVGElement}))}},a.defaults={attrs:{"fill-opacity":1,"stroke-opacity":1,"stroke-width":0,"stroke-linejoin":"miter","stroke-linecap":"butt",fill:"#000000",stroke:"#000000",opacity:1,x:0,y:0,cx:0,cy:0,width:0,height:0,r:0,rx:0,ry:0,offset:0,"stop-opacity":1,"stop-color":"#000000","font-size":16,"font-family":"Helvetica, Arial, sans-serif","text-anchor":"start"}},a.Color=function(e){var i,s;this.r=0,this.g=0,this.b=0,e&&("string"==typeof e?a.regex.isRgb.test(e)?(i=a.regex.rgb.exec(e.replace(a.regex.whitespace,"")),this.r=parseInt(i[1]),this.g=parseInt(i[2]),this.b=parseInt(i[3])):a.regex.isHex.test(e)&&(i=a.regex.hex.exec(4==(s=e).length?["#",s.substring(1,2),s.substring(1,2),s.substring(2,3),s.substring(2,3),s.substring(3,4),s.substring(3,4)].join(""):s),this.r=parseInt(i[1],16),this.g=parseInt(i[2],16),this.b=parseInt(i[3],16)):"object"===t(e)&&(this.r=e.r,this.g=e.g,this.b=e.b))},a.extend(a.Color,{toString:function(){return this.toHex()},toHex:function(){return"#"+g(this.r)+g(this.g)+g(this.b)},toRgb:function(){return"rgb("+[this.r,this.g,this.b].join()+")"},brightness:function(){return this.r/255*.3+this.g/255*.59+this.b/255*.11},morph:function(t){return this.destination=new a.Color(t),this},at:function(t){return this.destination?(t=t<0?0:t>1?1:t,new a.Color({r:~~(this.r+(this.destination.r-this.r)*t),g:~~(this.g+(this.destination.g-this.g)*t),b:~~(this.b+(this.destination.b-this.b)*t)})):this}}),a.Color.test=function(t){return t+="",a.regex.isHex.test(t)||a.regex.isRgb.test(t)},a.Color.isRgb=function(t){return t&&"number"==typeof t.r&&"number"==typeof t.g&&"number"==typeof t.b},a.Color.isColor=function(t){return a.Color.isRgb(t)||a.Color.test(t)},a.Array=function(t,e){0==(t=(t||[]).valueOf()).length&&e&&(t=e.valueOf()),this.value=this.parse(t)},a.extend(a.Array,{toString:function(){return this.value.join(" ")},valueOf:function(){return this.value},parse:function(t){return t=t.valueOf(),Array.isArray(t)?t:this.split(t)}}),a.PointArray=function(t,e){a.Array.call(this,t,e||[[0,0]])},a.PointArray.prototype=new a.Array,a.PointArray.prototype.constructor=a.PointArray;for(var s={M:function(t,e,i){return e.x=i.x=t[0],e.y=i.y=t[1],["M",e.x,e.y]},L:function(t,e){return e.x=t[0],e.y=t[1],["L",t[0],t[1]]},H:function(t,e){return e.x=t[0],["H",t[0]]},V:function(t,e){return e.y=t[0],["V",t[0]]},C:function(t,e){return e.x=t[4],e.y=t[5],["C",t[0],t[1],t[2],t[3],t[4],t[5]]},Q:function(t,e){return e.x=t[2],e.y=t[3],["Q",t[0],t[1],t[2],t[3]]},Z:function(t,e,i){return e.x=i.x,e.y=i.y,["Z"]}},r="mlhvqtcsaz".split(""),n=0,o=r.length;n<o;++n)s[r[n]]=function(t){return function(e,i,a){if("H"==t)e[0]=e[0]+i.x;else if("V"==t)e[0]=e[0]+i.y;else if("A"==t)e[5]=e[5]+i.x,e[6]=e[6]+i.y;else for(var r=0,n=e.length;r<n;++r)e[r]=e[r]+(r%2?i.y:i.x);return s[t](e,i,a)}}(r[n].toUpperCase());a.PathArray=function(t,e){a.Array.call(this,t,e||[["M",0,0]])},a.PathArray.prototype=new a.Array,a.PathArray.prototype.constructor=a.PathArray,a.extend(a.PathArray,{toString:function(){return function(t){for(var e=0,i=t.length,a="";e<i;e++)a+=t[e][0],null!=t[e][1]&&(a+=t[e][1],null!=t[e][2]&&(a+=" ",a+=t[e][2],null!=t[e][3]&&(a+=" ",a+=t[e][3],a+=" ",a+=t[e][4],null!=t[e][5]&&(a+=" ",a+=t[e][5],a+=" ",a+=t[e][6],null!=t[e][7]&&(a+=" ",a+=t[e][7])))));return a+" "}(this.value)},move:function(t,e){var i=this.bbox();return i.x,i.y,this},at:function(t){if(!this.destination)return this;for(var e=this.value,i=this.destination.value,s=[],r=new a.PathArray,n=0,o=e.length;n<o;n++){s[n]=[e[n][0]];for(var l=1,h=e[n].length;l<h;l++)s[n][l]=e[n][l]+(i[n][l]-e[n][l])*t;"A"===s[n][0]&&(s[n][4]=+(0!=s[n][4]),s[n][5]=+(0!=s[n][5]))}return r.value=s,r},parse:function(t){if(t instanceof a.PathArray)return t.valueOf();var e,i={M:2,L:2,H:1,V:1,C:6,S:4,Q:4,T:2,A:7,Z:0};t="string"==typeof t?t.replace(a.regex.numbersWithDots,h).replace(a.regex.pathLetters," $& ").replace(a.regex.hyphen,"$1 -").trim().split(a.regex.delimiter):t.reduce((function(t,e){return[].concat.call(t,e)}),[]);var r=[],n=new a.Point,o=new a.Point,l=0,c=t.length;do{a.regex.isPathLetter.test(t[l])?(e=t[l],++l):"M"==e?e="L":"m"==e&&(e="l"),r.push(s[e].call(null,t.slice(l,l+=i[e.toUpperCase()]).map(parseFloat),n,o))}while(c>l);return r},bbox:function(){return a.parser.draw||a.prepare(),a.parser.path.setAttribute("d",this.toString()),a.parser.path.getBBox()}}),a.Number=a.invent({create:function(t,e){this.value=0,this.unit=e||"","number"==typeof t?this.value=isNaN(t)?0:isFinite(t)?t:t<0?-34e37:34e37:"string"==typeof t?(e=t.match(a.regex.numberAndUnit))&&(this.value=parseFloat(e[1]),"%"==e[5]?this.value/=100:"s"==e[5]&&(this.value*=1e3),this.unit=e[5]):t instanceof a.Number&&(this.value=t.valueOf(),this.unit=t.unit)},extend:{toString:function(){return("%"==this.unit?~~(1e8*this.value)/1e6:"s"==this.unit?this.value/1e3:this.value)+this.unit},toJSON:function(){return this.toString()},valueOf:function(){return this.value},plus:function(t){return t=new a.Number(t),new a.Number(this+t,this.unit||t.unit)},minus:function(t){return t=new a.Number(t),new a.Number(this-t,this.unit||t.unit)},times:function(t){return t=new a.Number(t),new a.Number(this*t,this.unit||t.unit)},divide:function(t){return t=new a.Number(t),new a.Number(this/t,this.unit||t.unit)},to:function(t){var e=new a.Number(this);return"string"==typeof t&&(e.unit=t),e},morph:function(t){return this.destination=new a.Number(t),t.relative&&(this.destination.value+=this.value),this},at:function(t){return this.destination?new a.Number(this.destination).minus(this).times(t).plus(this):this}}}),a.Element=a.invent({create:function(t){this._stroke=a.defaults.attrs.stroke,this._event=null,this.dom={},(this.node=t)&&(this.type=t.nodeName,this.node.instance=this,this._stroke=t.getAttribute("stroke")||this._stroke)},extend:{x:function(t){return this.attr("x",t)},y:function(t){return this.attr("y",t)},cx:function(t){return null==t?this.x()+this.width()/2:this.x(t-this.width()/2)},cy:function(t){return null==t?this.y()+this.height()/2:this.y(t-this.height()/2)},move:function(t,e){return this.x(t).y(e)},center:function(t,e){return this.cx(t).cy(e)},width:function(t){return this.attr("width",t)},height:function(t){return this.attr("height",t)},size:function(t,e){var i=u(this,t,e);return this.width(new a.Number(i.width)).height(new a.Number(i.height))},clone:function(t){this.writeDataToDom();var e=x(this.node.cloneNode(!0));return t?t.add(e):this.after(e),e},remove:function(){return this.parent()&&this.parent().removeElement(this),this},replace:function(t){return this.after(t).remove(),t},addTo:function(t){return t.put(this)},putIn:function(t){return t.add(this)},id:function(t){return this.attr("id",t)},show:function(){return this.style("display","")},hide:function(){return this.style("display","none")},visible:function(){return"none"!=this.style("display")},toString:function(){return this.attr("id")},classes:function(){var t=this.attr("class");return null==t?[]:t.trim().split(a.regex.delimiter)},hasClass:function(t){return-1!=this.classes().indexOf(t)},addClass:function(t){if(!this.hasClass(t)){var e=this.classes();e.push(t),this.attr("class",e.join(" "))}return this},removeClass:function(t){return this.hasClass(t)&&this.attr("class",this.classes().filter((function(e){return e!=t})).join(" ")),this},toggleClass:function(t){return this.hasClass(t)?this.removeClass(t):this.addClass(t)},reference:function(t){return a.get(this.attr(t))},parent:function(t){var i=this;if(!i.node.parentNode)return null;if(i=a.adopt(i.node.parentNode),!t)return i;for(;i&&i.node instanceof e.SVGElement;){if("string"==typeof t?i.matches(t):i instanceof t)return i;if(!i.node.parentNode||"#document"==i.node.parentNode.nodeName)return null;i=a.adopt(i.node.parentNode)}},doc:function(){return this instanceof a.Doc?this:this.parent(a.Doc)},parents:function(t){var e=[],i=this;do{if(!(i=i.parent(t))||!i.node)break;e.push(i)}while(i.parent);return e},matches:function(t){return function(t,e){return(t.matches||t.matchesSelector||t.msMatchesSelector||t.mozMatchesSelector||t.webkitMatchesSelector||t.oMatchesSelector).call(t,e)}(this.node,t)},native:function(){return this.node},svg:function(t){var e=i.createElement("svg");if(!(t&&this instanceof a.Parent))return e.appendChild(t=i.createElement("svg")),this.writeDataToDom(),t.appendChild(this.node.cloneNode(!0)),e.innerHTML.replace(/^<svg>/,"").replace(/<\/svg>$/,"");e.innerHTML="<svg>"+t.replace(/\n/,"").replace(/<([\w:-]+)([^<]+?)\/>/g,"<$1$2></$1>")+"</svg>";for(var s=0,r=e.firstChild.childNodes.length;s<r;s++)this.node.appendChild(e.firstChild.firstChild);return this},writeDataToDom:function(){return(this.each||this.lines)&&(this.each?this:this.lines()).each((function(){this.writeDataToDom()})),this.node.removeAttribute("svgjs:data"),Object.keys(this.dom).length&&this.node.setAttribute("svgjs:data",JSON.stringify(this.dom)),this},setData:function(t){return this.dom=t,this},is:function(t){return function(t,e){return t instanceof e}(this,t)}}}),a.easing={"-":function(t){return t},"<>":function(t){return-Math.cos(t*Math.PI)/2+.5},">":function(t){return Math.sin(t*Math.PI/2)},"<":function(t){return 1-Math.cos(t*Math.PI/2)}},a.morph=function(t){return function(e,i){return new a.MorphObj(e,i).at(t)}},a.Situation=a.invent({create:function(t){this.init=!1,this.reversed=!1,this.reversing=!1,this.duration=new a.Number(t.duration).valueOf(),this.delay=new a.Number(t.delay).valueOf(),this.start=+new Date+this.delay,this.finish=this.start+this.duration,this.ease=t.ease,this.loop=0,this.loops=!1,this.animations={},this.attrs={},this.styles={},this.transforms=[],this.once={}}}),a.FX=a.invent({create:function(t){this._target=t,this.situations=[],this.active=!1,this.situation=null,this.paused=!1,this.lastPos=0,this.pos=0,this.absPos=0,this._speed=1},extend:{animate:function(e,i,s){"object"===t(e)&&(i=e.ease,s=e.delay,e=e.duration);var r=new a.Situation({duration:e||1e3,delay:s||0,ease:a.easing[i||"-"]||i});return this.queue(r),this},target:function(t){return t&&t instanceof a.Element?(this._target=t,this):this._target},timeToAbsPos:function(t){return(t-this.situation.start)/(this.situation.duration/this._speed)},absPosToTime:function(t){return this.situation.duration/this._speed*t+this.situation.start},startAnimFrame:function(){this.stopAnimFrame(),this.animationFrame=e.requestAnimationFrame(function(){this.step()}.bind(this))},stopAnimFrame:function(){e.cancelAnimationFrame(this.animationFrame)},start:function(){return!this.active&&this.situation&&(this.active=!0,this.startCurrent()),this},startCurrent:function(){return this.situation.start=+new Date+this.situation.delay/this._speed,this.situation.finish=this.situation.start+this.situation.duration/this._speed,this.initAnimations().step()},queue:function(t){return("function"==typeof t||t instanceof a.Situation)&&this.situations.push(t),this.situation||(this.situation=this.situations.shift()),this},dequeue:function(){return this.stop(),this.situation=this.situations.shift(),this.situation&&(this.situation instanceof a.Situation?this.start():this.situation.call(this)),this},initAnimations:function(){var t,e=this.situation;if(e.init)return this;for(var i in e.animations){t=this.target()[i](),Array.isArray(t)||(t=[t]),Array.isArray(e.animations[i])||(e.animations[i]=[e.animations[i]]);for(var s=t.length;s--;)e.animations[i][s]instanceof a.Number&&(t[s]=new a.Number(t[s])),e.animations[i][s]=t[s].morph(e.animations[i][s])}for(var i in e.attrs)e.attrs[i]=new a.MorphObj(this.target().attr(i),e.attrs[i]);for(var i in e.styles)e.styles[i]=new a.MorphObj(this.target().style(i),e.styles[i]);return e.initialTransformation=this.target().matrixify(),e.init=!0,this},clearQueue:function(){return this.situations=[],this},clearCurrent:function(){return this.situation=null,this},stop:function(t,e){var i=this.active;return this.active=!1,e&&this.clearQueue(),t&&this.situation&&(!i&&this.startCurrent(),this.atEnd()),this.stopAnimFrame(),this.clearCurrent()},after:function(t){var e=this.last();return this.target().on("finished.fx",(function i(a){a.detail.situation==e&&(t.call(this,e),this.off("finished.fx",i))})),this._callStart()},during:function(t){var e=this.last(),i=function(i){i.detail.situation==e&&t.call(this,i.detail.pos,a.morph(i.detail.pos),i.detail.eased,e)};return this.target().off("during.fx",i).on("during.fx",i),this.after((function(){this.off("during.fx",i)})),this._callStart()},afterAll:function(t){var e=function e(i){t.call(this),this.off("allfinished.fx",e)};return this.target().off("allfinished.fx",e).on("allfinished.fx",e),this._callStart()},last:function(){return this.situations.length?this.situations[this.situations.length-1]:this.situation},add:function(t,e,i){return this.last()[i||"animations"][t]=e,this._callStart()},step:function(t){var e,i,a;t||(this.absPos=this.timeToAbsPos(+new Date)),!1!==this.situation.loops?(e=Math.max(this.absPos,0),i=Math.floor(e),!0===this.situation.loops||i<this.situation.loops?(this.pos=e-i,a=this.situation.loop,this.situation.loop=i):(this.absPos=this.situation.loops,this.pos=1,a=this.situation.loop-1,this.situation.loop=this.situation.loops),this.situation.reversing&&(this.situation.reversed=this.situation.reversed!=Boolean((this.situation.loop-a)%2))):(this.absPos=Math.min(this.absPos,1),this.pos=this.absPos),this.pos<0&&(this.pos=0),this.situation.reversed&&(this.pos=1-this.pos);var s=this.situation.ease(this.pos);for(var r in this.situation.once)r>this.lastPos&&r<=s&&(this.situation.once[r].call(this.target(),this.pos,s),delete this.situation.once[r]);return this.active&&this.target().fire("during",{pos:this.pos,eased:s,fx:this,situation:this.situation}),this.situation?(this.eachAt(),1==this.pos&&!this.situation.reversed||this.situation.reversed&&0==this.pos?(this.stopAnimFrame(),this.target().fire("finished",{fx:this,situation:this.situation}),this.situations.length||(this.target().fire("allfinished"),this.situations.length||(this.target().off(".fx"),this.active=!1)),this.active?this.dequeue():this.clearCurrent()):!this.paused&&this.active&&this.startAnimFrame(),this.lastPos=s,this):this},eachAt:function(){var t,e=this,i=this.target(),s=this.situation;for(var r in s.animations)t=[].concat(s.animations[r]).map((function(t){return"string"!=typeof t&&t.at?t.at(s.ease(e.pos),e.pos):t})),i[r].apply(i,t);for(var r in s.attrs)t=[r].concat(s.attrs[r]).map((function(t){return"string"!=typeof t&&t.at?t.at(s.ease(e.pos),e.pos):t})),i.attr.apply(i,t);for(var r in s.styles)t=[r].concat(s.styles[r]).map((function(t){return"string"!=typeof t&&t.at?t.at(s.ease(e.pos),e.pos):t})),i.style.apply(i,t);if(s.transforms.length){t=s.initialTransformation,r=0;for(var n=s.transforms.length;r<n;r++){var o=s.transforms[r];o instanceof a.Matrix?t=o.relative?t.multiply((new a.Matrix).morph(o).at(s.ease(this.pos))):t.morph(o).at(s.ease(this.pos)):(o.relative||o.undo(t.extract()),t=t.multiply(o.at(s.ease(this.pos))))}i.matrix(t)}return this},once:function(t,e,i){var a=this.last();return i||(t=a.ease(t)),a.once[t]=e,this},_callStart:function(){return setTimeout(function(){this.start()}.bind(this),0),this}},parent:a.Element,construct:{animate:function(t,e,i){return(this.fx||(this.fx=new a.FX(this))).animate(t,e,i)},delay:function(t){return(this.fx||(this.fx=new a.FX(this))).delay(t)},stop:function(t,e){return this.fx&&this.fx.stop(t,e),this},finish:function(){return this.fx&&this.fx.finish(),this}}}),a.MorphObj=a.invent({create:function(t,e){return a.Color.isColor(e)?new a.Color(t).morph(e):a.regex.delimiter.test(t)?a.regex.pathLetters.test(t)?new a.PathArray(t).morph(e):new a.Array(t).morph(e):a.regex.numberAndUnit.test(e)?new a.Number(t).morph(e):(this.value=t,void(this.destination=e))},extend:{at:function(t,e){return e<1?this.value:this.destination},valueOf:function(){return this.value}}}),a.extend(a.FX,{attr:function(e,i,a){if("object"===t(e))for(var s in e)this.attr(s,e[s]);else this.add(e,i,"attrs");return this},plot:function(t,e,i,a){return 4==arguments.length?this.plot([t,e,i,a]):this.add("plot",new(this.target().morphArray)(t))}}),a.Box=a.invent({create:function(e,i,s,r){if(!("object"!==t(e)||e instanceof a.Element))return a.Box.call(this,null!=e.left?e.left:e.x,null!=e.top?e.top:e.y,e.width,e.height);4==arguments.length&&(this.x=e,this.y=i,this.width=s,this.height=r),b(this)}}),a.BBox=a.invent({create:function(t){if(a.Box.apply(this,[].slice.call(arguments)),t instanceof a.Element){var e;try{if(!i.documentElement.contains){for(var s=t.node;s.parentNode;)s=s.parentNode;if(s!=i)throw new Error("Element not in the dom")}e=t.node.getBBox()}catch(i){if(t instanceof a.Shape){a.parser.draw||a.prepare();var r=t.clone(a.parser.draw.instance).show();e=r.node.getBBox(),r.remove()}else e={x:t.node.clientLeft,y:t.node.clientTop,width:t.node.clientWidth,height:t.node.clientHeight}}a.Box.call(this,e)}},inherit:a.Box,parent:a.Element,construct:{bbox:function(){return new a.BBox(this)}}}),a.BBox.prototype.constructor=a.BBox,a.Matrix=a.invent({create:function(e){var i=p([1,0,0,1,0,0]);e=e instanceof a.Element?e.matrixify():"string"==typeof e?p(e.split(a.regex.delimiter).map(parseFloat)):6==arguments.length?p([].slice.call(arguments)):Array.isArray(e)?p(e):"object"===t(e)?e:i;for(var s=v.length-1;s>=0;--s)this[v[s]]=null!=e[v[s]]?e[v[s]]:i[v[s]]},extend:{extract:function(){var t=f(this,0,1),e=(f(this,1,0),180/Math.PI*Math.atan2(t.y,t.x)-90);return{x:this.e,y:this.f,transformedX:(this.e*Math.cos(e*Math.PI/180)+this.f*Math.sin(e*Math.PI/180))/Math.sqrt(this.a*this.a+this.b*this.b),transformedY:(this.f*Math.cos(e*Math.PI/180)+this.e*Math.sin(-e*Math.PI/180))/Math.sqrt(this.c*this.c+this.d*this.d),rotation:e,a:this.a,b:this.b,c:this.c,d:this.d,e:this.e,f:this.f,matrix:new a.Matrix(this)}},clone:function(){return new a.Matrix(this)},morph:function(t){return this.destination=new a.Matrix(t),this},multiply:function(t){return new a.Matrix(this.native().multiply(function(t){return t instanceof a.Matrix||(t=new a.Matrix(t)),t}(t).native()))},inverse:function(){return new a.Matrix(this.native().inverse())},translate:function(t,e){return new a.Matrix(this.native().translate(t||0,e||0))},native:function(){for(var t=a.parser.native.createSVGMatrix(),e=v.length-1;e>=0;e--)t[v[e]]=this[v[e]];return t},toString:function(){return"matrix("+m(this.a)+","+m(this.b)+","+m(this.c)+","+m(this.d)+","+m(this.e)+","+m(this.f)+")"}},parent:a.Element,construct:{ctm:function(){return new a.Matrix(this.node.getCTM())},screenCTM:function(){if(this instanceof a.Nested){var t=this.rect(1,1),e=t.node.getScreenCTM();return t.remove(),new a.Matrix(e)}return new a.Matrix(this.node.getScreenCTM())}}}),a.Point=a.invent({create:function(e,i){var a;a=Array.isArray(e)?{x:e[0],y:e[1]}:"object"===t(e)?{x:e.x,y:e.y}:null!=e?{x:e,y:null!=i?i:e}:{x:0,y:0},this.x=a.x,this.y=a.y},extend:{clone:function(){return new a.Point(this)},morph:function(t,e){return this.destination=new a.Point(t,e),this}}}),a.extend(a.Element,{point:function(t,e){return new a.Point(t,e).transform(this.screenCTM().inverse())}}),a.extend(a.Element,{attr:function(e,i,s){if(null==e){for(e={},s=(i=this.node.attributes).length-1;s>=0;s--)e[i[s].nodeName]=a.regex.isNumber.test(i[s].nodeValue)?parseFloat(i[s].nodeValue):i[s].nodeValue;return e}if("object"===t(e))for(var r in e)this.attr(r,e[r]);else if(null===i)this.node.removeAttribute(e);else{if(null==i)return null==(i=this.node.getAttribute(e))?a.defaults.attrs[e]:a.regex.isNumber.test(i)?parseFloat(i):i;"stroke-width"==e?this.attr("stroke",parseFloat(i)>0?this._stroke:null):"stroke"==e&&(this._stroke=i),"fill"!=e&&"stroke"!=e||(a.regex.isImage.test(i)&&(i=this.doc().defs().image(i,0,0)),i instanceof a.Image&&(i=this.doc().defs().pattern(0,0,(function(){this.add(i)})))),"number"==typeof i?i=new a.Number(i):a.Color.isColor(i)?i=new a.Color(i):Array.isArray(i)&&(i=new a.Array(i)),"leading"==e?this.leading&&this.leading(i):"string"==typeof s?this.node.setAttributeNS(s,e,i.toString()):this.node.setAttribute(e,i.toString()),!this.rebuild||"font-size"!=e&&"x"!=e||this.rebuild(e,i)}return this}}),a.extend(a.Element,{transform:function(e,i){var s;return"object"!==t(e)?(s=new a.Matrix(this).extract(),"string"==typeof e?s[e]:s):(s=new a.Matrix(this),i=!!i||!!e.relative,null!=e.a&&(s=i?s.multiply(new a.Matrix(e)):new a.Matrix(e)),this.attr("transform",s))}}),a.extend(a.Element,{untransform:function(){return this.attr("transform",null)},matrixify:function(){return(this.attr("transform")||"").split(a.regex.transforms).slice(0,-1).map((function(t){var e=t.trim().split("(");return[e[0],e[1].split(a.regex.delimiter).map((function(t){return parseFloat(t)}))]})).reduce((function(t,e){return"matrix"==e[0]?t.multiply(p(e[1])):t[e[0]].apply(t,e[1])}),new a.Matrix)},toParent:function(t){if(this==t)return this;var e=this.screenCTM(),i=t.screenCTM().inverse();return this.addTo(t).untransform().transform(i.multiply(e)),this},toDoc:function(){return this.toParent(this.doc())}}),a.Transformation=a.invent({create:function(e,i){if(arguments.length>1&&"boolean"!=typeof i)return this.constructor.call(this,[].slice.call(arguments));if(Array.isArray(e))for(var a=0,s=this.arguments.length;a<s;++a)this[this.arguments[a]]=e[a];else if("object"===t(e))for(a=0,s=this.arguments.length;a<s;++a)this[this.arguments[a]]=e[this.arguments[a]];this.inversed=!1,!0===i&&(this.inversed=!0)}}),a.Translate=a.invent({parent:a.Matrix,inherit:a.Transformation,create:function(t,e){this.constructor.apply(this,[].slice.call(arguments))},extend:{arguments:["transformedX","transformedY"],method:"translate"}}),a.extend(a.Element,{style:function(e,i){if(0==arguments.length)return this.node.style.cssText||"";if(arguments.length<2)if("object"===t(e))for(var s in e)this.style(s,e[s]);else{if(!a.regex.isCss.test(e))return this.node.style[c(e)];for(e=e.split(/\s*;\s*/).filter((function(t){return!!t})).map((function(t){return t.split(/\s*:\s*/)}));i=e.pop();)this.style(i[0],i[1])}else this.node.style[c(e)]=null===i||a.regex.isBlank.test(i)?"":i;return this}}),a.Parent=a.invent({create:function(t){this.constructor.call(this,t)},inherit:a.Element,extend:{children:function(){return a.utils.map(a.utils.filterSVGElements(this.node.childNodes),(function(t){return a.adopt(t)}))},add:function(t,e){return null==e?this.node.appendChild(t.node):t.node!=this.node.childNodes[e]&&this.node.insertBefore(t.node,this.node.childNodes[e]),this},put:function(t,e){return this.add(t,e),t},has:function(t){return this.index(t)>=0},index:function(t){return[].slice.call(this.node.childNodes).indexOf(t.node)},get:function(t){return a.adopt(this.node.childNodes[t])},first:function(){return this.get(0)},last:function(){return this.get(this.node.childNodes.length-1)},each:function(t,e){for(var i=this.children(),s=0,r=i.length;s<r;s++)i[s]instanceof a.Element&&t.apply(i[s],[s,i]),e&&i[s]instanceof a.Container&&i[s].each(t,e);return this},removeElement:function(t){return this.node.removeChild(t.node),this},clear:function(){for(;this.node.hasChildNodes();)this.node.removeChild(this.node.lastChild);return delete this._defs,this},defs:function(){return this.doc().defs()}}}),a.extend(a.Parent,{ungroup:function(t,e){return 0===e||this instanceof a.Defs||this.node==a.parser.draw?this:(t=t||(this instanceof a.Doc?this:this.parent(a.Parent)),e=e||1/0,this.each((function(){return this instanceof a.Defs?this:this instanceof a.Parent?this.ungroup(t,e-1):this.toParent(t)})),this.node.firstChild||this.remove(),this)},flatten:function(t,e){return this.ungroup(t,e)}}),a.Container=a.invent({create:function(t){this.constructor.call(this,t)},inherit:a.Parent}),a.ViewBox=a.invent({parent:a.Container,construct:{}}),["click","dblclick","mousedown","mouseup","mouseover","mouseout","mousemove","touchstart","touchmove","touchleave","touchend","touchcancel"].forEach((function(t){a.Element.prototype[t]=function(e){return a.on(this.node,t,e),this}})),a.listeners=[],a.handlerMap=[],a.listenerId=0,a.on=function(t,e,i,s,r){var n=i.bind(s||t.instance||t),o=(a.handlerMap.indexOf(t)+1||a.handlerMap.push(t))-1,l=e.split(".")[0],h=e.split(".")[1]||"*";a.listeners[o]=a.listeners[o]||{},a.listeners[o][l]=a.listeners[o][l]||{},a.listeners[o][l][h]=a.listeners[o][l][h]||{},i._svgjsListenerId||(i._svgjsListenerId=++a.listenerId),a.listeners[o][l][h][i._svgjsListenerId]=n,t.addEventListener(l,n,r||!1)},a.off=function(t,e,i){var s=a.handlerMap.indexOf(t),r=e&&e.split(".")[0],n=e&&e.split(".")[1],o="";if(-1!=s)if(i){if("function"==typeof i&&(i=i._svgjsListenerId),!i)return;a.listeners[s][r]&&a.listeners[s][r][n||"*"]&&(t.removeEventListener(r,a.listeners[s][r][n||"*"][i],!1),delete a.listeners[s][r][n||"*"][i])}else if(n&&r){if(a.listeners[s][r]&&a.listeners[s][r][n]){for(var l in a.listeners[s][r][n])a.off(t,[r,n].join("."),l);delete a.listeners[s][r][n]}}else if(n)for(var h in a.listeners[s])for(var o in a.listeners[s][h])n===o&&a.off(t,[h,n].join("."));else if(r){if(a.listeners[s][r]){for(var o in a.listeners[s][r])a.off(t,[r,o].join("."));delete a.listeners[s][r]}}else{for(var h in a.listeners[s])a.off(t,h);delete a.listeners[s],delete a.handlerMap[s]}},a.extend(a.Element,{on:function(t,e,i,s){return a.on(this.node,t,e,i,s),this},off:function(t,e){return a.off(this.node,t,e),this},fire:function(t,i){return t instanceof e.Event?this.node.dispatchEvent(t):this.node.dispatchEvent(t=new a.CustomEvent(t,{detail:i,cancelable:!0})),this._event=t,this},event:function(){return this._event}}),a.Defs=a.invent({create:"defs",inherit:a.Container}),a.G=a.invent({create:"g",inherit:a.Container,extend:{x:function(t){return null==t?this.transform("x"):this.transform({x:t-this.x()},!0)}},construct:{group:function(){return this.put(new a.G)}}}),a.Doc=a.invent({create:function(t){t&&("svg"==(t="string"==typeof t?i.getElementById(t):t).nodeName?this.constructor.call(this,t):(this.constructor.call(this,a.create("svg")),t.appendChild(this.node),this.size("100%","100%")),this.namespace().defs())},inherit:a.Container,extend:{namespace:function(){return this.attr({xmlns:a.ns,version:"1.1"}).attr("xmlns:xlink",a.xlink,a.xmlns).attr("xmlns:svgjs",a.svgjs,a.xmlns)},defs:function(){var t;return this._defs||((t=this.node.getElementsByTagName("defs")[0])?this._defs=a.adopt(t):this._defs=new a.Defs,this.node.appendChild(this._defs.node)),this._defs},parent:function(){return this.node.parentNode&&"#document"!=this.node.parentNode.nodeName?this.node.parentNode:null},remove:function(){return this.parent()&&this.parent().removeChild(this.node),this},clear:function(){for(;this.node.hasChildNodes();)this.node.removeChild(this.node.lastChild);return delete this._defs,a.parser.draw&&!a.parser.draw.parentNode&&this.node.appendChild(a.parser.draw),this},clone:function(t){this.writeDataToDom();var e=this.node,i=x(e.cloneNode(!0));return t?(t.node||t).appendChild(i.node):e.parentNode.insertBefore(i.node,e.nextSibling),i}}}),a.extend(a.Element,{}),a.Gradient=a.invent({create:function(t){this.constructor.call(this,a.create(t+"Gradient")),this.type=t},inherit:a.Container,extend:{at:function(t,e,i){return this.put(new a.Stop).update(t,e,i)},update:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this},fill:function(){return"url(#"+this.id()+")"},toString:function(){return this.fill()},attr:function(t,e,i){return"transform"==t&&(t="gradientTransform"),a.Container.prototype.attr.call(this,t,e,i)}},construct:{gradient:function(t,e){return this.defs().gradient(t,e)}}}),a.extend(a.Gradient,a.FX,{from:function(t,e){return"radial"==(this._target||this).type?this.attr({fx:new a.Number(t),fy:new a.Number(e)}):this.attr({x1:new a.Number(t),y1:new a.Number(e)})},to:function(t,e){return"radial"==(this._target||this).type?this.attr({cx:new a.Number(t),cy:new a.Number(e)}):this.attr({x2:new a.Number(t),y2:new a.Number(e)})}}),a.extend(a.Defs,{gradient:function(t,e){return this.put(new a.Gradient(t)).update(e)}}),a.Stop=a.invent({create:"stop",inherit:a.Element,extend:{update:function(t){return("number"==typeof t||t instanceof a.Number)&&(t={offset:arguments[0],color:arguments[1],opacity:arguments[2]}),null!=t.opacity&&this.attr("stop-opacity",t.opacity),null!=t.color&&this.attr("stop-color",t.color),null!=t.offset&&this.attr("offset",new a.Number(t.offset)),this}}}),a.Pattern=a.invent({create:"pattern",inherit:a.Container,extend:{fill:function(){return"url(#"+this.id()+")"},update:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this},toString:function(){return this.fill()},attr:function(t,e,i){return"transform"==t&&(t="patternTransform"),a.Container.prototype.attr.call(this,t,e,i)}},construct:{pattern:function(t,e,i){return this.defs().pattern(t,e,i)}}}),a.extend(a.Defs,{pattern:function(t,e,i){return this.put(new a.Pattern).update(i).attr({x:0,y:0,width:t,height:e,patternUnits:"userSpaceOnUse"})}}),a.Shape=a.invent({create:function(t){this.constructor.call(this,t)},inherit:a.Element}),a.Symbol=a.invent({create:"symbol",inherit:a.Container,construct:{symbol:function(){return this.put(new a.Symbol)}}}),a.Use=a.invent({create:"use",inherit:a.Shape,extend:{element:function(t,e){return this.attr("href",(e||"")+"#"+t,a.xlink)}},construct:{use:function(t,e){return this.put(new a.Use).element(t,e)}}}),a.Rect=a.invent({create:"rect",inherit:a.Shape,construct:{rect:function(t,e){return this.put(new a.Rect).size(t,e)}}}),a.Circle=a.invent({create:"circle",inherit:a.Shape,construct:{circle:function(t){return this.put(new a.Circle).rx(new a.Number(t).divide(2)).move(0,0)}}}),a.extend(a.Circle,a.FX,{rx:function(t){return this.attr("r",t)},ry:function(t){return this.rx(t)}}),a.Ellipse=a.invent({create:"ellipse",inherit:a.Shape,construct:{ellipse:function(t,e){return this.put(new a.Ellipse).size(t,e).move(0,0)}}}),a.extend(a.Ellipse,a.Rect,a.FX,{rx:function(t){return this.attr("rx",t)},ry:function(t){return this.attr("ry",t)}}),a.extend(a.Circle,a.Ellipse,{x:function(t){return null==t?this.cx()-this.rx():this.cx(t+this.rx())},y:function(t){return null==t?this.cy()-this.ry():this.cy(t+this.ry())},cx:function(t){return null==t?this.attr("cx"):this.attr("cx",t)},cy:function(t){return null==t?this.attr("cy"):this.attr("cy",t)},width:function(t){return null==t?2*this.rx():this.rx(new a.Number(t).divide(2))},height:function(t){return null==t?2*this.ry():this.ry(new a.Number(t).divide(2))},size:function(t,e){var i=u(this,t,e);return this.rx(new a.Number(i.width).divide(2)).ry(new a.Number(i.height).divide(2))}}),a.Line=a.invent({create:"line",inherit:a.Shape,extend:{array:function(){return new a.PointArray([[this.attr("x1"),this.attr("y1")],[this.attr("x2"),this.attr("y2")]])},plot:function(t,e,i,s){return null==t?this.array():(t=void 0!==e?{x1:t,y1:e,x2:i,y2:s}:new a.PointArray(t).toLine(),this.attr(t))},move:function(t,e){return this.attr(this.array().move(t,e).toLine())},size:function(t,e){var i=u(this,t,e);return this.attr(this.array().size(i.width,i.height).toLine())}},construct:{line:function(t,e,i,s){return a.Line.prototype.plot.apply(this.put(new a.Line),null!=t?[t,e,i,s]:[0,0,0,0])}}}),a.Polyline=a.invent({create:"polyline",inherit:a.Shape,construct:{polyline:function(t){return this.put(new a.Polyline).plot(t||new a.PointArray)}}}),a.Polygon=a.invent({create:"polygon",inherit:a.Shape,construct:{polygon:function(t){return this.put(new a.Polygon).plot(t||new a.PointArray)}}}),a.extend(a.Polyline,a.Polygon,{array:function(){return this._array||(this._array=new a.PointArray(this.attr("points")))},plot:function(t){return null==t?this.array():this.clear().attr("points","string"==typeof t?t:this._array=new a.PointArray(t))},clear:function(){return delete this._array,this},move:function(t,e){return this.attr("points",this.array().move(t,e))},size:function(t,e){var i=u(this,t,e);return this.attr("points",this.array().size(i.width,i.height))}}),a.extend(a.Line,a.Polyline,a.Polygon,{morphArray:a.PointArray,x:function(t){return null==t?this.bbox().x:this.move(t,this.bbox().y)},y:function(t){return null==t?this.bbox().y:this.move(this.bbox().x,t)},width:function(t){var e=this.bbox();return null==t?e.width:this.size(t,e.height)},height:function(t){var e=this.bbox();return null==t?e.height:this.size(e.width,t)}}),a.Path=a.invent({create:"path",inherit:a.Shape,extend:{morphArray:a.PathArray,array:function(){return this._array||(this._array=new a.PathArray(this.attr("d")))},plot:function(t){return null==t?this.array():this.clear().attr("d","string"==typeof t?t:this._array=new a.PathArray(t))},clear:function(){return delete this._array,this}},construct:{path:function(t){return this.put(new a.Path).plot(t||new a.PathArray)}}}),a.Image=a.invent({create:"image",inherit:a.Shape,extend:{load:function(t){if(!t)return this;var i=this,s=new e.Image;return a.on(s,"load",(function(){a.off(s);var e=i.parent(a.Pattern);null!==e&&(0==i.width()&&0==i.height()&&i.size(s.width,s.height),e&&0==e.width()&&0==e.height()&&e.size(i.width(),i.height()),"function"==typeof i._loaded&&i._loaded.call(i,{width:s.width,height:s.height,ratio:s.width/s.height,url:t}))})),a.on(s,"error",(function(t){a.off(s),"function"==typeof i._error&&i._error.call(i,t)})),this.attr("href",s.src=this.src=t,a.xlink)},loaded:function(t){return this._loaded=t,this},error:function(t){return this._error=t,this}},construct:{image:function(t,e,i){return this.put(new a.Image).load(t).size(e||0,i||e||0)}}}),a.Text=a.invent({create:function(){this.constructor.call(this,a.create("text")),this.dom.leading=new a.Number(1.3),this._rebuild=!0,this._build=!1,this.attr("font-family",a.defaults.attrs["font-family"])},inherit:a.Shape,extend:{x:function(t){return null==t?this.attr("x"):this.attr("x",t)},text:function(t){if(void 0===t){t="";for(var e=this.node.childNodes,i=0,s=e.length;i<s;++i)0!=i&&3!=e[i].nodeType&&1==a.adopt(e[i]).dom.newLined&&(t+="\n"),t+=e[i].textContent;return t}if(this.clear().build(!0),"function"==typeof t)t.call(this,this);else{i=0;for(var r=(t=t.split("\n")).length;i<r;i++)this.tspan(t[i]).newLine()}return this.build(!1).rebuild()},size:function(t){return this.attr("font-size",t).rebuild()},leading:function(t){return null==t?this.dom.leading:(this.dom.leading=new a.Number(t),this.rebuild())},lines:function(){var t=(this.textPath&&this.textPath()||this).node,e=a.utils.map(a.utils.filterSVGElements(t.childNodes),(function(t){return a.adopt(t)}));return new a.Set(e)},rebuild:function(t){if("boolean"==typeof t&&(this._rebuild=t),this._rebuild){var e=this,i=0,s=this.dom.leading*new a.Number(this.attr("font-size"));this.lines().each((function(){this.dom.newLined&&(e.textPath()||this.attr("x",e.attr("x")),"\n"==this.text()?i+=s:(this.attr("dy",s+i),i=0))})),this.fire("rebuild")}return this},build:function(t){return this._build=!!t,this},setData:function(t){return this.dom=t,this.dom.leading=new a.Number(t.leading||1.3),this}},construct:{text:function(t){return this.put(new a.Text).text(t)},plain:function(t){return this.put(new a.Text).plain(t)}}}),a.Tspan=a.invent({create:"tspan",inherit:a.Shape,extend:{text:function(t){return null==t?this.node.textContent+(this.dom.newLined?"\n":""):("function"==typeof t?t.call(this,this):this.plain(t),this)},dx:function(t){return this.attr("dx",t)},dy:function(t){return this.attr("dy",t)},newLine:function(){var t=this.parent(a.Text);return this.dom.newLined=!0,this.dy(t.dom.leading*t.attr("font-size")).attr("x",t.x())}}}),a.extend(a.Text,a.Tspan,{plain:function(t){return!1===this._build&&this.clear(),this.node.appendChild(i.createTextNode(t)),this},tspan:function(t){var e=(this.textPath&&this.textPath()||this).node,i=new a.Tspan;return!1===this._build&&this.clear(),e.appendChild(i.node),i.text(t)},clear:function(){for(var t=(this.textPath&&this.textPath()||this).node;t.hasChildNodes();)t.removeChild(t.lastChild);return this},length:function(){return this.node.getComputedTextLength()}}),a.TextPath=a.invent({create:"textPath",inherit:a.Parent,parent:a.Text,construct:{morphArray:a.PathArray,array:function(){var t=this.track();return t?t.array():null},plot:function(t){var e=this.track(),i=null;return e&&(i=e.plot(t)),null==t?i:this},track:function(){var t=this.textPath();if(t)return t.reference("href")},textPath:function(){if(this.node.firstChild&&"textPath"==this.node.firstChild.nodeName)return a.adopt(this.node.firstChild)}}}),a.Nested=a.invent({create:function(){this.constructor.call(this,a.create("svg")),this.style("overflow","visible")},inherit:a.Container,construct:{nested:function(){return this.put(new a.Nested)}}});var l={stroke:["color","width","opacity","linecap","linejoin","miterlimit","dasharray","dashoffset"],fill:["color","opacity","rule"],prefix:function(t,e){return"color"==e?t:t+"-"+e}};function h(t,e,i,s){return i+s.replace(a.regex.dots," .")}function c(t){return t.toLowerCase().replace(/-(.)/g,(function(t,e){return e.toUpperCase()}))}function d(t){return t.charAt(0).toUpperCase()+t.slice(1)}function g(t){var e=t.toString(16);return 1==e.length?"0"+e:e}function u(t,e,i){if(null==e||null==i){var a=t.bbox();null==e?e=a.width/a.height*i:null==i&&(i=a.height/a.width*e)}return{width:e,height:i}}function f(t,e,i){return{x:e*t.a+i*t.c+0,y:e*t.b+i*t.d+0}}function p(t){return{a:t[0],b:t[1],c:t[2],d:t[3],e:t[4],f:t[5]}}function x(t){for(var i=t.childNodes.length-1;i>=0;i--)t.childNodes[i]instanceof e.SVGElement&&x(t.childNodes[i]);return a.adopt(t).id(a.eid(t.nodeName))}function b(t){return null==t.x&&(t.x=0,t.y=0,t.width=0,t.height=0),t.w=t.width,t.h=t.height,t.x2=t.x+t.width,t.y2=t.y+t.height,t.cx=t.x+t.width/2,t.cy=t.y+t.height/2,t}function m(t){return Math.abs(t)>1e-37?t:0}["fill","stroke"].forEach((function(t){var e={};e[t]=function(e){if(void 0===e)return this;if("string"==typeof e||a.Color.isRgb(e)||e&&"function"==typeof e.fill)this.attr(t,e);else for(var i=l[t].length-1;i>=0;i--)null!=e[l[t][i]]&&this.attr(l.prefix(t,l[t][i]),e[l[t][i]]);return this},a.extend(a.Element,a.FX,e)})),a.extend(a.Element,a.FX,{translate:function(t,e){return this.transform({x:t,y:e})},matrix:function(t){return this.attr("transform",new a.Matrix(6==arguments.length?[].slice.call(arguments):t))},opacity:function(t){return this.attr("opacity",t)},dx:function(t){return this.x(new a.Number(t).plus(this instanceof a.FX?0:this.x()),!0)},dy:function(t){return this.y(new a.Number(t).plus(this instanceof a.FX?0:this.y()),!0)}}),a.extend(a.Path,{length:function(){return this.node.getTotalLength()},pointAt:function(t){return this.node.getPointAtLength(t)}}),a.Set=a.invent({create:function(t){Array.isArray(t)?this.members=t:this.clear()},extend:{add:function(){for(var t=[].slice.call(arguments),e=0,i=t.length;e<i;e++)this.members.push(t[e]);return this},remove:function(t){var e=this.index(t);return e>-1&&this.members.splice(e,1),this},each:function(t){for(var e=0,i=this.members.length;e<i;e++)t.apply(this.members[e],[e,this.members]);return this},clear:function(){return this.members=[],this},length:function(){return this.members.length},has:function(t){return this.index(t)>=0},index:function(t){return this.members.indexOf(t)},get:function(t){return this.members[t]},first:function(){return this.get(0)},last:function(){return this.get(this.members.length-1)},valueOf:function(){return this.members}},construct:{set:function(t){return new a.Set(t)}}}),a.FX.Set=a.invent({create:function(t){this.set=t}}),a.Set.inherit=function(){var t=[];for(var e in a.Shape.prototype)"function"==typeof a.Shape.prototype[e]&&"function"!=typeof a.Set.prototype[e]&&t.push(e);for(var e in t.forEach((function(t){a.Set.prototype[t]=function(){for(var e=0,i=this.members.length;e<i;e++)this.members[e]&&"function"==typeof this.members[e][t]&&this.members[e][t].apply(this.members[e],arguments);return"animate"==t?this.fx||(this.fx=new a.FX.Set(this)):this}})),t=[],a.FX.prototype)"function"==typeof a.FX.prototype[e]&&"function"!=typeof a.FX.Set.prototype[e]&&t.push(e);t.forEach((function(t){a.FX.Set.prototype[t]=function(){for(var e=0,i=this.set.members.length;e<i;e++)this.set.members[e].fx[t].apply(this.set.members[e].fx,arguments);return this}}))},a.extend(a.Element,{}),a.extend(a.Element,{remember:function(e,i){if("object"===t(arguments[0]))for(var a in e)this.remember(a,e[a]);else{if(1==arguments.length)return this.memory()[e];this.memory()[e]=i}return this},forget:function(){if(0==arguments.length)this._memory={};else for(var t=arguments.length-1;t>=0;t--)delete this.memory()[arguments[t]];return this},memory:function(){return this._memory||(this._memory={})}}),a.get=function(t){var e=i.getElementById(function(t){var e=(t||"").toString().match(a.regex.reference);if(e)return e[1]}(t)||t);return a.adopt(e)},a.select=function(t,e){return new a.Set(a.utils.map((e||i).querySelectorAll(t),(function(t){return a.adopt(t)})))},a.extend(a.Parent,{select:function(t){return a.select(t,this.node)}});var v="abcdef".split("");if("function"!=typeof e.CustomEvent){var y=function(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var a=i.createEvent("CustomEvent");return a.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),a};y.prototype=e.Event.prototype,a.CustomEvent=y}else a.CustomEvent=e.CustomEvent;return a},"function"==typeof define&&define.amd?define((function(){return k(w,w.document)})):"object"===("undefined"==typeof exports?"undefined":t(exports))&&"undefined"!=typeof module?module.exports=w.document?k(w,w.document):function(t){return k(t,t.document)}:w.SVG=k(w,w.document),
 /*! svg.filter.js - v2.0.2 - 2016-02-24
   * https://github.com/wout/svg.filter.js
   * Copyright (c) 2016 Wout Fierens; Licensed MIT */
@@ -11,4 +11,4 @@ function(){SVG.Filter=SVG.invent({create:"filter",inherit:SVG.Parent,extend:{sou
 /*! svg.draggable.js - v2.2.2 - 2019-01-08
   * https://github.com/svgdotjs/svg.draggable.js
   * Copyright (c) 2019 Wout Fierens; Licensed MIT */
-function(){function t(t){t.remember("_draggable",this),this.el=t}t.prototype.init=function(t,e){var i=this;this.constraint=t,this.value=e,this.el.on("mousedown.drag",(function(t){i.start(t)})),this.el.on("touchstart.drag",(function(t){i.start(t)}))},t.prototype.transformPoint=function(t,e){var i=(t=t||window.event).changedTouches&&t.changedTouches[0]||t;return this.p.x=i.clientX-(e||0),this.p.y=i.clientY,this.p.matrixTransform(this.m)},t.prototype.getBBox=function(){var t=this.el.bbox();return this.el instanceof SVG.Nested&&(t=this.el.rbox()),(this.el instanceof SVG.G||this.el instanceof SVG.Use||this.el instanceof SVG.Nested)&&(t.x=this.el.x(),t.y=this.el.y()),t},t.prototype.start=function(t){if("click"!=t.type&&"mousedown"!=t.type&&"mousemove"!=t.type||1==(t.which||t.buttons)){var e=this;if(this.el.fire("beforedrag",{event:t,handler:this}),!this.el.event().defaultPrevented){t.preventDefault(),t.stopPropagation(),this.parent=this.parent||this.el.parent(SVG.Nested)||this.el.parent(SVG.Doc),this.p=this.parent.node.createSVGPoint(),this.m=this.el.node.getScreenCTM().inverse();var i,a=this.getBBox();if(this.el instanceof SVG.Text)switch(i=this.el.node.getComputedTextLength(),this.el.attr("text-anchor")){case"middle":i/=2;break;case"start":i=0}this.startPoints={point:this.transformPoint(t,i),box:a,transform:this.el.transform()},SVG.on(window,"mousemove.drag",(function(t){e.drag(t)})),SVG.on(window,"touchmove.drag",(function(t){e.drag(t)})),SVG.on(window,"mouseup.drag",(function(t){e.end(t)})),SVG.on(window,"touchend.drag",(function(t){e.end(t)})),this.el.fire("dragstart",{event:t,p:this.startPoints.point,m:this.m,handler:this})}}},t.prototype.drag=function(t){var e=this.getBBox(),i=this.transformPoint(t),a=this.startPoints.box.x+i.x-this.startPoints.point.x,s=this.startPoints.box.y+i.y-this.startPoints.point.y,r=this.constraint,n=i.x-this.startPoints.point.x,o=i.y-this.startPoints.point.y;if(this.el.fire("dragmove",{event:t,p:i,m:this.m,handler:this}),this.el.event().defaultPrevented)return i;if("function"==typeof r){var l=r.call(this.el,a,s,this.m);"boolean"==typeof l&&(l={x:l,y:l}),!0===l.x?this.el.x(a):!1!==l.x&&this.el.x(l.x),!0===l.y?this.el.y(s):!1!==l.y&&this.el.y(l.y)}else"object"==typeof r&&(null!=r.minX&&a<r.minX?n=(a=r.minX)-this.startPoints.box.x:null!=r.maxX&&a>r.maxX-e.width&&(n=(a=r.maxX-e.width)-this.startPoints.box.x),null!=r.minY&&s<r.minY?o=(s=r.minY)-this.startPoints.box.y:null!=r.maxY&&s>r.maxY-e.height&&(o=(s=r.maxY-e.height)-this.startPoints.box.y),null!=r.snapToGrid&&(a-=a%r.snapToGrid,s-=s%r.snapToGrid,n-=n%r.snapToGrid,o-=o%r.snapToGrid),this.el instanceof SVG.G?this.el.matrix(this.startPoints.transform).transform({x:n,y:o},!0):this.el.move(a,s));return i},t.prototype.end=function(t){var e=this.drag(t);this.el.fire("dragend",{event:t,p:e,m:this.m,handler:this}),SVG.off(window,"mousemove.drag"),SVG.off(window,"touchmove.drag"),SVG.off(window,"mouseup.drag"),SVG.off(window,"touchend.drag")},SVG.extend(SVG.Element,{draggable:function(e,i){"function"!=typeof e&&"object"!=typeof e||(i=e,e=!0);var a=this.remember("_draggable")||new t(this);return(e=void 0===e||e)?a.init(i||{},e):(this.off("mousedown.drag"),this.off("touchstart.drag")),this}})}.call(void 0),function(){function t(t){this.el=t,t.remember("_selectHandler",this),this.pointSelection={isSelected:!1},this.rectSelection={isSelected:!1},this.pointsList={lt:[0,0],rt:["width",0],rb:["width","height"],lb:[0,"height"],t:["width",0],r:["width","height"],b:["width","height"],l:[0,"height"]},this.pointCoord=function(t,e,i){var a="string"!=typeof t?t:e[t];return i?a/2:a},this.pointCoords=function(t,e){var i=this.pointsList[t];return{x:this.pointCoord(i[0],e,"t"===t||"b"===t),y:this.pointCoord(i[1],e,"r"===t||"l"===t)}}}t.prototype.init=function(t,e){var i=this.el.bbox();this.options={};var a=this.el.selectize.defaults.points;for(var s in this.el.selectize.defaults)this.options[s]=this.el.selectize.defaults[s],void 0!==e[s]&&(this.options[s]=e[s]);var r=["points","pointsExclude"];for(var s in r){var n=this.options[r[s]];"string"==typeof n?n=n.length>0?n.split(/\s*,\s*/i):[]:"boolean"==typeof n&&"points"===r[s]&&(n=n?a:[]),this.options[r[s]]=n}this.options.points=[a,this.options.points].reduce((function(t,e){return t.filter((function(t){return e.indexOf(t)>-1}))})),this.options.points=[this.options.points,this.options.pointsExclude].reduce((function(t,e){return t.filter((function(t){return e.indexOf(t)<0}))})),this.parent=this.el.parent(),this.nested=this.nested||this.parent.group(),this.nested.matrix(new SVG.Matrix(this.el).translate(i.x,i.y)),this.options.deepSelect&&-1!==["line","polyline","polygon"].indexOf(this.el.type)?this.selectPoints(t):this.selectRect(t),this.observe(),this.cleanup()},t.prototype.selectPoints=function(t){return this.pointSelection.isSelected=t,this.pointSelection.set?this:(this.pointSelection.set=this.parent.set(),this.drawPoints(),this)},t.prototype.getPointArray=function(){var t=this.el.bbox();return this.el.array().valueOf().map((function(e){return[e[0]-t.x,e[1]-t.y]}))},t.prototype.drawPoints=function(){for(var t=this,e=this.getPointArray(),i=0,a=e.length;i<a;++i){var s=function(e){return function(i){(i=i||window.event).preventDefault?i.preventDefault():i.returnValue=!1,i.stopPropagation();var a=i.pageX||i.touches[0].pageX,s=i.pageY||i.touches[0].pageY;t.el.fire("point",{x:a,y:s,i:e,event:i})}}(i),r=this.drawPoint(e[i][0],e[i][1]).addClass(this.options.classPoints).addClass(this.options.classPoints+"_point").on("touchstart",s).on("mousedown",s);this.pointSelection.set.add(r)}},t.prototype.drawPoint=function(t,e){var i=this.options.pointType;switch(i){case"circle":return this.drawCircle(t,e);case"rect":return this.drawRect(t,e);default:if("function"==typeof i)return i.call(this,t,e);throw new Error("Unknown "+i+" point type!")}},t.prototype.drawCircle=function(t,e){return this.nested.circle(this.options.pointSize).center(t,e)},t.prototype.drawRect=function(t,e){return this.nested.rect(this.options.pointSize,this.options.pointSize).center(t,e)},t.prototype.updatePointSelection=function(){var t=this.getPointArray();this.pointSelection.set.each((function(e){this.cx()===t[e][0]&&this.cy()===t[e][1]||this.center(t[e][0],t[e][1])}))},t.prototype.updateRectSelection=function(){var t=this,e=this.el.bbox();if(this.rectSelection.set.get(0).attr({width:e.width,height:e.height}),this.options.points.length&&this.options.points.map((function(i,a){var s=t.pointCoords(i,e);t.rectSelection.set.get(a+1).center(s.x,s.y)})),this.options.rotationPoint){var i=this.rectSelection.set.length();this.rectSelection.set.get(i-1).center(e.width/2,20)}},t.prototype.selectRect=function(t){var e=this,i=this.el.bbox();function a(t){return function(i){(i=i||window.event).preventDefault?i.preventDefault():i.returnValue=!1,i.stopPropagation();var a=i.pageX||i.touches[0].pageX,s=i.pageY||i.touches[0].pageY;e.el.fire(t,{x:a,y:s,event:i})}}if(this.rectSelection.isSelected=t,this.rectSelection.set=this.rectSelection.set||this.parent.set(),this.rectSelection.set.get(0)||this.rectSelection.set.add(this.nested.rect(i.width,i.height).addClass(this.options.classRect)),this.options.points.length&&this.rectSelection.set.length()<2){this.options.points.map((function(t,s){var r=e.pointCoords(t,i),n=e.drawPoint(r.x,r.y).attr("class",e.options.classPoints+"_"+t).on("mousedown",a(t)).on("touchstart",a(t));e.rectSelection.set.add(n)})),this.rectSelection.set.each((function(){this.addClass(e.options.classPoints)}))}if(this.options.rotationPoint&&(this.options.points&&!this.rectSelection.set.get(9)||!this.options.points&&!this.rectSelection.set.get(1))){var s=function(t){(t=t||window.event).preventDefault?t.preventDefault():t.returnValue=!1,t.stopPropagation();var i=t.pageX||t.touches[0].pageX,a=t.pageY||t.touches[0].pageY;e.el.fire("rot",{x:i,y:a,event:t})},r=this.drawPoint(i.width/2,20).attr("class",this.options.classPoints+"_rot").on("touchstart",s).on("mousedown",s);this.rectSelection.set.add(r)}},t.prototype.handler=function(){var t=this.el.bbox();this.nested.matrix(new SVG.Matrix(this.el).translate(t.x,t.y)),this.rectSelection.isSelected&&this.updateRectSelection(),this.pointSelection.isSelected&&this.updatePointSelection()},t.prototype.observe=function(){var t=this;if(MutationObserver)if(this.rectSelection.isSelected||this.pointSelection.isSelected)this.observerInst=this.observerInst||new MutationObserver((function(){t.handler()})),this.observerInst.observe(this.el.node,{attributes:!0});else try{this.observerInst.disconnect(),delete this.observerInst}catch(t){}else this.el.off("DOMAttrModified.select"),(this.rectSelection.isSelected||this.pointSelection.isSelected)&&this.el.on("DOMAttrModified.select",(function(){t.handler()}))},t.prototype.cleanup=function(){!this.rectSelection.isSelected&&this.rectSelection.set&&(this.rectSelection.set.each((function(){this.remove()})),this.rectSelection.set.clear(),delete this.rectSelection.set),!this.pointSelection.isSelected&&this.pointSelection.set&&(this.pointSelection.set.each((function(){this.remove()})),this.pointSelection.set.clear(),delete this.pointSelection.set),this.pointSelection.isSelected||this.rectSelection.isSelected||(this.nested.remove(),delete this.nested)},SVG.extend(SVG.Element,{selectize:function(e,i){return"object"==typeof e&&(i=e,e=!0),(this.remember("_selectHandler")||new t(this)).init(void 0===e||e,i||{}),this}}),SVG.Element.prototype.selectize.defaults={points:["lt","rt","rb","lb","t","r","b","l"],pointsExclude:[],classRect:"svg_select_boundingRect",classPoints:"svg_select_points",pointSize:7,rotationPoint:!0,deepSelect:!1,pointType:"circle"}}(),function(){(function(){function t(t){t.remember("_resizeHandler",this),this.el=t,this.parameters={},this.lastUpdateCall=null,this.p=t.doc().node.createSVGPoint()}t.prototype.transformPoint=function(t,e,i){return this.p.x=t-(this.offset.x-window.pageXOffset),this.p.y=e-(this.offset.y-window.pageYOffset),this.p.matrixTransform(i||this.m)},t.prototype._extractPosition=function(t){return{x:null!=t.clientX?t.clientX:t.touches[0].clientX,y:null!=t.clientY?t.clientY:t.touches[0].clientY}},t.prototype.init=function(t){var e=this;if(this.stop(),"stop"!==t){for(var i in this.options={},this.el.resize.defaults)this.options[i]=this.el.resize.defaults[i],void 0!==t[i]&&(this.options[i]=t[i]);this.el.on("lt.resize",(function(t){e.resize(t||window.event)})),this.el.on("rt.resize",(function(t){e.resize(t||window.event)})),this.el.on("rb.resize",(function(t){e.resize(t||window.event)})),this.el.on("lb.resize",(function(t){e.resize(t||window.event)})),this.el.on("t.resize",(function(t){e.resize(t||window.event)})),this.el.on("r.resize",(function(t){e.resize(t||window.event)})),this.el.on("b.resize",(function(t){e.resize(t||window.event)})),this.el.on("l.resize",(function(t){e.resize(t||window.event)})),this.el.on("rot.resize",(function(t){e.resize(t||window.event)})),this.el.on("point.resize",(function(t){e.resize(t||window.event)})),this.update()}},t.prototype.stop=function(){return this.el.off("lt.resize"),this.el.off("rt.resize"),this.el.off("rb.resize"),this.el.off("lb.resize"),this.el.off("t.resize"),this.el.off("r.resize"),this.el.off("b.resize"),this.el.off("l.resize"),this.el.off("rot.resize"),this.el.off("point.resize"),this},t.prototype.resize=function(t){var e=this;this.m=this.el.node.getScreenCTM().inverse(),this.offset={x:window.pageXOffset,y:window.pageYOffset};var i=this._extractPosition(t.detail.event);if(this.parameters={type:this.el.type,p:this.transformPoint(i.x,i.y),x:t.detail.x,y:t.detail.y,box:this.el.bbox(),rotation:this.el.transform().rotation},"text"===this.el.type&&(this.parameters.fontSize=this.el.attr()["font-size"]),void 0!==t.detail.i){var a=this.el.array().valueOf();this.parameters.i=t.detail.i,this.parameters.pointCoords=[a[t.detail.i][0],a[t.detail.i][1]]}switch(t.type){case"lt":this.calc=function(t,e){var i=this.snapToGrid(t,e);if(this.parameters.box.width-i[0]>0&&this.parameters.box.height-i[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x+i[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize-i[0]);i=this.checkAspectRatio(i),this.el.move(this.parameters.box.x+i[0],this.parameters.box.y+i[1]).size(this.parameters.box.width-i[0],this.parameters.box.height-i[1])}};break;case"rt":this.calc=function(t,e){var i=this.snapToGrid(t,e,2);if(this.parameters.box.width+i[0]>0&&this.parameters.box.height-i[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x-i[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize+i[0]);i=this.checkAspectRatio(i,!0),this.el.move(this.parameters.box.x,this.parameters.box.y+i[1]).size(this.parameters.box.width+i[0],this.parameters.box.height-i[1])}};break;case"rb":this.calc=function(t,e){var i=this.snapToGrid(t,e,0);if(this.parameters.box.width+i[0]>0&&this.parameters.box.height+i[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x-i[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize+i[0]);i=this.checkAspectRatio(i),this.el.move(this.parameters.box.x,this.parameters.box.y).size(this.parameters.box.width+i[0],this.parameters.box.height+i[1])}};break;case"lb":this.calc=function(t,e){var i=this.snapToGrid(t,e,1);if(this.parameters.box.width-i[0]>0&&this.parameters.box.height+i[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x+i[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize-i[0]);i=this.checkAspectRatio(i,!0),this.el.move(this.parameters.box.x+i[0],this.parameters.box.y).size(this.parameters.box.width-i[0],this.parameters.box.height+i[1])}};break;case"t":this.calc=function(t,e){var i=this.snapToGrid(t,e,2);if(this.parameters.box.height-i[1]>0){if("text"===this.parameters.type)return;this.el.move(this.parameters.box.x,this.parameters.box.y+i[1]).height(this.parameters.box.height-i[1])}};break;case"r":this.calc=function(t,e){var i=this.snapToGrid(t,e,0);if(this.parameters.box.width+i[0]>0){if("text"===this.parameters.type)return;this.el.move(this.parameters.box.x,this.parameters.box.y).width(this.parameters.box.width+i[0])}};break;case"b":this.calc=function(t,e){var i=this.snapToGrid(t,e,0);if(this.parameters.box.height+i[1]>0){if("text"===this.parameters.type)return;this.el.move(this.parameters.box.x,this.parameters.box.y).height(this.parameters.box.height+i[1])}};break;case"l":this.calc=function(t,e){var i=this.snapToGrid(t,e,1);if(this.parameters.box.width-i[0]>0){if("text"===this.parameters.type)return;this.el.move(this.parameters.box.x+i[0],this.parameters.box.y).width(this.parameters.box.width-i[0])}};break;case"rot":this.calc=function(t,e){var i=t+this.parameters.p.x,a=e+this.parameters.p.y,s=Math.atan2(this.parameters.p.y-this.parameters.box.y-this.parameters.box.height/2,this.parameters.p.x-this.parameters.box.x-this.parameters.box.width/2),r=Math.atan2(a-this.parameters.box.y-this.parameters.box.height/2,i-this.parameters.box.x-this.parameters.box.width/2),n=this.parameters.rotation+180*(r-s)/Math.PI+this.options.snapToAngle/2;this.el.center(this.parameters.box.cx,this.parameters.box.cy).rotate(n-n%this.options.snapToAngle,this.parameters.box.cx,this.parameters.box.cy)};break;case"point":this.calc=function(t,e){var i=this.snapToGrid(t,e,this.parameters.pointCoords[0],this.parameters.pointCoords[1]),a=this.el.array().valueOf();a[this.parameters.i][0]=this.parameters.pointCoords[0]+i[0],a[this.parameters.i][1]=this.parameters.pointCoords[1]+i[1],this.el.plot(a)}}this.el.fire("resizestart",{dx:this.parameters.x,dy:this.parameters.y,event:t}),SVG.on(window,"touchmove.resize",(function(t){e.update(t||window.event)})),SVG.on(window,"touchend.resize",(function(){e.done()})),SVG.on(window,"mousemove.resize",(function(t){e.update(t||window.event)})),SVG.on(window,"mouseup.resize",(function(){e.done()}))},t.prototype.update=function(t){if(t){var e=this._extractPosition(t),i=this.transformPoint(e.x,e.y),a=i.x-this.parameters.p.x,s=i.y-this.parameters.p.y;this.lastUpdateCall=[a,s],this.calc(a,s),this.el.fire("resizing",{dx:a,dy:s,event:t})}else this.lastUpdateCall&&this.calc(this.lastUpdateCall[0],this.lastUpdateCall[1])},t.prototype.done=function(){this.lastUpdateCall=null,SVG.off(window,"mousemove.resize"),SVG.off(window,"mouseup.resize"),SVG.off(window,"touchmove.resize"),SVG.off(window,"touchend.resize"),this.el.fire("resizedone")},t.prototype.snapToGrid=function(t,e,i,a){var s;return void 0!==a?s=[(i+t)%this.options.snapToGrid,(a+e)%this.options.snapToGrid]:(i=null==i?3:i,s=[(this.parameters.box.x+t+(1&i?0:this.parameters.box.width))%this.options.snapToGrid,(this.parameters.box.y+e+(2&i?0:this.parameters.box.height))%this.options.snapToGrid]),t<0&&(s[0]-=this.options.snapToGrid),e<0&&(s[1]-=this.options.snapToGrid),t-=Math.abs(s[0])<this.options.snapToGrid/2?s[0]:s[0]-(t<0?-this.options.snapToGrid:this.options.snapToGrid),e-=Math.abs(s[1])<this.options.snapToGrid/2?s[1]:s[1]-(e<0?-this.options.snapToGrid:this.options.snapToGrid),this.constraintToBox(t,e,i,a)},t.prototype.constraintToBox=function(t,e,i,a){var s,r,n=this.options.constraint||{};return void 0!==a?(s=i,r=a):(s=this.parameters.box.x+(1&i?0:this.parameters.box.width),r=this.parameters.box.y+(2&i?0:this.parameters.box.height)),void 0!==n.minX&&s+t<n.minX&&(t=n.minX-s),void 0!==n.maxX&&s+t>n.maxX&&(t=n.maxX-s),void 0!==n.minY&&r+e<n.minY&&(e=n.minY-r),void 0!==n.maxY&&r+e>n.maxY&&(e=n.maxY-r),[t,e]},t.prototype.checkAspectRatio=function(t,e){if(!this.options.saveAspectRatio)return t;var i=t.slice(),a=this.parameters.box.width/this.parameters.box.height,s=this.parameters.box.width+t[0],r=this.parameters.box.height-t[1],n=s/r;return n<a?(i[1]=s/a-this.parameters.box.height,e&&(i[1]=-i[1])):n>a&&(i[0]=this.parameters.box.width-r*a,e&&(i[0]=-i[0])),i},SVG.extend(SVG.Element,{resize:function(e){return(this.remember("_resizeHandler")||new t(this)).init(e||{}),this}}),SVG.Element.prototype.resize.defaults={snapToAngle:.1,snapToGrid:1,constraint:{},saveAspectRatio:!1}}).call(this)}();!function(t,e){void 0===e&&(e={});var i=e.insertAt;if(t&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===i&&a.firstChild?a.insertBefore(s,a.firstChild):a.appendChild(s),s.styleSheet?s.styleSheet.cssText=t:s.appendChild(document.createTextNode(t))}}('.apexcharts-canvas {\n  position: relative;\n  user-select: none;\n  /* cannot give overflow: hidden as it will crop tooltips which overflow outside chart area */\n}\n\n\n/* scrollbar is not visible by default for legend, hence forcing the visibility */\n.apexcharts-canvas ::-webkit-scrollbar {\n  -webkit-appearance: none;\n  width: 6px;\n}\n\n.apexcharts-canvas ::-webkit-scrollbar-thumb {\n  border-radius: 4px;\n  background-color: rgba(0, 0, 0, .5);\n  box-shadow: 0 0 1px rgba(255, 255, 255, .5);\n  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);\n}\n\n.apexcharts-canvas.apexcharts-theme-dark {\n  background: #343F57;\n}\n\n.apexcharts-inner {\n  position: relative;\n}\n\n.apexcharts-text tspan {\n  font-family: inherit;\n}\n\n.legend-mouseover-inactive {\n  transition: 0.15s ease all;\n  opacity: 0.20;\n}\n\n.apexcharts-series-collapsed {\n  opacity: 0;\n}\n\n.apexcharts-tooltip {\n  border-radius: 5px;\n  box-shadow: 2px 2px 6px -4px #999;\n  cursor: default;\n  font-size: 14px;\n  left: 62px;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  top: 20px;\n  overflow: hidden;\n  white-space: nowrap;\n  z-index: 12;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-tooltip.apexcharts-theme-light {\n  border: 1px solid #e3e3e3;\n  background: rgba(255, 255, 255, 0.96);\n}\n\n.apexcharts-tooltip.apexcharts-theme-dark {\n  color: #fff;\n  background: rgba(30, 30, 30, 0.8);\n}\n\n.apexcharts-tooltip * {\n  font-family: inherit;\n}\n\n.apexcharts-tooltip.apexcharts-active {\n  opacity: 1;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-tooltip-title {\n  padding: 6px;\n  font-size: 15px;\n  margin-bottom: 4px;\n}\n\n.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {\n  background: #ECEFF1;\n  border-bottom: 1px solid #ddd;\n}\n\n.apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {\n  background: rgba(0, 0, 0, 0.7);\n  border-bottom: 1px solid #333;\n}\n\n.apexcharts-tooltip-text-value,\n.apexcharts-tooltip-text-z-value {\n  display: inline-block;\n  font-weight: 600;\n  margin-left: 5px;\n}\n\n.apexcharts-tooltip-text-z-label:empty,\n.apexcharts-tooltip-text-z-value:empty {\n  display: none;\n}\n\n.apexcharts-tooltip-text-value,\n.apexcharts-tooltip-text-z-value {\n  font-weight: 600;\n}\n\n.apexcharts-tooltip-marker {\n  width: 12px;\n  height: 12px;\n  position: relative;\n  top: 0px;\n  margin-right: 10px;\n  border-radius: 50%;\n}\n\n.apexcharts-tooltip-series-group {\n  padding: 0 10px;\n  display: none;\n  text-align: left;\n  justify-content: left;\n  align-items: center;\n}\n\n.apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-marker {\n  opacity: 1;\n}\n\n.apexcharts-tooltip-series-group.apexcharts-active,\n.apexcharts-tooltip-series-group:last-child {\n  padding-bottom: 4px;\n}\n\n.apexcharts-tooltip-series-group-hidden {\n  opacity: 0;\n  height: 0;\n  line-height: 0;\n  padding: 0 !important;\n}\n\n.apexcharts-tooltip-y-group {\n  padding: 6px 0 5px;\n}\n\n.apexcharts-tooltip-candlestick {\n  padding: 4px 8px;\n}\n\n.apexcharts-tooltip-candlestick>div {\n  margin: 4px 0;\n}\n\n.apexcharts-tooltip-candlestick span.value {\n  font-weight: bold;\n}\n\n.apexcharts-tooltip-rangebar {\n  padding: 5px 8px;\n}\n\n.apexcharts-tooltip-rangebar .category {\n  font-weight: 600;\n  color: #777;\n}\n\n.apexcharts-tooltip-rangebar .series-name {\n  font-weight: bold;\n  display: block;\n  margin-bottom: 5px;\n}\n\n.apexcharts-xaxistooltip {\n  opacity: 0;\n  padding: 9px 10px;\n  pointer-events: none;\n  color: #373d3f;\n  font-size: 13px;\n  text-align: center;\n  border-radius: 2px;\n  position: absolute;\n  z-index: 10;\n  background: #ECEFF1;\n  border: 1px solid #90A4AE;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-xaxistooltip.apexcharts-theme-dark {\n  background: rgba(0, 0, 0, 0.7);\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  color: #fff;\n}\n\n.apexcharts-xaxistooltip:after,\n.apexcharts-xaxistooltip:before {\n  left: 50%;\n  border: solid transparent;\n  content: " ";\n  height: 0;\n  width: 0;\n  position: absolute;\n  pointer-events: none;\n}\n\n.apexcharts-xaxistooltip:after {\n  border-color: rgba(236, 239, 241, 0);\n  border-width: 6px;\n  margin-left: -6px;\n}\n\n.apexcharts-xaxistooltip:before {\n  border-color: rgba(144, 164, 174, 0);\n  border-width: 7px;\n  margin-left: -7px;\n}\n\n.apexcharts-xaxistooltip-bottom:after,\n.apexcharts-xaxistooltip-bottom:before {\n  bottom: 100%;\n}\n\n.apexcharts-xaxistooltip-top:after,\n.apexcharts-xaxistooltip-top:before {\n  top: 100%;\n}\n\n.apexcharts-xaxistooltip-bottom:after {\n  border-bottom-color: #ECEFF1;\n}\n\n.apexcharts-xaxistooltip-bottom:before {\n  border-bottom-color: #90A4AE;\n}\n\n.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:after {\n  border-bottom-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:before {\n  border-bottom-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-xaxistooltip-top:after {\n  border-top-color: #ECEFF1\n}\n\n.apexcharts-xaxistooltip-top:before {\n  border-top-color: #90A4AE;\n}\n\n.apexcharts-xaxistooltip-top.apexcharts-theme-dark:after {\n  border-top-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-xaxistooltip-top.apexcharts-theme-dark:before {\n  border-top-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-xaxistooltip.apexcharts-active {\n  opacity: 1;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-yaxistooltip {\n  opacity: 0;\n  padding: 4px 10px;\n  pointer-events: none;\n  color: #373d3f;\n  font-size: 13px;\n  text-align: center;\n  border-radius: 2px;\n  position: absolute;\n  z-index: 10;\n  background: #ECEFF1;\n  border: 1px solid #90A4AE;\n}\n\n.apexcharts-yaxistooltip.apexcharts-theme-dark {\n  background: rgba(0, 0, 0, 0.7);\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  color: #fff;\n}\n\n.apexcharts-yaxistooltip:after,\n.apexcharts-yaxistooltip:before {\n  top: 50%;\n  border: solid transparent;\n  content: " ";\n  height: 0;\n  width: 0;\n  position: absolute;\n  pointer-events: none;\n}\n\n.apexcharts-yaxistooltip:after {\n  border-color: rgba(236, 239, 241, 0);\n  border-width: 6px;\n  margin-top: -6px;\n}\n\n.apexcharts-yaxistooltip:before {\n  border-color: rgba(144, 164, 174, 0);\n  border-width: 7px;\n  margin-top: -7px;\n}\n\n.apexcharts-yaxistooltip-left:after,\n.apexcharts-yaxistooltip-left:before {\n  left: 100%;\n}\n\n.apexcharts-yaxistooltip-right:after,\n.apexcharts-yaxistooltip-right:before {\n  right: 100%;\n}\n\n.apexcharts-yaxistooltip-left:after {\n  border-left-color: #ECEFF1;\n}\n\n.apexcharts-yaxistooltip-left:before {\n  border-left-color: #90A4AE;\n}\n\n.apexcharts-yaxistooltip-left.apexcharts-theme-dark:after {\n  border-left-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-yaxistooltip-left.apexcharts-theme-dark:before {\n  border-left-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-yaxistooltip-right:after {\n  border-right-color: #ECEFF1;\n}\n\n.apexcharts-yaxistooltip-right:before {\n  border-right-color: #90A4AE;\n}\n\n.apexcharts-yaxistooltip-right.apexcharts-theme-dark:after {\n  border-right-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-yaxistooltip-right.apexcharts-theme-dark:before {\n  border-right-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-yaxistooltip.apexcharts-active {\n  opacity: 1;\n}\n\n.apexcharts-yaxistooltip-hidden {\n  display: none;\n}\n\n.apexcharts-xcrosshairs,\n.apexcharts-ycrosshairs {\n  pointer-events: none;\n  opacity: 0;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-xcrosshairs.apexcharts-active,\n.apexcharts-ycrosshairs.apexcharts-active {\n  opacity: 1;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-ycrosshairs-hidden {\n  opacity: 0;\n}\n\n.apexcharts-selection-rect {\n  cursor: move;\n}\n\n.svg_select_boundingRect, .svg_select_points_rot {\n  pointer-events: none;\n  opacity: 0;\n  visibility: hidden;\n}\n.apexcharts-selection-rect + g .svg_select_boundingRect,\n.apexcharts-selection-rect + g .svg_select_points_rot {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.apexcharts-selection-rect + g .svg_select_points_l,\n.apexcharts-selection-rect + g .svg_select_points_r {\n  cursor: ew-resize;\n  opacity: 1;\n  visibility: visible;\n}\n\n.svg_select_points {\n  fill: #efefef;\n  stroke: #333;\n  rx: 2;\n}\n\n.apexcharts-canvas.apexcharts-zoomable .hovering-zoom {\n  cursor: crosshair\n}\n\n.apexcharts-canvas.apexcharts-zoomable .hovering-pan {\n  cursor: move\n}\n\n.apexcharts-zoom-icon,\n.apexcharts-zoomin-icon,\n.apexcharts-zoomout-icon,\n.apexcharts-reset-icon,\n.apexcharts-pan-icon,\n.apexcharts-selection-icon,\n.apexcharts-menu-icon,\n.apexcharts-toolbar-custom-icon {\n  cursor: pointer;\n  width: 20px;\n  height: 20px;\n  line-height: 24px;\n  color: #6E8192;\n  text-align: center;\n}\n\n.apexcharts-zoom-icon svg,\n.apexcharts-zoomin-icon svg,\n.apexcharts-zoomout-icon svg,\n.apexcharts-reset-icon svg,\n.apexcharts-menu-icon svg {\n  fill: #6E8192;\n}\n\n.apexcharts-selection-icon svg {\n  fill: #444;\n  transform: scale(0.76)\n}\n\n.apexcharts-theme-dark .apexcharts-zoom-icon svg,\n.apexcharts-theme-dark .apexcharts-zoomin-icon svg,\n.apexcharts-theme-dark .apexcharts-zoomout-icon svg,\n.apexcharts-theme-dark .apexcharts-reset-icon svg,\n.apexcharts-theme-dark .apexcharts-pan-icon svg,\n.apexcharts-theme-dark .apexcharts-selection-icon svg,\n.apexcharts-theme-dark .apexcharts-menu-icon svg,\n.apexcharts-theme-dark .apexcharts-toolbar-custom-icon svg {\n  fill: #f3f4f5;\n}\n\n.apexcharts-canvas .apexcharts-zoom-icon.apexcharts-selected svg,\n.apexcharts-canvas .apexcharts-selection-icon.apexcharts-selected svg,\n.apexcharts-canvas .apexcharts-reset-zoom-icon.apexcharts-selected svg {\n  fill: #008FFB;\n}\n\n.apexcharts-theme-light .apexcharts-selection-icon:not(.apexcharts-selected):hover svg,\n.apexcharts-theme-light .apexcharts-zoom-icon:not(.apexcharts-selected):hover svg,\n.apexcharts-theme-light .apexcharts-zoomin-icon:hover svg,\n.apexcharts-theme-light .apexcharts-zoomout-icon:hover svg,\n.apexcharts-theme-light .apexcharts-reset-icon:hover svg,\n.apexcharts-theme-light .apexcharts-menu-icon:hover svg {\n  fill: #333;\n}\n\n.apexcharts-selection-icon,\n.apexcharts-menu-icon {\n  position: relative;\n}\n\n.apexcharts-reset-icon {\n  margin-left: 5px;\n}\n\n.apexcharts-zoom-icon,\n.apexcharts-reset-icon,\n.apexcharts-menu-icon {\n  transform: scale(0.85);\n}\n\n.apexcharts-zoomin-icon,\n.apexcharts-zoomout-icon {\n  transform: scale(0.7)\n}\n\n.apexcharts-zoomout-icon {\n  margin-right: 3px;\n}\n\n.apexcharts-pan-icon {\n  transform: scale(0.62);\n  position: relative;\n  left: 1px;\n  top: 0px;\n}\n\n.apexcharts-pan-icon svg {\n  fill: #fff;\n  stroke: #6E8192;\n  stroke-width: 2;\n}\n\n.apexcharts-pan-icon.apexcharts-selected svg {\n  stroke: #008FFB;\n}\n\n.apexcharts-pan-icon:not(.apexcharts-selected):hover svg {\n  stroke: #333;\n}\n\n.apexcharts-toolbar {\n  position: absolute;\n  z-index: 11;\n  max-width: 176px;\n  text-align: right;\n  border-radius: 3px;\n  padding: 0px 6px 2px 6px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.apexcharts-menu {\n  background: #fff;\n  position: absolute;\n  top: 100%;\n  border: 1px solid #ddd;\n  border-radius: 3px;\n  padding: 3px;\n  right: 10px;\n  opacity: 0;\n  min-width: 110px;\n  transition: 0.15s ease all;\n  pointer-events: none;\n}\n\n.apexcharts-menu.apexcharts-menu-open {\n  opacity: 1;\n  pointer-events: all;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-menu-item {\n  padding: 6px 7px;\n  font-size: 12px;\n  cursor: pointer;\n}\n\n.apexcharts-theme-light .apexcharts-menu-item:hover {\n  background: #eee;\n}\n\n.apexcharts-theme-dark .apexcharts-menu {\n  background: rgba(0, 0, 0, 0.7);\n  color: #fff;\n}\n\n@media screen and (min-width: 768px) {\n  .apexcharts-canvas:hover .apexcharts-toolbar {\n    opacity: 1;\n  }\n}\n\n.apexcharts-datalabel.apexcharts-element-hidden {\n  opacity: 0;\n}\n\n.apexcharts-pie-label,\n.apexcharts-datalabels,\n.apexcharts-datalabel,\n.apexcharts-datalabel-label,\n.apexcharts-datalabel-value {\n  cursor: default;\n  pointer-events: none;\n}\n\n.apexcharts-pie-label-delay {\n  opacity: 0;\n  animation-name: opaque;\n  animation-duration: 0.3s;\n  animation-fill-mode: forwards;\n  animation-timing-function: ease;\n}\n\n.apexcharts-canvas .apexcharts-element-hidden {\n  opacity: 0;\n}\n\n.apexcharts-hide .apexcharts-series-points {\n  opacity: 0;\n}\n\n.apexcharts-gridline,\n.apexcharts-annotation-rect,\n.apexcharts-tooltip .apexcharts-marker,\n.apexcharts-area-series .apexcharts-area,\n.apexcharts-line,\n.apexcharts-zoom-rect,\n.apexcharts-toolbar svg,\n.apexcharts-area-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,\n.apexcharts-line-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,\n.apexcharts-radar-series path,\n.apexcharts-radar-series polygon {\n  pointer-events: none;\n}\n\n\n/* markers */\n\n.apexcharts-marker {\n  transition: 0.15s ease all;\n}\n\n@keyframes opaque {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n\n/* Resize generated styles */\n\n@keyframes resizeanim {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n.resize-triggers {\n  animation: 1ms resizeanim;\n  visibility: hidden;\n  opacity: 0;\n}\n\n.resize-triggers,\n.resize-triggers>div,\n.contract-trigger:before {\n  content: " ";\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n.resize-triggers>div {\n  background: #eee;\n  overflow: auto;\n}\n\n.contract-trigger:before {\n  width: 200%;\n  height: 200%;\n}'),function(){function t(t){var e=t.__resizeTriggers__,i=e.firstElementChild,a=e.lastElementChild,s=i?i.firstElementChild:null;a&&(a.scrollLeft=a.scrollWidth,a.scrollTop=a.scrollHeight),s&&(s.style.width=i.offsetWidth+1+"px",s.style.height=i.offsetHeight+1+"px"),i&&(i.scrollLeft=i.scrollWidth,i.scrollTop=i.scrollHeight)}function e(e){var i=this;t(this),this.__resizeRAF__&&r(this.__resizeRAF__),this.__resizeRAF__=s((function(){(function(t){return t.offsetWidth!=t.__resizeLast__.width||t.offsetHeight!=t.__resizeLast__.height})(i)&&(i.__resizeLast__.width=i.offsetWidth,i.__resizeLast__.height=i.offsetHeight,i.__resizeListeners__.forEach((function(t){t.call(e)})))}))}var i,a,s=(i=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(t){return window.setTimeout(t,20)},function(t){return i(t)}),r=(a=window.cancelAnimationFrame||window.mozCancelAnimationFrame||window.webkitCancelAnimationFrame||window.clearTimeout,function(t){return a(t)}),n=!1,o="animationstart",l="Webkit Moz O ms".split(" "),h="webkitAnimationStart animationstart oAnimationStart MSAnimationStart".split(" "),c=document.createElement("fakeelement");if(void 0!==c.style.animationName&&(n=!0),!1===n)for(var d=0;d<l.length;d++)if(void 0!==c.style[l[d]+"AnimationName"]){o=h[d];break}window.addResizeListener=function(i,a){i.__resizeTriggers__||("static"==getComputedStyle(i).position&&(i.style.position="relative"),i.__resizeLast__={},i.__resizeListeners__=[],(i.__resizeTriggers__=document.createElement("div")).className="resize-triggers",i.__resizeTriggers__.innerHTML='<div class="expand-trigger"><div></div></div><div class="contract-trigger"></div>',i.appendChild(i.__resizeTriggers__),t(i),i.addEventListener("scroll",e,!0),o&&i.__resizeTriggers__.addEventListener(o,(function(e){"resizeanim"==e.animationName&&t(i)}))),i.__resizeListeners__.push(a)},window.removeResizeListener=function(t,i){t&&(t.__resizeListeners__.splice(t.__resizeListeners__.indexOf(i),1),t.__resizeListeners__.length||(t.removeEventListener("scroll",e),t.__resizeTriggers__.parentNode&&(t.__resizeTriggers__=!t.removeChild(t.__resizeTriggers__))))}}(),window.Apex={};var zt=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"initModules",value:function(){this.ctx.publicMethods=["updateOptions","updateSeries","appendData","appendSeries","toggleSeries","showSeries","hideSeries","setLocale","resetSeries","toggleDataPointSelection","dataURI","addXaxisAnnotation","addYaxisAnnotation","addPointAnnotation","clearAnnotations","removeAnnotation","paper","destroy"],this.ctx.eventList=["click","mousedown","mousemove","touchstart","touchmove","mouseup","touchend"],this.ctx.animations=new f(this.ctx),this.ctx.axes=new U(this.ctx),this.ctx.core=new Pt(this.ctx.el,this.ctx),this.ctx.config=new P({}),this.ctx.data=new R(this.ctx),this.ctx.grid=new W(this.ctx),this.ctx.graphics=new p(this.ctx),this.ctx.coreUtils=new I(this.ctx),this.ctx.crosshairs=new q(this.ctx),this.ctx.events=new _(this.ctx),this.ctx.exports=new N(this.ctx),this.ctx.localization=new j(this.ctx),this.ctx.options=new A,this.ctx.responsive=new Z(this.ctx),this.ctx.series=new F(this.ctx),this.ctx.theme=new $(this.ctx),this.ctx.formatters=new D(this.ctx),this.ctx.titleSubtitle=new J(this.ctx),this.ctx.legend=new rt(this.ctx),this.ctx.toolbar=new nt(this.ctx),this.ctx.dimensions=new it(this.ctx),this.ctx.updateHelpers=new Tt(this.ctx),this.ctx.zoomPanSelection=new ot(this.ctx),this.ctx.w.globals.tooltip=new ft(this.ctx)}}]),t}(),It=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"clear",value:function(){this.ctx.zoomPanSelection&&this.ctx.zoomPanSelection.destroy(),this.ctx.toolbar&&this.ctx.toolbar.destroy(),this.ctx.animations=null,this.ctx.axes=null,this.ctx.annotations=null,this.ctx.core=null,this.ctx.data=null,this.ctx.grid=null,this.ctx.series=null,this.ctx.responsive=null,this.ctx.theme=null,this.ctx.formatters=null,this.ctx.titleSubtitle=null,this.ctx.legend=null,this.ctx.dimensions=null,this.ctx.options=null,this.ctx.crosshairs=null,this.ctx.zoomPanSelection=null,this.ctx.updateHelpers=null,this.ctx.toolbar=null,this.ctx.localization=null,this.ctx.w.globals.tooltip=null,this.clearDomElements()}},{key:"killSVG",value:function(t){t.each((function(t,e){this.removeClass("*"),this.off(),this.stop()}),!0),t.ungroup(),t.clear()}},{key:"clearDomElements",value:function(){var t=this;this.ctx.eventList.forEach((function(e){document.removeEventListener(e,t.ctx.events.documentEvent)}));var e=this.w.globals.dom;if(null!==this.ctx.el)for(;this.ctx.el.firstChild;)this.ctx.el.removeChild(this.ctx.el.firstChild);this.killSVG(e.Paper),e.Paper.remove(),e.elWrap=null,e.elGraphical=null,e.elAnnotations=null,e.elLegendWrap=null,e.baseEl=null,e.elGridRect=null,e.elGridRectMask=null,e.elGridRectMarkerMask=null,e.elDefs=null}}]),t}();return function(){function t(i,a){e(this,t),this.opts=a,this.ctx=this,this.w=new z(a).init(),this.el=i,this.w.globals.cuid=g.randomId(),this.w.globals.chartID=this.w.config.chart.id?this.w.config.chart.id:this.w.globals.cuid,new zt(this).initModules(),this.create=g.bind(this.create,this),this.windowResizeHandler=this._windowResize.bind(this)}return a(t,[{key:"render",value:function(){var t=this;return new Promise((function(e,i){if(null!==t.el){void 0===Apex._chartInstances&&(Apex._chartInstances=[]),t.w.config.chart.id&&Apex._chartInstances.push({id:t.w.globals.chartID,group:t.w.config.chart.group,chart:t}),t.setLocale(t.w.config.chart.defaultLocale);var a=t.w.config.chart.events.beforeMount;"function"==typeof a&&a(t,t.w),t.events.fireEvent("beforeMount",[t,t.w]),window.addEventListener("resize",t.windowResizeHandler),window.addResizeListener(t.el.parentNode,t._parentResizeCallback.bind(t));var s=t.create(t.w.config.series,{});if(!s)return e(t);t.mount(s).then((function(){"function"==typeof t.w.config.chart.events.mounted&&t.w.config.chart.events.mounted(t,t.w),t.events.fireEvent("mounted",[t,t.w]),e(s)})).catch((function(t){i(t)}))}else i(new Error("Element not found"))}))}},{key:"create",value:function(t,e){var i=this.w;new zt(this).initModules();var a=this.w.globals;(a.noData=!1,a.animationEnded=!1,this.responsive.checkResponsiveConfig(e),i.config.xaxis.convertedCatToNumeric)&&new L(i.config).convertCatToNumericXaxis(i.config,this.ctx);if(null===this.el)return a.animationEnded=!0,null;if(this.core.setupElements(),0===a.svgWidth)return a.animationEnded=!0,null;var s=I.checkComboSeries(t);a.comboCharts=s.comboCharts,a.comboBarCount=s.comboBarCount,(0===t.length||1===t.length&&t[0].data&&0===t[0].data.length)&&this.series.handleNoData(),this.events.setupEventHandlers(),this.data.parseData(t),this.theme.init(),new X(this).setGlobalMarkerSize(),this.formatters.setLabelFormatters(),this.titleSubtitle.draw(),a.noData&&a.collapsedSeries.length!==a.series.length||this.legend.init(),this.series.hasAllSeriesEqualX(),a.axisCharts&&(this.core.coreCalculations(),"category"!==i.config.xaxis.type&&this.formatters.setLabelFormatters()),this.formatters.heatmapLabelFormatters(),this.dimensions.plotCoords();var r=this.core.xySettings();this.grid.createGridMask();var n=this.core.plotChartType(t,r),o=new Y(this);o.bringForward(),i.config.dataLabels.background.enabled&&o.dataLabelsBackground(),this.core.shiftGraphPosition();var l={plot:{left:i.globals.translateX,top:i.globals.translateY,width:i.globals.gridWidth,height:i.globals.gridHeight}};return{elGraph:n,xyRatios:r,elInner:i.globals.dom.elGraphical,dimensions:l}}},{key:"mount",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,i=this,a=i.w;return new Promise((function(s,r){if(null===i.el)return r(new Error("Not enough data to display or target element not found"));(null===e||a.globals.allSeriesCollapsed)&&i.series.handleNoData(),i.axes.drawAxis(a.config.chart.type,e.xyRatios),i.grid=new W(i);var n=i.grid.drawGrid();i.annotations=new S(i),i.annotations.drawShapeAnnos(),i.annotations.drawImageAnnos(),i.annotations.drawTextAnnos(),"back"===a.config.grid.position&&n&&a.globals.dom.elGraphical.add(n.el);var o=new O(t.ctx),l=new G(t.ctx);if(null!==n&&(o.xAxisLabelCorrections(n.xAxisTickWidth),l.setYAxisTextAlignments()),"back"===a.config.annotations.position&&(a.globals.dom.Paper.add(a.globals.dom.elAnnotations),i.annotations.drawAxesAnnotations()),e.elGraph instanceof Array)for(var h=0;h<e.elGraph.length;h++)a.globals.dom.elGraphical.add(e.elGraph[h]);else a.globals.dom.elGraphical.add(e.elGraph);if("front"===a.config.grid.position&&n&&a.globals.dom.elGraphical.add(n.el),"front"===a.config.xaxis.crosshairs.position&&i.crosshairs.drawXCrosshairs(),"front"===a.config.yaxis[0].crosshairs.position&&i.crosshairs.drawYCrosshairs(),"front"===a.config.annotations.position&&(a.globals.dom.Paper.add(a.globals.dom.elAnnotations),i.annotations.drawAxesAnnotations()),!a.globals.noData){if(a.config.tooltip.enabled&&!a.globals.noData&&i.w.globals.tooltip.drawTooltip(e.xyRatios),a.globals.axisCharts&&(a.globals.isXNumeric||a.config.xaxis.convertedCatToNumeric))(a.config.chart.zoom.enabled||a.config.chart.selection&&a.config.chart.selection.enabled||a.config.chart.pan&&a.config.chart.pan.enabled)&&i.zoomPanSelection.init({xyRatios:e.xyRatios});else{var c=a.config.chart.toolbar.tools;["zoom","zoomin","zoomout","selection","pan","reset"].forEach((function(t){c[t]=!1}))}a.config.chart.toolbar.show&&!a.globals.allSeriesCollapsed&&i.toolbar.createToolbar()}a.globals.memory.methodsToExec.length>0&&a.globals.memory.methodsToExec.forEach((function(t){t.method(t.params,!1,t.context)})),a.globals.axisCharts||a.globals.noData||i.core.resizeNonAxisCharts(),s(i)}))}},{key:"destroy",value:function(){window.removeEventListener("resize",this.windowResizeHandler),window.removeResizeListener(this.el.parentNode,this._parentResizeCallback.bind(this));var t=this.w.config.chart.id;t&&Apex._chartInstances.forEach((function(e,i){e.id===t&&Apex._chartInstances.splice(i,1)})),new It(this.ctx).clear()}},{key:"updateOptions",value:function(t){var e=this,i=arguments.length>1&&void 0!==arguments[1]&&arguments[1],a=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],s=!(arguments.length>3&&void 0!==arguments[3])||arguments[3],r=!(arguments.length>4&&void 0!==arguments[4])||arguments[4],n=this.w;return t.series&&(this.series.resetSeries(!1,!0,!1),t.series.length&&t.series[0].data&&(t.series=t.series.map((function(t,i){return e.updateHelpers._extendSeries(t,i)}))),this.updateHelpers.revertDefaultAxisMinMax()),t.xaxis&&(t=this.updateHelpers.forceXAxisUpdate(t)),t.yaxis&&(t=this.updateHelpers.forceYAxisUpdate(t)),n.globals.collapsedSeriesIndices.length>0&&this.series.clearPreviousPaths(),t.theme&&(t=this.theme.updateThemeOptions(t)),this.updateHelpers._updateOptions(t,i,a,s,r)}},{key:"updateSeries",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];return this.series.resetSeries(!1),this.updateHelpers.revertDefaultAxisMinMax(),this.updateHelpers._updateSeries(t,e,i)}},{key:"appendSeries",value:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],a=this.w.config.series.slice();return a.push(t),this.series.resetSeries(!1),this.updateHelpers.revertDefaultAxisMinMax(),this.updateHelpers._updateSeries(a,e,i)}},{key:"appendData",value:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=this;i.w.globals.dataChanged=!0,i.series.getPreviousPaths();for(var a=i.w.config.series.slice(),s=0;s<a.length;s++)if(void 0!==t[s])for(var r=0;r<t[s].data.length;r++)a[s].data.push(t[s].data[r]);return i.w.config.series=a,e&&(i.w.globals.initialSeries=JSON.parse(JSON.stringify(i.w.config.series))),this.update()}},{key:"update",value:function(t){var e=this;return new Promise((function(i,a){new It(e.ctx).clear();var s=e.create(e.w.config.series,t);if(!s)return i(e);e.mount(s).then((function(){"function"==typeof e.w.config.chart.events.updated&&e.w.config.chart.events.updated(e,e.w),e.events.fireEvent("updated",[e,e.w]),e.w.globals.isDirty=!0,i(e)})).catch((function(t){a(t)}))}))}},{key:"getSyncedCharts",value:function(){var t=this.getGroupedCharts(),e=[this];return t.length&&(e=[],t.forEach((function(t){e.push(t)}))),e}},{key:"getGroupedCharts",value:function(){var t=this;return Apex._chartInstances.filter((function(t){if(t.group)return!0})).map((function(e){return t.w.config.chart.group===e.group?e.chart:t}))}},{key:"toggleSeries",value:function(t){return this.series.toggleSeries(t)}},{key:"showSeries",value:function(t){this.series.showSeries(t)}},{key:"hideSeries",value:function(t){this.series.hideSeries(t)}},{key:"resetSeries",value:function(){var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];this.series.resetSeries(t)}},{key:"addEventListener",value:function(t,e){this.events.addEventListener(t,e)}},{key:"removeEventListener",value:function(t,e){this.events.removeEventListener(t,e)}},{key:"addXaxisAnnotation",value:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:void 0,a=this;i&&(a=i),a.annotations.addXaxisAnnotationExternal(t,e,a)}},{key:"addYaxisAnnotation",value:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:void 0,a=this;i&&(a=i),a.annotations.addYaxisAnnotationExternal(t,e,a)}},{key:"addPointAnnotation",value:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:void 0,a=this;i&&(a=i),a.annotations.addPointAnnotationExternal(t,e,a)}},{key:"clearAnnotations",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:void 0,e=this;t&&(e=t),e.annotations.clearAnnotations(e)}},{key:"removeAnnotation",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,i=this;e&&(i=e),i.annotations.removeAnnotation(i,t)}},{key:"getChartArea",value:function(){return this.w.globals.dom.baseEl.querySelector(".apexcharts-inner")}},{key:"getSeriesTotalXRange",value:function(t,e){return this.coreUtils.getSeriesTotalsXRange(t,e)}},{key:"getHighestValueInSeries",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=new V(this.ctx);return e.getMinYMaxY(t).highestY}},{key:"getLowestValueInSeries",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=new V(this.ctx);return e.getMinYMaxY(t).lowestY}},{key:"getSeriesTotal",value:function(){return this.w.globals.seriesTotals}},{key:"toggleDataPointSelection",value:function(t,e){return this.updateHelpers.toggleDataPointSelection(t,e)}},{key:"setLocale",value:function(t){this.localization.setCurrentLocaleValues(t)}},{key:"dataURI",value:function(){return new N(this.ctx).dataURI()}},{key:"paper",value:function(){return this.w.globals.dom.Paper}},{key:"_parentResizeCallback",value:function(){!this.w.globals.noData&&this.w.globals.animationEnded&&this.w.config.chart.redrawOnParentResize&&this._windowResize()}},{key:"_windowResize",value:function(){var t=this;clearTimeout(this.w.globals.resizeTimer),this.w.globals.resizeTimer=window.setTimeout((function(){t.w.globals.resized=!0,t.w.globals.dataChanged=!1,t.ctx.update()}),150)}}],[{key:"getChartByID",value:function(t){var e=Apex._chartInstances.filter((function(e){return e.id===t}))[0];return e&&e.chart}},{key:"initOnLoad",value:function(){for(var e=document.querySelectorAll("[data-apexcharts]"),i=0;i<e.length;i++){new t(e[i],JSON.parse(e[i].getAttribute("data-options"))).render()}}},{key:"exec",value:function(t,e){var i=this.getChartByID(t);if(i){i.w.globals.isExecCalled=!0;var a=null;if(-1!==i.publicMethods.indexOf(e)){for(var s=arguments.length,r=new Array(s>2?s-2:0),n=2;n<s;n++)r[n-2]=arguments[n];a=i[e].apply(i,r)}return a}}},{key:"merge",value:function(t,e){return g.extend(t,e)}}]),t}()}));
+function(){function t(t){t.remember("_draggable",this),this.el=t}t.prototype.init=function(t,e){var i=this;this.constraint=t,this.value=e,this.el.on("mousedown.drag",(function(t){i.start(t)})),this.el.on("touchstart.drag",(function(t){i.start(t)}))},t.prototype.transformPoint=function(t,e){var i=(t=t||window.event).changedTouches&&t.changedTouches[0]||t;return this.p.x=i.clientX-(e||0),this.p.y=i.clientY,this.p.matrixTransform(this.m)},t.prototype.getBBox=function(){var t=this.el.bbox();return this.el instanceof SVG.Nested&&(t=this.el.rbox()),(this.el instanceof SVG.G||this.el instanceof SVG.Use||this.el instanceof SVG.Nested)&&(t.x=this.el.x(),t.y=this.el.y()),t},t.prototype.start=function(t){if("click"!=t.type&&"mousedown"!=t.type&&"mousemove"!=t.type||1==(t.which||t.buttons)){var e=this;if(this.el.fire("beforedrag",{event:t,handler:this}),!this.el.event().defaultPrevented){t.preventDefault(),t.stopPropagation(),this.parent=this.parent||this.el.parent(SVG.Nested)||this.el.parent(SVG.Doc),this.p=this.parent.node.createSVGPoint(),this.m=this.el.node.getScreenCTM().inverse();var i,a=this.getBBox();if(this.el instanceof SVG.Text)switch(i=this.el.node.getComputedTextLength(),this.el.attr("text-anchor")){case"middle":i/=2;break;case"start":i=0}this.startPoints={point:this.transformPoint(t,i),box:a,transform:this.el.transform()},SVG.on(window,"mousemove.drag",(function(t){e.drag(t)})),SVG.on(window,"touchmove.drag",(function(t){e.drag(t)})),SVG.on(window,"mouseup.drag",(function(t){e.end(t)})),SVG.on(window,"touchend.drag",(function(t){e.end(t)})),this.el.fire("dragstart",{event:t,p:this.startPoints.point,m:this.m,handler:this})}}},t.prototype.drag=function(t){var e=this.getBBox(),i=this.transformPoint(t),a=this.startPoints.box.x+i.x-this.startPoints.point.x,s=this.startPoints.box.y+i.y-this.startPoints.point.y,r=this.constraint,n=i.x-this.startPoints.point.x,o=i.y-this.startPoints.point.y;if(this.el.fire("dragmove",{event:t,p:i,m:this.m,handler:this}),this.el.event().defaultPrevented)return i;if("function"==typeof r){var l=r.call(this.el,a,s,this.m);"boolean"==typeof l&&(l={x:l,y:l}),!0===l.x?this.el.x(a):!1!==l.x&&this.el.x(l.x),!0===l.y?this.el.y(s):!1!==l.y&&this.el.y(l.y)}else"object"==typeof r&&(null!=r.minX&&a<r.minX?n=(a=r.minX)-this.startPoints.box.x:null!=r.maxX&&a>r.maxX-e.width&&(n=(a=r.maxX-e.width)-this.startPoints.box.x),null!=r.minY&&s<r.minY?o=(s=r.minY)-this.startPoints.box.y:null!=r.maxY&&s>r.maxY-e.height&&(o=(s=r.maxY-e.height)-this.startPoints.box.y),null!=r.snapToGrid&&(a-=a%r.snapToGrid,s-=s%r.snapToGrid,n-=n%r.snapToGrid,o-=o%r.snapToGrid),this.el instanceof SVG.G?this.el.matrix(this.startPoints.transform).transform({x:n,y:o},!0):this.el.move(a,s));return i},t.prototype.end=function(t){var e=this.drag(t);this.el.fire("dragend",{event:t,p:e,m:this.m,handler:this}),SVG.off(window,"mousemove.drag"),SVG.off(window,"touchmove.drag"),SVG.off(window,"mouseup.drag"),SVG.off(window,"touchend.drag")},SVG.extend(SVG.Element,{draggable:function(e,i){"function"!=typeof e&&"object"!=typeof e||(i=e,e=!0);var a=this.remember("_draggable")||new t(this);return(e=void 0===e||e)?a.init(i||{},e):(this.off("mousedown.drag"),this.off("touchstart.drag")),this}})}.call(void 0),function(){function t(t){this.el=t,t.remember("_selectHandler",this),this.pointSelection={isSelected:!1},this.rectSelection={isSelected:!1},this.pointsList={lt:[0,0],rt:["width",0],rb:["width","height"],lb:[0,"height"],t:["width",0],r:["width","height"],b:["width","height"],l:[0,"height"]},this.pointCoord=function(t,e,i){var a="string"!=typeof t?t:e[t];return i?a/2:a},this.pointCoords=function(t,e){var i=this.pointsList[t];return{x:this.pointCoord(i[0],e,"t"===t||"b"===t),y:this.pointCoord(i[1],e,"r"===t||"l"===t)}}}t.prototype.init=function(t,e){var i=this.el.bbox();this.options={};var a=this.el.selectize.defaults.points;for(var s in this.el.selectize.defaults)this.options[s]=this.el.selectize.defaults[s],void 0!==e[s]&&(this.options[s]=e[s]);var r=["points","pointsExclude"];for(var s in r){var n=this.options[r[s]];"string"==typeof n?n=n.length>0?n.split(/\s*,\s*/i):[]:"boolean"==typeof n&&"points"===r[s]&&(n=n?a:[]),this.options[r[s]]=n}this.options.points=[a,this.options.points].reduce((function(t,e){return t.filter((function(t){return e.indexOf(t)>-1}))})),this.options.points=[this.options.points,this.options.pointsExclude].reduce((function(t,e){return t.filter((function(t){return e.indexOf(t)<0}))})),this.parent=this.el.parent(),this.nested=this.nested||this.parent.group(),this.nested.matrix(new SVG.Matrix(this.el).translate(i.x,i.y)),this.options.deepSelect&&-1!==["line","polyline","polygon"].indexOf(this.el.type)?this.selectPoints(t):this.selectRect(t),this.observe(),this.cleanup()},t.prototype.selectPoints=function(t){return this.pointSelection.isSelected=t,this.pointSelection.set?this:(this.pointSelection.set=this.parent.set(),this.drawPoints(),this)},t.prototype.getPointArray=function(){var t=this.el.bbox();return this.el.array().valueOf().map((function(e){return[e[0]-t.x,e[1]-t.y]}))},t.prototype.drawPoints=function(){for(var t=this,e=this.getPointArray(),i=0,a=e.length;i<a;++i){var s=function(e){return function(i){(i=i||window.event).preventDefault?i.preventDefault():i.returnValue=!1,i.stopPropagation();var a=i.pageX||i.touches[0].pageX,s=i.pageY||i.touches[0].pageY;t.el.fire("point",{x:a,y:s,i:e,event:i})}}(i),r=this.drawPoint(e[i][0],e[i][1]).addClass(this.options.classPoints).addClass(this.options.classPoints+"_point").on("touchstart",s).on("mousedown",s);this.pointSelection.set.add(r)}},t.prototype.drawPoint=function(t,e){var i=this.options.pointType;switch(i){case"circle":return this.drawCircle(t,e);case"rect":return this.drawRect(t,e);default:if("function"==typeof i)return i.call(this,t,e);throw new Error("Unknown "+i+" point type!")}},t.prototype.drawCircle=function(t,e){return this.nested.circle(this.options.pointSize).center(t,e)},t.prototype.drawRect=function(t,e){return this.nested.rect(this.options.pointSize,this.options.pointSize).center(t,e)},t.prototype.updatePointSelection=function(){var t=this.getPointArray();this.pointSelection.set.each((function(e){this.cx()===t[e][0]&&this.cy()===t[e][1]||this.center(t[e][0],t[e][1])}))},t.prototype.updateRectSelection=function(){var t=this,e=this.el.bbox();if(this.rectSelection.set.get(0).attr({width:e.width,height:e.height}),this.options.points.length&&this.options.points.map((function(i,a){var s=t.pointCoords(i,e);t.rectSelection.set.get(a+1).center(s.x,s.y)})),this.options.rotationPoint){var i=this.rectSelection.set.length();this.rectSelection.set.get(i-1).center(e.width/2,20)}},t.prototype.selectRect=function(t){var e=this,i=this.el.bbox();function a(t){return function(i){(i=i||window.event).preventDefault?i.preventDefault():i.returnValue=!1,i.stopPropagation();var a=i.pageX||i.touches[0].pageX,s=i.pageY||i.touches[0].pageY;e.el.fire(t,{x:a,y:s,event:i})}}if(this.rectSelection.isSelected=t,this.rectSelection.set=this.rectSelection.set||this.parent.set(),this.rectSelection.set.get(0)||this.rectSelection.set.add(this.nested.rect(i.width,i.height).addClass(this.options.classRect)),this.options.points.length&&this.rectSelection.set.length()<2){this.options.points.map((function(t,s){var r=e.pointCoords(t,i),n=e.drawPoint(r.x,r.y).attr("class",e.options.classPoints+"_"+t).on("mousedown",a(t)).on("touchstart",a(t));e.rectSelection.set.add(n)})),this.rectSelection.set.each((function(){this.addClass(e.options.classPoints)}))}if(this.options.rotationPoint&&(this.options.points&&!this.rectSelection.set.get(9)||!this.options.points&&!this.rectSelection.set.get(1))){var s=function(t){(t=t||window.event).preventDefault?t.preventDefault():t.returnValue=!1,t.stopPropagation();var i=t.pageX||t.touches[0].pageX,a=t.pageY||t.touches[0].pageY;e.el.fire("rot",{x:i,y:a,event:t})},r=this.drawPoint(i.width/2,20).attr("class",this.options.classPoints+"_rot").on("touchstart",s).on("mousedown",s);this.rectSelection.set.add(r)}},t.prototype.handler=function(){var t=this.el.bbox();this.nested.matrix(new SVG.Matrix(this.el).translate(t.x,t.y)),this.rectSelection.isSelected&&this.updateRectSelection(),this.pointSelection.isSelected&&this.updatePointSelection()},t.prototype.observe=function(){var t=this;if(MutationObserver)if(this.rectSelection.isSelected||this.pointSelection.isSelected)this.observerInst=this.observerInst||new MutationObserver((function(){t.handler()})),this.observerInst.observe(this.el.node,{attributes:!0});else try{this.observerInst.disconnect(),delete this.observerInst}catch(t){}else this.el.off("DOMAttrModified.select"),(this.rectSelection.isSelected||this.pointSelection.isSelected)&&this.el.on("DOMAttrModified.select",(function(){t.handler()}))},t.prototype.cleanup=function(){!this.rectSelection.isSelected&&this.rectSelection.set&&(this.rectSelection.set.each((function(){this.remove()})),this.rectSelection.set.clear(),delete this.rectSelection.set),!this.pointSelection.isSelected&&this.pointSelection.set&&(this.pointSelection.set.each((function(){this.remove()})),this.pointSelection.set.clear(),delete this.pointSelection.set),this.pointSelection.isSelected||this.rectSelection.isSelected||(this.nested.remove(),delete this.nested)},SVG.extend(SVG.Element,{selectize:function(e,i){return"object"==typeof e&&(i=e,e=!0),(this.remember("_selectHandler")||new t(this)).init(void 0===e||e,i||{}),this}}),SVG.Element.prototype.selectize.defaults={points:["lt","rt","rb","lb","t","r","b","l"],pointsExclude:[],classRect:"svg_select_boundingRect",classPoints:"svg_select_points",pointSize:7,rotationPoint:!0,deepSelect:!1,pointType:"circle"}}(),function(){(function(){function t(t){t.remember("_resizeHandler",this),this.el=t,this.parameters={},this.lastUpdateCall=null,this.p=t.doc().node.createSVGPoint()}t.prototype.transformPoint=function(t,e,i){return this.p.x=t-(this.offset.x-window.pageXOffset),this.p.y=e-(this.offset.y-window.pageYOffset),this.p.matrixTransform(i||this.m)},t.prototype._extractPosition=function(t){return{x:null!=t.clientX?t.clientX:t.touches[0].clientX,y:null!=t.clientY?t.clientY:t.touches[0].clientY}},t.prototype.init=function(t){var e=this;if(this.stop(),"stop"!==t){for(var i in this.options={},this.el.resize.defaults)this.options[i]=this.el.resize.defaults[i],void 0!==t[i]&&(this.options[i]=t[i]);this.el.on("lt.resize",(function(t){e.resize(t||window.event)})),this.el.on("rt.resize",(function(t){e.resize(t||window.event)})),this.el.on("rb.resize",(function(t){e.resize(t||window.event)})),this.el.on("lb.resize",(function(t){e.resize(t||window.event)})),this.el.on("t.resize",(function(t){e.resize(t||window.event)})),this.el.on("r.resize",(function(t){e.resize(t||window.event)})),this.el.on("b.resize",(function(t){e.resize(t||window.event)})),this.el.on("l.resize",(function(t){e.resize(t||window.event)})),this.el.on("rot.resize",(function(t){e.resize(t||window.event)})),this.el.on("point.resize",(function(t){e.resize(t||window.event)})),this.update()}},t.prototype.stop=function(){return this.el.off("lt.resize"),this.el.off("rt.resize"),this.el.off("rb.resize"),this.el.off("lb.resize"),this.el.off("t.resize"),this.el.off("r.resize"),this.el.off("b.resize"),this.el.off("l.resize"),this.el.off("rot.resize"),this.el.off("point.resize"),this},t.prototype.resize=function(t){var e=this;this.m=this.el.node.getScreenCTM().inverse(),this.offset={x:window.pageXOffset,y:window.pageYOffset};var i=this._extractPosition(t.detail.event);if(this.parameters={type:this.el.type,p:this.transformPoint(i.x,i.y),x:t.detail.x,y:t.detail.y,box:this.el.bbox(),rotation:this.el.transform().rotation},"text"===this.el.type&&(this.parameters.fontSize=this.el.attr()["font-size"]),void 0!==t.detail.i){var a=this.el.array().valueOf();this.parameters.i=t.detail.i,this.parameters.pointCoords=[a[t.detail.i][0],a[t.detail.i][1]]}switch(t.type){case"lt":this.calc=function(t,e){var i=this.snapToGrid(t,e);if(this.parameters.box.width-i[0]>0&&this.parameters.box.height-i[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x+i[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize-i[0]);i=this.checkAspectRatio(i),this.el.move(this.parameters.box.x+i[0],this.parameters.box.y+i[1]).size(this.parameters.box.width-i[0],this.parameters.box.height-i[1])}};break;case"rt":this.calc=function(t,e){var i=this.snapToGrid(t,e,2);if(this.parameters.box.width+i[0]>0&&this.parameters.box.height-i[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x-i[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize+i[0]);i=this.checkAspectRatio(i,!0),this.el.move(this.parameters.box.x,this.parameters.box.y+i[1]).size(this.parameters.box.width+i[0],this.parameters.box.height-i[1])}};break;case"rb":this.calc=function(t,e){var i=this.snapToGrid(t,e,0);if(this.parameters.box.width+i[0]>0&&this.parameters.box.height+i[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x-i[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize+i[0]);i=this.checkAspectRatio(i),this.el.move(this.parameters.box.x,this.parameters.box.y).size(this.parameters.box.width+i[0],this.parameters.box.height+i[1])}};break;case"lb":this.calc=function(t,e){var i=this.snapToGrid(t,e,1);if(this.parameters.box.width-i[0]>0&&this.parameters.box.height+i[1]>0){if("text"===this.parameters.type)return this.el.move(this.parameters.box.x+i[0],this.parameters.box.y),void this.el.attr("font-size",this.parameters.fontSize-i[0]);i=this.checkAspectRatio(i,!0),this.el.move(this.parameters.box.x+i[0],this.parameters.box.y).size(this.parameters.box.width-i[0],this.parameters.box.height+i[1])}};break;case"t":this.calc=function(t,e){var i=this.snapToGrid(t,e,2);if(this.parameters.box.height-i[1]>0){if("text"===this.parameters.type)return;this.el.move(this.parameters.box.x,this.parameters.box.y+i[1]).height(this.parameters.box.height-i[1])}};break;case"r":this.calc=function(t,e){var i=this.snapToGrid(t,e,0);if(this.parameters.box.width+i[0]>0){if("text"===this.parameters.type)return;this.el.move(this.parameters.box.x,this.parameters.box.y).width(this.parameters.box.width+i[0])}};break;case"b":this.calc=function(t,e){var i=this.snapToGrid(t,e,0);if(this.parameters.box.height+i[1]>0){if("text"===this.parameters.type)return;this.el.move(this.parameters.box.x,this.parameters.box.y).height(this.parameters.box.height+i[1])}};break;case"l":this.calc=function(t,e){var i=this.snapToGrid(t,e,1);if(this.parameters.box.width-i[0]>0){if("text"===this.parameters.type)return;this.el.move(this.parameters.box.x+i[0],this.parameters.box.y).width(this.parameters.box.width-i[0])}};break;case"rot":this.calc=function(t,e){var i=t+this.parameters.p.x,a=e+this.parameters.p.y,s=Math.atan2(this.parameters.p.y-this.parameters.box.y-this.parameters.box.height/2,this.parameters.p.x-this.parameters.box.x-this.parameters.box.width/2),r=Math.atan2(a-this.parameters.box.y-this.parameters.box.height/2,i-this.parameters.box.x-this.parameters.box.width/2),n=this.parameters.rotation+180*(r-s)/Math.PI+this.options.snapToAngle/2;this.el.center(this.parameters.box.cx,this.parameters.box.cy).rotate(n-n%this.options.snapToAngle,this.parameters.box.cx,this.parameters.box.cy)};break;case"point":this.calc=function(t,e){var i=this.snapToGrid(t,e,this.parameters.pointCoords[0],this.parameters.pointCoords[1]),a=this.el.array().valueOf();a[this.parameters.i][0]=this.parameters.pointCoords[0]+i[0],a[this.parameters.i][1]=this.parameters.pointCoords[1]+i[1],this.el.plot(a)}}this.el.fire("resizestart",{dx:this.parameters.x,dy:this.parameters.y,event:t}),SVG.on(window,"touchmove.resize",(function(t){e.update(t||window.event)})),SVG.on(window,"touchend.resize",(function(){e.done()})),SVG.on(window,"mousemove.resize",(function(t){e.update(t||window.event)})),SVG.on(window,"mouseup.resize",(function(){e.done()}))},t.prototype.update=function(t){if(t){var e=this._extractPosition(t),i=this.transformPoint(e.x,e.y),a=i.x-this.parameters.p.x,s=i.y-this.parameters.p.y;this.lastUpdateCall=[a,s],this.calc(a,s),this.el.fire("resizing",{dx:a,dy:s,event:t})}else this.lastUpdateCall&&this.calc(this.lastUpdateCall[0],this.lastUpdateCall[1])},t.prototype.done=function(){this.lastUpdateCall=null,SVG.off(window,"mousemove.resize"),SVG.off(window,"mouseup.resize"),SVG.off(window,"touchmove.resize"),SVG.off(window,"touchend.resize"),this.el.fire("resizedone")},t.prototype.snapToGrid=function(t,e,i,a){var s;return void 0!==a?s=[(i+t)%this.options.snapToGrid,(a+e)%this.options.snapToGrid]:(i=null==i?3:i,s=[(this.parameters.box.x+t+(1&i?0:this.parameters.box.width))%this.options.snapToGrid,(this.parameters.box.y+e+(2&i?0:this.parameters.box.height))%this.options.snapToGrid]),t<0&&(s[0]-=this.options.snapToGrid),e<0&&(s[1]-=this.options.snapToGrid),t-=Math.abs(s[0])<this.options.snapToGrid/2?s[0]:s[0]-(t<0?-this.options.snapToGrid:this.options.snapToGrid),e-=Math.abs(s[1])<this.options.snapToGrid/2?s[1]:s[1]-(e<0?-this.options.snapToGrid:this.options.snapToGrid),this.constraintToBox(t,e,i,a)},t.prototype.constraintToBox=function(t,e,i,a){var s,r,n=this.options.constraint||{};return void 0!==a?(s=i,r=a):(s=this.parameters.box.x+(1&i?0:this.parameters.box.width),r=this.parameters.box.y+(2&i?0:this.parameters.box.height)),void 0!==n.minX&&s+t<n.minX&&(t=n.minX-s),void 0!==n.maxX&&s+t>n.maxX&&(t=n.maxX-s),void 0!==n.minY&&r+e<n.minY&&(e=n.minY-r),void 0!==n.maxY&&r+e>n.maxY&&(e=n.maxY-r),[t,e]},t.prototype.checkAspectRatio=function(t,e){if(!this.options.saveAspectRatio)return t;var i=t.slice(),a=this.parameters.box.width/this.parameters.box.height,s=this.parameters.box.width+t[0],r=this.parameters.box.height-t[1],n=s/r;return n<a?(i[1]=s/a-this.parameters.box.height,e&&(i[1]=-i[1])):n>a&&(i[0]=this.parameters.box.width-r*a,e&&(i[0]=-i[0])),i},SVG.extend(SVG.Element,{resize:function(e){return(this.remember("_resizeHandler")||new t(this)).init(e||{}),this}}),SVG.Element.prototype.resize.defaults={snapToAngle:.1,snapToGrid:1,constraint:{},saveAspectRatio:!1}}).call(this)}();!function(t,e){void 0===e&&(e={});var i=e.insertAt;if(t&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===i&&a.firstChild?a.insertBefore(s,a.firstChild):a.appendChild(s),s.styleSheet?s.styleSheet.cssText=t:s.appendChild(document.createTextNode(t))}}('.apexcharts-canvas {\n  position: relative;\n  user-select: none;\n  /* cannot give overflow: hidden as it will crop tooltips which overflow outside chart area */\n}\n\n\n/* scrollbar is not visible by default for legend, hence forcing the visibility */\n.apexcharts-canvas ::-webkit-scrollbar {\n  -webkit-appearance: none;\n  width: 6px;\n}\n\n.apexcharts-canvas ::-webkit-scrollbar-thumb {\n  border-radius: 4px;\n  background-color: rgba(0, 0, 0, .5);\n  box-shadow: 0 0 1px rgba(255, 255, 255, .5);\n  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);\n}\n\n.apexcharts-canvas.apexcharts-theme-dark {\n  background: #343F57;\n}\n\n.apexcharts-inner {\n  position: relative;\n}\n\n.apexcharts-text tspan {\n  font-family: inherit;\n}\n\n.legend-mouseover-inactive {\n  transition: 0.15s ease all;\n  opacity: 0.20;\n}\n\n.apexcharts-series-collapsed {\n  opacity: 0;\n}\n\n.apexcharts-tooltip {\n  border-radius: 5px;\n  box-shadow: 2px 2px 6px -4px #999;\n  cursor: default;\n  font-size: 14px;\n  left: 62px;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  top: 20px;\n  overflow: hidden;\n  white-space: nowrap;\n  z-index: 12;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-tooltip.apexcharts-active {\n  opacity: 1;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-tooltip.apexcharts-theme-light {\n  border: 1px solid #e3e3e3;\n  background: rgba(255, 255, 255, 0.96);\n}\n\n.apexcharts-tooltip.apexcharts-theme-dark {\n  color: #fff;\n  background: rgba(30, 30, 30, 0.8);\n}\n\n.apexcharts-tooltip * {\n  font-family: inherit;\n}\n\n\n.apexcharts-tooltip-title {\n  padding: 6px;\n  font-size: 15px;\n  margin-bottom: 4px;\n}\n\n.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {\n  background: #ECEFF1;\n  border-bottom: 1px solid #ddd;\n}\n\n.apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {\n  background: rgba(0, 0, 0, 0.7);\n  border-bottom: 1px solid #333;\n}\n\n.apexcharts-tooltip-text-value,\n.apexcharts-tooltip-text-z-value {\n  display: inline-block;\n  font-weight: 600;\n  margin-left: 5px;\n}\n\n.apexcharts-tooltip-text-z-label:empty,\n.apexcharts-tooltip-text-z-value:empty {\n  display: none;\n}\n\n.apexcharts-tooltip-text-value,\n.apexcharts-tooltip-text-z-value {\n  font-weight: 600;\n}\n\n.apexcharts-tooltip-marker {\n  width: 12px;\n  height: 12px;\n  position: relative;\n  top: 0px;\n  margin-right: 10px;\n  border-radius: 50%;\n}\n\n.apexcharts-tooltip-series-group {\n  padding: 0 10px;\n  display: none;\n  text-align: left;\n  justify-content: left;\n  align-items: center;\n}\n\n.apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-marker {\n  opacity: 1;\n}\n\n.apexcharts-tooltip-series-group.apexcharts-active,\n.apexcharts-tooltip-series-group:last-child {\n  padding-bottom: 4px;\n}\n\n.apexcharts-tooltip-series-group-hidden {\n  opacity: 0;\n  height: 0;\n  line-height: 0;\n  padding: 0 !important;\n}\n\n.apexcharts-tooltip-y-group {\n  padding: 6px 0 5px;\n}\n\n.apexcharts-tooltip-candlestick {\n  padding: 4px 8px;\n}\n\n.apexcharts-tooltip-candlestick>div {\n  margin: 4px 0;\n}\n\n.apexcharts-tooltip-candlestick span.value {\n  font-weight: bold;\n}\n\n.apexcharts-tooltip-rangebar {\n  padding: 5px 8px;\n}\n\n.apexcharts-tooltip-rangebar .category {\n  font-weight: 600;\n  color: #777;\n}\n\n.apexcharts-tooltip-rangebar .series-name {\n  font-weight: bold;\n  display: block;\n  margin-bottom: 5px;\n}\n\n.apexcharts-xaxistooltip {\n  opacity: 0;\n  padding: 9px 10px;\n  pointer-events: none;\n  color: #373d3f;\n  font-size: 13px;\n  text-align: center;\n  border-radius: 2px;\n  position: absolute;\n  z-index: 10;\n  background: #ECEFF1;\n  border: 1px solid #90A4AE;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-xaxistooltip.apexcharts-theme-dark {\n  background: rgba(0, 0, 0, 0.7);\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  color: #fff;\n}\n\n.apexcharts-xaxistooltip:after,\n.apexcharts-xaxistooltip:before {\n  left: 50%;\n  border: solid transparent;\n  content: " ";\n  height: 0;\n  width: 0;\n  position: absolute;\n  pointer-events: none;\n}\n\n.apexcharts-xaxistooltip:after {\n  border-color: rgba(236, 239, 241, 0);\n  border-width: 6px;\n  margin-left: -6px;\n}\n\n.apexcharts-xaxistooltip:before {\n  border-color: rgba(144, 164, 174, 0);\n  border-width: 7px;\n  margin-left: -7px;\n}\n\n.apexcharts-xaxistooltip-bottom:after,\n.apexcharts-xaxistooltip-bottom:before {\n  bottom: 100%;\n}\n\n.apexcharts-xaxistooltip-top:after,\n.apexcharts-xaxistooltip-top:before {\n  top: 100%;\n}\n\n.apexcharts-xaxistooltip-bottom:after {\n  border-bottom-color: #ECEFF1;\n}\n\n.apexcharts-xaxistooltip-bottom:before {\n  border-bottom-color: #90A4AE;\n}\n\n.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:after {\n  border-bottom-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:before {\n  border-bottom-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-xaxistooltip-top:after {\n  border-top-color: #ECEFF1\n}\n\n.apexcharts-xaxistooltip-top:before {\n  border-top-color: #90A4AE;\n}\n\n.apexcharts-xaxistooltip-top.apexcharts-theme-dark:after {\n  border-top-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-xaxistooltip-top.apexcharts-theme-dark:before {\n  border-top-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-xaxistooltip.apexcharts-active {\n  opacity: 1;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-yaxistooltip {\n  opacity: 0;\n  padding: 4px 10px;\n  pointer-events: none;\n  color: #373d3f;\n  font-size: 13px;\n  text-align: center;\n  border-radius: 2px;\n  position: absolute;\n  z-index: 10;\n  background: #ECEFF1;\n  border: 1px solid #90A4AE;\n}\n\n.apexcharts-yaxistooltip.apexcharts-theme-dark {\n  background: rgba(0, 0, 0, 0.7);\n  border: 1px solid rgba(0, 0, 0, 0.5);\n  color: #fff;\n}\n\n.apexcharts-yaxistooltip:after,\n.apexcharts-yaxistooltip:before {\n  top: 50%;\n  border: solid transparent;\n  content: " ";\n  height: 0;\n  width: 0;\n  position: absolute;\n  pointer-events: none;\n}\n\n.apexcharts-yaxistooltip:after {\n  border-color: rgba(236, 239, 241, 0);\n  border-width: 6px;\n  margin-top: -6px;\n}\n\n.apexcharts-yaxistooltip:before {\n  border-color: rgba(144, 164, 174, 0);\n  border-width: 7px;\n  margin-top: -7px;\n}\n\n.apexcharts-yaxistooltip-left:after,\n.apexcharts-yaxistooltip-left:before {\n  left: 100%;\n}\n\n.apexcharts-yaxistooltip-right:after,\n.apexcharts-yaxistooltip-right:before {\n  right: 100%;\n}\n\n.apexcharts-yaxistooltip-left:after {\n  border-left-color: #ECEFF1;\n}\n\n.apexcharts-yaxistooltip-left:before {\n  border-left-color: #90A4AE;\n}\n\n.apexcharts-yaxistooltip-left.apexcharts-theme-dark:after {\n  border-left-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-yaxistooltip-left.apexcharts-theme-dark:before {\n  border-left-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-yaxistooltip-right:after {\n  border-right-color: #ECEFF1;\n}\n\n.apexcharts-yaxistooltip-right:before {\n  border-right-color: #90A4AE;\n}\n\n.apexcharts-yaxistooltip-right.apexcharts-theme-dark:after {\n  border-right-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-yaxistooltip-right.apexcharts-theme-dark:before {\n  border-right-color: rgba(0, 0, 0, 0.5);\n}\n\n.apexcharts-yaxistooltip.apexcharts-active {\n  opacity: 1;\n}\n\n.apexcharts-yaxistooltip-hidden {\n  display: none;\n}\n\n.apexcharts-xcrosshairs,\n.apexcharts-ycrosshairs {\n  pointer-events: none;\n  opacity: 0;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-xcrosshairs.apexcharts-active,\n.apexcharts-ycrosshairs.apexcharts-active {\n  opacity: 1;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-ycrosshairs-hidden {\n  opacity: 0;\n}\n\n.apexcharts-selection-rect {\n  cursor: move;\n}\n\n.svg_select_boundingRect, .svg_select_points_rot {\n  pointer-events: none;\n  opacity: 0;\n  visibility: hidden;\n}\n.apexcharts-selection-rect + g .svg_select_boundingRect,\n.apexcharts-selection-rect + g .svg_select_points_rot {\n  opacity: 0;\n  visibility: hidden;\n}\n\n.apexcharts-selection-rect + g .svg_select_points_l,\n.apexcharts-selection-rect + g .svg_select_points_r {\n  cursor: ew-resize;\n  opacity: 1;\n  visibility: visible;\n}\n\n.svg_select_points {\n  fill: #efefef;\n  stroke: #333;\n  rx: 2;\n}\n\n.apexcharts-canvas.apexcharts-zoomable .hovering-zoom {\n  cursor: crosshair\n}\n\n.apexcharts-canvas.apexcharts-zoomable .hovering-pan {\n  cursor: move\n}\n\n.apexcharts-zoom-icon,\n.apexcharts-zoomin-icon,\n.apexcharts-zoomout-icon,\n.apexcharts-reset-icon,\n.apexcharts-pan-icon,\n.apexcharts-selection-icon,\n.apexcharts-menu-icon,\n.apexcharts-toolbar-custom-icon {\n  cursor: pointer;\n  width: 20px;\n  height: 20px;\n  line-height: 24px;\n  color: #6E8192;\n  text-align: center;\n}\n\n.apexcharts-zoom-icon svg,\n.apexcharts-zoomin-icon svg,\n.apexcharts-zoomout-icon svg,\n.apexcharts-reset-icon svg,\n.apexcharts-menu-icon svg {\n  fill: #6E8192;\n}\n\n.apexcharts-selection-icon svg {\n  fill: #444;\n  transform: scale(0.76)\n}\n\n.apexcharts-theme-dark .apexcharts-zoom-icon svg,\n.apexcharts-theme-dark .apexcharts-zoomin-icon svg,\n.apexcharts-theme-dark .apexcharts-zoomout-icon svg,\n.apexcharts-theme-dark .apexcharts-reset-icon svg,\n.apexcharts-theme-dark .apexcharts-pan-icon svg,\n.apexcharts-theme-dark .apexcharts-selection-icon svg,\n.apexcharts-theme-dark .apexcharts-menu-icon svg,\n.apexcharts-theme-dark .apexcharts-toolbar-custom-icon svg {\n  fill: #f3f4f5;\n}\n\n.apexcharts-canvas .apexcharts-zoom-icon.apexcharts-selected svg,\n.apexcharts-canvas .apexcharts-selection-icon.apexcharts-selected svg,\n.apexcharts-canvas .apexcharts-reset-zoom-icon.apexcharts-selected svg {\n  fill: #008FFB;\n}\n\n.apexcharts-theme-light .apexcharts-selection-icon:not(.apexcharts-selected):hover svg,\n.apexcharts-theme-light .apexcharts-zoom-icon:not(.apexcharts-selected):hover svg,\n.apexcharts-theme-light .apexcharts-zoomin-icon:hover svg,\n.apexcharts-theme-light .apexcharts-zoomout-icon:hover svg,\n.apexcharts-theme-light .apexcharts-reset-icon:hover svg,\n.apexcharts-theme-light .apexcharts-menu-icon:hover svg {\n  fill: #333;\n}\n\n.apexcharts-selection-icon,\n.apexcharts-menu-icon {\n  position: relative;\n}\n\n.apexcharts-reset-icon {\n  margin-left: 5px;\n}\n\n.apexcharts-zoom-icon,\n.apexcharts-reset-icon,\n.apexcharts-menu-icon {\n  transform: scale(0.85);\n}\n\n.apexcharts-zoomin-icon,\n.apexcharts-zoomout-icon {\n  transform: scale(0.7)\n}\n\n.apexcharts-zoomout-icon {\n  margin-right: 3px;\n}\n\n.apexcharts-pan-icon {\n  transform: scale(0.62);\n  position: relative;\n  left: 1px;\n  top: 0px;\n}\n\n.apexcharts-pan-icon svg {\n  fill: #fff;\n  stroke: #6E8192;\n  stroke-width: 2;\n}\n\n.apexcharts-pan-icon.apexcharts-selected svg {\n  stroke: #008FFB;\n}\n\n.apexcharts-pan-icon:not(.apexcharts-selected):hover svg {\n  stroke: #333;\n}\n\n.apexcharts-toolbar {\n  position: absolute;\n  z-index: 11;\n  max-width: 176px;\n  text-align: right;\n  border-radius: 3px;\n  padding: 0px 6px 2px 6px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.apexcharts-menu {\n  background: #fff;\n  position: absolute;\n  top: 100%;\n  border: 1px solid #ddd;\n  border-radius: 3px;\n  padding: 3px;\n  right: 10px;\n  opacity: 0;\n  min-width: 110px;\n  transition: 0.15s ease all;\n  pointer-events: none;\n}\n\n.apexcharts-menu.apexcharts-menu-open {\n  opacity: 1;\n  pointer-events: all;\n  transition: 0.15s ease all;\n}\n\n.apexcharts-menu-item {\n  padding: 6px 7px;\n  font-size: 12px;\n  cursor: pointer;\n}\n\n.apexcharts-theme-light .apexcharts-menu-item:hover {\n  background: #eee;\n}\n\n.apexcharts-theme-dark .apexcharts-menu {\n  background: rgba(0, 0, 0, 0.7);\n  color: #fff;\n}\n\n@media screen and (min-width: 768px) {\n  .apexcharts-canvas:hover .apexcharts-toolbar {\n    opacity: 1;\n  }\n}\n\n.apexcharts-datalabel.apexcharts-element-hidden {\n  opacity: 0;\n}\n\n.apexcharts-pie-label,\n.apexcharts-datalabels,\n.apexcharts-datalabel,\n.apexcharts-datalabel-label,\n.apexcharts-datalabel-value {\n  cursor: default;\n  pointer-events: none;\n}\n\n.apexcharts-pie-label-delay {\n  opacity: 0;\n  animation-name: opaque;\n  animation-duration: 0.3s;\n  animation-fill-mode: forwards;\n  animation-timing-function: ease;\n}\n\n.apexcharts-canvas .apexcharts-element-hidden {\n  opacity: 0;\n}\n\n.apexcharts-hide .apexcharts-series-points {\n  opacity: 0;\n}\n\n.apexcharts-gridline,\n.apexcharts-annotation-rect,\n.apexcharts-tooltip .apexcharts-marker,\n.apexcharts-area-series .apexcharts-area,\n.apexcharts-line,\n.apexcharts-zoom-rect,\n.apexcharts-toolbar svg,\n.apexcharts-area-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,\n.apexcharts-line-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,\n.apexcharts-radar-series path,\n.apexcharts-radar-series polygon {\n  pointer-events: none;\n}\n\n\n/* markers */\n\n.apexcharts-marker {\n  transition: 0.15s ease all;\n}\n\n@keyframes opaque {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n\n/* Resize generated styles */\n\n@keyframes resizeanim {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n.resize-triggers {\n  animation: 1ms resizeanim;\n  visibility: hidden;\n  opacity: 0;\n}\n\n.resize-triggers,\n.resize-triggers>div,\n.contract-trigger:before {\n  content: " ";\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n.resize-triggers>div {\n  background: #eee;\n  overflow: auto;\n}\n\n.contract-trigger:before {\n  width: 200%;\n  height: 200%;\n}'),function(){function t(t){var e=t.__resizeTriggers__,i=e.firstElementChild,a=e.lastElementChild,s=i?i.firstElementChild:null;a&&(a.scrollLeft=a.scrollWidth,a.scrollTop=a.scrollHeight),s&&(s.style.width=i.offsetWidth+1+"px",s.style.height=i.offsetHeight+1+"px"),i&&(i.scrollLeft=i.scrollWidth,i.scrollTop=i.scrollHeight)}function e(e){var i=this;t(this),this.__resizeRAF__&&r(this.__resizeRAF__),this.__resizeRAF__=s((function(){(function(t){return t.offsetWidth!=t.__resizeLast__.width||t.offsetHeight!=t.__resizeLast__.height})(i)&&(i.__resizeLast__.width=i.offsetWidth,i.__resizeLast__.height=i.offsetHeight,i.__resizeListeners__.forEach((function(t){t.call(e)})))}))}var i,a,s=(i=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(t){return window.setTimeout(t,20)},function(t){return i(t)}),r=(a=window.cancelAnimationFrame||window.mozCancelAnimationFrame||window.webkitCancelAnimationFrame||window.clearTimeout,function(t){return a(t)}),n=!1,o="animationstart",l="Webkit Moz O ms".split(" "),h="webkitAnimationStart animationstart oAnimationStart MSAnimationStart".split(" "),c=document.createElement("fakeelement");if(void 0!==c.style.animationName&&(n=!0),!1===n)for(var d=0;d<l.length;d++)if(void 0!==c.style[l[d]+"AnimationName"]){o=h[d];break}window.addResizeListener=function(i,a){i.__resizeTriggers__||("static"==getComputedStyle(i).position&&(i.style.position="relative"),i.__resizeLast__={},i.__resizeListeners__=[],(i.__resizeTriggers__=document.createElement("div")).className="resize-triggers",i.__resizeTriggers__.innerHTML='<div class="expand-trigger"><div></div></div><div class="contract-trigger"></div>',i.appendChild(i.__resizeTriggers__),t(i),i.addEventListener("scroll",e,!0),o&&i.__resizeTriggers__.addEventListener(o,(function(e){"resizeanim"==e.animationName&&t(i)}))),i.__resizeListeners__.push(a)},window.removeResizeListener=function(t,i){t&&(t.__resizeListeners__.splice(t.__resizeListeners__.indexOf(i),1),t.__resizeListeners__.length||(t.removeEventListener("scroll",e),t.__resizeTriggers__.parentNode&&(t.__resizeTriggers__=!t.removeChild(t.__resizeTriggers__))))}}(),window.Apex={};var It=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"initModules",value:function(){this.ctx.publicMethods=["updateOptions","updateSeries","appendData","appendSeries","toggleSeries","showSeries","hideSeries","setLocale","resetSeries","zoomX","toggleDataPointSelection","dataURI","addXaxisAnnotation","addYaxisAnnotation","addPointAnnotation","clearAnnotations","removeAnnotation","paper","destroy"],this.ctx.eventList=["click","mousedown","mousemove","touchstart","touchmove","mouseup","touchend"],this.ctx.animations=new f(this.ctx),this.ctx.axes=new J(this.ctx),this.ctx.core=new Tt(this.ctx.el,this.ctx),this.ctx.config=new D({}),this.ctx.data=new O(this.ctx),this.ctx.grid=new _(this.ctx),this.ctx.graphics=new p(this.ctx),this.ctx.coreUtils=new m(this.ctx),this.ctx.crosshairs=new Q(this.ctx),this.ctx.events=new Z(this.ctx),this.ctx.exports=new V(this.ctx),this.ctx.localization=new $(this.ctx),this.ctx.options=new S,this.ctx.responsive=new K(this.ctx),this.ctx.series=new M(this.ctx),this.ctx.theme=new tt(this.ctx),this.ctx.formatters=new W(this.ctx),this.ctx.titleSubtitle=new et(this.ctx),this.ctx.legend=new ct(this.ctx),this.ctx.toolbar=new dt(this.ctx),this.ctx.dimensions=new nt(this.ctx),this.ctx.updateHelpers=new zt(this.ctx),this.ctx.zoomPanSelection=new gt(this.ctx),this.ctx.w.globals.tooltip=new vt(this.ctx)}}]),t}(),Mt=function(){function t(i){e(this,t),this.ctx=i,this.w=i.w}return a(t,[{key:"clear",value:function(){this.ctx.zoomPanSelection&&this.ctx.zoomPanSelection.destroy(),this.ctx.toolbar&&this.ctx.toolbar.destroy(),this.ctx.animations=null,this.ctx.axes=null,this.ctx.annotations=null,this.ctx.core=null,this.ctx.data=null,this.ctx.grid=null,this.ctx.series=null,this.ctx.responsive=null,this.ctx.theme=null,this.ctx.formatters=null,this.ctx.titleSubtitle=null,this.ctx.legend=null,this.ctx.dimensions=null,this.ctx.options=null,this.ctx.crosshairs=null,this.ctx.zoomPanSelection=null,this.ctx.updateHelpers=null,this.ctx.toolbar=null,this.ctx.localization=null,this.ctx.w.globals.tooltip=null,this.clearDomElements()}},{key:"killSVG",value:function(t){t.each((function(t,e){this.removeClass("*"),this.off(),this.stop()}),!0),t.ungroup(),t.clear()}},{key:"clearDomElements",value:function(){var t=this;this.ctx.eventList.forEach((function(e){document.removeEventListener(e,t.ctx.events.documentEvent)}));var e=this.w.globals.dom;if(null!==this.ctx.el)for(;this.ctx.el.firstChild;)this.ctx.el.removeChild(this.ctx.el.firstChild);this.killSVG(e.Paper),e.Paper.remove(),e.elWrap=null,e.elGraphical=null,e.elAnnotations=null,e.elLegendWrap=null,e.baseEl=null,e.elGridRect=null,e.elGridRectMask=null,e.elGridRectMarkerMask=null,e.elDefs=null}}]),t}();return function(){function t(i,a){e(this,t),this.opts=a,this.ctx=this,this.w=new N(a).init(),this.el=i,this.w.globals.cuid=g.randomId(),this.w.globals.chartID=this.w.config.chart.id?this.w.config.chart.id:this.w.globals.cuid,new It(this).initModules(),this.create=g.bind(this.create,this),this.windowResizeHandler=this._windowResize.bind(this)}return a(t,[{key:"render",value:function(){var t=this;return new Promise((function(e,i){if(null!==t.el){void 0===Apex._chartInstances&&(Apex._chartInstances=[]),t.w.config.chart.id&&Apex._chartInstances.push({id:t.w.globals.chartID,group:t.w.config.chart.group,chart:t}),t.setLocale(t.w.config.chart.defaultLocale);var a=t.w.config.chart.events.beforeMount;"function"==typeof a&&a(t,t.w),t.events.fireEvent("beforeMount",[t,t.w]),window.addEventListener("resize",t.windowResizeHandler),window.addResizeListener(t.el.parentNode,t._parentResizeCallback.bind(t));var s=t.create(t.w.config.series,{});if(!s)return e(t);t.mount(s).then((function(){"function"==typeof t.w.config.chart.events.mounted&&t.w.config.chart.events.mounted(t,t.w),t.events.fireEvent("mounted",[t,t.w]),e(s)})).catch((function(t){i(t)}))}else i(new Error("Element not found"))}))}},{key:"create",value:function(t,e){var i=this.w;new It(this).initModules();var a=this.w.globals;(a.noData=!1,a.animationEnded=!1,this.responsive.checkResponsiveConfig(e),i.config.xaxis.convertedCatToNumeric)&&new R(i.config).convertCatToNumericXaxis(i.config,this.ctx);if(null===this.el)return a.animationEnded=!0,null;if(this.core.setupElements(),0===a.svgWidth)return a.animationEnded=!0,null;var s=m.checkComboSeries(t);a.comboCharts=s.comboCharts,a.comboBarCount=s.comboBarCount,(0===t.length||1===t.length&&t[0].data&&0===t[0].data.length)&&this.series.handleNoData(),this.events.setupEventHandlers(),this.data.parseData(t),this.theme.init(),new P(this).setGlobalMarkerSize(),this.formatters.setLabelFormatters(),this.titleSubtitle.draw(),a.noData&&a.collapsedSeries.length!==a.series.length||this.legend.init(),this.series.hasAllSeriesEqualX(),a.axisCharts&&(this.core.coreCalculations(),"category"!==i.config.xaxis.type&&this.formatters.setLabelFormatters()),this.formatters.heatmapLabelFormatters(),this.dimensions.plotCoords();var r=this.core.xySettings();this.grid.createGridMask();var n=this.core.plotChartType(t,r),o=new z(this);o.bringForward(),i.config.dataLabels.background.enabled&&o.dataLabelsBackground(),this.core.shiftGraphPosition();var l={plot:{left:i.globals.translateX,top:i.globals.translateY,width:i.globals.gridWidth,height:i.globals.gridHeight}};return{elGraph:n,xyRatios:r,elInner:i.globals.dom.elGraphical,dimensions:l}}},{key:"mount",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,i=this,a=i.w;return new Promise((function(s,r){if(null===i.el)return r(new Error("Not enough data to display or target element not found"));(null===e||a.globals.allSeriesCollapsed)&&i.series.handleNoData(),i.axes.drawAxis(a.config.chart.type,e.xyRatios),i.grid=new _(i);var n=i.grid.drawGrid();i.annotations=new C(i),i.annotations.drawShapeAnnos(),i.annotations.drawImageAnnos(),i.annotations.drawTextAnnos(),"back"===a.config.grid.position&&n&&a.globals.dom.elGraphical.add(n.el);var o=new G(t.ctx),l=new q(t.ctx);if(null!==n&&(o.xAxisLabelCorrections(n.xAxisTickWidth),l.setYAxisTextAlignments()),"back"===a.config.annotations.position&&(a.globals.dom.Paper.add(a.globals.dom.elAnnotations),i.annotations.drawAxesAnnotations()),e.elGraph instanceof Array)for(var h=0;h<e.elGraph.length;h++)a.globals.dom.elGraphical.add(e.elGraph[h]);else a.globals.dom.elGraphical.add(e.elGraph);if("front"===a.config.grid.position&&n&&a.globals.dom.elGraphical.add(n.el),"front"===a.config.xaxis.crosshairs.position&&i.crosshairs.drawXCrosshairs(),"front"===a.config.yaxis[0].crosshairs.position&&i.crosshairs.drawYCrosshairs(),"front"===a.config.annotations.position&&(a.globals.dom.Paper.add(a.globals.dom.elAnnotations),i.annotations.drawAxesAnnotations()),!a.globals.noData){if(a.config.tooltip.enabled&&!a.globals.noData&&i.w.globals.tooltip.drawTooltip(e.xyRatios),a.globals.axisCharts&&(a.globals.isXNumeric||a.config.xaxis.convertedCatToNumeric))(a.config.chart.zoom.enabled||a.config.chart.selection&&a.config.chart.selection.enabled||a.config.chart.pan&&a.config.chart.pan.enabled)&&i.zoomPanSelection.init({xyRatios:e.xyRatios});else{var c=a.config.chart.toolbar.tools;["zoom","zoomin","zoomout","selection","pan","reset"].forEach((function(t){c[t]=!1}))}a.config.chart.toolbar.show&&!a.globals.allSeriesCollapsed&&i.toolbar.createToolbar()}a.globals.memory.methodsToExec.length>0&&a.globals.memory.methodsToExec.forEach((function(t){t.method(t.params,!1,t.context)})),a.globals.axisCharts||a.globals.noData||i.core.resizeNonAxisCharts(),s(i)}))}},{key:"destroy",value:function(){window.removeEventListener("resize",this.windowResizeHandler),window.removeResizeListener(this.el.parentNode,this._parentResizeCallback.bind(this));var t=this.w.config.chart.id;t&&Apex._chartInstances.forEach((function(e,i){e.id===t&&Apex._chartInstances.splice(i,1)})),new Mt(this.ctx).clear()}},{key:"updateOptions",value:function(t){var e=this,i=arguments.length>1&&void 0!==arguments[1]&&arguments[1],a=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],s=!(arguments.length>3&&void 0!==arguments[3])||arguments[3],r=!(arguments.length>4&&void 0!==arguments[4])||arguments[4],n=this.w;return t.series&&(this.series.resetSeries(!1,!0,!1),t.series.length&&t.series[0].data&&(t.series=t.series.map((function(t,i){return e.updateHelpers._extendSeries(t,i)}))),this.updateHelpers.revertDefaultAxisMinMax()),t.xaxis&&(t=this.updateHelpers.forceXAxisUpdate(t)),t.yaxis&&(t=this.updateHelpers.forceYAxisUpdate(t)),n.globals.collapsedSeriesIndices.length>0&&this.series.clearPreviousPaths(),t.theme&&(t=this.theme.updateThemeOptions(t)),this.updateHelpers._updateOptions(t,i,a,s,r)}},{key:"updateSeries",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];return this.series.resetSeries(!1),this.updateHelpers.revertDefaultAxisMinMax(),this.updateHelpers._updateSeries(t,e,i)}},{key:"appendSeries",value:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],a=this.w.config.series.slice();return a.push(t),this.series.resetSeries(!1),this.updateHelpers.revertDefaultAxisMinMax(),this.updateHelpers._updateSeries(a,e,i)}},{key:"appendData",value:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=this;i.w.globals.dataChanged=!0,i.series.getPreviousPaths();for(var a=i.w.config.series.slice(),s=0;s<a.length;s++)if(void 0!==t[s])for(var r=0;r<t[s].data.length;r++)a[s].data.push(t[s].data[r]);return i.w.config.series=a,e&&(i.w.globals.initialSeries=JSON.parse(JSON.stringify(i.w.config.series))),this.update()}},{key:"update",value:function(t){var e=this;return new Promise((function(i,a){new Mt(e.ctx).clear();var s=e.create(e.w.config.series,t);if(!s)return i(e);e.mount(s).then((function(){"function"==typeof e.w.config.chart.events.updated&&e.w.config.chart.events.updated(e,e.w),e.events.fireEvent("updated",[e,e.w]),e.w.globals.isDirty=!0,i(e)})).catch((function(t){a(t)}))}))}},{key:"getSyncedCharts",value:function(){var t=this.getGroupedCharts(),e=[this];return t.length&&(e=[],t.forEach((function(t){e.push(t)}))),e}},{key:"getGroupedCharts",value:function(){var t=this;return Apex._chartInstances.filter((function(t){if(t.group)return!0})).map((function(e){return t.w.config.chart.group===e.group?e.chart:t}))}},{key:"toggleSeries",value:function(t){return this.series.toggleSeries(t)}},{key:"showSeries",value:function(t){this.series.showSeries(t)}},{key:"hideSeries",value:function(t){this.series.hideSeries(t)}},{key:"resetSeries",value:function(){var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];this.series.resetSeries(t,e)}},{key:"addEventListener",value:function(t,e){this.events.addEventListener(t,e)}},{key:"removeEventListener",value:function(t,e){this.events.removeEventListener(t,e)}},{key:"addXaxisAnnotation",value:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:void 0,a=this;i&&(a=i),a.annotations.addXaxisAnnotationExternal(t,e,a)}},{key:"addYaxisAnnotation",value:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:void 0,a=this;i&&(a=i),a.annotations.addYaxisAnnotationExternal(t,e,a)}},{key:"addPointAnnotation",value:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:void 0,a=this;i&&(a=i),a.annotations.addPointAnnotationExternal(t,e,a)}},{key:"clearAnnotations",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:void 0,e=this;t&&(e=t),e.annotations.clearAnnotations(e)}},{key:"removeAnnotation",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,i=this;e&&(i=e),i.annotations.removeAnnotation(i,t)}},{key:"getChartArea",value:function(){return this.w.globals.dom.baseEl.querySelector(".apexcharts-inner")}},{key:"getSeriesTotalXRange",value:function(t,e){return this.coreUtils.getSeriesTotalsXRange(t,e)}},{key:"getHighestValueInSeries",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=new U(this.ctx);return e.getMinYMaxY(t).highestY}},{key:"getLowestValueInSeries",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=new U(this.ctx);return e.getMinYMaxY(t).lowestY}},{key:"getSeriesTotal",value:function(){return this.w.globals.seriesTotals}},{key:"toggleDataPointSelection",value:function(t,e){return this.updateHelpers.toggleDataPointSelection(t,e)}},{key:"zoomX",value:function(t,e){this.ctx.toolbar.zoomUpdateOptions(t,e)}},{key:"setLocale",value:function(t){this.localization.setCurrentLocaleValues(t)}},{key:"dataURI",value:function(){return new V(this.ctx).dataURI()}},{key:"paper",value:function(){return this.w.globals.dom.Paper}},{key:"_parentResizeCallback",value:function(){!this.w.globals.noData&&this.w.globals.animationEnded&&this.w.config.chart.redrawOnParentResize&&this._windowResize()}},{key:"_windowResize",value:function(){var t=this;clearTimeout(this.w.globals.resizeTimer),this.w.globals.resizeTimer=window.setTimeout((function(){t.w.globals.resized=!0,t.w.globals.dataChanged=!1,t.ctx.update()}),150)}}],[{key:"getChartByID",value:function(t){var e=Apex._chartInstances.filter((function(e){return e.id===t}))[0];return e&&e.chart}},{key:"initOnLoad",value:function(){for(var e=document.querySelectorAll("[data-apexcharts]"),i=0;i<e.length;i++){new t(e[i],JSON.parse(e[i].getAttribute("data-options"))).render()}}},{key:"exec",value:function(t,e){var i=this.getChartByID(t);if(i){i.w.globals.isExecCalled=!0;var a=null;if(-1!==i.publicMethods.indexOf(e)){for(var s=arguments.length,r=new Array(s>2?s-2:0),n=2;n<s;n++)r[n-2]=arguments[n];a=i[e].apply(i,r)}return a}}},{key:"merge",value:function(t,e){return g.extend(t,e)}}]),t}()}));
diff --git a/dist/libs/jquery/dist/jquery.slim.min.js b/dist/libs/jquery/dist/jquery.slim.min.js
index af151cfe3..a3bdd4625 100644
--- a/dist/libs/jquery/dist/jquery.slim.min.js
+++ b/dist/libs/jquery/dist/jquery.slim.min.js
@@ -1,2 +1,2 @@
-/*! jQuery v3.4.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/parseXML,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-event/ajax,-effects,-effects/Tween,-effects/animatedSelector | (c) JS Foundation and other contributors | jquery.org/license */
-!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(g,e){"use strict";var t=[],v=g.document,r=Object.getPrototypeOf,s=t.slice,y=t.concat,u=t.push,i=t.indexOf,n={},o=n.toString,m=n.hasOwnProperty,a=m.toString,l=a.call(Object),b={},x=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType},w=function(e){return null!=e&&e===e.window},c={type:!0,src:!0,nonce:!0,noModule:!0};function C(e,t,n){var r,i,o=(n=n||v).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function T(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.4.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/parseXML,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-event/ajax,-effects,-effects/Tween,-effects/animatedSelector",E=function(e,t){return new E.fn.init(e,t)},d=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;function p(e){var t=!!e&&"length"in e&&e.length,n=T(e);return!x(e)&&!w(e)&&("array"===n||0===t||"number"==typeof t&&0<t&&t-1 in e)}E.fn=E.prototype={jquery:f,constructor:E,length:0,toArray:function(){return s.call(this)},get:function(e){return null==e?s.call(this):e<0?this[e+this.length]:this[e]},pushStack:function(e){var t=E.merge(this.constructor(),e);return t.prevObject=this,t},each:function(e){return E.each(this,e)},map:function(n){return this.pushStack(E.map(this,function(e,t){return n.call(e,t,e)}))},slice:function(){return this.pushStack(s.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(e){var t=this.length,n=+e+(e<0?t:0);return this.pushStack(0<=n&&n<t?[this[n]]:[])},end:function(){return this.prevObject||this.constructor()},push:u,sort:t.sort,splice:t.splice},E.extend=E.fn.extend=function(){var e,t,n,r,i,o,a=arguments[0]||{},s=1,u=arguments.length,l=!1;for("boolean"==typeof a&&(l=a,a=arguments[s]||{},s++),"object"==typeof a||x(a)||(a={}),s===u&&(a=this,s--);s<u;s++)if(null!=(e=arguments[s]))for(t in e)r=e[t],"__proto__"!==t&&a!==r&&(l&&r&&(E.isPlainObject(r)||(i=Array.isArray(r)))?(n=a[t],o=i&&!Array.isArray(n)?[]:i||E.isPlainObject(n)?n:{},i=!1,a[t]=E.extend(l,o,r)):void 0!==r&&(a[t]=r));return a},E.extend({expando:"jQuery"+(f+Math.random()).replace(/\D/g,""),isReady:!0,error:function(e){throw new Error(e)},noop:function(){},isPlainObject:function(e){var t,n;return!(!e||"[object Object]"!==o.call(e))&&(!(t=r(e))||"function"==typeof(n=m.call(t,"constructor")&&t.constructor)&&a.call(n)===l)},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},globalEval:function(e,t){C(e,{nonce:t&&t.nonce})},each:function(e,t){var n,r=0;if(p(e)){for(n=e.length;r<n;r++)if(!1===t.call(e[r],r,e[r]))break}else for(r in e)if(!1===t.call(e[r],r,e[r]))break;return e},trim:function(e){return null==e?"":(e+"").replace(d,"")},makeArray:function(e,t){var n=t||[];return null!=e&&(p(Object(e))?E.merge(n,"string"==typeof e?[e]:e):u.call(n,e)),n},inArray:function(e,t,n){return null==t?-1:i.call(t,e,n)},merge:function(e,t){for(var n=+t.length,r=0,i=e.length;r<n;r++)e[i++]=t[r];return e.length=i,e},grep:function(e,t,n){for(var r=[],i=0,o=e.length,a=!n;i<o;i++)!t(e[i],i)!==a&&r.push(e[i]);return r},map:function(e,t,n){var r,i,o=0,a=[];if(p(e))for(r=e.length;o<r;o++)null!=(i=t(e[o],o,n))&&a.push(i);else for(o in e)null!=(i=t(e[o],o,n))&&a.push(i);return y.apply([],a)},guid:1,support:b}),"function"==typeof Symbol&&(E.fn[Symbol.iterator]=t[Symbol.iterator]),E.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(e,t){n["[object "+t+"]"]=t.toLowerCase()});var h=function(n){var e,p,x,o,i,h,f,g,w,u,l,C,T,a,E,v,s,c,y,N="sizzle"+1*new Date,m=n.document,A=0,r=0,d=ue(),b=ue(),k=ue(),S=ue(),D=function(e,t){return e===t&&(l=!0),0},L={}.hasOwnProperty,t=[],j=t.pop,q=t.push,O=t.push,P=t.slice,H=function(e,t){for(var n=0,r=e.length;n<r;n++)if(e[n]===t)return n;return-1},I="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",R="[\\x20\\t\\r\\n\\f]",B="(?:\\\\.|[\\w-]|[^\0-\\xa0])+",M="\\["+R+"*("+B+")(?:"+R+"*([*^$|!~]?=)"+R+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+B+"))|)"+R+"*\\]",W=":("+B+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+M+")*)|.*)\\)|)",$=new RegExp(R+"+","g"),F=new RegExp("^"+R+"+|((?:^|[^\\\\])(?:\\\\.)*)"+R+"+$","g"),z=new RegExp("^"+R+"*,"+R+"*"),_=new RegExp("^"+R+"*([>+~]|"+R+")"+R+"*"),U=new RegExp(R+"|>"),V=new RegExp(W),X=new RegExp("^"+B+"$"),Q={ID:new RegExp("^#("+B+")"),CLASS:new RegExp("^\\.("+B+")"),TAG:new RegExp("^("+B+"|[*])"),ATTR:new RegExp("^"+M),PSEUDO:new RegExp("^"+W),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+R+"*(even|odd|(([+-]|)(\\d*)n|)"+R+"*(?:([+-]|)"+R+"*(\\d+)|))"+R+"*\\)|)","i"),bool:new RegExp("^(?:"+I+")$","i"),needsContext:new RegExp("^"+R+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+R+"*((?:-\\d)?\\d*)"+R+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,G=/^(?:input|select|textarea|button)$/i,K=/^h\d$/i,J=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\([\\da-f]{1,6}"+R+"?|("+R+")|.)","ig"),ne=function(e,t,n){var r="0x"+t-65536;return r!=r||n?t:r<0?String.fromCharCode(r+65536):String.fromCharCode(r>>10|55296,1023&r|56320)},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){C()},ae=xe(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{O.apply(t=P.call(m.childNodes),m.childNodes),t[m.childNodes.length].nodeType}catch(e){O={apply:t.length?function(e,t){q.apply(e,P.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,d=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==d&&9!==d&&11!==d)return n;if(!r&&((e?e.ownerDocument||e:m)!==T&&C(e),e=e||T,E)){if(11!==d&&(u=Z.exec(t)))if(i=u[1]){if(9===d){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return O.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&p.getElementsByClassName&&e.getElementsByClassName)return O.apply(n,e.getElementsByClassName(i)),n}if(p.qsa&&!S[t+" "]&&(!v||!v.test(t))&&(1!==d||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===d&&U.test(t)){(s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=N),o=(l=h(t)).length;while(o--)l[o]="#"+s+" "+be(l[o]);c=l.join(","),f=ee.test(t)&&ye(e.parentNode)||e}try{return O.apply(n,f.querySelectorAll(c)),n}catch(e){S(t,!0)}finally{s===N&&e.removeAttribute("id")}}}return g(t.replace(F,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>x.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[N]=!0,e}function ce(e){var t=T.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)x.attrHandle[n[r]]=t}function de(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function pe(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in p=se.support={},i=se.isXML=function(e){var t=e.namespaceURI,n=(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},C=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:m;return r!==T&&9===r.nodeType&&r.documentElement&&(a=(T=r).documentElement,E=!i(T),m!==T&&(n=T.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),p.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),p.getElementsByTagName=ce(function(e){return e.appendChild(T.createComment("")),!e.getElementsByTagName("*").length}),p.getElementsByClassName=J.test(T.getElementsByClassName),p.getById=ce(function(e){return a.appendChild(e).id=N,!T.getElementsByName||!T.getElementsByName(N).length}),p.getById?(x.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},x.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(x.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},x.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),x.find.TAG=p.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):p.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},x.find.CLASS=p.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(p.qsa=J.test(T.querySelectorAll))&&(ce(function(e){a.appendChild(e).innerHTML="<a id='"+N+"'></a><select id='"+N+"-\r\\' msallowcapture=''><option selected=''></option></select>",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+R+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+R+"*(?:value|"+I+")"),e.querySelectorAll("[id~="+N+"-]").length||v.push("~="),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+N+"+*").length||v.push(".#.+[+~]")}),ce(function(e){e.innerHTML="<a href='' disabled='disabled'></a><select disabled='disabled'><option/></select>";var t=T.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+R+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(p.matchesSelector=J.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){p.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",W)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=J.test(a.compareDocumentPosition),y=t||J.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},D=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)===(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!p.sortDetached&&t.compareDocumentPosition(e)===n?e===T||e.ownerDocument===m&&y(m,e)?-1:t===T||t.ownerDocument===m&&y(m,t)?1:u?H(u,e)-H(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e===T?-1:t===T?1:i?-1:o?1:u?H(u,e)-H(u,t):0;if(i===o)return de(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?de(a[r],s[r]):a[r]===m?-1:s[r]===m?1:0}),T},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if((e.ownerDocument||e)!==T&&C(e),p.matchesSelector&&E&&!S[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||p.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){S(t,!0)}return 0<se(t,T,null,[e]).length},se.contains=function(e,t){return(e.ownerDocument||e)!==T&&C(e),y(e,t)},se.attr=function(e,t){(e.ownerDocument||e)!==T&&C(e);var n=x.attrHandle[t.toLowerCase()],r=n&&L.call(x.attrHandle,t.toLowerCase())?n(e,t,!E):void 0;return void 0!==r?r:p.attributes||!E?e.getAttribute(t):(r=e.getAttributeNode(t))&&r.specified?r.value:null},se.escape=function(e){return(e+"").replace(re,ie)},se.error=function(e){throw new Error("Syntax error, unrecognized expression: "+e)},se.uniqueSort=function(e){var t,n=[],r=0,i=0;if(l=!p.detectDuplicates,u=!p.sortStable&&e.slice(0),e.sort(D),l){while(t=e[i++])t===e[i]&&(r=n.push(i));while(r--)e.splice(n[r],1)}return u=null,e},o=se.getText=function(e){var t,n="",r=0,i=e.nodeType;if(i){if(1===i||9===i||11===i){if("string"==typeof e.textContent)return e.textContent;for(e=e.firstChild;e;e=e.nextSibling)n+=o(e)}else if(3===i||4===i)return e.nodeValue}else while(t=e[r++])n+=o(t);return n},(x=se.selectors={cacheLength:50,createPseudo:le,match:Q,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return Q.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&V.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=d[e+" "];return t||(t=new RegExp("(^|"+R+")"+e+"("+R+"|$)"))&&d(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1<t.indexOf(i):"$="===r?i&&t.slice(-i.length)===i:"~="===r?-1<(" "+t.replace($," ")+" ").indexOf(i):"|="===r&&(t===i||t.slice(0,i.length+1)===i+"-"))}},CHILD:function(h,e,t,g,v){var y="nth"!==h.slice(0,3),m="last"!==h.slice(-4),b="of-type"===e;return 1===g&&0===v?function(e){return!!e.parentNode}:function(e,t,n){var r,i,o,a,s,u,l=y!==m?"nextSibling":"previousSibling",c=e.parentNode,f=b&&e.nodeName.toLowerCase(),d=!n&&!b,p=!1;if(c){if(y){while(l){a=e;while(a=a[l])if(b?a.nodeName.toLowerCase()===f:1===a.nodeType)return!1;u=l="only"===h&&!u&&"nextSibling"}return!0}if(u=[m?c.firstChild:c.lastChild],m&&d){p=(s=(r=(i=(o=(a=c)[N]||(a[N]={}))[a.uniqueID]||(o[a.uniqueID]={}))[h]||[])[0]===A&&r[1])&&r[2],a=s&&c.childNodes[s];while(a=++s&&a&&a[l]||(p=s=0)||u.pop())if(1===a.nodeType&&++p&&a===e){i[h]=[A,s,p];break}}else if(d&&(p=s=(r=(i=(o=(a=e)[N]||(a[N]={}))[a.uniqueID]||(o[a.uniqueID]={}))[h]||[])[0]===A&&r[1]),!1===p)while(a=++s&&a&&a[l]||(p=s=0)||u.pop())if((b?a.nodeName.toLowerCase()===f:1===a.nodeType)&&++p&&(d&&((i=(o=a[N]||(a[N]={}))[a.uniqueID]||(o[a.uniqueID]={}))[h]=[A,p]),a===e))break;return(p-=v)===g||p%g==0&&0<=p/g}}},PSEUDO:function(e,o){var t,a=x.pseudos[e]||x.setFilters[e.toLowerCase()]||se.error("unsupported pseudo: "+e);return a[N]?a(o):1<a.length?(t=[e,e,"",o],x.setFilters.hasOwnProperty(e.toLowerCase())?le(function(e,t){var n,r=a(e,o),i=r.length;while(i--)e[n=H(e,r[i])]=!(t[n]=r[i])}):function(e){return a(e,0,t)}):a}},pseudos:{not:le(function(e){var r=[],i=[],s=f(e.replace(F,"$1"));return s[N]?le(function(e,t,n,r){var i,o=s(e,null,r,[]),a=e.length;while(a--)(i=o[a])&&(e[a]=!(t[a]=i))}):function(e,t,n){return r[0]=e,s(r,null,n,i),r[0]=null,!i.pop()}}),has:le(function(t){return function(e){return 0<se(t,e).length}}),contains:le(function(t){return t=t.replace(te,ne),function(e){return-1<(e.textContent||o(e)).indexOf(t)}}),lang:le(function(n){return X.test(n||"")||se.error("unsupported lang: "+n),n=n.replace(te,ne).toLowerCase(),function(e){var t;do{if(t=E?e.lang:e.getAttribute("xml:lang")||e.getAttribute("lang"))return(t=t.toLowerCase())===n||0===t.indexOf(n+"-")}while((e=e.parentNode)&&1===e.nodeType);return!1}}),target:function(e){var t=n.location&&n.location.hash;return t&&t.slice(1)===e.id},root:function(e){return e===a},focus:function(e){return e===T.activeElement&&(!T.hasFocus||T.hasFocus())&&!!(e.type||e.href||~e.tabIndex)},enabled:ge(!1),disabled:ge(!0),checked:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&!!e.checked||"option"===t&&!!e.selected},selected:function(e){return e.parentNode&&e.parentNode.selectedIndex,!0===e.selected},empty:function(e){for(e=e.firstChild;e;e=e.nextSibling)if(e.nodeType<6)return!1;return!0},parent:function(e){return!x.pseudos.empty(e)},header:function(e){return K.test(e.nodeName)},input:function(e){return G.test(e.nodeName)},button:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&"button"===e.type||"button"===t},text:function(e){var t;return"input"===e.nodeName.toLowerCase()&&"text"===e.type&&(null==(t=e.getAttribute("type"))||"text"===t.toLowerCase())},first:ve(function(){return[0]}),last:ve(function(e,t){return[t-1]}),eq:ve(function(e,t,n){return[n<0?n+t:n]}),even:ve(function(e,t){for(var n=0;n<t;n+=2)e.push(n);return e}),odd:ve(function(e,t){for(var n=1;n<t;n+=2)e.push(n);return e}),lt:ve(function(e,t,n){for(var r=n<0?n+t:t<n?t:n;0<=--r;)e.push(r);return e}),gt:ve(function(e,t,n){for(var r=n<0?n+t:n;++r<t;)e.push(r);return e})}}).pseudos.nth=x.pseudos.eq,{radio:!0,checkbox:!0,file:!0,password:!0,image:!0})x.pseudos[e]=pe(e);for(e in{submit:!0,reset:!0})x.pseudos[e]=he(e);function me(){}function be(e){for(var t=0,n=e.length,r="";t<n;t++)r+=e[t].value;return r}function xe(s,e,t){var u=e.dir,l=e.next,c=l||u,f=t&&"parentNode"===c,d=r++;return e.first?function(e,t,n){while(e=e[u])if(1===e.nodeType||f)return s(e,t,n);return!1}:function(e,t,n){var r,i,o,a=[A,d];if(n){while(e=e[u])if((1===e.nodeType||f)&&s(e,t,n))return!0}else while(e=e[u])if(1===e.nodeType||f)if(i=(o=e[N]||(e[N]={}))[e.uniqueID]||(o[e.uniqueID]={}),l&&l===e.nodeName.toLowerCase())e=e[u]||e;else{if((r=i[c])&&r[0]===A&&r[1]===d)return a[2]=r[2];if((i[c]=a)[2]=s(e,t,n))return!0}return!1}}function we(i){return 1<i.length?function(e,t,n){var r=i.length;while(r--)if(!i[r](e,t,n))return!1;return!0}:i[0]}function Ce(e,t,n,r,i){for(var o,a=[],s=0,u=e.length,l=null!=t;s<u;s++)(o=e[s])&&(n&&!n(o,r,i)||(a.push(o),l&&t.push(s)));return a}function Te(p,h,g,v,y,e){return v&&!v[N]&&(v=Te(v)),y&&!y[N]&&(y=Te(y,e)),le(function(e,t,n,r){var i,o,a,s=[],u=[],l=t.length,c=e||function(e,t,n){for(var r=0,i=t.length;r<i;r++)se(e,t[r],n);return n}(h||"*",n.nodeType?[n]:n,[]),f=!p||!e&&h?c:Ce(c,s,p,n,r),d=g?y||(e?p:l||v)?[]:t:f;if(g&&g(f,d,n,r),v){i=Ce(d,u),v(i,[],n,r),o=i.length;while(o--)(a=i[o])&&(d[u[o]]=!(f[u[o]]=a))}if(e){if(y||p){if(y){i=[],o=d.length;while(o--)(a=d[o])&&i.push(f[o]=a);y(null,d=[],i,r)}o=d.length;while(o--)(a=d[o])&&-1<(i=y?H(e,a):s[o])&&(e[i]=!(t[i]=a))}}else d=Ce(d===t?d.splice(l,d.length):d),y?y(null,t,d,r):O.apply(t,d)})}function Ee(e){for(var i,t,n,r=e.length,o=x.relative[e[0].type],a=o||x.relative[" "],s=o?1:0,u=xe(function(e){return e===i},a,!0),l=xe(function(e){return-1<H(i,e)},a,!0),c=[function(e,t,n){var r=!o&&(n||t!==w)||((i=t).nodeType?u(e,t,n):l(e,t,n));return i=null,r}];s<r;s++)if(t=x.relative[e[s].type])c=[xe(we(c),t)];else{if((t=x.filter[e[s].type].apply(null,e[s].matches))[N]){for(n=++s;n<r;n++)if(x.relative[e[n].type])break;return Te(1<s&&we(c),1<s&&be(e.slice(0,s-1).concat({value:" "===e[s-2].type?"*":""})).replace(F,"$1"),t,s<n&&Ee(e.slice(s,n)),n<r&&Ee(e=e.slice(n)),n<r&&be(e))}c.push(t)}return we(c)}return me.prototype=x.filters=x.pseudos,x.setFilters=new me,h=se.tokenize=function(e,t){var n,r,i,o,a,s,u,l=b[e+" "];if(l)return t?0:l.slice(0);a=e,s=[],u=x.preFilter;while(a){for(o in n&&!(r=z.exec(a))||(r&&(a=a.slice(r[0].length)||a),s.push(i=[])),n=!1,(r=_.exec(a))&&(n=r.shift(),i.push({value:n,type:r[0].replace(F," ")}),a=a.slice(n.length)),x.filter)!(r=Q[o].exec(a))||u[o]&&!(r=u[o](r))||(n=r.shift(),i.push({value:n,type:o,matches:r}),a=a.slice(n.length));if(!n)break}return t?a.length:a?se.error(e):b(e,s).slice(0)},f=se.compile=function(e,t){var n,v,y,m,b,r,i=[],o=[],a=k[e+" "];if(!a){t||(t=h(e)),n=t.length;while(n--)(a=Ee(t[n]))[N]?i.push(a):o.push(a);(a=k(e,(v=o,m=0<(y=i).length,b=0<v.length,r=function(e,t,n,r,i){var o,a,s,u=0,l="0",c=e&&[],f=[],d=w,p=e||b&&x.find.TAG("*",i),h=A+=null==d?1:Math.random()||.1,g=p.length;for(i&&(w=t===T||t||i);l!==g&&null!=(o=p[l]);l++){if(b&&o){a=0,t||o.ownerDocument===T||(C(o),n=!E);while(s=v[a++])if(s(o,t||T,n)){r.push(o);break}i&&(A=h)}m&&((o=!s&&o)&&u--,e&&c.push(o))}if(u+=l,m&&l!==u){a=0;while(s=y[a++])s(c,f,t,n);if(e){if(0<u)while(l--)c[l]||f[l]||(f[l]=j.call(r));f=Ce(f)}O.apply(r,f),i&&!e&&0<f.length&&1<u+y.length&&se.uniqueSort(r)}return i&&(A=h,w=d),c},m?le(r):r))).selector=e}return a},g=se.select=function(e,t,n,r){var i,o,a,s,u,l="function"==typeof e&&e,c=!r&&h(e=l.selector||e);if(n=n||[],1===c.length){if(2<(o=c[0]=c[0].slice(0)).length&&"ID"===(a=o[0]).type&&9===t.nodeType&&E&&x.relative[o[1].type]){if(!(t=(x.find.ID(a.matches[0].replace(te,ne),t)||[])[0]))return n;l&&(t=t.parentNode),e=e.slice(o.shift().value.length)}i=Q.needsContext.test(e)?0:o.length;while(i--){if(a=o[i],x.relative[s=a.type])break;if((u=x.find[s])&&(r=u(a.matches[0].replace(te,ne),ee.test(o[0].type)&&ye(t.parentNode)||t))){if(o.splice(i,1),!(e=r.length&&be(o)))return O.apply(n,r),n;break}}}return(l||f(e,c))(r,t,!E,n,!t||ee.test(e)&&ye(t.parentNode)||t),n},p.sortStable=N.split("").sort(D).join("")===N,p.detectDuplicates=!!l,C(),p.sortDetached=ce(function(e){return 1&e.compareDocumentPosition(T.createElement("fieldset"))}),ce(function(e){return e.innerHTML="<a href='#'></a>","#"===e.firstChild.getAttribute("href")})||fe("type|href|height|width",function(e,t,n){if(!n)return e.getAttribute(t,"type"===t.toLowerCase()?1:2)}),p.attributes&&ce(function(e){return e.innerHTML="<input/>",e.firstChild.setAttribute("value",""),""===e.firstChild.getAttribute("value")})||fe("value",function(e,t,n){if(!n&&"input"===e.nodeName.toLowerCase())return e.defaultValue}),ce(function(e){return null==e.getAttribute("disabled")})||fe(I,function(e,t,n){var r;if(!n)return!0===e[t]?t.toLowerCase():(r=e.getAttributeNode(t))&&r.specified?r.value:null}),se}(g);E.find=h,E.expr=h.selectors,E.expr[":"]=E.expr.pseudos,E.uniqueSort=E.unique=h.uniqueSort,E.text=h.getText,E.isXMLDoc=h.isXML,E.contains=h.contains,E.escapeSelector=h.escape;var N=function(e,t,n){var r=[],i=void 0!==n;while((e=e[t])&&9!==e.nodeType)if(1===e.nodeType){if(i&&E(e).is(n))break;r.push(e)}return r},A=function(e,t){for(var n=[];e;e=e.nextSibling)1===e.nodeType&&e!==t&&n.push(e);return n},k=E.expr.match.needsContext;function S(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()}var D=/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function L(e,n,r){return x(n)?E.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?E.grep(e,function(e){return e===n!==r}):"string"!=typeof n?E.grep(e,function(e){return-1<i.call(n,e)!==r}):E.filter(n,e,r)}E.filter=function(e,t,n){var r=t[0];return n&&(e=":not("+e+")"),1===t.length&&1===r.nodeType?E.find.matchesSelector(r,e)?[r]:[]:E.find.matches(e,E.grep(t,function(e){return 1===e.nodeType}))},E.fn.extend({find:function(e){var t,n,r=this.length,i=this;if("string"!=typeof e)return this.pushStack(E(e).filter(function(){for(t=0;t<r;t++)if(E.contains(i[t],this))return!0}));for(n=this.pushStack([]),t=0;t<r;t++)E.find(e,i[t],n);return 1<r?E.uniqueSort(n):n},filter:function(e){return this.pushStack(L(this,e||[],!1))},not:function(e){return this.pushStack(L(this,e||[],!0))},is:function(e){return!!L(this,"string"==typeof e&&k.test(e)?E(e):e||[],!1).length}});var j,q=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/;(E.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||j,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:q.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof E?t[0]:t,E.merge(this,E.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:v,!0)),D.test(r[1])&&E.isPlainObject(t))for(r in t)x(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=v.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):x(e)?void 0!==n.ready?n.ready(e):e(E):E.makeArray(e,this)}).prototype=E.fn,j=E(v);var O=/^(?:parents|prev(?:Until|All))/,P={children:!0,contents:!0,next:!0,prev:!0};function H(e,t){while((e=e[t])&&1!==e.nodeType);return e}E.fn.extend({has:function(e){var t=E(e,this),n=t.length;return this.filter(function(){for(var e=0;e<n;e++)if(E.contains(this,t[e]))return!0})},closest:function(e,t){var n,r=0,i=this.length,o=[],a="string"!=typeof e&&E(e);if(!k.test(e))for(;r<i;r++)for(n=this[r];n&&n!==t;n=n.parentNode)if(n.nodeType<11&&(a?-1<a.index(n):1===n.nodeType&&E.find.matchesSelector(n,e))){o.push(n);break}return this.pushStack(1<o.length?E.uniqueSort(o):o)},index:function(e){return e?"string"==typeof e?i.call(E(e),this[0]):i.call(this,e.jquery?e[0]:e):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(e,t){return this.pushStack(E.uniqueSort(E.merge(this.get(),E(e,t))))},addBack:function(e){return this.add(null==e?this.prevObject:this.prevObject.filter(e))}}),E.each({parent:function(e){var t=e.parentNode;return t&&11!==t.nodeType?t:null},parents:function(e){return N(e,"parentNode")},parentsUntil:function(e,t,n){return N(e,"parentNode",n)},next:function(e){return H(e,"nextSibling")},prev:function(e){return H(e,"previousSibling")},nextAll:function(e){return N(e,"nextSibling")},prevAll:function(e){return N(e,"previousSibling")},nextUntil:function(e,t,n){return N(e,"nextSibling",n)},prevUntil:function(e,t,n){return N(e,"previousSibling",n)},siblings:function(e){return A((e.parentNode||{}).firstChild,e)},children:function(e){return A(e.firstChild)},contents:function(e){return"undefined"!=typeof e.contentDocument?e.contentDocument:(S(e,"template")&&(e=e.content||e),E.merge([],e.childNodes))}},function(r,i){E.fn[r]=function(e,t){var n=E.map(this,i,e);return"Until"!==r.slice(-5)&&(t=e),t&&"string"==typeof t&&(n=E.filter(t,n)),1<this.length&&(P[r]||E.uniqueSort(n),O.test(r)&&n.reverse()),this.pushStack(n)}});var I=/[^\x20\t\r\n\f]+/g;function R(e){return e}function B(e){throw e}function M(e,t,n,r){var i;try{e&&x(i=e.promise)?i.call(e).done(t).fail(n):e&&x(i=e.then)?i.call(e,t,n):t.apply(void 0,[e].slice(r))}catch(e){n.apply(void 0,[e])}}E.Callbacks=function(r){var e,n;r="string"==typeof r?(e=r,n={},E.each(e.match(I)||[],function(e,t){n[t]=!0}),n):E.extend({},r);var i,t,o,a,s=[],u=[],l=-1,c=function(){for(a=a||r.once,o=i=!0;u.length;l=-1){t=u.shift();while(++l<s.length)!1===s[l].apply(t[0],t[1])&&r.stopOnFalse&&(l=s.length,t=!1)}r.memory||(t=!1),i=!1,a&&(s=t?[]:"")},f={add:function(){return s&&(t&&!i&&(l=s.length-1,u.push(t)),function n(e){E.each(e,function(e,t){x(t)?r.unique&&f.has(t)||s.push(t):t&&t.length&&"string"!==T(t)&&n(t)})}(arguments),t&&!i&&c()),this},remove:function(){return E.each(arguments,function(e,t){var n;while(-1<(n=E.inArray(t,s,n)))s.splice(n,1),n<=l&&l--}),this},has:function(e){return e?-1<E.inArray(e,s):0<s.length},empty:function(){return s&&(s=[]),this},disable:function(){return a=u=[],s=t="",this},disabled:function(){return!s},lock:function(){return a=u=[],t||i||(s=t=""),this},locked:function(){return!!a},fireWith:function(e,t){return a||(t=[e,(t=t||[]).slice?t.slice():t],u.push(t),i||c()),this},fire:function(){return f.fireWith(this,arguments),this},fired:function(){return!!o}};return f},E.extend({Deferred:function(e){var o=[["notify","progress",E.Callbacks("memory"),E.Callbacks("memory"),2],["resolve","done",E.Callbacks("once memory"),E.Callbacks("once memory"),0,"resolved"],["reject","fail",E.Callbacks("once memory"),E.Callbacks("once memory"),1,"rejected"]],i="pending",a={state:function(){return i},always:function(){return s.done(arguments).fail(arguments),this},"catch":function(e){return a.then(null,e)},pipe:function(){var i=arguments;return E.Deferred(function(r){E.each(o,function(e,t){var n=x(i[t[4]])&&i[t[4]];s[t[1]](function(){var e=n&&n.apply(this,arguments);e&&x(e.promise)?e.promise().progress(r.notify).done(r.resolve).fail(r.reject):r[t[0]+"With"](this,n?[e]:arguments)})}),i=null}).promise()},then:function(t,n,r){var u=0;function l(i,o,a,s){return function(){var n=this,r=arguments,e=function(){var e,t;if(!(i<u)){if((e=a.apply(n,r))===o.promise())throw new TypeError("Thenable self-resolution");t=e&&("object"==typeof e||"function"==typeof e)&&e.then,x(t)?s?t.call(e,l(u,o,R,s),l(u,o,B,s)):(u++,t.call(e,l(u,o,R,s),l(u,o,B,s),l(u,o,R,o.notifyWith))):(a!==R&&(n=void 0,r=[e]),(s||o.resolveWith)(n,r))}},t=s?e:function(){try{e()}catch(e){E.Deferred.exceptionHook&&E.Deferred.exceptionHook(e,t.stackTrace),u<=i+1&&(a!==B&&(n=void 0,r=[e]),o.rejectWith(n,r))}};i?t():(E.Deferred.getStackHook&&(t.stackTrace=E.Deferred.getStackHook()),g.setTimeout(t))}}return E.Deferred(function(e){o[0][3].add(l(0,e,x(r)?r:R,e.notifyWith)),o[1][3].add(l(0,e,x(t)?t:R)),o[2][3].add(l(0,e,x(n)?n:B))}).promise()},promise:function(e){return null!=e?E.extend(e,a):a}},s={};return E.each(o,function(e,t){var n=t[2],r=t[5];a[t[1]]=n.add,r&&n.add(function(){i=r},o[3-e][2].disable,o[3-e][3].disable,o[0][2].lock,o[0][3].lock),n.add(t[3].fire),s[t[0]]=function(){return s[t[0]+"With"](this===s?void 0:this,arguments),this},s[t[0]+"With"]=n.fireWith}),a.promise(s),e&&e.call(s,s),s},when:function(e){var n=arguments.length,t=n,r=Array(t),i=s.call(arguments),o=E.Deferred(),a=function(t){return function(e){r[t]=this,i[t]=1<arguments.length?s.call(arguments):e,--n||o.resolveWith(r,i)}};if(n<=1&&(M(e,o.done(a(t)).resolve,o.reject,!n),"pending"===o.state()||x(i[t]&&i[t].then)))return o.then();while(t--)M(i[t],a(t),o.reject);return o.promise()}});var W=/^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;E.Deferred.exceptionHook=function(e,t){g.console&&g.console.warn&&e&&W.test(e.name)&&g.console.warn("jQuery.Deferred exception: "+e.message,e.stack,t)},E.readyException=function(e){g.setTimeout(function(){throw e})};var $=E.Deferred();function F(){v.removeEventListener("DOMContentLoaded",F),g.removeEventListener("load",F),E.ready()}E.fn.ready=function(e){return $.then(e)["catch"](function(e){E.readyException(e)}),this},E.extend({isReady:!1,readyWait:1,ready:function(e){(!0===e?--E.readyWait:E.isReady)||(E.isReady=!0)!==e&&0<--E.readyWait||$.resolveWith(v,[E])}}),E.ready.then=$.then,"complete"===v.readyState||"loading"!==v.readyState&&!v.documentElement.doScroll?g.setTimeout(E.ready):(v.addEventListener("DOMContentLoaded",F),g.addEventListener("load",F));var z=function(e,t,n,r,i,o,a){var s=0,u=e.length,l=null==n;if("object"===T(n))for(s in i=!0,n)z(e,t,s,n[s],!0,o,a);else if(void 0!==r&&(i=!0,x(r)||(a=!0),l&&(a?(t.call(e,r),t=null):(l=t,t=function(e,t,n){return l.call(E(e),n)})),t))for(;s<u;s++)t(e[s],n,a?r:r.call(e[s],s,t(e[s],n)));return i?e:l?t.call(e):u?t(e[0],n):o},_=/^-ms-/,U=/-([a-z])/g;function V(e,t){return t.toUpperCase()}function X(e){return e.replace(_,"ms-").replace(U,V)}var Q=function(e){return 1===e.nodeType||9===e.nodeType||!+e.nodeType};function Y(){this.expando=E.expando+Y.uid++}Y.uid=1,Y.prototype={cache:function(e){var t=e[this.expando];return t||(t={},Q(e)&&(e.nodeType?e[this.expando]=t:Object.defineProperty(e,this.expando,{value:t,configurable:!0}))),t},set:function(e,t,n){var r,i=this.cache(e);if("string"==typeof t)i[X(t)]=n;else for(r in t)i[X(r)]=t[r];return i},get:function(e,t){return void 0===t?this.cache(e):e[this.expando]&&e[this.expando][X(t)]},access:function(e,t,n){return void 0===t||t&&"string"==typeof t&&void 0===n?this.get(e,t):(this.set(e,t,n),void 0!==n?n:t)},remove:function(e,t){var n,r=e[this.expando];if(void 0!==r){if(void 0!==t){n=(t=Array.isArray(t)?t.map(X):(t=X(t))in r?[t]:t.match(I)||[]).length;while(n--)delete r[t[n]]}(void 0===t||E.isEmptyObject(r))&&(e.nodeType?e[this.expando]=void 0:delete e[this.expando])}},hasData:function(e){var t=e[this.expando];return void 0!==t&&!E.isEmptyObject(t)}};var G=new Y,K=new Y,J=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,Z=/[A-Z]/g;function ee(e,t,n){var r,i;if(void 0===n&&1===e.nodeType)if(r="data-"+t.replace(Z,"-$&").toLowerCase(),"string"==typeof(n=e.getAttribute(r))){try{n="true"===(i=n)||"false"!==i&&("null"===i?null:i===+i+""?+i:J.test(i)?JSON.parse(i):i)}catch(e){}K.set(e,t,n)}else n=void 0;return n}E.extend({hasData:function(e){return K.hasData(e)||G.hasData(e)},data:function(e,t,n){return K.access(e,t,n)},removeData:function(e,t){K.remove(e,t)},_data:function(e,t,n){return G.access(e,t,n)},_removeData:function(e,t){G.remove(e,t)}}),E.fn.extend({data:function(n,e){var t,r,i,o=this[0],a=o&&o.attributes;if(void 0===n){if(this.length&&(i=K.get(o),1===o.nodeType&&!G.get(o,"hasDataAttrs"))){t=a.length;while(t--)a[t]&&0===(r=a[t].name).indexOf("data-")&&(r=X(r.slice(5)),ee(o,r,i[r]));G.set(o,"hasDataAttrs",!0)}return i}return"object"==typeof n?this.each(function(){K.set(this,n)}):z(this,function(e){var t;if(o&&void 0===e)return void 0!==(t=K.get(o,n))?t:void 0!==(t=ee(o,n))?t:void 0;this.each(function(){K.set(this,n,e)})},null,e,1<arguments.length,null,!0)},removeData:function(e){return this.each(function(){K.remove(this,e)})}}),E.extend({queue:function(e,t,n){var r;if(e)return t=(t||"fx")+"queue",r=G.get(e,t),n&&(!r||Array.isArray(n)?r=G.access(e,t,E.makeArray(n)):r.push(n)),r||[]},dequeue:function(e,t){t=t||"fx";var n=E.queue(e,t),r=n.length,i=n.shift(),o=E._queueHooks(e,t);"inprogress"===i&&(i=n.shift(),r--),i&&("fx"===t&&n.unshift("inprogress"),delete o.stop,i.call(e,function(){E.dequeue(e,t)},o)),!r&&o&&o.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return G.get(e,n)||G.access(e,n,{empty:E.Callbacks("once memory").add(function(){G.remove(e,[t+"queue",n])})})}}),E.fn.extend({queue:function(t,n){var e=2;return"string"!=typeof t&&(n=t,t="fx",e--),arguments.length<e?E.queue(this[0],t):void 0===n?this:this.each(function(){var e=E.queue(this,t,n);E._queueHooks(this,t),"fx"===t&&"inprogress"!==e[0]&&E.dequeue(this,t)})},dequeue:function(e){return this.each(function(){E.dequeue(this,e)})},clearQueue:function(e){return this.queue(e||"fx",[])},promise:function(e,t){var n,r=1,i=E.Deferred(),o=this,a=this.length,s=function(){--r||i.resolveWith(o,[o])};"string"!=typeof e&&(t=e,e=void 0),e=e||"fx";while(a--)(n=G.get(o[a],e+"queueHooks"))&&n.empty&&(r++,n.empty.add(s));return s(),i.promise(t)}});var te=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,ne=new RegExp("^(?:([+-])=|)("+te+")([a-z%]*)$","i"),re=["Top","Right","Bottom","Left"],ie=v.documentElement,oe=function(e){return E.contains(e.ownerDocument,e)},ae={composed:!0};ie.getRootNode&&(oe=function(e){return E.contains(e.ownerDocument,e)||e.getRootNode(ae)===e.ownerDocument});var se=function(e,t){return"none"===(e=t||e).style.display||""===e.style.display&&oe(e)&&"none"===E.css(e,"display")},ue=function(e,t,n,r){var i,o,a={};for(o in t)a[o]=e.style[o],e.style[o]=t[o];for(o in i=n.apply(e,r||[]),t)e.style[o]=a[o];return i};var le={};function ce(e,t){for(var n,r,i,o,a,s,u,l=[],c=0,f=e.length;c<f;c++)(r=e[c]).style&&(n=r.style.display,t?("none"===n&&(l[c]=G.get(r,"display")||null,l[c]||(r.style.display="")),""===r.style.display&&se(r)&&(l[c]=(u=a=o=void 0,a=(i=r).ownerDocument,s=i.nodeName,(u=le[s])||(o=a.body.appendChild(a.createElement(s)),u=E.css(o,"display"),o.parentNode.removeChild(o),"none"===u&&(u="block"),le[s]=u)))):"none"!==n&&(l[c]="none",G.set(r,"display",n)));for(c=0;c<f;c++)null!=l[c]&&(e[c].style.display=l[c]);return e}E.fn.extend({show:function(){return ce(this,!0)},hide:function(){return ce(this)},toggle:function(e){return"boolean"==typeof e?e?this.show():this.hide():this.each(function(){se(this)?E(this).show():E(this).hide()})}});var fe=/^(?:checkbox|radio)$/i,de=/<([a-z][^\/\0>\x20\t\r\n\f]*)/i,pe=/^$|^module$|\/(?:java|ecma)script/i,he={option:[1,"<select multiple='multiple'>","</select>"],thead:[1,"<table>","</table>"],col:[2,"<table><colgroup>","</colgroup></table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],_default:[0,"",""]};function ge(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&S(e,t)?E.merge([e],n):n}function ve(e,t){for(var n=0,r=e.length;n<r;n++)G.set(e[n],"globalEval",!t||G.get(t[n],"globalEval"))}he.optgroup=he.option,he.tbody=he.tfoot=he.colgroup=he.caption=he.thead,he.th=he.td;var ye,me,be=/<|&#?\w+;/;function xe(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),d=[],p=0,h=e.length;p<h;p++)if((o=e[p])||0===o)if("object"===T(o))E.merge(d,o.nodeType?[o]:o);else if(be.test(o)){a=a||f.appendChild(t.createElement("div")),s=(de.exec(o)||["",""])[1].toLowerCase(),u=he[s]||he._default,a.innerHTML=u[1]+E.htmlPrefilter(o)+u[2],c=u[0];while(c--)a=a.lastChild;E.merge(d,a.childNodes),(a=f.firstChild).textContent=""}else d.push(t.createTextNode(o));f.textContent="",p=0;while(o=d[p++])if(r&&-1<E.inArray(o,r))i&&i.push(o);else if(l=oe(o),a=ge(f.appendChild(o),"script"),l&&ve(a),n){c=0;while(o=a[c++])pe.test(o.type||"")&&n.push(o)}return f}ye=v.createDocumentFragment().appendChild(v.createElement("div")),(me=v.createElement("input")).setAttribute("type","radio"),me.setAttribute("checked","checked"),me.setAttribute("name","t"),ye.appendChild(me),b.checkClone=ye.cloneNode(!0).cloneNode(!0).lastChild.checked,ye.innerHTML="<textarea>x</textarea>",b.noCloneChecked=!!ye.cloneNode(!0).lastChild.defaultValue;var we=/^key/,Ce=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,Te=/^([^.]*)(?:\.(.+)|)/;function Ee(){return!0}function Ne(){return!1}function Ae(e,t){return e===function(){try{return v.activeElement}catch(e){}}()==("focus"===t)}function ke(e,t,n,r,i,o){var a,s;if("object"==typeof t){for(s in"string"!=typeof n&&(r=r||n,n=void 0),t)ke(e,s,n,r,t[s],o);return e}if(null==r&&null==i?(i=n,r=n=void 0):null==i&&("string"==typeof n?(i=r,r=void 0):(i=r,r=n,n=void 0)),!1===i)i=Ne;else if(!i)return e;return 1===o&&(a=i,(i=function(e){return E().off(e),a.apply(this,arguments)}).guid=a.guid||(a.guid=E.guid++)),e.each(function(){E.event.add(this,t,i,r,n)})}function Se(e,i,o){o?(G.set(e,i,!1),E.event.add(e,i,{namespace:!1,handler:function(e){var t,n,r=G.get(this,i);if(1&e.isTrigger&&this[i]){if(r.length)(E.event.special[i]||{}).delegateType&&e.stopPropagation();else if(r=s.call(arguments),G.set(this,i,r),t=o(this,i),this[i](),r!==(n=G.get(this,i))||t?G.set(this,i,!1):n={},r!==n)return e.stopImmediatePropagation(),e.preventDefault(),n.value}else r.length&&(G.set(this,i,{value:E.event.trigger(E.extend(r[0],E.Event.prototype),r.slice(1),this)}),e.stopImmediatePropagation())}})):void 0===G.get(e,i)&&E.event.add(e,i,Ee)}E.event={global:{},add:function(t,e,n,r,i){var o,a,s,u,l,c,f,d,p,h,g,v=G.get(t);if(v){n.handler&&(n=(o=n).handler,i=o.selector),i&&E.find.matchesSelector(ie,i),n.guid||(n.guid=E.guid++),(u=v.events)||(u=v.events={}),(a=v.handle)||(a=v.handle=function(e){return"undefined"!=typeof E&&E.event.triggered!==e.type?E.event.dispatch.apply(t,arguments):void 0}),l=(e=(e||"").match(I)||[""]).length;while(l--)p=g=(s=Te.exec(e[l])||[])[1],h=(s[2]||"").split(".").sort(),p&&(f=E.event.special[p]||{},p=(i?f.delegateType:f.bindType)||p,f=E.event.special[p]||{},c=E.extend({type:p,origType:g,data:r,handler:n,guid:n.guid,selector:i,needsContext:i&&E.expr.match.needsContext.test(i),namespace:h.join(".")},o),(d=u[p])||((d=u[p]=[]).delegateCount=0,f.setup&&!1!==f.setup.call(t,r,h,a)||t.addEventListener&&t.addEventListener(p,a)),f.add&&(f.add.call(t,c),c.handler.guid||(c.handler.guid=n.guid)),i?d.splice(d.delegateCount++,0,c):d.push(c),E.event.global[p]=!0)}},remove:function(e,t,n,r,i){var o,a,s,u,l,c,f,d,p,h,g,v=G.hasData(e)&&G.get(e);if(v&&(u=v.events)){l=(t=(t||"").match(I)||[""]).length;while(l--)if(p=g=(s=Te.exec(t[l])||[])[1],h=(s[2]||"").split(".").sort(),p){f=E.event.special[p]||{},d=u[p=(r?f.delegateType:f.bindType)||p]||[],s=s[2]&&new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),a=o=d.length;while(o--)c=d[o],!i&&g!==c.origType||n&&n.guid!==c.guid||s&&!s.test(c.namespace)||r&&r!==c.selector&&("**"!==r||!c.selector)||(d.splice(o,1),c.selector&&d.delegateCount--,f.remove&&f.remove.call(e,c));a&&!d.length&&(f.teardown&&!1!==f.teardown.call(e,h,v.handle)||E.removeEvent(e,p,v.handle),delete u[p])}else for(p in u)E.event.remove(e,p+t[l],n,r,!0);E.isEmptyObject(u)&&G.remove(e,"handle events")}},dispatch:function(e){var t,n,r,i,o,a,s=E.event.fix(e),u=new Array(arguments.length),l=(G.get(this,"events")||{})[s.type]||[],c=E.event.special[s.type]||{};for(u[0]=s,t=1;t<arguments.length;t++)u[t]=arguments[t];if(s.delegateTarget=this,!c.preDispatch||!1!==c.preDispatch.call(this,s)){a=E.event.handlers.call(this,s,l),t=0;while((i=a[t++])&&!s.isPropagationStopped()){s.currentTarget=i.elem,n=0;while((o=i.handlers[n++])&&!s.isImmediatePropagationStopped())s.rnamespace&&!1!==o.namespace&&!s.rnamespace.test(o.namespace)||(s.handleObj=o,s.data=o.data,void 0!==(r=((E.event.special[o.origType]||{}).handle||o.handler).apply(i.elem,u))&&!1===(s.result=r)&&(s.preventDefault(),s.stopPropagation()))}return c.postDispatch&&c.postDispatch.call(this,s),s.result}},handlers:function(e,t){var n,r,i,o,a,s=[],u=t.delegateCount,l=e.target;if(u&&l.nodeType&&!("click"===e.type&&1<=e.button))for(;l!==this;l=l.parentNode||this)if(1===l.nodeType&&("click"!==e.type||!0!==l.disabled)){for(o=[],a={},n=0;n<u;n++)void 0===a[i=(r=t[n]).selector+" "]&&(a[i]=r.needsContext?-1<E(i,this).index(l):E.find(i,this,null,[l]).length),a[i]&&o.push(r);o.length&&s.push({elem:l,handlers:o})}return l=this,u<t.length&&s.push({elem:l,handlers:t.slice(u)}),s},addProp:function(t,e){Object.defineProperty(E.Event.prototype,t,{enumerable:!0,configurable:!0,get:x(e)?function(){if(this.originalEvent)return e(this.originalEvent)}:function(){if(this.originalEvent)return this.originalEvent[t]},set:function(e){Object.defineProperty(this,t,{enumerable:!0,configurable:!0,writable:!0,value:e})}})},fix:function(e){return e[E.expando]?e:new E.Event(e)},special:{load:{noBubble:!0},click:{setup:function(e){var t=this||e;return fe.test(t.type)&&t.click&&S(t,"input")&&Se(t,"click",Ee),!1},trigger:function(e){var t=this||e;return fe.test(t.type)&&t.click&&S(t,"input")&&Se(t,"click"),!0},_default:function(e){var t=e.target;return fe.test(t.type)&&t.click&&S(t,"input")&&G.get(t,"click")||S(t,"a")}},beforeunload:{postDispatch:function(e){void 0!==e.result&&e.originalEvent&&(e.originalEvent.returnValue=e.result)}}}},E.removeEvent=function(e,t,n){e.removeEventListener&&e.removeEventListener(t,n)},E.Event=function(e,t){if(!(this instanceof E.Event))return new E.Event(e,t);e&&e.type?(this.originalEvent=e,this.type=e.type,this.isDefaultPrevented=e.defaultPrevented||void 0===e.defaultPrevented&&!1===e.returnValue?Ee:Ne,this.target=e.target&&3===e.target.nodeType?e.target.parentNode:e.target,this.currentTarget=e.currentTarget,this.relatedTarget=e.relatedTarget):this.type=e,t&&E.extend(this,t),this.timeStamp=e&&e.timeStamp||Date.now(),this[E.expando]=!0},E.Event.prototype={constructor:E.Event,isDefaultPrevented:Ne,isPropagationStopped:Ne,isImmediatePropagationStopped:Ne,isSimulated:!1,preventDefault:function(){var e=this.originalEvent;this.isDefaultPrevented=Ee,e&&!this.isSimulated&&e.preventDefault()},stopPropagation:function(){var e=this.originalEvent;this.isPropagationStopped=Ee,e&&!this.isSimulated&&e.stopPropagation()},stopImmediatePropagation:function(){var e=this.originalEvent;this.isImmediatePropagationStopped=Ee,e&&!this.isSimulated&&e.stopImmediatePropagation(),this.stopPropagation()}},E.each({altKey:!0,bubbles:!0,cancelable:!0,changedTouches:!0,ctrlKey:!0,detail:!0,eventPhase:!0,metaKey:!0,pageX:!0,pageY:!0,shiftKey:!0,view:!0,"char":!0,code:!0,charCode:!0,key:!0,keyCode:!0,button:!0,buttons:!0,clientX:!0,clientY:!0,offsetX:!0,offsetY:!0,pointerId:!0,pointerType:!0,screenX:!0,screenY:!0,targetTouches:!0,toElement:!0,touches:!0,which:function(e){var t=e.button;return null==e.which&&we.test(e.type)?null!=e.charCode?e.charCode:e.keyCode:!e.which&&void 0!==t&&Ce.test(e.type)?1&t?1:2&t?3:4&t?2:0:e.which}},E.event.addProp),E.each({focus:"focusin",blur:"focusout"},function(e,t){E.event.special[e]={setup:function(){return Se(this,e,Ae),!1},trigger:function(){return Se(this,e),!0},delegateType:t}}),E.each({mouseenter:"mouseover",mouseleave:"mouseout",pointerenter:"pointerover",pointerleave:"pointerout"},function(e,i){E.event.special[e]={delegateType:i,bindType:i,handle:function(e){var t,n=e.relatedTarget,r=e.handleObj;return n&&(n===this||E.contains(this,n))||(e.type=r.origType,t=r.handler.apply(this,arguments),e.type=i),t}}}),E.fn.extend({on:function(e,t,n,r){return ke(this,e,t,n,r)},one:function(e,t,n,r){return ke(this,e,t,n,r,1)},off:function(e,t,n){var r,i;if(e&&e.preventDefault&&e.handleObj)return r=e.handleObj,E(e.delegateTarget).off(r.namespace?r.origType+"."+r.namespace:r.origType,r.selector,r.handler),this;if("object"==typeof e){for(i in e)this.off(i,t,e[i]);return this}return!1!==t&&"function"!=typeof t||(n=t,t=void 0),!1===n&&(n=Ne),this.each(function(){E.event.remove(this,e,n,t)})}});var De=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([a-z][^\/\0>\x20\t\r\n\f]*)[^>]*)\/>/gi,Le=/<script|<style|<link/i,je=/checked\s*(?:[^=]|=\s*.checked.)/i,qe=/^\s*<!(?:\[CDATA\[|--)|(?:\]\]|--)>\s*$/g;function Oe(e,t){return S(e,"table")&&S(11!==t.nodeType?t:t.firstChild,"tr")&&E(e).children("tbody")[0]||e}function Pe(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function He(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Ie(e,t){var n,r,i,o,a,s,u,l;if(1===t.nodeType){if(G.hasData(e)&&(o=G.access(e),a=G.set(t,o),l=o.events))for(i in delete a.handle,a.events={},l)for(n=0,r=l[i].length;n<r;n++)E.event.add(t,i,l[i][n]);K.hasData(e)&&(s=K.access(e),u=E.extend({},s),K.set(t,u))}}function Re(n,r,i,o){r=y.apply([],r);var e,t,a,s,u,l,c=0,f=n.length,d=f-1,p=r[0],h=x(p);if(h||1<f&&"string"==typeof p&&!b.checkClone&&je.test(p))return n.each(function(e){var t=n.eq(e);h&&(r[0]=p.call(this,e,t.html())),Re(t,r,i,o)});if(f&&(t=(e=xe(r,n[0].ownerDocument,!1,n,o)).firstChild,1===e.childNodes.length&&(e=t),t||o)){for(s=(a=E.map(ge(e,"script"),Pe)).length;c<f;c++)u=e,c!==d&&(u=E.clone(u,!0,!0),s&&E.merge(a,ge(u,"script"))),i.call(n[c],u,c);if(s)for(l=a[a.length-1].ownerDocument,E.map(a,He),c=0;c<s;c++)u=a[c],pe.test(u.type||"")&&!G.access(u,"globalEval")&&E.contains(l,u)&&(u.src&&"module"!==(u.type||"").toLowerCase()?E._evalUrl&&!u.noModule&&E._evalUrl(u.src,{nonce:u.nonce||u.getAttribute("nonce")}):C(u.textContent.replace(qe,""),u,l))}return n}function Be(e,t,n){for(var r,i=t?E.filter(t,e):e,o=0;null!=(r=i[o]);o++)n||1!==r.nodeType||E.cleanData(ge(r)),r.parentNode&&(n&&oe(r)&&ve(ge(r,"script")),r.parentNode.removeChild(r));return e}E.extend({htmlPrefilter:function(e){return e.replace(De,"<$1></$2>")},clone:function(e,t,n){var r,i,o,a,s,u,l,c=e.cloneNode(!0),f=oe(e);if(!(b.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||E.isXMLDoc(e)))for(a=ge(c),r=0,i=(o=ge(e)).length;r<i;r++)s=o[r],u=a[r],void 0,"input"===(l=u.nodeName.toLowerCase())&&fe.test(s.type)?u.checked=s.checked:"input"!==l&&"textarea"!==l||(u.defaultValue=s.defaultValue);if(t)if(n)for(o=o||ge(e),a=a||ge(c),r=0,i=o.length;r<i;r++)Ie(o[r],a[r]);else Ie(e,c);return 0<(a=ge(c,"script")).length&&ve(a,!f&&ge(e,"script")),c},cleanData:function(e){for(var t,n,r,i=E.event.special,o=0;void 0!==(n=e[o]);o++)if(Q(n)){if(t=n[G.expando]){if(t.events)for(r in t.events)i[r]?E.event.remove(n,r):E.removeEvent(n,r,t.handle);n[G.expando]=void 0}n[K.expando]&&(n[K.expando]=void 0)}}}),E.fn.extend({detach:function(e){return Be(this,e,!0)},remove:function(e){return Be(this,e)},text:function(e){return z(this,function(e){return void 0===e?E.text(this):this.empty().each(function(){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||(this.textContent=e)})},null,e,arguments.length)},append:function(){return Re(this,arguments,function(e){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||Oe(this,e).appendChild(e)})},prepend:function(){return Re(this,arguments,function(e){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var t=Oe(this,e);t.insertBefore(e,t.firstChild)}})},before:function(){return Re(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this)})},after:function(){return Re(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this.nextSibling)})},empty:function(){for(var e,t=0;null!=(e=this[t]);t++)1===e.nodeType&&(E.cleanData(ge(e,!1)),e.textContent="");return this},clone:function(e,t){return e=null!=e&&e,t=null==t?e:t,this.map(function(){return E.clone(this,e,t)})},html:function(e){return z(this,function(e){var t=this[0]||{},n=0,r=this.length;if(void 0===e&&1===t.nodeType)return t.innerHTML;if("string"==typeof e&&!Le.test(e)&&!he[(de.exec(e)||["",""])[1].toLowerCase()]){e=E.htmlPrefilter(e);try{for(;n<r;n++)1===(t=this[n]||{}).nodeType&&(E.cleanData(ge(t,!1)),t.innerHTML=e);t=0}catch(e){}}t&&this.empty().append(e)},null,e,arguments.length)},replaceWith:function(){var n=[];return Re(this,arguments,function(e){var t=this.parentNode;E.inArray(this,n)<0&&(E.cleanData(ge(this)),t&&t.replaceChild(e,this))},n)}}),E.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(e,a){E.fn[e]=function(e){for(var t,n=[],r=E(e),i=r.length-1,o=0;o<=i;o++)t=o===i?this:this.clone(!0),E(r[o])[a](t),u.apply(n,t.get());return this.pushStack(n)}});var Me=new RegExp("^("+te+")(?!px)[a-z%]+$","i"),We=function(e){var t=e.ownerDocument.defaultView;return t&&t.opener||(t=g),t.getComputedStyle(e)},$e=new RegExp(re.join("|"),"i");function Fe(e,t,n){var r,i,o,a,s=e.style;return(n=n||We(e))&&(""!==(a=n.getPropertyValue(t)||n[t])||oe(e)||(a=E.style(e,t)),!b.pixelBoxStyles()&&Me.test(a)&&$e.test(t)&&(r=s.width,i=s.minWidth,o=s.maxWidth,s.minWidth=s.maxWidth=s.width=a,a=n.width,s.width=r,s.minWidth=i,s.maxWidth=o)),void 0!==a?a+"":a}function ze(e,t){return{get:function(){if(!e())return(this.get=t).apply(this,arguments);delete this.get}}}!function(){function e(){if(u){s.style.cssText="position:absolute;left:-11111px;width:60px;margin-top:1px;padding:0;border:0",u.style.cssText="position:relative;display:block;box-sizing:border-box;overflow:scroll;margin:auto;border:1px;padding:1px;width:60%;top:1%",ie.appendChild(s).appendChild(u);var e=g.getComputedStyle(u);n="1%"!==e.top,a=12===t(e.marginLeft),u.style.right="60%",o=36===t(e.right),r=36===t(e.width),u.style.position="absolute",i=12===t(u.offsetWidth/3),ie.removeChild(s),u=null}}function t(e){return Math.round(parseFloat(e))}var n,r,i,o,a,s=v.createElement("div"),u=v.createElement("div");u.style&&(u.style.backgroundClip="content-box",u.cloneNode(!0).style.backgroundClip="",b.clearCloneStyle="content-box"===u.style.backgroundClip,E.extend(b,{boxSizingReliable:function(){return e(),r},pixelBoxStyles:function(){return e(),o},pixelPosition:function(){return e(),n},reliableMarginLeft:function(){return e(),a},scrollboxSize:function(){return e(),i}}))}();var _e=["Webkit","Moz","ms"],Ue=v.createElement("div").style,Ve={};function Xe(e){var t=E.cssProps[e]||Ve[e];return t||(e in Ue?e:Ve[e]=function(e){var t=e[0].toUpperCase()+e.slice(1),n=_e.length;while(n--)if((e=_e[n]+t)in Ue)return e}(e)||e)}var Qe,Ye,Ge=/^(none|table(?!-c[ea]).+)/,Ke=/^--/,Je={position:"absolute",visibility:"hidden",display:"block"},Ze={letterSpacing:"0",fontWeight:"400"};function et(e,t,n){var r=ne.exec(t);return r?Math.max(0,r[2]-(n||0))+(r[3]||"px"):t}function tt(e,t,n,r,i,o){var a="width"===t?1:0,s=0,u=0;if(n===(r?"border":"content"))return 0;for(;a<4;a+=2)"margin"===n&&(u+=E.css(e,n+re[a],!0,i)),r?("content"===n&&(u-=E.css(e,"padding"+re[a],!0,i)),"margin"!==n&&(u-=E.css(e,"border"+re[a]+"Width",!0,i))):(u+=E.css(e,"padding"+re[a],!0,i),"padding"!==n?u+=E.css(e,"border"+re[a]+"Width",!0,i):s+=E.css(e,"border"+re[a]+"Width",!0,i));return!r&&0<=o&&(u+=Math.max(0,Math.ceil(e["offset"+t[0].toUpperCase()+t.slice(1)]-o-u-s-.5))||0),u}function nt(e,t,n){var r=We(e),i=(!b.boxSizingReliable()||n)&&"border-box"===E.css(e,"boxSizing",!1,r),o=i,a=Fe(e,t,r),s="offset"+t[0].toUpperCase()+t.slice(1);if(Me.test(a)){if(!n)return a;a="auto"}return(!b.boxSizingReliable()&&i||"auto"===a||!parseFloat(a)&&"inline"===E.css(e,"display",!1,r))&&e.getClientRects().length&&(i="border-box"===E.css(e,"boxSizing",!1,r),(o=s in e)&&(a=e[s])),(a=parseFloat(a)||0)+tt(e,t,n||(i?"border":"content"),o,r,a)+"px"}E.extend({cssHooks:{opacity:{get:function(e,t){if(t){var n=Fe(e,"opacity");return""===n?"1":n}}}},cssNumber:{animationIterationCount:!0,columnCount:!0,fillOpacity:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,gridArea:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnStart:!0,gridRow:!0,gridRowEnd:!0,gridRowStart:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{},style:function(e,t,n,r){if(e&&3!==e.nodeType&&8!==e.nodeType&&e.style){var i,o,a,s=X(t),u=Ke.test(t),l=e.style;if(u||(t=Xe(s)),a=E.cssHooks[t]||E.cssHooks[s],void 0===n)return a&&"get"in a&&void 0!==(i=a.get(e,!1,r))?i:l[t];"string"===(o=typeof n)&&(i=ne.exec(n))&&i[1]&&(n=function(e,t,n,r){var i,o,a=20,s=r?function(){return r.cur()}:function(){return E.css(e,t,"")},u=s(),l=n&&n[3]||(E.cssNumber[t]?"":"px"),c=e.nodeType&&(E.cssNumber[t]||"px"!==l&&+u)&&ne.exec(E.css(e,t));if(c&&c[3]!==l){u/=2,l=l||c[3],c=+u||1;while(a--)E.style(e,t,c+l),(1-o)*(1-(o=s()/u||.5))<=0&&(a=0),c/=o;c*=2,E.style(e,t,c+l),n=n||[]}return n&&(c=+c||+u||0,i=n[1]?c+(n[1]+1)*n[2]:+n[2],r&&(r.unit=l,r.start=c,r.end=i)),i}(e,t,i),o="number"),null!=n&&n==n&&("number"!==o||u||(n+=i&&i[3]||(E.cssNumber[s]?"":"px")),b.clearCloneStyle||""!==n||0!==t.indexOf("background")||(l[t]="inherit"),a&&"set"in a&&void 0===(n=a.set(e,n,r))||(u?l.setProperty(t,n):l[t]=n))}},css:function(e,t,n,r){var i,o,a,s=X(t);return Ke.test(t)||(t=Xe(s)),(a=E.cssHooks[t]||E.cssHooks[s])&&"get"in a&&(i=a.get(e,!0,n)),void 0===i&&(i=Fe(e,t,r)),"normal"===i&&t in Ze&&(i=Ze[t]),""===n||n?(o=parseFloat(i),!0===n||isFinite(o)?o||0:i):i}}),E.each(["height","width"],function(e,u){E.cssHooks[u]={get:function(e,t,n){if(t)return!Ge.test(E.css(e,"display"))||e.getClientRects().length&&e.getBoundingClientRect().width?nt(e,u,n):ue(e,Je,function(){return nt(e,u,n)})},set:function(e,t,n){var r,i=We(e),o=!b.scrollboxSize()&&"absolute"===i.position,a=(o||n)&&"border-box"===E.css(e,"boxSizing",!1,i),s=n?tt(e,u,n,a,i):0;return a&&o&&(s-=Math.ceil(e["offset"+u[0].toUpperCase()+u.slice(1)]-parseFloat(i[u])-tt(e,u,"border",!1,i)-.5)),s&&(r=ne.exec(t))&&"px"!==(r[3]||"px")&&(e.style[u]=t,t=E.css(e,u)),et(0,t,s)}}}),E.cssHooks.marginLeft=ze(b.reliableMarginLeft,function(e,t){if(t)return(parseFloat(Fe(e,"marginLeft"))||e.getBoundingClientRect().left-ue(e,{marginLeft:0},function(){return e.getBoundingClientRect().left}))+"px"}),E.each({margin:"",padding:"",border:"Width"},function(i,o){E.cssHooks[i+o]={expand:function(e){for(var t=0,n={},r="string"==typeof e?e.split(" "):[e];t<4;t++)n[i+re[t]+o]=r[t]||r[t-2]||r[0];return n}},"margin"!==i&&(E.cssHooks[i+o].set=et)}),E.fn.extend({css:function(e,t){return z(this,function(e,t,n){var r,i,o={},a=0;if(Array.isArray(t)){for(r=We(e),i=t.length;a<i;a++)o[t[a]]=E.css(e,t[a],!1,r);return o}return void 0!==n?E.style(e,t,n):E.css(e,t)},e,t,1<arguments.length)}}),E.fn.delay=function(r,e){return r=E.fx&&E.fx.speeds[r]||r,e=e||"fx",this.queue(e,function(e,t){var n=g.setTimeout(e,r);t.stop=function(){g.clearTimeout(n)}})},Qe=v.createElement("input"),Ye=v.createElement("select").appendChild(v.createElement("option")),Qe.type="checkbox",b.checkOn=""!==Qe.value,b.optSelected=Ye.selected,(Qe=v.createElement("input")).value="t",Qe.type="radio",b.radioValue="t"===Qe.value;var rt,it=E.expr.attrHandle;E.fn.extend({attr:function(e,t){return z(this,E.attr,e,t,1<arguments.length)},removeAttr:function(e){return this.each(function(){E.removeAttr(this,e)})}}),E.extend({attr:function(e,t,n){var r,i,o=e.nodeType;if(3!==o&&8!==o&&2!==o)return"undefined"==typeof e.getAttribute?E.prop(e,t,n):(1===o&&E.isXMLDoc(e)||(i=E.attrHooks[t.toLowerCase()]||(E.expr.match.bool.test(t)?rt:void 0)),void 0!==n?null===n?void E.removeAttr(e,t):i&&"set"in i&&void 0!==(r=i.set(e,n,t))?r:(e.setAttribute(t,n+""),n):i&&"get"in i&&null!==(r=i.get(e,t))?r:null==(r=E.find.attr(e,t))?void 0:r)},attrHooks:{type:{set:function(e,t){if(!b.radioValue&&"radio"===t&&S(e,"input")){var n=e.value;return e.setAttribute("type",t),n&&(e.value=n),t}}}},removeAttr:function(e,t){var n,r=0,i=t&&t.match(I);if(i&&1===e.nodeType)while(n=i[r++])e.removeAttribute(n)}}),rt={set:function(e,t,n){return!1===t?E.removeAttr(e,n):e.setAttribute(n,n),n}},E.each(E.expr.match.bool.source.match(/\w+/g),function(e,t){var a=it[t]||E.find.attr;it[t]=function(e,t,n){var r,i,o=t.toLowerCase();return n||(i=it[o],it[o]=r,r=null!=a(e,t,n)?o:null,it[o]=i),r}});var ot=/^(?:input|select|textarea|button)$/i,at=/^(?:a|area)$/i;function st(e){return(e.match(I)||[]).join(" ")}function ut(e){return e.getAttribute&&e.getAttribute("class")||""}function lt(e){return Array.isArray(e)?e:"string"==typeof e&&e.match(I)||[]}E.fn.extend({prop:function(e,t){return z(this,E.prop,e,t,1<arguments.length)},removeProp:function(e){return this.each(function(){delete this[E.propFix[e]||e]})}}),E.extend({prop:function(e,t,n){var r,i,o=e.nodeType;if(3!==o&&8!==o&&2!==o)return 1===o&&E.isXMLDoc(e)||(t=E.propFix[t]||t,i=E.propHooks[t]),void 0!==n?i&&"set"in i&&void 0!==(r=i.set(e,n,t))?r:e[t]=n:i&&"get"in i&&null!==(r=i.get(e,t))?r:e[t]},propHooks:{tabIndex:{get:function(e){var t=E.find.attr(e,"tabindex");return t?parseInt(t,10):ot.test(e.nodeName)||at.test(e.nodeName)&&e.href?0:-1}}},propFix:{"for":"htmlFor","class":"className"}}),b.optSelected||(E.propHooks.selected={get:function(e){var t=e.parentNode;return t&&t.parentNode&&t.parentNode.selectedIndex,null},set:function(e){var t=e.parentNode;t&&(t.selectedIndex,t.parentNode&&t.parentNode.selectedIndex)}}),E.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){E.propFix[this.toLowerCase()]=this}),E.fn.extend({addClass:function(t){var e,n,r,i,o,a,s,u=0;if(x(t))return this.each(function(e){E(this).addClass(t.call(this,e,ut(this)))});if((e=lt(t)).length)while(n=this[u++])if(i=ut(n),r=1===n.nodeType&&" "+st(i)+" "){a=0;while(o=e[a++])r.indexOf(" "+o+" ")<0&&(r+=o+" ");i!==(s=st(r))&&n.setAttribute("class",s)}return this},removeClass:function(t){var e,n,r,i,o,a,s,u=0;if(x(t))return this.each(function(e){E(this).removeClass(t.call(this,e,ut(this)))});if(!arguments.length)return this.attr("class","");if((e=lt(t)).length)while(n=this[u++])if(i=ut(n),r=1===n.nodeType&&" "+st(i)+" "){a=0;while(o=e[a++])while(-1<r.indexOf(" "+o+" "))r=r.replace(" "+o+" "," ");i!==(s=st(r))&&n.setAttribute("class",s)}return this},toggleClass:function(i,t){var o=typeof i,a="string"===o||Array.isArray(i);return"boolean"==typeof t&&a?t?this.addClass(i):this.removeClass(i):x(i)?this.each(function(e){E(this).toggleClass(i.call(this,e,ut(this),t),t)}):this.each(function(){var e,t,n,r;if(a){t=0,n=E(this),r=lt(i);while(e=r[t++])n.hasClass(e)?n.removeClass(e):n.addClass(e)}else void 0!==i&&"boolean"!==o||((e=ut(this))&&G.set(this,"__className__",e),this.setAttribute&&this.setAttribute("class",e||!1===i?"":G.get(this,"__className__")||""))})},hasClass:function(e){var t,n,r=0;t=" "+e+" ";while(n=this[r++])if(1===n.nodeType&&-1<(" "+st(ut(n))+" ").indexOf(t))return!0;return!1}});var ct=/\r/g;E.fn.extend({val:function(n){var r,e,i,t=this[0];return arguments.length?(i=x(n),this.each(function(e){var t;1===this.nodeType&&(null==(t=i?n.call(this,e,E(this).val()):n)?t="":"number"==typeof t?t+="":Array.isArray(t)&&(t=E.map(t,function(e){return null==e?"":e+""})),(r=E.valHooks[this.type]||E.valHooks[this.nodeName.toLowerCase()])&&"set"in r&&void 0!==r.set(this,t,"value")||(this.value=t))})):t?(r=E.valHooks[t.type]||E.valHooks[t.nodeName.toLowerCase()])&&"get"in r&&void 0!==(e=r.get(t,"value"))?e:"string"==typeof(e=t.value)?e.replace(ct,""):null==e?"":e:void 0}}),E.extend({valHooks:{option:{get:function(e){var t=E.find.attr(e,"value");return null!=t?t:st(E.text(e))}},select:{get:function(e){var t,n,r,i=e.options,o=e.selectedIndex,a="select-one"===e.type,s=a?null:[],u=a?o+1:i.length;for(r=o<0?u:a?o:0;r<u;r++)if(((n=i[r]).selected||r===o)&&!n.disabled&&(!n.parentNode.disabled||!S(n.parentNode,"optgroup"))){if(t=E(n).val(),a)return t;s.push(t)}return s},set:function(e,t){var n,r,i=e.options,o=E.makeArray(t),a=i.length;while(a--)((r=i[a]).selected=-1<E.inArray(E.valHooks.option.get(r),o))&&(n=!0);return n||(e.selectedIndex=-1),o}}}}),E.each(["radio","checkbox"],function(){E.valHooks[this]={set:function(e,t){if(Array.isArray(t))return e.checked=-1<E.inArray(E(e).val(),t)}},b.checkOn||(E.valHooks[this].get=function(e){return null===e.getAttribute("value")?"on":e.value})}),b.focusin="onfocusin"in g;var ft=/^(?:focusinfocus|focusoutblur)$/,dt=function(e){e.stopPropagation()};E.extend(E.event,{trigger:function(e,t,n,r){var i,o,a,s,u,l,c,f,d=[n||v],p=m.call(e,"type")?e.type:e,h=m.call(e,"namespace")?e.namespace.split("."):[];if(o=f=a=n=n||v,3!==n.nodeType&&8!==n.nodeType&&!ft.test(p+E.event.triggered)&&(-1<p.indexOf(".")&&(p=(h=p.split(".")).shift(),h.sort()),u=p.indexOf(":")<0&&"on"+p,(e=e[E.expando]?e:new E.Event(p,"object"==typeof e&&e)).isTrigger=r?2:3,e.namespace=h.join("."),e.rnamespace=e.namespace?new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,e.result=void 0,e.target||(e.target=n),t=null==t?[e]:E.makeArray(t,[e]),c=E.event.special[p]||{},r||!c.trigger||!1!==c.trigger.apply(n,t))){if(!r&&!c.noBubble&&!w(n)){for(s=c.delegateType||p,ft.test(s+p)||(o=o.parentNode);o;o=o.parentNode)d.push(o),a=o;a===(n.ownerDocument||v)&&d.push(a.defaultView||a.parentWindow||g)}i=0;while((o=d[i++])&&!e.isPropagationStopped())f=o,e.type=1<i?s:c.bindType||p,(l=(G.get(o,"events")||{})[e.type]&&G.get(o,"handle"))&&l.apply(o,t),(l=u&&o[u])&&l.apply&&Q(o)&&(e.result=l.apply(o,t),!1===e.result&&e.preventDefault());return e.type=p,r||e.isDefaultPrevented()||c._default&&!1!==c._default.apply(d.pop(),t)||!Q(n)||u&&x(n[p])&&!w(n)&&((a=n[u])&&(n[u]=null),E.event.triggered=p,e.isPropagationStopped()&&f.addEventListener(p,dt),n[p](),e.isPropagationStopped()&&f.removeEventListener(p,dt),E.event.triggered=void 0,a&&(n[u]=a)),e.result}},simulate:function(e,t,n){var r=E.extend(new E.Event,n,{type:e,isSimulated:!0});E.event.trigger(r,null,t)}}),E.fn.extend({trigger:function(e,t){return this.each(function(){E.event.trigger(e,t,this)})},triggerHandler:function(e,t){var n=this[0];if(n)return E.event.trigger(e,t,n,!0)}}),b.focusin||E.each({focus:"focusin",blur:"focusout"},function(n,r){var i=function(e){E.event.simulate(r,e.target,E.event.fix(e))};E.event.special[r]={setup:function(){var e=this.ownerDocument||this,t=G.access(e,r);t||e.addEventListener(n,i,!0),G.access(e,r,(t||0)+1)},teardown:function(){var e=this.ownerDocument||this,t=G.access(e,r)-1;t?G.access(e,r,t):(e.removeEventListener(n,i,!0),G.remove(e,r))}}});var pt,ht=/\[\]$/,gt=/\r?\n/g,vt=/^(?:submit|button|image|reset|file)$/i,yt=/^(?:input|select|textarea|keygen)/i;function mt(n,e,r,i){var t;if(Array.isArray(e))E.each(e,function(e,t){r||ht.test(n)?i(n,t):mt(n+"["+("object"==typeof t&&null!=t?e:"")+"]",t,r,i)});else if(r||"object"!==T(e))i(n,e);else for(t in e)mt(n+"["+t+"]",e[t],r,i)}E.param=function(e,t){var n,r=[],i=function(e,t){var n=x(t)?t():t;r[r.length]=encodeURIComponent(e)+"="+encodeURIComponent(null==n?"":n)};if(null==e)return"";if(Array.isArray(e)||e.jquery&&!E.isPlainObject(e))E.each(e,function(){i(this.name,this.value)});else for(n in e)mt(n,e[n],t,i);return r.join("&")},E.fn.extend({serialize:function(){return E.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var e=E.prop(this,"elements");return e?E.makeArray(e):this}).filter(function(){var e=this.type;return this.name&&!E(this).is(":disabled")&&yt.test(this.nodeName)&&!vt.test(e)&&(this.checked||!fe.test(e))}).map(function(e,t){var n=E(this).val();return null==n?null:Array.isArray(n)?E.map(n,function(e){return{name:t.name,value:e.replace(gt,"\r\n")}}):{name:t.name,value:n.replace(gt,"\r\n")}}).get()}}),E.fn.extend({wrapAll:function(e){var t;return this[0]&&(x(e)&&(e=e.call(this[0])),t=E(e,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&t.insertBefore(this[0]),t.map(function(){var e=this;while(e.firstElementChild)e=e.firstElementChild;return e}).append(this)),this},wrapInner:function(n){return x(n)?this.each(function(e){E(this).wrapInner(n.call(this,e))}):this.each(function(){var e=E(this),t=e.contents();t.length?t.wrapAll(n):e.append(n)})},wrap:function(t){var n=x(t);return this.each(function(e){E(this).wrapAll(n?t.call(this,e):t)})},unwrap:function(e){return this.parent(e).not("body").each(function(){E(this).replaceWith(this.childNodes)}),this}}),E.expr.pseudos.hidden=function(e){return!E.expr.pseudos.visible(e)},E.expr.pseudos.visible=function(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)},b.createHTMLDocument=((pt=v.implementation.createHTMLDocument("").body).innerHTML="<form></form><form></form>",2===pt.childNodes.length),E.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(b.createHTMLDocument?((r=(t=v.implementation.createHTMLDocument("")).createElement("base")).href=v.location.href,t.head.appendChild(r)):t=v),o=!n&&[],(i=D.exec(e))?[t.createElement(i[1])]:(i=xe([e],t,o),o&&o.length&&E(o).remove(),E.merge([],i.childNodes)));var r,i,o},E.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=E.css(e,"position"),c=E(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=E.css(e,"top"),u=E.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),x(t)&&(t=t.call(e,n,E.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):c.css(f)}},E.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){E.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===E.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===E.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=E(e).offset()).top+=E.css(e,"borderTopWidth",!0),i.left+=E.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-E.css(r,"marginTop",!0),left:t.left-i.left-E.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===E.css(e,"position"))e=e.offsetParent;return e||ie})}}),E.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;E.fn[t]=function(e){return z(this,function(e,t,n){var r;if(w(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),E.each(["top","left"],function(e,n){E.cssHooks[n]=ze(b.pixelPosition,function(e,t){if(t)return t=Fe(e,n),Me.test(t)?E(e).position()[n]+"px":t})}),E.each({Height:"height",Width:"width"},function(a,s){E.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){E.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return z(this,function(e,t,n){var r;return w(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?E.css(e,t,i):E.style(e,t,n,i)},s,n?e:void 0,n)}})}),E.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){E.fn[n]=function(e,t){return 0<arguments.length?this.on(n,null,e,t):this.trigger(n)}}),E.fn.extend({hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),E.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)}}),E.proxy=function(e,t){var n,r,i;if("string"==typeof t&&(n=e[t],t=e,e=n),x(e))return r=s.call(arguments,2),(i=function(){return e.apply(t||this,r.concat(s.call(arguments)))}).guid=e.guid=e.guid||E.guid++,i},E.holdReady=function(e){e?E.readyWait++:E.ready(!0)},E.isArray=Array.isArray,E.parseJSON=JSON.parse,E.nodeName=S,E.isFunction=x,E.isWindow=w,E.camelCase=X,E.type=T,E.now=Date.now,E.isNumeric=function(e){var t=E.type(e);return("number"===t||"string"===t)&&!isNaN(e-parseFloat(e))},"function"==typeof define&&define.amd&&define("jquery",[],function(){return E});var bt=g.jQuery,xt=g.$;return E.noConflict=function(e){return g.$===E&&(g.$=xt),e&&g.jQuery===E&&(g.jQuery=bt),E},e||(g.jQuery=g.$=E),E});
+/*! jQuery v3.5.0 -ajax,-ajax/jsonp,-ajax/load,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-deprecated/ajax-event-alias,-effects,-effects/Tween,-effects/animatedSelector | (c) JS Foundation and other contributors | jquery.org/license */
+!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(g,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,v=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,y=n.hasOwnProperty,a=y.toString,l=a.call(Object),m={},b=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType},x=function(e){return null!=e&&e===e.window},w=g.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function C(e,t,n){var r,i,o=(n=n||w).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function T(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.5.0 -ajax,-ajax/jsonp,-ajax/load,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-deprecated/ajax-event-alias,-effects,-effects/Tween,-effects/animatedSelector",E=function(e,t){return new E.fn.init(e,t)};function d(e){var t=!!e&&"length"in e&&e.length,n=T(e);return!b(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0<t&&t-1 in e)}E.fn=E.prototype={jquery:f,constructor:E,length:0,toArray:function(){return s.call(this)},get:function(e){return null==e?s.call(this):e<0?this[e+this.length]:this[e]},pushStack:function(e){var t=E.merge(this.constructor(),e);return t.prevObject=this,t},each:function(e){return E.each(this,e)},map:function(n){return this.pushStack(E.map(this,function(e,t){return n.call(e,t,e)}))},slice:function(){return this.pushStack(s.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},even:function(){return this.pushStack(E.grep(this,function(e,t){return(t+1)%2}))},odd:function(){return this.pushStack(E.grep(this,function(e,t){return t%2}))},eq:function(e){var t=this.length,n=+e+(e<0?t:0);return this.pushStack(0<=n&&n<t?[this[n]]:[])},end:function(){return this.prevObject||this.constructor()},push:u,sort:t.sort,splice:t.splice},E.extend=E.fn.extend=function(){var e,t,n,r,i,o,a=arguments[0]||{},s=1,u=arguments.length,l=!1;for("boolean"==typeof a&&(l=a,a=arguments[s]||{},s++),"object"==typeof a||b(a)||(a={}),s===u&&(a=this,s--);s<u;s++)if(null!=(e=arguments[s]))for(t in e)r=e[t],"__proto__"!==t&&a!==r&&(l&&r&&(E.isPlainObject(r)||(i=Array.isArray(r)))?(n=a[t],o=i&&!Array.isArray(n)?[]:i||E.isPlainObject(n)?n:{},i=!1,a[t]=E.extend(l,o,r)):void 0!==r&&(a[t]=r));return a},E.extend({expando:"jQuery"+(f+Math.random()).replace(/\D/g,""),isReady:!0,error:function(e){throw new Error(e)},noop:function(){},isPlainObject:function(e){var t,n;return!(!e||"[object Object]"!==o.call(e))&&(!(t=r(e))||"function"==typeof(n=y.call(t,"constructor")&&t.constructor)&&a.call(n)===l)},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},globalEval:function(e,t,n){C(e,{nonce:t&&t.nonce},n)},each:function(e,t){var n,r=0;if(d(e)){for(n=e.length;r<n;r++)if(!1===t.call(e[r],r,e[r]))break}else for(r in e)if(!1===t.call(e[r],r,e[r]))break;return e},makeArray:function(e,t){var n=t||[];return null!=e&&(d(Object(e))?E.merge(n,"string"==typeof e?[e]:e):u.call(n,e)),n},inArray:function(e,t,n){return null==t?-1:i.call(t,e,n)},merge:function(e,t){for(var n=+t.length,r=0,i=e.length;r<n;r++)e[i++]=t[r];return e.length=i,e},grep:function(e,t,n){for(var r=[],i=0,o=e.length,a=!n;i<o;i++)!t(e[i],i)!==a&&r.push(e[i]);return r},map:function(e,t,n){var r,i,o=0,a=[];if(d(e))for(r=e.length;o<r;o++)null!=(i=t(e[o],o,n))&&a.push(i);else for(o in e)null!=(i=t(e[o],o,n))&&a.push(i);return v(a)},guid:1,support:m}),"function"==typeof Symbol&&(E.fn[Symbol.iterator]=t[Symbol.iterator]),E.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(e,t){n["[object "+t+"]"]=t.toLowerCase()});var p=function(n){var e,p,x,o,i,h,f,g,w,u,l,C,T,a,E,v,s,c,y,A="sizzle"+1*new Date,d=n.document,N=0,r=0,m=ue(),b=ue(),S=ue(),k=ue(),D=function(e,t){return e===t&&(l=!0),0},L={}.hasOwnProperty,t=[],j=t.pop,q=t.push,O=t.push,P=t.slice,H=function(e,t){for(var n=0,r=e.length;n<r;n++)if(e[n]===t)return n;return-1},I="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",R="[\\x20\\t\\r\\n\\f]",B="(?:\\\\[\\da-fA-F]{1,6}"+R+"?|\\\\[^\\r\\n\\f]|[\\w-]|[^\0-\\x7f])+",M="\\["+R+"*("+B+")(?:"+R+"*([*^$|!~]?=)"+R+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+B+"))|)"+R+"*\\]",W=":("+B+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+M+")*)|.*)\\)|)",F=new RegExp(R+"+","g"),$=new RegExp("^"+R+"+|((?:^|[^\\\\])(?:\\\\.)*)"+R+"+$","g"),z=new RegExp("^"+R+"*,"+R+"*"),_=new RegExp("^"+R+"*([>+~]|"+R+")"+R+"*"),U=new RegExp(R+"|>"),V=new RegExp(W),X=new RegExp("^"+B+"$"),Q={ID:new RegExp("^#("+B+")"),CLASS:new RegExp("^\\.("+B+")"),TAG:new RegExp("^("+B+"|[*])"),ATTR:new RegExp("^"+M),PSEUDO:new RegExp("^"+W),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+R+"*(even|odd|(([+-]|)(\\d*)n|)"+R+"*(?:([+-]|)"+R+"*(\\d+)|))"+R+"*\\)|)","i"),bool:new RegExp("^(?:"+I+")$","i"),needsContext:new RegExp("^"+R+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+R+"*((?:-\\d)?\\d*)"+R+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,G=/^(?:input|select|textarea|button)$/i,K=/^h\d$/i,J=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\[\\da-fA-F]{1,6}"+R+"?|\\\\([^\\r\\n\\f])","g"),ne=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|56320))},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){C()},ae=xe(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{O.apply(t=P.call(d.childNodes),d.childNodes),t[d.childNodes.length].nodeType}catch(e){O={apply:t.length?function(e,t){q.apply(e,P.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,d=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==d&&9!==d&&11!==d)return n;if(!r&&(C(e),e=e||T,E)){if(11!==d&&(u=Z.exec(t)))if(i=u[1]){if(9===d){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return O.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&p.getElementsByClassName&&e.getElementsByClassName)return O.apply(n,e.getElementsByClassName(i)),n}if(p.qsa&&!k[t+" "]&&(!v||!v.test(t))&&(1!==d||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===d&&(U.test(t)||_.test(t))){(f=ee.test(t)&&ye(e.parentNode)||e)===e&&p.scope||((s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=A)),o=(l=h(t)).length;while(o--)l[o]=(s?"#"+s:":scope")+" "+be(l[o]);c=l.join(",")}try{return O.apply(n,f.querySelectorAll(c)),n}catch(e){k(t,!0)}finally{s===A&&e.removeAttribute("id")}}}return g(t.replace($,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>x.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[A]=!0,e}function ce(e){var t=T.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)x.attrHandle[n[r]]=t}function de(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function pe(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in p=se.support={},i=se.isXML=function(e){var t=e.namespaceURI,n=(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},C=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:d;return r!=T&&9===r.nodeType&&r.documentElement&&(a=(T=r).documentElement,E=!i(T),d!=T&&(n=T.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),p.scope=ce(function(e){return a.appendChild(e).appendChild(T.createElement("div")),"undefined"!=typeof e.querySelectorAll&&!e.querySelectorAll(":scope fieldset div").length}),p.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),p.getElementsByTagName=ce(function(e){return e.appendChild(T.createComment("")),!e.getElementsByTagName("*").length}),p.getElementsByClassName=J.test(T.getElementsByClassName),p.getById=ce(function(e){return a.appendChild(e).id=A,!T.getElementsByName||!T.getElementsByName(A).length}),p.getById?(x.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},x.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(x.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},x.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),x.find.TAG=p.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):p.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},x.find.CLASS=p.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(p.qsa=J.test(T.querySelectorAll))&&(ce(function(e){var t;a.appendChild(e).innerHTML="<a id='"+A+"'></a><select id='"+A+"-\r\\' msallowcapture=''><option selected=''></option></select>",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+R+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+R+"*(?:value|"+I+")"),e.querySelectorAll("[id~="+A+"-]").length||v.push("~="),(t=T.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||v.push("\\["+R+"*name"+R+"*="+R+"*(?:''|\"\")"),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+A+"+*").length||v.push(".#.+[+~]"),e.querySelectorAll("\\\f"),v.push("[\\r\\n\\f]")}),ce(function(e){e.innerHTML="<a href='' disabled='disabled'></a><select disabled='disabled'><option/></select>";var t=T.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+R+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(p.matchesSelector=J.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){p.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",W)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=J.test(a.compareDocumentPosition),y=t||J.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},D=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)==(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!p.sortDetached&&t.compareDocumentPosition(e)===n?e==T||e.ownerDocument==d&&y(d,e)?-1:t==T||t.ownerDocument==d&&y(d,t)?1:u?H(u,e)-H(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e==T?-1:t==T?1:i?-1:o?1:u?H(u,e)-H(u,t):0;if(i===o)return de(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?de(a[r],s[r]):a[r]==d?-1:s[r]==d?1:0}),T},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if(C(e),p.matchesSelector&&E&&!k[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||p.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){k(t,!0)}return 0<se(t,T,null,[e]).length},se.contains=function(e,t){return(e.ownerDocument||e)!=T&&C(e),y(e,t)},se.attr=function(e,t){(e.ownerDocument||e)!=T&&C(e);var n=x.attrHandle[t.toLowerCase()],r=n&&L.call(x.attrHandle,t.toLowerCase())?n(e,t,!E):void 0;return void 0!==r?r:p.attributes||!E?e.getAttribute(t):(r=e.getAttributeNode(t))&&r.specified?r.value:null},se.escape=function(e){return(e+"").replace(re,ie)},se.error=function(e){throw new Error("Syntax error, unrecognized expression: "+e)},se.uniqueSort=function(e){var t,n=[],r=0,i=0;if(l=!p.detectDuplicates,u=!p.sortStable&&e.slice(0),e.sort(D),l){while(t=e[i++])t===e[i]&&(r=n.push(i));while(r--)e.splice(n[r],1)}return u=null,e},o=se.getText=function(e){var t,n="",r=0,i=e.nodeType;if(i){if(1===i||9===i||11===i){if("string"==typeof e.textContent)return e.textContent;for(e=e.firstChild;e;e=e.nextSibling)n+=o(e)}else if(3===i||4===i)return e.nodeValue}else while(t=e[r++])n+=o(t);return n},(x=se.selectors={cacheLength:50,createPseudo:le,match:Q,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return Q.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&V.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=m[e+" "];return t||(t=new RegExp("(^|"+R+")"+e+"("+R+"|$)"))&&m(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1<t.indexOf(i):"$="===r?i&&t.slice(-i.length)===i:"~="===r?-1<(" "+t.replace(F," ")+" ").indexOf(i):"|="===r&&(t===i||t.slice(0,i.length+1)===i+"-"))}},CHILD:function(h,e,t,g,v){var y="nth"!==h.slice(0,3),m="last"!==h.slice(-4),b="of-type"===e;return 1===g&&0===v?function(e){return!!e.parentNode}:function(e,t,n){var r,i,o,a,s,u,l=y!==m?"nextSibling":"previousSibling",c=e.parentNode,f=b&&e.nodeName.toLowerCase(),d=!n&&!b,p=!1;if(c){if(y){while(l){a=e;while(a=a[l])if(b?a.nodeName.toLowerCase()===f:1===a.nodeType)return!1;u=l="only"===h&&!u&&"nextSibling"}return!0}if(u=[m?c.firstChild:c.lastChild],m&&d){p=(s=(r=(i=(o=(a=c)[A]||(a[A]={}))[a.uniqueID]||(o[a.uniqueID]={}))[h]||[])[0]===N&&r[1])&&r[2],a=s&&c.childNodes[s];while(a=++s&&a&&a[l]||(p=s=0)||u.pop())if(1===a.nodeType&&++p&&a===e){i[h]=[N,s,p];break}}else if(d&&(p=s=(r=(i=(o=(a=e)[A]||(a[A]={}))[a.uniqueID]||(o[a.uniqueID]={}))[h]||[])[0]===N&&r[1]),!1===p)while(a=++s&&a&&a[l]||(p=s=0)||u.pop())if((b?a.nodeName.toLowerCase()===f:1===a.nodeType)&&++p&&(d&&((i=(o=a[A]||(a[A]={}))[a.uniqueID]||(o[a.uniqueID]={}))[h]=[N,p]),a===e))break;return(p-=v)===g||p%g==0&&0<=p/g}}},PSEUDO:function(e,o){var t,a=x.pseudos[e]||x.setFilters[e.toLowerCase()]||se.error("unsupported pseudo: "+e);return a[A]?a(o):1<a.length?(t=[e,e,"",o],x.setFilters.hasOwnProperty(e.toLowerCase())?le(function(e,t){var n,r=a(e,o),i=r.length;while(i--)e[n=H(e,r[i])]=!(t[n]=r[i])}):function(e){return a(e,0,t)}):a}},pseudos:{not:le(function(e){var r=[],i=[],s=f(e.replace($,"$1"));return s[A]?le(function(e,t,n,r){var i,o=s(e,null,r,[]),a=e.length;while(a--)(i=o[a])&&(e[a]=!(t[a]=i))}):function(e,t,n){return r[0]=e,s(r,null,n,i),r[0]=null,!i.pop()}}),has:le(function(t){return function(e){return 0<se(t,e).length}}),contains:le(function(t){return t=t.replace(te,ne),function(e){return-1<(e.textContent||o(e)).indexOf(t)}}),lang:le(function(n){return X.test(n||"")||se.error("unsupported lang: "+n),n=n.replace(te,ne).toLowerCase(),function(e){var t;do{if(t=E?e.lang:e.getAttribute("xml:lang")||e.getAttribute("lang"))return(t=t.toLowerCase())===n||0===t.indexOf(n+"-")}while((e=e.parentNode)&&1===e.nodeType);return!1}}),target:function(e){var t=n.location&&n.location.hash;return t&&t.slice(1)===e.id},root:function(e){return e===a},focus:function(e){return e===T.activeElement&&(!T.hasFocus||T.hasFocus())&&!!(e.type||e.href||~e.tabIndex)},enabled:ge(!1),disabled:ge(!0),checked:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&!!e.checked||"option"===t&&!!e.selected},selected:function(e){return e.parentNode&&e.parentNode.selectedIndex,!0===e.selected},empty:function(e){for(e=e.firstChild;e;e=e.nextSibling)if(e.nodeType<6)return!1;return!0},parent:function(e){return!x.pseudos.empty(e)},header:function(e){return K.test(e.nodeName)},input:function(e){return G.test(e.nodeName)},button:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&"button"===e.type||"button"===t},text:function(e){var t;return"input"===e.nodeName.toLowerCase()&&"text"===e.type&&(null==(t=e.getAttribute("type"))||"text"===t.toLowerCase())},first:ve(function(){return[0]}),last:ve(function(e,t){return[t-1]}),eq:ve(function(e,t,n){return[n<0?n+t:n]}),even:ve(function(e,t){for(var n=0;n<t;n+=2)e.push(n);return e}),odd:ve(function(e,t){for(var n=1;n<t;n+=2)e.push(n);return e}),lt:ve(function(e,t,n){for(var r=n<0?n+t:t<n?t:n;0<=--r;)e.push(r);return e}),gt:ve(function(e,t,n){for(var r=n<0?n+t:n;++r<t;)e.push(r);return e})}}).pseudos.nth=x.pseudos.eq,{radio:!0,checkbox:!0,file:!0,password:!0,image:!0})x.pseudos[e]=pe(e);for(e in{submit:!0,reset:!0})x.pseudos[e]=he(e);function me(){}function be(e){for(var t=0,n=e.length,r="";t<n;t++)r+=e[t].value;return r}function xe(s,e,t){var u=e.dir,l=e.next,c=l||u,f=t&&"parentNode"===c,d=r++;return e.first?function(e,t,n){while(e=e[u])if(1===e.nodeType||f)return s(e,t,n);return!1}:function(e,t,n){var r,i,o,a=[N,d];if(n){while(e=e[u])if((1===e.nodeType||f)&&s(e,t,n))return!0}else while(e=e[u])if(1===e.nodeType||f)if(i=(o=e[A]||(e[A]={}))[e.uniqueID]||(o[e.uniqueID]={}),l&&l===e.nodeName.toLowerCase())e=e[u]||e;else{if((r=i[c])&&r[0]===N&&r[1]===d)return a[2]=r[2];if((i[c]=a)[2]=s(e,t,n))return!0}return!1}}function we(i){return 1<i.length?function(e,t,n){var r=i.length;while(r--)if(!i[r](e,t,n))return!1;return!0}:i[0]}function Ce(e,t,n,r,i){for(var o,a=[],s=0,u=e.length,l=null!=t;s<u;s++)(o=e[s])&&(n&&!n(o,r,i)||(a.push(o),l&&t.push(s)));return a}function Te(p,h,g,v,y,e){return v&&!v[A]&&(v=Te(v)),y&&!y[A]&&(y=Te(y,e)),le(function(e,t,n,r){var i,o,a,s=[],u=[],l=t.length,c=e||function(e,t,n){for(var r=0,i=t.length;r<i;r++)se(e,t[r],n);return n}(h||"*",n.nodeType?[n]:n,[]),f=!p||!e&&h?c:Ce(c,s,p,n,r),d=g?y||(e?p:l||v)?[]:t:f;if(g&&g(f,d,n,r),v){i=Ce(d,u),v(i,[],n,r),o=i.length;while(o--)(a=i[o])&&(d[u[o]]=!(f[u[o]]=a))}if(e){if(y||p){if(y){i=[],o=d.length;while(o--)(a=d[o])&&i.push(f[o]=a);y(null,d=[],i,r)}o=d.length;while(o--)(a=d[o])&&-1<(i=y?H(e,a):s[o])&&(e[i]=!(t[i]=a))}}else d=Ce(d===t?d.splice(l,d.length):d),y?y(null,t,d,r):O.apply(t,d)})}function Ee(e){for(var i,t,n,r=e.length,o=x.relative[e[0].type],a=o||x.relative[" "],s=o?1:0,u=xe(function(e){return e===i},a,!0),l=xe(function(e){return-1<H(i,e)},a,!0),c=[function(e,t,n){var r=!o&&(n||t!==w)||((i=t).nodeType?u(e,t,n):l(e,t,n));return i=null,r}];s<r;s++)if(t=x.relative[e[s].type])c=[xe(we(c),t)];else{if((t=x.filter[e[s].type].apply(null,e[s].matches))[A]){for(n=++s;n<r;n++)if(x.relative[e[n].type])break;return Te(1<s&&we(c),1<s&&be(e.slice(0,s-1).concat({value:" "===e[s-2].type?"*":""})).replace($,"$1"),t,s<n&&Ee(e.slice(s,n)),n<r&&Ee(e=e.slice(n)),n<r&&be(e))}c.push(t)}return we(c)}return me.prototype=x.filters=x.pseudos,x.setFilters=new me,h=se.tokenize=function(e,t){var n,r,i,o,a,s,u,l=b[e+" "];if(l)return t?0:l.slice(0);a=e,s=[],u=x.preFilter;while(a){for(o in n&&!(r=z.exec(a))||(r&&(a=a.slice(r[0].length)||a),s.push(i=[])),n=!1,(r=_.exec(a))&&(n=r.shift(),i.push({value:n,type:r[0].replace($," ")}),a=a.slice(n.length)),x.filter)!(r=Q[o].exec(a))||u[o]&&!(r=u[o](r))||(n=r.shift(),i.push({value:n,type:o,matches:r}),a=a.slice(n.length));if(!n)break}return t?a.length:a?se.error(e):b(e,s).slice(0)},f=se.compile=function(e,t){var n,v,y,m,b,r,i=[],o=[],a=S[e+" "];if(!a){t||(t=h(e)),n=t.length;while(n--)(a=Ee(t[n]))[A]?i.push(a):o.push(a);(a=S(e,(v=o,m=0<(y=i).length,b=0<v.length,r=function(e,t,n,r,i){var o,a,s,u=0,l="0",c=e&&[],f=[],d=w,p=e||b&&x.find.TAG("*",i),h=N+=null==d?1:Math.random()||.1,g=p.length;for(i&&(w=t==T||t||i);l!==g&&null!=(o=p[l]);l++){if(b&&o){a=0,t||o.ownerDocument==T||(C(o),n=!E);while(s=v[a++])if(s(o,t||T,n)){r.push(o);break}i&&(N=h)}m&&((o=!s&&o)&&u--,e&&c.push(o))}if(u+=l,m&&l!==u){a=0;while(s=y[a++])s(c,f,t,n);if(e){if(0<u)while(l--)c[l]||f[l]||(f[l]=j.call(r));f=Ce(f)}O.apply(r,f),i&&!e&&0<f.length&&1<u+y.length&&se.uniqueSort(r)}return i&&(N=h,w=d),c},m?le(r):r))).selector=e}return a},g=se.select=function(e,t,n,r){var i,o,a,s,u,l="function"==typeof e&&e,c=!r&&h(e=l.selector||e);if(n=n||[],1===c.length){if(2<(o=c[0]=c[0].slice(0)).length&&"ID"===(a=o[0]).type&&9===t.nodeType&&E&&x.relative[o[1].type]){if(!(t=(x.find.ID(a.matches[0].replace(te,ne),t)||[])[0]))return n;l&&(t=t.parentNode),e=e.slice(o.shift().value.length)}i=Q.needsContext.test(e)?0:o.length;while(i--){if(a=o[i],x.relative[s=a.type])break;if((u=x.find[s])&&(r=u(a.matches[0].replace(te,ne),ee.test(o[0].type)&&ye(t.parentNode)||t))){if(o.splice(i,1),!(e=r.length&&be(o)))return O.apply(n,r),n;break}}}return(l||f(e,c))(r,t,!E,n,!t||ee.test(e)&&ye(t.parentNode)||t),n},p.sortStable=A.split("").sort(D).join("")===A,p.detectDuplicates=!!l,C(),p.sortDetached=ce(function(e){return 1&e.compareDocumentPosition(T.createElement("fieldset"))}),ce(function(e){return e.innerHTML="<a href='#'></a>","#"===e.firstChild.getAttribute("href")})||fe("type|href|height|width",function(e,t,n){if(!n)return e.getAttribute(t,"type"===t.toLowerCase()?1:2)}),p.attributes&&ce(function(e){return e.innerHTML="<input/>",e.firstChild.setAttribute("value",""),""===e.firstChild.getAttribute("value")})||fe("value",function(e,t,n){if(!n&&"input"===e.nodeName.toLowerCase())return e.defaultValue}),ce(function(e){return null==e.getAttribute("disabled")})||fe(I,function(e,t,n){var r;if(!n)return!0===e[t]?t.toLowerCase():(r=e.getAttributeNode(t))&&r.specified?r.value:null}),se}(g);E.find=p,E.expr=p.selectors,E.expr[":"]=E.expr.pseudos,E.uniqueSort=E.unique=p.uniqueSort,E.text=p.getText,E.isXMLDoc=p.isXML,E.contains=p.contains,E.escapeSelector=p.escape;var h=function(e,t,n){var r=[],i=void 0!==n;while((e=e[t])&&9!==e.nodeType)if(1===e.nodeType){if(i&&E(e).is(n))break;r.push(e)}return r},A=function(e,t){for(var n=[];e;e=e.nextSibling)1===e.nodeType&&e!==t&&n.push(e);return n},N=E.expr.match.needsContext;function S(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()}var k=/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function D(e,n,r){return b(n)?E.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?E.grep(e,function(e){return e===n!==r}):"string"!=typeof n?E.grep(e,function(e){return-1<i.call(n,e)!==r}):E.filter(n,e,r)}E.filter=function(e,t,n){var r=t[0];return n&&(e=":not("+e+")"),1===t.length&&1===r.nodeType?E.find.matchesSelector(r,e)?[r]:[]:E.find.matches(e,E.grep(t,function(e){return 1===e.nodeType}))},E.fn.extend({find:function(e){var t,n,r=this.length,i=this;if("string"!=typeof e)return this.pushStack(E(e).filter(function(){for(t=0;t<r;t++)if(E.contains(i[t],this))return!0}));for(n=this.pushStack([]),t=0;t<r;t++)E.find(e,i[t],n);return 1<r?E.uniqueSort(n):n},filter:function(e){return this.pushStack(D(this,e||[],!1))},not:function(e){return this.pushStack(D(this,e||[],!0))},is:function(e){return!!D(this,"string"==typeof e&&N.test(e)?E(e):e||[],!1).length}});var L,j=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/;(E.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||L,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:j.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof E?t[0]:t,E.merge(this,E.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:w,!0)),k.test(r[1])&&E.isPlainObject(t))for(r in t)b(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=w.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):b(e)?void 0!==n.ready?n.ready(e):e(E):E.makeArray(e,this)}).prototype=E.fn,L=E(w);var q=/^(?:parents|prev(?:Until|All))/,O={children:!0,contents:!0,next:!0,prev:!0};function P(e,t){while((e=e[t])&&1!==e.nodeType);return e}E.fn.extend({has:function(e){var t=E(e,this),n=t.length;return this.filter(function(){for(var e=0;e<n;e++)if(E.contains(this,t[e]))return!0})},closest:function(e,t){var n,r=0,i=this.length,o=[],a="string"!=typeof e&&E(e);if(!N.test(e))for(;r<i;r++)for(n=this[r];n&&n!==t;n=n.parentNode)if(n.nodeType<11&&(a?-1<a.index(n):1===n.nodeType&&E.find.matchesSelector(n,e))){o.push(n);break}return this.pushStack(1<o.length?E.uniqueSort(o):o)},index:function(e){return e?"string"==typeof e?i.call(E(e),this[0]):i.call(this,e.jquery?e[0]:e):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(e,t){return this.pushStack(E.uniqueSort(E.merge(this.get(),E(e,t))))},addBack:function(e){return this.add(null==e?this.prevObject:this.prevObject.filter(e))}}),E.each({parent:function(e){var t=e.parentNode;return t&&11!==t.nodeType?t:null},parents:function(e){return h(e,"parentNode")},parentsUntil:function(e,t,n){return h(e,"parentNode",n)},next:function(e){return P(e,"nextSibling")},prev:function(e){return P(e,"previousSibling")},nextAll:function(e){return h(e,"nextSibling")},prevAll:function(e){return h(e,"previousSibling")},nextUntil:function(e,t,n){return h(e,"nextSibling",n)},prevUntil:function(e,t,n){return h(e,"previousSibling",n)},siblings:function(e){return A((e.parentNode||{}).firstChild,e)},children:function(e){return A(e.firstChild)},contents:function(e){return null!=e.contentDocument&&r(e.contentDocument)?e.contentDocument:(S(e,"template")&&(e=e.content||e),E.merge([],e.childNodes))}},function(r,i){E.fn[r]=function(e,t){var n=E.map(this,i,e);return"Until"!==r.slice(-5)&&(t=e),t&&"string"==typeof t&&(n=E.filter(t,n)),1<this.length&&(O[r]||E.uniqueSort(n),q.test(r)&&n.reverse()),this.pushStack(n)}});var H=/[^\x20\t\r\n\f]+/g;function I(e){return e}function R(e){throw e}function B(e,t,n,r){var i;try{e&&b(i=e.promise)?i.call(e).done(t).fail(n):e&&b(i=e.then)?i.call(e,t,n):t.apply(void 0,[e].slice(r))}catch(e){n.apply(void 0,[e])}}E.Callbacks=function(r){var e,n;r="string"==typeof r?(e=r,n={},E.each(e.match(H)||[],function(e,t){n[t]=!0}),n):E.extend({},r);var i,t,o,a,s=[],u=[],l=-1,c=function(){for(a=a||r.once,o=i=!0;u.length;l=-1){t=u.shift();while(++l<s.length)!1===s[l].apply(t[0],t[1])&&r.stopOnFalse&&(l=s.length,t=!1)}r.memory||(t=!1),i=!1,a&&(s=t?[]:"")},f={add:function(){return s&&(t&&!i&&(l=s.length-1,u.push(t)),function n(e){E.each(e,function(e,t){b(t)?r.unique&&f.has(t)||s.push(t):t&&t.length&&"string"!==T(t)&&n(t)})}(arguments),t&&!i&&c()),this},remove:function(){return E.each(arguments,function(e,t){var n;while(-1<(n=E.inArray(t,s,n)))s.splice(n,1),n<=l&&l--}),this},has:function(e){return e?-1<E.inArray(e,s):0<s.length},empty:function(){return s&&(s=[]),this},disable:function(){return a=u=[],s=t="",this},disabled:function(){return!s},lock:function(){return a=u=[],t||i||(s=t=""),this},locked:function(){return!!a},fireWith:function(e,t){return a||(t=[e,(t=t||[]).slice?t.slice():t],u.push(t),i||c()),this},fire:function(){return f.fireWith(this,arguments),this},fired:function(){return!!o}};return f},E.extend({Deferred:function(e){var o=[["notify","progress",E.Callbacks("memory"),E.Callbacks("memory"),2],["resolve","done",E.Callbacks("once memory"),E.Callbacks("once memory"),0,"resolved"],["reject","fail",E.Callbacks("once memory"),E.Callbacks("once memory"),1,"rejected"]],i="pending",a={state:function(){return i},always:function(){return s.done(arguments).fail(arguments),this},"catch":function(e){return a.then(null,e)},pipe:function(){var i=arguments;return E.Deferred(function(r){E.each(o,function(e,t){var n=b(i[t[4]])&&i[t[4]];s[t[1]](function(){var e=n&&n.apply(this,arguments);e&&b(e.promise)?e.promise().progress(r.notify).done(r.resolve).fail(r.reject):r[t[0]+"With"](this,n?[e]:arguments)})}),i=null}).promise()},then:function(t,n,r){var u=0;function l(i,o,a,s){return function(){var n=this,r=arguments,e=function(){var e,t;if(!(i<u)){if((e=a.apply(n,r))===o.promise())throw new TypeError("Thenable self-resolution");t=e&&("object"==typeof e||"function"==typeof e)&&e.then,b(t)?s?t.call(e,l(u,o,I,s),l(u,o,R,s)):(u++,t.call(e,l(u,o,I,s),l(u,o,R,s),l(u,o,I,o.notifyWith))):(a!==I&&(n=void 0,r=[e]),(s||o.resolveWith)(n,r))}},t=s?e:function(){try{e()}catch(e){E.Deferred.exceptionHook&&E.Deferred.exceptionHook(e,t.stackTrace),u<=i+1&&(a!==R&&(n=void 0,r=[e]),o.rejectWith(n,r))}};i?t():(E.Deferred.getStackHook&&(t.stackTrace=E.Deferred.getStackHook()),g.setTimeout(t))}}return E.Deferred(function(e){o[0][3].add(l(0,e,b(r)?r:I,e.notifyWith)),o[1][3].add(l(0,e,b(t)?t:I)),o[2][3].add(l(0,e,b(n)?n:R))}).promise()},promise:function(e){return null!=e?E.extend(e,a):a}},s={};return E.each(o,function(e,t){var n=t[2],r=t[5];a[t[1]]=n.add,r&&n.add(function(){i=r},o[3-e][2].disable,o[3-e][3].disable,o[0][2].lock,o[0][3].lock),n.add(t[3].fire),s[t[0]]=function(){return s[t[0]+"With"](this===s?void 0:this,arguments),this},s[t[0]+"With"]=n.fireWith}),a.promise(s),e&&e.call(s,s),s},when:function(e){var n=arguments.length,t=n,r=Array(t),i=s.call(arguments),o=E.Deferred(),a=function(t){return function(e){r[t]=this,i[t]=1<arguments.length?s.call(arguments):e,--n||o.resolveWith(r,i)}};if(n<=1&&(B(e,o.done(a(t)).resolve,o.reject,!n),"pending"===o.state()||b(i[t]&&i[t].then)))return o.then();while(t--)B(i[t],a(t),o.reject);return o.promise()}});var M=/^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;E.Deferred.exceptionHook=function(e,t){g.console&&g.console.warn&&e&&M.test(e.name)&&g.console.warn("jQuery.Deferred exception: "+e.message,e.stack,t)},E.readyException=function(e){g.setTimeout(function(){throw e})};var W=E.Deferred();function F(){w.removeEventListener("DOMContentLoaded",F),g.removeEventListener("load",F),E.ready()}E.fn.ready=function(e){return W.then(e)["catch"](function(e){E.readyException(e)}),this},E.extend({isReady:!1,readyWait:1,ready:function(e){(!0===e?--E.readyWait:E.isReady)||(E.isReady=!0)!==e&&0<--E.readyWait||W.resolveWith(w,[E])}}),E.ready.then=W.then,"complete"===w.readyState||"loading"!==w.readyState&&!w.documentElement.doScroll?g.setTimeout(E.ready):(w.addEventListener("DOMContentLoaded",F),g.addEventListener("load",F));var $=function(e,t,n,r,i,o,a){var s=0,u=e.length,l=null==n;if("object"===T(n))for(s in i=!0,n)$(e,t,s,n[s],!0,o,a);else if(void 0!==r&&(i=!0,b(r)||(a=!0),l&&(a?(t.call(e,r),t=null):(l=t,t=function(e,t,n){return l.call(E(e),n)})),t))for(;s<u;s++)t(e[s],n,a?r:r.call(e[s],s,t(e[s],n)));return i?e:l?t.call(e):u?t(e[0],n):o},z=/^-ms-/,_=/-([a-z])/g;function U(e,t){return t.toUpperCase()}function V(e){return e.replace(z,"ms-").replace(_,U)}var X=function(e){return 1===e.nodeType||9===e.nodeType||!+e.nodeType};function Q(){this.expando=E.expando+Q.uid++}Q.uid=1,Q.prototype={cache:function(e){var t=e[this.expando];return t||(t=Object.create(null),X(e)&&(e.nodeType?e[this.expando]=t:Object.defineProperty(e,this.expando,{value:t,configurable:!0}))),t},set:function(e,t,n){var r,i=this.cache(e);if("string"==typeof t)i[V(t)]=n;else for(r in t)i[V(r)]=t[r];return i},get:function(e,t){return void 0===t?this.cache(e):e[this.expando]&&e[this.expando][V(t)]},access:function(e,t,n){return void 0===t||t&&"string"==typeof t&&void 0===n?this.get(e,t):(this.set(e,t,n),void 0!==n?n:t)},remove:function(e,t){var n,r=e[this.expando];if(void 0!==r){if(void 0!==t){n=(t=Array.isArray(t)?t.map(V):(t=V(t))in r?[t]:t.match(H)||[]).length;while(n--)delete r[t[n]]}(void 0===t||E.isEmptyObject(r))&&(e.nodeType?e[this.expando]=void 0:delete e[this.expando])}},hasData:function(e){var t=e[this.expando];return void 0!==t&&!E.isEmptyObject(t)}};var Y=new Q,G=new Q,K=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,J=/[A-Z]/g;function Z(e,t,n){var r,i;if(void 0===n&&1===e.nodeType)if(r="data-"+t.replace(J,"-$&").toLowerCase(),"string"==typeof(n=e.getAttribute(r))){try{n="true"===(i=n)||"false"!==i&&("null"===i?null:i===+i+""?+i:K.test(i)?JSON.parse(i):i)}catch(e){}G.set(e,t,n)}else n=void 0;return n}E.extend({hasData:function(e){return G.hasData(e)||Y.hasData(e)},data:function(e,t,n){return G.access(e,t,n)},removeData:function(e,t){G.remove(e,t)},_data:function(e,t,n){return Y.access(e,t,n)},_removeData:function(e,t){Y.remove(e,t)}}),E.fn.extend({data:function(n,e){var t,r,i,o=this[0],a=o&&o.attributes;if(void 0===n){if(this.length&&(i=G.get(o),1===o.nodeType&&!Y.get(o,"hasDataAttrs"))){t=a.length;while(t--)a[t]&&0===(r=a[t].name).indexOf("data-")&&(r=V(r.slice(5)),Z(o,r,i[r]));Y.set(o,"hasDataAttrs",!0)}return i}return"object"==typeof n?this.each(function(){G.set(this,n)}):$(this,function(e){var t;if(o&&void 0===e)return void 0!==(t=G.get(o,n))?t:void 0!==(t=Z(o,n))?t:void 0;this.each(function(){G.set(this,n,e)})},null,e,1<arguments.length,null,!0)},removeData:function(e){return this.each(function(){G.remove(this,e)})}}),E.extend({queue:function(e,t,n){var r;if(e)return t=(t||"fx")+"queue",r=Y.get(e,t),n&&(!r||Array.isArray(n)?r=Y.access(e,t,E.makeArray(n)):r.push(n)),r||[]},dequeue:function(e,t){t=t||"fx";var n=E.queue(e,t),r=n.length,i=n.shift(),o=E._queueHooks(e,t);"inprogress"===i&&(i=n.shift(),r--),i&&("fx"===t&&n.unshift("inprogress"),delete o.stop,i.call(e,function(){E.dequeue(e,t)},o)),!r&&o&&o.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return Y.get(e,n)||Y.access(e,n,{empty:E.Callbacks("once memory").add(function(){Y.remove(e,[t+"queue",n])})})}}),E.fn.extend({queue:function(t,n){var e=2;return"string"!=typeof t&&(n=t,t="fx",e--),arguments.length<e?E.queue(this[0],t):void 0===n?this:this.each(function(){var e=E.queue(this,t,n);E._queueHooks(this,t),"fx"===t&&"inprogress"!==e[0]&&E.dequeue(this,t)})},dequeue:function(e){return this.each(function(){E.dequeue(this,e)})},clearQueue:function(e){return this.queue(e||"fx",[])},promise:function(e,t){var n,r=1,i=E.Deferred(),o=this,a=this.length,s=function(){--r||i.resolveWith(o,[o])};"string"!=typeof e&&(t=e,e=void 0),e=e||"fx";while(a--)(n=Y.get(o[a],e+"queueHooks"))&&n.empty&&(r++,n.empty.add(s));return s(),i.promise(t)}});var ee=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,te=new RegExp("^(?:([+-])=|)("+ee+")([a-z%]*)$","i"),ne=["Top","Right","Bottom","Left"],re=w.documentElement,ie=function(e){return E.contains(e.ownerDocument,e)},oe={composed:!0};re.getRootNode&&(ie=function(e){return E.contains(e.ownerDocument,e)||e.getRootNode(oe)===e.ownerDocument});var ae=function(e,t){return"none"===(e=t||e).style.display||""===e.style.display&&ie(e)&&"none"===E.css(e,"display")};var se={};function ue(e,t){for(var n,r,i,o,a,s,u,l=[],c=0,f=e.length;c<f;c++)(r=e[c]).style&&(n=r.style.display,t?("none"===n&&(l[c]=Y.get(r,"display")||null,l[c]||(r.style.display="")),""===r.style.display&&ae(r)&&(l[c]=(u=a=o=void 0,a=(i=r).ownerDocument,s=i.nodeName,(u=se[s])||(o=a.body.appendChild(a.createElement(s)),u=E.css(o,"display"),o.parentNode.removeChild(o),"none"===u&&(u="block"),se[s]=u)))):"none"!==n&&(l[c]="none",Y.set(r,"display",n)));for(c=0;c<f;c++)null!=l[c]&&(e[c].style.display=l[c]);return e}E.fn.extend({show:function(){return ue(this,!0)},hide:function(){return ue(this)},toggle:function(e){return"boolean"==typeof e?e?this.show():this.hide():this.each(function(){ae(this)?E(this).show():E(this).hide()})}});var le,ce,fe=/^(?:checkbox|radio)$/i,de=/<([a-z][^\/\0>\x20\t\r\n\f]*)/i,pe=/^$|^module$|\/(?:java|ecma)script/i;le=w.createDocumentFragment().appendChild(w.createElement("div")),(ce=w.createElement("input")).setAttribute("type","radio"),ce.setAttribute("checked","checked"),ce.setAttribute("name","t"),le.appendChild(ce),m.checkClone=le.cloneNode(!0).cloneNode(!0).lastChild.checked,le.innerHTML="<textarea>x</textarea>",m.noCloneChecked=!!le.cloneNode(!0).lastChild.defaultValue,le.innerHTML="<option></option>",m.option=!!le.lastChild;var he={thead:[1,"<table>","</table>"],col:[2,"<table><colgroup>","</colgroup></table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],_default:[0,"",""]};function ge(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&S(e,t)?E.merge([e],n):n}function ve(e,t){for(var n=0,r=e.length;n<r;n++)Y.set(e[n],"globalEval",!t||Y.get(t[n],"globalEval"))}he.tbody=he.tfoot=he.colgroup=he.caption=he.thead,he.th=he.td,m.option||(he.optgroup=he.option=[1,"<select multiple='multiple'>","</select>"]);var ye=/<|&#?\w+;/;function me(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),d=[],p=0,h=e.length;p<h;p++)if((o=e[p])||0===o)if("object"===T(o))E.merge(d,o.nodeType?[o]:o);else if(ye.test(o)){a=a||f.appendChild(t.createElement("div")),s=(de.exec(o)||["",""])[1].toLowerCase(),u=he[s]||he._default,a.innerHTML=u[1]+E.htmlPrefilter(o)+u[2],c=u[0];while(c--)a=a.lastChild;E.merge(d,a.childNodes),(a=f.firstChild).textContent=""}else d.push(t.createTextNode(o));f.textContent="",p=0;while(o=d[p++])if(r&&-1<E.inArray(o,r))i&&i.push(o);else if(l=ie(o),a=ge(f.appendChild(o),"script"),l&&ve(a),n){c=0;while(o=a[c++])pe.test(o.type||"")&&n.push(o)}return f}var be=/^key/,xe=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,we=/^([^.]*)(?:\.(.+)|)/;function Ce(){return!0}function Te(){return!1}function Ee(e,t){return e===function(){try{return w.activeElement}catch(e){}}()==("focus"===t)}function Ae(e,t,n,r,i,o){var a,s;if("object"==typeof t){for(s in"string"!=typeof n&&(r=r||n,n=void 0),t)Ae(e,s,n,r,t[s],o);return e}if(null==r&&null==i?(i=n,r=n=void 0):null==i&&("string"==typeof n?(i=r,r=void 0):(i=r,r=n,n=void 0)),!1===i)i=Te;else if(!i)return e;return 1===o&&(a=i,(i=function(e){return E().off(e),a.apply(this,arguments)}).guid=a.guid||(a.guid=E.guid++)),e.each(function(){E.event.add(this,t,i,r,n)})}function Ne(e,i,o){o?(Y.set(e,i,!1),E.event.add(e,i,{namespace:!1,handler:function(e){var t,n,r=Y.get(this,i);if(1&e.isTrigger&&this[i]){if(r.length)(E.event.special[i]||{}).delegateType&&e.stopPropagation();else if(r=s.call(arguments),Y.set(this,i,r),t=o(this,i),this[i](),r!==(n=Y.get(this,i))||t?Y.set(this,i,!1):n={},r!==n)return e.stopImmediatePropagation(),e.preventDefault(),n.value}else r.length&&(Y.set(this,i,{value:E.event.trigger(E.extend(r[0],E.Event.prototype),r.slice(1),this)}),e.stopImmediatePropagation())}})):void 0===Y.get(e,i)&&E.event.add(e,i,Ce)}E.event={global:{},add:function(t,e,n,r,i){var o,a,s,u,l,c,f,d,p,h,g,v=Y.get(t);if(X(t)){n.handler&&(n=(o=n).handler,i=o.selector),i&&E.find.matchesSelector(re,i),n.guid||(n.guid=E.guid++),(u=v.events)||(u=v.events=Object.create(null)),(a=v.handle)||(a=v.handle=function(e){return"undefined"!=typeof E&&E.event.triggered!==e.type?E.event.dispatch.apply(t,arguments):void 0}),l=(e=(e||"").match(H)||[""]).length;while(l--)p=g=(s=we.exec(e[l])||[])[1],h=(s[2]||"").split(".").sort(),p&&(f=E.event.special[p]||{},p=(i?f.delegateType:f.bindType)||p,f=E.event.special[p]||{},c=E.extend({type:p,origType:g,data:r,handler:n,guid:n.guid,selector:i,needsContext:i&&E.expr.match.needsContext.test(i),namespace:h.join(".")},o),(d=u[p])||((d=u[p]=[]).delegateCount=0,f.setup&&!1!==f.setup.call(t,r,h,a)||t.addEventListener&&t.addEventListener(p,a)),f.add&&(f.add.call(t,c),c.handler.guid||(c.handler.guid=n.guid)),i?d.splice(d.delegateCount++,0,c):d.push(c),E.event.global[p]=!0)}},remove:function(e,t,n,r,i){var o,a,s,u,l,c,f,d,p,h,g,v=Y.hasData(e)&&Y.get(e);if(v&&(u=v.events)){l=(t=(t||"").match(H)||[""]).length;while(l--)if(p=g=(s=we.exec(t[l])||[])[1],h=(s[2]||"").split(".").sort(),p){f=E.event.special[p]||{},d=u[p=(r?f.delegateType:f.bindType)||p]||[],s=s[2]&&new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),a=o=d.length;while(o--)c=d[o],!i&&g!==c.origType||n&&n.guid!==c.guid||s&&!s.test(c.namespace)||r&&r!==c.selector&&("**"!==r||!c.selector)||(d.splice(o,1),c.selector&&d.delegateCount--,f.remove&&f.remove.call(e,c));a&&!d.length&&(f.teardown&&!1!==f.teardown.call(e,h,v.handle)||E.removeEvent(e,p,v.handle),delete u[p])}else for(p in u)E.event.remove(e,p+t[l],n,r,!0);E.isEmptyObject(u)&&Y.remove(e,"handle events")}},dispatch:function(e){var t,n,r,i,o,a,s=new Array(arguments.length),u=E.event.fix(e),l=(Y.get(this,"events")||Object.create(null))[u.type]||[],c=E.event.special[u.type]||{};for(s[0]=u,t=1;t<arguments.length;t++)s[t]=arguments[t];if(u.delegateTarget=this,!c.preDispatch||!1!==c.preDispatch.call(this,u)){a=E.event.handlers.call(this,u,l),t=0;while((i=a[t++])&&!u.isPropagationStopped()){u.currentTarget=i.elem,n=0;while((o=i.handlers[n++])&&!u.isImmediatePropagationStopped())u.rnamespace&&!1!==o.namespace&&!u.rnamespace.test(o.namespace)||(u.handleObj=o,u.data=o.data,void 0!==(r=((E.event.special[o.origType]||{}).handle||o.handler).apply(i.elem,s))&&!1===(u.result=r)&&(u.preventDefault(),u.stopPropagation()))}return c.postDispatch&&c.postDispatch.call(this,u),u.result}},handlers:function(e,t){var n,r,i,o,a,s=[],u=t.delegateCount,l=e.target;if(u&&l.nodeType&&!("click"===e.type&&1<=e.button))for(;l!==this;l=l.parentNode||this)if(1===l.nodeType&&("click"!==e.type||!0!==l.disabled)){for(o=[],a={},n=0;n<u;n++)void 0===a[i=(r=t[n]).selector+" "]&&(a[i]=r.needsContext?-1<E(i,this).index(l):E.find(i,this,null,[l]).length),a[i]&&o.push(r);o.length&&s.push({elem:l,handlers:o})}return l=this,u<t.length&&s.push({elem:l,handlers:t.slice(u)}),s},addProp:function(t,e){Object.defineProperty(E.Event.prototype,t,{enumerable:!0,configurable:!0,get:b(e)?function(){if(this.originalEvent)return e(this.originalEvent)}:function(){if(this.originalEvent)return this.originalEvent[t]},set:function(e){Object.defineProperty(this,t,{enumerable:!0,configurable:!0,writable:!0,value:e})}})},fix:function(e){return e[E.expando]?e:new E.Event(e)},special:{load:{noBubble:!0},click:{setup:function(e){var t=this||e;return fe.test(t.type)&&t.click&&S(t,"input")&&Ne(t,"click",Ce),!1},trigger:function(e){var t=this||e;return fe.test(t.type)&&t.click&&S(t,"input")&&Ne(t,"click"),!0},_default:function(e){var t=e.target;return fe.test(t.type)&&t.click&&S(t,"input")&&Y.get(t,"click")||S(t,"a")}},beforeunload:{postDispatch:function(e){void 0!==e.result&&e.originalEvent&&(e.originalEvent.returnValue=e.result)}}}},E.removeEvent=function(e,t,n){e.removeEventListener&&e.removeEventListener(t,n)},E.Event=function(e,t){if(!(this instanceof E.Event))return new E.Event(e,t);e&&e.type?(this.originalEvent=e,this.type=e.type,this.isDefaultPrevented=e.defaultPrevented||void 0===e.defaultPrevented&&!1===e.returnValue?Ce:Te,this.target=e.target&&3===e.target.nodeType?e.target.parentNode:e.target,this.currentTarget=e.currentTarget,this.relatedTarget=e.relatedTarget):this.type=e,t&&E.extend(this,t),this.timeStamp=e&&e.timeStamp||Date.now(),this[E.expando]=!0},E.Event.prototype={constructor:E.Event,isDefaultPrevented:Te,isPropagationStopped:Te,isImmediatePropagationStopped:Te,isSimulated:!1,preventDefault:function(){var e=this.originalEvent;this.isDefaultPrevented=Ce,e&&!this.isSimulated&&e.preventDefault()},stopPropagation:function(){var e=this.originalEvent;this.isPropagationStopped=Ce,e&&!this.isSimulated&&e.stopPropagation()},stopImmediatePropagation:function(){var e=this.originalEvent;this.isImmediatePropagationStopped=Ce,e&&!this.isSimulated&&e.stopImmediatePropagation(),this.stopPropagation()}},E.each({altKey:!0,bubbles:!0,cancelable:!0,changedTouches:!0,ctrlKey:!0,detail:!0,eventPhase:!0,metaKey:!0,pageX:!0,pageY:!0,shiftKey:!0,view:!0,"char":!0,code:!0,charCode:!0,key:!0,keyCode:!0,button:!0,buttons:!0,clientX:!0,clientY:!0,offsetX:!0,offsetY:!0,pointerId:!0,pointerType:!0,screenX:!0,screenY:!0,targetTouches:!0,toElement:!0,touches:!0,which:function(e){var t=e.button;return null==e.which&&be.test(e.type)?null!=e.charCode?e.charCode:e.keyCode:!e.which&&void 0!==t&&xe.test(e.type)?1&t?1:2&t?3:4&t?2:0:e.which}},E.event.addProp),E.each({focus:"focusin",blur:"focusout"},function(e,t){E.event.special[e]={setup:function(){return Ne(this,e,Ee),!1},trigger:function(){return Ne(this,e),!0},delegateType:t}}),E.each({mouseenter:"mouseover",mouseleave:"mouseout",pointerenter:"pointerover",pointerleave:"pointerout"},function(e,i){E.event.special[e]={delegateType:i,bindType:i,handle:function(e){var t,n=e.relatedTarget,r=e.handleObj;return n&&(n===this||E.contains(this,n))||(e.type=r.origType,t=r.handler.apply(this,arguments),e.type=i),t}}}),E.fn.extend({on:function(e,t,n,r){return Ae(this,e,t,n,r)},one:function(e,t,n,r){return Ae(this,e,t,n,r,1)},off:function(e,t,n){var r,i;if(e&&e.preventDefault&&e.handleObj)return r=e.handleObj,E(e.delegateTarget).off(r.namespace?r.origType+"."+r.namespace:r.origType,r.selector,r.handler),this;if("object"==typeof e){for(i in e)this.off(i,t,e[i]);return this}return!1!==t&&"function"!=typeof t||(n=t,t=void 0),!1===n&&(n=Te),this.each(function(){E.event.remove(this,e,n,t)})}});var Se=/<script|<style|<link/i,ke=/checked\s*(?:[^=]|=\s*.checked.)/i,De=/^\s*<!(?:\[CDATA\[|--)|(?:\]\]|--)>\s*$/g;function Le(e,t){return S(e,"table")&&S(11!==t.nodeType?t:t.firstChild,"tr")&&E(e).children("tbody")[0]||e}function je(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function qe(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Oe(e,t){var n,r,i,o,a,s;if(1===t.nodeType){if(Y.hasData(e)&&(s=Y.get(e).events))for(i in Y.remove(t,"handle events"),s)for(n=0,r=s[i].length;n<r;n++)E.event.add(t,i,s[i][n]);G.hasData(e)&&(o=G.access(e),a=E.extend({},o),G.set(t,a))}}function Pe(n,r,i,o){r=v(r);var e,t,a,s,u,l,c=0,f=n.length,d=f-1,p=r[0],h=b(p);if(h||1<f&&"string"==typeof p&&!m.checkClone&&ke.test(p))return n.each(function(e){var t=n.eq(e);h&&(r[0]=p.call(this,e,t.html())),Pe(t,r,i,o)});if(f&&(t=(e=me(r,n[0].ownerDocument,!1,n,o)).firstChild,1===e.childNodes.length&&(e=t),t||o)){for(s=(a=E.map(ge(e,"script"),je)).length;c<f;c++)u=e,c!==d&&(u=E.clone(u,!0,!0),s&&E.merge(a,ge(u,"script"))),i.call(n[c],u,c);if(s)for(l=a[a.length-1].ownerDocument,E.map(a,qe),c=0;c<s;c++)u=a[c],pe.test(u.type||"")&&!Y.access(u,"globalEval")&&E.contains(l,u)&&(u.src&&"module"!==(u.type||"").toLowerCase()?E._evalUrl&&!u.noModule&&E._evalUrl(u.src,{nonce:u.nonce||u.getAttribute("nonce")},l):C(u.textContent.replace(De,""),u,l))}return n}function He(e,t,n){for(var r,i=t?E.filter(t,e):e,o=0;null!=(r=i[o]);o++)n||1!==r.nodeType||E.cleanData(ge(r)),r.parentNode&&(n&&ie(r)&&ve(ge(r,"script")),r.parentNode.removeChild(r));return e}E.extend({htmlPrefilter:function(e){return e},clone:function(e,t,n){var r,i,o,a,s,u,l,c=e.cloneNode(!0),f=ie(e);if(!(m.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||E.isXMLDoc(e)))for(a=ge(c),r=0,i=(o=ge(e)).length;r<i;r++)s=o[r],u=a[r],void 0,"input"===(l=u.nodeName.toLowerCase())&&fe.test(s.type)?u.checked=s.checked:"input"!==l&&"textarea"!==l||(u.defaultValue=s.defaultValue);if(t)if(n)for(o=o||ge(e),a=a||ge(c),r=0,i=o.length;r<i;r++)Oe(o[r],a[r]);else Oe(e,c);return 0<(a=ge(c,"script")).length&&ve(a,!f&&ge(e,"script")),c},cleanData:function(e){for(var t,n,r,i=E.event.special,o=0;void 0!==(n=e[o]);o++)if(X(n)){if(t=n[Y.expando]){if(t.events)for(r in t.events)i[r]?E.event.remove(n,r):E.removeEvent(n,r,t.handle);n[Y.expando]=void 0}n[G.expando]&&(n[G.expando]=void 0)}}}),E.fn.extend({detach:function(e){return He(this,e,!0)},remove:function(e){return He(this,e)},text:function(e){return $(this,function(e){return void 0===e?E.text(this):this.empty().each(function(){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||(this.textContent=e)})},null,e,arguments.length)},append:function(){return Pe(this,arguments,function(e){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||Le(this,e).appendChild(e)})},prepend:function(){return Pe(this,arguments,function(e){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var t=Le(this,e);t.insertBefore(e,t.firstChild)}})},before:function(){return Pe(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this)})},after:function(){return Pe(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this.nextSibling)})},empty:function(){for(var e,t=0;null!=(e=this[t]);t++)1===e.nodeType&&(E.cleanData(ge(e,!1)),e.textContent="");return this},clone:function(e,t){return e=null!=e&&e,t=null==t?e:t,this.map(function(){return E.clone(this,e,t)})},html:function(e){return $(this,function(e){var t=this[0]||{},n=0,r=this.length;if(void 0===e&&1===t.nodeType)return t.innerHTML;if("string"==typeof e&&!Se.test(e)&&!he[(de.exec(e)||["",""])[1].toLowerCase()]){e=E.htmlPrefilter(e);try{for(;n<r;n++)1===(t=this[n]||{}).nodeType&&(E.cleanData(ge(t,!1)),t.innerHTML=e);t=0}catch(e){}}t&&this.empty().append(e)},null,e,arguments.length)},replaceWith:function(){var n=[];return Pe(this,arguments,function(e){var t=this.parentNode;E.inArray(this,n)<0&&(E.cleanData(ge(this)),t&&t.replaceChild(e,this))},n)}}),E.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(e,a){E.fn[e]=function(e){for(var t,n=[],r=E(e),i=r.length-1,o=0;o<=i;o++)t=o===i?this:this.clone(!0),E(r[o])[a](t),u.apply(n,t.get());return this.pushStack(n)}});var Ie=new RegExp("^("+ee+")(?!px)[a-z%]+$","i"),Re=function(e){var t=e.ownerDocument.defaultView;return t&&t.opener||(t=g),t.getComputedStyle(e)},Be=function(e,t,n){var r,i,o={};for(i in t)o[i]=e.style[i],e.style[i]=t[i];for(i in r=n.call(e),t)e.style[i]=o[i];return r},Me=new RegExp(ne.join("|"),"i");function We(e,t,n){var r,i,o,a,s=e.style;return(n=n||Re(e))&&(""!==(a=n.getPropertyValue(t)||n[t])||ie(e)||(a=E.style(e,t)),!m.pixelBoxStyles()&&Ie.test(a)&&Me.test(t)&&(r=s.width,i=s.minWidth,o=s.maxWidth,s.minWidth=s.maxWidth=s.width=a,a=n.width,s.width=r,s.minWidth=i,s.maxWidth=o)),void 0!==a?a+"":a}function Fe(e,t){return{get:function(){if(!e())return(this.get=t).apply(this,arguments);delete this.get}}}!function(){function e(){if(l){u.style.cssText="position:absolute;left:-11111px;width:60px;margin-top:1px;padding:0;border:0",l.style.cssText="position:relative;display:block;box-sizing:border-box;overflow:scroll;margin:auto;border:1px;padding:1px;width:60%;top:1%",re.appendChild(u).appendChild(l);var e=g.getComputedStyle(l);n="1%"!==e.top,s=12===t(e.marginLeft),l.style.right="60%",o=36===t(e.right),r=36===t(e.width),l.style.position="absolute",i=12===t(l.offsetWidth/3),re.removeChild(u),l=null}}function t(e){return Math.round(parseFloat(e))}var n,r,i,o,a,s,u=w.createElement("div"),l=w.createElement("div");l.style&&(l.style.backgroundClip="content-box",l.cloneNode(!0).style.backgroundClip="",m.clearCloneStyle="content-box"===l.style.backgroundClip,E.extend(m,{boxSizingReliable:function(){return e(),r},pixelBoxStyles:function(){return e(),o},pixelPosition:function(){return e(),n},reliableMarginLeft:function(){return e(),s},scrollboxSize:function(){return e(),i},reliableTrDimensions:function(){var e,t,n,r;return null==a&&(e=w.createElement("table"),t=w.createElement("tr"),n=w.createElement("div"),e.style.cssText="position:absolute;left:-11111px",t.style.height="1px",n.style.height="9px",re.appendChild(e).appendChild(t).appendChild(n),r=g.getComputedStyle(t),a=3<parseInt(r.height),re.removeChild(e)),a}}))}();var $e=["Webkit","Moz","ms"],ze=w.createElement("div").style,_e={};function Ue(e){var t=E.cssProps[e]||_e[e];return t||(e in ze?e:_e[e]=function(e){var t=e[0].toUpperCase()+e.slice(1),n=$e.length;while(n--)if((e=$e[n]+t)in ze)return e}(e)||e)}var Ve,Xe,Qe=/^(none|table(?!-c[ea]).+)/,Ye=/^--/,Ge={position:"absolute",visibility:"hidden",display:"block"},Ke={letterSpacing:"0",fontWeight:"400"};function Je(e,t,n){var r=te.exec(t);return r?Math.max(0,r[2]-(n||0))+(r[3]||"px"):t}function Ze(e,t,n,r,i,o){var a="width"===t?1:0,s=0,u=0;if(n===(r?"border":"content"))return 0;for(;a<4;a+=2)"margin"===n&&(u+=E.css(e,n+ne[a],!0,i)),r?("content"===n&&(u-=E.css(e,"padding"+ne[a],!0,i)),"margin"!==n&&(u-=E.css(e,"border"+ne[a]+"Width",!0,i))):(u+=E.css(e,"padding"+ne[a],!0,i),"padding"!==n?u+=E.css(e,"border"+ne[a]+"Width",!0,i):s+=E.css(e,"border"+ne[a]+"Width",!0,i));return!r&&0<=o&&(u+=Math.max(0,Math.ceil(e["offset"+t[0].toUpperCase()+t.slice(1)]-o-u-s-.5))||0),u}function et(e,t,n){var r=Re(e),i=(!m.boxSizingReliable()||n)&&"border-box"===E.css(e,"boxSizing",!1,r),o=i,a=We(e,t,r),s="offset"+t[0].toUpperCase()+t.slice(1);if(Ie.test(a)){if(!n)return a;a="auto"}return(!m.boxSizingReliable()&&i||!m.reliableTrDimensions()&&S(e,"tr")||"auto"===a||!parseFloat(a)&&"inline"===E.css(e,"display",!1,r))&&e.getClientRects().length&&(i="border-box"===E.css(e,"boxSizing",!1,r),(o=s in e)&&(a=e[s])),(a=parseFloat(a)||0)+Ze(e,t,n||(i?"border":"content"),o,r,a)+"px"}E.extend({cssHooks:{opacity:{get:function(e,t){if(t){var n=We(e,"opacity");return""===n?"1":n}}}},cssNumber:{animationIterationCount:!0,columnCount:!0,fillOpacity:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,gridArea:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnStart:!0,gridRow:!0,gridRowEnd:!0,gridRowStart:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{},style:function(e,t,n,r){if(e&&3!==e.nodeType&&8!==e.nodeType&&e.style){var i,o,a,s=V(t),u=Ye.test(t),l=e.style;if(u||(t=Ue(s)),a=E.cssHooks[t]||E.cssHooks[s],void 0===n)return a&&"get"in a&&void 0!==(i=a.get(e,!1,r))?i:l[t];"string"===(o=typeof n)&&(i=te.exec(n))&&i[1]&&(n=function(e,t,n,r){var i,o,a=20,s=r?function(){return r.cur()}:function(){return E.css(e,t,"")},u=s(),l=n&&n[3]||(E.cssNumber[t]?"":"px"),c=e.nodeType&&(E.cssNumber[t]||"px"!==l&&+u)&&te.exec(E.css(e,t));if(c&&c[3]!==l){u/=2,l=l||c[3],c=+u||1;while(a--)E.style(e,t,c+l),(1-o)*(1-(o=s()/u||.5))<=0&&(a=0),c/=o;c*=2,E.style(e,t,c+l),n=n||[]}return n&&(c=+c||+u||0,i=n[1]?c+(n[1]+1)*n[2]:+n[2],r&&(r.unit=l,r.start=c,r.end=i)),i}(e,t,i),o="number"),null!=n&&n==n&&("number"!==o||u||(n+=i&&i[3]||(E.cssNumber[s]?"":"px")),m.clearCloneStyle||""!==n||0!==t.indexOf("background")||(l[t]="inherit"),a&&"set"in a&&void 0===(n=a.set(e,n,r))||(u?l.setProperty(t,n):l[t]=n))}},css:function(e,t,n,r){var i,o,a,s=V(t);return Ye.test(t)||(t=Ue(s)),(a=E.cssHooks[t]||E.cssHooks[s])&&"get"in a&&(i=a.get(e,!0,n)),void 0===i&&(i=We(e,t,r)),"normal"===i&&t in Ke&&(i=Ke[t]),""===n||n?(o=parseFloat(i),!0===n||isFinite(o)?o||0:i):i}}),E.each(["height","width"],function(e,u){E.cssHooks[u]={get:function(e,t,n){if(t)return!Qe.test(E.css(e,"display"))||e.getClientRects().length&&e.getBoundingClientRect().width?et(e,u,n):Be(e,Ge,function(){return et(e,u,n)})},set:function(e,t,n){var r,i=Re(e),o=!m.scrollboxSize()&&"absolute"===i.position,a=(o||n)&&"border-box"===E.css(e,"boxSizing",!1,i),s=n?Ze(e,u,n,a,i):0;return a&&o&&(s-=Math.ceil(e["offset"+u[0].toUpperCase()+u.slice(1)]-parseFloat(i[u])-Ze(e,u,"border",!1,i)-.5)),s&&(r=te.exec(t))&&"px"!==(r[3]||"px")&&(e.style[u]=t,t=E.css(e,u)),Je(0,t,s)}}}),E.cssHooks.marginLeft=Fe(m.reliableMarginLeft,function(e,t){if(t)return(parseFloat(We(e,"marginLeft"))||e.getBoundingClientRect().left-Be(e,{marginLeft:0},function(){return e.getBoundingClientRect().left}))+"px"}),E.each({margin:"",padding:"",border:"Width"},function(i,o){E.cssHooks[i+o]={expand:function(e){for(var t=0,n={},r="string"==typeof e?e.split(" "):[e];t<4;t++)n[i+ne[t]+o]=r[t]||r[t-2]||r[0];return n}},"margin"!==i&&(E.cssHooks[i+o].set=Je)}),E.fn.extend({css:function(e,t){return $(this,function(e,t,n){var r,i,o={},a=0;if(Array.isArray(t)){for(r=Re(e),i=t.length;a<i;a++)o[t[a]]=E.css(e,t[a],!1,r);return o}return void 0!==n?E.style(e,t,n):E.css(e,t)},e,t,1<arguments.length)}}),E.fn.delay=function(r,e){return r=E.fx&&E.fx.speeds[r]||r,e=e||"fx",this.queue(e,function(e,t){var n=g.setTimeout(e,r);t.stop=function(){g.clearTimeout(n)}})},Ve=w.createElement("input"),Xe=w.createElement("select").appendChild(w.createElement("option")),Ve.type="checkbox",m.checkOn=""!==Ve.value,m.optSelected=Xe.selected,(Ve=w.createElement("input")).value="t",Ve.type="radio",m.radioValue="t"===Ve.value;var tt,nt=E.expr.attrHandle;E.fn.extend({attr:function(e,t){return $(this,E.attr,e,t,1<arguments.length)},removeAttr:function(e){return this.each(function(){E.removeAttr(this,e)})}}),E.extend({attr:function(e,t,n){var r,i,o=e.nodeType;if(3!==o&&8!==o&&2!==o)return"undefined"==typeof e.getAttribute?E.prop(e,t,n):(1===o&&E.isXMLDoc(e)||(i=E.attrHooks[t.toLowerCase()]||(E.expr.match.bool.test(t)?tt:void 0)),void 0!==n?null===n?void E.removeAttr(e,t):i&&"set"in i&&void 0!==(r=i.set(e,n,t))?r:(e.setAttribute(t,n+""),n):i&&"get"in i&&null!==(r=i.get(e,t))?r:null==(r=E.find.attr(e,t))?void 0:r)},attrHooks:{type:{set:function(e,t){if(!m.radioValue&&"radio"===t&&S(e,"input")){var n=e.value;return e.setAttribute("type",t),n&&(e.value=n),t}}}},removeAttr:function(e,t){var n,r=0,i=t&&t.match(H);if(i&&1===e.nodeType)while(n=i[r++])e.removeAttribute(n)}}),tt={set:function(e,t,n){return!1===t?E.removeAttr(e,n):e.setAttribute(n,n),n}},E.each(E.expr.match.bool.source.match(/\w+/g),function(e,t){var a=nt[t]||E.find.attr;nt[t]=function(e,t,n){var r,i,o=t.toLowerCase();return n||(i=nt[o],nt[o]=r,r=null!=a(e,t,n)?o:null,nt[o]=i),r}});var rt=/^(?:input|select|textarea|button)$/i,it=/^(?:a|area)$/i;function ot(e){return(e.match(H)||[]).join(" ")}function at(e){return e.getAttribute&&e.getAttribute("class")||""}function st(e){return Array.isArray(e)?e:"string"==typeof e&&e.match(H)||[]}E.fn.extend({prop:function(e,t){return $(this,E.prop,e,t,1<arguments.length)},removeProp:function(e){return this.each(function(){delete this[E.propFix[e]||e]})}}),E.extend({prop:function(e,t,n){var r,i,o=e.nodeType;if(3!==o&&8!==o&&2!==o)return 1===o&&E.isXMLDoc(e)||(t=E.propFix[t]||t,i=E.propHooks[t]),void 0!==n?i&&"set"in i&&void 0!==(r=i.set(e,n,t))?r:e[t]=n:i&&"get"in i&&null!==(r=i.get(e,t))?r:e[t]},propHooks:{tabIndex:{get:function(e){var t=E.find.attr(e,"tabindex");return t?parseInt(t,10):rt.test(e.nodeName)||it.test(e.nodeName)&&e.href?0:-1}}},propFix:{"for":"htmlFor","class":"className"}}),m.optSelected||(E.propHooks.selected={get:function(e){var t=e.parentNode;return t&&t.parentNode&&t.parentNode.selectedIndex,null},set:function(e){var t=e.parentNode;t&&(t.selectedIndex,t.parentNode&&t.parentNode.selectedIndex)}}),E.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){E.propFix[this.toLowerCase()]=this}),E.fn.extend({addClass:function(t){var e,n,r,i,o,a,s,u=0;if(b(t))return this.each(function(e){E(this).addClass(t.call(this,e,at(this)))});if((e=st(t)).length)while(n=this[u++])if(i=at(n),r=1===n.nodeType&&" "+ot(i)+" "){a=0;while(o=e[a++])r.indexOf(" "+o+" ")<0&&(r+=o+" ");i!==(s=ot(r))&&n.setAttribute("class",s)}return this},removeClass:function(t){var e,n,r,i,o,a,s,u=0;if(b(t))return this.each(function(e){E(this).removeClass(t.call(this,e,at(this)))});if(!arguments.length)return this.attr("class","");if((e=st(t)).length)while(n=this[u++])if(i=at(n),r=1===n.nodeType&&" "+ot(i)+" "){a=0;while(o=e[a++])while(-1<r.indexOf(" "+o+" "))r=r.replace(" "+o+" "," ");i!==(s=ot(r))&&n.setAttribute("class",s)}return this},toggleClass:function(i,t){var o=typeof i,a="string"===o||Array.isArray(i);return"boolean"==typeof t&&a?t?this.addClass(i):this.removeClass(i):b(i)?this.each(function(e){E(this).toggleClass(i.call(this,e,at(this),t),t)}):this.each(function(){var e,t,n,r;if(a){t=0,n=E(this),r=st(i);while(e=r[t++])n.hasClass(e)?n.removeClass(e):n.addClass(e)}else void 0!==i&&"boolean"!==o||((e=at(this))&&Y.set(this,"__className__",e),this.setAttribute&&this.setAttribute("class",e||!1===i?"":Y.get(this,"__className__")||""))})},hasClass:function(e){var t,n,r=0;t=" "+e+" ";while(n=this[r++])if(1===n.nodeType&&-1<(" "+ot(at(n))+" ").indexOf(t))return!0;return!1}});var ut=/\r/g;E.fn.extend({val:function(n){var r,e,i,t=this[0];return arguments.length?(i=b(n),this.each(function(e){var t;1===this.nodeType&&(null==(t=i?n.call(this,e,E(this).val()):n)?t="":"number"==typeof t?t+="":Array.isArray(t)&&(t=E.map(t,function(e){return null==e?"":e+""})),(r=E.valHooks[this.type]||E.valHooks[this.nodeName.toLowerCase()])&&"set"in r&&void 0!==r.set(this,t,"value")||(this.value=t))})):t?(r=E.valHooks[t.type]||E.valHooks[t.nodeName.toLowerCase()])&&"get"in r&&void 0!==(e=r.get(t,"value"))?e:"string"==typeof(e=t.value)?e.replace(ut,""):null==e?"":e:void 0}}),E.extend({valHooks:{option:{get:function(e){var t=E.find.attr(e,"value");return null!=t?t:ot(E.text(e))}},select:{get:function(e){var t,n,r,i=e.options,o=e.selectedIndex,a="select-one"===e.type,s=a?null:[],u=a?o+1:i.length;for(r=o<0?u:a?o:0;r<u;r++)if(((n=i[r]).selected||r===o)&&!n.disabled&&(!n.parentNode.disabled||!S(n.parentNode,"optgroup"))){if(t=E(n).val(),a)return t;s.push(t)}return s},set:function(e,t){var n,r,i=e.options,o=E.makeArray(t),a=i.length;while(a--)((r=i[a]).selected=-1<E.inArray(E.valHooks.option.get(r),o))&&(n=!0);return n||(e.selectedIndex=-1),o}}}}),E.each(["radio","checkbox"],function(){E.valHooks[this]={set:function(e,t){if(Array.isArray(t))return e.checked=-1<E.inArray(E(e).val(),t)}},m.checkOn||(E.valHooks[this].get=function(e){return null===e.getAttribute("value")?"on":e.value})}),m.focusin="onfocusin"in g;var lt=/^(?:focusinfocus|focusoutblur)$/,ct=function(e){e.stopPropagation()};E.extend(E.event,{trigger:function(e,t,n,r){var i,o,a,s,u,l,c,f,d=[n||w],p=y.call(e,"type")?e.type:e,h=y.call(e,"namespace")?e.namespace.split("."):[];if(o=f=a=n=n||w,3!==n.nodeType&&8!==n.nodeType&&!lt.test(p+E.event.triggered)&&(-1<p.indexOf(".")&&(p=(h=p.split(".")).shift(),h.sort()),u=p.indexOf(":")<0&&"on"+p,(e=e[E.expando]?e:new E.Event(p,"object"==typeof e&&e)).isTrigger=r?2:3,e.namespace=h.join("."),e.rnamespace=e.namespace?new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,e.result=void 0,e.target||(e.target=n),t=null==t?[e]:E.makeArray(t,[e]),c=E.event.special[p]||{},r||!c.trigger||!1!==c.trigger.apply(n,t))){if(!r&&!c.noBubble&&!x(n)){for(s=c.delegateType||p,lt.test(s+p)||(o=o.parentNode);o;o=o.parentNode)d.push(o),a=o;a===(n.ownerDocument||w)&&d.push(a.defaultView||a.parentWindow||g)}i=0;while((o=d[i++])&&!e.isPropagationStopped())f=o,e.type=1<i?s:c.bindType||p,(l=(Y.get(o,"events")||Object.create(null))[e.type]&&Y.get(o,"handle"))&&l.apply(o,t),(l=u&&o[u])&&l.apply&&X(o)&&(e.result=l.apply(o,t),!1===e.result&&e.preventDefault());return e.type=p,r||e.isDefaultPrevented()||c._default&&!1!==c._default.apply(d.pop(),t)||!X(n)||u&&b(n[p])&&!x(n)&&((a=n[u])&&(n[u]=null),E.event.triggered=p,e.isPropagationStopped()&&f.addEventListener(p,ct),n[p](),e.isPropagationStopped()&&f.removeEventListener(p,ct),E.event.triggered=void 0,a&&(n[u]=a)),e.result}},simulate:function(e,t,n){var r=E.extend(new E.Event,n,{type:e,isSimulated:!0});E.event.trigger(r,null,t)}}),E.fn.extend({trigger:function(e,t){return this.each(function(){E.event.trigger(e,t,this)})},triggerHandler:function(e,t){var n=this[0];if(n)return E.event.trigger(e,t,n,!0)}}),m.focusin||E.each({focus:"focusin",blur:"focusout"},function(n,r){var i=function(e){E.event.simulate(r,e.target,E.event.fix(e))};E.event.special[r]={setup:function(){var e=this.ownerDocument||this.document||this,t=Y.access(e,r);t||e.addEventListener(n,i,!0),Y.access(e,r,(t||0)+1)},teardown:function(){var e=this.ownerDocument||this.document||this,t=Y.access(e,r)-1;t?Y.access(e,r,t):(e.removeEventListener(n,i,!0),Y.remove(e,r))}}}),E.parseXML=function(e){var t;if(!e||"string"!=typeof e)return null;try{t=(new g.DOMParser).parseFromString(e,"text/xml")}catch(e){t=void 0}return t&&!t.getElementsByTagName("parsererror").length||E.error("Invalid XML: "+e),t};var ft,dt=/\[\]$/,pt=/\r?\n/g,ht=/^(?:submit|button|image|reset|file)$/i,gt=/^(?:input|select|textarea|keygen)/i;function vt(n,e,r,i){var t;if(Array.isArray(e))E.each(e,function(e,t){r||dt.test(n)?i(n,t):vt(n+"["+("object"==typeof t&&null!=t?e:"")+"]",t,r,i)});else if(r||"object"!==T(e))i(n,e);else for(t in e)vt(n+"["+t+"]",e[t],r,i)}E.param=function(e,t){var n,r=[],i=function(e,t){var n=b(t)?t():t;r[r.length]=encodeURIComponent(e)+"="+encodeURIComponent(null==n?"":n)};if(null==e)return"";if(Array.isArray(e)||e.jquery&&!E.isPlainObject(e))E.each(e,function(){i(this.name,this.value)});else for(n in e)vt(n,e[n],t,i);return r.join("&")},E.fn.extend({serialize:function(){return E.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var e=E.prop(this,"elements");return e?E.makeArray(e):this}).filter(function(){var e=this.type;return this.name&&!E(this).is(":disabled")&&gt.test(this.nodeName)&&!ht.test(e)&&(this.checked||!fe.test(e))}).map(function(e,t){var n=E(this).val();return null==n?null:Array.isArray(n)?E.map(n,function(e){return{name:t.name,value:e.replace(pt,"\r\n")}}):{name:t.name,value:n.replace(pt,"\r\n")}}).get()}}),E.fn.extend({wrapAll:function(e){var t;return this[0]&&(b(e)&&(e=e.call(this[0])),t=E(e,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&t.insertBefore(this[0]),t.map(function(){var e=this;while(e.firstElementChild)e=e.firstElementChild;return e}).append(this)),this},wrapInner:function(n){return b(n)?this.each(function(e){E(this).wrapInner(n.call(this,e))}):this.each(function(){var e=E(this),t=e.contents();t.length?t.wrapAll(n):e.append(n)})},wrap:function(t){var n=b(t);return this.each(function(e){E(this).wrapAll(n?t.call(this,e):t)})},unwrap:function(e){return this.parent(e).not("body").each(function(){E(this).replaceWith(this.childNodes)}),this}}),E.expr.pseudos.hidden=function(e){return!E.expr.pseudos.visible(e)},E.expr.pseudos.visible=function(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)},m.createHTMLDocument=((ft=w.implementation.createHTMLDocument("").body).innerHTML="<form></form><form></form>",2===ft.childNodes.length),E.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(m.createHTMLDocument?((r=(t=w.implementation.createHTMLDocument("")).createElement("base")).href=w.location.href,t.head.appendChild(r)):t=w),o=!n&&[],(i=k.exec(e))?[t.createElement(i[1])]:(i=me([e],t,o),o&&o.length&&E(o).remove(),E.merge([],i.childNodes)));var r,i,o},E.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=E.css(e,"position"),c=E(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=E.css(e,"top"),u=E.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),b(t)&&(t=t.call(e,n,E.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):("number"==typeof f.top&&(f.top+="px"),"number"==typeof f.left&&(f.left+="px"),c.css(f))}},E.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){E.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===E.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===E.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=E(e).offset()).top+=E.css(e,"borderTopWidth",!0),i.left+=E.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-E.css(r,"marginTop",!0),left:t.left-i.left-E.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===E.css(e,"position"))e=e.offsetParent;return e||re})}}),E.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;E.fn[t]=function(e){return $(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),E.each(["top","left"],function(e,n){E.cssHooks[n]=Fe(m.pixelPosition,function(e,t){if(t)return t=We(e,n),Ie.test(t)?E(e).position()[n]+"px":t})}),E.each({Height:"height",Width:"width"},function(a,s){E.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){E.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return $(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?E.css(e,t,i):E.style(e,t,n,i)},s,n?e:void 0,n)}})}),E.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),E.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){E.fn[n]=function(e,t){return 0<arguments.length?this.on(n,null,e,t):this.trigger(n)}});var yt=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;E.proxy=function(e,t){var n,r,i;if("string"==typeof t&&(n=e[t],t=e,e=n),b(e))return r=s.call(arguments,2),(i=function(){return e.apply(t||this,r.concat(s.call(arguments)))}).guid=e.guid=e.guid||E.guid++,i},E.holdReady=function(e){e?E.readyWait++:E.ready(!0)},E.isArray=Array.isArray,E.parseJSON=JSON.parse,E.nodeName=S,E.isFunction=b,E.isWindow=x,E.camelCase=V,E.type=T,E.now=Date.now,E.isNumeric=function(e){var t=E.type(e);return("number"===t||"string"===t)&&!isNaN(e-parseFloat(e))},E.trim=function(e){return null==e?"":(e+"").replace(yt,"")},"function"==typeof define&&define.amd&&define("jquery",[],function(){return E});var mt=g.jQuery,bt=g.$;return E.noConflict=function(e){return g.$===E&&(g.$=bt),e&&g.jQuery===E&&(g.jQuery=mt),E},"undefined"==typeof e&&(g.jQuery=g.$=E),E});
diff --git a/package-lock.json b/package-lock.json
index 9f4bde2af..914cc8c29 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "tabler",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.6",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index a08906482..bbf447f83 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tabler",
-  "version": "1.0.0-alpha.5",
-  "version_short": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.6",
+  "version_short": "1.0.0-alpha.6",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "scripts": {
     "start": "npm-run-all clean css-main js-compile-standalone --parallel browsersync watch",
diff --git a/scss/demo.scss b/scss/demo.scss
index d5b1ab965..dbfa929ad 100644
--- a/scss/demo.scss
+++ b/scss/demo.scss
@@ -1,5 +1,5 @@
 /*!
- * Tabler (v1.0.0-alpha.5)
+ * Tabler (v1.0.0-alpha.6)
  * Copyright 2018-2020 The Tabler Authors
  * Copyright 2018-2020 codecalm
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
diff --git a/scss/tabler-buttons.scss b/scss/tabler-buttons.scss
index af2b33074..6631d54ab 100644
--- a/scss/tabler-buttons.scss
+++ b/scss/tabler-buttons.scss
@@ -1,5 +1,5 @@
 /*!
- * Tabler (v1.0.0-alpha.5)
+ * Tabler (v1.0.0-alpha.6)
  * Copyright 2018-2020 The Tabler Authors
  * Copyright 2018-2020 codecalm
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
diff --git a/scss/tabler-flags.scss b/scss/tabler-flags.scss
index 35ff33499..2f6c8a5bc 100644
--- a/scss/tabler-flags.scss
+++ b/scss/tabler-flags.scss
@@ -1,5 +1,5 @@
 /*!
- * Tabler (v1.0.0-alpha.5)
+ * Tabler (v1.0.0-alpha.6)
  * Copyright 2018-2020 The Tabler Authors
  * Copyright 2018-2020 codecalm
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
diff --git a/scss/tabler-payments.scss b/scss/tabler-payments.scss
index a76a95229..ce9373430 100644
--- a/scss/tabler-payments.scss
+++ b/scss/tabler-payments.scss
@@ -1,5 +1,5 @@
 /*!
- * Tabler (v1.0.0-alpha.5)
+ * Tabler (v1.0.0-alpha.6)
  * Copyright 2018-2020 The Tabler Authors
  * Copyright 2018-2020 codecalm
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
diff --git a/scss/tabler.scss b/scss/tabler.scss
index 8f4461265..b6658b750 100644
--- a/scss/tabler.scss
+++ b/scss/tabler.scss
@@ -1,5 +1,5 @@
 /*!
- * Tabler (v1.0.0-alpha.5)
+ * Tabler (v1.0.0-alpha.6)
  * Copyright 2018-2020 The Tabler Authors
  * Copyright 2018-2020 codecalm
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)

No results found